@multiplatform.one/backoffice 7.23.2 → 7.24.0

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;

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

@@ -0,0 +1,176 @@
+// ListFilterBar as the list's one filter authority (MPO-414): what each
+// control writes through onFiltersChange / onSortChange, the chips row, the
+// liked-by heart, the saved-filter source and the compact collapse.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import type { FrappeFilters } from "../shared/types";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { ListFilterBar, type ListFilterBarProps } from "./ListFilterBar";
+
+const todoMeta: DoctypeMeta = {
+  name: "ToDo",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [
+    {
+      fieldname: "status",
+      label: "Status",
+      fieldtype: "Select",
+      options: "Open\nClosed",
+      in_standard_filter: 1,
+    },
+    { fieldname: "sender", label: "Sender", fieldtype: "Data", in_standard_filter: 1 },
+    { fieldname: "priority", label: "Priority", fieldtype: "Select", options: "High\nLow" },
+  ],
+};
+
+let run = 0;
+let requests: URL[] = [];
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+beforeEach(() => {
+  run += 1;
+  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.endsWith("frappe.auth.get_logged_user")) {
+      return json({ message: "jane@example.com" });
+    }
+    return json({ data: [], message: [] });
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+type BarProps = Partial<ListFilterBarProps>;
+
+function renderBar(props: BarProps = {}) {
+  const onFiltersChange = vi.fn();
+  const onSortChange = vi.fn();
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://list-filter-bar-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice/ToDo")}
+    >
+      <ListFilterBar
+        doctype="ToDo"
+        meta={todoMeta}
+        filters={[]}
+        onFiltersChange={onFiltersChange}
+        onSortChange={onSortChange}
+        {...props}
+      />
+    </BackofficeProvider>,
+  );
+  return { onFiltersChange, onSortChange };
+}
+
+function StatefulBar({ onChange }: { onChange: (filters: FrappeFilters) => void }) {
+  const [filters, setFilters] = useState<FrappeFilters>([]);
+  return (
+    <ListFilterBar
+      doctype="ToDo"
+      meta={todoMeta}
+      filters={filters}
+      onFiltersChange={(next) => {
+        setFilters(next);
+        onChange(next);
+      }}
+    />
+  );
+}
+
+describe("ListFilterBar", () => {
+  it("commits a text standard filter as a like tuple once typing pauses", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: `https://list-filter-bar-${run}.spec.test` }}
+        navigation={createMemoryNavigator("/backoffice/ToDo")}
+      >
+        <StatefulBar onChange={onChange} />
+      </BackofficeProvider>,
+    );
+    const sender = screen.getByLabelText("Sender");
+    const input = (
+      sender instanceof HTMLInputElement ? sender : sender.querySelector("input")
+    ) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "bob" } });
+    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([["sender", "like", "%bob%"]]));
+    expect(await screen.findByText("Sender like %bob%")).toBeTruthy();
+  });
+
+  it("shows each applied filter as a chip that removes its own tuple, or all of them", () => {
+    const filters: FrappeFilters = [
+      ["status", "=", "Open"],
+      ["priority", "in", ["High", "Low"]],
+    ];
+    const { onFiltersChange } = renderBar({ filters });
+    expect(screen.getByText("Status = Open")).toBeTruthy();
+    expect(screen.getByText("Priority in High, Low")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /save filter/i })).toBeTruthy();
+    fireEvent.click(screen.getAllByLabelText("Remove")[1]);
+    expect(onFiltersChange).toHaveBeenLastCalledWith([["status", "=", "Open"]]);
+    fireEvent.click(screen.getByRole("button", { name: "Clear filters" }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([]);
+  });
+
+  it("leaves the chips to the host when showChips is false", () => {
+    renderBar({ filters: [["status", "=", "Open"]], showChips: false });
+    expect(screen.queryByText("Status = Open")).toBeNull();
+  });
+
+  it("sorts on meta's default field and flips its order", () => {
+    const { onSortChange } = renderBar();
+    expect(screen.getByRole("button", { name: "Sort" }).textContent).toContain("Last Updated On");
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sort order (Descending)" }));
+    expect(onSortChange).toHaveBeenCalledWith("modified", "asc");
+  });
+
+  it("toggles the liked-by-me filter from the heart", () => {
+    const liked: FrappeFilters = [["_liked_by", "like", "%jane@example.com%"]];
+    const { onFiltersChange } = renderBar({ likedByUser: "jane@example.com" });
+    const heart = screen.getByRole("button", { name: "Liked by me" });
+    expect(heart.getAttribute("aria-pressed")).toBe("false");
+    fireEvent.click(heart);
+    expect(onFiltersChange).toHaveBeenCalledWith(liked);
+  });
+
+  it("reads the doctype's saved filters and offers Save Filter only while filters apply", async () => {
+    renderBar();
+    await waitFor(() =>
+      expect(
+        requests.some(
+          (url) =>
+            url.pathname.endsWith("frappe.client.get_list") &&
+            url.searchParams.get("doctype") === "List Filter" &&
+            url.searchParams.get("filters") ===
+              JSON.stringify([["reference_doctype", "=", "ToDo"]]),
+        ),
+      ).toBe(true),
+    );
+    expect(screen.queryByRole("button", { name: /save filter/i })).toBeNull();
+  });
+
+  it("collapses behind one counted Filter button on compact viewports", async () => {
+    renderBar({ compact: true, filters: [["status", "=", "Open"]] });
+    await act(async () => {});
+    expect(screen.getByRole("button", { name: "Filter" }).textContent).toContain("Filter (1)");
+    expect(screen.queryByText("Status = Open")).toBeNull();
+  });
+});

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

