Merge pull request #5191 from OneCommunityGlobal/Diya_Fix_ProjectPageButtonPopups

Diya 🔥 fix(popup): Fixed Project Page Button Popups

Author: one-community

src/components/Projects/Projects.jsx

@@ -94,9 +94,12 @@ const Projects = function(props) {
 
   const onClickArchiveBtn = projectData => {
     setProjectTarget(projectData);
+    const archiveMessage = projectData.isArchived
+      ? `<p style="${darkMode ? 'color: white' : 'color: black'}">Do you want to unarchive <b>${projectData.projectName}</b>? This will restore it and its tasks.</p>`
+      : `<p style="${darkMode ? 'color: white' : 'color: black'}"><b>Hold on!</b><br/>Archiving <b>${projectData.projectName}</b> will deactivate all its WBS, tasks, and time entries, and remove it from all team members' profiles.<br/><b>Sure about this?</b></p>`;
     setModalData({
       showModal: true,
-      modalMessage: `<p style="${darkMode ? 'color: white' : 'color: black'}">Do you want to ${projectData.isArchived ? 'unarchive' : 'archive'} ${projectData.projectName}?</p>`,
+      modalMessage: archiveMessage,
       modalTitle: projectData.isArchived ? 'Confirm Unarchive' : CONFIRM_ARCHIVE,
       hasConfirmBtn: true,
       hasInactiveBtn: false,
@@ -431,7 +434,7 @@ const Projects = function(props) {
         darkMode={darkMode}
         confirmButtonText={isArchiving
           ? (projectTarget.isArchived ? 'Unarchiving...' : 'Archiving...') 
-          : (projectTarget.isArchived ? 'Unarchive' : 'Confirm')
+          : (projectTarget.isArchived ? 'Unarchive' : 'Yes, archive it')
         }
         isConfirmDisabled={isArchiving}
         setInactiveButton={isChangingStatus ? 'Setting Inactive' : 'Yes, hide it all'}

src/components/common/Modal/Modal.jsx

@@ -88,14 +88,42 @@ const ModalExample = props => {
       </ModalBody>
       <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
         {setInactiveModal != null ? (
-          <Button color="danger" onClick={closeModal} style={darkMode ? boxStyleDark : boxStyle}>
-            Nope, changed my mind
-          </Button>
+          <>
+            <Button
+              color="secondary"
+              onClick={closeModal}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              Nope, changed my mind
+            </Button>
+            <Button
+              color="success"
+              disabled={isSetInactiveDisabled}
+              onClick={setInactiveModal}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              {isSetInactiveDisabled ? 'Setting Inactive...' : setInactiveButton}
+            </Button>
+          </>
         ) : null}
         {setActiveModal != null ? (
-          <Button color="danger" onClick={closeModal} style={darkMode ? boxStyleDark : boxStyle}>
-            Nope, leave it buried
-          </Button>
+          <>
+            <Button
+              color="secondary"
+              onClick={closeModal}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              Nope, leave it buried
+            </Button>
+            <Button
+              color="success"
+              disabled={isSetActiveDisabled}
+              onClick={setActiveModal}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              {isSetActiveDisabled ? 'Setting Active...' : setActiveButton}
+            </Button>
+          </>
         ) : null}
         {/*
         {confirmModal != null ? (
@@ -151,7 +179,7 @@ const ModalExample = props => {
         {/* Close button */}
         {confirmModal && (
           <Button color="secondary" onClick={closeModal} style={darkMode ? boxStyleDark : boxStyle}>
-            Close
+            Nope, changed my mind
           </Button>
         )}
 

src/components/common/Modal/__tests__/Modal.test.jsx

@@ -37,7 +37,7 @@ describe('ModalExample Component', () => {
       </Provider>,
     );
 
-    fireEvent.click(screen.getByText('Close'));
+    fireEvent.click(screen.getByText('Nope, changed my mind'));
     expect(closeModalMock).toHaveBeenCalledTimes(1);
   });
 
@@ -110,7 +110,7 @@ describe('ModalExample Component', () => {
       />,
     );
 
-    fireEvent.click(screen.getByText(/yes, hide it all/i));
+    fireEvent.click(screen.getAllByText(/yes, hide it all/i)[0]);
     expect(setInactiveModalMock).toHaveBeenCalled();
   });