@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/chrome/UserMenu.tsx

@@ -3,11 +3,21 @@
 // hosts without one get a disabled item (GJS/story parity). The logout and
 // theme items are individually gated by the userMenu capability config.
 import React from "react";
-import { Avatar, DropdownMenu, SizableText, YStack, isWeb } from "@multiplatform.one/components";
+import {
+  Avatar,
+  DropdownMenu,
+  SizableText,
+  Skeleton,
+  YStack,
+  isWeb,
+  Dialog,
+  DialogContent,
+} from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback } from "react";
+import { openUrl } from "@multiplatform.one/platform";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   useBackofficeCapabilities,
@@ -29,25 +39,59 @@ export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
   const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
-  const { appearance } = useBackofficeConfig();
+  const { appearance, auth, emitEvent } = useBackofficeConfig();
+  const acting = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState(false);
   const { userMenu } = useBackofficeCapabilities();
   const app = useFrappeApp();
   const frappeConfig = useFrappeConfig();
-  const { info } = useSessionUserInfo();
+  const { info, loading } = useSessionUserInfo();
   const sessionUser = info?.user === "Guest" ? undefined : info?.user;
 
-  const handleLogout = useCallback(async () => {
-    try {
-      await app?.auth().logout();
-    } catch {
-      // Best effort: even when the bench rejects the call (expired session,
-      // network), still clear local state and leave the desk.
-    }
-    // Cache clear scope: this package's session-user cache only. The frappe
-    // `sid` cookie is invalidated server-side by /api/method/logout itself.
-    clearSessionUserCache();
-    navigator.replace(paths.home());
-  }, [app, navigator, paths]);
+  const runAuthAction = useCallback(
+    async (action: () => void | Promise<unknown>) => {
+      if (acting.current) return;
+      acting.current = true;
+      setBusy(true);
+      setActionError(false);
+      try {
+        await action();
+        clearSessionUserCache();
+      } catch (error) {
+        setActionError(true);
+        emitEvent({ type: "error", error, context: "user-menu-auth" });
+      } finally {
+        acting.current = false;
+        setBusy(false);
+      }
+    },
+    [emitEvent],
+  );
+
+  const handleLogout = useCallback(
+    () =>
+      runAuthAction(async () => {
+        try {
+          await app?.auth().logout();
+        } catch (error) {
+          emitEvent({ type: "error", error, context: "frappe-logout" });
+        }
+        await auth?.logout?.();
+        navigator.replace(paths.home());
+      }),
+    [app, auth, emitEvent, navigator, paths, runAuthAction],
+  );
+
+  const handleLogin = useCallback(
+    () =>
+      runAuthAction(() => {
+        if (auth) return auth.login();
+        if (frappeConfig?.baseURL)
+          return openUrl(`${frappeConfig.baseURL.replace(/\/+$/, "")}/login`);
+      }),
+    [auth, frappeConfig?.baseURL, runAuthAction],
+  );
 
   const handleReload = useCallback(() => {
     if (typeof location !== "undefined" && typeof location.reload === "function") {
@@ -72,107 +116,127 @@ export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
     navigator.navigate(exitToSite.path);
   }, [navigator, exitToSite.path]);
 
-  const sessionGate = sessionUser
-    ? {}
-    : {
-        disabled: true,
-        disabledReason: t("userMenu.sessionUnavailable", "Session not loaded"),
-      };
+  const errorDialog = actionError ? (
+    <Dialog modal open onOpenChange={setActionError}>
+      <Dialog.Portal>
+        <Dialog.Overlay backgroundColor="$shadow6" />
+        <DialogContent>
+          <Dialog.Title>{t("userMenu.authFailedTitle", "Account unavailable")}</Dialog.Title>
+          <Dialog.Description>
+            {t("userMenu.authFailed", "Unable to complete sign-in or sign-out. Try again.")}
+          </Dialog.Description>
+          <Dialog.Close asChild>
+            <Button>{t("userMenu.close", "Close")}</Button>
+          </Dialog.Close>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  ) : null;
 
-  return (
-    <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
-      <DropdownMenu.Trigger asChild>
-        <Button
-          chromeless
-          circular
-          size={knobProps.sizeToken}
-          aria-label={t("userMenu.label", "User menu")}
-        >
-          <Avatar
-            size={knobProps.sizeToken === "$5" ? "$3" : knobProps.sizeToken === "$3" ? "$1" : "$2"}
-            src={info?.imageUrl}
-            name={info?.fullName ?? info?.user}
-          />
+  if (loading) {
+    return <Skeleton width={knobProps.sizeToken} height={knobProps.sizeToken} />;
+  }
+
+  if (!sessionUser) {
+    return (
+      <>
+        <Button chromeless size={knobProps.sizeToken} loading={busy} onPress={handleLogin}>
+          {t("userMenu.logIn", "Log in")}
         </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content minWidth={240}>
-        {info ? (
-          <>
-            <YStack {...knobProps.panelPadding} {...knobProps.gap} paddingVertical="$2">
-              <SizableText {...knobProps.label} fontWeight="400" numberOfLines={1}>
-                {info.fullName}
-              </SizableText>
-              {info.email ? (
-                <SizableText size="$2" color="$color10" numberOfLines={1}>
-                  {info.email}
+        {errorDialog}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            chromeless
+            circular
+            size={knobProps.sizeToken}
+            aria-label={t("userMenu.label", "User menu")}
+          >
+            <Avatar
+              size={
+                knobProps.sizeToken === "$5" ? "$3" : knobProps.sizeToken === "$3" ? "$1" : "$2"
+              }
+              src={info?.imageUrl}
+              name={info?.fullName ?? info?.user}
+            />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {info ? (
+            <>
+              <YStack {...knobProps.panelPadding} {...knobProps.gap} paddingVertical="$2">
+                <SizableText {...knobProps.label} fontWeight="400" numberOfLines={1}>
+                  {info.fullName}
                 </SizableText>
-              ) : null}
-            </YStack>
-            <DropdownMenu.Separator />
-          </>
-        ) : null}
-        <DropdownMenu.Item
-          {...sessionGate}
-          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
-        >
-          {t("userMenu.myProfile", "My Profile")}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
-          {...sessionGate}
-          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
-        >
-          {t("userMenu.mySettings", "My Settings")}
-        </DropdownMenu.Item>
-        {/* GAP: desk's Session Defaults dialog (frappe.core.doctype.session_default_settings)
-            has no backoffice surface yet — placeholder until a dialog exists. */}
-        <DropdownMenu.Item
-          disabled
-          disabledReason={t("userMenu.sessionDefaultsGap", "Not implemented yet")}
-        >
-          {t("userMenu.sessionDefaults", "Session Defaults")}
-        </DropdownMenu.Item>
-        {isWeb ? (
-          <DropdownMenu.Item onSelect={handleReload}>
-            {t("userMenu.reload", "Reload")}
-          </DropdownMenu.Item>
-        ) : null}
-        {userMenu.themeToggle ? (
+                {info.email ? (
+                  <SizableText size="$2" color="$color10" numberOfLines={1}>
+                    {info.email}
+                  </SizableText>
+                ) : null}
+              </YStack>
+              <DropdownMenu.Separator />
+            </>
+          ) : null}
           <DropdownMenu.Item
-            {...(appearance
-              ? {}
-              : {
-                  disabled: true,
-                  disabledReason: t(
-                    "userMenu.themeUnavailable",
-                    "Theme switching is unavailable on this platform",
-                  ),
-                })}
-            onSelect={handleToggleTheme}
+            onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
           >
-            {t("userMenu.toggleTheme", "Toggle Theme")}
+            {t("userMenu.myProfile", "My Profile")}
           </DropdownMenu.Item>
-        ) : null}
-        {isWeb && websiteURL ? (
-          <DropdownMenu.Item onSelect={handleViewWebsite}>
-            {t("userMenu.viewWebsite", "View Website")}
+          <DropdownMenu.Item
+            onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
+          >
+            {t("userMenu.mySettings", "My Settings")}
           </DropdownMenu.Item>
-        ) : null}
-        {/* MOD-02: embedded shells are full-bleed (no host navbar), so the
+          {isWeb ? (
+            <DropdownMenu.Item onSelect={handleReload}>
+              {t("userMenu.reload", "Reload")}
+            </DropdownMenu.Item>
+          ) : null}
+          {userMenu.themeToggle ? (
+            <DropdownMenu.Item
+              {...(appearance
+                ? {}
+                : {
+                    disabled: true,
+                    disabledReason: t(
+                      "userMenu.themeUnavailable",
+                      "Theme switching is unavailable on this platform",
+                    ),
+                  })}
+              onSelect={handleToggleTheme}
+            >
+              {t("userMenu.toggleTheme", "Toggle Theme")}
+            </DropdownMenu.Item>
+          ) : null}
+          {isWeb && websiteURL ? (
+            <DropdownMenu.Item onSelect={handleViewWebsite}>
+              {t("userMenu.viewWebsite", "View Website")}
+            </DropdownMenu.Item>
+          ) : null}
+          {/* MOD-02: embedded shells are full-bleed (no host navbar), so the
             way back into the host app lives here. */}
-        {isWeb && exitToSite.enabled ? (
-          <DropdownMenu.Item onSelect={handleExitToSite}>
-            {exitToSite.label ?? t("userMenu.exitToSite", "← multiplatform.one")}
-          </DropdownMenu.Item>
-        ) : null}
-        {userMenu.logout ? (
-          <>
-            <DropdownMenu.Separator />
-            <DropdownMenu.Item onSelect={handleLogout}>
-              {t("userMenu.logOut", "Log Out")}
+          {isWeb && exitToSite.enabled ? (
+            <DropdownMenu.Item onSelect={handleExitToSite}>
+              {exitToSite.label ?? t("userMenu.exitToSite", "← multiplatform.one")}
             </DropdownMenu.Item>
-          </>
-        ) : null}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+          ) : null}
+          {userMenu.logout ? (
+            <>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item onSelect={handleLogout}>
+                {t("userMenu.logOut", "Log Out")}
+              </DropdownMenu.Item>
+            </>
+          ) : null}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      {errorDialog}
+    </>
   );
 }

package/src/chrome/notifications-panel.tsx

@@ -5,6 +5,7 @@
  * the popover/sheet shell live in NotificationsButton.
  */
 import {
+  componentColors,
   Avatar,
   Button,
   EmptyState,
@@ -91,7 +92,7 @@ function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: (
             width="$0.75"
             height="$0.75"
             borderRadius={1000}
-            backgroundColor="$accentBackground"
+            backgroundColor={componentColors.indicator.mark}
           />
         </View>
       )}
@@ -180,13 +181,9 @@ export function NotificationsPanel({
         <NotificationSkeletonRows />
       ) : items.length === 0 ? (
         <EmptyState
-          compact
+          size="$3"
           paddingVertical="$6"
           title={t("notifications.emptyTitle", "No new notifications")}
-          description={t(
-            "notifications.emptyDescription",
-            "Mentions, assignments, and shares will show up here.",
-          )}
         />
       ) : (
         <YStack>

package/src/chrome/user-session.tsx

@@ -9,7 +9,12 @@ import React from "react";
 import type { FrappeApp } from "@multiplatform.one/frappe";
 import { useFrappeConfig, type FrappeConfig } from "@multiplatform.one/frappe-ui";
 import { useEffect, useMemo, useState } from "react";
-import { clearSessionIdentityCache, loadSessionUser, sessionUserKey } from "../shared/sessionUser";
+import {
+  clearSessionIdentityCache,
+  loadSessionUser,
+  sessionUserKey,
+  useSessionRevision,
+} from "../shared/sessionUser";
 import { useFrappeApp } from "../shared/useFrappeApp";
 
 export interface SessionUserInfo {
@@ -78,6 +83,7 @@ export function useSessionUserInfo(): {
 } {
   const app = useFrappeApp();
   const config = useFrappeConfig();
+  const revision = useSessionRevision();
   const key = config ? sessionUserKey(config) : "";
   const [info, setInfo] = useState<SessionUserInfo | undefined>(undefined);
   const [loading, setLoading] = useState(true);
@@ -115,7 +121,7 @@ export function useSessionUserInfo(): {
     return () => {
       cancelled = true;
     };
-  }, [app, key, config]);
+  }, [app, key, config, revision]);
 
   return useMemo(() => ({ info, loading, error }), [info, loading, error]);
 }

package/src/config/BackofficeProvider.spec.tsx

@@ -53,13 +53,14 @@ function renderShell(props: Partial<BackofficeProviderProps> = {}) {
 
 describe("BackofficeProvider capability flags", () => {
   it("renders the full chrome by default", () => {
-    const { container } = renderShell();
+    renderShell();
 
     expect(screen.getByTestId("backoffice-shell")).toBeTruthy();
     expect(screen.getByTestId("backoffice-awesomebar")).toBeTruthy();
     expect(screen.getByTestId("backoffice-notifications-button")).toBeTruthy();
     expect(screen.getByTestId("backoffice-help-trigger")).toBeTruthy();
-    expect(container.querySelector('[aria-label="User menu"]')).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Log in" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
     expect(screen.getByTestId("backoffice-sidebar-rail")).toBeTruthy();
     expect(screen.getByText("page body")).toBeTruthy();
   });
@@ -79,7 +80,9 @@ describe("BackofficeProvider capability flags", () => {
     expect(screen.queryByTestId("backoffice-notifications-button")).toBeNull();
     expect(screen.queryByTestId("backoffice-help-trigger")).toBeNull();
     expect(container.querySelector('[aria-label="User menu"]')).toBeNull();
+    expect(screen.queryByRole("button", { name: "Log in" })).toBeNull();
     expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.queryByTestId("backoffice-sidebar-toggle")).toBeNull();
     // Content always renders — flags remove chrome, not the page.
     expect(screen.getByText("page body")).toBeTruthy();
   });
@@ -98,6 +101,7 @@ describe("BackofficeProvider capability flags", () => {
       slots: { renderSidebarFooter: () => <div data-testid="host-sidebar-footer">custom</div> },
     });
 
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
     expect(screen.getByTestId("host-sidebar-footer")).toBeTruthy();
   });
 });

