[DUOS-2823] Add delete modal dialog for accepted DAC datasets (#2439)

src/components/dac_dataset_table/DACDatasetApprovalStatus.js

@@ -1,14 +1,39 @@
 import React, {useState} from 'react';
-import {DAC} from '../../libs/ajax';
+import {DAC, DataSet} from '../../libs/ajax';
 import {Link} from 'react-router-dom';
 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 { Notifications } from '../../libs/utils';
 
 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 handleAction = ({dataSetId, name}) => {
+    setOpen(false);
+    try {
+      DataSet.deleteDataset(dataSetId).then(() => {
+        Notifications.showSuccess({
+          text: `Deleted dataset '${name}' successfully.`,
+        });
+        props.history.push('/chair_console');
+      });
+    } catch {
+      Notifications.showError({text: `Error deleting dataset '${name}'`});
+    }
+  }
 
   const updateApprovalStatus = async (approvalState) => {
     const updatedDataset = await DAC.updateApprovalStatus(dataset.dacId, dataset.dataSetId, approvalState);
@@ -23,6 +48,18 @@ export default function DACDatasetApprovalStatus(props) {
       className={'glyphicon glyphicon-pencil'}
       to={dataset.study?.studyId === undefined ? `dataset_registration/${dataset.dataSetId}` : `study_update/${dataset.study.studyId}`}
     />
+    {dataset.deletable &&
+      <>
+        <Link
+          style={{marginLeft: '15px'}}
+          id={`${dataset.dataSetId}_delete`}
+          className={'glyphicon glyphicon-trash'}
+          onClick={handleClick}
+          to={`#`}
+        />
+        <ConfirmationDialog title="Delete dataset" openState={open} close={handleClose} action={() => handleAction(dataset)} description={`Are you sure you want to delete the dataset named '${dataset.name}'?`} />
+      </>
+    }
   </div>;
 
   const dacRejected = () => <div style={{color: '#000000', fontWeight: 'bold'}}>

src/components/dac_dataset_table/DACDatasetTableCellData.js

@@ -77,9 +77,9 @@ export function dataUseCellData({dataset, label = 'dataUseCellData'}) {
   };
 }
 
-export function statusCellData({dataset, label = 'statusCellData'}) {
+export function statusCellData({dataset, label = 'statusCellData', history}) {
   return {
-    data: <DACDatasetApprovalStatus dataset={dataset}/>,
+    data: <DACDatasetApprovalStatus dataset={dataset} history={history}/>,
     id: `status-cell-data-${dataset.dataSetId}`,
     cellStyle: {width: styles.cellWidths.status},
     label

src/components/dac_dataset_table/DACDatasetsTable.js

@@ -81,13 +81,13 @@ const columnHeaderData = (columns = defaultColumns) => {
 };
 
 const processDatasetRowData = ({
-  datasets, columns = defaultColumns, consoleType=''
+  datasets, columns = defaultColumns, consoleType='', history
 }) => {
   if(!isNil(datasets)) {
     return datasets.map((dataset) => {
       return columns.map((col) => {
         return columnHeaderConfig[col].cellDataFn({
-          dataset, consoleType
+          dataset, consoleType, history
         });
       });
     });
@@ -117,7 +117,7 @@ export const DACDatasetsTable = function DACDatasetTable(props) {
   const [pageCount, setPageCount] = useState(1);
   const [sort, setSort] = useState(getInitialSort(props.columns));
   const [tableSize, setTableSize] = useState(10);
-  const { datasets, columns, isLoading, consoleType } = props;
+  const { datasets, columns, isLoading, consoleType, history } = props;
 
   const changeTableSize = useCallback((value) => {
     if (value > 0 && !isNaN(parseInt(value))) {
@@ -129,7 +129,7 @@ export const DACDatasetsTable = function DACDatasetTable(props) {
     recalculateVisibleTable({
       tableSize,
       pageCount,
-      filteredList: processDatasetRowData({datasets, columns, consoleType}),
+      filteredList: processDatasetRowData({datasets, columns, consoleType, history}),
       currentPage,
       setPageCount,
       setCurrentPage,

src/components/modals/ConfirmationDialog.js

@@ -0,0 +1,33 @@
+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, openState, close, action, description } = props;
+    return (
+        <Dialog
+            open={openState}
+            onClose={close}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            sx={{ transform: 'scale(1.5)' }}
+        >
+            <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={action} autoFocus color="error" variant="contained">Confirm</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

src/pages/DACDatasets.js

@@ -103,6 +103,7 @@ export default function DACDatasets(props) {
       ]}
       isLoading={isLoading}
       consoleType={consoleTypes.CHAIR}
+      history={history}
     />
   </div>;