Refactored globalVariables.ts and globalVariables/index.ts to extract and store component fields

src/frontend/src/stores/flowsManagerStore.ts

@@ -22,6 +22,7 @@ import {
   addVersionToDuplicates,
   createFlowComponent,
   createNewFlow,
+  extractFieldsFromComponenents,
   processDataFromFlow,
   processFlows,
 } from "../utils/reactflowUtils";
@@ -82,6 +83,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             );
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
+              ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
             }));
             set({ isLoading: false });
             resolve();
@@ -197,6 +199,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
+            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
           }));
         }, 200);
         // addFlowToLocalState(newFlow);
@@ -219,6 +222,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         set({ isLoading: false });
         useTypesStore.setState((state) => ({
           data: { ...state.data, ["saved_components"]: data },
+          ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
         }));
 
         // Return the id
@@ -248,6 +252,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
+            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
           }));
           resolve();
         });

src/frontend/src/stores/globalVariables.ts

@@ -3,7 +3,6 @@ import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    avaliableFields: new Set(),
     unavaliableFields: new Set(),
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
@@ -14,12 +13,6 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     removeUnavaliableField: (field) => {
       get().unavaliableFields.delete(field);
     },
-    setAvaliableFields: (fields) => {
-      set({ avaliableFields: fields });
-    },
-    addAvaliableField: (field) => {
-      set({ avaliableFields: get().avaliableFields.add(field) });
-    },
     globalVariablesEntries: [],
     globalVariables: {},
     setGlobalVariables: (variables) => {

src/frontend/src/stores/typesStore.ts

@@ -2,11 +2,18 @@ import { create } from "zustand";
 import { getAll } from "../controllers/API";
 import { APIDataType } from "../types/api";
 import { TypesStoreType } from "../types/zustand/types";
-import { templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
+import { extractFieldsFromComponenents, templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
 import useFlowsManagerStore from "./flowsManagerStore";
 
 export const useTypesStore = create<TypesStoreType>((set, get) => ({
+  ComponentFields: new Set(),
+  setComponentFields: (fields) => {
+    set({ ComponentFields: fields });
+  },
+  addComponentField: (field) => {
+    set({ ComponentFields: get().ComponentFields.add(field) });
+  },
   types: {},
   templates: {},
   data: {},
@@ -21,10 +28,10 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
           set((old) => ({
             types: typesGenerator(data),
             data: { ...old.data, ...data },
+            ComponentFields: extractFieldsFromComponenents({ ...old.data, ...data }),
             templates: templatesGenerator(data),
           }));
           setLoading(false);
-          console.log(templatesGenerator(data))
           resolve();
         })
         .catch((error) => {
@@ -43,6 +50,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
   },
   setData: (change: APIDataType | ((old: APIDataType) => APIDataType)) => {
     let newChange = typeof change === "function" ? change(get().data) : change;
-    set({ data: newChange });
+    set({ data: newChange});
+    get().setComponentFields(extractFieldsFromComponenents(newChange));
   },
 }));

src/frontend/src/types/zustand/globalVariables/index.ts

@@ -7,9 +7,6 @@ export type GlobalVariablesStore = {
   addGlobalVariable: (name: string, id: string, type?: string) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
-  avaliableFields: Set<string>;
-  setAvaliableFields: (fields: Set<string>) => void;
-  addAvaliableField: (field: string) => void;
   unavaliableFields: Set<string>;
   setUnavaliableFields: (fields: Set<string>) => void;
   addUnavaliableField: (field: string) => void;

src/frontend/src/types/zustand/types/index.ts

@@ -8,4 +8,7 @@ export type TypesStoreType = {
   data: APIDataType;
   setData: (newState: {}) => void;
   getTypes: () => Promise<void>;
+  ComponentFields: Set<string>;
+  setComponentFields: (fields: Set<string>) => void;
+  addComponentField: (field: string) => void;
 };

src/frontend/src/utils/reactflowUtils.ts

@@ -1235,16 +1235,17 @@ export function templatesGenerator(data: APIObjectType) {
 }
 
 export function extractFieldsFromComponenents(data:APIObjectType ) {
-  const fields = new Set();
+  const fields = new Set<string>();
   Object.keys(data).forEach((key) => {
     Object.keys(data[key]).forEach((kind) => {
       Object.keys(data[key][kind].template).forEach((field) => {
         if(data[key][kind].template[field].display_name && data[key][kind].template[field].show)
-        fields.add(data[key][kind].template[field].display_name);
+        fields.add(data[key][kind].template[field].display_name!);
       });
     });
   });
-  return Array.from(fields);
+  console.log(fields);
+  return fields;
 }
 
 export function downloadFlow(