Austenem/CAT-386 add confirmation window

CHANGELOG-add-confirmation-window.md

@@ -0,0 +1 @@
+- Add confirmation modal to the 'delete workspaces' button.

context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+
+import CloseRounded from '@mui/icons-material/CloseRounded';
+
+import { useSnackbarActions } from 'js/shared-styles/snackbars';
+import { SelectedItems } from 'js/hooks/useSelectItems';
+import { generateCommaList } from 'js/helpers/functions';
+
+import { MergedWorkspace } from '../types';
+
+interface ConfirmDeleteWorkspacesDialogProps {
+  dialogIsOpen: boolean;
+  handleClose: () => void;
+  handleDeleteWorkspace: (workspaceId: number) => Promise<void>;
+  selectedWorkspaceIds: SelectedItems;
+  workspacesList: MergedWorkspace[];
+}
+export default function ConfirmDeleteWorkspacesDialog({
+  dialogIsOpen,
+  handleClose,
+  handleDeleteWorkspace,
+  selectedWorkspaceIds,
+  workspacesList,
+}: ConfirmDeleteWorkspacesDialogProps) {
+  const { toastError, toastSuccess } = useSnackbarActions();
+
+  const selectedWorkspaceNames = Array.from(selectedWorkspaceIds).map((id) => {
+    const workspace = workspacesList.find((w) => w.id === Number(id));
+    return workspace ? workspace.name : '';
+  });
+
+  const selectedWorkspaceNamesList = generateCommaList(selectedWorkspaceNames);
+
+  const handleDeleteAndClose = useCallback(() => {
+    const workspaceIds = [...selectedWorkspaceIds];
+
+    Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(Number(workspaceId))))
+      .then(() => {
+        toastSuccess(`Successfully deleted workspaces: ${selectedWorkspaceNamesList}`);
+        selectedWorkspaceIds.clear();
+      })
+      .catch((e) => {
+        toastError(`Error deleting workspaces: ${selectedWorkspaceNamesList}`);
+        console.error(e);
+      });
+
+    handleClose();
+  }, [handleDeleteWorkspace, selectedWorkspaceIds, selectedWorkspaceNamesList, handleClose, toastError, toastSuccess]);
+
+  return (
+    <Dialog
+      open={dialogIsOpen}
+      onClose={handleClose}
+      scroll="paper"
+      aria-labelledby="delete-workspace-dialog"
+      maxWidth="lg"
+    >
+      <Stack display="flex" flexDirection="row" justifyContent="space-between" marginRight={1}>
+        <DialogTitle id="delete-workspace-dialog-title" variant="h3">
+          Delete Workspace
+          {selectedWorkspaceIds.size > 1 ? 's' : ''}
+        </DialogTitle>
+        <Box alignContent="center">
+          <IconButton aria-label="Close" onClick={handleClose} size="large">
+            <CloseRounded />
+          </IconButton>
+        </Box>
+      </Stack>
+      <DialogContent>
+        You have selected to delete {selectedWorkspaceNamesList}. You cannot undo this action.
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleDeleteAndClose} variant="contained" color="warning">
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/index.ts

@@ -0,0 +1,3 @@
+import ConfirmDeleteWorkspacesDialog from './ConfirmDeleteWorkspacesDialog';
+
+export default ConfirmDeleteWorkspacesDialog;

context/app/static/js/components/workspaces/WorkspacesList.jsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
+
 import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import DeleteRounded from '@mui/icons-material/DeleteRounded';
 import Checkbox from '@mui/material/Checkbox';
 
 import Description from 'js/shared-styles/sections/Description';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
-import WorkspaceListItem from 'js/components/workspaces/WorkspaceListItem';
 import { useSelectItems } from 'js/hooks/useSelectItems';
