fix: implement confirmation window for multi-select actions (#1288)

Author: jekabs-karklins

apps/e2e/cypress/e2e/instruments.cy.ts

@@ -642,6 +642,8 @@ context('Instrument tests', () => {
 
       cy.get('[data-cy="bulk-reassign-reviews"]').click();
 
+      cy.get('[data-cy="confirm-ok"]').click();
+
       cy.get('@createdProposal2Id').then((proposalId) => {
         cy.get('[data-cy="multi-instrument-alert"]').contains(`${proposalId}`);
       });

apps/frontend/src/components/proposal/ProposalTableOfficer.tsx

@@ -14,6 +14,7 @@ import GetAppIcon from '@mui/icons-material/GetApp';
 import GridOnIcon from '@mui/icons-material/GridOn';
 import GroupWork from '@mui/icons-material/GroupWork';
 import ReduceCapacityIcon from '@mui/icons-material/ReduceCapacity';
+import Warning from '@mui/icons-material/Warning';
 import { IconButton, Tooltip } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -462,6 +463,30 @@ const ProposalTableOfficer = ({
       searchParams.getAll('selection').includes(item.primaryKey.toString())
     );
 
+  const runWithMultiSelectConfirm = (action: () => void) => {
+    const selectedCount = getSelectedProposalPks().length;
+
+    if (selectedCount > 1) {
+      confirm(action, {
+        title: 'Are you sure? Multiple proposals selected!',
+        description: (
+          <Box display="flex" alignItems="center">
+            <Warning color="warning" sx={{ marginRight: 1 }} />
+            <span>
+              <b>{selectedCount}</b> proposals are selected. This action will
+              run on all of the selected proposals. Are you sure you want to
+              proceed?
+            </span>
+          </Box>
+        ),
+        confirmationText: 'Yes, proceed',
+        cancellationText: 'Cancel',
+      })();
+    } else {
+      action();
+    }
+  };
+
   const handleClose = (selectedOption: string) => {
     const firstSelectedProposalTitle = getSelectedProposalsData()[0].title;
     if (selectedOption === PdfDownloadMenuOption.PDF) {
@@ -780,9 +805,10 @@ const ProposalTableOfficer = ({
     {
       icon: FileCopy,
       tooltip: 'Clone proposals to call',
-      onClick: () => {
-        setOpenCallSelection(true);
-      },
+      onClick: () =>
+        runWithMultiSelectConfirm(() => {
+          setOpenCallSelection(true);
+        }),
       position: 'toolbarOnSelect',
     },
     {
@@ -817,8 +843,7 @@ const ProposalTableOfficer = ({
           },
           {
             title: 'Delete proposals',
-            description:
-              'This action will delete proposals and all data associated with them.',
+            description: `This action will delete ${selectedProposalsData.length} proposal(s) and all data associated with them.`,
           }
         )();
       },
@@ -911,7 +936,9 @@ const ProposalTableOfficer = ({
     tableActions.push({
       icon: ReduceCapacityIconComponent,
       tooltip: 'Reassign selected Techniqual Reviews',
-      onClick: handleBulkTechnicalReviewsReassign,
+      onClick: () => {
+        runWithMultiSelectConfirm(handleBulkTechnicalReviewsReassign);
+      },
       position: 'toolbarOnSelect',
     });