@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/src/form/FormErrorBoundary.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+/**
+ * Render-error containment for the backoffice form surfaces.
+ *
+ * Before this boundary existed, a single field renderer throwing during
+ * render (the tiptap-v3 TextEditor regression, any registry adapter bug)
+ * escaped to the host's ROUTE-level error boundary and unmounted the entire
+ * desk — list chrome included in the QuickEntry-dialog case
+ * (p-results/backoffice-e2e-verify.md gap #2). Desk parity is per-field
+ * degradation: one broken field renders an inline honest-error slot (field
+ * label + error panel + retry, DG-ST-01) while every sibling field, the
+ * toolbar, sidebar, and timeline stay alive and interactive.
+ *
+ * Two granularities, both composed from the same class:
+ *   - per field   — `wrapFieldWithErrorBoundary` rides SchemaForm's
+ *                   `renderFieldWrapper` bridge, so registry defaults,
+ *                   overrides, and the unsupported-type fallback are all
+ *                   contained without re-implementing the render path;
+ *   - per surface — DocFormScreen wraps each body tab's SchemaForm and the
+ *                   collaboration sidebar blocks; QuickEntryDialog wraps its
+ *                   mini-form (the dialog footer with "Edit Full Form"
+ *                   survives, so the desk-routing escape stays reachable).
+ *
+ * Follows the house ErrorBoundary primitive's shape
+ * (public/components/src/ErrorBoundary — class boundary, retry resets
+ * state); the fallback here additionally carries the field label and the
+ * AsyncBoundary error chrome, which the house primitive's fixed fallback
+ * cannot express. Retry honestly re-attempts: a deterministic crash lands
+ * back in the slot (never the blank route), a transient one recovers.
+ */
+import { AsyncBoundary, Text, YStack } from "@multiplatform.one/components";
+import type { FieldSchema } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+const logger = console;
+
+export interface FormErrorBoundaryProps {
+  /**
+   * Label rendered above the error panel (field slot order: Label → Error)
+   * so the user still knows WHICH field is broken.
+   */
+  label?: string;
+  /** Error panel title; defaults to the field-scope copy. */
+  errorTitle?: string;
+  /** testID for the fallback slot (children render untouched). */
+  testID?: string;
+  children?: ReactNode;
+}
+
+interface FormErrorBoundaryState {
+  error: Error | undefined;
+  /** Bumped on retry so the children subtree remounts from scratch. */
+  resetNonce: number;
+}
+
+function FormErrorFallback({
+  label,
+  errorTitle,
+  error,
+  onRetry,
+  testID,
+}: {
+  label?: string;
+  errorTitle?: string;
+  error: Error;
+  onRetry: () => void;
+  testID?: string;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack {...knobProps.gap} minWidth={0} testID={testID}>
+      {label ? (
+        <Text fontSize="$3" fontWeight="600" color="$color11" numberOfLines={1}>
+          {label}
+        </Text>
+      ) : null}
+      <AsyncBoundary
+        compact
+        error={error}
+        onRetry={onRetry}
+        errorTitle={errorTitle ?? t("fieldRenderError", "This field failed to render")}
+      />
+    </YStack>
+  );
+}
+
+export class FormErrorBoundary extends Component<FormErrorBoundaryProps, FormErrorBoundaryState> {
+  static getDerivedStateFromError(error: Error): Partial<FormErrorBoundaryState> {
+    return { error };
+  }
+
+  state: FormErrorBoundaryState = { error: undefined, resetNonce: 0 };
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Contained, not swallowed: keep the signal for devs / e2e consoles.
+    logger.warn("[backoffice] form render error contained", { error, errorInfo });
+  }
+
+  handleRetry = () => {
+    this.setState((prev) => ({ error: undefined, resetNonce: prev.resetNonce + 1 }));
+  };
+
+  render() {
+    if (this.state.error) {
+      return (
+        <FormErrorFallback
+          label={this.props.label}
+          errorTitle={this.props.errorTitle}
+          error={this.state.error}
+          onRetry={this.handleRetry}
+          testID={this.props.testID}
+        />
+      );
+    }
+    // Keyed so a retry remounts the subtree instead of re-rendering the
+    // crashed instances in place (their internal state may be corrupt).
+    return <React.Fragment key={this.state.resetNonce}>{this.props.children}</React.Fragment>;
+  }
+}
+
+/**
+ * SchemaForm `renderFieldWrapper` bridge — one boundary per rendered field.
+ * Stable module-level function so SchemaForm consumers can pass it directly
+ * without memoization.
+ */
+export function wrapFieldWithErrorBoundary(rendered: ReactNode, field: FieldSchema): ReactNode {
+  return (
+    <FormErrorBoundary
+      key={field.name}
+      label={field.label}
+      testID={`form-field-error-${field.name}`}
+    >
+      {rendered}
+    </FormErrorBoundary>
+  );
+}

