feat: confirmed deletion for pods and scopes (#407)

codepod-io · Jul 31, 2023 · f364fe6 · f364fe6
1 parent ae5394e
commit f364fe6
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 21 deletions.
diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -40,7 +40,6 @@ import Grid from "@mui/material/Grid";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
 import PlayDisabledIcon from "@mui/icons-material/PlayDisabled";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ViewComfyIcon from "@mui/icons-material/ViewComfy";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 
@@ -62,6 +61,8 @@ import { NewPodButtons, ResizeIcon, level2fontsize } from "./utils";
 import { timeDifference } from "../../lib/utils";
 import { ButtonGroup } from "@mui/material";
 
+import { ConfirmDeleteButton } from "./utils";
+
 function Timer({ lastExecutedAt }) {
   const [counter, setCounter] = useState(0);
   useEffect(() => {
@@ -442,14 +443,12 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
       )}
       {!isGuest && (
         <Tooltip title="Delete">
-          <IconButton
-            onClick={() => {
+          <ConfirmDeleteButton
+            handleConfirm={() => {
               // Delete all edges connected to the node.
               reactFlowInstance.deleteElements({ nodes: [{ id }] });
             }}
-          >
-            <DeleteIcon fontSize="inherit" />
-          </IconButton>
+          />
         </Tooltip>
       )}
       <Tooltip title="Change layout">

diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx
@@ -37,7 +37,6 @@ import Box from "@mui/material/Box";
 import InputBase from "@mui/material/InputBase";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
 
@@ -139,7 +138,7 @@ import { SlashExtension } from "./extensions/slash";
 import { SlashSuggestor } from "./extensions/useSlash";
 import { BlockHandleExtension } from "./extensions/blockHandle";
 
-import { NewPodButtons, level2fontsize } from "./utils";
+import { ConfirmDeleteButton, NewPodButtons, level2fontsize } from "./utils";
 import { RepoContext } from "../../lib/store";
 
 import "./remirror-size.css";
@@ -464,14 +463,12 @@ function MyFloatingToolbar({ id }: { id: string }) {
       </Box>
       {!isGuest && (
         <Tooltip title="Delete">
-          <IconButton
+          <ConfirmDeleteButton
             size="small"
-            onClick={() => {
+            handleConfirm={() => {
               reactFlowInstance.deleteElements({ nodes: [{ id }] });
             }}
-          >
-            <DeleteIcon fontSize="inherit" />
-          </IconButton>
+          />
         </Tooltip>
       )}
       <Box

diff --git a/ui/src/components/nodes/Scope.tsx b/ui/src/components/nodes/Scope.tsx
@@ -30,7 +30,6 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
 import Grid from "@mui/material/Grid";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ContentCutIcon from "@mui/icons-material/ContentCut";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
@@ -47,7 +46,7 @@ import { RepoContext } from "../../lib/store";
 import { NodeResizer, NodeResizeControl } from "reactflow";
 import "@reactflow/node-resizer/dist/style.css";
 import { ResizableBox } from "react-resizable";
-import { ResizeIcon, level2fontsize } from "./utils";
+import { ConfirmDeleteButton, ResizeIcon, level2fontsize } from "./utils";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 
 function MyFloatingToolbar({ id }: { id: string }) {
@@ -153,8 +152,8 @@ function MyFloatingToolbar({ id }: { id: string }) {
       )}
       {!isGuest && (
         <Tooltip title="Delete" className="nodrag">
-          <IconButton
-            onClick={(e: any) => {
+          <ConfirmDeleteButton
+            handleConfirm={(e: any) => {
               // This does not work, will throw "Parent node
               // jqgdsz2ns6k57vich0bf not found" when deleting a scope.
               //
@@ -163,9 +162,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
               // But this works:
               reactFlowInstance.deleteElements({ nodes: [{ id }] });
             }}
-          >
-            <DeleteIcon fontSize="inherit" />
-          </IconButton>
+          />
         </Tooltip>
       )}
       <Box

diff --git a/ui/src/components/nodes/utils.tsx b/ui/src/components/nodes/utils.tsx
@@ -6,7 +6,7 @@ import {
   XYPosition,
 } from "reactflow";
 
-import { useContext } from "react";
+import { useContext, useState } from "react";
 
 import Button from "@mui/material/Button";
 import CodeIcon from "@mui/icons-material/Code";
@@ -15,6 +15,16 @@ import NoteIcon from "@mui/icons-material/Note";
 import { useStore } from "zustand";
 
 import { RepoContext } from "../../lib/store";
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import React from "react";
 
 export function ResizeIcon() {
   return (
@@ -458,3 +468,53 @@ export function level2fontsize(
       return contextualZoomParams.next;
   }
 }
+
+// A delete button that requires confirmation.
+// Have to use React.forwardRef to allows <Tooltip> over this component. Ref:
+// https://mui.com/material-ui/guides/composition/#caveat-with-refs
+export const ConfirmDeleteButton = React.forwardRef(
+  ({ handleConfirm, ...props }: any) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Box>
+        <IconButton
+          onClick={() => {
+            setOpen(true);
+          }}
+          {...props}
+        >
+          <DeleteIcon fontSize="inherit" />
+        </IconButton>
+        <Dialog
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          fullWidth
+        >
+          <DialogTitle>{`Please confirm deletion`}</DialogTitle>
+          <DialogContent>Are you sure?</DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                handleConfirm();
+                setOpen(false);
+              }}
+              autoFocus
+              color="error"
+            >
+              Confirm
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Box>
+    );
+  }
+);