@multiplatform.one/backoffice 6.4.3 → 6.7.0

package/src/form/FormConnections.tsx

@@ -0,0 +1,234 @@
+// Contract: the desk "Connections" dashboard — linked doctypes (meta.links)
+// grouped with counts; items navigate to filtered lists / linked docs.
+// Keep props stable — form-core imports this.
+import {
+  Button,
+  Card,
+  Chip,
+  EmptyState,
+  Separator,
+  SizableText,
+  Skeleton,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { useDoctypeMeta } from "../shared/useDoctypeMeta";
+import {
+  connectionListHref,
+  formatConnectionCount,
+  groupConnectionLinks,
+  useConnectionCounts,
+  type ConnectionCount,
+  type ConnectionGroup,
+  type ConnectionLink,
+} from "./connections-data";
+
+export interface FormConnectionsProps {
+  doctype: string;
+  name: string;
+  meta?: DoctypeMeta;
+}
+
+interface ConnectionRowProps {
+  link: ConnectionLink;
+  docname: string;
+  count?: ConnectionCount;
+  countsLoading: boolean;
+}
+
+function ConnectionRow({ link, docname, count, countsLoading }: ConnectionRowProps) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const countText = formatConnectionCount(count?.count);
+  const openText = formatConnectionCount(count?.openCount);
+  // Desk parity: an internal link without collected names has nowhere to
+  // navigate (its filter is `name in (...)`), so the row press is disabled.
+  const disabled = link.isChildTable && !count?.names?.length;
+  return (
+    <XStack
+      role="link"
+      aria-label={link.targetDoctype}
+      onPress={
+        disabled
+          ? undefined
+          : () => navigator.navigate(connectionListHref(paths, link, docname, count?.names))
+      }
+      disabled={disabled}
+      cursor={disabled ? "default" : "pointer"}
+      opacity={disabled ? 0.6 : 1}
+      alignItems="center"
+      gap="$2"
+      paddingVertical="$1"
+      paddingHorizontal="$1.5"
+      borderRadius="$2"
+      hoverStyle={disabled ? undefined : { backgroundColor: "$color3" }}
+    >
+      <SizableText
+        size="$3"
+        color={disabled ? "$color10" : "$color12"}
+        numberOfLines={1}
+        flex={1}
+        flexShrink={1}
+      >
+        {link.targetDoctype}
+      </SizableText>
+      {countsLoading ? (
+        <Skeleton variant="rounded" width={28} height={18} />
+      ) : (
+        <>
+          {openText !== undefined && (
+            <Chip size="$2" color="orange">
+              {openText}
+            </Chip>
+          )}
+          {countText !== undefined && (
+            <Chip size="$2" color="gray">
+              {countText}
+            </Chip>
+          )}
+        </>
+      )}
+      <Button
+        circular
+        chromeless
+        size="$2"
+        icon={PlusIcon}
+        aria-label={t("connections.newLinked", "New {{doctype}}", {
+          doctype: link.targetDoctype,
+        })}
+        onPress={(event) => {
+          // The row itself is pressable — don't also open the filtered list.
+          event?.stopPropagation?.();
+          // Desk parity: prefill the back-reference field on the new doc via
+          // `?d=` (desk's route_options). Internal (child-table) links have
+          // no such field — the reference lives in THIS doc's child rows —
+          // so they open blank, as desk does.
+          navigator.navigate(
+            link.isChildTable
+              ? paths.newDoc(link.targetDoctype)
+              : paths.newDoc(link.targetDoctype, { [link.linkFieldname]: docname }),
+          );
+        }}
+      />
+    </XStack>
+  );
+}
+
+interface ConnectionGroupCardProps {
+  group: ConnectionGroup;
+  docname: string;
+  counts: Record<string, ConnectionCount>;
+  countsLoading: boolean;
+}
+
+function ConnectionGroupCard({ group, docname, counts, countsLoading }: ConnectionGroupCardProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  return (
+    <Card flexBasis={240} flexGrow={1} flexShrink={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+        <SizableText size="$4" fontWeight="700">
+          {group.label || t("connections.referenceGroup", "Reference")}
+        </SizableText>
+        <Separator />
+        <YStack>
+          {group.links.map((link) => (
+            <ConnectionRow
+              key={link.targetDoctype}
+              link={link}
+              docname={docname}
+              count={counts[link.targetDoctype]}
+              countsLoading={countsLoading}
+            />
+          ))}
+        </YStack>
+      </YStack>
+    </Card>
+  );
+}
+
+function ConnectionsSkeleton() {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Card flexBasis={240} flexGrow={1} flexShrink={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+        <Skeleton width={120} height={18} />
+        <Separator />
+        <YStack gap="$2">
+          <Skeleton width="82%" height={16} />
+          <Skeleton width="64%" height={16} />
+          <Skeleton width="73%" height={16} />
+        </YStack>
+      </YStack>
+    </Card>
+  );
+}
+
+export function FormConnections({ doctype, name, meta: metaProp }: FormConnectionsProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  // form-core usually passes meta; fetch it only when it didn't.
+  const {
+    meta: loadedMeta,
+    loading: metaLoading,
+    error: metaError,
+  } = useDoctypeMeta(metaProp ? undefined : doctype);
+  const meta = metaProp ?? loadedMeta;
+  const groups = useMemo(() => groupConnectionLinks(meta), [meta]);
+  const links = useMemo(() => groups.flatMap((group) => group.links), [groups]);
+  const { counts, loading: countsLoading } = useConnectionCounts(doctype, name, links);
+
+  if (!meta) {
+    if (metaLoading) {
+      return (
+        <XStack flexWrap="wrap" {...knobProps.gap}>
+          <ConnectionsSkeleton />
+          <ConnectionsSkeleton />
+        </XStack>
+      );
+    }
+    return (
+      <EmptyState
+        compact
+        intent="error"
+        title={t("connections.metaError", "Couldn't load connections")}
+        description={metaError?.message}
+      />
+    );
+  }
+
+  if (groups.length === 0) {
+    return (
+      <EmptyState
+        compact
+        title={t("connections.emptyTitle", "No connections")}
+        description={t(
+          "connections.empty",
+          "This document is not connected to any other documents",
+        )}
+      />
+    );
+  }
+
+  return (
+    <XStack flexWrap="wrap" alignItems="flex-start" {...knobProps.gap}>
+      {groups.map((group) => (
+        <ConnectionGroupCard
+          key={group.label ?? ""}
+          group={group}
+          docname={name}
+          counts={counts}
+          countsLoading={countsLoading}
+        />
+      ))}
+    </XStack>
+  );
+}

package/src/form/FormDialogs.tsx

@@ -0,0 +1,172 @@
+/**
+ * Small input dialogs for the form menu / sidebar, built on the catalog
+ * ConfirmDialog (cross-platform alert dialog) with input bodies:
+ *  - RenameDialog  → frappe.rename_doc
+ *  - EmailDialog   → frappe.core.doctype.communication.email.make
+ *  - AssignDialog  → frappe.desk.form.assign_to.add (User link search)
+ */
+
+import { ConfirmDialog, Text, YStack } from "@multiplatform.one/components";
+import { Input, TextArea } from "@multiplatform.one/forms";
+import { Link } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+// ---------------------------------------------------------------------------
+// Rename
+// ---------------------------------------------------------------------------
+
+export interface RenameDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentName: string;
+  onRename: (newName: string) => void;
+}
+
+export function RenameDialog({ open, onOpenChange, currentName, onRename }: RenameDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [value, setValue] = useState(currentName);
+
+  // Reset while closed (ConfirmDialog remounts its body on open, so the
+  // uncontrolled forms Input must see the fresh draft at mount).
+  useEffect(() => {
+    if (!open) setValue(currentName);
+  }, [open, currentName]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("renameTitle", "Rename document")}
+      confirmLabel={t("rename", "Rename")}
+      confirmDisabled={!value.trim() || value.trim() === currentName}
+      confirmDisabledReason={t("renameDisabled", "Enter a different name")}
+      onConfirm={() => onRename(value.trim())}
+    >
+      <YStack {...knobProps.gap}>
+        <Text color="$color11" fontSize="$3">
+          {t("renameBody", "New name for {{name}}:", { name: currentName })}
+        </Text>
+        <Input
+          value={value}
+          onChangeText={setValue}
+          inputProps={{
+            "aria-label": t("newName", "New name"),
+            autoFocus: true,
+          }}
+        />
+      </YStack>
+    </ConfirmDialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Email
+// ---------------------------------------------------------------------------
+
+export interface EmailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultSubject: string;
+  onSend: (args: { recipients: string; subject: string; content: string }) => void;
+}
+
+export function EmailDialog({ open, onOpenChange, defaultSubject, onSend }: EmailDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [recipients, setRecipients] = useState("");
+  const [subject, setSubject] = useState(defaultSubject);
+  const [content, setContent] = useState("");
+
+  // Reset while closed — see RenameDialog.
+  useEffect(() => {
+    if (!open) {
+      setRecipients("");
+      setSubject(defaultSubject);
+      setContent("");
+    }
+  }, [open, defaultSubject]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("emailTitle", "New Email")}
+      confirmLabel={t("send", "Send")}
+      confirmDisabled={!recipients.trim() || !subject.trim()}
+      confirmDisabledReason={t("emailDisabled", "Recipients and subject are required")}
+      onConfirm={() => onSend({ recipients: recipients.trim(), subject: subject.trim(), content })}
+    >
+      <YStack {...knobProps.gap} minWidth={280}>
+        <Input
+          value={recipients}
+          onChangeText={setRecipients}
+          placeholder={t("emailTo", "To (comma-separated emails)")}
+          inputProps={{
+            "aria-label": t("emailTo", "To (comma-separated emails)"),
+            autoFocus: true,
+          }}
+        />
+        <Input
+          value={subject}
+          onChangeText={setSubject}
+          placeholder={t("emailSubject", "Subject")}
+          inputProps={{ "aria-label": t("emailSubject", "Subject") }}
+        />
+        <TextArea
+          value={content}
+          onChangeText={setContent}
+          placeholder={t("emailMessage", "Message")}
+          minRows={4}
+          textAreaProps={{ "aria-label": t("emailMessage", "Message") }}
+        />
+      </YStack>
+    </ConfirmDialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Assign
+// ---------------------------------------------------------------------------
+
+export interface AssignDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAssign: (user: string) => void;
+}
+
+export function AssignDialog({ open, onOpenChange, onAssign }: AssignDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [user, setUser] = useState("");
+
+  useEffect(() => {
+    if (open) setUser("");
+  }, [open]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("assignTitle", "Add assignment")}
+      confirmLabel={t("assign", "Assign")}
+      confirmDisabled={!user}
+      confirmDisabledReason={t("assignDisabled", "Pick a user first")}
+      onConfirm={() => onAssign(user)}
+    >
+      <YStack {...knobProps.gap} minWidth={280}>
+        <Link
+          label={t("assignTo", "Assign to")}
+          doctype="User"
+          value={user}
+          onChange={(value: unknown) =>
+            setUser(value === null || value === undefined ? "" : String(value))
+          }
+        />
+      </YStack>
+    </ConfirmDialog>
+  );
+}

