Implemented error alerts and function to clean deleted global variables

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -35,7 +35,11 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { useTypesStore } from "../../../../stores/typesStore";
-import { APIClassType, ResponseErrorTypeAPI } from "../../../../types/api";
+import {
+  APIClassType,
+  ResponseErrorDetailAPI,
+  ResponseErrorTypeAPI,
+} from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import {
   handleUpdateValues,
@@ -90,25 +94,36 @@ export default function ParameterComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      deleteGlobalVariable(id).then((_) => {
+      deleteGlobalVariable(id)
-        removeGlobalVariable(key);
+        .then((_) => {
-        if (
+          removeGlobalVariable(key);
-          data?.node?.template[name].value === key &&
+          if (
-          data?.node?.template[name].load_from_db
+            data?.node?.template[name].value === key &&
-        ) {
+            data?.node?.template[name].load_from_db
-          handleOnNewValue("");
+          ) {
-          setNode(data.id, (oldNode) => {
+            handleOnNewValue("");
-            let newNode = cloneDeep(oldNode);
+            setNode(data.id, (oldNode) => {
-            newNode.data = {
+              let newNode = cloneDeep(oldNode);
-              ...newNode.data,
+              newNode.data = {
-            };
+                ...newNode.data,
-            newNode.data.node.template[name].load_from_db = false;
+              };
-            return newNode;
+              newNode.data.node.template[name].load_from_db = false;
+              return newNode;
+            });
+          }
+        })
+        .catch((error) => {
+          let responseError = error as ResponseErrorDetailAPI;
+          setErrorData({
+            title: "Error deleting variable",
+            list: [responseError.response.data.detail ?? "Unknown error"],
           });
-        }
+        });
-      });
     } else {
-      console.error("id is undefined");
+      setErrorData({
+        title: "Error deleting variable",
+        list: [cn("ID not found for variable: ", key)],
+      });
     }
   }
 
@@ -154,6 +169,24 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
+  useEffect(() => {
+    if (data.node?.template[name])
+      if (
+        !globalVariablesEntries.includes(data.node?.template[name].value) &&
+        data.node?.template[name].load_from_db
+      ) {
+        handleOnNewValue("");
+        setNode(data.id, (oldNode) => {
+          let newNode = cloneDeep(oldNode);
+          newNode.data = {
+            ...newNode.data,
+          };
+          newNode.data.node.template[name].load_from_db = false;
+          return newNode;
+        });
+      }
+  }, [globalVariablesEntries]);
+
   useEffect(() => {
     async function fetchData() {
       if (

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { registerGlobalVariable } from "../../controllers/API";
 import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import { ResponseErrorDetailAPI, ResponseErrorTypeAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
@@ -16,6 +18,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [value, setValue] = useState("");
   const [provider, setProvider] = useState("");
   const [open, setOpen] = useState(false);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
@@ -25,14 +28,22 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       value,
     };
     if (provider) data = { ...data, provider };
-    registerGlobalVariable(data).then((res) => {
+    registerGlobalVariable(data)
-      const { name, id, provider } = res.data;
+      .then((res) => {
-      addGlobalVariable(name, id, provider);
+        const { name, id, provider } = res.data;
-      setKey("");
+        addGlobalVariable(name, id, provider);
-      setValue("");
+        setKey("");
-      setProvider("");
+        setValue("");
-      setOpen(false);
+        setProvider("");
-    });
+        setOpen(false);
+      })
+      .catch((error) => {
+        let responseError = error as ResponseErrorDetailAPI;
+        setErrorData({
+          title: "Error creating variable",
+          list: [responseError.response.data.detail ?? "Unknown error"],
+        });
+      });
   }
   return (
     <BaseModal open={open} setOpen={setOpen} size="x-small">

src/frontend/src/types/api/index.ts

@@ -176,3 +176,6 @@ export type CodeErrorDataTypeAPI = {
 export type ResponseErrorTypeAPI = {
   response: { data: { detail: CodeErrorDataTypeAPI } };
 };
+export type ResponseErrorDetailAPI = {
+  response: { data: { detail: string } };
+};