diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 5aa8dfa74..1dbe0308a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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((_) => { - removeGlobalVariable(key); - if ( - data?.node?.template[name].value === key && - 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; + deleteGlobalVariable(id) + .then((_) => { + removeGlobalVariable(key); + if ( + data?.node?.template[name].value === key && + 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; + }); + } + }) + .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 ( diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx index 2173903bd..611ba71dd 100644 --- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx +++ b/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) => { - const { name, id, provider } = res.data; - addGlobalVariable(name, id, provider); - setKey(""); - setValue(""); - setProvider(""); - setOpen(false); - }); + registerGlobalVariable(data) + .then((res) => { + const { name, id, provider } = res.data; + addGlobalVariable(name, id, provider); + setKey(""); + setValue(""); + setProvider(""); + setOpen(false); + }) + .catch((error) => { + let responseError = error as ResponseErrorDetailAPI; + setErrorData({ + title: "Error creating variable", + list: [responseError.response.data.detail ?? "Unknown error"], + }); + }); } return ( diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index 297984d28..cfbd64989 100644 --- a/src/frontend/src/types/api/index.ts +++ b/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 } }; +};