From f9da5c7eceafddcda648756eb8aaf5dc57d26a74 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 6 Feb 2023 18:43:18 +0000
Subject: [PATCH] make node dleete work

---
 .../src/Components/Workflow/Component.tsx     | 36 +++++++++++++++++--
 CommonUI/src/Components/Workflow/Workflow.tsx | 34 ++++++++++++++++--
 Dashboard/src/Pages/Workflow/View/Builder.tsx |  4 +--
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/CommonUI/src/Components/Workflow/Component.tsx b/CommonUI/src/Components/Workflow/Component.tsx
index d9fd0fe9ff..9136c7a583 100644
--- a/CommonUI/src/Components/Workflow/Component.tsx
+++ b/CommonUI/src/Components/Workflow/Component.tsx
@@ -1,7 +1,7 @@
 import { JSONObject } from 'Common/Types/JSON';
 import React, { FunctionComponent, useState } from 'react';
 import { Handle, Position, Connection } from 'reactflow';
-import Icon, { IconProp } from '../Icon/Icon';
+import Icon, { IconProp, ThickProp } from '../Icon/Icon';
 
 export interface NodeDataProp {
     nodeData: JSONObject;
@@ -10,6 +10,7 @@ export interface NodeDataProp {
     description: string;
     icon: IconProp;
     isTrigger: boolean;
+    onDeleteClick: (id: string) => void;
 }
 
 export interface ComponentProps {
@@ -45,10 +46,39 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                     '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
             }}
         >
+
+            {isHovering && <div style={{
+                "width": "20px",
+                height: "20px",
+                borderRadius: "100px",
+                background: "#ef4444",
+                position: "absolute",
+                top: "-9px",
+                left: "228px",
+                cursor: "pointer"
+            }} onClick={() => {
+                if (props.data.onDeleteClick) {
+                    props.data.onDeleteClick(props.data.id);
+                }
+            }} >
+                <Icon
+                    icon={IconProp.Close}
+                    style={{
+                        color: "white",
+                        width: '1rem',
+                        height: '1rem',
+                        textAlign: 'center',
+                        margin: 'auto',
+                        marginTop: "2px"
+                    }}
+                    thick={ThickProp.Thick}
+                />
+            </div>}
+
             {!props.data.isTrigger && (
                 <Handle
                     type="target"
-                    onConnect={(_params: Connection) => {}}
+                    onConnect={(_params: Connection) => { }}
                     isConnectable={true}
                     position={Position.Top}
                     style={handleStyle}
@@ -114,7 +144,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <Handle
                 type="source"
                 id="a"
-                onConnect={(_params: Connection) => {}}
+                onConnect={(_params: Connection) => { }}
                 isConnectable={true}
                 position={Position.Bottom}
                 style={handleStyle}
diff --git a/CommonUI/src/Components/Workflow/Workflow.tsx b/CommonUI/src/Components/Workflow/Workflow.tsx
index 6c35fe4fec..f75eed0a7a 100644
--- a/CommonUI/src/Components/Workflow/Workflow.tsx
+++ b/CommonUI/src/Components/Workflow/Workflow.tsx
@@ -14,6 +14,7 @@ import ReactFlow, {
     ProOptions,
     NodeTypes,
     OnConnect,
+    getConnectedEdges,
 } from 'reactflow';
 // 👇 you need to import the reactflow styles
 import 'reactflow/dist/style.css';
@@ -46,7 +47,33 @@ export interface ComponentProps {
 const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     const edgeUpdateSuccessful: any = useRef(true);
 
-    const [nodes, _setNodes, onNodesChange] = useNodesState(props.initialNodes);
+    const deleteNode = (id: string) => {
+        // remove the node. 
+
+        const nodesToDelete = [...nodes].filter((node) => {
+            return node.data.id === id
+        })
+        const edgeToDelete = getConnectedEdges(nodesToDelete, edges);
+
+
+        setNodes((nds) => {
+            return nds.filter((node) => {
+                return node.data.id !== id
+            });
+        })
+
+        setNodes((eds) => {
+            return eds.filter((edge) => {
+                const idsToDelete = edgeToDelete.map((e) => e.id);
+                return !idsToDelete.includes(edge.id);
+            })
+        })
+    }
+
+    const [nodes, setNodes, onNodesChange] = useNodesState(props.initialNodes.map((node) => {
+        node.data.onDeleteClick = deleteNode;
+        return node;
+    }));
     const [edges, setEdges, onEdgesChange] = useEdgesState(
         props.initialEdges.map((edge: Edge) => {
             // add style.
@@ -113,6 +140,9 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         edgeUpdateSuccessful.current = true;
     }, []);
 
+
+
+
     return (
         <div className="h-[48rem]">
             <ReactFlow
@@ -129,7 +159,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             >
                 <MiniMap />
                 <Controls />
-                <Background />
+                <Background color='#111827' />
             </ReactFlow>
         </div>
     );
diff --git a/Dashboard/src/Pages/Workflow/View/Builder.tsx b/Dashboard/src/Pages/Workflow/View/Builder.tsx
index 13628c9b4e..f8cd060552 100644
--- a/Dashboard/src/Pages/Workflow/View/Builder.tsx
+++ b/Dashboard/src/Pages/Workflow/View/Builder.tsx
@@ -33,7 +33,7 @@ const Delete: FunctionComponent<PageComponentProps> = (
             type: 'node',
             position: { x: 100, y: 300 },
             data: {
-                id: 'slack-1',
+                id: 'slack-2',
                 title: 'Slack',
                 description: 'Open a channel',
                 icon: IconProp.Add,
@@ -45,7 +45,7 @@ const Delete: FunctionComponent<PageComponentProps> = (
             type: 'addNewNode',
             position: { x: 100, y: 500 },
             data: {
-                id: 'slack-1',
+                id: 'slack-3',
                 title: 'Slack',
                 description: 'Open a channel',
                 icon: IconProp.Add,