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

@@ -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;

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":

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;
+}