Skip to content

feat: confirmed deletion for pods and scopes #407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 31, 2023
Merged

feat: confirmed deletion for pods and scopes #407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28c1e7a
feat: confirmed deletion for pods and scopes
lihebi Jul 31, 2023
62ff23b
make dialog closable, make "confirm" of red color
lihebi Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions ui/src/components/nodes/Code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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(() => {
Expand Down Expand Up @@ -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">
Expand Down
11 changes: 4 additions & 7 deletions ui/src/components/nodes/Rich.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down
11 changes: 4 additions & 7 deletions ui/src/components/nodes/Scope.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 }) {
Expand Down Expand Up @@ -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.
//
Expand All @@ -163,9 +162,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
// But this works:
reactFlowInstance.deleteElements({ nodes: [{ id }] });
}}
>
<DeleteIcon fontSize="inherit" />
</IconButton>
/>
</Tooltip>
)}
<Box
Expand Down
62 changes: 61 additions & 1 deletion ui/src/components/nodes/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
);
}
);