package/src/form/FormErrorBoundary.spec.tsx

@@ -0,0 +1,186 @@
+import React from "react";
+/**
+ * Per-field / per-form error containment specs (backoffice-e2e-verify.md
+ * gap #2): a single field renderer throwing during render must degrade to
+ * an inline honest-error slot — field label + error panel + Retry — while
+ * every sibling field, the toolbar, and the dialog chrome stay alive. The
+ * pre-fix behavior was the route-level error boundary unmounting the whole
+ * desk (the tiptap-v3 TextEditor regression turned "broken editor" into
+ * "blank screen", QuickEntry case included).
+ */
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { FrappeProvider, registerField, type FieldRenderProps } from "@multiplatform.one/frappe-ui";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { QuickEntryDialog } from "../quickEntry/QuickEntryDialog";
+import { DocFormScreen } from "./DocFormScreen";
+
+// ---------------------------------------------------------------------------
+// A registry fieldtype whose renderer throws while `shouldCrash` is true —
+// the exact shape of the tiptap-v3 regression (throw at every mount), with a
+// lever the retry spec can flip to prove recovery-by-remount.
+// ---------------------------------------------------------------------------
+
+let shouldCrash = true;
+
+function CrashProbeField({ label }: FieldRenderProps) {
+  if (shouldCrash) throw new Error("Crash Probe field renderer exploded");
+  return <div data-testid="crash-probe-recovered">{label ?? "recovered"}</div>;
+}
+
+registerField("Crash Probe", CrashProbeField);
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const crashTaskMeta = {
+  name: "Crash Task",
+  doctype: "DocType",
+  module: "Projects",
+  title_field: "subject",
+  fields: [
+    { fieldname: "main_section", fieldtype: "Section Break", label: "Main" },
+    { fieldname: "subject", fieldtype: "Data", label: "Subject", reqd: 1 },
+    { fieldname: "broken_editor", fieldtype: "Crash Probe", label: "Broken Editor" },
+    { fieldname: "notes", fieldtype: "Data", label: "Notes" },
+  ],
+  links: [],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    DocType: [crashTaskMeta],
+    "Crash Task": [
+      {
+        name: "CRASH-0001",
+        doctype: "Crash Task",
+        subject: "Containment subject",
+        notes: "Sibling value",
+        docstatus: 0,
+        owner: "Administrator",
+        modified: "2026-08-12 09:00:00.000000",
+      },
+    ],
+  });
+
+const quickEntryMeta: DoctypeMeta = {
+  name: "Crash Note",
+  module: "Desk",
+  quick_entry: 1,
+  fields: [
+    { fieldname: "title", fieldtype: "Data", label: "Title", reqd: 1 },
+    { fieldname: "boom", fieldtype: "Crash Probe", label: "Boom", allow_in_quick_entry: 1 },
+  ],
+};
+
+// ---------------------------------------------------------------------------
+
+describe("form error containment", () => {
+  let errorSpy: MockInstance;
+  let warnSpy: MockInstance;
+
+  beforeEach(() => {
+    shouldCrash = true;
+    // React logs every caught boundary error; the boundary itself logs the
+    // containment signal. Silence both, then assert on the signal.
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    errorSpy.mockRestore();
+    warnSpy.mockRestore();
+  });
+
+  const containmentLogs = () =>
+    warnSpy.mock.calls.filter(
+      (args) => typeof args[0] === "string" && args[0].includes("form render error contained"),
+    );
+
+  it("DocFormScreen: a crashing field degrades to its inline error slot; siblings stay editable", async () => {
+    renderWithProviders(
+      <FrappeProvider baseURL="http://fixtures.local" fixtures={makeFixtures()}>
+        <DocFormScreen doctype="Crash Task" name="CRASH-0001" />
+      </FrappeProvider>,
+    );
+
+    // The form loaded: the sibling Data field renders the fixture value.
+    const subjectInput = await screen.findByDisplayValue("Containment subject", undefined, {
+      timeout: 10000,
+    });
+
+    // The crashing field is an inline honest-error slot: label + panel + Retry.
+    const slot = await screen.findByTestId("form-field-error-broken_editor");
+    expect(slot.textContent).toContain("Broken Editor");
+    expect(slot.textContent).toContain("This field failed to render");
+    expect(slot.textContent).toContain("Retry");
+    expect(containmentLogs().length).toBeGreaterThan(0);
+
+    // The rest of the form survived: toolbar Save is present, the other
+    // sibling field rendered, and the Subject field still accepts edits.
+    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByDisplayValue("Sibling value")).toBeTruthy();
+    fireEvent.change(subjectInput, { target: { value: "Edited while broken" } });
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("Edited while broken")).toBeTruthy();
+    });
+  });
+
+  it("DocFormScreen: Retry remounts the field — a recovered renderer replaces the slot", async () => {
+    renderWithProviders(
+      <FrappeProvider baseURL="http://fixtures.local" fixtures={makeFixtures()}>
+        <DocFormScreen doctype="Crash Task" name="CRASH-0001" />
+      </FrappeProvider>,
+    );
+
+    const slot = await screen.findByTestId("form-field-error-broken_editor", undefined, {
+      timeout: 10000,
+    });
+    const retry = Array.from(slot.querySelectorAll("button, [role='button']")).find((el) =>
+      el.textContent?.includes("Retry"),
+    );
+    expect(retry).toBeTruthy();
+
+    // Transient crash: the renderer works on the next mount.
+    shouldCrash = false;
+    fireEvent.click(retry as Element);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("crash-probe-recovered")).toBeTruthy();
+    });
+    expect(screen.queryByTestId("form-field-error-broken_editor")).toBeNull();
+  });
+
+  it("QuickEntryDialog: a crashing field keeps the dialog and its footer escape alive", async () => {
+    renderWithProviders(
+      <QuickEntryDialog
+        doctype="Crash Note"
+        open
+        onOpenChange={() => {}}
+        metaOverride={quickEntryMeta}
+      />,
+    );
+
+    // The mini-form rendered inside the dialog (not the route boundary).
+    await screen.findByTestId("quick-entry-form");
+
+    // Crashing field → inline slot; sibling field + footer stay usable.
+    const slot = await screen.findByTestId("form-field-error-boom");
+    expect(slot.textContent).toContain("Boom");
+    expect(slot.textContent).toContain("This field failed to render");
+
+    const titleInput = document.querySelector("input");
+    expect(titleInput).toBeTruthy();
+    fireEvent.change(titleInput as HTMLInputElement, { target: { value: "still typing" } });
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("still typing")).toBeTruthy();
+    });
+
+    expect(screen.getByTestId("quick-entry-create")).toBeTruthy();
+    expect(screen.getByTestId("quick-entry-edit-full-form")).toBeTruthy();
+  });
+});