feat(web): highlight the offending field on a set_fields 422 (#28)

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

web/src/objects/object-edit-form.test.tsx

@@ -17,6 +17,26 @@ function tree() {
   );
 }
 
+test("edit: fields PUT 422 with field body -> field error message shown and field marked invalid", async () => {
+  server.use(
+    http.get("/api/admin/objects/:id", () =>
+      HttpResponse.json({ ...amphora, fields: { inscription: "old" } }),
+    ),
+    http.put("/api/admin/objects/:id", () => new HttpResponse(null, { status: 204 })),
+    http.put("/api/admin/objects/:id/fields", () =>
+      HttpResponse.json({ field: "inscription", code: "type_mismatch" }, { status: 422 }),
+    ),
+  );
+
+  renderApp(tree(), { route: `/objects/${amphora.id}/edit` });
+
+  await screen.findByDisplayValue("Amphora");
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+
+  const alerts = await screen.findAllByText(/inscription.*rejected/i);
+  expect(alerts.length).toBeGreaterThanOrEqual(2);
+});
+
 test("edit: prefilled, save -> PUT core + PUT fields -> back to detail", async () => {
   let putCore: unknown;
   let putFields: unknown;

web/src/objects/object-edit-form.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import { useObject, useUpdateObject, useSetFields } from "../api/queries";
+import { useObject, useUpdateObject, useSetFields, FieldRejection } from "../api/queries";
 import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
 
 export function ObjectEditForm() {
@@ -15,8 +15,14 @@ export function ObjectEditForm() {
   const update = useUpdateObject();
   const setFields = useSetFields();
 
+  const locationState = location.state as { fieldsError?: boolean; fieldErrorKey?: string } | null;
+
   const [error, setError] = useState<string | null>(
-    (location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
+    locationState?.fieldsError ? t("form.rejected") : null,
+  );
+
+  const [fieldErrorKey, setFieldErrorKey] = useState<string | null>(
+    locationState?.fieldErrorKey ?? null,
   );
 
   if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
@@ -38,12 +44,19 @@ export function ObjectEditForm() {
 
   const onSubmit = async (values: ObjectFormValues) => {
     setError(null);
+    setFieldErrorKey(null);
 
     try {
       await update.mutateAsync({ id: id!, body: values.core });
       await setFields.mutateAsync({ id: id!, fields: values.fields });
-    } catch {
-      setError(t("form.rejected"));
+    } catch (e) {
+      if (e instanceof FieldRejection) {
+        setFieldErrorKey(e.field);
+        setError(t("form.fieldRejected", { field: e.field }));
+      } else {
+        setError(t("form.rejected"));
+      }
+
       return;
     }
 
@@ -55,6 +68,7 @@ export function ObjectEditForm() {
       mode="edit"
       defaults={defaults}
       formError={error}
+      fieldErrorKey={fieldErrorKey}
       onSubmit={onSubmit}
       onCancel={() => navigate(`/objects/${id}`)}
     />

web/src/objects/object-form.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -47,12 +48,14 @@ export function ObjectForm({
   onSubmit,
   onCancel,
   formError,
+  fieldErrorKey,
 }: {
   mode: "create" | "edit";
   defaults?: { core: ObjectCore; fields: Record<string, unknown> };
   onSubmit: (values: ObjectFormValues) => void;
   onCancel: () => void;
   formError?: string | null;
+  fieldErrorKey?: string | null;
 }) {
   const { t } = useTranslation();
 
@@ -68,6 +71,15 @@ export function ObjectForm({
 
   const { register, handleSubmit, formState: { errors } } = form;
 
+  useEffect(() => {
+    if (fieldErrorKey) {
+      form.setError(`fields.${fieldErrorKey}` as never, {
+        type: "server",
+        message: t("form.fieldRejected", { field: fieldErrorKey }),
+      });
+    }
+  }, [fieldErrorKey, form, t]);
+
   const submit = handleSubmit((data) => {
     const fields = pruneFields(data.fields);
 
@@ -149,7 +161,7 @@ export function ObjectForm({
 
               {errors.fields?.[def.key] && (
                 <p role="alert" className="text-xs text-red-600">
-                  {t("form.required")}
+                  {errors.fields[def.key]?.message ?? t("form.required")}
                 </p>
               )}
             </div>

web/src/objects/object-new-page.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { ObjectForm, type ObjectFormValues } from "./object-form";
-import { useCreateObject, useSetFields } from "../api/queries";
+import { useCreateObject, useSetFields, FieldRejection } from "../api/queries";
 
 export function ObjectNewPage() {
   const { t } = useTranslation();
@@ -32,8 +32,9 @@ export function ObjectNewPage() {
     if (Object.keys(values.fields).length > 0) {
       try {
         await setFields.mutateAsync({ id, fields: values.fields });
-      } catch {
-        navigate(`/objects/${id}/edit`, { state: { fieldsError: true } });
+      } catch (e) {
+        const fieldErrorKey = e instanceof FieldRejection ? e.field : undefined;
+        navigate(`/objects/${id}/edit`, { state: { fieldsError: true, fieldErrorKey } });
         return;
       }
     }