From 73f6ea3c891c9a6177f8678255f42810fde2f726 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Tue, 23 Jul 2024 17:53:19 -0400
Subject: [PATCH 1/7] finish modal implementation

---
 .../ConfirmDeleteWorkspacesDialog.tsx         | 86 +++++++++++++++++++
 .../ConfirmDeleteWorkspacesDialog/index.ts    |  3 +
 .../components/workspaces/WorkspacesList.jsx  | 26 +++---
 3 files changed, 102 insertions(+), 13 deletions(-)
 create mode 100644 context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
 create mode 100644 context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/index.ts

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
new file mode 100644
index 0000000000..d3458da49a
--- /dev/null
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { Box, Button, DialogActions, DialogContent, Divider, Stack } from '@mui/material';
+import Dialog from '@mui/material/Dialog/Dialog';
+import DialogTitle from '@mui/material/DialogTitle/DialogTitle';
+import IconButton from '@mui/material/IconButton/IconButton';
+import CloseRounded from '@mui/icons-material/CloseRounded';
+
+import { useSnackbarActions } from 'js/shared-styles/snackbars';
+import { SelectedItems } from 'js/hooks/useSelectItems';
+
+import { useWorkspacesList } from '../hooks';
+import { MergedWorkspace } from '../types';
+
+const genCommaList = (list: string[]): string => {
+  const { length } = list;
+
+  return length < 2
+    ? list.join('')
+    : `${list.slice(0, length - 1).join(', ')}${length < 3 ? ' and ' : ', and '}${list[length - 1]}`;
+};
+
+interface ConfirmDeleteWorkspacesDialogProps {
+  dialogIsOpen: boolean;
+  handleClose: () => void;
+  selectedWorkspaceIds: SelectedItems;
+  workspacesList: MergedWorkspace[];
+}
+export default function ConfirmDeleteWorkspacesDialog({
+  dialogIsOpen,
+  handleClose,
+  selectedWorkspaceIds,
+  workspacesList,
+}: ConfirmDeleteWorkspacesDialogProps) {
+  const { handleDeleteWorkspace } = useWorkspacesList();
+  const { toastError } = useSnackbarActions();
+
+  const handleDeleteAndClose = () => {
+    const workspaceIds = [...selectedWorkspaceIds];
+
+    Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(Number(workspaceId)))).catch((e) => {
+      toastError(`Error deleting workspaces: ${workspaceIds.join(', ')}`);
+      console.error(e);
+    });
+
+    selectedWorkspaceIds.clear();
+    handleClose();
+  };
+
+  const selectedWorkspaceNames = Array.from(selectedWorkspaceIds).map((id) => {
+    const workspace = workspacesList.find((w) => w.id === Number(id));
+    return workspace ? workspace.name : '';
+  });
+
+  return (
+    <Dialog
+      open={dialogIsOpen}
+      onClose={handleClose}
+      scroll="paper"
+      aria-labelledby="create-workspace-dialog-title"
+      maxWidth="lg"
+    >
+      <Stack display="flex" flexDirection="row" justifyContent="space-between" marginRight={1}>
+        <DialogTitle id="delete-workspace-dialog-title" variant="h3">
+          Delete Workspace
+        </DialogTitle>
+        <Box alignContent="center">
+          <IconButton aria-label="Close" onClick={handleClose} size="large">
+            <CloseRounded />
+          </IconButton>
+        </Box>
+      </Stack>
+      <DialogContent>
+        You have selected to delete
+        {` ${genCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleDeleteAndClose} variant="contained" color="warning">
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/index.ts b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/index.ts
new file mode 100644
index 0000000000..214a5755ee
--- /dev/null
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/index.ts
@@ -0,0 +1,3 @@
+import ConfirmDeleteWorkspacesDialog from './ConfirmDeleteWorkspacesDialog';
+
+export default ConfirmDeleteWorkspacesDialog;
diff --git a/context/app/static/js/components/workspaces/WorkspacesList.jsx b/context/app/static/js/components/workspaces/WorkspacesList.jsx
index f77a54bacb..a92c67b3bd 100644
--- a/context/app/static/js/components/workspaces/WorkspacesList.jsx
+++ b/context/app/static/js/components/workspaces/WorkspacesList.jsx
@@ -1,4 +1,5 @@
-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';
@@ -9,27 +10,26 @@ 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 { useWorkspacesList } from './hooks';
 import WorkspaceButton from './WorkspaceButton';
 import NewWorkspaceDialogFromWorkspaceList from './NewWorkspaceDialog/NewWorkspaceDialogFromWorkspaceList';
+import ConfirmDeleteWorkspacesDialog from './ConfirmDeleteWorkspacesDialog';
 
 function WorkspacesList() {
-  const { workspacesList, handleDeleteWorkspace, isDeleting } = useWorkspacesList();
-
+  const { workspacesList, 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)}
+        selectedWorkspaceIds={selectedItems}
+        workspacesList={workspacesList}
+      />
       <SpacedSectionButtonRow
         leftText={
           <Typography variant="subtitle1">
@@ -39,7 +39,7 @@ function WorkspacesList() {
         buttons={
           <Stack direction="row" gap={1}>
             <WorkspaceButton
-              onClick={handleDeleteSelected}
+              onClick={() => setDialogIsOpen(true)}
               disabled={selectedItems.size === 0 || isDeleting}
               tooltip="Delete selected workspaces"
             >

From ae8cdb087e363782435692ba596499e2b9f15a81 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 10:16:28 -0400
Subject: [PATCH 2/7] organize imports and separate helper function

---
 .../ConfirmDeleteWorkspacesDialog.tsx         | 28 +++++++++----------
 .../components/workspaces/WorkspacesList.jsx  |  7 ++---
 context/app/static/js/helpers/functions.ts    |  8 ++++++
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index d3458da49a..2e0b021b19 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -1,25 +1,25 @@
 import React from 'react';
 
-import { Box, Button, DialogActions, DialogContent, Divider, Stack } from '@mui/material';
-import Dialog from '@mui/material/Dialog/Dialog';
-import DialogTitle from '@mui/material/DialogTitle/DialogTitle';
-import IconButton from '@mui/material/IconButton/IconButton';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  IconButton,
+  Stack,
+} from '@mui/material';
 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 { useWorkspacesList } from '../hooks';
 import { MergedWorkspace } from '../types';
 
-const genCommaList = (list: string[]): string => {
-  const { length } = list;
-
-  return length < 2
-    ? list.join('')
-    : `${list.slice(0, length - 1).join(', ')}${length < 3 ? ' and ' : ', and '}${list[length - 1]}`;
-};
-
 interface ConfirmDeleteWorkspacesDialogProps {
   dialogIsOpen: boolean;
   handleClose: () => void;
@@ -39,7 +39,7 @@ export default function ConfirmDeleteWorkspacesDialog({
     const workspaceIds = [...selectedWorkspaceIds];
 
     Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(Number(workspaceId)))).catch((e) => {
-      toastError(`Error deleting workspaces: ${workspaceIds.join(', ')}`);
+      toastError(`Error deleting workspaces: ${generateCommaList(workspaceIds)}`);
       console.error(e);
     });
 
@@ -72,7 +72,7 @@ export default function ConfirmDeleteWorkspacesDialog({
       </Stack>
       <DialogContent>
         You have selected to delete
-        {` ${genCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
+        {` ${generateCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
       </DialogContent>
       <Divider />
       <DialogActions>
diff --git a/context/app/static/js/components/workspaces/WorkspacesList.jsx b/context/app/static/js/components/workspaces/WorkspacesList.jsx
index a92c67b3bd..5c99bdb8a1 100644
--- a/context/app/static/js/components/workspaces/WorkspacesList.jsx
+++ b/context/app/static/js/components/workspaces/WorkspacesList.jsx
@@ -1,15 +1,12 @@
 import React, { useState } from 'react';
 
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
+import { Checkbox, Paper, Stack, Typography } from '@mui/material';
 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 WorkspaceListItem from 'js/components/workspaces/WorkspaceListItem';
 
 import { useWorkspacesList } from './hooks';
 import WorkspaceButton from './WorkspaceButton';
diff --git a/context/app/static/js/helpers/functions.ts b/context/app/static/js/helpers/functions.ts
index 09cb974c9a..ee52ca577f 100644
--- a/context/app/static/js/helpers/functions.ts
+++ b/context/app/static/js/helpers/functions.ts
@@ -176,3 +176,11 @@ 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(', ');
 }
+
+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]}`;
+}

From d7e3458a916a057f889d9ee14e46c836a5868b3d Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 10:31:30 -0400
Subject: [PATCH 3/7] add changelog and remove hook call

---
 .../ConfirmDeleteWorkspacesDialog.tsx                         | 4 ++--
 .../app/static/js/components/workspaces/WorkspacesList.jsx    | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index 2e0b021b19..ef7d3aa733 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -17,22 +17,22 @@ import { useSnackbarActions } from 'js/shared-styles/snackbars';
 import { SelectedItems } from 'js/hooks/useSelectItems';
 import { generateCommaList } from 'js/helpers/functions';
 
-import { useWorkspacesList } from '../hooks';
 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 { handleDeleteWorkspace } = useWorkspacesList();
   const { toastError } = useSnackbarActions();
 
   const handleDeleteAndClose = () => {
diff --git a/context/app/static/js/components/workspaces/WorkspacesList.jsx b/context/app/static/js/components/workspaces/WorkspacesList.jsx
index 5c99bdb8a1..9eeb64bc53 100644
--- a/context/app/static/js/components/workspaces/WorkspacesList.jsx
+++ b/context/app/static/js/components/workspaces/WorkspacesList.jsx
@@ -14,7 +14,7 @@ import NewWorkspaceDialogFromWorkspaceList from './NewWorkspaceDialog/NewWorkspa
 import ConfirmDeleteWorkspacesDialog from './ConfirmDeleteWorkspacesDialog';
 
 function WorkspacesList() {
-  const { workspacesList, isDeleting } = useWorkspacesList();
+  const { workspacesList, handleDeleteWorkspace, isDeleting } = useWorkspacesList();
   const { selectedItems, toggleItem } = useSelectItems();
 
   const [dialogIsOpen, setDialogIsOpen] = useState(false);
@@ -24,6 +24,7 @@ function WorkspacesList() {
       <ConfirmDeleteWorkspacesDialog
         dialogIsOpen={dialogIsOpen}
         handleClose={() => setDialogIsOpen(false)}
+        handleDeleteWorkspace={handleDeleteWorkspace}
         selectedWorkspaceIds={selectedItems}
         workspacesList={workspacesList}
       />

From 9a7b9ee06f98102f5c248b74a5cd2c7b310e8c97 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 10:39:44 -0400
Subject: [PATCH 4/7] cleanup

---
 CHANGELOG-add-confirmation-window.md                        | 1 +
 .../ConfirmDeleteWorkspacesDialog.tsx                       | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 CHANGELOG-add-confirmation-window.md

diff --git a/CHANGELOG-add-confirmation-window.md b/CHANGELOG-add-confirmation-window.md
new file mode 100644
index 0000000000..0157270280
--- /dev/null
+++ b/CHANGELOG-add-confirmation-window.md
@@ -0,0 +1 @@
+- Add confirmation modal to the 'delete workspaces' button.
\ No newline at end of file
diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index ef7d3aa733..53472673ff 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -57,12 +57,13 @@ export default function ConfirmDeleteWorkspacesDialog({
       open={dialogIsOpen}
       onClose={handleClose}
       scroll="paper"
-      aria-labelledby="create-workspace-dialog-title"
+      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">
@@ -71,8 +72,7 @@ export default function ConfirmDeleteWorkspacesDialog({
         </Box>
       </Stack>
       <DialogContent>
-        You have selected to delete
-        {` ${generateCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
+        You have selected to delete {`${generateCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
       </DialogContent>
       <Divider />
       <DialogActions>

From 81f6fa0725fb699418be4799ddd063253e7463d9 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 10:41:11 -0400
Subject: [PATCH 5/7] remove template

---
 .../ConfirmDeleteWorkspacesDialog.tsx                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index 53472673ff..f22d64bb68 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -72,7 +72,7 @@ export default function ConfirmDeleteWorkspacesDialog({
         </Box>
       </Stack>
       <DialogContent>
-        You have selected to delete {`${generateCommaList(selectedWorkspaceNames)}`}. You cannot undo this action.
+        You have selected to delete {generateCommaList(selectedWorkspaceNames)}. You cannot undo this action.
       </DialogContent>
       <Divider />
       <DialogActions>

From c983d546a4fd91e5ad78027f5f4b83b88c798fa8 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 12:40:39 -0400
Subject: [PATCH 6/7] implement review changes

---
 .../ConfirmDeleteWorkspacesDialog.tsx         | 53 ++++++++++---------
 .../components/workspaces/WorkspacesList.jsx  |  5 +-
 .../app/static/js/helpers/functions.spec.js   | 11 ++++
 context/app/static/js/helpers/functions.ts    | 10 ++++
 4 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index f22d64bb68..68ef16caa7 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -1,16 +1,15 @@
-import React from 'react';
+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 {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Stack,
-} from '@mui/material';
 import CloseRounded from '@mui/icons-material/CloseRounded';
 
 import { useSnackbarActions } from 'js/shared-styles/snackbars';
@@ -33,25 +32,29 @@ export default function ConfirmDeleteWorkspacesDialog({
   selectedWorkspaceIds,
   workspacesList,
 }: ConfirmDeleteWorkspacesDialogProps) {
-  const { toastError } = useSnackbarActions();
-
-  const handleDeleteAndClose = () => {
-    const workspaceIds = [...selectedWorkspaceIds];
-
-    Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(Number(workspaceId)))).catch((e) => {
-      toastError(`Error deleting workspaces: ${generateCommaList(workspaceIds)}`);
-      console.error(e);
-    });
-
-    selectedWorkspaceIds.clear();
-    handleClose();
-  };
+  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 handleDeleteAndClose = useCallback(() => {
+    const workspaceIds = [...selectedWorkspaceIds];
+
+    Promise.all(workspaceIds.map((workspaceId) => handleDeleteWorkspace(Number(workspaceId))))
+      .then(() => {
+        toastSuccess(`Successfully deleted workspaces: ${generateCommaList(selectedWorkspaceNames)}`);
+        selectedWorkspaceIds.clear();
+      })
+      .catch((e) => {
+        toastError(`Error deleting workspaces: ${generateCommaList(selectedWorkspaceNames)}`);
+        console.error(e);
+      });
+
+    handleClose();
+  }, [handleDeleteWorkspace, selectedWorkspaceIds, selectedWorkspaceNames, handleClose, toastError, toastSuccess]);
+
   return (
     <Dialog
       open={dialogIsOpen}
diff --git a/context/app/static/js/components/workspaces/WorkspacesList.jsx b/context/app/static/js/components/workspaces/WorkspacesList.jsx
index 9eeb64bc53..00004f1489 100644
--- a/context/app/static/js/components/workspaces/WorkspacesList.jsx
+++ b/context/app/static/js/components/workspaces/WorkspacesList.jsx
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 
-import { Checkbox, Paper, Stack, Typography } from '@mui/material';
+import Paper from '@mui/material/Paper';
+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';
diff --git a/context/app/static/js/helpers/functions.spec.js b/context/app/static/js/helpers/functions.spec.js
index eb5cd29b09..bbec1cd109 100644
--- a/context/app/static/js/helpers/functions.spec.js
+++ b/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',
+  );
+});
diff --git a/context/app/static/js/helpers/functions.ts b/context/app/static/js/helpers/functions.ts
index ee52ca577f..d602b8b254 100644
--- a/context/app/static/js/helpers/functions.ts
+++ b/context/app/static/js/helpers/functions.ts
@@ -177,6 +177,16 @@ export function getOriginSamplesOrgan(entity: { origin_samples_unique_mapped_org
   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;
 

From bf9ce9ba45b9ada625a4bdae5de1873617c27418 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Wed, 24 Jul 2024 14:21:11 -0400
Subject: [PATCH 7/7] replace function calls

---
 .../ConfirmDeleteWorkspacesDialog.tsx                  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
index 68ef16caa7..395ce3e18a 100644
--- a/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
+++ b/context/app/static/js/components/workspaces/ConfirmDeleteWorkspacesDialog/ConfirmDeleteWorkspacesDialog.tsx
@@ -39,21 +39,23 @@ export default function ConfirmDeleteWorkspacesDialog({
     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: ${generateCommaList(selectedWorkspaceNames)}`);
+        toastSuccess(`Successfully deleted workspaces: ${selectedWorkspaceNamesList}`);
         selectedWorkspaceIds.clear();
       })
       .catch((e) => {
-        toastError(`Error deleting workspaces: ${generateCommaList(selectedWorkspaceNames)}`);
+        toastError(`Error deleting workspaces: ${selectedWorkspaceNamesList}`);
         console.error(e);
       });
 
     handleClose();
-  }, [handleDeleteWorkspace, selectedWorkspaceIds, selectedWorkspaceNames, handleClose, toastError, toastSuccess]);
+  }, [handleDeleteWorkspace, selectedWorkspaceIds, selectedWorkspaceNamesList, handleClose, toastError, toastSuccess]);
 
   return (
     <Dialog
@@ -75,7 +77,7 @@ export default function ConfirmDeleteWorkspacesDialog({
         </Box>
       </Stack>
       <DialogContent>
-        You have selected to delete {generateCommaList(selectedWorkspaceNames)}. You cannot undo this action.
+        You have selected to delete {selectedWorkspaceNamesList}. You cannot undo this action.
       </DialogContent>
       <Divider />
       <DialogActions>