Refactor GlobalVariablesPage component to include default_fields in rowData

src/frontend/src/App.tsx

@@ -22,7 +22,7 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
-
+import { getUnavailableFields } from "./utils/utils";
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
     (state) => state.removeFromTempNotificationList
@@ -48,6 +48,7 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables
   );
+  const setUnavailableFields = useGlobalVariablesStore((state) => state.setUnavaliableFields);
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
@@ -95,6 +96,7 @@ export default function App() {
         refreshFlows();
         const res = await getGlobalVariables();
         setGlobalVariables(res);
+        setUnavailableFields(getUnavailableFields(res));
         checkHasStore();
         fetchApiData();
       } catch (error) {

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

@@ -22,9 +22,15 @@ 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((state) => state.unavaliableFields);
+  const availableFields = Array.from(componentFields).filter((field) => !unavaliableFields.has(field));
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
+  console.log(componentFields);
+  console.log(unavaliableFields);
+  console.log(availableFields);
+
   function handleSaveVariable() {
     let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
       name: key,
@@ -39,6 +45,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         setKey("");
         setValue("");
         setType("");
+        setFields([]);
         setOpen(false);
       })
       .catch((error) => {
@@ -98,8 +105,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
             password={false}
-            options={Array.from(componentFields)}
+            options={availableFields}
-            placeholder="Choose a type for the variable..."
+            placeholder="Choose a field for the variable..."
           ></InputComponent>
         </div>
       </BaseModal.Content>

src/frontend/src/utils/utils.ts

@@ -91,6 +91,21 @@ export function toTitleCase(
     .join(" ");
 }
 
+export function getUnavailableFields(
+  variables:{[key: string]: { id: string; type: string,default_fields:string[] }}
+): Set<string> {
+  console.log(variables)
+  const set = new Set<string>();
+  Object.keys(variables).forEach((key) => {
+    if(variables[key].default_fields){
+      variables[key].default_fields.forEach((field) => {
+        set.add(field);
+      });
+    }
+  });
+  return set;
+}
+
 export const upperCaseWords: string[] = ["llm", "uri"];
 export function checkUpperWords(str: string): string {
   const words = str.split(" ").map((word) => {