@multiplatform.one/backoffice 7.23.1 → 7.24.0

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

package/src/list/ListSidebar.tsx

@@ -18,6 +18,7 @@
 import { Accordion, SizableText, YStack } from "@multiplatform.one/components";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { useBackofficeCapabilities } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilter, FrappeFilters } from "../shared/types";
@@ -156,7 +157,7 @@ export function ListSidebar({
 
   return (
     <YStack
-      width={200}
+      width={sizeRecipeEscape(200, "list sidebar: a fixed facet column beside the list")}
       paddingRight="$2"
       paddingBottom="$4"
       aria-label={t("list.sidebarLabel", "List filters sidebar")}

package/src/list/bulk-edit-dialog.tsx

@@ -22,6 +22,7 @@ import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import type { BulkResult } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 /**
  * Fieldtypes with no stored value (layout / display / child rows) plus
@@ -274,7 +275,7 @@ export function BulkEditDialog({
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.editBody", {
             count: names.length,

package/src/list/filter-editor.tsx

@@ -19,6 +19,7 @@ import { Button, Input, Select } from "@multiplatform.one/forms";
 import { FunnelIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
@@ -35,6 +36,7 @@ import {
   type FilterFieldDescriptor,
   type FilterRowDraft,
 } from "@multiplatform.one/frappe-ui";
+import { overlayListMaxHeight } from "../shared/measures";
 
 export interface FilterEditorButtonProps {
   meta?: DoctypeMeta;
@@ -141,7 +143,7 @@ export function FilterEditorPanel({
           {t("list.filters.empty", "No filters applied")}
         </Text>
       ) : scrollRows ? (
-        <ScrollView maxHeight={360}>{rowList}</ScrollView>
+        <ScrollView maxHeight={overlayListMaxHeight}>{rowList}</ScrollView>
       ) : (
         rowList
       )}
@@ -192,7 +194,13 @@ export function FilterEditorButton({ meta, filters, onFiltersChange }: FilterEdi
       </Popover.Trigger>
       <PopoverContent padding="$3">
         <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-        <YStack width={620} maxWidth="100%">
+        <YStack
+          width={sizeRecipeEscape(
+            620,
+            "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+          )}
+          maxWidth="100%"
+        >
           <FilterEditorPanel
             key={openGen}
             meta={meta}
@@ -238,7 +246,12 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
       {/* Column wrappers: fields only stretch to the wrapper width through
           a column cross-axis on native (row wrappers leave them at
           intrinsic width — sliver bug in the list-tools sheet). */}
-      <YStack width={170}>
+      <YStack
+        width={sizeRecipeEscape(
+          170,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <Select
           value={row.fieldname}
           onChange={(next) => {
@@ -257,7 +270,12 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           aria-label={t("list.filters.field", "Filter field")}
         />
       </YStack>
-      <YStack width={150}>
+      <YStack
+        width={sizeRecipeEscape(
+          150,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <Select
           value={row.operator}
           onChange={(next) => {
@@ -270,7 +288,13 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           aria-label={t("list.filters.condition", "Condition")}
         />
       </YStack>
-      <YStack flex={1} minWidth={170}>
+      <YStack
+        flex={1}
+        minWidth={sizeRecipeEscape(
+          170,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <FilterValueEditor row={row} field={field} onChange={onChange} />
       </YStack>
       <Button

package/src/list/filter-saved.tsx

@@ -23,6 +23,7 @@ import {
 } from "@multiplatform.one/table";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
 import { useFrappeApp } from "../shared/useFrappeApp";
@@ -162,7 +163,16 @@ export function SavedFiltersControl({
 
   return (
     <XStack gap="$2" alignItems="center">
-      {savedFilters.length > 0 ? <XStack maxWidth={220}>{dropdown}</XStack> : null}
+      {savedFilters.length > 0 ? (
+        <XStack
+          maxWidth={sizeRecipeEscape(
+            220,
+            "saved-filter picker: caps the trigger beside the filter chips",
+          )}
+        >
+          {dropdown}
+        </XStack>
+      ) : null}
       {filters.length > 0 ? (
         <FilterManager
           currentFilters={filters}

package/src/list/filter-sort.tsx

@@ -19,6 +19,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { overlayListMaxHeight } from "../shared/measures";
 
 export interface SortControlProps {
   meta?: DoctypeMeta;
@@ -203,7 +204,12 @@ export function SortControl({
 
   return (
     <XStack gap="$1" alignItems="center">
-      <DropdownMenu items={items} closeOnSelect placement="bottom-end" maxHeight={360}>
+      <DropdownMenu
+        items={items}
+        closeOnSelect
+        placement="bottom-end"
+        maxHeight={overlayListMaxHeight}
+      >
         <Button
           size="$3"
           chromeless

package/src/list/sidebar-section.tsx

@@ -17,6 +17,8 @@ import {
   ensureFocusVisibleRing,
   getGroupPosition,
   hairline,
+  sizeRecipeEscape,
+  sizeRecipeForToken,
   stackRadiusProps,
   useGroupPosition,
   useResolvedKnobs,
@@ -129,12 +131,18 @@ export interface SidebarSectionSkeletonProps {
 
 export function SidebarSectionSkeleton({ rows = 3 }: SidebarSectionSkeletonProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const lineBone = sizeRecipeForToken(knobProps.sizeToken).fontSize;
   return (
     <YStack gap="$2" paddingVertical="$1" aria-busy aria-label={t("loading", "Loading")}>
       {Array.from({ length: rows }, (_, index) => (
         <XStack key={index} alignItems="center" justifyContent="space-between" gap="$2">
-          <Skeleton width={`${55 + ((index * 13) % 25)}%`} height={14} />
-          <Skeleton variant="rounded" width={26} height={14} />
+          <Skeleton width={`${55 + ((index * 13) % 25)}%`} height={lineBone} />
+          <Skeleton
+            variant="rounded"
+            width={sizeRecipeEscape(26, "count bone: the width of a two-digit count chip")}
+            height={lineBone}
+          />
         </XStack>
       ))}
     </YStack>