update UnavaliableFields structure

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -22,9 +22,10 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
-  const unavaliableFields = useGlobalVariablesStore(
+  const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
     (state) => state.unavaliableFields
-  );
+  )));
+
   const availableFields = Array.from(componentFields).filter(
     (field) => !unavaliableFields.has(field)
   );

src/frontend/src/stores/globalVariables.ts

@@ -5,16 +5,13 @@ import { getUnavailableFields } from "../utils/utils";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    unavaliableFields: new Set(),
+    unavaliableFields: {},
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
     },
-    addUnavaliableField: (field) => {
-      set({ unavaliableFields: get().unavaliableFields.add(field) });
-    },
     removeUnavaliableField: (field) => {
       const newFields = get().unavaliableFields;
-      newFields.delete(field);
+      delete newFields[field];
       set({ unavaliableFields: newFields });
     },
     globalVariablesEntries: [],

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

@@ -25,8 +25,7 @@ export type GlobalVariablesStore = {
   ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
-  unavaliableFields: Set<string>;
-  setUnavaliableFields: (fields: Set<string>) => void;
-  addUnavaliableField: (field: string) => void;
+  unavaliableFields: {[name: string]: string};
+  setUnavaliableFields: (fields: {[name: string]: string}) => void;
   removeUnavaliableField: (field: string) => void;
 };

src/frontend/src/utils/utils.ts

@@ -93,16 +93,16 @@ export function toTitleCase(
 
 export function getUnavailableFields(variables: {
   [key: string]: { default_fields?: string[] };
-}): Set<string> {
-  const set = new Set<string>();
+}): {[name: string]: string} {
+  const unVariables:{[name: string]: string} = {};
   Object.keys(variables).forEach((key) => {
     if (variables[key].default_fields) {
       variables[key].default_fields!.forEach((field) => {
-        set.add(field);
+        unVariables[field] = key;
       });
     }
   });
-  return set;
+  return unVariables;
 }
 
 export const upperCaseWords: string[] = ["llm", "uri"];