From d0dcb32a7ea3676e731f457c6a35445e2efae238 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:50:58 -0300
Subject: [PATCH] Refactor global variables page and add delete functionality

---
 .../components/addNewVariableButton.tsx         |  6 +++++-
 .../src/pages/globalVariablesPage/index.tsx     | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 108bc8b0a..f30cdbc55 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -12,16 +12,20 @@ import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 export default function AddNewVariableButton(): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
+  const [open, setOpen] = useState(false);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
     registerGlobalVariable(key, value).then((_) => {
       addGlobalVariable(key, value);
+      setKey("");
+      setValue("");
+      setOpen(false);
     });
   }
   return (
-    <BaseModal size="small">
+    <BaseModal open={open} setOpen={setOpen} size="small">
       <BaseModal.Header
         description={"write a text variable to use anywhere on your flow"}
       >
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index b8360e7a0..40c2322f7 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -1,11 +1,23 @@
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
+import { deleteGlobalVariable } from "../../controllers/API";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import AddNewVariableButton from "./components/addNewVariableButton";
 
+//TODO: improve UI
+
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+
+  function handleDelete(key: string) {
+    deleteGlobalVariable(key).then((_) => removeGlobalVariable(key));
+  }
   return (
     <PageLayout
       title="Variables"
@@ -16,6 +28,11 @@ export default function GlobalVariablesPage() {
           {globalVariablesEntries.map((key, index) => (
             <div className="flex w-full items-start" key={index}>
               <span>{key}</span>
+              <ShadTooltip content="Delete">
+                <button onClick={(_) => handleDelete(key)} className="ml-auto">
+                  <IconComponent name="Trash2" />
+                </button>
+              </ShadTooltip>
             </div>
           ))}
           <AddNewVariableButton />