Refactor global variables page and add delete functionality

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"}
       >

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 />