code format

src/frontend/src/App.tsx

@@ -22,7 +22,6 @@ 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,7 +47,9 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables
   );
-  const setUnavailableFields = useGlobalVariablesStore((state) => state.setUnavaliableFields);
+  const setUnavailableFields = useGlobalVariablesStore(
+    (state) => state.setUnavaliableFields
+  );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);

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

@@ -3,6 +3,7 @@ import { registerGlobalVariable } from "../../controllers/API";
 import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
@@ -10,7 +11,6 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
-import { useTypesStore } from "../../stores/typesStore";
 
 //TODO IMPLEMENT FORM LOGIC
 
@@ -22,18 +22,27 @@ 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 unavaliableFields = useGlobalVariablesStore(
-  const availableFields = Array.from(componentFields).filter((field) => !unavaliableFields.has(field));
+    (state) => state.unavaliableFields
+  );
+  const availableFields = Array.from(componentFields).filter(
+    (field) => !unavaliableFields.has(field)
+  );
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
 
   function handleSaveVariable() {
-    let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
+    let data: {
+      name: string;
+      value: string;
+      type?: string;
+      default_fields?: string[];
+    } = {
       name: key,
       type,
       value,
-      default_fields: fields
+      default_fields: fields,
     };
     registerGlobalVariable(data)
       .then((res) => {

src/frontend/src/components/dropdownComponent/index.tsx

@@ -33,7 +33,9 @@ export default function Dropdown({
 
   const refButton = useRef<HTMLButtonElement>(null);
 
-  const PopoverContentDropdown = children ? PopoverContent : PopoverContentWithoutPortal;
+  const PopoverContentDropdown = children
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
 
   return (
     <>
@@ -77,7 +79,11 @@ export default function Dropdown({
             )}
             <PopoverContentDropdown
               className="nocopy nowheel nopan nodelete nodrag noundo p-0"
-              style={children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }}
+              style={
+                children
+                  ? {}
+                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+              }
             >
               <Command>
                 <CommandInput placeholder="Search options..." className="h-9" />

src/frontend/src/components/inputGlobalComponent/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { deleteGlobalVariable } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
@@ -43,7 +42,8 @@ export default function InputGlobalComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      removeGlobalVariable(key).then((_) => {
+      removeGlobalVariable(key)
+        .then((_) => {
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db

src/frontend/src/controllers/API/index.ts

@@ -860,14 +860,14 @@ export async function requestLogout() {
 }
 
 export async function getGlobalVariables(): Promise<{
-  [key: string]: { id: string; type: string,default_fields:string[] };
+  [key: string]: { id: string; type: string; default_fields: string[] };
 }> {
   const globalVariables = {};
   (await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
     globalVariables[element.name] = {
       id: element.id,
       type: element.type,
-      default_fields:element.default_fields
+      default_fields: element.default_fields,
     };
   });
   return globalVariables;
@@ -877,7 +877,7 @@ export async function registerGlobalVariable({
   name,
   value,
   type,
-  default_fields=[],
+  default_fields = [],
 }: {
   name: string;
   value: string;
@@ -888,7 +888,7 @@ export async function registerGlobalVariable({
     name,
     value,
     type,
-    default_fields:default_fields
+    default_fields: default_fields,
   });
 }
 

src/frontend/src/pages/SettingsPage/index.tsx

@@ -16,16 +16,16 @@ export default function SettingsPage(): JSX.Element {
 
   const sidebarNavItems = [
     {
-        title: "General",
+      title: "General",
-        href: "/settings/general",
+      href: "/settings/general",
-        icon: (
+      icon: (
-          <ForwardedIconComponent
+        <ForwardedIconComponent
-            name="SlidersHorizontal"
+          name="SlidersHorizontal"
-            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
-          />
+        />
-        ),
+      ),
-      },
+    },
-      /* {
+    /* {
         title: "Theme",
         href: "/settings/theme",
         icon: (

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -34,19 +34,29 @@ export default function GlobalVariablesPage() {
     );
   };
 
-
+  const [rowData, setRowData] =
-  const [rowData, setRowData] = useState<{ type: string | undefined;
+    useState<
-     id: string; name: string; default_fields:string | undefined }[]>();
+      {
+        type: string | undefined;
+        id: string;
+        name: string;
+        default_fields: string | undefined;
+      }[]
+    >();
 
   useEffect(() => {
-    const rows:Array<{type: string | undefined; id: string;
+    const rows: Array<{
-       name: string;default_fields:string | undefined}> = [];
+      type: string | undefined;
+      id: string;
+      name: string;
+      default_fields: string | undefined;
+    }> = [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
       rows.push({
         type: globalVariableObj.type,
         id: globalVariableObj.id,
-        default_fields: (globalVariableObj.default_fields??[]).join(", "),
+        default_fields: (globalVariableObj.default_fields ?? []).join(", "),
         name: e,
       });
     });
@@ -92,7 +102,6 @@ export default function GlobalVariablesPage() {
       flex: 1,
       editable: false,
     },
-
   ]);
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

@@ -124,9 +124,7 @@ export default function ShortcutsPage() {
         <Card x-chunk="dashboard-04-chunk-2">
           <CardHeader>
             <CardTitle>Flow</CardTitle>
-            <CardDescription>
+            <CardDescription>Shortcuts relating to the flow.</CardDescription>
-              Shortcuts relating to the flow.
-            </CardDescription>
           </CardHeader>
           <CardContent>
             <TableComponent

src/frontend/src/routes.tsx

@@ -11,7 +11,6 @@ import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
-import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import SettingsPage from "./pages/SettingsPage";
 import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
 import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";

src/frontend/src/stores/flowsManagerStore.ts

@@ -83,7 +83,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             );
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
-              ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
+              ComponentFields: extractFieldsFromComponenents({
+                ...state.data,
+                ["saved_components"]: data,
+              }),
             }));
             set({ isLoading: false });
             resolve();
@@ -199,7 +202,10 @@ 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 }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...state.data,
+              ["saved_components"]: data,
+            }),
           }));
         }, 200);
         // addFlowToLocalState(newFlow);
@@ -222,7 +228,10 @@ 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 }),
+          ComponentFields: extractFieldsFromComponenents({
+            ...state.data,
+            ["saved_components"]: data,
+          }),
         }));
 
         // Return the id
@@ -252,7 +261,10 @@ 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 }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...state.data,
+              ["saved_components"]: data,
+            }),
           }));
           resolve();
         });

src/frontend/src/stores/globalVariables.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
-import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { deleteGlobalVariable } from "../controllers/API";
+import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { getUnavailableFields } from "../utils/utils";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
@@ -21,7 +21,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: variables,
         globalVariablesEntries: Object.keys(variables),
-        unavaliableFields: getUnavailableFields(variables)
+        unavaliableFields: getUnavailableFields(variables),
       });
     },
     addGlobalVariable: (name, id, type, default_fields) => {
@@ -30,19 +30,19 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
-        unavaliableFields: getUnavailableFields(newVariables)
+        unavaliableFields: getUnavailableFields(newVariables),
       });
     },
-    removeGlobalVariable:async (name) => {
+    removeGlobalVariable: async (name) => {
       const id = get().globalVariables[name]?.id;
       if (id === undefined) return;
-      await deleteGlobalVariable(id)
+      await deleteGlobalVariable(id);
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
-        unavaliableFields: getUnavailableFields(newVariables)
+        unavaliableFields: getUnavailableFields(newVariables),
       });
     },
     getVariableId: (name) => {

src/frontend/src/stores/typesStore.ts

@@ -2,7 +2,11 @@ import { create } from "zustand";
 import { getAll } from "../controllers/API";
 import { APIDataType } from "../types/api";
 import { TypesStoreType } from "../types/zustand/types";
-import { extractFieldsFromComponenents, templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
+import {
+  extractFieldsFromComponenents,
+  templatesGenerator,
+  typesGenerator,
+} from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
 import useFlowsManagerStore from "./flowsManagerStore";
 
@@ -28,7 +32,10 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
           set((old) => ({
             types: typesGenerator(data),
             data: { ...old.data, ...data },
-            ComponentFields: extractFieldsFromComponenents({ ...old.data, ...data }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...old.data,
+              ...data,
+            }),
             templates: templatesGenerator(data),
           }));
           setLoading(false);
@@ -50,7 +57,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

@@ -9,7 +9,12 @@ export type GlobalVariablesStore = {
     };
   };
   setGlobalVariables: (variables: {
-    [name: string]: { id: string; type?: string; default_fields?: string[],value?: string };
+    [name: string]: {
+      id: string;
+      type?: string;
+      default_fields?: string[];
+      value?: string;
+    };
   }) => void;
   addGlobalVariable: (
     name: string,

src/frontend/src/utils/reactflowUtils.ts

@@ -1234,13 +1234,16 @@ export function templatesGenerator(data: APIObjectType) {
   }, {});
 }
 
-export function extractFieldsFromComponenents(data:APIObjectType ) {
+export function extractFieldsFromComponenents(data: APIObjectType) {
   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)
+        if (
-        fields.add(data[key][kind].template[field].display_name!);
+          data[key][kind].template[field].display_name &&
+          data[key][kind].template[field].show
+        )
+          fields.add(data[key][kind].template[field].display_name!);
       });
     });
   });

src/frontend/src/utils/utils.ts

@@ -91,12 +91,12 @@ export function toTitleCase(
     .join(" ");
 }
 
-export function getUnavailableFields(
+export function getUnavailableFields(variables: {
-  variables:{[key: string]: { default_fields?:string[] }}
+  [key: string]: { default_fields?: string[] };
-): Set<string> {
+}): Set<string> {
   const set = new Set<string>();
   Object.keys(variables).forEach((key) => {
-    if(variables[key].default_fields){
+    if (variables[key].default_fields) {
       variables[key].default_fields!.forEach((field) => {
         set.add(field);
       });