diff --git a/frontend-react/src/lib/application/routes/dashboard-editor/dashboard-editor.tsx b/frontend-react/src/lib/application/routes/dashboard-editor/dashboard-editor.tsx index 242b8fd..9d28c56 100644 --- a/frontend-react/src/lib/application/routes/dashboard-editor/dashboard-editor.tsx +++ b/frontend-react/src/lib/application/routes/dashboard-editor/dashboard-editor.tsx @@ -1,9 +1,15 @@ import { z } from 'zod'; -import { Form, useActionData, useLoaderData } from 'react-router-dom'; +import { + Form, + useActionData, + useLoaderData, + useSubmit +} from 'react-router-dom'; import { ChangeEvent, useCallback, useEffect, useState } from 'react'; import { clsx } from 'clsx'; import { Alert, + Button, FormControl, FormGroup, FormLabel, @@ -41,6 +47,7 @@ const actionSchema = z .optional(); export function DashboardEditor() { + const submit = useSubmit(); const errors = actionSchema.parse(useActionData()); const { @@ -48,6 +55,8 @@ export function DashboardEditor() { setLocalDashboard, localWidgetInstances, setLocalWidgetInstances, + dashboardTitle, + setDashboardTitle, selectedWidgetInstance, selectedWidgetId, selectedWidgetType, @@ -74,7 +83,7 @@ export function DashboardEditor() { return newId; }, [setLocalWidgetInstances]); - const onFormSelectChange = useCallback( + const onWidgetInstanceTypeChange = useCallback( (event: ChangeEvent) => { const value = event.target.value; const widgetType = getWidgetById(value); @@ -103,6 +112,15 @@ export function DashboardEditor() { setLocalWidgetInstances ] ); + const onDeleteDashboard = useCallback(() => { + if ( + !window.confirm( + `Are you sure you want to delete the dashboard "${dashboardTitle}" (ID: ${dashboardId})?` + ) + ) + return; + submit(null, { method: 'DELETE' }); + }, [dashboardId, dashboardTitle, submit]); const onConfigurationChange = ( newConfig: z.infer @@ -132,10 +150,22 @@ export function DashboardEditor() { {errors.errors.layout &&

{errors.errors.layout}

} )} - + Dashboard ID + + Dashboard Title + setDashboardTitle(event.target.value)} + /> + +

Danger Zone

+

Dashboard Layout

@@ -171,7 +201,7 @@ export function DashboardEditor() { {!selectedWidgetId && (