@multiplatform.one/backoffice 7.23.2 → 7.24.0

package/src/views/DashboardView.screen.spec.tsx

@@ -0,0 +1,144 @@
+// The per-doctype dashboard (MPO-414): KPI counts over the rolling windows,
+// a card per status option that opens the pre-filtered list, the weekly
+// chart's empty state, and the desk scope ANDed into every query (GL-5).
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { DeskScopeProvider } from "../desk/scope";
+import { createMemoryNavigator, type MemoryNavigator } from "../navigation/navigator";
+import type { FrappeFilters } from "../shared/types";
+import { DashboardView } from "./DashboardView";
+
+function dashboardMeta(name: string, withStatus = true) {
+  return {
+    name,
+    doctype: "DocType",
+    module: "QA",
+    title_field: "subject",
+    fields: [
+      { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+      ...(withStatus
+        ? [
+            {
+              fieldname: "status",
+              fieldtype: "Select",
+              label: "Status",
+              options: "Open\nWorking\nDone",
+              in_list_view: 1,
+            },
+          ]
+        : []),
+      { fieldname: "owner_name", fieldtype: "Data", label: "Owner", in_list_view: 1 },
+    ],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
+function daysAgo(days: number): string {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} 10:00:00`;
+}
+
+// bo's records are recent; ana's were created and last touched long ago.
+const docs = [
+  ["QAD-001", "Open", "bo", 2, 1],
+  ["QAD-002", "Working", "bo", 10, 3],
+  ["QAD-003", "Working", "bo", 40, 20],
+  ["QAD-004", "Done", "ana", 200, 150],
+  ["QAD-005", "Done", "ana", 300, 250],
+].map(([name, status, owner, created, modified]) => ({
+  name: String(name),
+  doctype: "QaDash",
+  subject: `Doc ${name}`,
+  status,
+  owner_name: owner,
+  creation: daysAgo(Number(created)),
+  modified: daysAgo(Number(modified)),
+}));
+
+let run = 0;
+
+function renderDashboard(doctype: string, scope?: FrappeFilters): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://dashboard-view-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({
+          DocType: [dashboardMeta("QaDash"), dashboardMeta("QaDashPlain", false)],
+          QaDash: docs,
+          QaDashPlain: docs.map((doc) => ({ ...doc, doctype: "QaDashPlain" })),
+        }),
+      }}
+      navigation={navigation}
+    >
+      <DeskScopeProvider scope={scope}>
+        <DashboardView doctype={doctype} />
+      </DeskScopeProvider>
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+async function kpi(title: string, value: string) {
+  await waitFor(
+    () => {
+      let node: HTMLElement | null = screen.getAllByText(title)[0] ?? null;
+      for (let depth = 0; node && depth < 6; depth += 1) {
+        const text = node.textContent ?? "";
+        if (text !== title && /\d/.test(text.replace(title, ""))) {
+          expect(text.replace(title, "").trim()).toBe(value);
+          return;
+        }
+        node = node.parentElement;
+      }
+      throw new Error(`no value drawn next to ${title}`);
+    },
+    { timeout: 5000 },
+  );
+}
+
+describe("<DashboardView />", () => {
+  it("counts the records in each rolling window", async () => {
+    renderDashboard("QaDash");
+    await kpi("Total QaDash", "5");
+    await kpi("Created (last 30 days)", "2");
+    await kpi("Modified (last 7 days)", "2");
+  });
+
+  it("draws a card per status option that opens the list filtered to it", async () => {
+    const navigation = renderDashboard("QaDash");
+    await kpi("Open", "1");
+    await kpi("Working", "2");
+    await kpi("Done", "2");
+    fireEvent.click(screen.getAllByText("Working")[0] as HTMLElement);
+    expect(navigation.getLocation().path).toBe("/backoffice/qadash");
+    expect(JSON.parse(String(navigation.getLocation().params.f))).toEqual([
+      ["status", "=", "Working"],
+    ]);
+  });
+
+  it("leaves the status cards and chart out for a doctype with no Select field", async () => {
+    renderDashboard("QaDashPlain");
+    await kpi("Total QaDashPlain", "5");
+    expect(screen.queryByText("Working")).toBeNull();
+    expect(screen.queryByText("By Status")).toBeNull();
+  });
+
+  it("ANDs the desk scope into the counts and both charts", async () => {
+    renderDashboard("QaDash", [["owner_name", "=", "ana"]]);
+    await kpi("Total QaDash", "2");
+    await kpi("Created (last 30 days)", "0");
+    await kpi("Done", "2");
+    await kpi("Working", "0");
+    expect(await screen.findByText("No recent activity", {}, { timeout: 5000 })).toBeTruthy();
+    await waitFor(() => expect(screen.getAllByText("Done")).toHaveLength(2), { timeout: 5000 });
+    expect(screen.getAllByText("Working")).toHaveLength(1);
+  });
+});

package/src/views/DashboardView.tsx

@@ -81,7 +81,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
   const paths = useBackofficePaths();
   const connection = useViewConnection();
   const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
-  const weekly = useWeeklyCreated(connection, doctype);
+  const weekly = useWeeklyCreated(connection, doctype, WEEKS_WINDOW, deskScope);
   // Rolling-window anchors resolve once per mount so the aggregate query
   // identities stay stable across re-renders (no refetch churn).
   const [anchors] = useState(() => ({
@@ -109,7 +109,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
                 value: 0,
                 format: "number",
               }}
-              dataSource={{ doctype }}
+              dataSource={{ doctype, ...(deskScope.length > 0 && { filters: deskScope }) }}
             />
           </YStack>
           <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
@@ -220,7 +220,11 @@ export function DashboardView({ doctype }: DashboardViewProps) {
                   type: "pie",
                   height: CHART_HEIGHT,
                 }}
-                dataSource={{ doctype, groupBy: statusField.fieldname }}
+                dataSource={{
+                  doctype,
+                  groupBy: statusField.fieldname,
+                  ...(deskScope.length > 0 && { filters: deskScope }),
+                }}
               />
             </YStack>
           )}

package/src/views/ImageView.screen.spec.tsx

@@ -0,0 +1,108 @@
+// The image view (MPO-414): a card per record over the doctype's image field,
+// card press opens the form, the desk scope narrows the grid, and a doctype
+// with no image field gets the unsupported state with a way back to the list.
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { DeskScopeProvider } from "../desk/scope";
+import { createMemoryNavigator, type MemoryNavigator } from "../navigation/navigator";
+import type { FrappeFilters } from "../shared/types";
+import { ImageView } from "./ImageView";
+
+function pokedexMeta(name: string) {
+  return {
+    name,
+    doctype: "DocType",
+    module: "App",
+    title_field: "pokemon_name",
+    image_field: "sprite_front",
+    fields: [
+      { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+      { fieldname: "poke_type", fieldtype: "Data", label: "Type", in_list_view: 1 },
+      { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+    ],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
+const plainMeta = {
+  name: "QaImagePlain",
+  doctype: "DocType",
+  module: "QA",
+  fields: [{ fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 }],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const sprite = "data:image/gif;base64,R0lGODlhAQABAAAAACw=";
+
+const pokemon = [
+  ["bulbasaur", "grass"],
+  ["charmander", "fire"],
+  ["squirtle", "water"],
+].map(([name, type]) => ({
+  name,
+  doctype: "QaImageDex",
+  pokemon_name: name,
+  poke_type: type,
+  sprite_front: sprite,
+}));
+
+let run = 0;
+
+function renderImageView(doctype: string, scope?: FrappeFilters): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://image-view-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({
+          DocType: [pokedexMeta("QaImageDex"), pokedexMeta("QaImageEmpty"), plainMeta],
+          QaImageDex: pokemon,
+          QaImageEmpty: [],
+        }),
+      }}
+      navigation={navigation}
+    >
+      <DeskScopeProvider scope={scope}>
+        <ImageView doctype={doctype} />
+      </DeskScopeProvider>
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+describe("<ImageView />", () => {
+  it("draws a titled card per record and opens the form on press", async () => {
+    const navigation = renderImageView("QaImageDex");
+    expect(
+      (await screen.findByTestId("qaimagedex-name-bulbasaur", {}, { timeout: 5000 })).textContent,
+    ).toBe("bulbasaur");
+    expect(screen.getByTestId("qaimagedex-subtitle-charmander").textContent).toBe("fire");
+    fireEvent.click(screen.getByTestId("qaimagedex-card-squirtle"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaimagedex/squirtle");
+  });
+
+  it("shows only the records inside the desk scope", async () => {
+    renderImageView("QaImageDex", [["poke_type", "=", "fire"]]);
+    await screen.findByTestId("qaimagedex-card-charmander", {}, { timeout: 5000 });
+    expect(screen.queryByTestId("qaimagedex-card-bulbasaur")).toBeNull();
+    expect(screen.queryByTestId("qaimagedex-card-squirtle")).toBeNull();
+  });
+
+  it("says so when an image doctype has no records", async () => {
+    renderImageView("QaImageEmpty");
+    expect(await screen.findByText("No items found", {}, { timeout: 5000 })).toBeTruthy();
+  });
+
+  it("offers the list back when the doctype has no image field", async () => {
+    const navigation = renderImageView("QaImagePlain");
+    expect(await screen.findByText("Image view not available", {}, { timeout: 5000 })).toBeTruthy();
+    expect(screen.getByText("QaImagePlain has no image field.")).toBeTruthy();
+    fireEvent.click(screen.getByText("Back to list"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaimageplain");
+  });
+});

package/src/views/KanbanView.screen.spec.tsx

@@ -0,0 +1,282 @@
+// The kanban view and its board controls (MPO-414): a saved Kanban Board
+// drives the columns, the picker switches and creates boards, a doctype with
+// no board falls back to its Select field, the column "+" prefills the new
+// record, and cards move or get added only as the session's rights allow
+// (MPO-390).
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { KanbanView } from "./KanbanView";
+
+// happy-dom has no layout, so the column virtualizer would draw no cards.
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: (opts: { count: number; estimateSize: () => number }) => {
+    const size = opts.estimateSize();
+    const items = Array.from({ length: opts.count }, (_, index) => ({
+      index,
+      key: String(index),
+      start: index * size,
+      end: (index + 1) * size,
+      size,
+    }));
+    return {
+      getVirtualItems: () => items,
+      getTotalSize: () => opts.count * size,
+      measureElement: () => {},
+      scrollToIndex: () => {},
+    };
+  },
+}));
+
+function taskMeta(name: string, withSelect = true) {
+  return {
+    name,
+    doctype: "DocType",
+    module: "QA",
+    title_field: "subject",
+    fields: [
+      { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+      ...(withSelect
+        ? [
+            {
+              fieldname: "status",
+              fieldtype: "Select",
+              label: "Status",
+              options: "Open\nWorking\nDone",
+              in_list_view: 1,
+            },
+            {
+              fieldname: "priority",
+              fieldtype: "Select",
+              label: "Priority",
+              options: "High\nMedium\nLow",
+              in_list_view: 1,
+            },
+          ]
+        : []),
+    ],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
+const tasks = [
+  ["QABT-001", "triage inbox", "Open", "High"],
+  ["QABT-002", "ship release", "Working", "Medium"],
+  ["QABT-003", "write docs", "Done", "Low"],
+].map(([name, subject, status, priority]) => ({
+  name,
+  doctype: "QaBoardTask",
+  subject,
+  status,
+  priority,
+}));
+
+const savedBoards = [
+  {
+    name: "QA Task Board",
+    doctype: "Kanban Board",
+    kanban_board_name: "QA Task Board",
+    reference_doctype: "QaBoardTask",
+    field_name: "status",
+    columns: [
+      { column_name: "Done", status: "Active", indicator: "Green" },
+      { column_name: "Open", status: "Active", indicator: "Blue" },
+      { column_name: "Working", status: "Active", indicator: "Orange" },
+      { column_name: "Retired", status: "Archived", indicator: "Gray" },
+    ],
+  },
+  {
+    name: "Priority Lane",
+    doctype: "Kanban Board",
+    kanban_board_name: "Priority Lane",
+    reference_doctype: "QaBoardTask",
+    field_name: "priority",
+    columns: [
+      { column_name: "High", status: "Active", indicator: "Red" },
+      { column_name: "Medium", status: "Active", indicator: "Orange" },
+      { column_name: "Low", status: "Active", indicator: "Gray" },
+    ],
+  },
+];
+
+const moveMeta = {
+  name: "Poke Move",
+  doctype: "DocType",
+  title_field: "move_name",
+  fields: [
+    { fieldname: "move_name", fieldtype: "Data", label: "Move Name", in_list_view: 1 },
+    {
+      fieldname: "category",
+      fieldtype: "Select",
+      label: "Category",
+      options: "Physical\nSpecial",
+      in_list_view: 1,
+    },
+  ],
+  permissions: [
+    { role: "Pokemon Editor", read: 1, write: 1, create: 1, delete: 1 },
+    { role: "Guest", read: 1 },
+  ],
+};
+
+let run = 0;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function renderFixtureKanban(doctype: string, board?: string) {
+  run += 1;
+  const fixtures = new InMemoryFixtureProvider({
+    DocType: [taskMeta("QaBoardTask"), taskMeta("QaBoardLoose"), taskMeta("QaBoardNone", false)],
+    "Kanban Board": savedBoards.map((entry) => ({ ...entry })),
+    QaBoardTask: tasks,
+    QaBoardLoose: tasks.map((task) => ({ ...task, doctype: "QaBoardLoose" })),
+  });
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://kanban-view-${run}.spec.test`, fixtures }}
+      navigation={navigation}
+    >
+      <KanbanView doctype={doctype} board={board} />
+    </BackofficeProvider>,
+  );
+  return { navigation, fixtures };
+}
+
+function json(body: unknown) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+function renderBenchKanban(roles: string[]) {
+  run += 1;
+  let rolesAnswered = false;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const method = url.pathname.replace(/^\/api\/method\//, "");
+    if (method === "frappe.auth.get_logged_user") return json({ message: "user@pokemon.test" });
+    if (method === "frappe.core.doctype.user.user.get_roles") {
+      rolesAnswered = true;
+      return json({ message: roles });
+    }
+    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [moveMeta] });
+    if (url.pathname === `/api/resource/${encodeURIComponent("Poke Move")}`) {
+      return json({
+        data: [{ name: "m1", doctype: "Poke Move", move_name: "tackle", category: "Physical" }],
+      });
+    }
+    return json({ data: [], message: [] });
+  });
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://kanban-view-bench-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice")}
+    >
+      <KanbanView doctype="Poke Move" />
+    </BackofficeProvider>,
+  );
+  return { rolesAnswered: () => rolesAnswered };
+}
+
+function draggable(title: string): boolean {
+  return Boolean(screen.getByText(title).closest('[data-kanban-draggable="true"]'));
+}
+
+async function settle(ms = 300) {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+function precedes(first: HTMLElement, second: HTMLElement): boolean {
+  return Boolean(first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING);
+}
+
+describe("<KanbanView />", () => {
+  it("draws the saved board's active columns in its order and opens a card's form", async () => {
+    const { navigation } = renderFixtureKanban("QaBoardTask");
+    const card = await screen.findByText("ship release", {}, { timeout: 5000 });
+    const done = screen.getByLabelText("Add card to Done");
+    const open = screen.getByLabelText("Add card to Open");
+    const working = screen.getByLabelText("Add card to Working");
+    expect(precedes(done, open) && precedes(open, working)).toBe(true);
+    expect(screen.queryByLabelText("Add card to Retired")).toBeNull();
+    fireEvent.click(card);
+    await waitFor(() =>
+      expect(navigation.getLocation().path).toBe("/backoffice/qaboardtask/QABT-002"),
+    );
+  });
+
+  it("opens a new record prefilled with the column from its +", async () => {
+    const { navigation } = renderFixtureKanban("QaBoardTask");
+    fireEvent.click(await screen.findByLabelText("Add card to Working", {}, { timeout: 5000 }));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaboardtask/new");
+    expect(JSON.parse(String(navigation.getLocation().params.d))).toEqual({ status: "Working" });
+  });
+
+  it("switches to another saved board from the picker", async () => {
+    const { navigation } = renderFixtureKanban("QaBoardTask");
+    fireEvent.click(await screen.findByLabelText("Switch board", {}, { timeout: 5000 }));
+    fireEvent.click(await screen.findByText("Priority Lane", {}, { timeout: 5000 }));
+    await waitFor(() => expect(navigation.getLocation().params.board).toBe("Priority Lane"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaboardtask/view/kanban");
+  });
+
+  it("creates a board from the picker's New board dialog and switches to it", async () => {
+    const { navigation, fixtures } = renderFixtureKanban("QaBoardTask");
+    fireEvent.click(await screen.findByLabelText("Switch board", {}, { timeout: 5000 }));
+    fireEvent.click(await screen.findByText("New board…", {}, { timeout: 5000 }));
+    expect(await screen.findByText("New kanban board", {}, { timeout: 5000 })).toBeTruthy();
+    fireEvent.change(screen.getByRole("textbox", { name: /board name/i }), {
+      target: { value: "Release Train" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Create board" }));
+    await waitFor(() => expect(navigation.getLocation().params.board).toBe("Release Train"));
+    const created = await fixtures.getDoc("Kanban Board", "Release Train");
+    expect(created).toMatchObject({ reference_doctype: "QaBoardTask", field_name: "status" });
+  });
+
+  it("falls back to the status Select with a create-board call to action", async () => {
+    renderFixtureKanban("QaBoardLoose");
+    expect(
+      await screen.findByText("No kanban board configured", {}, { timeout: 5000 }),
+    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Create board" })).toBeTruthy();
+    expect(await screen.findByLabelText("Add card to Open", {}, { timeout: 5000 })).toBeTruthy();
+  });
+
+  it("offers the list back when there is no board and no Select field", async () => {
+    const { navigation } = renderFixtureKanban("QaBoardNone");
+    expect(
+      await screen.findByText("No Select field to board by", {}, { timeout: 5000 }),
+    ).toBeTruthy();
+    fireEvent.click(screen.getByText("Back to list"));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaboardnone");
+  });
+
+  it("lets an editor move and add cards on a live bench", async () => {
+    const bench = renderBenchKanban(["Pokemon Editor", "Guest"]);
+    await screen.findByText("tackle", {}, { timeout: 5000 });
+    await waitFor(() => expect(bench.rolesAnswered()).toBe(true), { timeout: 5000 });
+    await waitFor(() => expect(draggable("tackle")).toBe(true));
+    expect(screen.getByLabelText("Add card to Physical")).toBeTruthy();
+  });
+
+  it("lets a reader neither move nor add cards on a live bench", async () => {
+    const bench = renderBenchKanban(["Guest"]);
+    await screen.findByText("tackle", {}, { timeout: 5000 });
+    await settle();
+    expect(draggable("tackle")).toBe(false);
+    expect(screen.queryByLabelText("Add card to Physical")).toBeNull();
+    expect(bench.rolesAnswered()).toBe(true);
+  });
+});

package/src/views/KanbanView.tsx

@@ -16,6 +16,8 @@
 import { Alert, Button, Text, XStack, YStack, notify } from "@multiplatform.one/components";
 import {
   FrappeKanban,
+  useDocRights,
+  useFrappeConfig,
   type FrappeKanbanProps,
   type KanbanColumn,
 } from "@multiplatform.one/frappe-ui";
@@ -117,6 +119,7 @@ export function KanbanView({
   const connection = useViewConnection();
   const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
   const boards = useKanbanBoard(connection, doctype, boardOverride);
+  const { rights } = useDocRights(useFrappeConfig(), meta);
   // Session-scoped grouping-axis override from the picker, keyed by doctype
   // so navigating to another doctype never inherits a stale field.
   const [axisChoice, setAxisChoice] = useState<{ doctype: string; fieldname: string } | null>(null);
@@ -385,13 +388,14 @@ export function KanbanView({
           if (onCardOpen) onCardOpen(doctype, card.name);
           else navigator.navigate(paths.form(doctype, card.name));
         }}
-        readOnly={readOnly}
+        readOnly={readOnly || !rights.write}
         // Desk parity: the per-column "+" (anchored in the column header by
         // FrappeKanban) carries the clicked column into the create form —
         // the active grouping axis is prefilled via the `?d=` param on the
         // /new route (consumed by NewDocRouteScreen → createPrefill). The
-        // newDoc capability gates the affordance.
-        enableCardCreation={newDoc.enabled}
+        // newDoc capability and the session's create right gate the
+        // affordance.
+        enableCardCreation={newDoc.enabled && rights.create}
         onCreateCard={(columnValue) =>
           navigator.navigate(paths.newDoc(doctype, { [statusField]: columnValue }))
         }