From 7813d18013e6f65c18f523558cc153b61ac945d2 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Fri, 28 Apr 2023 17:12:21 +0300
Subject: [PATCH] feat: work on the edit mode

---
 src/components/Workflow/Node.tsx       | 16 ++++++++++++++--
 src/components/Workflow/ScriptNode.tsx | 17 ++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/Workflow/Node.tsx b/src/components/Workflow/Node.tsx
index eb4024c8d..8cdfea04e 100644
--- a/src/components/Workflow/Node.tsx
+++ b/src/components/Workflow/Node.tsx
@@ -1,9 +1,11 @@
 import { Box, Menu, MenuItem, MenuList, Paper, Stack } from "@mui/material";
 import { FC, PropsWithChildren, useCallback, useState } from "react";
 
-export interface INodeProps {}
+export interface INodeProps {
+  options?: Array<{ label: string; onClick: () => void }>;
+}
 
-const Node: FC<PropsWithChildren<INodeProps>> = ({ children }) => {
+const Node: FC<PropsWithChildren<INodeProps>> = ({ options, children }) => {
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -47,6 +49,16 @@ const Node: FC<PropsWithChildren<INodeProps>> = ({ children }) => {
         anchorPosition={position!}
       >
         <MenuList sx={{ outline: "none" }}>
+          {options?.map(({ label, onClick }) => (
+            <MenuItem
+              onClick={() => {
+                setPosition(null);
+                onClick();
+              }}
+            >
+              {label}
+            </MenuItem>
+          ))}
           <MenuItem>Rename</MenuItem>
         </MenuList>
       </Menu>
diff --git a/src/components/Workflow/ScriptNode.tsx b/src/components/Workflow/ScriptNode.tsx
index 88483dc3d..45dc1c293 100644
--- a/src/components/Workflow/ScriptNode.tsx
+++ b/src/components/Workflow/ScriptNode.tsx
@@ -1,4 +1,4 @@
-import { Box, Drawer, Stack } from "@mui/material";
+import { Drawer, Stack } from "@mui/material";
 import CodeEditor from "@src/components/CodeEditor";
 import { map } from "lodash-es";
 import { FC, SVGProps, useCallback, useEffect, useState } from "react";
@@ -94,11 +94,18 @@ const ScriptNode: FC<IScriptNodeProps> = ({}) => {
 
   return (
     <>
-      <Node>
+      <Node
+        options={[
+          {
+            label: "Edit",
+            onClick: () => {
+              setIsEditing(true);
+            },
+          },
+        ]}
+      >
         <NodeToolbar collapsed={open} onToggleCollapse={handleToggleCollapse}>
-          <Box onClick={() => setIsEditing(true)}>
-            <Icon />
-          </Box>
+          <Icon />
           <NodeName name={name} onNameChange={handleNameChange} />
         </NodeToolbar>
         <NodeParams open={!open}>