package/src/form/FormHeaderCluster.tsx

@@ -0,0 +1,202 @@
+/**
+ * MOD-07 header cluster — the document's social/meta signals compacted into
+ * the toolbar row, right after the status chip: assignee avatar strip
+ * (+N overflow) with an assign affordance, like toggle + count, and the
+ * follow bell. One glance = state of the document, no scroll.
+ *
+ * Management surfaces (remove assignment, who liked, shares, attachments)
+ * stay in the sidebar accordion — this cluster is the readout plus the two
+ * highest-frequency toggles. Data rides the parent's docinfo (one shared
+ * get_docinfo per form screen); every mutation calls `onRefresh` so the
+ * toolbar, sidebar, and timeline all see the new counts.
+ */
+
+import { XStack, useTheme } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { pressTargetStyle } from "@multiplatform.one/theme";
+import { BellIcon, HeartIcon, UserCirclePlusIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeCapabilities } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { DocInfo } from "../shared/useDocinfo";
+import { useFrappeApp } from "../shared/useFrappeApp";
+import { SidebarAssignDialog } from "./sidebar-dialogs";
+import { SidebarAvatarStrip } from "./sidebar-people";
+import { addAssignment, followDocument, toggleLike, unfollowDocument } from "./sidebar-rpc";
+import { toAbsoluteUrl } from "./sidebar-utils";
+
+const MAX_ASSIGNEE_AVATARS = 3;
+
+export interface FormHeaderClusterProps {
+  doctype: string;
+  name: string;
+  /** Shared docinfo from the form screen (one get_docinfo per screen). */
+  docinfo?: DocInfo;
+  /** Session user — drives the like/follow toggle state. */
+  currentUser?: string;
+  /** Invalidate + reload docinfo after a mutation (the parent owns the fetch). */
+  onRefresh: () => void;
+}
+
+export function FormHeaderCluster({
+  doctype,
+  name,
+  docinfo,
+  currentUser,
+  onRefresh,
+}: FormHeaderClusterProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const app = useFrappeApp();
+  const config = useFrappeConfig();
+  const capabilities = useBackofficeCapabilities();
+  const theme = useTheme();
+  const [busy, setBusy] = useState<"assign" | "like" | "follow" | undefined>(undefined);
+  const [assignOpen, setAssignOpen] = useState(false);
+
+  if (!docinfo) return null;
+
+  const userInfo = docinfo.user_info ?? {};
+  const userLabel = (id: string): string => userInfo[id]?.fullname || id;
+  const userImage = (id: string): string | undefined => {
+    const image = userInfo[id]?.image;
+    return typeof image === "string" && image ? toAbsoluteUrl(config?.baseURL, image) : undefined;
+  };
+
+  const assignees = [
+    ...new Set(
+      (docinfo.assignments ?? []).flatMap((assignment) =>
+        typeof assignment.owner === "string" && assignment.owner ? [assignment.owner] : [],
+      ),
+    ),
+  ];
+  const likers = [
+    ...new Set(
+      (docinfo.like_logs ?? []).flatMap((log) =>
+        typeof log.owner === "string" && log.owner ? [log.owner] : [],
+      ),
+    ),
+  ];
+  const likedByMe = Boolean(currentUser) && likers.includes(currentUser as string);
+  // NOTE: follow_document is a server-side no-op when document-follow
+  // notifications are disabled (the local bench default) — the toggle then
+  // snaps back on refresh, matching desk behavior.
+  const isFollowed = Boolean(docinfo.is_document_followed);
+
+  const run = async (kind: "assign" | "like" | "follow", action: () => Promise<unknown>) => {
+    if (busy || !app) return;
+    setBusy(kind);
+    try {
+      await action();
+    } catch {
+      // Cluster mutations are non-critical; the refresh reflects the
+      // server's actual state either way.
+    } finally {
+      onRefresh();
+      setBusy(undefined);
+    }
+  };
+
+  // Phosphor icons take resolved color strings (not tamagui tokens) so
+  // native/GTK get a real color — same pattern as sidebar-attachments.
+  const mutedColor = typeof theme.color11?.val === "string" ? theme.color11.val : undefined;
+  const likedColor = typeof theme.red10?.val === "string" ? theme.red10.val : mutedColor;
+
+  // Chromeless toggles keep a measurable ≥44px press floor via box size
+  // (DG-LAY-04 / docket D-02 — the invisible box is the sanctioned channel
+  // for visually-small controls).
+  const pressFloor = pressTargetStyle();
+
+  // Assignment surfaces (avatar strip + assign affordance) ride the
+  // provider's `assignments` capability; like/follow are core social chrome.
+  const showAssignments = capabilities.assignments.enabled;
+
+  return (
+    <XStack alignItems="center" flexShrink={0} testID="form-header-cluster">
+      {showAssignments && (
+        <SidebarAvatarStrip
+          items={assignees.map((assignee) => ({
+            id: assignee,
+            label: userLabel(assignee),
+            image: userImage(assignee),
+          }))}
+          max={MAX_ASSIGNEE_AVATARS}
+        />
+      )}
+      {app && (
+        <>
+          {showAssignments && (
+            <Button
+              chromeless
+              {...pressFloor}
+              icon={<UserCirclePlusIcon size={18} color={mutedColor} />}
+              loading={busy === "assign"}
+              aria-label={t("assignTitle", "Add assignment")}
+              onPress={() => setAssignOpen(true)}
+              testID="form-header-assign"
+            />
+          )}
+          <Button
+            chromeless
+            {...pressFloor}
+            icon={
+              <HeartIcon
+                size={18}
+                weight={likedByMe ? "fill" : "regular"}
+                color={likedByMe ? likedColor : mutedColor}
+              />
+            }
+            loading={busy === "like"}
+            aria-pressed={likedByMe}
+            aria-label={likedByMe ? t("unlike", "Unlike") : t("like", "Like")}
+            onPress={() => {
+              void run("like", () =>
+                toggleLike(app as NonNullable<typeof app>, doctype, name, !likedByMe),
+              );
+            }}
+            testID="form-header-like"
+          >
+            {likers.length > 0 ? String(likers.length) : undefined}
+          </Button>
+          {currentUser && (
+            // Hidden (not disabled) while the session probe resolves —
+            // DG-ST-03 hide beats a flashing explained-disable in chrome.
+            <Button
+              chromeless
+              {...pressFloor}
+              icon={
+                <BellIcon size={18} weight={isFollowed ? "fill" : "regular"} color={mutedColor} />
+              }
+              loading={busy === "follow"}
+              aria-pressed={isFollowed}
+              aria-label={
+                isFollowed
+                  ? t("unfollowDocument", "Unfollow document")
+                  : t("followDocument", "Follow document")
+              }
+              onPress={() => {
+                const user = currentUser;
+                void run("follow", () =>
+                  isFollowed
+                    ? unfollowDocument(app as NonNullable<typeof app>, doctype, name, user)
+                    : followDocument(app as NonNullable<typeof app>, doctype, name, user),
+                );
+              }}
+              testID="form-header-follow"
+            />
+          )}
+          <SidebarAssignDialog
+            open={assignOpen}
+            onOpenChange={setAssignOpen}
+            onAssign={(user, description) => {
+              void run("assign", () =>
+                addAssignment(app as NonNullable<typeof app>, doctype, name, [user], description),
+              );
+            }}
+          />
+        </>
+      )}
+    </XStack>
+  );
+}