@@ -0,0 +1,202 @@
+// ListSidebar against a stubbed bench (MPO-414): the facet RPCs it sends,
+// the rows it draws from them, and the desk toggle semantics a row press
+// writes through onFiltersChange.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import type { BackofficeCapabilities } from "../config/capabilities";
+import { createMemoryNavigator } from "../navigation/navigator";
+import type { FrappeFilters } from "../shared/types";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { ListSidebar, type ListSidebarSection } from "./ListSidebar";
+
+const todoMeta: DoctypeMeta = {
+  name: "ToDo",
+  fields: [
+    { fieldname: "status", fieldtype: "Select", label: "Status", options: "Open\nClosed" },
+    { fieldname: "description", fieldtype: "Text Editor", label: "Description" },
+  ],
+};
+
+interface FacetCall {
+  method: string;
+  body: Record<string, string>;
+}
+
+let run = 0;
+let calls: FacetCall[] = [];
+let failFacets = false;
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+const groupBy: Record<string, { name: string | null; count: number }[]> = {
+  assigned_to: [
+    { name: "jane@example.com", count: 2 },
+    { name: "Administrator", count: 1 },
+    { name: null, count: 3 },
+  ],
+  owner: [
+    { name: "joe@example.com", count: 2 },
+    { name: "jane@example.com", count: 1 },
+    { name: "Guest", count: 1 },
+  ],
+};
+
+const columnStats: Record<string, [string, number][]> = {
+  _user_tags: [
+    ["urgent", 2],
+    ["No Tags", 1],
+  ],
+  status: [
+    ["Closed", 1],
+    ["Open", 3],
+    ["", 2],
+  ],
+};
+
+beforeEach(() => {
+  run += 1;
+  calls = [];
+  failFacets = false;
+  vi.stubGlobal("fetch", async (input: string | URL | Request, init?: RequestInit) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const method = url.pathname.replace(/^\/api\/method\//, "");
+    const raw = typeof init?.body === "string" ? init.body : "";
+    const body = (raw.startsWith("{") ? JSON.parse(raw) : {}) as Record<string, string>;
+    if (method === "frappe.auth.get_logged_user") return json({ message: "jane@example.com" });
+    if (method.startsWith("frappe.desk.")) {
+      calls.push({ method, body });
+      if (failFacets) return json({ exc_type: "PermissionError" }, 403);
+    }
+    if (method === "frappe.desk.listview.get_group_by_count") {
+      return json({ message: groupBy[body.field] ?? [] });
+    }
+    if (method === "frappe.desk.reportview.get_sidebar_stats") {
+      const [fieldname] = JSON.parse(body.stats) as string[];
+      return json({ message: { stats: { [fieldname]: columnStats[fieldname] ?? [] } } });
+    }
+    return json({ data: [], message: [] });
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+interface SidebarOptions {
+  meta?: DoctypeMeta;
+  filters?: FrappeFilters;
+  hiddenSections?: ListSidebarSection[];
+  capabilities?: BackofficeCapabilities;
+}
+
+function renderSidebar({
+  meta = todoMeta,
+  filters = [],
+  hiddenSections,
+  capabilities,
+}: SidebarOptions = {}) {
+  const onFiltersChange = vi.fn();
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://list-sidebar-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice/ToDo")}
+      capabilities={capabilities}
+    >
+      <ListSidebar
+        doctype="ToDo"
+        meta={meta}
+        filters={filters}
+        onFiltersChange={onFiltersChange}
+        hiddenSections={hiddenSections}
+      />
+    </BackofficeProvider>,
+  );
+  return { onFiltersChange };
+}
+
+function facetRow(label: string) {
+  return screen.getByRole("button", { name: label });
+}
+
+describe("ListSidebar", () => {
+  it("draws each facet from the bench, the session user pinned as Me and desk noise scrubbed", async () => {
+    renderSidebar();
+    await waitFor(() => expect(screen.getAllByRole("button", { name: "Me" })).toHaveLength(2));
+    for (const title of ["Assigned To", "Created By", "Tags", "Status"]) {
+      expect(screen.getByText(title)).toBeTruthy();
+    }
+    expect(facetRow("joe@example.com").textContent).toContain("2");
+    expect(facetRow("Open").textContent).toContain("3");
+    expect(facetRow("urgent")).toBeTruthy();
+    expect(facetRow("No Tags")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Administrator" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Guest" })).toBeNull();
+  });
+
+  it("counts each facet under every filter but its own", async () => {
+    renderSidebar({
+      filters: [
+        ["status", "=", "Open"],
+        ["owner", "=", "joe@example.com"],
+      ],
+    });
+    await waitFor(() => expect(calls).toHaveLength(4));
+    const owner = calls.find((call) => call.body.field === "owner");
+    expect(owner?.body).toMatchObject({
+      doctype: "ToDo",
+      current_filters: JSON.stringify([["status", "=", "Open"]]),
+    });
+    const status = calls.find((call) => call.body.stats === JSON.stringify(["status"]));
+    expect(status?.body.filters).toBe(JSON.stringify([["owner", "=", "joe@example.com"]]));
+  });
+
+  it("replaces a facet's filter on press and clears it when the active row is pressed", async () => {
+    const filters: FrappeFilters = [
+      ["owner", "=", "joe@example.com"],
+      ["status", "=", "Closed"],
+    ];
+    const { onFiltersChange } = renderSidebar({ filters });
+    await waitFor(() => expect(facetRow("Open")).toBeTruthy());
+    expect(facetRow("Closed").getAttribute("aria-pressed")).toBe("true");
+    fireEvent.click(facetRow("Open"));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([
+      ["owner", "=", "joe@example.com"],
+      ["status", "=", "Open"],
+    ]);
+    fireEvent.click(facetRow("Closed"));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([["owner", "=", "joe@example.com"]]);
+    fireEvent.click(facetRow("No Tags"));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([
+      ...filters,
+      ["_user_tags", "not like", "%,%"],
+    ]);
+  });
+
+  it("drops sections hidden by the host or its capabilities, and the status facet without a status field", async () => {
+    renderSidebar({
+      meta: { name: "ToDo", fields: [] },
+      hiddenSections: ["owner"],
+      capabilities: { tags: false },
+    });
+    await waitFor(() => expect(facetRow("Me")).toBeTruthy());
+    expect(screen.getByText("Assigned To")).toBeTruthy();
+    for (const title of ["Created By", "Tags", "Status"]) {
+      expect(screen.queryByText(title)).toBeNull();
+    }
+    expect(calls.some((call) => call.body.stats === JSON.stringify(["status"]))).toBe(false);
+  });
+
+  it("says the sidebar is unavailable when every facet fails", async () => {
+    failFacets = true;
+    renderSidebar();
+    expect(await screen.findByText("Filters sidebar unavailable")).toBeTruthy();
+  });
+});