@nocobase/client-v2 3.0.0-alpha.7 → 3.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "3.0.0-alpha.7",
-    "@nocobase/flow-engine": "3.0.0-alpha.7",
-    "@nocobase/sdk": "3.0.0-alpha.7",
-    "@nocobase/shared": "3.0.0-alpha.7",
-    "@nocobase/utils": "3.0.0-alpha.7",
+    "@nocobase/evaluators": "3.0.0-alpha.9",
+    "@nocobase/flow-engine": "3.0.0-alpha.9",
+    "@nocobase/sdk": "3.0.0-alpha.9",
+    "@nocobase/shared": "3.0.0-alpha.9",
+    "@nocobase/utils": "3.0.0-alpha.9",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -48,5 +48,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "19cd28c710f3b3c614ebe2fd7d5a415d527ee559"
+  "gitHead": "82aaad40c5be1120839a11301a48e7fe690f48c3"
 }

package/src/__tests__/app.test.tsx

@@ -379,7 +379,11 @@ describe('app', () => {
     expect(screen.getByText('maintaining dialog message')).toBeInTheDocument();
   });
 
-  it('should keep current content behind maintained dialog state', async () => {
+  it.each([
+    ['pm.enable', 'Enabling plugin'],
+    ['pm.disable', 'Disabling plugin'],
+    ['future.command', 'future.command'],
+  ])('should keep current content behind the default dialog while app commanding: %s', async (commandName, title) => {
     const CurrentPage = () => {
       const [count, setCount] = React.useState(0);
       return <button onClick={() => setCount((value) => value + 1)}>Current page count: {count}</button>;
@@ -398,12 +402,12 @@ describe('app', () => {
     act(() => {
       app.maintained = true;
       app.maintaining = true;
-      app.error = { code: 'APP_COMMANDING', command: { name: 'pm.enable' }, message: 'starting sub applications...' };
+      app.error = { code: 'APP_COMMANDING', command: { name: commandName }, message: 'starting sub applications...' };
     });
 
     expect(screen.getByRole('button', { name: 'Current page count: 1' })).toBeInTheDocument();
     expect(screen.getByRole('dialog')).toBeInTheDocument();
-    expect(screen.getByText('Enabling plugin')).toBeInTheDocument();
+    expect(screen.getByText(title)).toBeInTheDocument();
   });
 
   it('should keep current content without a dialog while app upgrading', async () => {
@@ -431,17 +435,22 @@ describe('app', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 
-  it('should not show Try again for an app upgrade error state', async () => {
+  it.each([
+    ['upgrade', 'App upgrading'],
+    ['pm.enable', 'Enabling plugin'],
+    ['pm.disable', 'Disabling plugin'],
+    ['future.command', 'future.command'],
+  ])('should not show Try again for an app commanding error state: %s', async (commandName, title) => {
     class PluginHelloClient extends Plugin {}
     const app = createMockClient({ plugins: [PluginHelloClient] });
     app.error = Object.assign(new Error('Loading data sources...'), {
       code: 'APP_COMMANDING',
-      command: { name: 'upgrade' },
+      command: { name: commandName },
     });
 
     await renderApp(app);
 
-    expect(screen.getByText('App upgrading')).toBeInTheDocument();
+    expect(screen.getByText(title)).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Try again' })).not.toBeInTheDocument();
   });
 

package/src/__tests__/settings-center.test.tsx

@@ -8,9 +8,10 @@
  */
 
 import { ACLRolesCheckProvider, Plugin } from '@nocobase/client-v2';
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import React from 'react';
 import { message } from 'antd';
+import { vi } from 'vitest';
 import { AdminSettingsLayoutModel as ClientV2AdminSettingsLayoutModel } from '../settings-center';
 import { AdminSettingsLayoutModel as ClientV1AdminSettingsLayoutModel } from '../../../client/src/pm/AdminSettingsLayoutModel';
 import zhCN from '../../../client/src/locale/zh-CN.json';
@@ -253,6 +254,50 @@ describe('settings center', () => {
     expect(await screen.findByText('Demo plugin')).toBeInTheDocument();
   });
 
+  it('should redirect to the admin app when the role cannot access settings', async () => {
+    const originalLocation = globalThis.window.location;
+    const originalModernClientPrefix = window.__nocobase_modern_client_prefix__;
+    const replace = vi.fn();
+    Object.defineProperty(globalThis.window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+    window.__nocobase_modern_client_prefix__ = 'v';
+
+    try {
+      const app = createMockSettingsClient({
+        plugins: [SettingsBuildInPlugin, TestAclPlugin],
+        router: { type: 'memory', initialEntries: ['/settings/system-settings'] },
+      });
+      mockAdminRuntime(app, {
+        snippets: ['!pm', '!pm.system-settings.system-settings'],
+      });
+
+      await renderApp(app);
+      await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+      await waitFor(() => {
+        expect(replace).toHaveBeenCalledWith('/v/admin');
+      });
+      expect(
+        screen.queryByRole('heading', { name: 'Your current role cannot access Settings' }),
+      ).not.toBeInTheDocument();
+    } finally {
+      Object.defineProperty(globalThis.window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+      if (originalModernClientPrefix === undefined) {
+        delete window.__nocobase_modern_client_prefix__;
+      } else {
+        window.__nocobase_modern_client_prefix__ = originalModernClientPrefix;
+      }
+    }
+  });
+
   it('should hide plugin-manager menu item when pm snippet is missing', async () => {
     const app = createMockSettingsClient({
       plugins: [SettingsBuildInPlugin, TestAclPlugin],
@@ -274,7 +319,9 @@ describe('settings center', () => {
       plugins: [SettingsBuildInPlugin, TestAclPlugin],
       router: { type: 'memory', initialEntries: ['/settings/unknown'] },
     });
-    mockAdminRuntime(app);
+    mockAdminRuntime(app, {
+      snippets: ['!pm', '!pm.system-settings.system-settings'],
+    });
 
     await renderApp(app);
     await waitForGetRequests(app, ['/auth:check', 'roles:check']);
@@ -284,6 +331,7 @@ describe('settings center', () => {
     expect(
       within(result).getByText('The settings page you requested does not exist or has been removed.'),
     ).toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/unknown');
   });
 
   it('should allow direct access to hidden page without showing menu entry', async () => {
@@ -311,6 +359,7 @@ describe('settings center', () => {
 
     expect(await screen.findByText('Hidden settings page')).toBeInTheDocument();
     expect(screen.queryByRole('menuitem', { name: 'Hidden demo' })).not.toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/hidden-demo');
   });
 
   it('should show route empty state when direct access page has no permission', async () => {
@@ -344,43 +393,67 @@ describe('settings center', () => {
     expect(within(result).getByRole('heading', { name: '当前角色无权访问设置中心' })).toBeInTheDocument();
     expect(within(result).getByText('请切换至有权限的角色，或联系管理员获取访问权限。')).toBeInTheDocument();
     expect(screen.queryByText('Secure settings page')).not.toBeInTheDocument();
+    expect(app.router.state.location.pathname).toBe('/settings/secure-demo');
   });
 
-  it('should deny a protected child page when a sibling remains visible', async () => {
-    class MixedAccessSettingsPlugin extends Plugin {
+  it('should redirect a denied settings tab to the first accessible tab', async () => {
+    const renderDeniedTab = vi.fn(() => <div>Denied tab content</div>);
+
+    class ProtectedSettingsTabsPlugin extends Plugin {
       async load() {
-        this.pluginSettingsManager.addMenuItem({ key: 'mixed-access', title: 'Mixed access' });
+        this.pluginSettingsManager.addMenuItem({ key: 'protected-tabs', title: 'Protected tabs' });
         this.pluginSettingsManager.addPageTabItem({
-          menuKey: 'mixed-access',
-          key: 'index',
-          title: 'Allowed settings',
-          Component: () => <div>Allowed settings page</div>,
+          menuKey: 'protected-tabs',
+          key: 'a-second',
+          title: 'Second accessible tab',
+          aclSnippet: 'pm.protected-tabs.second',
+          sort: 20,
+          Component: () => <div>Second accessible tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'protected-tabs',
+          key: 'z-first',
+          title: 'First accessible tab',
+          aclSnippet: 'pm.protected-tabs.first',
+          sort: 10,
+          Component: () => <div>First accessible tab content</div>,
         });
         this.pluginSettingsManager.addPageTabItem({
-          menuKey: 'mixed-access',
-          key: 'restricted',
-          title: 'Restricted settings',
-          aclSnippet: 'pm.mixed-access.restricted',
-          Component: () => <div>Restricted settings page</div>,
+          menuKey: 'protected-tabs',
+          key: 'denied',
+          title: 'Denied tab',
+          aclSnippet: 'pm.protected-tabs.denied',
+          sort: 30,
+          Component: renderDeniedTab,
         });
       }
     }
 
     const app = createMockSettingsClient({
-      plugins: [SettingsBuildInPlugin, TestAclPlugin, MixedAccessSettingsPlugin],
-      router: { type: 'memory', initialEntries: ['/settings/mixed-access/restricted'] },
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, ProtectedSettingsTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/protected-tabs/denied'] },
     });
     mockAdminRuntime(app, {
-      snippets: ['pm', 'pm.system-settings.system-settings', '!pm.mixed-access.restricted'],
+      snippets: ['pm', '!pm.protected-tabs.denied'],
     });
 
     await renderApp(app);
     await waitForGetRequests(app, ['/auth:check', 'roles:check']);
 
-    expect(
-      await screen.findByRole('heading', { name: 'Your current role cannot access Settings' }),
-    ).toBeInTheDocument();
-    expect(screen.queryByText('Restricted settings page')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/protected-tabs/z-first');
+    });
+    expect(app.router.router.state.historyAction).toBe('REPLACE');
+    expect(await screen.findByText('First accessible tab content')).toBeInTheDocument();
+    expect(screen.queryByText('Denied tab content')).not.toBeInTheDocument();
+    expect(renderDeniedTab).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await app.router.router.navigate('/settings/protected-tabs/a-second');
+    });
+
+    expect(await screen.findByText('Second accessible tab content')).toBeInTheDocument();
+    expect(app.router.router.state.location.pathname).toBe('/settings/protected-tabs/a-second');
   });
 
   it.each(['/settings/fallback-access', '/settings/fallback-access/'])(
@@ -424,6 +497,134 @@ describe('settings center', () => {
     },
   );
 
+  it('should skip an accessible dynamic tab when its route params cannot be resolved', async () => {
+    class DynamicSettingsTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'dynamic-tabs', title: 'Dynamic tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: ':name',
+          title: 'Dynamic tab',
+          aclSnippet: 'pm.dynamic-tabs.dynamic',
+          sort: 1,
+          Component: () => <div>Dynamic tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: 'fallback',
+          title: 'Static fallback tab',
+          aclSnippet: 'pm.dynamic-tabs.fallback',
+          sort: 2,
+          Component: () => <div>Static fallback tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-tabs',
+          key: 'denied',
+          title: 'Denied tab',
+          aclSnippet: 'pm.dynamic-tabs.denied',
+          sort: 3,
+          Component: () => <div>Denied dynamic tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, DynamicSettingsTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/dynamic-tabs/denied'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.dynamic-tabs.denied'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/dynamic-tabs/fallback');
+    });
+    expect(await screen.findByText('Static fallback tab content')).toBeInTheDocument();
+  });
+
+  it('should preserve resolved route params when redirecting between dynamic tabs', async () => {
+    class DynamicSiblingTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'dynamic-siblings', title: 'Dynamic sibling tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-siblings',
+          key: ':name/channels',
+          title: 'Dynamic channels tab',
+          aclSnippet: 'pm.dynamic-siblings.channels',
+          sort: 1,
+          Component: () => <div>Dynamic channels tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'dynamic-siblings',
+          key: ':name/logs',
+          title: 'Dynamic logs tab',
+          aclSnippet: 'pm.dynamic-siblings.logs',
+          sort: 2,
+          Component: () => <div>Dynamic logs tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, DynamicSiblingTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/dynamic-siblings/email:primary/logs'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.dynamic-siblings.logs'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/dynamic-siblings/email:primary/channels');
+    });
+    expect(await screen.findByText('Dynamic channels tab content')).toBeInTheDocument();
+  });
+
+  it('should resolve hyphenated route param names when redirecting between dynamic tabs', async () => {
+    class HyphenatedParamTabsPlugin extends Plugin {
+      async load() {
+        this.pluginSettingsManager.addMenuItem({ key: 'hyphenated-params', title: 'Hyphenated param tabs' });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'hyphenated-params',
+          key: ':data-source/channels',
+          title: 'Hyphenated channels tab',
+          aclSnippet: 'pm.hyphenated-params.channels',
+          sort: 1,
+          Component: () => <div>Hyphenated channels tab content</div>,
+        });
+        this.pluginSettingsManager.addPageTabItem({
+          menuKey: 'hyphenated-params',
+          key: ':data-source/logs',
+          title: 'Hyphenated logs tab',
+          aclSnippet: 'pm.hyphenated-params.logs',
+          sort: 2,
+          Component: () => <div>Hyphenated logs tab content</div>,
+        });
+      }
+    }
+
+    const app = createMockSettingsClient({
+      plugins: [SettingsBuildInPlugin, TestAclPlugin, HyphenatedParamTabsPlugin],
+      router: { type: 'memory', initialEntries: ['/settings/hyphenated-params/email/logs'] },
+    });
+    mockAdminRuntime(app, {
+      snippets: ['pm', '!pm.hyphenated-params.logs'],
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/settings/hyphenated-params/email/channels');
+    });
+    expect(await screen.findByText('Hyphenated channels tab content')).toBeInTheDocument();
+  });
+
   it('should keep menu visible when menu acl is denied but child page is visible', async () => {
     class MenuAclPlugin extends Plugin {
       async load() {

package/src/components/AppComponents.tsx

@@ -30,8 +30,8 @@ interface AppErrorPayload {
   };
 }
 
-const isAppUpgrading = (error?: AppErrorPayload) =>
-  error?.code === 'APP_COMMANDING' && error.command?.name === 'upgrade';
+const isAppCommanding = (error?: AppErrorPayload) => error?.code === 'APP_COMMANDING';
+const isAppUpgrading = (error?: AppErrorPayload) => isAppCommanding(error) && error?.command?.name === 'upgrade';
 
 export const AppSpin = () => {
   return (
@@ -170,7 +170,7 @@ const getProps = (app: Application) => {
 export const AppError: FC<{ error: Error & { title?: string }; app: Application }> = observer(
   ({ app, error }) => {
     const props = getProps(app);
-    const upgrading = isAppUpgrading(app.error as AppErrorPayload | undefined);
+    const commanding = isAppCommanding(app.error as AppErrorPayload | undefined);
     return (
       <div>
         <Result
@@ -184,7 +184,7 @@ export const AppError: FC<{ error: Error & { title?: string }; app: Application
           title={error?.title || app.i18n.t('App error', { ns: 'client' })}
           subTitle={app.i18n.t(error?.message)}
           extra={
-            upgrading ? null : (
+            commanding ? null : (
               <Button type="primary" key="try" onClick={() => window.location.reload()}>
                 {app.i18n.t('Try again')}
               </Button>

package/src/flow/actions/__tests__/linkageRules.actionStates.test.ts

@@ -0,0 +1,33 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { getActionLinkageStateOptions } from '../linkageRules';
+
+describe('getActionLinkageStateOptions', () => {
+  const t = (key: string) => key;
+
+  it('returns all states for regular action models', () => {
+    expect(getActionLinkageStateOptions({}, t).map((option) => option.value)).toEqual([
+      'visible',
+      'hidden',
+      'hiddenText',
+      'enabled',
+      'disabled',
+    ]);
+  });
+
+  it('filters states declared unsupported by the action model', () => {
+    expect(
+      getActionLinkageStateOptions({ supportedActionLinkageStates: ['visible', 'hidden'] }, t).map(
+        (option) => option.value,
+      ),
+    ).toEqual(['visible', 'hidden']);
+  });
+});

package/src/flow/actions/linkageRules.tsx

@@ -660,6 +660,30 @@ export const linkageSetBlockProps = defineAction({
   },
 });
 
+const ACTION_LINKAGE_STATE_OPTIONS = [
+  { label: 'Visible', value: 'visible' },
+  { label: 'Hidden', value: 'hidden' },
+  { label: 'Hidden text', value: 'hiddenText' },
+  { label: 'Enabled', value: 'enabled' },
+  { label: 'Disabled', value: 'disabled' },
+] as const;
+
+type ActionLinkageState = (typeof ACTION_LINKAGE_STATE_OPTIONS)[number]['value'];
+
+export function getActionLinkageStateOptions(
+  model: { supportedActionLinkageStates?: readonly ActionLinkageState[] },
+  t: (key: string) => string,
+) {
+  const supportedStates = model.supportedActionLinkageStates ? new Set(model.supportedActionLinkageStates) : undefined;
+
+  return ACTION_LINKAGE_STATE_OPTIONS.filter((option) => !supportedStates || supportedStates.has(option.value)).map(
+    (option) => ({
+      label: t(option.label),
+      value: option.value,
+    }),
+  );
+}
+
 export const linkageSetActionProps = defineAction({
   name: 'linkageSetActionProps',
   title: tExpr('Set button state'),
@@ -680,13 +704,7 @@ export const linkageSetActionProps = defineAction({
             onChange={onChange}
             placeholder={t('Please select state')}
             style={{ width: '100%' }}
-            options={[
-              { label: t('Visible'), value: 'visible' },
-              { label: t('Hidden'), value: 'hidden' },
-              { label: t('Hidden text'), value: 'hiddenText' },
-              { label: t('Enabled'), value: 'enabled' },
-              { label: t('Disabled'), value: 'disabled' },
-            ]}
+            options={getActionLinkageStateOptions(ctx.model, t)}
             allowClear
           />
         );