@multiplatform.one/backoffice 7.34.4 → 7.35.0

package/src/desk/resolveDeskPath.spec.ts

@@ -172,3 +172,23 @@ describe("resolveDeskPath rejections", () => {
     });
   });
 });
+
+describe("form builder addresses", () => {
+  it("reserves the single customize-form segment for the picker", () => {
+    expect(resolveDeskPath("/backoffice/customize-form")).toEqual({
+      kind: "form-builder",
+      doctype: undefined,
+    });
+    expect(
+      resolveDeskPath("/admin/customize-form", "/admin", { doc_type: ["Sales Order", "ToDo"] }),
+    ).toEqual({ kind: "form-builder", doctype: "Sales Order" });
+  });
+
+  it("keeps named Customize Form documents on the form route", () => {
+    expect(resolveDeskPath("/backoffice/customize-form/Sales%20Order")).toEqual({
+      kind: "slug-name",
+      slug: "customize-form",
+      name: "Sales Order",
+    });
+  });
+});

package/src/desk/resolveDeskPath.ts

@@ -32,6 +32,7 @@ export interface DeskViewParams {
  */
 export type DeskAddress =
   | { kind: "home" }
+  | { kind: "form-builder"; doctype?: string }
   | { kind: "slug"; slug: string; filtersParam?: string; sortParam?: string }
   | {
       kind: "slug-view";
@@ -58,7 +59,7 @@ function decode(segment: string): string {
 
 /**
  * Resolve `path` (no query string; query lives in `params`, One-router
- * semantics) against the six route shapes `createBackofficePaths` writes.
+ * semantics) against the seven route shapes `createBackofficePaths` writes.
  * Paths outside `basePath` resolve to `not-found`.
  */
 export function resolveDeskPath(
@@ -77,6 +78,10 @@ export function resolveDeskPath(
   const segments = rest.split("/").filter(Boolean).map(decode);
   if (segments.length === 0) return { kind: "home" };
 
+  if (segments.length === 1 && segments[0] === "customize-form") {
+    return { kind: "form-builder", doctype: first(params.doc_type) };
+  }
+
   if (segments[0] === "query-report") {
     if (segments.length === 2 && segments[1]) {
       return { kind: "report", reportName: segments[1], filtersParam: first(params.filters) };

package/src/desk/target.ts

@@ -20,6 +20,7 @@ import { resolveDeskPath, type DeskAddress, type DeskViewParams } from "./resolv
 
 export type DeskTarget =
   | { kind: "home" }
+  | { kind: "form-builder"; doctype?: string }
   | { kind: "workspace"; workspace: string }
   | { kind: "list"; doctype: string; filtersParam?: string; sortParam?: string }
   | {
@@ -72,6 +73,8 @@ function addressToTarget(
   switch (address.kind) {
     case "home":
       return { kind: "home" };
+    case "form-builder":
+      return { kind: "form-builder", doctype: address.doctype };
     case "report":
       return { kind: "report", reportName: address.reportName, filtersParam: address.filtersParam };
     case "not-found":

package/src/form/DocFormScreen.guest.screen.spec.tsx

@@ -121,6 +121,10 @@ describe("DocFormScreen with DocType meta refused (LC-96)", () => {
     expect(screen.queryByText(/Could not load/)).toBeNull();
     expect(screen.queryByLabelText("Owner", { exact: true })).toBeNull();
     expect(button("Save")).toBeUndefined();
+    expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
+    expect(
+      screen.getByTestId("form-toolbar").contains(screen.getByTestId("form-toolbar-menu")),
+    ).toBe(true);
     expect(metaReads).toBe(1);
   });
 

package/src/form/DocFormScreen.rights.spec.tsx

@@ -4,8 +4,9 @@
 // reader got an editable form and Save. It now resolves the session's roles.
 // The form body is FrappeForm's (MPO-15 AC2), so a reader asking for a new
 // record meets FrappeForm's not-permitted state, as desk refuses new_doc.
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
@@ -36,6 +37,9 @@ const tackle = {
 let run = 0;
 let roles: string[] = [];
 let sessionAnswered = false;
+let sessionUser = "user@pokemon.test";
+let formDoctype = doctype;
+let formName = tackle.name;
 
 function json(body: unknown, status = 200) {
   return new Response(JSON.stringify(body), {
@@ -47,24 +51,33 @@ function json(body: unknown, status = 200) {
 beforeEach(() => {
   run += 1;
   sessionAnswered = false;
+  sessionUser = "user@pokemon.test";
+  formDoctype = doctype;
+  formName = tackle.name;
   vi.stubGlobal("fetch", async (input: string | URL | Request) => {
     const url = new URL(String(input instanceof Request ? input.url : input));
     const method = url.pathname.replace(/^\/api\/method\//, "");
-    if (method === "frappe.auth.get_logged_user") return json({ message: "user@pokemon.test" });
+    if (method === "frappe.auth.get_logged_user") return json({ message: sessionUser });
     if (method === "frappe.core.doctype.user.user.get_roles") {
       sessionAnswered = true;
       return json({ message: roles });
     }
-    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [meta] });
+    if (method === "frappe.desk.form.load.getdoctype")
+      return json({ docs: [{ ...meta, name: formDoctype }] });
     if (method === "frappe.desk.form.load.getdoc") {
-      return json({ docs: [tackle], docinfo: { permissions: { null: 0 } } });
+      return json({
+        docs: [{ ...tackle, doctype: formDoctype, name: formName }],
+        docinfo: { permissions: { null: 0 } },
+      });
     }
     if (method === "frappe.desk.form.load.get_docinfo") {
       return json({ docinfo: { permissions: { null: 0 } } });
     }
-    const resource = `/api/resource/${encodeURIComponent(doctype)}`;
-    if (url.pathname === `${resource}/a1b2c3`) return json({ data: tackle });
-    if (url.pathname === resource) return json({ data: [tackle] });
+    const resource = `/api/resource/${encodeURIComponent(formDoctype)}`;
+    if (url.pathname.startsWith(`${resource}/`))
+      return json({ data: { ...tackle, doctype: formDoctype, name: formName } });
+    if (url.pathname === resource)
+      return json({ data: [{ ...tackle, doctype: formDoctype, name: formName }] });
     return json({ data: [], message: [] });
   });
 });
@@ -109,8 +122,13 @@ describe("DocFormScreen rights without docinfo permissions", () => {
   it("lets an editor save a new record", async () => {
     roles = ["Pokemon Editor", "Guest"];
     renderForm("new");
-    await waitFor(() => expect(saveButton()).toBeTruthy(), { timeout: 5000 });
+    await waitFor(() => expect(moveNameInput()).toBeTruthy(), { timeout: 5000 });
     expect(moveNameInput().disabled || moveNameInput().readOnly).toBe(false);
+    expect(saveButton()).toBeUndefined();
+    fireEvent.change(moveNameInput(), { target: { value: "New move" } });
+    await waitFor(() => expect(saveButton()).toBeTruthy(), { timeout: 5000 });
+    expect(screen.getByTestId("form-toolbar").contains(saveButton()!)).toBe(true);
+    expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
   });
 
   it("tells a reader they can't create one, with no Save", async () => {
@@ -132,3 +150,90 @@ describe("DocFormScreen rights without docinfo permissions", () => {
     expect(moveNameInput().disabled || moveNameInput().readOnly).toBe(true);
   });
 });
+
+describe("DocFormScreen form layout action", () => {
+  function renderLayoutForm(
+    options: { enabled?: boolean; fixtures?: boolean; hide?: boolean; name?: string } = {},
+  ) {
+    const navigation = createMemoryNavigator("/admin/current");
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{
+          baseURL: `https://layout-rights-${run}.spec.test`,
+          fixtures: options.fixtures
+            ? new InMemoryFixtureProvider({
+                DocType: [meta],
+                [doctype]: [tackle],
+              })
+            : undefined,
+        }}
+        basePath="/admin"
+        capabilities={{ formBuilder: options.enabled }}
+        navigation={navigation}
+      >
+        <DocFormScreen
+          doctype={formDoctype}
+          name={options.name ?? "a1b2c3"}
+          actionOverrides={options.hide ? { hide: ["form-layout"] } : undefined}
+        />
+      </BackofficeProvider>,
+    );
+    return navigation;
+  }
+
+  async function openMenu() {
+    await waitFor(() => expect(screen.getByTestId("form-toolbar-menu")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("form-toolbar-menu"));
+    await waitFor(() => expect(screen.getByText("Reload")).toBeTruthy());
+  }
+
+  it.each(["System Manager", "Administrator", "fixtures"])(
+    "lets %s navigate to the document type layout",
+    async (access) => {
+      roles = access === "System Manager" ? ["System Manager", "Guest"] : ["Guest"];
+      sessionUser = access === "Administrator" ? "Administrator" : "user@pokemon.test";
+      const navigation = renderLayoutForm({ fixtures: access === "fixtures" });
+      if (access !== "fixtures") await settle();
+      await openMenu();
+      fireEvent.click(await screen.findByText("Edit form layout"));
+      expect(navigation.getLocation()).toMatchObject({
+        path: "/admin/customize-form",
+        params: { doc_type: doctype },
+      });
+    },
+  );
+
+  it.each(["reader", "capability", "override"])("hides the action for %s", async (reason) => {
+    roles = reason === "reader" ? ["Guest"] : ["System Manager", "Guest"];
+    renderLayoutForm({ enabled: reason !== "capability", hide: reason === "override" });
+    await settle();
+    await openMenu();
+    expect(screen.queryByText("Edit form layout")).toBeNull();
+  });
+
+  it("edits the named type when the document itself is a DocType", async () => {
+    roles = ["System Manager", "Guest"];
+    formDoctype = "DocType";
+    formName = "Sales Order";
+    const navigation = renderLayoutForm({ name: "Sales Order" });
+    await settle();
+    await openMenu();
+    fireEvent.click(await screen.findByText("Edit form layout"));
+    expect(navigation.getLocation()).toMatchObject({
+      path: "/admin/customize-form",
+      params: { doc_type: "Sales Order" },
+    });
+  });
+
+  it("asks before leaving a dirty form for the layout", async () => {
+    roles = ["System Manager", "Pokemon Editor"];
+    const navigation = renderLayoutForm();
+    await settle();
+    await waitFor(() => expect(moveNameInput().value).toBe("tackle"));
+    fireEvent.change(moveNameInput(), { target: { value: "changed" } });
+    await openMenu();
+    fireEvent.click(await screen.findByText("Edit form layout"));
+    expect(navigation.getLocation().path).toBe("/admin/current");
+    await waitFor(() => expect(screen.getByText("Discard unsaved changes?")).toBeTruthy());
+  });
+});

package/src/form/DocFormScreen.tsx

@@ -57,6 +57,7 @@ import { deskDocUrl } from "../shared/deskLinks";
 import { getListNavNeighbors, type ListNavNeighbors } from "../shared/listNavContext";
 import { invalidateDocinfo, useDocinfo } from "../shared/useDocinfo";
 import { useRecentVisit } from "../shared/useRecentVisit";
+import { useUserRoles } from "../shared/useUserRoles";
 import { useDoctypeMeta } from "../shared/useDoctypeMeta";
 import { groupConnectionLinks } from "./connections-data";
 import { setCreatePrefill } from "./createPrefill";
@@ -72,6 +73,7 @@ import { FormConnections } from "./FormConnections";
 import { FormHeaderCluster } from "./FormHeaderCluster";
 import { FormSidebarPanel } from "./FormSidebarPanel";
 import { FormTimeline } from "./FormTimeline";
+import { toAbsoluteUrl } from "./sidebar-utils";
 import { FormToolbar, resolveIndicator, type FormToolbarMenuItem } from "./FormToolbar";
 import { htmlToText } from "./timeline-utils";
 import {
@@ -88,7 +90,7 @@ import {
 export interface DocFormActionOverrides {
   /**
    * Built-in menu item keys to remove ("reload" | "duplicate" | "rename" |
-   * "print" | "email" | "links" | "jump-list" | "new" | "delete").
+   * "print" | "email" | "links" | "jump-list" | "new" | "delete" | "form-layout").
    */
   hide?: readonly string[];
   /** Extra host actions appended to the menu (after provider `actions.form`). */
@@ -141,6 +143,7 @@ export function DocFormScreen({
   // accordion stacks between the form body and the timeline.
   const sizeClass = useLayoutSizeClass();
   const config = useFrappeConfig();
+  const { roles, user } = useUserRoles();
 
   const isCreate = name === "new";
   const docName = isCreate ? undefined : name;
@@ -468,6 +471,17 @@ export function DocFormScreen({
       icon: "list",
       onSelect: () => navigate(paths.list(doctype)),
     });
+    if (
+      capabilities.formBuilder.enabled &&
+      (fixtureMode || roles?.includes("System Manager") || user === "Administrator")
+    ) {
+      items.push({
+        key: "form-layout",
+        label: t("formBuilder.editLayout", "Edit form layout"),
+        icon: "layout",
+        onSelect: () => navigate(paths.formBuilder(doctype === "DocType" ? name : doctype)),
+      });
+    }
     if (connection && !connection.fixtures && canOpenNewTab()) {
       // Desk counterpart of this document — same session caveat as Print
       // off-web (system browser opens unauthenticated).
@@ -514,6 +528,9 @@ export function DocFormScreen({
     navigate,
     paths,
     capabilities,
+    fixtureMode,
+    roles,
+    user,
   ]);
 
   // Host action registry: provider-level `actions.form` plus per-screen
@@ -794,49 +811,53 @@ export function DocFormScreen({
       />
     ) : null;
 
-  const toolbar = (
-    <FormToolbar
-      breadcrumbs={breadcrumbs}
-      onNavigate={navigate}
-      title={title}
-      indicator={indicator}
-      showIndicator={!!meta}
-      isSaving={form.isSubmitting}
-      cluster={
-        !isCreate && docName && !metaRefused ? (
-          <FormHeaderCluster
-            doctype={doctype}
-            name={docName}
-            docinfo={docinfo}
-            currentUser={currentUser}
-            onRefresh={refreshDocinfo}
-          />
-        ) : undefined
-      }
-      canSave={canSave}
-      canSubmit={canSubmit}
-      canCancel={canCancel}
-      canAmend={canAmend}
-      onSave={() => void handleSave()}
-      onSubmit={() => setConfirmAction("submit")}
-      onCancel={() => setConfirmAction("cancel")}
-      onAmend={handleAmend}
-      menuItems={effectiveMenuItems}
-      onOpenDesk={
-        !isCreate && docName && connection && !connection.fixtures && canOpenNewTab()
-          ? () => openInNewTab(deskDocUrl(connection.baseURL, doctype, docName))
-          : undefined
-      }
-      {...(docPager.inList
-        ? {
-            onPrevDoc: () => openNeighborDoc(docPager.prev),
-            onNextDoc: () => openNeighborDoc(docPager.next),
-            prevDocDisabled: !docPager.prev,
-            nextDocDisabled: !docPager.next,
-          }
-        : {})}
-    />
-  );
+  const imageField = meta?.image_field;
+  const imageValue = imageField
+    ? (form.doc as Record<string, unknown> | undefined)?.[imageField]
+    : undefined;
+  const headerImage =
+    typeof imageValue === "string" && imageValue
+      ? toAbsoluteUrl(connection?.baseURL, imageValue)
+      : undefined;
+
+  const toolbarProps = {
+    breadcrumbs,
+    onNavigate: navigate,
+    title,
+    indicator,
+    showIndicator: !!meta,
+    isSaving: form.isSubmitting,
+    isDirty: form.isDirty,
+    image: headerImage,
+    cluster:
+      !isCreate && docName && !metaRefused ? (
+        <FormHeaderCluster
+          doctype={doctype}
+          name={docName}
+          docinfo={docinfo}
+          currentUser={currentUser}
+          onRefresh={refreshDocinfo}
+        />
+      ) : undefined,
+    canSave,
+    canSubmit,
+    canCancel,
+    canAmend,
+    onSave: () => void handleSave(),
+    onSubmit: () => setConfirmAction("submit"),
+    onCancel: () => setConfirmAction("cancel"),
+    onAmend: handleAmend,
+    menuItems: effectiveMenuItems,
+    ...(docPager.inList
+      ? {
+          onPrevDoc: () => openNeighborDoc(docPager.prev),
+          onNextDoc: () => openNeighborDoc(docPager.next),
+          prevDocDisabled: !docPager.prev,
+          nextDocDisabled: !docPager.next,
+        }
+      : {}),
+  };
+  const toolbar = <FormToolbar {...toolbarProps} />;
 
   return (
     <YStack flex={1}>

package/src/form/FormConnections.tsx

@@ -261,7 +261,7 @@ export function FormConnections({ doctype, name, meta: metaProp }: FormConnectio
     }
     return (
       <EmptyState
-        compact
+        size="$3"
         intent="error"
         title={t("connections.metaError", "Couldn't load connections")}
         description={metaError?.message}
@@ -272,7 +272,7 @@ export function FormConnections({ doctype, name, meta: metaProp }: FormConnectio
   if (groups.length === 0) {
     return (
       <EmptyState
-        compact
+        size="$3"
         title={t("connections.emptyTitle", "No connections")}
         description={t(
           "connections.empty",

package/src/form/FormErrorBoundary.spec.tsx

@@ -123,13 +123,12 @@ describe("form error containment", () => {
     expect(slot.textContent).toContain("Retry");
     expect(containmentLogs().length).toBeGreaterThan(0);
 
-    // The rest of the form survived: toolbar Save is present, the other
-    // sibling field rendered, and the Subject field still accepts edits.
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.queryByText("Save")).toBeNull();
     expect(screen.getByDisplayValue("Sibling value")).toBeTruthy();
     fireEvent.change(subjectInput, { target: { value: "Edited while broken" } });
     await waitFor(() => {
       expect(screen.getByDisplayValue("Edited while broken")).toBeTruthy();
+      expect(screen.getByTestId("form-toolbar-save")).toBeTruthy();
     });
   });
 

package/src/form/FormErrorBoundary.tsx

@@ -79,7 +79,7 @@ function FormErrorFallback({
         </Text>
       ) : null}
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         onRetry={onRetry}
         errorTitle={errorTitle ?? t("fieldRenderError", "This field failed to render")}

package/src/form/FormSidebarPanel.tsx

@@ -416,7 +416,7 @@ export function FormSidebarPanel({
       icon: <TagIcon size={iconSize} color={iconColor} />,
       content: (
         <Tags
-          compact
+          size="$3"
           tags={tags.map((tag) => ({ id: tag, label: tag }))}
           suggestions={tagSuggestions.map((tag) => ({ id: tag, label: tag }))}
           disabled={busy}

package/src/form/FormTimeline.tsx

@@ -481,7 +481,6 @@ export function FormTimeline({
           size="$2"
           name={displayName}
           src={entry.image}
-          fallbackBackgroundColor="$accentBackground"
         />
         <YStack flex={1} gap="$1">
           <XStack gap="$2" alignItems="center">

package/src/form/FormToolbar.screen.spec.tsx

@@ -3,7 +3,7 @@
 // menu and the prev/next pager.
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   FormToolbar,
   resolveIndicator,
@@ -11,6 +11,21 @@ import {
   type FormToolbarProps,
 } from "./FormToolbar";
 
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useLayoutSizeClass: () => layout.size };
+});
+afterEach(() => {
+  layout.size = "wide";
+});
+
+async function selectAction(label: string) {
+  fireEvent.click(screen.getByTestId("form-toolbar-menu"));
+  const item = await screen.findByRole("menuitem", { name: new RegExp(label) });
+  fireEvent.click(item);
+}
+
 function props(overrides: Partial<FormToolbarProps> = {}): FormToolbarProps {
   return {
     breadcrumbs: [
@@ -22,6 +37,7 @@ function props(overrides: Partial<FormToolbarProps> = {}): FormToolbarProps {
     title: "SO-0001",
     indicator: "draft",
     isSaving: false,
+    isDirty: false,
     canSave: true,
     canSubmit: true,
     canCancel: false,
@@ -42,43 +58,74 @@ function visiblePrimaries(): string[] {
 }
 
 describe("FormToolbar", () => {
-  it("offers Save on a dirty draft and Submit once it is saved", () => {
-    const onSave = vi.fn();
-    const onSubmit = vi.fn();
-    const { rerender } = renderWithProviders(
-      <FormToolbar {...props({ indicator: "notSaved", onSave, onSubmit })} />,
-    );
-    expect(visiblePrimaries()).toEqual(["save"]);
-    fireEvent.click(screen.getByTestId("form-toolbar-save"));
-    expect(onSave).toHaveBeenCalledTimes(1);
-    rerender(<FormToolbar {...props({ indicator: "draft", onSave, onSubmit })} />);
-    expect(visiblePrimaries()).toEqual(["submit"]);
-    fireEvent.click(screen.getByTestId("form-toolbar-submit"));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
+  it.each(["wide", "compact"])(
+    "keeps Save beside the trailing menu only while dirty (%s)",
+    (size) => {
+      layout.size = size;
+      const onSave = vi.fn();
+      const menuItems: FormToolbarMenuItem[] = [
+        { key: "reload", label: "Reload", onSelect: vi.fn() },
+      ];
+      const { rerender } = renderWithProviders(
+        <FormToolbar {...props({ indicator: "saved", canSubmit: false, menuItems, onSave })} />,
+      );
+      expect(visiblePrimaries()).toEqual([]);
+      const header = screen.getByTestId("form-toolbar");
+      expect(header.contains(screen.getByTestId("form-toolbar-menu"))).toBe(true);
+      expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
+      rerender(
+        <FormToolbar
+          {...props({ indicator: "notSaved", isDirty: true, canSubmit: false, menuItems, onSave })}
+        />,
+      );
+      const save = screen.getByTestId("form-toolbar-save");
+      const menu = screen.getByTestId("form-toolbar-menu");
+      expect(header.contains(save)).toBe(true);
+      expect(save.compareDocumentPosition(menu) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      fireEvent.click(save);
+      expect(onSave).toHaveBeenCalledTimes(1);
+      rerender(
+        <FormToolbar {...props({ indicator: "saved", canSubmit: false, menuItems, onSave })} />,
+      );
+      expect(visiblePrimaries()).toEqual([]);
+    },
+  );
+
+  it("keeps a new unchanged form free of Save", () => {
+    renderWithProviders(<FormToolbar {...props({ indicator: "new", canSubmit: false })} />);
+    expect(visiblePrimaries()).toEqual([]);
   });
 
-  it("offers Cancel on a submitted doc and Amend on a cancelled one", () => {
-    const onCancel = vi.fn();
-    const { rerender } = renderWithProviders(
-      <FormToolbar
-        {...props({ indicator: "submitted", canSave: false, canSubmit: false, canCancel: true })}
-        onCancel={onCancel}
-      />,
-    );
-    expect(visiblePrimaries()).toEqual(["cancel"]);
-    fireEvent.click(screen.getByTestId("form-toolbar-cancel"));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-    rerender(
+  it.each([
+    ["submit", "draft"],
+    ["cancel", "submitted"],
+    ["amend", "cancelled"],
+  ] as const)("runs %s from the action menu", async (action, indicator) => {
+    const onAction = vi.fn();
+    renderWithProviders(
       <FormToolbar
-        {...props({ indicator: "cancelled", canSave: false, canSubmit: false, canAmend: true })}
+        {...props({
+          indicator,
+          canSave: false,
+          canSubmit: action === "submit",
+          canCancel: action === "cancel",
+          canAmend: action === "amend",
+          onSubmit: onAction,
+          onCancel: onAction,
+          onAmend: onAction,
+        })}
       />,
     );
-    expect(visiblePrimaries()).toEqual(["amend"]);
+    expect(visiblePrimaries()).toEqual([]);
+    await selectAction(action[0].toUpperCase() + action.slice(1));
+    expect(onAction).toHaveBeenCalledTimes(1);
   });
 
   it("draws no primary a reader's rights withhold", () => {
     renderWithProviders(
-      <FormToolbar {...props({ indicator: "notSaved", canSave: false, canSubmit: false })} />,
+      <FormToolbar
+        {...props({ indicator: "notSaved", isDirty: true, canSave: false, canSubmit: false })}
+      />,
     );
     expect(visiblePrimaries()).toEqual([]);
   });
@@ -133,6 +180,20 @@ describe("FormToolbar", () => {
     expect(onDuplicate).toHaveBeenCalledTimes(1);
   });
 
+  it("keeps compact record navigation in the menu beside Save", async () => {
+    layout.size = "compact";
+    const onNextDoc = vi.fn();
+    renderWithProviders(
+      <FormToolbar
+        {...props({ isDirty: true, indicator: "notSaved", onNextDoc, prevDocDisabled: true })}
+      />,
+    );
+    expect(screen.queryByTestId("form-toolbar-next")).toBeNull();
+    expect(screen.getByTestId("form-toolbar-save")).toBeTruthy();
+    await selectAction("Next document");
+    expect(onNextDoc).toHaveBeenCalledTimes(1);
+  });
+
   it("pages prev/next and disables the boundary arrow instead of hiding it", () => {
     const onPrevDoc = vi.fn();
     const onNextDoc = vi.fn();