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

package/tests/client/settings-continuity.test.tsx

@@ -1,4 +1,7 @@
-import { renderSettingsClient as renderWithApp } from '../helpers/settings-client.js';
+import type { ReactElement } from 'react';
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { RouteTreeProvider } from '../../client/routing/route-context.js';
+import { renderSettingsClient } from '../helpers/settings-client.js';
 import { answerApi } from '@nocobase/app-testing/client';
 import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
 import {
@@ -23,6 +26,28 @@ import { BackButton } from '../../client/components/back-button.js';
 import enUS from '../../client/locales/en-US.js';
 import zhCN from '../../client/locales/zh-CN.js';
 const namespace = '@nocobase/continuity-test';
+const routes: AppClientRegisteredRoute[] = [
+  '/settings/roles',
+  '/settings/processes/loan',
+].map((path) => ({
+  id: path,
+  name: path,
+  path,
+  packageName: namespace,
+  source: 'application',
+  auth: 'required',
+  authz: 'skip',
+  componentLoader: async () => ({ default: () => null }),
+}));
+// Return targets are registered fixture pages, as they are in the running shell.
+const renderWithApp = (
+  ui: ReactElement,
+  options: Parameters<typeof renderSettingsClient>[1] = {},
+) =>
+  renderSettingsClient(
+    <RouteTreeProvider routes={routes}>{ui}</RouteTreeProvider>,
+    options,
+  );
 const namespaces = {
   [namespace]: {
     'en-US': async () => ({ default: enUS }),
@@ -47,6 +72,7 @@ const options = {
     ],
   },
 };
+const refreshing = enUS['status.refreshing'];
 const row = {
   id: 'alice',
   name: 'Alice',
@@ -77,9 +103,8 @@ it.each(['fast', 'slow'] as const)(
     await renderWithApp(
       <Routes>
         <Route path='/settings/users' element={<UsersPage />}>
-          <Route path=':userId' element={<UserDetail />}>
-            <Route path='edit' element={<UserForm />} />
-          </Route>
+          <Route path=':userId' element={<UserDetail />} />
+          <Route path=':userId/edit' element={<UserForm />} />
         </Route>
       </Routes>,
       {
@@ -110,17 +135,17 @@ it.each(['fast', 'slow'] as const)(
     vi.useFakeTimers();
     try {
       await act(() => vi.advanceTimersByTimeAsync(1000));
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
       await act(async () => {
         fireEvent.click(
           screen.getByRole('button', { name: 'Cancel', exact: true }),
         );
       });
       expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
       if (speed === 'slow') {
         await act(() => vi.advanceTimersByTimeAsync(1000));
-        expect(screen.getByText(enUS.settings.loading)).toBeVisible();
+        expect(screen.getByRole('status', { name: refreshing })).toBeVisible();
         expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
       }
       await act(async () => {
@@ -131,7 +156,7 @@ it.each(['fast', 'slow'] as const)(
       expect(
         screen.getByRole('link', { name: 'Alice refreshed' }),
       ).toBeVisible();
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
     } finally {
       vi.useRealTimers();
     }
@@ -320,9 +345,8 @@ it.each(['/settings/users', '/users'])(
       <>
         <Routes>
           <Route path={base} element={<UsersPage />}>
-            <Route path=':userId' element={<UserDetail />}>
-              <Route path='edit' element={<UserForm />} />
-            </Route>
+            <Route path=':userId' element={<UserDetail />} />
+            <Route path=':userId/edit' element={<UserForm />} />
           </Route>
         </Routes>
         <Location />

package/tests/client/settings-home.test.tsx

@@ -0,0 +1,112 @@
+import packageMetadata from '../../package.json' with { type: 'json' };
+import { createAuthenticatedClientRenderer } from '../helpers/authenticated-client.js';
+import { resolveAppClientContributions } from '@nocobase/app-client/plugins';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import { Route, Routes, useLocation } from 'react-router';
+import { expect, it } from 'vitest';
+import { Breadcrumbs } from '../../client/components/breadcrumbs.js';
+import SettingsHomePage from '../../client/pages/settings/settings-home.js';
+import settingsRoutes from '../../client/pages/settings/routes.js';
+import shellRoutes from '../../client/pages/settings/shell-routes.js';
+import { RouteTreeProvider } from '../../client/routing/route-context.js';
+import { useRouteNavigation } from '../../client/routing/route-navigation.js';
+
+const renderAuthenticatedClient = createAuthenticatedClientRenderer();
+
+const { routes } = resolveAppClientContributions([
+  {
+    packageName: packageMetadata.name,
+    source: 'application',
+    routes: [shellRoutes, settingsRoutes],
+  },
+]);
+
+function Shell({ children }: { children: ReactNode }) {
+  const { denied, loading } = useRouteNavigation(routes);
+  return (
+    <RouteTreeProvider routes={routes} access={{ denied, loading }}>
+      <Breadcrumbs denied={denied} />
+      {children}
+    </RouteTreeProvider>
+  );
+}
+
+function Where() {
+  return <output aria-label='Route'>{useLocation().pathname}</output>;
+}
+
+function mount(
+  options: Parameters<typeof renderAuthenticatedClient>[1] = {},
+  route = '/settings',
+) {
+  return renderAuthenticatedClient(
+    <Shell>
+      <Routes>
+        <Route path='/settings' element={<SettingsHomePage />} />
+        <Route path='*' element={<Where />} />
+      </Routes>
+    </Shell>,
+    { route, ...options },
+  );
+}
+
+it('groups the modules an administrator may open into categories of cards that open by keyboard', async () => {
+  const user = userEvent.setup();
+  await mount();
+  const account = await screen.findByRole('region', {
+    name: 'Accounts and permissions',
+  });
+  const cards = within(account).getAllByRole('link');
+  expect(cards.map((card) => card.textContent)).toEqual([
+    'UsersManage accounts, access and active sessions.',
+    'Permission managementSet what each role can open and do, and the data it can see.',
+  ]);
+  expect(cards[0]).toHaveAttribute('href', '/main/settings/users');
+  expect(cards[1]).toHaveAttribute('href', '/main/settings/roles');
+  // Categories without a module this viewer may open are not shown.
+  expect(screen.getAllByRole('region')).toHaveLength(1);
+  cards[1].focus();
+  await user.keyboard('{Enter}');
+  await waitFor(() =>
+    expect(screen.getByRole('status', { name: 'Route' })).toHaveTextContent(
+      '/settings/roles',
+    ),
+  );
+});
+
+it('shows a restricted viewer only what they may open, opening a tabbed module on its readable view', async () => {
+  await mount({
+    member: true,
+    grants: [
+      {
+        resource: { type: 'settings', id: 'authorization.default-access' },
+        actions: [{ action: 'read' }],
+      },
+    ],
+  });
+  const account = await screen.findByRole('region', {
+    name: 'Accounts and permissions',
+  });
+  // Categories without a module this viewer may open are not shown.
+  expect(screen.getAllByRole('region')).toHaveLength(1);
+  const cards = within(account).getAllByRole('link');
+  expect(cards).toHaveLength(1);
+  expect(cards[0]).toHaveAttribute('href', '/main/settings/default-access');
+});
+
+it('explains when there is nothing to manage', async () => {
+  await mount({ member: true, locale: 'zh-CN' });
+  expect(await screen.findByText('暂时没有你可以管理的设置。')).toBeVisible();
+  expect(screen.getByRole('heading', { name: '系统设置' })).toBeVisible();
+});
+
+it('links the System settings breadcrumb back to the home from a module view', async () => {
+  await mount({}, '/settings/roles');
+  const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
+  expect(
+    await within(trail).findByRole('link', { name: 'System settings' }),
+  ).toHaveAttribute('href', '/main/settings');
+  expect(within(trail).getByText('Roles and permissions')).toBeVisible();
+});

package/tests/client/settings-idle-list.test.tsx

@@ -0,0 +1,124 @@
+import { answerApi } from '@nocobase/app-testing/client';
+import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
+import {
+  AuthorizationClient,
+  authorizationClientToken,
+} from '@nocobase/app-plugin-authorization/client';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Route, Routes, useNavigate } from 'react-router';
+import { expect, it, vi } from 'vitest';
+import { renderSettingsClient } from '../helpers/settings-client.js';
+import UsersPage from '../../client/pages/settings/users.js';
+import UserForm from '../../client/pages/settings/user-form.js';
+import RolesPage from '../../client/pages/settings/roles.js';
+import enUS from '../../client/locales/en-US.js';
+
+const namespace = '@nocobase/idle-list-test';
+const services = (app: ClientApplication) =>
+  app.container.instance(
+    authorizationClientToken,
+    new AuthorizationClient(app.container.resolve(apiClientToken)),
+  );
+function ReturnToRoles() {
+  const navigate = useNavigate();
+  return (
+    <button onClick={() => void navigate('/settings/roles')}>
+      Return to roles
+    </button>
+  );
+}
+
+it.each(['users', 'roles'] as const)(
+  'keeps a cold %s child route silent and starts real loading on return',
+  async (kind) => {
+    const listPath =
+      kind === 'users' ? 'users' : 'authorization/permissionSets';
+    let finish!: (value: unknown) => void;
+    const response = new Promise((resolve) => {
+      finish = resolve;
+    });
+    const calls = vi.fn(({ path }: { path: string }) => {
+      if (path === 'authorization/permissions')
+        return { data: { unrestricted: true, permissions: [] } };
+      if (path === 'users/options') return { data: { roleScopes: [] } };
+      if (path === listPath) return response;
+      return new Response(null, { status: 404 });
+    });
+    await renderSettingsClient(
+      <Routes>
+        <Route path='/settings/users' element={<UsersPage />}>
+          <Route path='create' element={<UserForm />} />
+        </Route>
+        <Route path='/settings/roles' element={<RolesPage />}>
+          <Route path='create' element={<ReturnToRoles />} />
+        </Route>
+      </Routes>,
+      {
+        route: `/settings/${kind}/create`,
+        namespace,
+        namespaces: {
+          [namespace]: { 'en-US': async () => ({ default: enUS }) },
+        },
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    // The real Users form is interactive; Roles uses the real list with a nested route.
+    const close = await screen.findByRole('button', {
+      name: kind === 'users' ? 'Cancel' : 'Return to roles',
+      exact: true,
+    });
+    vi.useFakeTimers();
+    try {
+      await act(() => vi.advanceTimersByTimeAsync(10_000));
+      expect(
+        calls.mock.calls.filter(([call]) => call.path === listPath),
+      ).toHaveLength(0);
+      expect(document.querySelector('[data-slot="loading"]')).toBeNull();
+      expect(screen.queryByText(enUS.pendingFeedback.longWait)).toBeNull();
+      expect(screen.queryByText(enUS.listFeedback.empty)).toBeNull();
+      await act(async () => {
+        fireEvent.click(close);
+      });
+      expect(
+        calls.mock.calls.filter(([call]) => call.path === listPath),
+      ).toHaveLength(1);
+      await act(() => vi.advanceTimersByTimeAsync(299));
+      expect(screen.queryByRole('status')).toBeNull();
+      await act(() => vi.advanceTimersByTimeAsync(1));
+      expect(screen.getAllByRole('status')).toHaveLength(1);
+      expect(screen.getByRole('status')).toHaveTextContent(
+        enUS.listFeedback.loading,
+      );
+      await act(async () => {
+        finish(
+          kind === 'users'
+            ? {
+                data: [
+                  {
+                    id: 'alice',
+                    name: 'Alice',
+                    username: 'alice',
+                    email: 'alice@example.test',
+                    roleScopes: {},
+                    disabledAt: null,
+                  },
+                ],
+                meta: { total: 1 },
+              }
+            : { data: [{ key: 'team', title: 'Team', grants: [] }] },
+        );
+        await response;
+      });
+    } finally {
+      finish({ data: [], meta: { total: 0 } });
+      vi.useRealTimers();
+    }
+    await waitFor(() =>
+      expect(
+        screen.getByText(kind === 'users' ? 'Alice' : 'Team', { exact: true }),
+      ).toBeVisible(),
+    );
+    expect(screen.queryByRole('status')).toBeNull();
+  },
+);

package/tests/client/settings-navigation.test.ts

@@ -0,0 +1,230 @@
+import {
+  defineAppRoutes,
+  resolveAppClientContributions,
+  type AppClientRegisteredRoute,
+} from '@nocobase/app-client/plugins';
+import { describe, expect, it } from 'vitest';
+import foundation from '@nocobase/app-plugin-foundation/client/routes';
+import settings from '../../client/pages/settings/routes.js';
+import shell from '../../client/pages/settings/shell-routes.js';
+import { createApplicationRoutes } from '../../client/routes.js';
+import {
+  buildRouteNavigation,
+  buildSettingsCatalog,
+  filterRouteTree,
+  selectedNavigationId,
+  routeKey,
+} from '../../client/routing/route-navigation.js';
+
+const componentLoader = async () => ({ default: () => null });
+const app = '@nocobase/app-template-default';
+
+function resolve(...extra: ReturnType<typeof defineAppRoutes>[]) {
+  return resolveAppClientContributions([
+    {
+      packageName: app,
+      source: 'application',
+      routes: [shell, settings, ...extra],
+    },
+  ]).routes;
+}
+
+function find(
+  routes: readonly AppClientRegisteredRoute[],
+  name: string,
+): AppClientRegisteredRoute {
+  for (const route of routes) {
+    if (route.name === name) return route;
+    const nested = route.children && find(route.children, name);
+    if (nested) return nested;
+  }
+  return undefined as unknown as AppClientRegisteredRoute;
+}
+
+const catalog = (
+  routes: readonly AppClientRegisteredRoute[],
+  denied = new Set<string>(),
+) =>
+  buildSettingsCatalog(routes, denied).map((category) => [
+    category.route.name,
+    category.modules.map((module) => [module.route.name, module.target.path]),
+  ]);
+
+describe('System settings navigation', () => {
+  it('keeps the existing URLs and authorization of the settings pages', () => {
+    const routes = resolve();
+    expect(
+      [
+        'settingsHome',
+        'settingsUsers',
+        'settingsRoles',
+        'settingsDefaultAccess',
+      ].map((name) => {
+        const route = find(routes, name);
+        return [name, route.path, route.authz];
+      }),
+    ).toEqual([
+      ['settingsHome', '/settings', 'skip'],
+      [
+        'settingsUsers',
+        '/settings/users',
+        { resource: { type: 'user', id: '*' }, action: 'read' },
+      ],
+      [
+        'settingsRoles',
+        '/settings/roles',
+        {
+          resource: { type: 'settings', id: 'authorization.permission-sets' },
+          action: 'read',
+        },
+      ],
+      [
+        'settingsDefaultAccess',
+        '/settings/default-access',
+        {
+          resource: { type: 'settings', id: 'authorization.default-access' },
+          action: 'read',
+        },
+      ],
+    ]);
+    expect(find(routes, 'settingsUsers').id).toBe(`${app}:settingsUsers`);
+  });
+
+  it('shows one sidebar entry that opens the home and stays selected on every settings page', () => {
+    const routes = resolve();
+    const menu = buildRouteNavigation(routes, new Set());
+    expect(menu.map(({ route }) => [route.name, route.path])).toEqual([
+      ['settingsHome', '/settings'],
+    ]);
+    expect(menu[0].children).toEqual([]);
+    expect(menu[0].route.navigation?.title).toBe('settings.title');
+    const entry = routeKey(menu[0].route);
+    for (const path of [
+      '/settings',
+      '/settings/users',
+      '/settings/users/create',
+      '/settings/roles/member/edit',
+      '/settings/default-access',
+    ])
+      expect(selectedNavigationId(routes, path)).toBe(entry);
+  });
+
+  it('groups modules into categories, opens a tabbed module on its first readable tab and hides empty categories', () => {
+    const routes = resolve();
+    expect(catalog(routes)).toEqual([
+      [
+        'settingsAccount',
+        [
+          ['settingsUsers', '/settings/users'],
+          ['permissionManagement', '/settings/roles'],
+        ],
+      ],
+    ]);
+    const roles = find(routes, 'settingsRoles');
+    expect(catalog(routes, new Set([routeKey(roles)]))).toEqual([
+      [
+        'settingsAccount',
+        [
+          ['settingsUsers', '/settings/users'],
+          ['permissionManagement', '/settings/default-access'],
+        ],
+      ],
+    ]);
+    const denied = new Set(
+      ['settingsUsers', 'settingsRoles', 'settingsDefaultAccess'].map((name) =>
+        routeKey(find(routes, name)),
+      ),
+    );
+    expect(catalog(routes, denied)).toEqual([]);
+    // Without a module to open, the sidebar entry disappears too.
+    expect(buildRouteNavigation(routes, denied)).toEqual([]);
+  });
+
+  it('adds a later module with several views to its category without another sidebar entry', () => {
+    const routes = resolve(
+      defineAppRoutes([
+        {
+          parent: 'settingsSystem',
+          name: 'notificationManagement',
+          navigation: {
+            title: 'Notifications',
+            description: 'Channels and delivery records.',
+          },
+          breadcrumb: { title: 'Notifications' },
+          children: [
+            {
+              name: 'notificationLogs',
+              path: '/notifications/logs',
+              authz: {
+                resource: { type: 'page', id: 'notification.logs' },
+                action: 'access',
+              },
+              navigation: { title: 'Delivery logs' },
+              componentLoader,
+            },
+          ],
+        },
+      ]),
+    );
+    expect(find(routes, 'notificationLogs').path).toBe(
+      '/settings/notifications/logs',
+    );
+    expect(catalog(routes).at(-1)).toEqual([
+      'settingsSystem',
+      [['notificationManagement', '/settings/notifications/logs']],
+    ]);
+    expect(buildRouteNavigation(routes, new Set())).toHaveLength(1);
+    expect(selectedNavigationId(routes, '/settings/notifications/logs')).toBe(
+      routeKey(buildRouteNavigation(routes, new Set())[0].route),
+    );
+  });
+
+  it('places a plugin module registered outside the categories under System', () => {
+    const routes = resolveAppClientContributions([
+      { packageName: app, source: 'application', routes: [shell] },
+      {
+        packageName: '@nocobase/app-plugin-foundation',
+        source: 'plugin',
+        routes: foundation,
+      },
+    ]).routes;
+    // The bare shell: only App Foundation, which only an unrestricted administrator may open.
+    const menu = buildRouteNavigation(routes, new Set());
+    expect(menu.map(({ route }) => route.name)).toEqual(['settingsHome']);
+    expect(catalog(routes)).toEqual([
+      ['settingsSystem', [['foundation', '/foundation']]],
+    ]);
+    // The signed-in shell receives the tree filtered to its pages; empty categories keep their titles there.
+    const signedIn = filterRouteTree(
+      routes,
+      (route) => route.auth === 'required',
+    );
+    expect(catalog(signedIn)).toEqual([
+      ['settingsSystem', [['foundation', '/foundation']]],
+    ]);
+    const page = find(routes, 'foundation');
+    expect(page.navigation?.description).toBe('nav.foundationDescription');
+    expect(buildRouteNavigation(routes, new Set([routeKey(page)]))).toEqual([]);
+  });
+
+  it('shows the notification template view as a System card once an invitation mailer is configured', () => {
+    const routes = resolveAppClientContributions([
+      {
+        packageName: app,
+        source: 'application',
+        routes: createApplicationRoutes({
+          notificationTemplates: { invitationConfigured: true },
+        }),
+      },
+    ]).routes;
+    expect(catalog(routes)).toEqual([
+      [
+        'settingsSystem',
+        [['notificationManagement', '/settings/notifications/templates']],
+      ],
+    ]);
+    expect(
+      buildRouteNavigation(routes, new Set()).map(({ route }) => route.name),
+    ).toEqual(['home', 'settingsHome']);
+  });
+});

package/tests/client/user-drawer.test.tsx

@@ -51,9 +51,8 @@ function Pages({ base }: { readonly base: string }) {
       <Routes>
         <Route path={base} element={<UsersPage />}>
           <Route path='create' element={<UserForm />} />
-          <Route path=':userId' element={<UserDetail />}>
-            <Route path='edit' element={<UserForm />} />
-          </Route>
+          <Route path=':userId' element={<UserDetail />} />
+          <Route path=':userId/edit' element={<UserForm />} />
         </Route>
         <Route path='*' element={<h1>Fallback home</h1>} />
       </Routes>
@@ -451,7 +450,7 @@ it('blocks closing and duplicate submission until the unified save completes', a
   await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
   await waitFor(() => expect(name).toBeDisabled());
   expect(
-    screen.getByRole('button', { name: enUS.settings.saving }),
+    await screen.findByRole('button', { name: enUS.settings.saving }),
   ).toBeDisabled();
   expect(
     screen.getByRole('button', { name: 'Cancel', exact: true }),

package/tests/fixtures/dialog-footer.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Dialog footer regression</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/tests/fixtures/dialog-footer.tsx"></script>
+  </body>
+</html>