fix(App.tsx): import getGlobalVariables function from API controller to fix missing import error

feat(App.tsx): add support for fetching global variables and setting them in the global variables store
feat(App.tsx): add useGlobalVariablesStore hook to access and set global variables in the component
feat(addNewVariableButton.tsx): create a new component for adding a new variable
feat(GlobalVariablesPage.tsx): create GlobalVariablesPage component to display and manage global variables
feat(routes.tsx): add route for GlobalVariablesPage component
feat(globalVariables.ts): update globalVariables store to include globalVariablesEntries array and modify setGlobalVariables function to set both globalVariables and globalVariablesEntries
feat(index.ts): add types for globalVariables store

src/frontend/src/App.tsx

@@ -15,11 +15,12 @@ import {
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
-import { getHealth } from "./controllers/API";
+import { getGlobalVariables, getHealth } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
@@ -124,6 +125,9 @@ export default function App() {
   const getTypes = useTypesStore((state) => state.getTypes);
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
+  const setGlobalVariables = useGlobalVariablesStore(
+    (state) => state.setGlobalVariables
+  );
 
   useEffect(() => {
     refreshStars();
@@ -135,6 +139,9 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      getGlobalVariables().then((res) => {
+        setGlobalVariables(res);
+      });
     }
   }, [isAuthenticated]);
 

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

@@ -851,7 +851,7 @@ export async function requestLogout() {
   }
 }
 
-export async function getGlobalVariables() {
+export async function getGlobalVariables(): Promise<{ [key: string]: string }> {
   // mocked for now but will eventually be a real API call
   const globalVariables = window.sessionStorage.getItem("globalVariables");
   return globalVariables ? JSON.parse(globalVariables) : {};

src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx

@@ -0,0 +1,38 @@
+import { Button } from "../../../components/ui/button";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import BaseModal from "../../../modals/baseModal";
+
+//TODO IMPLEMENT FORM LOGIC
+
+export default function AddNewVariableButton(): JSX.Element {
+  function handleSaveVariable() {}
+  return (
+    <BaseModal size="small">
+      <BaseModal.Header
+        description={"write a text variable to use anywhere on your flow"}
+      >
+        <span>Create a new Variable</span>
+      </BaseModal.Header>
+      <BaseModal.Trigger>
+        <Button>Create a new variable</Button>
+      </BaseModal.Trigger>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col justify-around align-middle">
+          <div className="h-1/2">
+            <Label>Variable name </Label>
+            <Input placeholder="example name"></Input>
+          </div>
+          <div className="h-1/2">
+            <Label>Variable Value </Label>
+            <Textarea className="h-4/6 w-full resize-none custom-scroll" />
+          </div>
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <Button onClick={handleSaveVariable}>Save variable</Button>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}

src/frontend/src/pages/globalVariablesPage/index.tsx

@@ -0,0 +1,26 @@
+import PageLayout from "../../components/pageLayout";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import AddNewVariableButton from "./components/addNewVariableButton";
+
+export default function GlobalVariablesPage() {
+  const globalVariables = useGlobalVariablesStore(
+    (state) => state.globalVariables
+  );
+  return (
+    <PageLayout
+      title="Variables"
+      description="set your own personal varaibles and use it on your flow"
+    >
+      {Object.keys(globalVariables).length > 0 ? (
+        <div></div>
+      ) : (
+        <div className="flex h-full w-full flex-col items-center justify-center align-middle">
+          <div>
+            <p> create your first variable</p>
+            <AddNewVariableButton />
+          </div>
+        </div>
+      )}
+    </PageLayout>
+  );
+}

src/frontend/src/routes.tsx

@@ -15,6 +15,7 @@ import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
+import GlobalVariablesPage from "./pages/globalVariablesPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
 
@@ -153,6 +154,14 @@ const Router = () => {
           }
         ></Route>
       </Route>
+      <Route
+        path="variables"
+        element={
+          <ProtectedRoute>
+            <GlobalVariablesPage />
+          </ProtectedRoute>
+        }
+      ></Route>
     </Routes>
   );
 };

src/frontend/src/stores/globalVariables.ts

@@ -1,9 +1,15 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
-const useGlobalVariablesStore = create<GlobalVariablesStore>((set, get) => ({
-  globalVariables: [],
-  setGlobalVariables: (variables) => {
-    set({ globalVariables: variables });
-  },
-}));
+export const useGlobalVariablesStore = create<GlobalVariablesStore>(
+  (set, get) => ({
+    globalVariablesEntries: [],
+    globalVariables: {},
+    setGlobalVariables: (variables) => {
+      set({
+        globalVariables: variables,
+        globalVariablesEntries: Object.keys(variables),
+      });
+    },
+  })
+);

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

@@ -1,4 +1,5 @@
 export type GlobalVariablesStore = {
-  globalVariables: Array<string>;
-  setGlobalVariables: (variables: Array<string>) => void;
+  globalVariablesEntries: Array<string>;
+  globalVariables: { [key: string]: string };
+  setGlobalVariables: (variables: { [key: string]: string }) => void;
 };