From 9444282fa097f6434700fe468af25e2e8b2fe9cc Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Sat, 6 Aug 2022 19:43:18 +0300
Subject: [PATCH] fix: update jsplumb instance

update jsplumb instance on removed connections through forms
---
 .../frontend/src/components/Project/index.tsx | 20 ++++++++++++++++-
 .../frontend/src/components/useJsPlumb.ts     | 22 +++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index 2e85e24..31487c4 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/services/frontend/src/components/Project/index.tsx
@@ -289,6 +289,21 @@ export default function Project(props: IProjectProps) {
   const onUpdateEndpoint = (nodeItem: IServiceNodeItem) => {
     const key = nodeItem.key;
 
+    if (connections.length) {
+      const _connections = [...connections];
+
+      _connections.forEach((conn: any) => {
+        if (key === conn[0]) {
+          const filtered = connections.filter((conn: any) => {
+            return key !== conn[0];
+          }) as any;
+
+          setConnections(filtered);
+          stateConnectionsRef.current = filtered;
+        }
+      });
+    }
+
     if (Array.isArray(nodeItem.serviceConfig.depends_on)) {
       nodeItem.serviceConfig.depends_on.forEach((dep: string) => {
         const depObject = Object.keys(nodes).find((key: string) => {
@@ -298,9 +313,12 @@ export default function Project(props: IProjectProps) {
           }
         });
 
-        onConnectionAttached([key, depObject]);
+        if (depObject) {
+          onConnectionAttached([key, depObject]);
+        }
       });
     }
+
     setNodes({ ...nodes, [nodeItem.key]: nodeItem });
   };
 
diff --git a/services/frontend/src/components/useJsPlumb.ts b/services/frontend/src/components/useJsPlumb.ts
index a29fba7..d622486 100644
--- a/services/frontend/src/components/useJsPlumb.ts
+++ b/services/frontend/src/components/useJsPlumb.ts
@@ -295,12 +295,30 @@ export const useJsPlumb = (
   useEffect(() => {
     if (!instance) return;
 
-    const exisitngConnectionUuids = (
+    const currentConnections = instance.getConnections(
+      {},
+      true
+    ) as Connection[];
+    const currentConnectionUuids = (
       instance.getConnections({}, true) as Connection[]
     ).map((x) => x.getUuids());
 
+    currentConnections.forEach((conn: Connection) => {
+      const uuids = conn.getUuids();
+      uuids[0] = uuids[0].replace("op_", "");
+      uuids[1] = uuids[1].replace("ip_", "");
+
+      const c = connections.find((y) => {
+        return isEqual([uuids[0], uuids[1]], y);
+      });
+
+      if (!c) {
+        instance.deleteConnection(conn);
+      }
+    });
+
     connections.forEach((x) => {
-      const c = exisitngConnectionUuids.find((y) => {
+      const c = currentConnectionUuids.find((y) => {
         return isEqual([`op_${x[0]}`, `ip_${x[1]}`], y);
       });