diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx index b2052ab848..f0f3f4cc38 100644 --- a/src/frontend/src/components/inputGlobalComponent/index.tsx +++ b/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 { diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 8c5cc6892b..3e9c1cc228 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -883,16 +883,29 @@ export async function registerGlobalVariable({ type?: string; default_fields?: string[]; }): Promise> { - 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( diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx index d0d7869857..e9e5bef18b 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx +++ b/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() {
); }; - 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([]); - 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 ( diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts index 5a2a67fa4b..701b7700ea 100644 --- a/src/frontend/src/stores/globalVariables.ts +++ b/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( (set, get) => ({ @@ -30,10 +29,10 @@ export const useGlobalVariablesStore = create( 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({