feat(web): delete object with confirm dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/objects/delete-object-dialog.test.tsx

@@ -0,0 +1,64 @@
+import { expect, test } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { Routes, Route } from "react-router-dom";
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { DeleteObjectDialog } from "./delete-object-dialog";
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/objects/:id" element={<DeleteObjectDialog id="o-1" />} />
+      <Route path="/objects" element={<div>objects list</div>} />
+    </Routes>
+  );
+}
+
+test("confirm delete: DELETE then navigate to the list", async () => {
+  let deleted = false;
+
+  server.use(
+    http.delete("/api/admin/objects/:id", () => {
+      deleted = true;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/objects/o-1" });
+
+  // open the dialog via the trigger
+  await userEvent.click(await screen.findByRole("button", { name: /delete/i }));
+
+  // confirm inside the dialog
+  const dialog = await screen.findByRole("alertdialog");
+
+  await userEvent.click(within(dialog).getByRole("button", { name: /delete/i }));
+
+  await waitFor(() => expect(screen.getByText("objects list")).toBeInTheDocument());
+
+  expect(deleted).toBe(true);
+});
+
+test("cancel does not delete", async () => {
+  let deleted = false;
+
+  server.use(
+    http.delete("/api/admin/objects/:id", () => {
+      deleted = true;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/objects/o-1" });
+
+  await userEvent.click(await screen.findByRole("button", { name: /delete/i }));
+
+  const dialog = await screen.findByRole("alertdialog");
+
+  await userEvent.click(within(dialog).getByRole("button", { name: /cancel/i }));
+
+  expect(deleted).toBe(false);
+  expect(screen.queryByText("objects list")).not.toBeInTheDocument();
+});

web/src/objects/delete-object-dialog.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useDeleteObject } from "../api/queries";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export function DeleteObjectDialog({ id }: { id: string }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const del = useDeleteObject();
+  const [open, setOpen] = useState(false);
+
+  const onConfirm = async () => {
+    await del.mutateAsync(id);
+    navigate("/objects");
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger
+        render={
+          <Button variant="ghost" size="sm" className="text-red-600">
+            {t("actions.delete")}
+          </Button>
+        }
+      />
+
+      <AlertDialogContent>
+        <AlertDialogTitle>{t("actions.delete")}</AlertDialogTitle>
+        <AlertDialogDescription>{t("actions.confirmDelete")}</AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>
+            {t("actions.delete")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

web/src/objects/object-detail.tsx

@@ -2,6 +2,7 @@ import { Link, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useObject, useFieldDefinitions } from "../api/queries";
+import { DeleteObjectDialog } from "./delete-object-dialog";
 import { VisibilityBadge } from "./visibility-badge";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -60,6 +61,7 @@ export function ObjectDetail() {
         <Link to={`/objects/${object.id}/edit`} className="text-sm font-medium text-indigo-600">
           {t("actions.edit")}
         </Link>
+        <DeleteObjectDialog id={object.id} />
       </div>
       <Field label={t("fieldsLabels.objectNumber")} value={object.object_number} />
       <Field label={t("fieldsLabels.count")} value={object.number_of_objects} />