Merge pull request #840 from OpenSourceBrain/feature/717

Feature/717 - confirm dialog before deleting the workspace

applications/osb-portal/src/components/dialogs/DeleteDialog.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "@mui/material/Dialog";
+import {
+	useNavigate,
+} from "react-router-dom";
+import { Button } from "@mui/material";
+
+
+const DeleteDialog = ({
+	open,
+	setOpen,
+	workspace,
+	handleDeleteWorkspace,
+}) => {
+	const navigate = useNavigate();
+
+	const handleDelete = () => {
+		handleDeleteWorkspace();
+		if (window.location.pathname !== "/") {
+			navigate("/");
+		}
+	}
+
+	return (
+		<Dialog
+			open={open}
+			onClose={() => setOpen(false)}
+		>
+			<DialogTitle>{'Delete Workspace "' + workspace.name + '"'}</DialogTitle>
+			<DialogContent>{'You are about to delete Workspace "' + workspace.name + '". This action cannot be undone. Are you sure?'}</DialogContent>
+			<DialogActions>
+				<Button
+					color="primary"
+					onClick={() => {
+						setOpen(false);
+					}}
+				>
+					CANCEL
+				</Button>
+				<Button color="primary" variant="contained" onClick={handleDelete}>
+					DELETE
+				</Button>
+			</DialogActions>
+		</Dialog>
+	)
+}
+
+export default DeleteDialog;

applications/osb-portal/src/components/workspace/WorkspaceActionsMenu.tsx

@@ -18,6 +18,7 @@ import OSBLoader from "../common/OSBLoader";
 import { bgDarkest, textColor, lightWhite } from "../../theme";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import * as Icons from "../icons";
+import DeleteDialog from "../dialogs/DeleteDialog";
 
 
 interface WorkspaceActionsMenuProps {
@@ -51,6 +52,7 @@ export default (props: WorkspaceActionsMenuProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const canEdit = canEditWorkspace(props?.user, props?.workspace);
   const navigate = useNavigate();
+  const [showDeleteWorkspaceDialog, setShowDeleteWorkspaceDialog] = React.useState(false);
 
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -210,7 +212,10 @@ export default (props: WorkspaceActionsMenuProps) => {
         {canEdit && (
           <MenuItem
             className="delete-workspace"
-            onClick={handleDeleteWorkspace}
+            onClick={() => {
+              setShowDeleteWorkspaceDialog(true);
+              setAnchorEl(null);
+            }}
           >
             Delete
           </MenuItem>
@@ -261,6 +266,18 @@ export default (props: WorkspaceActionsMenuProps) => {
           </React.Fragment>
         }
       />
+      <>
+        {
+          showDeleteWorkspaceDialog && (
+            <DeleteDialog
+              open={showDeleteWorkspaceDialog}
+              setOpen={setShowDeleteWorkspaceDialog}
+              handleDeleteWorkspace={handleDeleteWorkspace}
+              workspace={props.workspace}
+            />
+          )
+        }
+      </>
     </>
   );
 };