diff --git a/src/Components/SmartComponents/CVEs/CVEs.js b/src/Components/SmartComponents/CVEs/CVEs.js index 567f9402f..7cd3be221 100644 --- a/src/Components/SmartComponents/CVEs/CVEs.js +++ b/src/Components/SmartComponents/CVEs/CVEs.js @@ -5,8 +5,8 @@ import PropTypes from 'prop-types'; import { CVES_ALLOWED_PARAMS, PATCHMAN_ADVISORY_DOCS_PATH, PERMISSIONS, SERVICE_NAME } from '../../../Helpers/constants'; import { createCveListByAccount } from '../../../Helpers/VulnerabilityHelper'; import { constructFilterParameters, updateRef, useUrlParams } from '../../../Helpers/MiscHelper'; -import BusinessRiskModal from '../Modals/BusinessRiskModal'; -import StatusModal from '../Modals/CveStatusModal'; +import { CveStatusModal } from './components/CveStatusModal'; +import { CveBusinessRiskModal } from './components/CveBusinessRiskModal'; import CVEsTable from './CVEsTable'; import CVEsTableToolbar from './CVEsTableToolbar'; import DownloadReport from '../../../Helpers/DownloadReport'; @@ -33,9 +33,41 @@ export const CVETableContext = React.createContext({}); export const CVEs = ({ rbac }) => { const dispatch = useDispatch(); - const [CveStatusModal, setStatusModal] = useState(() => () => null); - const [CveBusinessRiskModal, setBusinessRiskModal] = useState(() => () => null); - const [isFirstLoad, setFirstLoad] = useState(true); + + // These states will contain data only when the modals are open + // This is necessary because the showModal functions get these props down in the component tree + const [cvesList, setCvesList] = useState([]); + const [goToFirstPage, setGoToFirstPage] = useState(false); + + const [isStatusModalOpen, setIsStatusModalOpen] = useState(false); + const [isBusinessRiskModalOpen, setIsBusinessRiskModalOpen] = useState(false); + + const closeModalHandler = () => { + setCvesList([]); + setGoToFirstPage(false); + }; + + const closeStatusModalHandler = () => { + closeModalHandler(); + setIsStatusModalOpen(false); + }; + + const closeBusinessRiskModalHandler = () => { + closeModalHandler(); + setIsBusinessRiskModalOpen(false); + }; + + // useEffect(() => { + // closeModalHandler(isStatusModalOpen); + // }, [isStatusModalOpen]); + + // useEffect(() => { + // closeModalHandler(isBusinessRiskModalOpen); + // }, [isBusinessRiskModalOpen]); + + // This state causes a re-render when updateRef is called in and + // to fetch the updated status of the CVEs + const [causeARerender, setCauseARerender] = useState(false); const [[ canEditStatusOrBusinessRisk, @@ -81,14 +113,9 @@ export const CVEs = ({ rbac }) => { }, [shouldUseHybridSystemFilter]); useEffect(() => { - if (isFirstLoad) { - setFirstLoad(false); - } - else { - dispatch(fetchCveListByAccount(parameters, shouldUseHybridSystemFilter)); - setUrlParam({ ...parameters }); - } - }, [parameters, isFirstLoad, shouldUseHybridSystemFilter]); + dispatch(fetchCveListByAccount(parameters, shouldUseHybridSystemFilter)); + setUrlParam({ ...parameters }); + }, [parameters, causeARerender, shouldUseHybridSystemFilter]); useEffect(() => { return () => { @@ -113,33 +140,29 @@ export const CVEs = ({ rbac }) => { ); }; - const showBusinessRiskModal = (cvesList, goToFirstPage) => { + // helper function for showBusinessRiskModal and showStatusModal: + const updateRefFuncBuilder = (goToFirstPage) => { const { meta } = cves; - setBusinessRiskModal(() => () => - { - setFirstLoad(true); - dispatch(clearCVEsStore()); - updateRef(goToFirstPage ? { ...meta, page: 1 } : meta, parameters, apply); - }} - /> - ); + + return (() => { + setCauseARerender(!causeARerender); + dispatch(clearCVEsStore()); + updateRef(goToFirstPage ? { ...meta, page: 1 } : meta, parameters, apply); + }); + }; + + const showModal = (setIsModalOpen, cvesList, goToFirstPage) => { + setCvesList(cvesList); + setGoToFirstPage(goToFirstPage); + setIsModalOpen(true); }; const showStatusModal = (cvesList, goToFirstPage) => { - const { meta } = cves; - setStatusModal(() => () => - { - setFirstLoad(true); - dispatch(clearCVEsStore()); - updateRef(goToFirstPage ? { ...meta, page: 1 } : meta, parameters, apply); - }} - /> - ); + showModal(setIsStatusModalOpen, cvesList, goToFirstPage); + }; + + const showBusinessRiskModal = (cvesList, goToFirstPage) => { + showModal(setIsBusinessRiskModalOpen, cvesList, goToFirstPage); }; const openCves = (cves) => { @@ -168,8 +191,20 @@ export const CVEs = ({ rbac }) => { } }} > - - + { isBusinessRiskModalOpen && + closeBusinessRiskModalHandler()} + />} + + { isStatusModalOpen && + closeStatusModalHandler()} + />} {ColumnManagementModal} diff --git a/src/Components/SmartComponents/CVEs/CVEsTableToolbar.js b/src/Components/SmartComponents/CVEs/CVEsTableToolbar.js index 33331c7cb..0e5386a66 100644 --- a/src/Components/SmartComponents/CVEs/CVEsTableToolbar.js +++ b/src/Components/SmartComponents/CVEs/CVEsTableToolbar.js @@ -159,7 +159,7 @@ const CVEsTableToolbarWithContext = ({ context, canEditStatusOrBusinessRisk, can isDisabled: cves.meta.total_items === 0 && selectedCvesCount === 0, checked: Boolean(selectedCvesCount), ouiaId: 'bulk-select', - onSelect: () => selectOptions.handleOnCheckboxChange() + onSelect: selectOptions.handleOnCheckboxChange } : undefined} filterConfig={{ items: [ diff --git a/src/Components/SmartComponents/CVEs/components/CveBusinessRiskModal.js b/src/Components/SmartComponents/CVEs/components/CveBusinessRiskModal.js new file mode 100644 index 000000000..7d01e4f45 --- /dev/null +++ b/src/Components/SmartComponents/CVEs/components/CveBusinessRiskModal.js @@ -0,0 +1,22 @@ +import React from 'react'; +import propTypes from 'prop-types'; + +import BusinessRiskModal from '../..//Modals/BusinessRiskModal'; + +export const CveBusinessRiskModal = ({ cvesList, updateRefFunc, closeModalHandler }) => ( + +); + +CveBusinessRiskModal.propTypes = { + cvesList: propTypes.array, + updateRefFunc: propTypes.func, + closeModalHandler: propTypes.func +}; + +CveBusinessRiskModal.defaultProps = { + cvesList: [] +}; diff --git a/src/Components/SmartComponents/CVEs/components/CveStatusModal.js b/src/Components/SmartComponents/CVEs/components/CveStatusModal.js new file mode 100644 index 000000000..f7d4136f8 --- /dev/null +++ b/src/Components/SmartComponents/CVEs/components/CveStatusModal.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import StatusModal from '../../Modals/CveStatusModal'; + +export const CveStatusModal = ({ cvesList, canEditPairStatus, updateRefFunc, closeModalHandler }) => ( + +); + +CveStatusModal.propTypes = { + cvesList: PropTypes.array, + canEditPairStatus: PropTypes.bool, + updateRefFunc: PropTypes.func, + closeModalHandler: PropTypes.func +}; + +CveStatusModal.defaultProps = { + cvesList: [] +}; diff --git a/src/Components/SmartComponents/Modals/BaseModal.js b/src/Components/SmartComponents/Modals/BaseModal.js index 84480f697..8eac038d3 100644 --- a/src/Components/SmartComponents/Modals/BaseModal.js +++ b/src/Components/SmartComponents/Modals/BaseModal.js @@ -47,12 +47,22 @@ export function useJustificationInput(initialValue) { return { JustificationInput, justification, setJustification, setProps }; } -export const BaseModal = ({ items, title, onSave, onSuccessNotification, onFailureNotification, ouiaId, children }) => { +export const BaseModal = ({ + items, + title, + onSave, + onSuccessNotification, + onFailureNotification, + ouiaId, + children, + closeModalHandler +}) => { const [targetItems, setTargetItems] = useState(items); const dispatch = useDispatch(); const handleClose = () => { + closeModalHandler(); setTargetItems(undefined); }; @@ -96,7 +106,12 @@ BaseModal.propTypes = { onSave: propTypes.func, onSuccessNotification: propTypes.object, onFailureNotification: propTypes.object, - ouiaId: propTypes.string + ouiaId: propTypes.string, + closeModalHandler: propTypes.func +}; + +BaseModal.defaultProps = { + closeModalHandler: () => {} }; export default BaseModal; diff --git a/src/Components/SmartComponents/Modals/BusinessRiskModal.js b/src/Components/SmartComponents/Modals/BusinessRiskModal.js index e2d42ad65..b6485ba6b 100644 --- a/src/Components/SmartComponents/Modals/BusinessRiskModal.js +++ b/src/Components/SmartComponents/Modals/BusinessRiskModal.js @@ -7,7 +7,7 @@ import BaseModal from './BaseModal'; import { injectIntl } from 'react-intl'; import messages from '../../../Messages'; -export const BusinessRiskModal = ({ cves, updateRef, intl }) => { +export const BusinessRiskModal = ({ cves, updateRef, intl, closeModalHandler }) => { const [cveList] = useState(cves); const [businessRiskId, setBusinessRiskId] = useState('0'); const [label, setLabel] = useState(); @@ -66,6 +66,7 @@ export const BusinessRiskModal = ({ cves, updateRef, intl }) => { onFailureNotification={onFailureNotification} title={intl.formatMessage(messages.businessRiskModalTitle)} ouiaId="business-risk-modal" + closeModalHandler={closeModalHandler} > @@ -109,7 +110,8 @@ export const BusinessRiskModal = ({ cves, updateRef, intl }) => { BusinessRiskModal.propTypes = { cves: propTypes.array, updateRef: propTypes.func, - intl: propTypes.any + intl: propTypes.any, + closeModalHandler: propTypes.func }; export default injectIntl(BusinessRiskModal); diff --git a/src/Components/SmartComponents/Modals/CveStatusModal.js b/src/Components/SmartComponents/Modals/CveStatusModal.js index 637998a6d..e963e6e21 100644 --- a/src/Components/SmartComponents/Modals/CveStatusModal.js +++ b/src/Components/SmartComponents/Modals/CveStatusModal.js @@ -7,7 +7,7 @@ import BaseModal, { useJustificationInput, useStatusSelect } from './BaseModal'; import { injectIntl } from 'react-intl'; import messages from '../../../Messages'; -export const CveStatusModal = ({ cves, updateRef, intl, canEditPairStatus }) => { +export const CveStatusModal = ({ cves, updateRef, intl, canEditPairStatus, closeModalHandler }) => { const [cveList] = useState(cves); const { StatusSelect, statusId, setProps: setSelectProps } = useStatusSelect(getDefaultStatus()); const { JustificationInput, justification } = useJustificationInput(getDefaultJustification()); @@ -70,6 +70,7 @@ export const CveStatusModal = ({ cves, updateRef, intl, canEditPairStatus }) => onFailureNotification={onFailureNotification} title={title} ouiaId="status-modal" + closeModalHandler={closeModalHandler} > @@ -139,7 +140,8 @@ CveStatusModal.propTypes = { cves: propTypes.array, updateRef: propTypes.func, intl: propTypes.any, - canEditPairStatus: propTypes.bool.isRequired + canEditPairStatus: propTypes.bool.isRequired, + closeModalHandler: propTypes.func }; export default injectIntl(CveStatusModal);