@multiplatform.one/backoffice 7.23.1 → 7.24.0

package/src/form/FormDialogs.tsx

@@ -13,12 +13,14 @@ import { Link } from "@multiplatform.one/frappe-ui";
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackRadiusProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 // ---------------------------------------------------------------------------
 // Rename
@@ -106,7 +108,7 @@ export function EmailDialog({ open, onOpenChange, defaultSubject, onSend }: Emai
       confirmDisabledReason={t("emailDisabled", "Recipients and subject are required")}
       onConfirm={() => onSend({ recipients: recipients.trim(), subject: subject.trim(), content })}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Input
           value={recipients}
           onChangeText={setRecipients}
@@ -163,7 +165,7 @@ export function AssignDialog({ open, onOpenChange, onAssign }: AssignDialogProps
       confirmDisabledReason={t("assignDisabled", "Pick a user first")}
       onConfirm={() => onAssign(user)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("assignTo", "Assign to")}
           doctype="User"
@@ -226,7 +228,14 @@ export function JumpToFieldDialog({ open, onOpenChange, fields, onJump }: JumpTo
         if (matches[0]) onJump(matches[0]);
       }}
     >
-      <YStack {...knobProps.gap} minWidth={280} maxWidth={420}>
+      <YStack
+        {...knobProps.gap}
+        minWidth={dialogBodyMinWidth}
+        maxWidth={sizeRecipeEscape(
+          420,
+          "jump-to-field: a scannable column width, and the match list scrolls past about six rows",
+        )}
+      >
         <Input
           value={query}
           onChangeText={setQuery}
@@ -236,7 +245,12 @@ export function JumpToFieldDialog({ open, onOpenChange, fields, onJump }: JumpTo
             autoFocus: true,
           }}
         />
