Refactor(CVEs): Remove Unnecessary Re-render and Code Duplication

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 <BusinessRiskModal> and <StatusModal>
+    // 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(() => () =>
-            <BusinessRiskModal
-                cves={cvesList}
-                updateRef={() => {
-                    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(() => () =>
-            <StatusModal
-                cves={cvesList}
-                canEditPairStatus={canEditPairStatus}
-                updateRef={() => {
-                    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 }) => {
                             }
                         }}
                     >
-                        <CveBusinessRiskModal />
-                        <CveStatusModal />
+                        { isBusinessRiskModalOpen &&
+                        <CveBusinessRiskModal
+                            cves={cvesList}
+                            updateRef={updateRefFuncBuilder(goToFirstPage)}
+                            closeModalHandler={() => closeBusinessRiskModalHandler()}
+                        />}
+
+                        { isStatusModalOpen &&
+                        <CveStatusModal
+                            cves={cvesList}
+                            canEditPairStatus={canEditPairStatus}
+                            updateRef={updateRefFuncBuilder(goToFirstPage)}
+                            closeModalHandler={() => closeStatusModalHandler()}
+                        />}
 
                         {ColumnManagementModal}
 

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: [

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 }) => (
+    <BusinessRiskModal
+        cves={cvesList}
+        updateRef={updateRefFunc}
+        closeModalHandler={closeModalHandler}
+    />
+);
+
+CveBusinessRiskModal.propTypes = {
+    cvesList: propTypes.array,
+    updateRefFunc: propTypes.func,
+    closeModalHandler: propTypes.func
+};
+
+CveBusinessRiskModal.defaultProps = {
+    cvesList: []
+};

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 }) => (
+    <StatusModal
+        cves={cvesList}
+        canEditPairStatus={canEditPairStatus}
+        updateRef={updateRefFunc}
+        closeModalHandler={closeModalHandler}
+    />
+);
+
+CveStatusModal.propTypes = {
+    cvesList: PropTypes.array,
+    canEditPairStatus: PropTypes.bool,
+    updateRefFunc: PropTypes.func,
+    closeModalHandler: PropTypes.func
+};
+
+CveStatusModal.defaultProps = {
+    cvesList: []
+};

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;

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}
         >
             <Stack hasGutter>
                 <StackItem>
@@ -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);

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}
         >
             <Stack hasGutter>
                 <StackItem>
@@ -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);