From ddad07d86c496034f2ba173cfc673ae3c2ba4e69 Mon Sep 17 00:00:00 2001
From: Florian Boulnois <fboulnoi@broadinstitute.org>
Date: Wed, 17 Jan 2024 09:21:32 -0500
Subject: [PATCH] feat: add delete modal dialog for dac datasets

---
 .../DACDatasetApprovalStatus.js               | 20 ++++++++++++
 src/components/modals/ConfirmationDialog.js   | 32 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/modals/ConfirmationDialog.js

diff --git a/src/components/dac_dataset_table/DACDatasetApprovalStatus.js b/src/components/dac_dataset_table/DACDatasetApprovalStatus.js
index 1460a5c5a9..00a5c1d3de 100644
--- a/src/components/dac_dataset_table/DACDatasetApprovalStatus.js
+++ b/src/components/dac_dataset_table/DACDatasetApprovalStatus.js
@@ -5,10 +5,22 @@ import {isNil} from 'lodash/fp';
 import Button from '@mui/material/Button';
 import ReactTooltip from 'react-tooltip';
 import style from '../../pages/DACDatasets.module.css';
+import { ConfirmationDialog } from '../modals/ConfirmationDialog';
+import IconButton from '@mui/material/IconButton';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 
 export default function DACDatasetApprovalStatus(props) {
 
   const [dataset, setDataset] = useState(props.dataset);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   const updateApprovalStatus = async (approvalState) => {
     const updatedDataset = await DAC.updateApprovalStatus(dataset.dacId, dataset.dataSetId, approvalState);
@@ -23,6 +35,14 @@ export default function DACDatasetApprovalStatus(props) {
       className={'glyphicon glyphicon-pencil'}
       to={dataset.study?.studyId === undefined ? `dataset_registration/${dataset.dataSetId}` : `study_update/${dataset.study.studyId}`}
     />
+    <Link
+      style={{marginLeft: '15px'}}
+      id={`${dataset.dataSetId}_delete`}
+      className={'glyphicon glyphicon-trash'}
+      onClick={handleClick}
+      to={`#`}
+    />
+    <ConfirmationDialog title="Delete dataset" open={open} close={handleClose} description={`Are you sure you want to delete the dataset named '${dataset.name}'?`} />
   </div>;
 
   const dacRejected = () => <div style={{color: '#000000', fontWeight: 'bold'}}>
diff --git a/src/components/modals/ConfirmationDialog.js b/src/components/modals/ConfirmationDialog.js
new file mode 100644
index 0000000000..bb1751db7a
--- /dev/null
+++ b/src/components/modals/ConfirmationDialog.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Button from "@mui/material/Button";
+import { Dialog } from "@mui/material";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText";
+
+export const ConfirmationDialog = (props) => {
+    const { title, open, close, description } = props;
+    return (
+        <Dialog
+            open={open}
+            onClose={close}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {title}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {description}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={close} variant="outlined">Cancel</Button>
+                <Button onClick={close} autoFocus color="error" variant="contained">Confirm</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}