@nocobase/app-template-default 1.0.0-beta.87 → 1.0.0-beta.89

package/client/routing/route-leave-boundary.tsx

@@ -0,0 +1,261 @@
+import { useNavigationGuard } from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react';
+import { useLocation } from 'react-router';
+import { ConfirmAction } from '../pages/settings/shared.js';
+
+/* eslint-disable react-refresh/only-export-components -- the route boundary and its hook share one context */
+
+type Decision = boolean | Promise<boolean>;
+interface Prompt {
+  readonly owner: LeaveController;
+  readonly title: string;
+  readonly description: string;
+}
+
+class LeaveController {
+  dirty = false;
+  busy = false;
+  active = false;
+  private allowed = false;
+  private pending?: {
+    promise: Promise<boolean>;
+    resolve: (value: boolean) => void;
+  };
+
+  constructor(
+    readonly origin: string,
+    private readonly show: (prompt: Prompt | undefined) => void,
+  ) {}
+
+  title = '';
+  description = '';
+  onDiscard?: () => void;
+
+  update(
+    dirty: boolean,
+    busy: boolean,
+    onDiscard: (() => void) | undefined,
+    title: string,
+    description: string,
+  ): void {
+    this.dirty = dirty;
+    this.busy = busy;
+    this.onDiscard = onDiscard;
+    this.title = title;
+    this.description = description;
+  }
+
+  guard = (): Decision => {
+    if (this.allowed) return true;
+    if (this.busy) return false;
+    if (!this.dirty) return true;
+    if (!this.pending) {
+      let resolve!: (value: boolean) => void;
+      const promise = new Promise<boolean>((done) => {
+        resolve = done;
+      });
+      this.pending = { promise, resolve };
+      this.show({
+        owner: this,
+        title: this.title,
+        description: this.description,
+      });
+    }
+    return this.pending.promise;
+  };
+
+  decide(value: boolean): void {
+    if (value) this.onDiscard?.();
+    this.allowed = value;
+    this.pending?.resolve(value);
+    this.pending = undefined;
+    this.show(undefined);
+  }
+
+  allow = (): void => {
+    this.allowed = true;
+  };
+  reset(): void {
+    this.allowed = false;
+  }
+  cancel(): void {
+    if (this.pending) this.decide(false);
+  }
+}
+
+class LeaveScope {
+  private readonly entries = new Set<LeaveController>();
+  private hidden = false;
+  private generation = 0;
+  constructor(private readonly dirtyChanged: (dirty: boolean) => void) {}
+
+  changed = (): void => {
+    this.dirtyChanged([...this.entries].some((entry) => entry.dirty));
+  };
+  attach(entry: LeaveController): void {
+    entry.active = true;
+    this.entries.add(entry);
+    this.changed();
+  }
+  detach(entry: LeaveController): void {
+    entry.active = false;
+    // Activity disconnects Effects before the shell commits its new visibility.
+    queueMicrotask(() => {
+      if (!entry.active && !this.hidden) this.remove(entry);
+    });
+  }
+  private remove(entry: LeaveController): void {
+    this.entries.delete(entry);
+    entry.cancel();
+    this.changed();
+  }
+  update(hidden: boolean, pathname: string): void {
+    if (this.hidden !== hidden) {
+      this.generation += 1;
+      this.hidden = hidden;
+      // A confirmation started before concealment must not discard or resume its old navigation on recovery.
+      if (hidden) for (const entry of this.entries) entry.cancel();
+    }
+    for (const entry of this.entries) {
+      if (pathname !== entry.origin && !pathname.startsWith(`${entry.origin}/`))
+        this.remove(entry);
+      else entry.reset();
+    }
+  }
+  prune(): void {
+    if (!this.hidden)
+      for (const entry of this.entries) if (!entry.active) this.remove(entry);
+  }
+  guard = (): Decision => {
+    const generation = this.generation;
+    const remaining = [...this.entries];
+    const next = (): Decision => {
+      if (
+        generation !== this.generation ||
+        (this.hidden && this.entries.size > 0)
+      )
+        return false;
+      const entry = remaining.shift();
+      if (!entry) return true;
+      const value = entry.guard();
+      return typeof value === 'boolean'
+        ? value && next()
+        : value.then((allowed) => allowed && next());
+    };
+    return next();
+  };
+  dispose(): void {
+    for (const entry of this.entries) entry.cancel();
+    this.entries.clear();
+  }
+}
+
+interface BoundaryContext {
+  readonly scope: LeaveScope;
+  readonly show: (prompt: Prompt | undefined) => void;
+}
+const Context = createContext<BoundaryContext | undefined>(undefined);
+
+function useBeforeUnload(dirty: boolean): void {
+  useEffect(() => {
+    if (!dirty) return;
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [dirty]);
+}
+
+function promptDialog(prompt: Prompt | undefined): ReactElement | null {
+  return prompt ? (
+    <ConfirmAction
+      open
+      title={prompt.title}
+      description={prompt.description}
+      busy={false}
+      onCancel={() => prompt.owner.decide(false)}
+      onConfirm={() => prompt.owner.decide(true)}
+    />
+  ) : null;
+}
+
+/** The shell owns leave decisions and their UI, outside every page's Activity and its nested routes. */
+export function RouteLeaveBoundary({
+  hidden,
+  children,
+}: PropsWithChildren<{ readonly hidden: boolean }>): ReactElement {
+  const location = useLocation();
+  const [prompt, setPrompt] = useState<Prompt>();
+  const [dirty, setDirty] = useState(false);
+  const [context] = useState(() => ({
+    scope: new LeaveScope(setDirty),
+    show: setPrompt,
+  }));
+  useNavigationGuard(context.scope.guard);
+  useBeforeUnload(dirty);
+  useLayoutEffect(
+    () => context.scope.update(hidden, location.pathname),
+    [context, hidden, location.pathname, location.key],
+  );
+  useEffect(() => {
+    context.scope.prune();
+  }, [context, hidden]);
+  useEffect(() => () => context.scope.dispose(), [context]);
+  return (
+    <Context.Provider value={context}>
+      {children}
+      {promptDialog(prompt)}
+    </Context.Provider>
+  );
+}
+
+/** Compatible with standalone form renders; routed forms keep protection in the shell during permission rechecks. */
+export function usePageLeave(
+  dirty: boolean,
+  busy: boolean,
+  onDiscard?: () => void,
+) {
+  const boundary = useContext(Context);
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [prompt, setPrompt] = useState<Prompt>();
+  const [controller] = useState(
+    () => new LeaveController(location.pathname, boundary?.show ?? setPrompt),
+  );
+  useNavigationGuard(boundary ? () => true : controller.guard);
+  useBeforeUnload(!boundary && dirty);
+  useLayoutEffect(() => {
+    controller.update(
+      dirty,
+      busy,
+      onDiscard,
+      t('settings.discardTitle'),
+      t('settings.discardHint'),
+    );
+    boundary?.scope.changed();
+  }, [controller, dirty, busy, onDiscard, boundary, t]);
+  useLayoutEffect(() => {
+    controller.reset();
+  }, [controller, location.key]);
+  useLayoutEffect(() => {
+    if (!boundary) return () => controller.cancel();
+    boundary.scope.attach(controller);
+    return () => boundary.scope.detach(controller);
+  }, [boundary, controller]);
+  return {
+    guard: controller.guard,
+    allow: controller.allow,
+    dialog: boundary ? null : promptDialog(prompt),
+  };
+}

package/client/routing/route-navigation.ts

@@ -8,7 +8,12 @@ import { useEffect, useMemo, useState } from 'react';
 import { matchPath, matchRoutes, type RouteObject } from 'react-router';
 
 import { EMPTY_ARRAY } from '#lib/constants';
-import { transformNavigation } from '#lib/navigation-transform';
+import {
+  organizeNavigation,
+  settingsCatalog,
+  transformNavigation,
+  type SettingsCategory,
+} from '#lib/navigation-transform';
 
 export interface RouteNavigationItem {
   /** Route keys represented by a single sidebar entry whose content uses tabs. */
@@ -22,7 +27,17 @@ export function buildRouteNavigation(
   routes: readonly AppClientRegisteredRoute[],
   denied: ReadonlySet<string>,
 ): RouteNavigationItem[] {
-  return transformNavigation(visibleRouteNavigation(routes, denied));
+  return transformNavigation(visibleRouteNavigation(routes, denied), routes);
+}
+
+/** The settings home's categories and modules the viewer may open (`settingsCatalog`). */
+export function buildSettingsCatalog(
+  routes: readonly AppClientRegisteredRoute[],
+  denied: ReadonlySet<string>,
+): SettingsCategory[] {
+  return settingsCatalog(
+    organizeNavigation(visibleRouteNavigation(routes, denied), routes),
+  );
 }
 
 function visibleRouteNavigation(
@@ -96,6 +111,8 @@ function navigationPages(
   ]);
 }
 
+const NONE_DENIED: ReadonlySet<string> = new Set();
+
 export function useRouteNavigation(
   routes: readonly AppClientRegisteredRoute[],
 ) {
@@ -151,9 +168,8 @@ export function useRouteNavigation(
       result.guards !== guards ||
       result.revision !== revision),
   );
-  const denied = guards.length
-    ? (result?.denied ?? new Set<string>())
-    : new Set<string>();
+  // A stable empty set keeps consumers that memoize on `denied` from recomputing on every render.
+  const denied = (guards.length && result?.denied) || NONE_DENIED;
   return {
     loading,
     items: loading ? [] : buildRouteNavigation(routes, denied),
@@ -165,11 +181,17 @@ export function matchRouteTree(
   routes: readonly AppClientRegisteredRoute[],
   pathname: string,
 ) {
-  const toMatch = (nodes: readonly AppClientRegisteredRoute[]): RouteObject[] =>
+  const toMatch = (
+    nodes: readonly AppClientRegisteredRoute[],
+    parentPath = '',
+  ): RouteObject[] =>
     nodes.map((route) => ({
-      path: route.path,
+      path: relativeRoutePath(route, parentPath),
       handle: route,
-      children: toMatch(route.children ?? EMPTY_ARRAY),
+      children: toMatch(
+        route.children ?? EMPTY_ARRAY,
+        childRouteParentPath(route, parentPath),
+      ),
     }));
   return matchRoutes(toMatch(routes), pathname)?.map((match) => ({
     ...match,
@@ -177,6 +199,48 @@ export function matchRouteTree(
   }));
 }
 
+/**
+ * A registered route's path relative to its parent's, as the router nests it. Registered paths are absolute; a route at
+ * its parent's own path (a group's home page, a pathless group) nests with an empty path.
+ */
+export function relativeRoutePath(
+  route: AppClientRegisteredRoute,
+  parentPath: string,
+): string {
+  if (!parentPath) return route.path;
+  if (
+    route.path === parentPath ||
+    parentPath.startsWith(`${route.path.replace(/\/$/, '')}/`)
+  )
+    return '';
+  return route.path.slice(parentPath === '/' ? 1 : parentPath.length + 1);
+}
+
+/** The path a route's children are relative to. */
+export function childRouteParentPath(
+  route: AppClientRegisteredRoute,
+  parentPath: string,
+): string {
+  return parentPath.startsWith(`${route.path.replace(/\/$/, '')}/`)
+    ? parentPath
+    : route.path;
+}
+
 export function routeKey(route: AppClientRegisteredRoute): string {
   return `${route.packageName}:${route.path}:${route.id}`;
 }
+
+/** Pure groups can span shells; a page and its descendants always share their shell. */
+export function filterRouteTree(
+  routes: readonly AppClientRegisteredRoute[],
+  predicate: (route: AppClientRegisteredRoute) => boolean,
+): AppClientRegisteredRoute[] {
+  return routes.flatMap((route) => {
+    if (route.componentLoader) return predicate(route) ? [route] : [];
+    const children = filterRouteTree(route.children ?? EMPTY_ARRAY, predicate);
+    // A group declared empty, such as a settings category waiting for modules, stays so its title is still known.
+    return children.length || !route.children?.length
+      ? [{ ...route, children }]
+      : [];
+  });
+}

package/client/routing/route-tree.tsx

@@ -4,7 +4,11 @@ import { Outlet, Route } from 'react-router';
 
 import { EMPTY_ARRAY } from '#lib/constants';
 
-import { routeKey } from './route-navigation.js';
+import {
+  childRouteParentPath,
+  relativeRoutePath,
+  routeKey,
+} from './route-navigation.js';
 import { ClientRoute } from './client-route.js';
 
 /** Groups pass children through; pages deliberately own their Outlet placement. */
@@ -15,14 +19,7 @@ export function renderRouteTree(
   return routes.map((route) => (
     <Route
       key={routeKey(route)}
-      path={
-        parentPath
-          ? route.path === parentPath ||
-            parentPath.startsWith(`${route.path.replace(/\/$/, '')}/`)
-            ? ''
-            : route.path.slice(parentPath === '/' ? 1 : parentPath.length + 1)
-          : route.path
-      }
+      path={relativeRoutePath(route, parentPath)}
       element={
         route.componentLoader ? (
           <ClientRoute key={routeKey(route)} route={route} />
@@ -33,9 +30,7 @@ export function renderRouteTree(
     >
       {renderRouteTree(
         route.children ?? EMPTY_ARRAY,
-        parentPath.startsWith(`${route.path.replace(/\/$/, '')}/`)
-          ? parentPath
-          : route.path,
+        childRouteParentPath(route, parentPath),
       )}
     </Route>
   ));

package/client/runtime.ts

@@ -5,7 +5,7 @@ import { defineAppRuntime } from '@nocobase/app-client/runtime';
 import locales from './locales/index.js';
 import plugins from './plugins.js';
 import reactProviders from './react-providers.js';
-import routes from './routes.js';
+import { createApplicationRoutes } from './routes.js';
 import serviceProviders from './service-provider.js';
 
 const appRuntime = defineAppRuntime({
@@ -15,7 +15,7 @@ const appRuntime = defineAppRuntime({
   serviceProviders,
   locales,
   reactProviders,
-  routes,
+  routes: () => createApplicationRoutes(),
   plugins,
 });
 

package/client/styles.css

@@ -252,9 +252,26 @@ label:has(> .sr-only:focus-visible),
 :is([data-slot='dialog-description'], [data-slot='alert-dialog-description']) {
   line-height: 1.65;
 }
-:is([data-slot='dialog-footer'], [data-slot='alert-dialog-footer']) > button {
+/* Size semantic actions equally, including Button render={<Link />} and the
+   AlertDialog wrappers, which replace Button's slot. Footer sizing takes
+   precedence over primitive size utilities; long labels may grow and wrap. */
+:is([data-slot='dialog-footer'], [data-slot='alert-dialog-footer'])
+  > :is(
+    [data-slot='button'],
+    [data-slot='dialog-close'],
+    [data-slot='alert-dialog-action'],
+    [data-slot='alert-dialog-cancel']
+  ) {
+  height: auto;
   min-height: calc(var(--spacing) * 10);
+  min-width: 0;
+  align-self: stretch;
+  flex-shrink: 1;
+  padding-block: calc(var(--spacing) * 2);
   padding-inline: calc(var(--spacing) * 4);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
 }
 /* Route overlays compose the dialog primitives, so their close button sits where a dialog's does. */
 :is([data-slot='dialog-content'], [data-slot='route-overlay-content'])

package/config.example.yml

@@ -121,7 +121,7 @@ auth:
   # Existing inline auth.email and AUTH_EMAIL_* remain supported for compatibility.
   emailAndPassword:
     enabled: true
-    autoSignIn: false
+    autoSignIn: true
   session:
     storeSessionInDatabase: true
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nocobase/app-template-default",
   "displayName": "Default Template",
-  "version": "1.0.0-beta.87",
+  "version": "1.0.0-beta.89",
   "type": "module",
   "prettier": "@nocobase/dev-config/prettier",
   "engines": {
@@ -9,7 +9,7 @@
   },
   "nocobase": {
     "templateKind": "app",
-    "defaultTemplateVersion": "1.0.0-beta.87"
+    "defaultTemplateVersion": "1.0.0-beta.89"
   },
   "devDependencies": {
     "@ai-sdk/react": "4.0.131",
@@ -74,9 +74,9 @@
     "elkjs": "^0.10.2",
     "@types/jsdom": "^30.0.0",
     "@noble/hashes": "2.3.0",
-    "@nocobase/app-client": "^4.0.0-beta.7",
+    "@nocobase/app-client": "^4.0.0-beta.9",
     "@nocobase/app-plugin-template-print": "0.0.2-beta.2",
-    "@nocobase/app-skills": "0.1.0-beta.58",
+    "@nocobase/app-skills": "0.1.0-beta.60",
     "@nocobase/app-testing": "0.1.0-beta.8",
     "@nocobase/app-websocket": "^0.1.0-beta.1",
     "@nocobase/dev-config": "0.1.0-beta.25",
@@ -144,22 +144,22 @@
     "hono": "^4.13.2",
     "@nocobase/concurrency": "^0.1.0-beta.1",
     "@nocobase/app-plugin-concurrency": "^0.1.0-beta.2",
-    "@nocobase/app-plugin-agents": "^2.0.0-beta.3",
+    "@nocobase/app-plugin-agents": "^2.0.0-beta.6",
     "@nocobase/app-plugin-api-keys": "^1.0.0-beta.21",
-    "@nocobase/app-plugin-authentication": "^2.0.0-beta.18",
-    "@nocobase/app-plugin-authorization": "^1.0.0-beta.35",
+    "@nocobase/app-plugin-authentication": "^2.0.0-beta.19",
+    "@nocobase/app-plugin-authorization": "^1.0.0-beta.36",
     "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.19",
     "@nocobase/app-plugin-file": "^1.0.0-beta.29",
-    "@nocobase/app-plugin-foundation": "^0.1.0-beta.13",
-    "@nocobase/app-plugin-i18n": "^1.0.0-beta.20",
+    "@nocobase/app-plugin-foundation": "^0.1.0-beta.16",
+    "@nocobase/app-plugin-i18n": "^1.0.0-beta.21",
     "@nocobase/app-plugin-knowledge": "^0.1.0-beta.17",
     "@nocobase/app-plugin-mail": "^1.0.0-beta.21",
-    "@nocobase/app-plugin-notification": "^2.0.0-beta.4",
+    "@nocobase/app-plugin-notification": "^2.0.0-beta.5",
     "@nocobase/app-plugin-notification-in-app": "^2.0.0-beta.2",
     "@nocobase/app-plugin-notification-providers": "^1.0.0-beta.18",
     "@nocobase/app-plugin-scheduler": "^1.0.0-beta.23",
-    "@nocobase/app-plugin-users": "^2.0.0-beta.14",
-    "@nocobase/app-server": "^5.0.0-beta.0",
+    "@nocobase/app-plugin-users": "^2.0.0-beta.16",
+    "@nocobase/app-server": "^5.0.0-beta.1",
     "@nocobase/config": "^0.1.0-beta.3",
     "@nocobase/db": "^1.0.0-beta.25",
     "@nocobase/db-sqlite": "^0.1.0-beta.6",
@@ -176,7 +176,7 @@
     "@nocobase/caching": "^1.0.0-beta.4",
     "@nocobase/repository-input": "^0.1.0-beta.3",
     "@nocobase/app-cli": "^1.0.0-beta.32",
-    "@nocobase/realtime": "^1.0.0-beta.0"
+    "@nocobase/realtime": "^1.0.0-beta.1"
   },
   "description": "NocoBase 3 application template with the standard product capabilities.",
   "imports": {

package/server/config/auth.ts

@@ -29,7 +29,7 @@ const auth: AppConfigFactory<AuthConfig> = defineAuthConfig({
       }),
       bearer(),
     ],
-    emailAndPassword: { enabled: true, autoSignIn: false },
+    emailAndPassword: { enabled: true, autoSignIn: true },
     session: { storeSessionInDatabase: true },
     account: { encryptOAuthTokens: true },
   },

package/server/providers/index.ts

@@ -1,8 +1,10 @@
+import NotificationManagementProvider from './notification-management.js';
 import SubmissionProvider from './submission.js';
 import type { ApplicationServiceProviderConstructor } from '@nocobase/app-server/application';
 
 const serviceProviders: readonly ApplicationServiceProviderConstructor[] = [
   SubmissionProvider,
+  NotificationManagementProvider,
 ];
 
 export default serviceProviders;

package/server/providers/notification-management.ts

@@ -0,0 +1,27 @@
+import { ServiceProvider } from '@nocobase/service-provider';
+import type { AppPluginApplication } from '@nocobase/app-server/plugins';
+import type { MailersConfig } from '@nocobase/app-server/mailers/config';
+import {
+  describeInvitationEmailChannel,
+  type UsersConfig,
+} from '@nocobase/app-plugin-users/server/config';
+
+/** Only a derived boolean reaches the existing SPA bootstrap; all transport configuration stays private. */
+export default class NotificationManagementProvider extends ServiceProvider<AppPluginApplication> {
+  readonly name = 'app.notification-management';
+  override boot(): Promise<void> {
+    const channel = describeInvitationEmailChannel({
+      invitations: this.app.config.get<UsersConfig>('users')?.invitations,
+      mailers: this.app.config.get<MailersConfig>('mailers'),
+      channels: this.app.config.get<{
+        channels?: Readonly<Record<string, { enabled?: boolean }>>;
+      }>('notification')?.channels,
+    });
+    this.app.config.mergeDefaults({
+      client: {
+        notificationTemplates: { invitationConfigured: channel.configured },
+      },
+    });
+    return Promise.resolve();
+  }
+}

package/tests/client/account-permissions.test.tsx

@@ -115,7 +115,7 @@ describe('account permission changes without a browser reload', () => {
     await expectMenu(true);
     await changePermissions(view, false);
     invalidate(view);
-    expect(screen.queryByText('users content')).not.toBeInTheDocument();
+    expect(screen.getByText('users content')).not.toBeVisible();
     await expectMenu(false);
     await changePermissions(view, true);
     invalidate(view);

package/tests/client/auth-i18n.test.tsx

@@ -149,6 +149,6 @@ describe('authentication translations', () => {
     await act(() => value.changeLanguage('zh-CN'));
     expect(screen.getByText('此密码重置链接无效或已过期。')).toBeVisible();
     expect(screen.getByText('如果账户存在，重置链接已发送。')).toBeVisible();
-    expect(screen.getByRole('status', { name: '加载中' })).toBeVisible();
+    expect(await screen.findByRole('status', { name: '加载中' })).toBeVisible();
   });
 });

package/tests/client/authenticated-client-fixture.test.tsx

@@ -0,0 +1,37 @@
+import { expect, it } from 'vitest';
+import { createAuthenticatedClientRenderer } from '../helpers/authenticated-client.js';
+
+const render = createAuthenticatedClientRenderer();
+const identities = new Set<string>();
+const permissionSets = new Set<string>();
+const resource = { type: 'settings', id: 'authorization.default-access' };
+
+it.each([
+  { name: 'administrator', member: false, granted: false },
+  { name: 'permitted member', member: true, granted: true },
+  { name: 'unpermitted member', member: true, granted: false },
+])(
+  'isolates the $name session and grants in a reused application',
+  async ({ member, granted }) => {
+    const view = await render(<span>Isolated client</span>, {
+      member,
+      grants: granted ? [{ resource, actions: [{ action: 'read' }] }] : [],
+    });
+    expect(identities.has(view.session.user.id)).toBe(false);
+    expect(permissionSets.has(view.permissionSetKey)).toBe(false);
+    identities.add(view.session.user.id);
+    permissionSets.add(view.permissionSetKey);
+    expect(view.identity().session?.user.id).toBe(view.session.user.id);
+
+    const response = await view.session.fetch('/authorization/permissions');
+    expect(response.status).toBe(200);
+    const { data } = await response.json();
+    expect(data.unrestricted).toBe(!member);
+    const permission = expect.objectContaining({
+      resource,
+      actions: expect.arrayContaining(['read']),
+    });
+    if (granted) expect(data.permissions).toContainEqual(permission);
+    else expect(data.permissions).not.toContainEqual(permission);
+  },
+);