-import { useSnackbarActions } from 'js/shared-styles/snackbars';
+import WorkspaceListItem from 'js/components/workspaces/WorkspaceListItem';
+
 import { useWorkspacesList } from './hooks';
 import WorkspaceButton from './WorkspaceButton';
 import NewWorkspaceDialogFromWorkspaceList from './NewWorkspaceDialog/NewWorkspaceDialogFromWorkspaceList';
+import ConfirmDeleteWorkspacesDialog from './ConfirmDeleteWorkspacesDialog';
 
 function WorkspacesList() {
   const { workspacesList, handleDeleteWorkspace, isDeleting } = useWorkspacesList();
-
   const { selectedItems, toggleItem } = useSelectItems();
-  const { toastError } = useSnackbarActions();
 
-  const handleDeleteSelected = () => {
-    const workspaceIds = [...selectedItems];
-    Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(workspaceId))).catch((e) => {
-      toastError(`Error deleting workspace: ${e.message}`);
-      console.error(e);
-    });
-  };
+  const [dialogIsOpen, setDialogIsOpen] = useState(false);
 
   return (
     <>
+      <ConfirmDeleteWorkspacesDialog
+        dialogIsOpen={dialogIsOpen}
+        handleClose={() => setDialogIsOpen(false)}
+        handleDeleteWorkspace={handleDeleteWorkspace}
+        selectedWorkspaceIds={selectedItems}
+        workspacesList={workspacesList}
+      />
       <SpacedSectionButtonRow
         leftText={
           <Typography variant="subtitle1">
@@ -39,7 +40,7 @@ function WorkspacesList() {
         buttons={
           <Stack direction="row" gap={1}>
             <WorkspaceButton
-              onClick={handleDeleteSelected}
+              onClick={() => setDialogIsOpen(true)}
               disabled={selectedItems.size === 0 || isDeleting}
               tooltip="Delete selected workspaces"
             >

context/app/static/js/helpers/functions.spec.js

@@ -9,6 +9,7 @@ import {
   getOriginSamplesOrgan,
   NOT_CAPITALIZED_WORDS,
   shouldCapitalizeString,
+  generateCommaList,
 } from './functions';
 
 test('isEmptyArrayOrObject', () => {
@@ -74,3 +75,13 @@ test('getOriginSamplesOrgan', () => {
   entity.origin_samples_unique_mapped_organs = [];
   expect(getOriginSamplesOrgan(entity)).toEqual('');
 });
+
+test('generateCommaList', () => {
+  expect(generateCommaList([])).toStrictEqual('');
+  expect(generateCommaList(['apples'])).toStrictEqual('apples');
+  expect(generateCommaList(['apples', 'bananas'])).toStrictEqual('apples and bananas');
+  expect(generateCommaList(['apples', 'bananas', 'oranges'])).toStrictEqual('apples, bananas, and oranges');
+  expect(generateCommaList(['apples', 'bananas', 'oranges', 'grapes'])).toStrictEqual(
+    'apples, bananas, oranges, and grapes',
+  );
+});

context/app/static/js/helpers/functions.ts

@@ -176,3 +176,21 @@ export function filterObjectByKeys<O extends object, K extends keyof O>(obj: O,
 export function getOriginSamplesOrgan(entity: { origin_samples_unique_mapped_organs: string[] }) {
   return entity.origin_samples_unique_mapped_organs.join(', ');
 }
+
+/**
+ * Given an array of strings, create a single comma-separated string that includes
+ * 'and' as well as an oxford comma.
+ *   Ex: ['apples'] => 'apples'
+ *   Ex: ['apples', 'bananas'] => 'apples and bananas'
+ *   Ex: ['apples', 'bananas', 'grapes'] => 'apples, bananas, and grapes'
+ * @author Austen Money
+ * @param list an array of elements to be made into a single comma-separated string.
+ * @returns a comma-separated string.
+ */
+export function generateCommaList(list: string[]): string {
+  const { length } = list;
+
+  return length < 2
+    ? list.join('')
+    : `${list.slice(0, length - 1).join(', ')}${length < 3 ? ' and ' : ', and '}${list[length - 1]}`;
+}