@nocobase/app-template-default 1.0.0-beta.86 → 1.0.0-beta.88

package/tests/client/client-routes.test.ts

@@ -6,9 +6,139 @@ import {
 import { describe, expect, it } from 'vitest';
 
 import systemSettingsRoutes from '../../client/pages/settings/routes.js';
-import applicationRoutes from '../../client/routes.ts';
+import applicationRoutes, {
+  createApplicationRoutes,
+} from '../../client/routes.ts';
+import { includeNotificationTemplateRoutes } from '../../client/pages/settings/notification-routes.js';
+import { defineAppRoutes } from '@nocobase/app-client/plugins';
 
 describe('app client routes', () => {
+  it('joins the settings system category across contributions without moving the log URL', () => {
+    const shell = defineAppRoutes([
+      {
+        name: 'settings',
+        path: '/settings',
+        navigation: { title: 'Settings' },
+        children: [
+          {
+            name: 'settingsSystem',
+            navigation: { title: 'System' },
+            children: [],
+          },
+        ],
+      },
+    ]);
+    const logs = defineAppRoutes([
+      {
+        name: 'notificationManagement',
+        parent: 'settingsSystem',
+        navigation: { title: 'Notifications' },
+        children: [
+          {
+            name: 'notificationLogs',
+            path: '/notifications/logs',
+            auth: 'required',
+            authz: {
+              resource: { type: 'page', id: 'notification.logs' },
+              action: 'access',
+            },
+            componentLoader: () =>
+              import('../../client/pages/settings/notification-templates.js'),
+          },
+        ],
+      },
+    ]);
+    const routes = includeNotificationTemplateRoutes([shell, logs], true);
+    const built = resolveAppClientContributions([
+      {
+        packageName: '@nocobase/app-template-default',
+        source: 'application',
+        routes,
+      },
+    ]);
+    expect(pagePaths(built.routes)).toEqual([
+      '/settings/notifications/logs',
+      '/settings/notifications/templates',
+    ]);
+    expect(built.routes[0].children[0].children).toHaveLength(1);
+    const created = includeNotificationTemplateRoutes([shell], true);
+    expect(
+      created
+        .flatMap((part) => part.routes)
+        .find((route) => route.name === 'notificationManagement')?.parent,
+    ).toBe('settingsSystem');
+  });
+
+  it('exposes configured invitation templates through the real application route factory', async () => {
+    const built = resolveAppClientContributions([
+      {
+        packageName: '@nocobase/app-template-default',
+        source: 'application',
+        routes: createApplicationRoutes({
+          notificationTemplates: { invitationConfigured: true },
+        }),
+      },
+    ]);
+    expect(pagePaths(built.routes)).toContain(
+      '/settings/notifications/templates',
+    );
+    expect(pageAuthorizations(built.routes)).toContainEqual({
+      name: 'notificationTemplates',
+      authorizedAs: 'notification.templates',
+    });
+    for (const loader of componentLoadersIn(built.routes))
+      await expect(loader()).resolves.toMatchObject({
+        default: expect.any(Function),
+      });
+  });
+
+  it('reuses the notification module and preserves its logs and existing grants', () => {
+    const existing = defineAppRoutes([
+      {
+        name: 'settings',
+        path: '/settings',
+        navigation: { title: 'Settings' },
+        children: [
+          {
+            name: 'notificationManagement',
+            navigation: { title: 'Notifications' },
+            children: [
+              {
+                name: 'notificationLogs',
+                path: '/notification-logs',
+                auth: 'required',
+                authz: {
+                  resource: { type: 'page', id: 'existing.notification.logs' },
+                  action: 'access',
+                },
+                componentLoader: () =>
+                  import('../../client/pages/settings/notification-templates.js'),
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    const once = includeNotificationTemplateRoutes([existing], false);
+    expect(includeNotificationTemplateRoutes(once, true)).toBe(once);
+    const built = resolveAppClientContributions([
+      {
+        packageName: '@nocobase/app-template-default',
+        source: 'application',
+        routes: once,
+      },
+    ]);
+    expect(pagePaths(built.routes)).toEqual([
+      '/settings/notification-logs',
+      '/settings/notifications/templates',
+    ]);
+    expect(pageAuthorizations(built.routes)).toEqual([
+      { name: 'notificationLogs', authorizedAs: 'existing.notification.logs' },
+      { name: 'notificationTemplates', authorizedAs: 'notification.templates' },
+    ]);
+    expect(built.routes[0].children).toHaveLength(1);
+  });
+
   it('keeps the landing page and the authentication pages', () => {
     // The authentication plugin and this application have to agree on these paths: it sends an unknown visitor to
     // /login, sends a signed-in user who opens a guest page back to /, and mails a reset link to /reset-password,
@@ -55,15 +185,17 @@ describe('app client routes', () => {
     expect(pageAuthorizations(resolved.routes)).toEqual([
       { name: 'home', authorizedAs: null },
       { name: 'inbox', authorizedAs: null },
+      { name: 'settingsHome', authorizedAs: null },
     ]);
   });
 
-  it('keeps a bare application home-only and supports settings registration as business capabilities are developed', async () => {
+  it('keeps a bare application free of settings modules and supports settings registration as business capabilities are developed', async () => {
+    // Only the settings home, which lists what the viewer may open and grants nothing itself.
     expect(
-      pagePaths(resolveRoutes().routes).some((path) =>
+      pagePaths(resolveRoutes().routes).filter((path) =>
         path.startsWith('/settings'),
       ),
-    ).toBe(false);
+    ).toEqual(['/settings']);
     const built = resolveAppClientContributions([
       {
         packageName: '@nocobase/app-template-default',
@@ -74,6 +206,7 @@ describe('app client routes', () => {
     expect(pageAuthorizations(built.routes)).toEqual([
       { name: 'home', authorizedAs: null },
       { name: 'inbox', authorizedAs: null },
+      { name: 'settingsHome', authorizedAs: null },
       { name: 'settingsUsers', authorizedAs: 'user:*' },
       { name: 'settingsUserCreate', authorizedAs: 'user:*' },
       { name: 'settingsUser', authorizedAs: 'user:*' },

package/tests/client/client-shell.test.tsx

@@ -5,6 +5,7 @@ import {
 import {
   apiClientToken,
   ClientApplicationContext,
+  NavigationGuardProvider,
   type ClientApplication,
   createAppClientConfig,
 } from '@nocobase/app-client';
@@ -83,19 +84,21 @@ describe('application shell', () => {
     expect(
       await screen.findByRole('button', { name: 'Open account menu' }),
     ).not.toHaveAttribute('title');
-    expect(screen.getByRole('button', { name: 'Appearance' })).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Theme' }),
+    ).not.toBeInTheDocument();
     expect(
       screen.queryByRole('link', { name: 'Settings' }),
     ).not.toBeInTheDocument();
-    expect(screen.getByText('AI builds freely.')).toBeVisible();
+    expect(screen.getByText('Build reliable business systems')).toBeVisible();
     expect(screen.getByRole('link', { name: 'NocoBase' })).toHaveAttribute(
       'href',
       'https://www.nocobase.com',
     );
     expect(
       screen.getByText('NocoBase', { selector: 'a' }).parentElement,
-    ).toHaveTextContent('NocoBase keeps it reliable.');
-    expect(screen.getByText('Default Template')).toHaveClass('truncate');
+    ).toHaveTextContent('AI + NocoBase');
+    expect(screen.queryByText('Default Template')).not.toBeInTheDocument();
     expect(screen.getByText('v0.0.0')).toHaveClass('truncate');
     // shadcn's edge rail, with a translated label in place of its built-in one.
     expect(
@@ -199,13 +202,25 @@ describe('application shell', () => {
     expect(
       await screen.findByRole('button', { name: 'Expand navigation' }),
     ).toHaveAttribute('aria-pressed', 'true');
-    // The footer keeps only its shield; focusing it shows the slogan, name and version.
+    // The footer keeps only its shield; focusing it shows the slogan and version.
     const footerIcon = screen.getByRole('img', {
-      name: 'AI builds freely. NocoBase keeps it reliable. Default Template v0.0.0',
+      name: 'AI + NocoBase Build reliable business systems v0.0.0',
     });
     act(() => footerIcon.focus());
     expect(
-      await screen.findByText('Default Template v0.0.0', {
+      await screen.findByText('v0.0.0', {
+        selector: '[data-slot="tooltip-content"] span',
+      }),
+    ).toBeVisible();
+
+    expect(screen.queryByText(/Default Template/)).not.toBeInTheDocument();
+    expect(
+      screen.getByText('AI + NocoBase', {
+        selector: '[data-slot="tooltip-content"] span',
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByText('Build reliable business systems', {
         selector: '[data-slot="tooltip-content"] span',
       }),
     ).toBeVisible();
@@ -221,7 +236,7 @@ describe('application shell', () => {
       ),
     );
     expect(
-      screen.queryByRole('img', { name: /Default Template/ }),
+      screen.queryByRole('img', { name: /AI \+ NocoBase/ }),
     ).not.toBeInTheDocument();
   });
 
@@ -261,7 +276,9 @@ describe('application shell', () => {
     expect(
       screen.queryByRole('navigation', { name: 'Application navigation' }),
     ).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Appearance' })).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Theme' }),
+    ).not.toBeInTheDocument();
   });
 });
 
@@ -312,7 +329,9 @@ function renderApplication(
             <SidebarPreferenceProvider
               value={createAppSidebarPreferenceStore('/main')}
             >
-              <AppRouter clientRoutes={clientRoutes} />
+              <NavigationGuardProvider>
+                <AppRouter clientRoutes={clientRoutes} />
+              </NavigationGuardProvider>
             </SidebarPreferenceProvider>
           </AppThemeProvider>
         </MemoryRouter>

package/tests/client/client-theme.test.tsx

@@ -16,10 +16,27 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
   AppThemeProvider,
-  ThemeSettings,
+  ThemeSettings as ThemeMenu,
   useTheme,
 } from '../../client/theme/index.ts';
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../../client/components/ui/dropdown-menu';
+
+function ThemeSettings(): ReactElement {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>Account</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <ThemeMenu />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 /**
  * Renders the client configuration the server would, mounted at `/crm` so the theme's storage keys are
  * `nocobase:crm:*`. It replaces any block already on the page, since the client reads the first one it finds.
@@ -38,19 +55,65 @@ function renderClientConfig(
   document.head.append(element);
 }
 
-/**
- * Opens the appearance popover from the keyboard. Its trigger opens on hover, and a pointer press landing more than
- * Base UI's 500 ms patient-click threshold after that, as on a loaded runner, closes it again.
- */
-async function openAppearance(name = 'Appearance'): Promise<void> {
-  act(() => screen.getByRole('button', { name }).focus());
+/** Opens the account menu and its Theme submenu using the keyboard. */
+async function openTheme(name = 'Theme'): Promise<void> {
+  act(() => screen.getByRole('button', { name: 'Account' }).focus());
   await userEvent.keyboard('{Enter}');
+  act(() => screen.getByRole('menuitem', { name }).focus());
+  await userEvent.keyboard('{ArrowRight}');
 }
 
 describe('app client theme', () => {
   it.each([
-    ['en-US', 'Appearance', 'Spacious'],
-    ['zh-CN', '外观', '宽松'],
+    ['Light', 'light', 'Compact', 'compact'],
+    ['Dark', 'dark', 'Compact', 'compact'],
+    ['System', 'system', 'Compact', 'compact'],
+    ['Light', 'light', 'Default', 'default'],
+    ['Dark', 'dark', 'Default', 'default'],
+    ['System', 'system', 'Default', 'default'],
+  ])(
+    'saves and restores %s mode with %s / %s density',
+    async (modeLabel, mode, presetLabel, preset) => {
+      const settings = (
+        <AppThemeProvider>
+          <ThemeSettings />
+        </AppThemeProvider>
+      );
+      const view = render(settings);
+      await openTheme();
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: modeLabel }),
+      );
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: presetLabel }),
+      );
+      expect(localStorage.getItem('nocobase:crm:theme:color-scheme')).toBe(
+        mode,
+      );
+      expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe(preset);
+      view.unmount();
+      initializeTheme(
+        '/crm/',
+        themePresets.map(({ id }) => id),
+      );
+      render(settings);
+      await openTheme();
+      expect(document.documentElement).toHaveClass(
+        mode === 'light' ? 'light' : 'dark',
+      );
+      expect(document.documentElement).toHaveAttribute('data-theme', preset);
+      expect(
+        screen.getByRole('menuitemradio', { name: modeLabel }),
+      ).toHaveAttribute('aria-checked', 'true');
+      expect(
+        screen.getByRole('menuitemradio', { name: presetLabel }),
+      ).toHaveAttribute('aria-checked', 'true');
+    },
+  );
+
+  it.each([
+    ['en-US', 'Theme', 'Spacious'],
+    ['zh-CN', '主题', '宽松'],
   ])(
     'labels the default preset without implying default selection (%s)',
     async (locale, appearance, label) => {
@@ -68,28 +131,32 @@ describe('app client theme', () => {
           </AppThemeProvider>
         </I18nProvider>,
       );
-      await openAppearance(appearance);
-      const option = await screen.findByRole('radio', { name: label });
+      await openTheme(appearance);
+      const option = await screen.findByRole('menuitemradio', { name: label });
       await userEvent.click(option);
-      expect(option).toBeChecked();
+      expect(option).toHaveAttribute('aria-checked', 'true');
       expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
     },
   );
 
-  it('changes presets with arrow keys and returns focus on Escape', async () => {
+  it('selects a preset by keyboard and returns focus on Escape', async () => {
     render(
       <AppThemeProvider>
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
-    const compact = await screen.findByRole('radio', { name: 'Compact' });
+    await openTheme();
+    const compact = await screen.findByRole('menuitemradio', {
+      name: 'Compact',
+    });
     act(() => compact.focus());
-    await userEvent.keyboard('{ArrowRight}');
-    expect(screen.getByRole('radio', { name: 'Default' })).toBeChecked();
+    await userEvent.keyboard('{ArrowDown}{Enter}');
+    expect(
+      screen.getByRole('menuitemradio', { name: 'Default' }),
+    ).toHaveAttribute('aria-checked', 'true');
     expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
     await userEvent.keyboard('{Escape}');
-    expect(screen.getByRole('button', { name: 'Appearance' })).toHaveFocus();
+    expect(screen.getByRole('menuitem', { name: 'Theme' })).toHaveFocus();
   });
 
   it('falls back from the removed Ant Design preset without changing mode', async () => {
@@ -100,11 +167,13 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     expect(
-      screen.queryByRole('radio', { name: 'Ant-design' }),
+      screen.queryByRole('menuitemradio', { name: 'Ant-design' }),
     ).not.toBeInTheDocument();
-    expect(await screen.findByRole('radio', { name: 'Compact' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
+    ).toHaveAttribute('aria-checked', 'true');
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     expect(document.documentElement).toHaveClass('light');
   });
@@ -115,13 +184,15 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     expect(
-      screen.queryByRole('radio', { name: 'Ocean' }),
+      screen.queryByRole('menuitemradio', { name: 'Ocean' }),
     ).not.toBeInTheDocument();
-    expect(await screen.findByRole('radio', { name: 'Compact' })).toBeChecked();
     expect(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
   });
@@ -218,12 +289,12 @@ describe('app client theme', () => {
           <ThemeSettings />
         </AppThemeProvider>,
       );
-      await openAppearance();
+      await openTheme();
       expect(
-        await screen.findByRole('radio', {
+        await screen.findByRole('menuitemradio', {
           name: expected === 'compact' ? 'Compact' : 'Default',
         }),
-      ).toBeChecked();
+      ).toHaveAttribute('aria-checked', 'true');
       expect(document.documentElement).toHaveAttribute('data-theme', expected);
       expect(localStorage.getItem(key)).toBe(saved ?? null);
     },
@@ -334,14 +405,16 @@ describe('app client theme', () => {
       </AppThemeProvider>,
     );
 
-    await openAppearance();
+    await openTheme();
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Compact' }),
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
     );
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     expect(document.documentElement).toHaveClass('dark');
     expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('compact');
-    await userEvent.click(await screen.findByRole('radio', { name: 'Light' }));
+    await userEvent.click(
+      await screen.findByRole('menuitemradio', { name: 'Light' }),
+    );
     expect(document.documentElement).toHaveClass('light');
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     fireEvent(
@@ -359,10 +432,12 @@ describe('app client theme', () => {
         newValue: 'default',
       }),
     );
-    expect(await screen.findByRole('radio', { name: 'Default' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
+    ).toHaveAttribute('aria-checked', 'true');
     await userEvent.keyboard('{Escape}');
     await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Appearance' })).toHaveFocus(),
+      expect(screen.getByRole('menuitem', { name: 'Theme' })).toHaveFocus(),
     );
   });
 
@@ -395,11 +470,13 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
+    await userEvent.click(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
+    );
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Light' }),
     );
-    await userEvent.click(await screen.findByRole('radio', { name: 'Light' }));
     expect(document.documentElement).toHaveAttribute('data-theme', 'default');
     expect(document.documentElement).toHaveClass('light');
   });
@@ -410,9 +487,9 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
     );
     fireEvent(
       window,
@@ -438,7 +515,9 @@ describe('app client theme', () => {
       }),
     );
     await waitFor(() => expect(document.documentElement).toHaveClass('dark'));
-    expect(await screen.findByRole('radio', { name: 'System' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'System' }),
+    ).toHaveAttribute('aria-checked', 'true');
   });
 });
 

package/tests/client/foundation-integration.test.ts

@@ -2,10 +2,14 @@ import { describe, expect, it } from 'vitest';
 import { resolveAppRuntime } from '@nocobase/app-client/runtime';
 import { defineAppRuntime } from '@nocobase/app-client/runtime';
 import appRuntime from '../../client/runtime.js';
+import { createApplicationRoutes } from '../../client/routes.js';
 import cliPlugins from '../../cli/plugins.js';
 import serverPlugins from '../../server/plugins.js';
 import settingsRoutes from '../../client/pages/settings/routes.js';
-import { buildRouteNavigation } from '../../client/routing/route-navigation.js';
+import {
+  buildRouteNavigation,
+  buildSettingsCatalog,
+} from '../../client/routing/route-navigation.js';
 
 describe('default Foundation integration', () => {
   it('registers the Foundation deployment evidence build hook', () => {
@@ -15,11 +19,18 @@ describe('default Foundation integration', () => {
       ),
     ).toHaveLength(1);
   });
-  it('exposes Foundation in settings for an unrestricted administrator and removes the empty group when denied', async () => {
+  it('exposes Foundation in System settings for an unrestricted administrator and removes the entry when denied', async () => {
     const runtime = await resolveAppRuntime(appRuntime);
     const menu = buildRouteNavigation(runtime.routes, new Set());
-    const group = menu.find(({ route }) => route.name === 'foundationSettings');
-    const page = group?.children.find(
+    // One System settings entry; Foundation is a card on its home, not a sidebar entry of its own.
+    expect(menu.map(({ route }) => route.name)).toEqual([
+      'home',
+      'settingsHome',
+    ]);
+    const category = buildSettingsCatalog(runtime.routes, new Set()).find(
+      ({ route }) => route.name === 'settingsSystem',
+    );
+    const page = category?.modules.find(
       ({ route }) => route.name === 'foundation',
     )?.route;
     expect(page).toMatchObject({
@@ -28,12 +39,13 @@ describe('default Foundation integration', () => {
       authz: 'unrestricted',
     });
     if (!page) throw new Error('Foundation route missing');
+    const denied = new Set([`${page.packageName}:${page.path}:${page.id}`]);
     expect(
-      buildRouteNavigation(
-        runtime.routes,
-        new Set([`${page.packageName}:${page.path}:${page.id}`]),
-      ).some(({ route }) => route.name === 'foundationSettings'),
-    ).toBe(false);
+      buildRouteNavigation(runtime.routes, denied).map(
+        ({ route }) => route.name,
+      ),
+    ).toEqual(['home']);
+    expect(buildSettingsCatalog(runtime.routes, denied)).toEqual([]);
     expect(
       serverPlugins.plugins.filter(
         (plugin) => plugin.packageName === '@nocobase/app-plugin-foundation',
@@ -41,22 +53,31 @@ describe('default Foundation integration', () => {
     ).toHaveLength(1);
   });
 
-  it('merges Foundation into business settings without changing its protected URL', async () => {
+  it('keeps Foundation beside business settings without changing its protected URL', async () => {
     const runtime = await resolveAppRuntime(
       defineAppRuntime({
         ...appRuntime,
-        routes: [...appRuntime.routes, settingsRoutes],
+        routes: () => [...createApplicationRoutes(), settingsRoutes],
       }),
     );
     const menu = buildRouteNavigation(runtime.routes, new Set());
     expect(menu.some(({ route }) => route.name === 'foundationSettings')).toBe(
       false,
     );
-    const settings = menu.find(({ route }) => route.name === 'settings');
-    expect(settings?.children.at(-1)?.route).toMatchObject({
-      name: 'foundation',
-      path: '/foundation',
-      authz: 'unrestricted',
-    });
+    expect(
+      buildSettingsCatalog(runtime.routes, new Set()).map((category) => [
+        category.route.name,
+        category.modules.map(({ route, target }) => [route.name, target.path]),
+      ]),
+    ).toEqual([
+      [
+        'settingsAccount',
+        [
+          ['settingsUsers', '/settings/users'],
+          ['permissionManagement', '/settings/roles'],
+        ],
+      ],
+      ['settingsSystem', [['foundation', '/foundation']]],
+    ]);
   });
 });