add handle error on requests - global variables (#1808)

📝 (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

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
+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";
@@ -23,7 +23,9 @@ export default function InputGlobalComponent({
   );
 
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
-  const unavaliableFields = useGlobalVariablesStore((state) => state.unavaliableFields);
+  const unavaliableFields = useGlobalVariablesStore(
+    (state) => state.unavaliableFields
+  );
   const removeGlobalVariable = useGlobalVariablesStore(
     (state) => state.removeGlobalVariable
   );
@@ -41,19 +43,23 @@ export default function InputGlobalComponent({
   }, [globalVariablesEntries]);
 
   useEffect(() => {
-    if (!data.node?.template[name].value && data.node?.template[name].display_name) {
-      if(unavaliableFields[data.node?.template[name].display_name!]){
+    if (
+      !data.node?.template[name].value &&
+      data.node?.template[name].display_name
+    ) {
+      if (unavaliableFields[data.node?.template[name].display_name!]) {
         setDb(true);
         onChange(unavaliableFields[data.node?.template[name].display_name!]);
       }
     }
-  },[unavaliableFields]);
+  }, [unavaliableFields]);
 
-  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
@@ -62,11 +68,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

@@ -884,16 +884,26 @@ 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(
@@ -901,10 +911,16 @@ 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 !== "" ? (
@@ -34,15 +38,14 @@ export default function GlobalVariablesPage() {
     );
   };
 
-  const [rowData, setRowData] =
-    useState<
-      {
-        type: string | undefined;
-        id: string;
-        name: string;
-        default_fields: string | undefined;
-      }[]
-    >();
+  const [rowData, setRowData] = useState<
+    {
+      type: string | undefined;
+      id: string;
+      name: string;
+      default_fields: string | undefined;
+    }[]
+  >();
 
   useEffect(() => {
     const rows: Array<{
@@ -106,10 +109,23 @@ export default function GlobalVariablesPage() {
 
   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,5 +1,4 @@
 import { create } from "zustand";
-import { deleteGlobalVariable } from "../controllers/API";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { getUnavailableFields } from "../utils/utils";
 
@@ -35,7 +34,6 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     removeGlobalVariable: async (name) => {
       const id = get().globalVariables[name]?.id;
       if (id === undefined) return;
-      await deleteGlobalVariable(id);
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({