-        <ScrollView maxHeight={240}>
+        <ScrollView
+          maxHeight={sizeRecipeEscape(
+            240,
+            "jump-to-field: a scannable column width, and the match list scrolls past about six rows",
+          )}
+        >
           <YStack>
             {matches.map((field, index) => {
               const position = getGroupPosition(index, matches.length);

package/src/form/FormSidebarPanel.tsx

@@ -50,6 +50,7 @@ import {
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackEdgeRadius,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -553,7 +554,10 @@ export function FormSidebarPanel({
             src={imageUrl}
             alt={t("documentImage", "Document image")}
             width="100%"
-            height={140}
+            height={sizeRecipeEscape(
+              140,
+              "document image: a fixed-height cover thumbnail in the sidebar",
+            )}
             objectFit="cover"
             {...knobProps.containerRadius}
           />

package/src/form/FormTimeline.tsx

@@ -607,7 +607,13 @@ export function FormTimeline({
         gap="$3"
         alignItems="flex-start"
       >
-        <YStack width={24} height={24} alignItems="center" justifyContent="center" opacity={0.6}>
+        <YStack
+          width="$1.5"
+          height="$1.5"
+          alignItems="center"
+          justifyContent="center"
+          opacity={0.6}
+        >
           {icon}
         </YStack>
         <XStack flex={1} gap="$1.5" alignItems="center" flexWrap="wrap" paddingTop={2}>
@@ -643,7 +649,13 @@ export function FormTimeline({
         gap="$3"
         alignItems="flex-start"
       >
-        <YStack width={24} height={24} alignItems="center" justifyContent="center" opacity={0.6}>
+        <YStack
+          width="$1.5"
+          height="$1.5"
+          alignItems="center"
+          justifyContent="center"
+          opacity={0.6}
+        >
           {icon}
         </YStack>
         <YStack

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-dialogs.tsx

@@ -12,6 +12,7 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface SidebarAssignDialogProps {
   open: boolean;
@@ -44,7 +45,7 @@ export function SidebarAssignDialog({ open, onOpenChange, onAssign }: SidebarAss
       confirmDisabledReason={t("assignDisabled", "Pick a user first")}
       onConfirm={() => onAssign(user, description.trim() || undefined)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("assignTo", "Assign to")}
           doctype="User"
@@ -94,7 +95,7 @@ export function SidebarShareDialog({ open, onOpenChange, onShare }: SidebarShare
       confirmDisabledReason={t("shareDisabled", "Pick a user first")}
       onConfirm={() => onShare(user, canWrite)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("shareWith", "Share with")}
           doctype="User"

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",

package/src/list/AddTagsDialog.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { bulkAddTag } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface AddTagsDialogProps {
   doctype: string;
@@ -82,7 +83,7 @@ export function AddTagsDialog({ doctype, names, open, onOpenChange, onDone }: Ad
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.tagBody", {
             count: names.length,

package/src/list/AssignToDialog.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { bulkAssign } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface AssignToDialogProps {
   doctype: string;
@@ -74,7 +75,7 @@ export function AssignToDialog({
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.assignBody", {
             count: names.length,

package/src/list/ListBulkActionsBar.screen.spec.tsx

@@ -0,0 +1,181 @@
+// ListBulkActionsBar over a selection (MPO-414): the bar's gates, its
+// confirm-guarded delete and docstatus RPCs, the Bulk Edit dialog it opens,
+// and the host list actions it offers for the doctype on screen.
+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, type BackofficeActions } from "../config/BackofficeProvider";
+import type { BackofficeCapabilities } from "../config/capabilities";
+import { createMemoryNavigator } from "../navigation/navigator";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { ListBulkActionsBar } from "./ListBulkActionsBar";
+
+const todoMeta: DoctypeMeta = {
+  name: "ToDo",
+  fields: [
+    { fieldname: "description", fieldtype: "Data", label: "Description" },
+    { fieldname: "status", fieldtype: "Select", label: "Status", options: "Open\nClosed" },
+  ],
+};
+
+interface Call {
+  method: string;
+  path: string;
+  body: Record<string, unknown>;
+}
+
+let run = 0;
+let calls: Call[] = [];
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+beforeEach(() => {
+  run += 1;
+  calls = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request, init?: RequestInit) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const raw = typeof init?.body === "string" ? init.body : "";
+    calls.push({
+      method: (init?.method ?? "GET").toUpperCase(),
+      path: decodeURIComponent(url.pathname),
+      body: raw.startsWith("{") ? (JSON.parse(raw) as Record<string, unknown>) : {},
+    });
+    if (url.pathname.endsWith("submit_cancel_or_update_docs")) return json({ message: [] });
+    return json({ message: "ok", data: {} });
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+interface BarOptions {
+  meta?: DoctypeMeta;
+  names?: string[];
+  capabilities?: BackofficeCapabilities;
+  actions?: BackofficeActions;
+}
+
+function renderBar({
+  meta = todoMeta,
+  names = ["TD-001", "TD-002"],
+  capabilities,
+  actions,
+}: BarOptions = {}) {
+  const onClearSelection = vi.fn();
+  const onActionComplete = vi.fn();
+  const view = renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://list-bulk-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice/ToDo")}
+      capabilities={capabilities}
+      actions={actions}
+    >
+      <ListBulkActionsBar
+        doctype={meta.name}
+        meta={meta}
+        selectedNames={names}
+        onClearSelection={onClearSelection}
+        onActionComplete={onActionComplete}
+      />
+    </BackofficeProvider>,
+  );
+  return { ...view, onClearSelection, onActionComplete };
+}
+
+function button(name: string, root: HTMLElement = document.body) {
+  return within(root).getByRole("button", { name });
+}
+
+async function dialog() {
+  return (await screen.findByRole("alertdialog")) as HTMLElement;
+}
+
+describe("ListBulkActionsBar", () => {
+  it("counts the selection and offers the desk bulk actions", () => {
+    renderBar();
+    expect(screen.getByText("2 selected")).toBeTruthy();
+    for (const name of ["Bulk Edit", "Export CSV", "Assign To", "Add Tags", "Delete"]) {
+      expect(button(name)).toBeTruthy();
+    }
+    expect(screen.queryByRole("button", { name: "Submit" })).toBeNull();
+  });
+
+  it("renders nothing without a selection or with bulk actions switched off", () => {
+    const empty = renderBar({ names: [] });
+    expect(screen.queryByText(/selected/)).toBeNull();
+    empty.unmount();
+    renderBar({ capabilities: { bulkActions: false } });
+    expect(screen.queryByText("2 selected")).toBeNull();
+  });
+
+  it("drops Assign To and Add Tags when their capabilities are off", () => {
+    renderBar({ capabilities: { assignments: false, tags: false } });
+    expect(screen.getByText("2 selected")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Assign To" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Tags" })).toBeNull();
+  });
+
+  it("deletes each selected document only after the confirm, then clears and refreshes", async () => {
+    const { onClearSelection, onActionComplete } = renderBar();
+    fireEvent.click(button("Delete"));
+    const confirm = await dialog();
+    expect(within(confirm).getByText("Permanently delete 2 ToDo document(s)?")).toBeTruthy();
+    expect(calls.some((call) => call.method !== "GET")).toBe(false);
+    fireEvent.click(button("Delete", confirm));
+    await waitFor(() => expect(onActionComplete).toHaveBeenCalledTimes(1));
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+    const deleted = calls
+      .filter((call) => call.method === "DELETE" || call.path.endsWith("delete_doc"))
+      .map((call) => (call.method === "DELETE" ? call.path.split("/").pop() : call.body.name));
+    expect(deleted.sort()).toEqual(["TD-001", "TD-002"]);
+  });
+
+  it("submits a submittable selection through the bulk docstatus RPC", async () => {
+    const { onActionComplete } = renderBar({
+      meta: { ...todoMeta, name: "QA Submittable", is_submittable: 1 },
+      names: ["SUB-001", "SUB-002"],
+    });
+    expect(button("Cancel")).toBeTruthy();
+    fireEvent.click(button("Submit"));
+    const confirm = await dialog();
+    expect(within(confirm).getByText("Submit 2 QA Submittable document(s)?")).toBeTruthy();
+    fireEvent.click(button("Submit", confirm));
+    await waitFor(() => expect(onActionComplete).toHaveBeenCalledTimes(1));
+    const rpc = calls.find((call) => call.path.endsWith("submit_cancel_or_update_docs"));
+    expect(rpc?.body).toMatchObject({
+      doctype: "QA Submittable",
+      docnames: JSON.stringify(["SUB-001", "SUB-002"]),
+      action: "submit",
+    });
+  });
+
+  it("opens Bulk Edit over the selection, with Update held until a field is picked", async () => {
+    renderBar({ names: ["TD-001"] });
+    fireEvent.click(button("Bulk Edit"));
+    const edit = await dialog();
+    expect(within(edit).getByText("Set one field on 1 selected document")).toBeTruthy();
+    expect(button("Update", edit).getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("offers only the host list actions scoped to this doctype", () => {
+    const archive = vi.fn();
+    renderBar({
+      actions: {
+        list: [
+          { id: "archive", label: "Archive", onPress: archive },
+          { id: "reset", label: "Reset Password", doctypes: ["User"], onPress: vi.fn() },
+        ],
+      },
+    });
+    expect(screen.queryByRole("button", { name: "Reset Password" })).toBeNull();
+    fireEvent.click(button("Archive"));
+    expect(archive).toHaveBeenCalledWith({ doctype: "ToDo", selection: ["TD-001", "TD-002"] });
+  });
+});

package/src/list/ListBulkActionsBar.tsx

@@ -14,7 +14,11 @@ import { Button } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useBackofficeCapabilities, useBackofficeConfig } from "../config/BackofficeProvider";
+import {
+  actionsForDoctype,
+  useBackofficeCapabilities,
+  useBackofficeConfig,
+} from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
 import { useFrappeApp } from "../shared/useFrappeApp";
@@ -65,7 +69,7 @@ export function ListBulkActionsBar({
   const isSubmittable = meta?.is_submittable === 1;
   const showAssign = capabilities.assignments.enabled;
   const showTags = capabilities.tags.enabled;
-  const hostActions = actions.list ?? [];
+  const hostActions = actionsForDoctype(actions.list, doctype);
 
   const handleDelete = async () => {
     if (!app) return;