package/src/config/BackofficeProvider.tsx

@@ -80,6 +80,11 @@ export interface BackofficeAppearance {
   setScheme: (scheme: "light" | "dark" | "system") => void;
 }
 
+export interface BackofficeAuth {
+  login: () => void | Promise<void>;
+  logout?: () => void | Promise<void>;
+}
+
 /** Result contract of a host navigation blocker (one's useBlocker shape). */
 export interface BackofficeNavigationBlocker {
   blocked: boolean;
@@ -167,6 +172,7 @@ export interface BackofficeProviderProps {
   slots?: BackofficeSlots;
   /** Color-scheme adapter for the user menu's "Toggle Theme". */
   appearance?: BackofficeAppearance;
+  auth?: BackofficeAuth;
   /** Router-integration hooks (navigation blocker, …). */
   integrations?: BackofficeIntegrations;
   /** Event bus — every notable backoffice action lands here. */
@@ -189,6 +195,7 @@ export interface BackofficeConfig {
   actions: BackofficeActions;
   slots: BackofficeSlots;
   appearance?: BackofficeAppearance;
+  auth?: BackofficeAuth;
   integrations?: BackofficeIntegrations;
   /** Emit an event to the host's `onEvent` bus (no-op when unset). */
   emitEvent: (event: BackofficeEvent) => void;
@@ -262,6 +269,7 @@ export function BackofficeProvider({
   actions,
   slots,
   appearance,
+  auth,
   integrations,
   onEvent,
   i18nInstance,
@@ -333,6 +341,7 @@ export function BackofficeProvider({
       actions: actions ?? {},
       slots: slots ?? {},
       appearance,
+      auth,
       integrations,
       emitEvent,
     }),
@@ -346,6 +355,7 @@ export function BackofficeProvider({
       actions,
       slots,
       appearance,
+      auth,
       integrations,
       emitEvent,
     ],

package/src/config/capabilities.spec.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { resolveCapabilities } from "./capabilities";
+
+describe("form builder capability", () => {
+  it("defaults on and accepts boolean or configured opt-outs", () => {
+    expect(resolveCapabilities().formBuilder.enabled).toBe(true);
+    expect(resolveCapabilities({ formBuilder: false }).formBuilder.enabled).toBe(false);
+    expect(resolveCapabilities({ formBuilder: { enabled: false } }).formBuilder.enabled).toBe(
+      false,
+    );
+    expect(resolveCapabilities({ formBuilder: {} }).formBuilder.enabled).toBe(true);
+  });
+});

package/src/config/capabilities.ts

@@ -46,6 +46,8 @@ export interface BackofficeCapabilities {
   newDoc?: CapabilityInput;
   /** List bulk-action bar (multi-select edit/assign/tag/delete). */
   bulkActions?: CapabilityInput;
+  /** Form layout editor and its document-menu entry. Defaults on. */
+  formBuilder?: CapabilityInput;
   /** Form sidebar attachments section. */
   attachments?: CapabilityInput;
   /** Form activity timeline (comments, versions, communications). */
@@ -86,6 +88,7 @@ export interface ResolvedBackofficeCapabilities {
   views: ResolvedCapability & { allow: readonly BackofficeView[] };
   newDoc: ResolvedCapability;
   bulkActions: ResolvedCapability;
+  formBuilder: ResolvedCapability;
   attachments: ResolvedCapability;
   timeline: ResolvedCapability;
   assignments: ResolvedCapability;
@@ -143,6 +146,7 @@ export function resolveCapabilities(
     }),
     newDoc: resolveFlag<ResolvedCapability>(input.newDoc, { enabled: true }),
     bulkActions: resolveFlag<ResolvedCapability>(input.bulkActions, { enabled: true }),
+    formBuilder: resolveFlag<ResolvedCapability>(input.formBuilder, { enabled: true }),
     attachments: resolveFlag<ResolvedCapability>(input.attachments, { enabled: true }),
     timeline: resolveFlag<ResolvedCapability>(input.timeline, { enabled: true }),
     assignments: resolveFlag<ResolvedCapability>(input.assignments, { enabled: true }),

package/src/desk/Desk.spec.tsx

@@ -21,6 +21,13 @@ import { createMemoryNavigator } from "../navigation/navigator";
 import { Desk } from "./Desk";
 import type { DeskSurfaceProps } from "./DeskSurface";
 import { useDeskScope } from "./scope";
+import { guessDeskTarget } from "./target";
+
+vi.mock("../formBuilder/FormBuilderScreen", () => ({
+  FormBuilderScreen: ({ doctype }: { doctype?: string }) => (
+    <div data-testid="builder-screen">{doctype ?? "picker"}</div>
+  ),
+}));
 
 const MOCK_HOST = "https://desk-assembly.mock.test";
 
@@ -360,3 +367,44 @@ describe("<Desk frappe> under an ambient FrappeProvider", () => {
     expect(screen.getByTestId("probe-connection").textContent).toBe(AMBIENT_HOST);
   });
 });
+
+describe("<Desk /> form builder dispatch", () => {
+  it("guesses builder targets for navigation interception", () => {
+    expect(guessDeskTarget("/admin/customize-form?doc_type=Sales%20Order", "/admin")).toEqual({
+      kind: "form-builder",
+      doctype: "Sales Order",
+    });
+  });
+  it.each([undefined, "Sales Order"])("opens the builder for %s", (doctype) => {
+    const path = doctype
+      ? `/customize-form?doc_type=${encodeURIComponent(doctype)}`
+      : "/customize-form";
+    renderWithProviders(<Desk frappe={frappe()} basePath="/admin" path={path} />);
+    expect(screen.getByTestId("builder-screen").textContent).toBe(doctype ?? "picker");
+  });
+
+  it("supports a form-builder surface override", () => {
+    renderWithProviders(
+      <Desk
+        frappe={frappe()}
+        path="/customize-form?doc_type=ToDo"
+        surfaces={{ "form-builder": { ToDo: SurfaceProbe } }}
+      />,
+    );
+    expect(screen.getByTestId("probe-form-builder").textContent).toContain('"ToDo"');
+  });
+
+  it("blocks the builder and its overrides when the capability is off", () => {
+    renderWithProviders(
+      <Desk
+        frappe={frappe()}
+        path="/customize-form"
+        capabilities={{ formBuilder: false }}
+        surfaces={{ "form-builder": SurfaceProbe }}
+      />,
+    );
+    expect(screen.getByText("Not found")).toBeTruthy();
+    expect(screen.queryByTestId("builder-screen")).toBeNull();
+    expect(screen.queryByTestId("probe-form-builder")).toBeNull();
+  });
+});

package/src/desk/Desk.tsx

@@ -18,6 +18,7 @@ import {
   BackofficeProvider,
   type BackofficeActions,
   type BackofficeAppearance,
+  type BackofficeAuth,
   type BackofficeFrappeConfig,
   type BackofficeIntegrations,
 } from "../config/BackofficeProvider";
@@ -99,6 +100,7 @@ export interface DeskProps {
   slots?: BackofficeSlots;
   /** Color-scheme adapter for the user menu's "Toggle Theme". */
   appearance?: BackofficeAppearance;
+  auth?: BackofficeAuth;
   /** Router-integration hooks (navigation blocker, …). */
   integrations?: BackofficeIntegrations;
 
@@ -233,6 +235,7 @@ export function Desk(props: DeskProps) {
       actions={props.actions}
       slots={props.slots}
       appearance={props.appearance}
+      auth={props.auth}
       integrations={props.integrations}
       onEvent={props.onEvent}
     >
@@ -300,5 +303,26 @@ function DeskBody({
       </YStack>
     );
   }
-  return <BackofficeShell>{surface}</BackofficeShell>;
+  return (
+    <BackofficeShell title={target ? deskTargetTitle(target) : undefined}>
+      {surface}
+    </BackofficeShell>
+  );
+}
+
+/** The surface name a compact banner shows; home falls back to the desk title. */
+function deskTargetTitle(target: DeskTarget): string | undefined {
+  switch (target.kind) {
+    case "list":
+    case "view":
+    case "new":
+    case "form":
+      return target.doctype;
+    case "workspace":
+      return target.workspace;
+    case "report":
+      return target.reportName;
+    default:
+      return undefined;
+  }
 }