@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/form/FormSidebarPanel.tsx

@@ -416,7 +416,7 @@ export function FormSidebarPanel({
       icon: <TagIcon size={iconSize} color={iconColor} />,
       content: (
         <Tags
-          compact
+          size="$3"
           tags={tags.map((tag) => ({ id: tag, label: tag }))}
           suggestions={tagSuggestions.map((tag) => ({ id: tag, label: tag }))}
           disabled={busy}

package/src/form/FormTimeline.tsx

@@ -481,7 +481,6 @@ export function FormTimeline({
           size="$2"
           name={displayName}
           src={entry.image}
-          fallbackBackgroundColor="$accentBackground"
         />
         <YStack flex={1} gap="$1">
           <XStack gap="$2" alignItems="center">

package/src/form/FormToolbar.screen.spec.tsx

@@ -3,7 +3,7 @@
 // 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 { afterEach, describe, expect, it, vi } from "vitest";
 import {
   FormToolbar,
   resolveIndicator,
@@ -11,6 +11,21 @@ import {
   type FormToolbarProps,
 } from "./FormToolbar";
 
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useLayoutSizeClass: () => layout.size };
+});
+afterEach(() => {
+  layout.size = "wide";
+});
+
+async function selectAction(label: string) {
+  fireEvent.click(screen.getByTestId("form-toolbar-menu"));
+  const item = await screen.findByRole("menuitem", { name: new RegExp(label) });
+  fireEvent.click(item);
+}
+
 function props(overrides: Partial<FormToolbarProps> = {}): FormToolbarProps {
   return {
     breadcrumbs: [
@@ -22,6 +37,7 @@ function props(overrides: Partial<FormToolbarProps> = {}): FormToolbarProps {
     title: "SO-0001",
     indicator: "draft",
     isSaving: false,
+    isDirty: false,
     canSave: true,
     canSubmit: true,
     canCancel: false,
@@ -42,43 +58,74 @@ function visiblePrimaries(): string[] {
 }
 
 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.each(["wide", "compact"])(
+    "keeps Save beside the trailing menu only while dirty (%s)",
+    (size) => {
+      layout.size = size;
+      const onSave = vi.fn();
+      const menuItems: FormToolbarMenuItem[] = [
+        { key: "reload", label: "Reload", onSelect: vi.fn() },
+      ];
+      const { rerender } = renderWithProviders(
+        <FormToolbar {...props({ indicator: "saved", canSubmit: false, menuItems, onSave })} />,
+      );
+      expect(visiblePrimaries()).toEqual([]);
+      const header = screen.getByTestId("form-toolbar");
+      expect(header.contains(screen.getByTestId("form-toolbar-menu"))).toBe(true);
+      expect(screen.queryByTestId("form-toolbar-footer")).toBeNull();
+      rerender(
+        <FormToolbar
+          {...props({ indicator: "notSaved", isDirty: true, canSubmit: false, menuItems, onSave })}
+        />,
+      );
+      const save = screen.getByTestId("form-toolbar-save");
+      const menu = screen.getByTestId("form-toolbar-menu");
+      expect(header.contains(save)).toBe(true);
+      expect(save.compareDocumentPosition(menu) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      fireEvent.click(save);
+      expect(onSave).toHaveBeenCalledTimes(1);
+      rerender(
+        <FormToolbar {...props({ indicator: "saved", canSubmit: false, menuItems, onSave })} />,
+      );
+      expect(visiblePrimaries()).toEqual([]);
+    },
+  );
+
+  it("keeps a new unchanged form free of Save", () => {
+    renderWithProviders(<FormToolbar {...props({ indicator: "new", canSubmit: false })} />);
+    expect(visiblePrimaries()).toEqual([]);
   });
 
-  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(
+  it.each([
+    ["submit", "draft"],
+    ["cancel", "submitted"],
+    ["amend", "cancelled"],
+  ] as const)("runs %s from the action menu", async (action, indicator) => {
+    const onAction = vi.fn();
+    renderWithProviders(
       <FormToolbar
-        {...props({ indicator: "cancelled", canSave: false, canSubmit: false, canAmend: true })}
+        {...props({
+          indicator,
+          canSave: false,
+          canSubmit: action === "submit",
+          canCancel: action === "cancel",
+          canAmend: action === "amend",
+          onSubmit: onAction,
+          onCancel: onAction,
+          onAmend: onAction,
+        })}
       />,
     );
-    expect(visiblePrimaries()).toEqual(["amend"]);
+    expect(visiblePrimaries()).toEqual([]);
+    await selectAction(action[0].toUpperCase() + action.slice(1));
+    expect(onAction).toHaveBeenCalledTimes(1);
   });
 
   it("draws no primary a reader's rights withhold", () => {
     renderWithProviders(
-      <FormToolbar {...props({ indicator: "notSaved", canSave: false, canSubmit: false })} />,
+      <FormToolbar
+        {...props({ indicator: "notSaved", isDirty: true, canSave: false, canSubmit: false })}
+      />,
     );
     expect(visiblePrimaries()).toEqual([]);
   });
@@ -133,6 +180,20 @@ describe("FormToolbar", () => {
     expect(onDuplicate).toHaveBeenCalledTimes(1);
   });
 
+  it("keeps compact record navigation in the menu beside Save", async () => {
+    layout.size = "compact";
+    const onNextDoc = vi.fn();
+    renderWithProviders(
+      <FormToolbar
+        {...props({ isDirty: true, indicator: "notSaved", onNextDoc, prevDocDisabled: true })}
+      />,
+    );
+    expect(screen.queryByTestId("form-toolbar-next")).toBeNull();
+    expect(screen.getByTestId("form-toolbar-save")).toBeTruthy();
+    await selectAction("Next document");
+    expect(onNextDoc).toHaveBeenCalledTimes(1);
+  });
+
   it("pages prev/next and disables the boundary arrow instead of hiding it", () => {
     const onPrevDoc = vi.fn();
     const onNextDoc = vi.fn();

package/src/form/FormToolbar.tsx

@@ -1,28 +1,10 @@
-/**
- * Desk-capability form toolbar: breadcrumbs → title + status indicator pill +
- * header cluster slot (MOD-07 — assignees/like/follow readout) → primary
- * actions (Save / Submit / Cancel / Amend per the docstatus lifecycle),
- * standalone Refresh, and the ⋯ menu. Presentational — every action is a
- * callback from DocFormScreen (which owns confirms, dialogs, and RPCs).
- *
- * Emphasis budget (LC-05): the current lifecycle primary (Save or Submit)
- * is THE single accent-solid action; everything else stays neutral, and
- * Cancel carries the error intent outlined (destructive, not primary).
- *
- * Indicator parity follows desk's `frappe.get_indicator` order:
- * unsaved → meta.states row (by status value) → docstatus defaults →
- * status-field value with a guessed color → Draft (submittable) → no pill.
- *
- * Compact viewports (< 640, `useLayoutSizeClass`) collapse secondary
- * lifecycle actions and the standalone Refresh into the ⋯ menu; one primary
- * button stays visible.
- */
-
 import {
+  Avatar,
   Breadcrumbs,
   Chip,
   DropdownMenu,
   H1,
+  H2,
   XStack,
   YStack,
   type BreadcrumbItem,
@@ -41,6 +23,7 @@ import {
   EnvelopeIcon,
   FloppyDiskIcon,
   LinkIcon,
+  LayoutIcon,
   ListBulletsIcon,
   MagnifyingGlassIcon,
   PencilSimpleIcon,
@@ -203,7 +186,8 @@ export interface FormToolbarMenuItem {
     | "new"
     | "list"
     | "desk"
-    | "jump";
+    | "jump"
+    | "layout";
   destructive?: boolean;
   disabled?: boolean;
   disabledReason?: string;
@@ -218,6 +202,7 @@ export interface FormToolbarProps {
   /** Hide the status chip entirely (e.g. meta still loading). */
   showIndicator?: boolean;
   isSaving: boolean;
+  isDirty: boolean;
   /**
    * MOD-07 header cluster (assignee avatars / like / follow) rendered right
    * after the status chip. The toolbar stays presentational — the cluster
@@ -234,17 +219,6 @@ export interface FormToolbarProps {
   onCancel: () => void;
   onAmend: () => void;
   menuItems: FormToolbarMenuItem[];
-  /**
-   * Standalone Refresh button (desk parity). Falls back to the `reload`
-   * menu item's action so existing consumers get the button for free.
-   */
-  onReload?: () => void;
-  /**
-   * "Open in Desk" hop — the document's native desk counterpart. Renders a
-   * standalone icon button on wide viewports (narrow keeps the ⋯ menu's
-   * `desk` entry as the only affordance, like Refresh).
-   */
-  onOpenDesk?: () => void;
   /**
    * Prev/next document pager (desk ‹ › parity) — pages through the list
    * order the user came from. The pair renders only when the composing
@@ -256,6 +230,8 @@ export interface FormToolbarProps {
   onNextDoc?: () => void;
   prevDocDisabled?: boolean;
   nextDocDisabled?: boolean;
+  /** Absolute URL of the document image (meta.image_field), compact header only. */
+  image?: string;
 }
 
 const MENU_ICONS = {
@@ -270,6 +246,7 @@ const MENU_ICONS = {
   list: ListBulletsIcon,
   desk: ArrowSquareOutIcon,
   jump: MagnifyingGlassIcon,
+  layout: LayoutIcon,
 } as const;
 
 type LifecycleAction = "save" | "submit" | "cancel" | "amend";
@@ -281,6 +258,7 @@ export function FormToolbar({
   indicator,
   showIndicator = true,
   isSaving,
+  isDirty,
   cluster,
   canSave,
   canSubmit,
@@ -291,12 +269,11 @@ export function FormToolbar({
   onCancel,
   onAmend,
   menuItems,
-  onReload,
-  onOpenDesk,
   onPrevDoc,
   onNextDoc,
   prevDocDisabled,
   nextDocDisabled,
+  image,
 }: FormToolbarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -318,10 +295,6 @@ export function FormToolbar({
         : { label: indicatorLabels[indicator], color: INDICATOR_COLORS[indicator] }
       : indicator;
 
-  // Desk primary-action lifecycle: dirty/new → Save; saved submittable
-  // draft → Submit; docstatus 1 → Cancel; docstatus 2 → Amend.
-  const isDirtyish =
-    typeof indicator === "string" && (indicator === "notSaved" || indicator === "new");
   const actionLabels: Record<LifecycleAction, string> = {
     save: isSaving ? t("saving", "Saving…") : t("save", "Save"),
     submit: t("submit", "Submit"),
@@ -334,18 +307,11 @@ export function FormToolbar({
     cancel: onCancel,
     amend: onAmend,
   };
-  // Ordered by primacy: the first visible action is THE primary on narrow.
-  const visibleActions: LifecycleAction[] = [
-    ...(canSave && (isDirtyish || !canSubmit) ? (["save"] as const) : []),
-    ...(canSubmit && !isDirtyish ? (["submit"] as const) : []),
+  const collapsedActions: LifecycleAction[] = [
+    ...(canSubmit && !isDirty ? (["submit"] as const) : []),
     ...(canCancel ? (["cancel"] as const) : []),
     ...(canAmend ? (["amend"] as const) : []),
   ];
-  const buttonActions = isNarrow ? visibleActions.slice(0, 1) : visibleActions;
-  const collapsedActions = isNarrow ? visibleActions.slice(1) : [];
-
-  const reload = onReload ?? menuItems.find((item) => item.key === "reload")?.onSelect;
-
   const actionEntryIcons: Record<LifecycleAction, typeof CheckCircleIcon> = {
     save: FloppyDiskIcon,
     submit: CheckCircleIcon,
@@ -353,7 +319,6 @@ export function FormToolbar({
     amend: CopyIcon,
   };
   const entries: DropdownMenuEntry[] = [
-    // Narrow viewports: secondary lifecycle actions fold into the menu.
     ...collapsedActions.map((action) => {
       const Icon = actionEntryIcons[action];
       return {
@@ -367,6 +332,27 @@ export function FormToolbar({
       };
     }),
     ...(collapsedActions.length > 0 && menuItems.length > 0 ? [{ separator: true as const }] : []),
+    ...(isNarrow && (onPrevDoc || onNextDoc)
+      ? [
+          {
+            key: "__previous-document",
+            label: t("prevDoc", "Previous document"),
+            icon: <CaretLeftIcon size={iconSize} />,
+            disabled: prevDocDisabled || !onPrevDoc,
+            disabledReason: t("noPrevDoc", "No previous document"),
+            onSelect: onPrevDoc,
+          },
+          {
+            key: "__next-document",
+            label: t("nextDoc", "Next document"),
+            icon: <CaretRightIcon size={iconSize} />,
+            disabled: nextDocDisabled || !onNextDoc,
+            disabledReason: t("noNextDoc", "No next document"),
+            onSelect: onNextDoc,
+          },
+          ...(menuItems.length ? [{ separator: true as const }] : []),
+        ]
+      : []),
     ...menuItems.map((item) => ({
       key: item.key,
       label: item.label,
@@ -383,6 +369,68 @@ export function FormToolbar({
     })),
   ];
 
+  const menuButton =
+    entries.length > 0 ? (
+      <DropdownMenu items={entries} placement="bottom-end">
+        <Button
+          size={knobProps.sizeToken}
+          {...(isNarrow ? {} : { outlined: true })}
+          icon={<DotsThreeIcon size={iconSize} weight="bold" />}
+          aria-label={t("menu", "Menu")}
+          testID="form-toolbar-menu"
+        />
+      </DropdownMenu>
+    ) : null;
+
+  const saveButton =
+    canSave && isDirty ? (
+      <Button
+        size={knobProps.sizeToken}
+        accent
+        icon={<FloppyDiskIcon size={iconSize} />}
+        loading={isSaving}
+        onPress={onSave}
+        testID="form-toolbar-save"
+      >
+        {actionLabels.save}
+      </Button>
+    ) : null;
+
+  if (isNarrow) {
+    return (
+      <XStack
+        alignItems="center"
+        gap="$3"
+        {...knobProps.panelPadding}
+        paddingBottom={0}
+        testID="form-toolbar"
+      >
+        {image ? (
+          <Avatar src={image} name={title} circular={false} size="$6" flexShrink={0} />
+        ) : null}
+        <YStack flex={1} minWidth={0} gap="$1">
+          <H2 color="$color12" numberOfLines={1} margin={0}>
+            {title}
+          </H2>
+          {(showIndicator && chip) || cluster ? (
+            <XStack alignItems="center" gap="$2" flexWrap="wrap">
+              {showIndicator && chip && (
+                <Chip size="$2" variant="subtle" color={chip.color}>
+                  {chip.label}
+                </Chip>
+              )}
+              {cluster}
+            </XStack>
+          ) : null}
+        </YStack>
+        <XStack alignItems="center" gap="$2" flexShrink={0}>
+          {saveButton}
+          {menuButton}
+        </XStack>
+      </XStack>
+    );
+  }
+
   return (
     <YStack {...knobProps.gap} {...knobProps.panelPadding} paddingBottom={0} testID="form-toolbar">
       <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />
@@ -438,90 +486,8 @@ export function FormToolbar({
               />
             </XStack>
           )}
-          {onOpenDesk && !isNarrow && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<ArrowSquareOutIcon size={iconSize} />}
-              aria-label={t("openInDesk", "Open in Desk")}
-              onPress={onOpenDesk}
-              testID="form-toolbar-desk"
-            />
-          )}
-          {reload && !isNarrow && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<ArrowCounterClockwiseIcon size={iconSize} />}
-              aria-label={t("reloadDoc", "Reload")}
-              onPress={reload}
-              testID="form-toolbar-reload"
-            />
-          )}
-          {entries.length > 0 && (
-            <DropdownMenu items={entries} placement="bottom-end">
-              <Button
-                size={knobProps.sizeToken}
-                outlined
-                icon={<DotsThreeIcon size={iconSize} weight="bold" />}
-                aria-label={t("menu", "Menu")}
-                testID="form-toolbar-menu"
-              />
-            </DropdownMenu>
-          )}
-          {buttonActions.includes("cancel") && (
-            <Button
-              size={knobProps.sizeToken}
-              error
-              outlined
-              actionRole="secondary"
-              icon={<ProhibitIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onCancel}
-              testID="form-toolbar-cancel"
-            >
-              {actionLabels.cancel}
-            </Button>
-          )}
-          {buttonActions.includes("amend") && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<CopyIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onAmend}
-              testID="form-toolbar-amend"
-            >
-              {actionLabels.amend}
-            </Button>
-          )}
-          {/* LC-05 / R-3: the lifecycle primary (Submit or Save — mutually
-              exclusive per the visibleActions gate) is the single
-              accent-solid action on the screen. */}
-          {buttonActions.includes("submit") && (
-            <Button
-              size={knobProps.sizeToken}
-              accent
-              icon={<CheckCircleIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onSubmit}
-              testID="form-toolbar-submit"
-            >
-              {actionLabels.submit}
-            </Button>
-          )}
-          {buttonActions.includes("save") && (
-            <Button
-              size={knobProps.sizeToken}
-              accent
-              icon={<FloppyDiskIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onSave}
-              testID="form-toolbar-save"
-            >
-              {actionLabels.save}
-            </Button>
-          )}
+          {saveButton}
+          {menuButton}
         </XStack>
       </XStack>
     </YStack>

package/src/formBuilder/DoctypePicker.tsx

@@ -0,0 +1,72 @@
+import {
+  AsyncBoundary,
+  AsyncSkeleton,
+  Button,
+  EmptyState,
+  Heading,
+  YStack,
+} from "@multiplatform.one/components";
+import { Combobox, Input } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAwesomebarCatalog } from "../chrome/awesomebar-data";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+export function DoctypePicker() {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const { catalog, error } = useAwesomebarCatalog();
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const [name, setName] = useState("");
+  const open = (doctype: string) => {
+    if (doctype.trim()) navigator.navigate(paths.formBuilder(doctype.trim()));
+  };
+  return (
+    <YStack
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      minWidth={0}
+      testID="form-builder-picker"
+    >
+      <Heading {...knobProps.pageTitle} {...knobProps.heading}>
+        {t("formBuilder.title", "Customize Form")}
+      </Heading>
+      <AsyncBoundary
+        loading={!catalog && !error ? <AsyncSkeleton layout="generic" /> : false}
+        error={
+          error
+            ? t(
+                "formBuilder.catalogError",
+                "The DocType catalog could not be loaded. Enter a name below.",
+              )
+            : undefined
+        }
+        empty={
+          catalog && !catalog.doctypes.length ? (
+            <EmptyState title={t("formBuilder.noDoctypes", "No DocTypes available")} />
+          ) : (
+            false
+          )
+        }
+      >
+        {catalog?.doctypes.length ? (
+          <Combobox
+            label={t("formBuilder.doctype", "DocType")}
+            options={catalog.doctypes.map((doctype) => ({ value: doctype, label: doctype }))}
+            value=""
+            onChange={(value) => open(String(value))}
+          />
+        ) : null}
+      </AsyncBoundary>
+      <Input
+        label={t("formBuilder.typedDoctype", "DocType name")}
+        value={name}
+        onChangeText={setName}
+      />
+      <Button onPress={() => open(name)}>{t("formBuilder.open", "Open form builder")}</Button>
+    </YStack>
+  );
+}