📝 (index.tsx): Remove unused import and update dependencies in InputGlobalComponent

📝 (index.tsx): Add async/await to handleDelete function in InputGlobalComponent
📝 (index.tsx): Add try/catch block to registerGlobalVariable function in API controller
📝 (index.tsx): Add try/catch block to deleteGlobalVariable function in API controller
📝 (index.tsx): Add try/catch block to updateGlobalVariable function in API controller
📝 (index.tsx): Remove unused import and add deleteGlobalVariable import in GlobalVariablesPage
📝 (index.tsx): Add setErrorData and getVariableId hooks to GlobalVariablesPage
📝 (index.tsx): Add async/await to removeVariables function in GlobalVariablesPage
📝 (globalVariables.ts): Remove unused import in globalVariables store
📝 (globalVariables.ts): Remove async/await from removeGlobalVariable function in globalVariables store

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

@@ -3,7 +3,6 @@ import { deleteGlobalVariable } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
-import { ResponseErrorDetailAPI } from "../../types/api";
 import { InputGlobalComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
 import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariableButton";
@@ -40,10 +39,12 @@ export default function InputGlobalComponent({
       }
   }, [globalVariablesEntries]);
 
-  function handleDelete(key: string) {
+  async function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      removeGlobalVariable(key).then((_) => {
+      await deleteGlobalVariable(id)
+        .then(() => {
+          removeGlobalVariable(key);
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db
@@ -52,11 +53,10 @@ export default function InputGlobalComponent({
             setDb(false);
           }
         })
-        .catch((error) => {
-          let responseError = error as ResponseErrorDetailAPI;
+        .catch(() => {
           setErrorData({
             title: "Error deleting variable",
-            list: [responseError.response.data.detail ?? "Unknown error"],
+            list: [cn("ID not found for variable: ", key)],
           });
         });
     } else {

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

@@ -883,16 +883,29 @@ export async function registerGlobalVariable({
   type?: string;
   default_fields?: string[];
 }): Promise<AxiosResponse<{ name: string; id: string; type: string }>> {
-  return await api.post(`${BASE_URL_API}variables/`, {
-    name,
-    value,
-    type,
-    default_fields:default_fields
-  });
+  try{
+    const response = await api.post(`${BASE_URL_API}variables/`, {
+      name,
+      value,
+      type,
+      default_fields:default_fields
+    });
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
+
 }
 
 export async function deleteGlobalVariable(id: string) {
-  api.delete(`${BASE_URL_API}variables/${id}`);
+  try{
+    const response = await api.delete(`${BASE_URL_API}variables/${id}`);
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
 }
 
 export async function updateGlobalVariable(
@@ -900,10 +913,18 @@ export async function updateGlobalVariable(
   value: string,
   id: string
 ) {
-  api.patch(`${BASE_URL_API}variables/${id}`, {
-    name,
-    value,
-  });
+  try{
+    const response = api.patch(`${BASE_URL_API}variables/${id}`, {
+      name,
+      value,
+    });
+
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
+
 }
 
 export async function getVerticesOrder(

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

@@ -8,6 +8,8 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
+import { deleteGlobalVariable } from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { cn } from "../../../../utils/utils";
 
@@ -21,6 +23,8 @@ export default function GlobalVariablesPage() {
   const globalVariables = useGlobalVariablesStore(
     (state) => state.globalVariables
   );
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
 
   const BadgeRenderer = (props) => {
     return props.value !== "" ? (
@@ -33,10 +37,12 @@ export default function GlobalVariablesPage() {
       <div></div>
     );
   };
-  const [rowData, setRowData] = useState<{ type: string | undefined; id: string; name: string; }[]>();
+  const [rowData, setRowData] =
+    useState<{ type: string | undefined; id: string; name: string }[]>();
 
   useEffect(() => {
-    const rows:Array<{type: string | undefined; id: string; name: string}> = [];
+    const rows: Array<{ type: string | undefined; id: string; name: string }> =
+      [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
       rows.push({
@@ -87,15 +93,27 @@ export default function GlobalVariablesPage() {
       flex: 1,
       editable: false,
     },
-
   ]);
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
-  function removeVariables() {
-    selectedRows.forEach((row) => {
-      removeGlobalVariable(row);
+  async function removeVariables() {
+    const deleteGlobalVariablesPromise = selectedRows.map(async (row) => {
+      const id = getVariableId(row);
+      const deleteGlobalVariables = deleteGlobalVariable(id!);
+      await deleteGlobalVariables;
     });
+    Promise.all(deleteGlobalVariablesPromise)
+      .then(() => {
+        selectedRows.forEach((row) => {
+          removeGlobalVariable(row);
+        });
+      })
+      .catch(() => {
+        setErrorData({
+          title: `Error deleting global variables.`,
+        });
+      });
   }
 
   return (

src/frontend/src/stores/globalVariables.ts

@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
-import { deleteGlobalVariable } from "../controllers/API";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
@@ -30,10 +29,10 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    removeGlobalVariable:async (name) => {
+    removeGlobalVariable: async (name) => {
       const id = get().globalVariables[name]?.id;
       if (id === undefined) return;
-      await deleteGlobalVariable(id)
+
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({