@multiplatform.one/backoffice 7.23.1 → 7.24.0

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

@@ -18,6 +18,7 @@ import {
 } from "@multiplatform.one/components";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useFrappeApp } from "../shared/useFrappeApp";
 
@@ -77,7 +78,10 @@ export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
         <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
         <DialogContent
           key="content"
-          width={420}
+          width={sizeRecipeEscape(
+            420,
+            "about dialog: a fixed reading width, held to 90% on narrow screens",
+          )}
           maxWidth="90%"
           data-testid="backoffice-help-about-dialog"
         >
@@ -90,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>
@@ -118,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

@@ -14,7 +14,7 @@ import {
   XStack,
   YStack,
 } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
@@ -43,7 +43,7 @@ function KeyChip({ label }: { label: string }) {
       backgroundColor="$color2"
       paddingHorizontal="$2"
       paddingVertical="$1"
-      minWidth={28}
+      minWidth="$2"
       justifyContent="center"
     >
       <SizableText size="$1" fontWeight="400">
@@ -62,7 +62,16 @@ interface ShortcutRowProps {
 function ShortcutRow({ combos, description }: ShortcutRowProps) {
   return (
     <XStack gap="$3" alignItems="center">
-      <XStack width={150} gap="$1" alignItems="center" flexWrap="wrap" flexShrink={0}>
+      <XStack
+        width={sizeRecipeEscape(
+          150,
+          "shortcuts dialog: a fixed width and key column so every description starts at one edge",
+        )}
+        gap="$1"
+        alignItems="center"
+        flexWrap="wrap"
+        flexShrink={0}
+      >
         {combos.map((combo, comboIndex) => (
           <XStack key={combo.join("+")} gap="$1" alignItems="center">
             {comboIndex > 0 && (
@@ -118,7 +127,10 @@ export function HelpShortcutsDialog({ open, onOpenChange }: HelpShortcutsDialogP
         <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
         <DialogContent
           key="content"
-          width={440}
+          width={sizeRecipeEscape(
+            440,
+            "shortcuts dialog: a fixed width and key column so every description starts at one edge",
+          )}
           maxWidth="90%"
           data-testid="backoffice-help-shortcuts-dialog"
         >
@@ -128,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

@@ -21,6 +21,7 @@ import {
   ensureFocusVisibleRing,
   formatRelativeTimestamp,
   menuRowFrame,
+  sizeRecipeEscape,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { GearSixIcon } from "@phosphor-icons/react";
@@ -85,15 +86,14 @@ function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: (
         ) : null}
       </YStack>
       {item.unread && (
-        <View
-          width={8}
-          height={8}
-          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>
   );
@@ -112,8 +112,14 @@ function NotificationSkeletonRows() {
         >
           <SkeletonCircle size={28} />
           <YStack flex={1} gap="$1.5">
-            <Skeleton height={12} width="85%" />
-            <Skeleton height={10} width={64} />
+            <Skeleton width="85%" />
+            <Skeleton
+              height={sizeRecipeEscape(
+                10,
+                "timestamp bone: the height of the small caption it stands in for",
+              )}
+              width="$6"
+            />
           </YStack>
         </XStack>
       ))}

package/src/desk/Desk.stories.tsx

@@ -13,9 +13,15 @@
 import { Text, YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { Desk } from "./Desk";
 import type { DeskSurfaceProps } from "./DeskSurface";
 
+const frameHeight = sizeRecipeEscape(
+  680,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/Desk",
   component: Desk,
@@ -176,7 +182,7 @@ const frappe = () => ({ baseURL: MOCK_HOST, fixtures: makeFixtures() });
 
 function Frame({ children }: { children: ReactNode }) {
   return (
-    <YStack height={680} minHeight={0}>
+    <YStack height={frameHeight} minHeight={0}>
       {children}
     </YStack>
   );

package/src/desk/DeskSurface.stories.tsx

@@ -12,11 +12,17 @@
 import { Text, YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { DeskSurface, DeskSurfaceLoading, type DeskSurfaceProps } from "./DeskSurface";
 import type { DeskTarget } from "./target";
 
+const frameHeight = sizeRecipeEscape(
+  560,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/DeskSurface",
   component: DeskSurface,
@@ -193,7 +199,7 @@ function Surface({ target, children }: { target?: DeskTarget; children?: ReactNo
       frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
       navigation={createMemoryNavigator("/backoffice")}
     >
-      <YStack flex={1} height={560} minHeight={0}>
+      <YStack flex={1} height={frameHeight} minHeight={0}>
         {children ?? (target ? <DeskSurface target={target} /> : null)}
       </YStack>
     </BackofficeProvider>

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/FormConnections.tsx

@@ -15,6 +15,7 @@ import {
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackRadiusProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -108,7 +109,14 @@ function ConnectionRow({ link, docname, count, countsLoading, index, total }: Co
         {link.targetDoctype}
       </SizableText>
       {countsLoading ? (
-        <Skeleton variant="rounded" width={28} height={18} />
+        <Skeleton
+          variant="rounded"
+          width="$2"
+          height={sizeRecipeEscape(
+            18,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+        />
       ) : (
         <>
           {openText !== undefined && (
@@ -189,12 +197,39 @@ function ConnectionsSkeleton() {
   return (
     <Card flexBasis={240} flexGrow={1} flexShrink={1}>
       <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-        <Skeleton width={120} height={18} />
+        <Skeleton
+          width={sizeRecipeEscape(
+            120,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+          height={sizeRecipeEscape(
+            18,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+        />
         <Separator />
         <YStack gap="$2">
-          <Skeleton width="82%" height={16} />
-          <Skeleton width="64%" height={16} />
-          <Skeleton width="73%" height={16} />
+          <Skeleton
+            width="82%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
+          <Skeleton
+            width="64%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
+          <Skeleton
+            width="73%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
         </YStack>
       </YStack>
     </Card>

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);
+  });
+});