From 4a1c9f8daeefb300c070277e4b9bd9853af3808a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:30:41 -0300
Subject: [PATCH] Add global variable functionality and display on Global
 Variables page

---
 .../src/components/inputComponent/index.tsx   | 110 +++++++++---------
 .../components/addNewVariableButton.tsx       |   8 +-
 .../src/pages/globalVariablesPage/index.tsx   |  15 ++-
 3 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 720b41eb3..2762c5d21 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -7,7 +7,6 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
-
 export default function InputComponent({
   autoFocus = false,
   onBlur,
@@ -27,8 +26,13 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const [filteredOpts, setFilteredValue] = useState<string[]>(["key", "key2", "key3", "key4", "key5"]);
-
+  const [filteredOpts, setFilteredValue] = useState<string[]>([
+    "key",
+    "key2",
+    "key3",
+    "key4",
+    "key5",
+  ]);
 
   // Clear component state
   useEffect(() => {
@@ -37,16 +41,15 @@ export default function InputComponent({
     }
   }, [disabled]);
 
-
-  const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase()))
-
+  const filteredOptions = filteredOpts.filter((option) =>
+    option.toLowerCase().includes(value.toLowerCase())
+  );
 
   function onInputLostFocus(event): void {
     if (onBlur) onBlur(event);
     setShowOptions(false);
   }
 
-
   return (
     <div className="relative w-full">
       {isForm ? (
@@ -136,59 +139,54 @@ export default function InputComponent({
                           false ? "mb-2 w-[250px]" : "absolute w-full"
                         )}
                       >
-                        {filteredOptions.map(
-                          (option, id) => (
-                            <Listbox.Option
-                              key={id}
-                              className={({ active }) =>
-                                classNames(
-                                  active ? " bg-accent" : "",
-                                  editNode
-                                    ? "dropdown-component-false-option"
-                                    : "dropdown-component-true-option",
-                                  " hover:bg-accent"
-                                )
-                              }
-                              value={option}
-                            >
-                              {({ selected, active }) => (
-                                <>
+                        {filteredOptions.map((option, id) => (
+                          <Listbox.Option
+                            key={id}
+                            className={({ active }) =>
+                              classNames(
+                                active ? " bg-accent" : "",
+                                editNode
+                                  ? "dropdown-component-false-option"
+                                  : "dropdown-component-true-option",
+                                " hover:bg-accent"
+                              )
+                            }
+                            value={option}
+                          >
+                            {({ selected, active }) => (
+                              <>
+                                <span
+                                  className={classNames(
+                                    selected ? "font-semibold" : "font-normal",
+                                    "block truncate "
+                                  )}
+                                  data-testid={`${option}-${id ?? ""}-option`}
+                                >
+                                  {option}
+                                </span>
+
+                                {selected ? (
                                   <span
                                     className={classNames(
-                                      selected
-                                        ? "font-semibold"
-                                        : "font-normal",
-                                      "block truncate "
+                                      active ? "text-background " : "",
+                                      "dropdown-component-choosal"
                                     )}
-                                    data-testid={`${option}-${id ?? ""}-option`}
                                   >
-                                    {option}
+                                    <IconComponent
+                                      name="Check"
+                                      className={
+                                        active
+                                          ? "dropdown-component-check-icon"
+                                          : "dropdown-component-check-icon"
+                                      }
+                                      aria-hidden="true"
+                                    />
                                   </span>
-
-
-                                  {selected ? (
-                                    <span
-                                      className={classNames(
-                                        active ? "text-background " : "",
-                                        "dropdown-component-choosal"
-                                      )}
-                                    >
-                                      <IconComponent
-                                        name="Check"
-                                        className={
-                                          active
-                                            ? "dropdown-component-check-icon"
-                                            : "dropdown-component-check-icon"
-                                        }
-                                        aria-hidden="true"
-                                      />
-                                    </span>
-                                  ) : null}
-                                </>
-                              )}
-                            </Listbox.Option>
-                          )
-                        )}
+                                ) : null}
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))}
                       </Listbox.Options>
                     </Transition>
                   </div>
@@ -199,7 +197,6 @@ export default function InputComponent({
         </>
       )}
 
-
       <span
         className={
           password
@@ -214,7 +211,6 @@ export default function InputComponent({
         />
       </span>
 
-
       {password && (
         <button
           type="button"
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 17f815c60..108bc8b0a 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -5,14 +5,20 @@ import { Label } from "../../../components/ui/label";
 import { Textarea } from "../../../components/ui/textarea";
 import { registerGlobalVariable } from "../../../controllers/API";
 import BaseModal from "../../../modals/baseModal";
+import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
 export default function AddNewVariableButton(): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
+  const addGlobalVariable = useGlobalVariablesStore(
+    (state) => state.addGlobalVariable
+  );
   function handleSaveVariable() {
-    registerGlobalVariable(key, value).then((_) => {});
+    registerGlobalVariable(key, value).then((_) => {
+      addGlobalVariable(key, value);
+    });
   }
   return (
     <BaseModal size="small">
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index c70ec8a02..b8360e7a0 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -3,16 +3,23 @@ import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import AddNewVariableButton from "./components/addNewVariableButton";
 
 export default function GlobalVariablesPage() {
-  const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
   );
   return (
     <PageLayout
       title="Variables"
       description="set your own personal varaibles and use it on your flow"
     >
-      {Object.keys(globalVariables).length > 0 ? (
-        <div></div>
+      {globalVariablesEntries.length > 0 ? (
+        <div className="flex h-full w-full flex-col justify-around">
+          {globalVariablesEntries.map((key, index) => (
+            <div className="flex w-full items-start" key={index}>
+              <span>{key}</span>
+            </div>
+          ))}
+          <AddNewVariableButton />
+        </div>
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center align-middle">
           <div>