@multiplatform.one/backoffice 7.23.2 → 7.25.0

package/src/chrome/awesomebar-data.auth.spec.ts

@@ -0,0 +1,56 @@
+// The awesomebar's document search holds one client per connection. When the
+// provider's connection starts sending its token, or sends it under another
+// scheme, the next search must carry the new credentials instead of going out
+// on a client built for the old ones (MPO-410).
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useGlobalSearch } from "./awesomebar-data";
+
+const provider = vi.hoisted(() => ({ config: undefined as unknown }));
+vi.mock("@multiplatform.one/frappe-ui", () => ({ useFrappeConfig: () => provider.config }));
+
+type Auth = { useToken: boolean; token: string; type: string };
+
+const auth = (useToken: boolean, type = "token"): Auth => ({ useToken, token: "key:secret", type });
+
+const changes: [string, Auth, Auth, (string | null)[]][] = [
+  ["starts sending its token", auth(false), auth(true), [null, "token key:secret"]],
+  [
+    "switches its token scheme",
+    auth(true, "token"),
+    auth(true, "Bearer"),
+    ["token key:secret", "Bearer key:secret"],
+  ],
+];
+
+let run = 0;
+let sent: (string | null)[] = [];
+
+beforeEach(() => {
+  run += 1;
+  sent = [];
+  vi.stubGlobal("fetch", async (_input: string | URL | Request, init?: RequestInit) => {
+    sent.push(new Headers(init?.headers).get("Authorization"));
+    return Response.json({ message: [] });
+  });
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("useGlobalSearch", () => {
+  it.each(changes)(
+    "searches with the new credentials when the connection %s",
+    async (_, before, after, expected) => {
+      const baseURL = `http://global-search-${run}.test`;
+      provider.config = { baseURL, realtime: false, auth: before };
+      const { rerender } = renderHook(({ query }: { query: string }) => useGlobalSearch(query), {
+        initialProps: { query: "pikachu" },
+      });
+      await waitFor(() => expect(sent).toHaveLength(1));
+      provider.config = { baseURL, realtime: false, auth: after };
+      rerender({ query: "raichu" });
+      await waitFor(() => expect(sent).toHaveLength(2));
+      expect(sent).toEqual(expected);
+    },
+  );
+});

package/src/chrome/awesomebar-data.tsx

@@ -148,12 +148,14 @@ export function useGlobalSearch(query: string, limit = 10): GlobalSearchState {
   const config = useFrappeConfig();
   const baseURL = config?.baseURL;
   const auth = config?.auth;
+  const authKey = `${auth?.useToken ? "t" : ""}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
 
   const client = useMemo(
     () => (baseURL ? new HttpClient(baseURL, auth as AuthConfig | undefined) : undefined),
-    // Provider auth is session-stable; key the client by baseURL only.
+    // Keyed by value: a host may rebuild the auth object and its token
+    // getter on every render.
     // oxlint-disable-next-line exhaustive-deps
-    [baseURL],
+    [baseURL, authKey],
   );
 
   const [hits, setHits] = useState<GlobalSearchHit[]>([]);

package/src/chrome/help-about-dialog.tsx

@@ -94,7 +94,7 @@ export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
               )}
             </Paragraph>
           </Dialog.Description>
-          <YStack gap="$2" marginTop="$2">
+          <YStack gap="$2" paddingTop="$2">
             <SizableText size="$2" fontWeight="400" color="$color10" textTransform="uppercase">
               {t("help.installedApps", "Installed Apps")}
             </SizableText>
@@ -122,7 +122,7 @@ export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
                 </XStack>
               ))}
           </YStack>
-          <XStack justifyContent="flex-end" marginTop="$4">
+          <XStack justifyContent="flex-end" paddingTop="$4">
             <Dialog.Close asChild>
               <Button size="$3">{t("help.close", "Close")}</Button>
             </Dialog.Close>

package/src/chrome/help-shortcuts-dialog.tsx

@@ -140,12 +140,12 @@ export function HelpShortcutsDialog({ open, onOpenChange }: HelpShortcutsDialogP
               {t("help.shortcutsIntro", "Shortcuts available across the backoffice (web).")}
             </Paragraph>
           </Dialog.Description>
-          <YStack gap="$3" marginTop="$2">
+          <YStack gap="$3" paddingTop="$2">
             {rows.map((row) => (
               <ShortcutRow key={row.description} {...row} />
             ))}
           </YStack>
-          <XStack justifyContent="flex-end" marginTop="$4">
+          <XStack justifyContent="flex-end" paddingTop="$4">
             <Dialog.Close asChild>
               <Button size="$3">{t("help.close", "Close")}</Button>
             </Dialog.Close>

package/src/chrome/notifications-panel.tsx

@@ -86,15 +86,14 @@ function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: (
         ) : null}
       </YStack>
       {item.unread && (
-        <View
-          width="$0.75"
-          height="$0.75"
-          borderRadius={1000}
-          backgroundColor="$accentBackground"
-          marginTop="$1.5"
-          flexShrink={0}
-          aria-hidden
-        />
+        <View paddingTop="$1.5" flexShrink={0} aria-hidden>
+          <View
+            width="$0.75"
+            height="$0.75"
+            borderRadius={1000}
+            backgroundColor="$accentBackground"
+          />
+        </View>
       )}
     </XStack>
   );

package/src/form/DocFormScreen.tsx

@@ -944,53 +944,62 @@ export function DocFormScreen({
           })
         : toolbar}
 
-      {engine.wasDeleted && (
-        <XStack
-          role="alert"
-          {...knobProps.containerRadius}
-          {...knobProps.panelPadding}
-          marginHorizontal="$3"
-          backgroundColor="$red3"
-        >
-          <Text color="$red11" fontSize="$3">
-            {t("deletedBanner", "This document was deleted on the server. Fields are read-only.")}
-          </Text>
-        </XStack>
-      )}
+      {(engine.wasDeleted || validationSummary || engine.conflict) && (
+        <YStack paddingHorizontal="$3">
+          {engine.wasDeleted && (
+            <XStack
+              role="alert"
+              {...knobProps.containerRadius}
+              {...knobProps.panelPadding}
+              backgroundColor="$red3"
+            >
+              <Text color="$red11" fontSize="$3">
+                {t(
+                  "deletedBanner",
+                  "This document was deleted on the server. Fields are read-only.",
+                )}
+              </Text>
+            </XStack>
+          )}
 
-      {validationSummary && !engine.wasDeleted && (
-        <XStack
-          role="alert"
-          {...knobProps.containerRadius}
-          {...knobProps.panelPadding}
-          marginHorizontal="$3"
-          backgroundColor="$red3"
-          testID="doc-form-validation-summary"
-        >
-          <Text color="$red11" fontSize="$3">
-            {validationSummary}
-          </Text>
-        </XStack>
-      )}
+          {validationSummary && !engine.wasDeleted && (
+            <XStack
+              role="alert"
+              {...knobProps.containerRadius}
+              {...knobProps.panelPadding}
+              backgroundColor="$red3"
+              testID="doc-form-validation-summary"
+            >
+              <Text color="$red11" fontSize="$3">
+                {validationSummary}
+              </Text>
+            </XStack>
+          )}
 
-      {engine.conflict && !engine.wasDeleted && (
-        <XStack
-          role="status"
-          alignItems="center"
-          justifyContent="space-between"
-          {...knobProps.containerRadius}
-          {...knobProps.panelPadding}
-          marginHorizontal="$3"
-          backgroundColor="$orange3"
-          gap="$3"
-        >
-          <Text color="$orange11" fontSize="$3" flex={1}>
-            {t("conflictBanner", "This document changed on the server while you were editing.")}
-          </Text>
-          <Button size="$2" outlined aria-label={t("reloadDoc", "Reload")} onPress={engine.reload}>
-            {t("reloadDoc", "Reload")}
-          </Button>
-        </XStack>
+          {engine.conflict && !engine.wasDeleted && (
+            <XStack
+              role="status"
+              alignItems="center"
+              justifyContent="space-between"
+              {...knobProps.containerRadius}
+              {...knobProps.panelPadding}
+              backgroundColor="$orange3"
+              gap="$3"
+            >
+              <Text color="$orange11" fontSize="$3" flex={1}>
+                {t("conflictBanner", "This document changed on the server while you were editing.")}
+              </Text>
+              <Button
+                size="$2"
+                outlined
+                aria-label={t("reloadDoc", "Reload")}
+                onPress={engine.reload}
+              >
+                {t("reloadDoc", "Reload")}
+              </Button>
+            </XStack>
+          )}
+        </YStack>
       )}
 
       <ScrollView flex={1}>

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

@@ -0,0 +1,153 @@
+// The desk Connections tab (MPO-414): meta.links grouped with get_open_count
+// badges, rows open the filtered target list, + opens a prefilled new doc,
+// and a failed get_open_count falls back to get_count per external link.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { FormConnections } from "./FormConnections";
+
+const projectMeta: DoctypeMeta = {
+  name: "QA Project",
+  fields: [],
+  links: [
+    { link_doctype: "Contact", link_fieldname: "project", group: "Profile" },
+    { link_doctype: "Blogger", link_fieldname: "project", group: "Profile" },
+    { link_doctype: "Access Log", link_fieldname: "project", group: "Logs" },
+    { link_doctype: "ToDo", link_fieldname: "project" },
+    { link_doctype: "Note", link_fieldname: "project", group: "Logs", hidden: 1 },
+    {
+      link_doctype: "QA Invoice Item",
+      link_fieldname: "qa_invoice",
+      parent_doctype: "QA Invoice",
+      table_fieldname: "items",
+      is_child_table: 1,
+      group: "Billing",
+    },
+  ],
+};
+
+const openCount = {
+  message: {
+    count: {
+      external_links_found: [
+        { doctype: "Contact", count: 3, open_count: 1 },
+        { doctype: "Blogger", count: 0, open_count: 0 },
+        { doctype: "Access Log", count: 120, open_count: 0 },
+        { doctype: "ToDo", count: 5, open_count: 2 },
+      ],
+      internal_links_found: [
+        { doctype: "QA Invoice", count: 2, open_count: 0, names: ["QA-INV-001", "QA-INV-002"] },
+      ],
+    },
+  },
+};
+
+let host = 0;
+let openCountFails = false;
+let requests: URL[] = [];
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+beforeEach(() => {
+  host += 1;
+  openCountFails = false;
+  requests = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    requests.push(url);
+    if (url.pathname === "/api/method/frappe.desk.notifications.get_open_count") {
+      return openCountFails ? json({ exc_type: "PermissionError" }, 403) : json(openCount);
+    }
+    if (url.pathname === "/api/method/frappe.client.get_count") {
+      return json({ message: url.searchParams.get("doctype") === "Contact" ? 4 : 0 });
+    }
+    return json({ message: null });
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function renderConnections(meta: DoctypeMeta = projectMeta) {
+  const navigation = createMemoryNavigator("/backoffice/qa-project/QA-PROJ-0001");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://connections-${host}.screen.spec.test` }}
+      navigation={navigation}
+    >
+      <FormConnections doctype="QA Project" name="QA-PROJ-0001" meta={meta} />
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+function row(doctype: string): HTMLElement {
+  return screen.getByRole("link", { name: doctype });
+}
+
+describe("FormConnections", () => {
+  it("groups visible links and badges their counts", async () => {
+    renderConnections();
+    await waitFor(() => expect(within(row("Contact")).getByText("3")).toBeTruthy());
+    for (const heading of ["Profile", "Logs", "Reference", "Billing"]) {
+      expect(screen.getByText(heading)).toBeTruthy();
+    }
+    expect(screen.queryByRole("link", { name: "Note" })).toBeNull();
+    expect(within(row("Contact")).getByText("1")).toBeTruthy();
+    expect(within(row("Access Log")).getByText("99+")).toBeTruthy();
+    expect(row("Blogger").textContent).toBe("Blogger");
+  });
+
+  it("opens the target list filtered to this document", async () => {
+    const navigation = renderConnections();
+    await waitFor(() => expect(within(row("Contact")).getByText("3")).toBeTruthy());
+    fireEvent.click(row("Contact"));
+    const location = navigation.getLocation();
+    expect(location.path).toBe("/backoffice/contact");
+    expect(JSON.parse(String(location.params.f))).toEqual([["project", "=", "QA-PROJ-0001"]]);
+    fireEvent.click(row("QA Invoice"));
+    expect(JSON.parse(String(navigation.getLocation().params.f))).toEqual([
+      ["name", "in", ["QA-INV-001", "QA-INV-002"]],
+    ]);
+  });
+
+  it("creates a linked document with the back-reference prefilled", async () => {
+    const navigation = renderConnections();
+    await waitFor(() => expect(within(row("Contact")).getByText("3")).toBeTruthy());
+    fireEvent.click(screen.getByLabelText("New Contact"));
+    const location = navigation.getLocation();
+    expect(location.path).toBe("/backoffice/contact/new");
+    expect(JSON.parse(String(location.params.d))).toEqual({ project: "QA-PROJ-0001" });
+  });
+
+  it("falls back to get_count and disables the uncounted internal link", async () => {
+    openCountFails = true;
+    const navigation = renderConnections();
+    await waitFor(() => expect(within(row("Contact")).getByText("4")).toBeTruthy(), {
+      timeout: 5000,
+    });
+    const counted = requests
+      .filter((url) => url.pathname === "/api/method/frappe.client.get_count")
+      .map((url) => url.searchParams.get("doctype"))
+      .sort();
+    expect(counted).toEqual(["Access Log", "Blogger", "Contact", "ToDo"]);
+    fireEvent.click(row("QA Invoice"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qa-project/QA-PROJ-0001");
+  });
+
+  it("says so when the doctype links nowhere", async () => {
+    renderConnections({ name: "QA Loner", fields: [], links: [] });
+    expect(await screen.findByText("No connections")).toBeTruthy();
+    expect(requests).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,119 @@
+// The form menu's input dialogs (MPO-414): each confirm stays gated until
+// its input is usable, then hands the trimmed value to the caller.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { AssignDialog, EmailDialog, JumpToFieldDialog, RenameDialog } from "./FormDialogs";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function button(label: string): HTMLElement {
+  const found = Array.from(document.body.querySelectorAll('[role="button"], button')).find((node) =>
+    node.textContent?.trim().startsWith(label),
+  );
+  if (!found) throw new Error(`no button ${label}`);
+  return found as HTMLElement;
+}
+
+function input(label: string): HTMLInputElement | HTMLTextAreaElement {
+  const field = screen.getByLabelText(label);
+  return (
+    field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement
+      ? field
+      : field.querySelector("input, textarea")
+  ) as HTMLInputElement;
+}
+
+function gated(label: string): boolean {
+  return button(label).getAttribute("aria-disabled") === "true";
+}
+
+describe("RenameDialog", () => {
+  it("renames only to a different, trimmed name", () => {
+    const onRename = vi.fn();
+    renderWithProviders(
+      <RenameDialog open onOpenChange={() => {}} currentName="TODO-0001" onRename={onRename} />,
+    );
+    expect(gated("Rename")).toBe(true);
+    fireEvent.change(input("New name"), { target: { value: "  TODO-0001  " } });
+    expect(gated("Rename")).toBe(true);
+    fireEvent.change(input("New name"), { target: { value: "  TODO-0042 " } });
+    expect(gated("Rename")).toBe(false);
+    fireEvent.click(button("Rename"));
+    expect(onRename).toHaveBeenCalledWith("TODO-0042");
+  });
+});
+
+describe("EmailDialog", () => {
+  it("sends only with recipients and a subject", () => {
+    const onSend = vi.fn();
+    renderWithProviders(
+      <EmailDialog open onOpenChange={() => {}} defaultSubject="ToDo TODO-0001" onSend={onSend} />,
+    );
+    expect(input("Subject").value).toBe("ToDo TODO-0001");
+    expect(gated("Send")).toBe(true);
+    fireEvent.change(input("To (comma-separated emails)"), {
+      target: { value: " jane@example.com " },
+    });
+    fireEvent.change(input("Message"), { target: { value: "See attached." } });
+    fireEvent.click(button("Send"));
+    expect(onSend).toHaveBeenCalledWith({
+      recipients: "jane@example.com",
+      subject: "ToDo TODO-0001",
+      content: "See attached.",
+    });
+  });
+});
+
+describe("AssignDialog", () => {
+  it("will not assign before a user is picked", () => {
+    const onAssign = vi.fn();
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: "https://form-dialogs.screen.spec.test" }}
+        navigation={createMemoryNavigator("/backoffice")}
+      >
+        <AssignDialog open onOpenChange={() => {}} onAssign={onAssign} />
+      </BackofficeProvider>,
+    );
+    expect(screen.getByText("Assign to")).toBeTruthy();
+    expect(gated("Assign")).toBe(true);
+    fireEvent.click(button("Assign"));
+    expect(onAssign).not.toHaveBeenCalled();
+  });
+});
+
+describe("JumpToFieldDialog", () => {
+  const fields = [
+    { name: "customer", label: "Customer", tabKey: "details", tabLabel: "Details" },
+    { name: "due_date", label: "Due Date", tabKey: "details", tabLabel: "Details" },
+    { name: "terms", label: "Payment Terms", tabKey: "terms", tabLabel: "Terms" },
+  ];
+
+  it("filters fields by label or fieldname and jumps to a picked one", () => {
+    const onJump = vi.fn();
+    renderWithProviders(
+      <JumpToFieldDialog open onOpenChange={() => {}} fields={fields} onJump={onJump} />,
+    );
+    fireEvent.change(input("Search fields…"), { target: { value: "due" } });
+    expect(screen.queryByText("Customer")).toBeNull();
+    fireEvent.click(screen.getByText("Due Date"));
+    expect(onJump).toHaveBeenCalledWith(fields[1]);
+  });
+
+  it("jumps to the first match on confirm and gates an empty result", () => {
+    const onJump = vi.fn();
+    renderWithProviders(
+      <JumpToFieldDialog open onOpenChange={() => {}} fields={fields} onJump={onJump} />,
+    );
+    fireEvent.change(input("Search fields…"), { target: { value: "terms" } });
+    fireEvent.click(button("Jump"));
+    expect(onJump).toHaveBeenCalledWith(fields[2]);
+    fireEvent.change(input("Search fields…"), { target: { value: "nothing like it" } });
+    expect(gated("Jump")).toBe(true);
+  });
+});

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

@@ -0,0 +1,147 @@
+// The desk form toolbar (MPO-414): one lifecycle primary per docstatus, no
+// primary the session's rights withhold (MPO-390), the status pill, the ⋯
+// 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 {
+  FormToolbar,
+  resolveIndicator,
+  type FormToolbarMenuItem,
+  type FormToolbarProps,
+} from "./FormToolbar";
+
+function props(overrides: Partial<FormToolbarProps> = {}): FormToolbarProps {
+  return {
+    breadcrumbs: [
+      { label: "Home", href: "/backoffice" },
+      { label: "Sales Order", href: "/backoffice/sales-order" },
+      { label: "SO-0001" },
+    ],
+    onNavigate: vi.fn(),
+    title: "SO-0001",
+    indicator: "draft",
+    isSaving: false,
+    canSave: true,
+    canSubmit: true,
+    canCancel: false,
+    canAmend: false,
+    onSave: vi.fn(),
+    onSubmit: vi.fn(),
+    onCancel: vi.fn(),
+    onAmend: vi.fn(),
+    menuItems: [],
+    ...overrides,
+  };
+}
+
+const primaries = ["save", "submit", "cancel", "amend"] as const;
+
+function visiblePrimaries(): string[] {
+  return primaries.filter((action) => screen.queryByTestId(`form-toolbar-${action}`));
+}
+
+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("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(
+      <FormToolbar
+        {...props({ indicator: "cancelled", canSave: false, canSubmit: false, canAmend: true })}
+      />,
+    );
+    expect(visiblePrimaries()).toEqual(["amend"]);
+  });
+
+  it("draws no primary a reader's rights withhold", () => {
+    renderWithProviders(
+      <FormToolbar {...props({ indicator: "notSaved", canSave: false, canSubmit: false })} />,
+    );
+    expect(visiblePrimaries()).toEqual([]);
+  });
+
+  it("pills the status from meta.states before guessing a color", () => {
+    const { rerender } = renderWithProviders(<FormToolbar {...props({ indicator: "new" })} />);
+    expect(screen.getByText("Not Saved")).toBeTruthy();
+    const approved = resolveIndicator({
+      isCreate: false,
+      isDirty: false,
+      docstatus: 1,
+      isSubmittable: true,
+      statusValue: "Approved",
+      states: [{ title: "Approved", color: "Green" }],
+    });
+    expect(approved).toEqual({ label: "Approved", color: "green" });
+    rerender(<FormToolbar {...props({ indicator: approved })} />);
+    expect(screen.getByText("Approved")).toBeTruthy();
+    expect(screen.queryByText("Submitted")).toBeNull();
+    rerender(<FormToolbar {...props({ indicator: "saved" })} />);
+    for (const label of ["Not Saved", "Draft", "Submitted", "Cancelled", "Approved"]) {
+      expect(screen.queryByText(label)).toBeNull();
+    }
+  });
+
+  it("runs ⋯ menu items and holds the disabled ones", async () => {
+    const onDuplicate = vi.fn();
+    const onDelete = vi.fn();
+    const menuItems: FormToolbarMenuItem[] = [
+      { key: "duplicate", label: "Duplicate", icon: "duplicate", onSelect: onDuplicate },
+      {
+        key: "delete",
+        label: "Delete",
+        icon: "delete",
+        destructive: true,
+        disabled: true,
+        disabledReason: "No delete permission",
+        onSelect: onDelete,
+      },
+    ];
+    renderWithProviders(<FormToolbar {...props({ menuItems })} />);
+    fireEvent.click(screen.getByTestId("form-toolbar-menu"));
+    const item = (label: string) =>
+      Array.from(document.querySelectorAll('[role="menuitem"]')).find((node) =>
+        node.textContent?.startsWith(label),
+      ) as HTMLElement;
+    await waitFor(() => expect(item("Delete")).toBeTruthy());
+    expect(item("Delete").getAttribute("aria-disabled")).toBe("true");
+    fireEvent.click(item("Delete"));
+    expect(onDelete).not.toHaveBeenCalled();
+    fireEvent.click(item("Duplicate"));
+    expect(onDuplicate).toHaveBeenCalledTimes(1);
+  });
+
+  it("pages prev/next and disables the boundary arrow instead of hiding it", () => {
+    const onPrevDoc = vi.fn();
+    const onNextDoc = vi.fn();
+    const { rerender } = renderWithProviders(<FormToolbar {...props()} />);
+    expect(screen.queryByTestId("form-toolbar-prev")).toBeNull();
+    rerender(<FormToolbar {...props({ onPrevDoc, onNextDoc, prevDocDisabled: true })} />);
+    fireEvent.click(screen.getByTestId("form-toolbar-prev"));
+    fireEvent.click(screen.getByTestId("form-toolbar-next"));
+    expect(onPrevDoc).not.toHaveBeenCalled();
+    expect(onNextDoc).toHaveBeenCalledTimes(1);
+  });
+});