@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/i18n/en.ts

@@ -7,10 +7,298 @@
  *   i18next.addResourceBundle("en", "backoffice", { shell: { title: "Admin" } }, true, true);
  */
 export const en = {
+  formBuilder: {
+    columnPosition: "{{section}}, column {{number}}",
+    drag: {
+      cancel: "Movement cancelled. {{card}} returned to {{column}}.",
+      lift: "Lifted {{card}} in {{column}}, position {{position}} of {{count}}. Use arrow keys to move, space to drop, escape to cancel.",
+      move: "Moved {{card}} to {{column}}, position {{position}} of {{count}}.",
+      drop: "Dropped {{card}} in {{column}}, position {{position}} of {{count}}.",
+    },
+    untitledSection: "Untitled section",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    moveToSection: "Move to section: {{section}}",
+    delete: "Delete",
+    hide: "Hide",
+    details: "Details",
+    untitledTab: "Untitled tab",
+    addTab: "Add tab",
+    tabProperties: "Tab properties",
+    sectionProperties: "Section properties",
+    columnProperties: "Column properties",
+    addSection: "Add section",
+    emptyTitle: "This form has no fields",
+    emptyDescription: "Add a field to start building the form.",
+    addField: "Add field",
+    addFieldHere: "Add field",
+    addFieldToColumn: "Add field to {{column}}",
+    fieldCount_one: "{{count}} field",
+    fieldCount_other: "{{count}} fields",
+    addColumn: "Add column",
+    removeColumn: "Remove column",
+    addSectionBelow: "Add section below",
+    removeSection: "Remove section",
+    sectionMenu: "Menu for section {{section}}",
+    column: "Column {{number}}",
+    selectNamedField: "Select {{field}}",
+    required: "Required",
+    fieldError: "Field needs attention",
+    fieldMenu: "Menu for {{field}}",
+    editProperties: "Edit properties",
+    hidden: "Hidden",
+    readOnly: "Read Only",
+    dropHere: "Drop a field here",
+    deleteTitle: "Remove this form item?",
+    fieldTypes: "Field types",
+    typeCount_one: "{{count}} type",
+    typeCount_other: "{{count}} types",
+    search: "Search field types",
+    group: "Field group",
+    groups: {
+      all: "All",
+      standard: "Standard",
+      layout: "Layout",
+      advanced: "Advanced",
+    },
+    noTypes: "No matching field types",
+    addType: "Add {{type}} field",
+    noMeta: "No form metadata available",
+    validation: {
+      summary_one: "{{count}} field needs attention.",
+      summary_other: "{{count}} fields need attention.",
+      fieldnameRequired: "A fieldname is required.",
+      invalidFieldname: "Use lowercase letters, digits and underscores, starting with a letter.",
+      duplicateFieldname: "Fieldnames must be unique.",
+      labelRequired: "A label or fieldname is required.",
+      optionsRequired: "Options are required for this field type.",
+    },
+    noConnection: "No Frappe connection is available.",
+    saved: "Form layout saved",
+    saveFailed: "Unable to save the form layout.",
+    home: "Home",
+    title: "Customize Form",
+    customizeMode: "Saves through Customize Form",
+    doctypeMode: "Saves to DocType",
+    goToList: "Go to {{doctype}} list",
+    reload: "Reload",
+    properties: "Field properties",
+    behaviour: "Behaviour",
+    discardTitle: "Discard unsaved changes?",
+    discard: "Discard",
+    catalogError: "The DocType catalog could not be loaded. Enter a name below.",
+    noDoctypes: "No DocTypes available",
+    doctype: "DocType",
+    typedDoctype: "DocType name",
+    open: "Open form builder",
+    selectField: "Select a field to edit its properties",
+    label: "Label",
+    fieldname: "Fieldname",
+    fieldType: "Field Type",
+    optionsLabel: "Options",
+    default: "Default",
+    description: "Description",
+    mandatory: "Mandatory",
+    inListView: "In List View",
+    deleteFieldBody: "This field will be removed when you save.",
+    deleteBreakBody: "Fields will move into the neighbouring layout.",
+    editLayout: "Edit form layout",
+    options: {
+      data: "Optional format, such as Email, Phone or URL.",
+      code: "The syntax language, such as Python or JavaScript.",
+      html: "The HTML content to display.",
+      image: "The fieldname containing the image URL.",
+      currency: "The fieldname containing the currency.",
+      readOnly: "The fieldname whose value is displayed.",
+      link: "The target DocType name.",
+      dynamicLink: "The fieldname of the field containing the target DocType.",
+      table: "The child DocType name.",
+      select: "One option per line.",
+    },
+    fieldtypes: {
+      data: {
+        label: "Data",
+        description: "Single line text",
+      },
+      text: {
+        label: "Text",
+        description: "Multi-line text",
+      },
+      small_text: {
+        label: "Small Text",
+        description: "Short text block",
+      },
+      long_text: {
+        label: "Long Text",
+        description: "Long text block",
+      },
+      text_editor: {
+        label: "Text Editor",
+        description: "Rich text",
+      },
+      int: {
+        label: "Int",
+        description: "Whole number",
+      },
+      float: {
+        label: "Float",
+        description: "Decimal number",
+      },
+      currency: {
+        label: "Currency",
+        description: "Money amount",
+      },
+      percent: {
+        label: "Percent",
+        description: "Percentage",
+      },
+      check: {
+        label: "Check",
+        description: "Yes or no",
+      },
+      select: {
+        label: "Select",
+        description: "Fixed choice list",
+      },
+      link: {
+        label: "Link",
+        description: "Linked document",
+      },
+      date: {
+        label: "Date",
+        description: "Calendar date",
+      },
+      datetime: {
+        label: "Datetime",
+        description: "Date and time",
+      },
+      time: {
+        label: "Time",
+        description: "Time of day",
+      },
+      duration: {
+        label: "Duration",
+        description: "Elapsed time",
+      },
+      attach: {
+        label: "Attach",
+        description: "File upload",
+      },
+      attach_image: {
+        label: "Attach Image",
+        description: "Image upload",
+      },
+      phone: {
+        label: "Phone",
+        description: "Phone number",
+      },
+      password: {
+        label: "Password",
+        description: "Hidden secret",
+      },
+      rating: {
+        label: "Rating",
+        description: "Star rating",
+      },
+      tab_break: {
+        label: "Tab Break",
+        description: "New form tab",
+      },
+      section_break: {
+        label: "Section Break",
+        description: "New section",
+      },
+      column_break: {
+        label: "Column Break",
+        description: "New column",
+      },
+      heading: {
+        label: "Heading",
+        description: "Heading text",
+      },
+      html: {
+        label: "HTML",
+        description: "Static HTML",
+      },
+      image: {
+        label: "Image",
+        description: "Image from a field",
+      },
+      button: {
+        label: "Button",
+        description: "Form action",
+      },
+      fold: {
+        label: "Fold",
+        description: "Fold point",
+      },
+      attachment_gallery: {
+        label: "Attachment Gallery",
+        description: "Attachment gallery",
+      },
+      autocomplete: {
+        label: "Autocomplete",
+        description: "Suggested text",
+      },
+      barcode: {
+        label: "Barcode",
+        description: "Scannable code",
+      },
+      code: {
+        label: "Code",
+        description: "Source code",
+      },
+      color: {
+        label: "Color",
+        description: "Colour picker",
+      },
+      dynamic_link: {
+        label: "Dynamic Link",
+        description: "Link by field",
+      },
+      geolocation: {
+        label: "Geolocation",
+        description: "Map location",
+      },
+      html_editor: {
+        label: "HTML Editor",
+        description: "Editable HTML",
+      },
+      icon: {
+        label: "Icon",
+        description: "Icon picker",
+      },
+      json: {
+        label: "JSON",
+        description: "JSON data",
+      },
+      markdown_editor: {
+        label: "Markdown Editor",
+        description: "Markdown text",
+      },
+      read_only: {
+        label: "Read Only",
+        description: "Display value",
+      },
+      signature: {
+        label: "Signature",
+        description: "Drawn signature",
+      },
+      table: {
+        label: "Table",
+        description: "Child table",
+      },
+      table_multiselect: {
+        label: "Table MultiSelect",
+        description: "Multi-link table",
+      },
+    },
+  },
   shell: {
     title: "Backoffice",
     home: "Home",
     toggleSidebar: "Toggle sidebar",
+    navigation: "Navigation",
   },
   sidebar: {
     private: "Private",
@@ -49,11 +337,12 @@ export const en = {
   },
   userMenu: {
     label: "User menu",
-    sessionUnavailable: "Session not loaded",
+    logIn: "Log in",
+    authFailedTitle: "Account unavailable",
+    close: "Close",
+    authFailed: "Unable to complete sign-in or sign-out. Try again.",
     myProfile: "My Profile",
     mySettings: "My Settings",
-    sessionDefaults: "Session Defaults",
-    sessionDefaultsGap: "Not implemented yet",
     reload: "Reload",
     toggleTheme: "Toggle Theme",
     themeUnavailable: "Theme switching is unavailable on this platform",
@@ -246,6 +535,7 @@ export const en = {
     tags: "Tags",
     titleColumn: "Title",
     tools: {
+      groupBy: "Group by",
       quickFilters: "Quick filters",
       title: "Filter & sort",
     },

package/src/index.ts

@@ -26,6 +26,7 @@ export type {
   BackofficeActionContext,
   BackofficeActions,
   BackofficeAppearance,
+  BackofficeAuth,
   BackofficeConfig,
   BackofficeFrappeConfig,
   BackofficeProviderProps,
@@ -78,6 +79,7 @@ export {
   BACKOFFICE_VIEWS,
   createBackofficePaths,
   formPath,
+  formBuilderPath,
   homePath,
   isBackofficeView,
   listPath,
@@ -524,7 +526,7 @@ export { useAvailableViews, ViewHeader } from "./views/ViewHeader";
 export { useViewLabels, ViewSwitcherMenu } from "./views/ViewSwitcherMenu";
 export type { ViewSwitcherMenuProps } from "./views/ViewSwitcherMenu";
 export { deriveAvailableViews, isViewSupported } from "./views/viewAvailability";
-export type { DeriveAvailableViewsOptions } from "./views/viewAvailability";
+export type { DeriveAvailableViewsOptions, ViewSource } from "./views/viewAvailability";
 export type { ViewHeaderProps } from "./views/ViewHeader";
 export { parseReportFiltersParam, ReportView } from "./views/ReportView";
 export type { ReportViewProps } from "./views/ReportView";
@@ -612,3 +614,58 @@ export { ReportToolbar as DoctypeReportToolbar } from "./report/report-toolbar";
 export type { ReportToolbarProps as DoctypeReportToolbarProps } from "./report/report-toolbar";
 export { DoctypeReportView } from "./report/DoctypeReportView";
 export type { DoctypeReportViewProps } from "./report/DoctypeReportView";
+
+export {
+  fieldtypeCatalog,
+  holdsValue,
+  isBreakType,
+  isColumnBreak,
+  isSectionBreak,
+  isTabBreak,
+  needsOptions,
+  optionsHint,
+  addColumn,
+  addSection,
+  addTab,
+  canDeleteField,
+  fieldLocation,
+  fieldsFromLayout,
+  findField,
+  insertField,
+  layoutFromFields,
+  moveField,
+  moveFieldBy,
+  moveFieldToSection,
+  newFieldFromType,
+  removeColumn,
+  removeField,
+  removeSection,
+  removeTab,
+  FormBuilderScreen,
+  type FormBuilderScreenProps,
+  scrub as formBuilderScrub,
+  tabBoard,
+  updateBreak,
+  updateField,
+  validateLayout,
+  buildCustomizeFormPayload,
+  buildDoctypeSavePayload,
+  formBuilderFields,
+  formBuilderMode,
+  loadFormBuilderSource,
+  parseFormBuilderError,
+  saveFormBuilderLayout,
+  type BuilderFieldtype,
+  type BuilderMessage,
+  type BuilderColumn,
+  type BuilderDocField,
+  type BuilderField,
+  type BuilderFieldLocation,
+  type BuilderLayout,
+  type BuilderSection,
+  type BuilderTab,
+  type FormBuilderMode,
+  type FormBuilderError,
+  type FormBuilderSource,
+  type SaveFormBuilderLayoutOptions,
+} from "./formBuilder";

package/src/list/DoctypeListScreen.guest.screen.spec.tsx

@@ -1,3 +1,4 @@
+import { StrictMode } from "react";
 // LC-96 on the desk list (MPO-477), the list twin of MPO-473. Signed out,
 // pokemon's bench refuses getdoctype, get_count and every desk RPC to Guest
 // while Guest can still read the rows through /api/resource, and the desk list
@@ -10,6 +11,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { DoctypeListScreen } from "./DoctypeListScreen";
+import { ViewHeader } from "../views/ViewHeader";
+import { ImageView } from "../views/ImageView";
+
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
+  useLayoutSizeClass: () => layout.size,
+}));
 
 const doctype = "Pokemon";
 
@@ -29,6 +38,13 @@ const rows = [
     pokemon_name: "Bulbasaur",
     species: "Seed Pokémon",
     base_experience: 64,
+    image: "/files/bulbasaur.png",
+    height: 7,
+    weight: 69,
+    habitat: "grassland",
+    color: "green",
+    ability: "overgrow",
+    title: "Seed monster",
   },
   {
     name: "ivysaur",
@@ -61,6 +77,8 @@ let run = 0;
 let metaAnswer: "refused" | "broken" = "refused";
 let rowsReadable = true;
 let metaReads = 0;
+let countReads = 0;
+let countGate: Promise<void> | undefined;
 
 function json(body: unknown, status = 200) {
   return new Response(JSON.stringify(body), {
@@ -83,9 +101,12 @@ function refused(method: string) {
 
 beforeEach(() => {
   run += 1;
+  layout.size = "wide";
   metaAnswer = "refused";
   rowsReadable = true;
   metaReads = 0;
+  countReads = 0;
+  countGate = undefined;
   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\//, "");
@@ -95,6 +116,11 @@ beforeEach(() => {
         ? refused(method)
         : json({ exc_type: "ValidationError", exception: "Pokemon is being migrated" }, 417);
     }
+    if (method === "frappe.client.get_count") {
+      countReads += 1;
+      await countGate;
+      return refused(method);
+    }
     if (url.pathname.startsWith("/api/method/")) return refused(method);
     if (url.pathname === `/api/resource/${doctype}`) {
       if (!rowsReadable) {
@@ -112,15 +138,16 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-function renderList() {
-  return renderWithProviders(
+function renderList(strict = false) {
+  const tree = (
     <BackofficeProvider
       frappe={{ baseURL: `https://desk-list-guest-${run}.spec.test` }}
       navigation={createMemoryNavigator("/backoffice")}
     >
       <DoctypeListScreen doctype={doctype} />
-    </BackofficeProvider>,
+    </BackofficeProvider>
   );
+  return renderWithProviders(strict ? <StrictMode>{tree}</StrictMode> : tree);
 }
 
 function button(name: string): HTMLElement | undefined {
@@ -130,6 +157,42 @@ function button(name: string): HTMLElement | undefined {
 }
 
 describe("DoctypeListScreen with DocType meta refused (LC-96)", () => {
+  it.each(["wide", "compact"])(
+    "owns a bounded vertical scroll region in %s layout",
+    async (size) => {
+      layout.size = size;
+      renderList();
+      await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+      const region = screen.getByTestId("backoffice-list-scroll");
+      expect(["auto", "scroll"]).toContain(getComputedStyle(region).overflowY);
+      expect(getComputedStyle(region).minHeight).toBe("0px");
+      const content = region.firstElementChild?.firstElementChild as HTMLElement;
+      expect(getComputedStyle(content).flexBasis).toBe("auto");
+      expect(getComputedStyle(content).flexShrink).toBe("0");
+      const heading = screen.queryByRole("heading", { name: doctype });
+      if (size === "wide") expect(heading).toBeTruthy();
+      if (heading) expect(region.contains(heading)).toBe(false);
+    },
+  );
+
+  it("renders headers on wide screens and bounds sampled columns", async () => {
+    renderList();
+    await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+    expect(screen.getAllByRole("columnheader").length).toBeGreaterThan(0);
+    expect(screen.queryByText("/files/bulbasaur.png")).toBeNull();
+    expect(screen.queryByText("overgrow")).toBeNull();
+    expect(screen.getByText("Seed monster")).toBeTruthy();
+  });
+
+  it("keeps compact rows in a bounded document list", async () => {
+    layout.size = "compact";
+    renderList();
+    await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+    expect(screen.queryAllByRole("columnheader")).toEqual([]);
+    expect(screen.queryByText("/files/bulbasaur.png")).toBeNull();
+    expect(screen.queryByText("overgrow")).toBeNull();
+  });
+
   it("lists the rows Guest can read, laid out from a record's own fields", async () => {
     renderList();
     await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
@@ -154,7 +217,7 @@ describe("DoctypeListScreen with DocType meta refused (LC-96)", () => {
     const views = Array.from(document.querySelectorAll('[role="menuitemcheckbox"]')).map((node) =>
       node.textContent?.trim(),
     );
-    expect(views).toEqual(["List", "Report"]);
+    expect(views).toEqual(["List", "Report", "Image"]);
   });
 
   it("says the reader can't open the list when no row is readable, with no retry", async () => {
@@ -179,3 +242,80 @@ describe("DoctypeListScreen with DocType meta refused (LC-96)", () => {
     await waitFor(() => expect(metaReads).toBe(2), settle);
   });
 });
+
+it("requests one count for the list filter state, including strict effect replay", async () => {
+  renderList(true);
+  await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+  expect(countReads).toBe(1);
+});
+
+it("renders rows before a slow count settles", async () => {
+  let release!: () => void;
+  countGate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  try {
+    renderList();
+    await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+    expect(countReads).toBe(1);
+  } finally {
+    release();
+  }
+});
+
+it.each(["report", "image", "dashboard"] as const)(
+  "offers the same Guest views from %s",
+  async (view) => {
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: `https://guest-header-${run}.spec.test` }}
+        navigation={createMemoryNavigator("/backoffice")}
+      >
+        <ViewHeader doctype={doctype} view={view} />
+      </BackofficeProvider>,
+    );
+    fireEvent.click(await screen.findByTestId("list-view-switcher", {}, settle));
+    await waitFor(() => {
+      const views = Array.from(document.querySelectorAll('[role="menuitemcheckbox"]')).map((node) =>
+        node.textContent?.trim(),
+      );
+      expect(views).toEqual(["List", "Report", "Image"]);
+    }, settle);
+  },
+);
+
+it("renders Guest image cards from readable records when metadata is refused", async () => {
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://guest-image-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice")}
+    >
+      <ImageView doctype={doctype} />
+    </BackofficeProvider>,
+  );
+  expect(await screen.findByTestId("pokemon-card-bulbasaur", {}, settle)).toBeTruthy();
+  expect(screen.queryByText("Couldn't load this view")).toBeNull();
+  const image = screen.getByTestId("pokemon-card-bulbasaur").querySelector("img")!;
+  expect(image.getAttribute("src")).toContain("/files/bulbasaur.png");
+});
+
+it("keeps a denied Image read distinct from a broken metadata request", async () => {
+  rowsReadable = false;
+  const renderImage = () =>
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: `https://guest-image-state-${run}.spec.test` }}
+        navigation={createMemoryNavigator("/backoffice")}
+      >
+        <ImageView doctype={doctype} />
+      </BackofficeProvider>,
+    );
+  const denied = renderImage();
+  expect(await screen.findByText("You can't open the Pokemon image view", {}, settle)).toBeTruthy();
+  denied.unmount();
+  run += 1;
+  metaAnswer = "broken";
+  renderImage();
+  expect(await screen.findByText("Couldn't load this view", {}, settle)).toBeTruthy();
+  expect(screen.getByText("Pokemon is being migrated")).toBeTruthy();
+});