From 277caccc05d42cf1ae56c5124120c17d3807b743 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 17 Oct 2023 19:43:30 -0300
Subject: [PATCH] fix(typesContext.tsx): fix import statement for APIClassType
 in typesContext.tsx feat(typesContext.tsx): add support for generating unique
 display names for custom components in typesContext.tsx
 fix(nodeToolbarComponent/index.tsx): fix issue with saving component data by
 cloning the data object before saving feat(utils.ts): add getSetFromObject
 function to get a set of keys from an object

---
 src/frontend/src/contexts/typesContext.tsx    | 27 +++++++++++++++----
 .../components/nodeToolbarComponent/index.tsx |  3 ++-
 src/frontend/src/utils/utils.ts               | 14 ++++++++++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index f3c48c31e..ab0b55c7a 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -8,12 +8,13 @@ import {
 } from "react";
 import { Edge, Node, ReactFlowInstance } from "reactflow";
 import { getAll, getHealth } from "../controllers/API";
-import { APIKindType } from "../types/api";
+import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
 import {
   checkLocalStorageKey,
+  getSetFromObject,
   IncrementObjectKey,
   removeCountFromString,
 } from "../utils/utils";
@@ -154,14 +155,30 @@ export function TypesProvider({ children }: { children: ReactNode }) {
     let components = savedComponentsJSON.components;
     let key = component.type;
     if (data["custom_components"][key] !== undefined) {
-      const { newKey, increment } = IncrementObjectKey(
+      let { newKey, increment } = IncrementObjectKey(
         data["custom_components"],
         key
       );
       key = newKey;
-      component.node!.display_name =
-        removeCountFromString(component.node?.display_name!) +
-        ` (${increment})`;
+      let componentNodes: { [key: string]: APIClassType } = {};
+      Object.keys(data["custom_components"]).forEach((key) => {
+        componentNodes[key] = data["custom_components"][key];
+      });
+      const display_nameSet = getSetFromObject(componentNodes, "display_name");
+      if (display_nameSet.has(component.node?.display_name!)) {
+        increment = 1;
+        while (
+          display_nameSet.has(
+            removeCountFromString(component.node?.display_name!) +
+              ` (${increment})`
+          )
+        ) {
+          increment++;
+        }
+        component.node!.display_name =
+          removeCountFromString(component.node?.display_name!) +
+          ` (${increment})`;
+      }
     }
     component.node!.official = false;
     components[key] = component;
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index a4c4c54a3..39e1c9094 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,3 +1,4 @@
+import { cloneDeep } from "lodash";
 import { useContext, useState } from "react";
 import { useReactFlow, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
@@ -84,7 +85,7 @@ export default function NodeToolbarComponent({
         break;
       case "SaveAll":
         if (isAuthenticated) {
-          saveComponent(data, autoLogin ? "auto" : userData?.id!);
+          saveComponent(cloneDeep(data), autoLogin ? "auto" : userData?.id!);
         }
         break;
       case "disabled":
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index d6004a8f7..567a18247 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -603,3 +603,17 @@ export function sensitiveSort(a: string, b: string): number {
     return a.localeCompare(b);
   }
 }
+// this function is used to get the set of keys from an object
+export function getSetFromObject(obj: object, key?: string): Set<string> {
+  const set = new Set<string>();
+  if (key) {
+    for (const objKey in obj) {
+      set.add(obj[objKey][key]);
+    }
+  } else {
+    for (const key in obj) {
+      set.add(key);
+    }
+  }
+  return set;
+}