@multiplatform.one/backoffice 7.23.2 → 7.24.0

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

package/src/form/sidebar-people.tsx

@@ -5,12 +5,14 @@
  * initials fallback — desk parity for user chips.
  */
 
-import { Avatar, Button, Text, XStack, YStack } from "@multiplatform.one/components";
+import { Avatar, Button, styled, Text, XStack, YStack } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { XIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
+const SidebarAvatarSlot = styled(XStack, { name: "SidebarAvatarSlot" });
+
 export interface SidebarPersonItem {
   /** Stable row id (assignment/share row name, or the user id). */
   id: string;
@@ -104,12 +106,12 @@ export function SidebarAvatarStrip({ items, max }: SidebarAvatarStripProps) {
   return (
     <XStack alignItems="center">
       {visible.map((item, index) => (
-        <XStack key={item.id} marginInlineStart={index === 0 ? 0 : -6}>
+        <SidebarAvatarSlot key={item.id} marginInlineStart={index === 0 ? 0 : -6}>
           <Avatar size="$1" src={item.image} name={item.label} alt={item.label} />
-        </XStack>
+        </SidebarAvatarSlot>
       ))}
       {overflow > 0 && (
-        <XStack marginInlineStart={-6}>
+        <SidebarAvatarSlot marginInlineStart={-6}>
           <Avatar
             size="$1"
             alt={`+${overflow}`}
@@ -119,7 +121,7 @@ export function SidebarAvatarStrip({ items, max }: SidebarAvatarStripProps) {
               </Text>
             }
           />
-        </XStack>
+        </SidebarAvatarSlot>
       )}
     </XStack>
   );

package/src/i18n/en.ts

@@ -405,7 +405,7 @@ export const en = {
     list: "List",
     loadFailed: "Couldn't load this view",
     loading: "Loading",
-    new: "New",
+    new: "New {{doctype}}",
     report: "Report",
     switchView: "Switch view",
     tree: "Tree",