@nocobase/client-v2 2.1.0-beta.29 → 2.1.0-beta.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.29",
+  "version": "2.1.0-beta.32",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,11 +24,12 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-beta.29",
-    "@nocobase/sdk": "2.1.0-beta.29",
-    "@nocobase/shared": "2.1.0-beta.29",
+    "@nocobase/flow-engine": "2.1.0-beta.32",
+    "@nocobase/sdk": "2.1.0-beta.32",
+    "@nocobase/shared": "2.1.0-beta.32",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
+    "axios": "^1.7.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
     "i18next": "^22.4.9",
@@ -37,5 +38,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "86c41be29dcbcac6fd6aa46b4a137ef07a27c1d0"
+  "gitHead": "659c5efe992da7118d33c768bbd9e837a2c4716f"
 }

package/src/BaseApplication.tsx

@@ -586,19 +586,25 @@ export class ApplicationModel extends FlowModel {
   }
 
   render() {
-    if (this.app.maintaining) {
-      return this.renderMaintaining();
+    if (this.app.maintaining && !this.app.maintained) {
+      return <>{this.renderMaintaining()}</>;
     }
-    if (this.app.error) {
-      return this.renderError();
+    if (this.app.error && !this.app.maintaining) {
+      return <>{this.renderError()}</>;
     }
-    return this.renderContent();
+    return (
+      <>
+        {this.renderContent()}
+        {this.app.maintaining && this.app.maintained ? this.renderMaintainingDialog() : null}
+      </>
+    );
   }
 
   renderMaintaining() {
-    if (!this.app.maintained) {
-      return this.app.renderComponent('AppMaintaining', { app: this.app, error: this.app.error });
-    }
+    return this.app.renderComponent('AppMaintaining', { app: this.app, error: this.app.error });
+  }
+
+  renderMaintainingDialog() {
     return this.app.renderComponent('AppMaintainingDialog', { app: this.app, error: this.app.error });
   }
 

package/src/PluginManager.ts

@@ -25,6 +25,7 @@ export type PluginData = {
   packageName: string;
   version: string;
   url: string;
+  clientV2Url?: string;
   type: 'local' | 'upload' | 'npm';
 };
 

package/src/__tests__/app.test.tsx

@@ -9,7 +9,7 @@
 
 import { Application, createMockClient, NocoBaseBuildInPlugin, Plugin } from '@nocobase/client-v2';
 import { useFlowEngineContext } from '@nocobase/flow-engine';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
@@ -254,6 +254,33 @@ describe('app', () => {
     expect(screen.getByText('maintaining dialog message')).toBeInTheDocument();
   });
 
+  it('should keep current content behind maintained dialog state', async () => {
+    const CurrentPage = () => {
+      const [count, setCount] = React.useState(0);
+      return <button onClick={() => setCount((value) => value + 1)}>Current page count: {count}</button>;
+    };
+
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', { path: '/', Component: CurrentPage });
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+    fireEvent.click(screen.getByRole('button', { name: 'Current page count: 0' }));
+    expect(screen.getByRole('button', { name: 'Current page count: 1' })).toBeInTheDocument();
+
+    act(() => {
+      app.maintained = true;
+      app.maintaining = true;
+      app.error = { code: 'APP_COMMANDING', command: { name: 'pm.enable' }, 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();
+  });
+
   it('should handle long loading state gracefully', async () => {
     class PluginHelloClient extends Plugin {
       async load() {

package/src/__tests__/nocobase-buildin-plugin-auth.test.tsx

@@ -8,13 +8,29 @@
  */
 
 import { createMockClient } from '@nocobase/client-v2';
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { NocoBaseBuildInPlugin } from '../nocobase-buildin-plugin';
 
 describe('nocobase buildin plugin auth redirect', () => {
   const originalLocation = globalThis.window.location;
 
+  beforeEach(() => {
+    Object.defineProperty(globalThis.window, 'matchMedia', {
+      configurable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+  });
+
   afterEach(() => {
     Object.defineProperty(globalThis.window, 'location', {
       configurable: true,
@@ -92,7 +108,7 @@ describe('nocobase buildin plugin auth redirect', () => {
     });
   });
 
-  it('should redirect authenticated v2 admin root to legacy default page before layout render', async () => {
+  it('should render v2 admin root without redirecting to legacy default page', async () => {
     const replace = vi.fn();
     Object.defineProperty(globalThis.window, 'location', {
       configurable: true,
@@ -118,6 +134,7 @@ describe('nocobase buildin plugin auth redirect', () => {
       },
     });
     app.apiMock.onGet('/auth:check').reply(200, { data: { id: 1 } });
+    app.apiMock.onGet('systemSettings:get').reply(200, { data: {} });
     app.apiMock.onGet('/desktopRoutes:listAccessible').reply(200, {
       data: [
         {
@@ -133,53 +150,57 @@ describe('nocobase buildin plugin auth redirect', () => {
     const { container } = render(<Root />);
 
     await waitFor(() => {
-      expect(replace).toHaveBeenCalledWith('/admin/legacy-page');
+      expect(container.innerHTML).toContain('No pages yet, please configure first');
     });
+    expect(replace).not.toHaveBeenCalled();
     expect(container.innerHTML).not.toContain('Legacy page');
   });
 
-  it('should redirect authenticated direct legacy v2 page access to v1 path', async () => {
-    const replace = vi.fn();
-    Object.defineProperty(globalThis.window, 'location', {
-      configurable: true,
-      value: {
-        ...originalLocation,
-        pathname: '/v2/admin/legacy-page/tab/tab-1',
-        search: '?from=direct',
-        hash: '#dialog',
-        replace,
-      },
-    });
-
-    const app = createMockClient({
-      publicPath: '/v2/',
-      plugins: [NocoBaseBuildInPlugin as any],
-      router: { type: 'memory', initialEntries: ['/v2/admin/legacy-page/tab/tab-1'] },
-    });
-    app.apiMock.onGet('app:getLang').reply(200, {
-      data: {
-        lang: 'en-US',
-        resources: { client: {} },
-        cron: {},
-      },
-    });
-    app.apiMock.onGet('/auth:check').reply(200, { data: { id: 1 } });
-    app.apiMock.onGet('/desktopRoutes:listAccessible').reply(200, {
-      data: [
-        {
-          id: 1,
-          title: 'Legacy page',
-          schemaUid: 'legacy-page',
-          type: 'page',
+  it.each(['/v2/admin/legacy-page/tab/tab-1', '/v2/admin/legacy-page/view/detail'])(
+    'should show 404 for authenticated direct legacy v2 page access: %s',
+    async (pathname) => {
+      const replace = vi.fn();
+      Object.defineProperty(globalThis.window, 'location', {
+        configurable: true,
+        value: {
+          ...originalLocation,
+          pathname,
+          search: '?from=direct',
+          hash: '#dialog',
+          replace,
         },
-      ],
-    });
-
-    const Root = app.getRootComponent();
-    render(<Root />);
-
-    await waitFor(() => {
-      expect(replace).toHaveBeenCalledWith('/admin/legacy-page/tabs/tab-1?from=direct#dialog');
-    });
-  });
+      });
+
+      const app = createMockClient({
+        publicPath: '/v2/',
+        plugins: [NocoBaseBuildInPlugin as any],
+        router: { type: 'memory', initialEntries: [pathname] },
+      });
+      app.apiMock.onGet('app:getLang').reply(200, {
+        data: {
+          lang: 'en-US',
+          resources: { client: {} },
+          cron: {},
+        },
+      });
+      app.apiMock.onGet('/auth:check').reply(200, { data: { id: 1 } });
+      app.apiMock.onGet('systemSettings:get').reply(200, { data: {} });
+      app.apiMock.onGet('/desktopRoutes:listAccessible').reply(200, {
+        data: [
+          {
+            id: 1,
+            title: 'Legacy page',
+            schemaUid: 'legacy-page',
+            type: 'page',
+          },
+        ],
+      });
+
+      const Root = app.getRootComponent();
+      render(<Root />);
+
+      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(replace).not.toHaveBeenCalled();
+    },
+  );
 });

package/src/__tests__/remotePlugins.test.ts

@@ -9,7 +9,7 @@
 
 import { Plugin } from '../Plugin';
 import { getRequireJs } from '../utils/requirejs';
-import { defineDevPlugins, definePluginClient, getPlugins } from '../utils/remotePlugins';
+import { configRequirejs, defineDevPlugins, getPlugins } from '../utils/remotePlugins';
 
 describe('client-v2 remotePlugins', () => {
   afterEach(() => {
@@ -29,19 +29,6 @@ describe('client-v2 remotePlugins', () => {
     expect(mockDefine).toHaveBeenCalledWith('@nocobase/demo/client-v2', expect.any(Function));
   });
 
-  it('should define remote plugin proxies with /client-v2 module ids', () => {
-    const mockDefine: any = vi.fn();
-    window.define = mockDefine;
-
-    definePluginClient('@nocobase/demo');
-
-    expect(mockDefine).toHaveBeenCalledWith(
-      '@nocobase/demo/client-v2',
-      ['exports', '@nocobase/demo'],
-      expect.any(Function),
-    );
-  });
-
   it('should not define /client aliases when loading v2 plugins', async () => {
     class DemoPlugin extends Plugin {}
 
@@ -71,16 +58,40 @@ describe('client-v2 remotePlugins', () => {
     expect(mockDefine).not.toHaveBeenCalledWith('@nocobase/demo/client', expect.any(Function));
   });
 
+  it('should configure remote plugin paths with /client-v2 module ids', () => {
+    const requirejs: any = {
+      requirejs: {
+        config: vi.fn(),
+      },
+    };
+
+    configRequirejs(requirejs, [
+      {
+        packageName: '@nocobase/demo',
+        url: '/static/plugins/@nocobase/demo/dist/client-v2/index.js',
+      },
+    ] as any);
+
+    expect(requirejs.requirejs.config).toHaveBeenCalledWith({
+      waitSeconds: 120,
+      paths: {
+        '@nocobase/demo/client-v2': '/static/plugins/@nocobase/demo/dist/client-v2/index.js',
+      },
+    });
+  });
+
   it('should not append duplicate .js for plugin URLs without query strings', () => {
     const requirejs = getRequireJs();
 
     requirejs.requirejs.config({
       paths: {
-        '@nocobase/demo': '/static/plugins/@nocobase/demo/dist/client-v2/index.js',
+        '@nocobase/demo/client-v2': '/static/plugins/@nocobase/demo/dist/client-v2/index.js',
       },
     });
 
-    expect(requirejs.requirejs.toUrl('@nocobase/demo')).toBe('/static/plugins/@nocobase/demo/dist/client-v2/index.js');
+    expect(requirejs.requirejs.toUrl('@nocobase/demo/client-v2')).toBe(
+      '/static/plugins/@nocobase/demo/dist/client-v2/index.js',
+    );
   });
 
   it('should keep hashed plugin URLs unchanged', () => {
@@ -88,11 +99,11 @@ describe('client-v2 remotePlugins', () => {
 
     requirejs.requirejs.config({
       paths: {
-        '@nocobase/demo': '/static/plugins/@nocobase/demo/dist/client-v2/index.js?hash=12345678',
+        '@nocobase/demo/client-v2': '/static/plugins/@nocobase/demo/dist/client-v2/index.js?hash=12345678',
       },
     });
 
-    expect(requirejs.requirejs.toUrl('@nocobase/demo')).toBe(
+    expect(requirejs.requirejs.toUrl('@nocobase/demo/client-v2')).toBe(
       '/static/plugins/@nocobase/demo/dist/client-v2/index.js?hash=12345678',
     );
   });

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

@@ -158,6 +158,36 @@ describe('settings center', () => {
     expect(await screen.findByDisplayValue('NocoBase')).toBeInTheDocument();
   });
 
+  it('should expose current language variable as enabled-language selector', async () => {
+    const app = createMockClient({
+      plugins: [NocoBaseBuildInPlugin, TestAclPlugin],
+      router: { type: 'memory', initialEntries: ['/admin/settings/system-settings'] },
+    });
+    mockAdminRuntime(app, {
+      systemSettings: {
+        enabledLanguages: ['en-US', 'zh-CN'],
+      },
+    });
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check', 'systemSettings:get']);
+
+    await waitFor(() => {
+      const localeNode = app.flowEngine.context.getPropertyMetaTree().find((node) => node.name === 'locale');
+      expect(localeNode).toMatchObject({
+        name: 'locale',
+        title: '{{t("Current language")}}',
+        interface: 'select',
+        uiSchema: {
+          enum: [
+            { label: 'English', value: 'en-US' },
+            { label: '简体中文', value: 'zh-CN' },
+          ],
+        },
+      });
+    });
+  });
+
   it('should fallback to plugin-manager when system-settings is not allowed', async () => {
     const app = createMockClient({
       plugins: [NocoBaseBuildInPlugin, TestAclPlugin],

package/src/components/form/DrawerFormLayout.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 { CloseOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { useFlowView } from '@nocobase/flow-engine';
+import { Button, Space } from 'antd';
+import React, { useCallback } from 'react';
+
+export interface DrawerFormLayoutProps {
+  /** Header title rendered next to the close (X) button. */
+  title: React.ReactNode;
+  /** Form body — typically a `<Form>` wrapping `<Form.Item>` fields. */
+  children: React.ReactNode;
+  /**
+   * Called before the drawer is closed by either the Cancel button or the
+   * header's X icon. Use for "discard changes" confirmations.
+   */
+  onCancel?: () => void | Promise<void>;
+  /**
+   * Called when the Submit button is clicked. Caller owns validation + the
+   * actual API call; the drawer is closed automatically when `onSubmit`
+   * resolves. Throw from `onSubmit` to keep the drawer open (e.g. on a
+   * validation error).
+   */
+  onSubmit?: () => void | Promise<void>;
+  /** Drives the Submit button's loading state. */
+  submitting?: boolean;
+  /** Override the Submit button label. Defaults to "Submit". */
+  submitText?: React.ReactNode;
+  /** Override the Cancel button label. Defaults to "Cancel". */
+  cancelText?: React.ReactNode;
+  /**
+   * Full override of the footer content. When provided, the default
+   * Cancel + Submit buttons are replaced. Useful for forms that need
+   * extra actions (e.g. Preview, Save draft).
+   */
+  footer?: React.ReactNode;
+}
+
+const titleClassName = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: -8px;
+`;
+
+/**
+ * Standard layout for drawer-hosted forms: a close-icon + title header on
+ * top, the caller-provided form body in the middle, and a Cancel + Submit
+ * footer at the bottom. Wraps `useFlowView()`'s `Header` / `Footer` slots
+ * so the drawer chrome stays consistent across plugins.
+ *
+ * Callers own the `<Form>` instance, validation, and the actual API call.
+ * This component only handles the chrome and the close behaviour.
+ */
+export function DrawerFormLayout(props: DrawerFormLayoutProps) {
+  const view = useFlowView();
+
+  const handleCancel = useCallback(async () => {
+    await props.onCancel?.();
+    await view.close();
+  }, [props, view]);
+
+  const handleSubmit = useCallback(async () => {
+    await props.onSubmit?.();
+    await view.close();
+  }, [props, view]);
+
+  return (
+    <div>
+      {view.Header ? (
+        <view.Header
+          title={
+            <span className={titleClassName}>
+              <Button type="text" size="small" icon={<CloseOutlined />} onClick={handleCancel} />
+              <span>{props.title}</span>
+            </span>
+          }
+        />
+      ) : null}
+      {props.children}
+      {view.Footer ? (
+        <view.Footer>
+          {props.footer ?? (
+            <Space>
+              <Button onClick={handleCancel}>{props.cancelText ?? 'Cancel'}</Button>
+              <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+                {props.submitText ?? 'Submit'}
+              </Button>
+            </Space>
+          )}
+        </view.Footer>
+      ) : null}
+    </div>
+  );
+}

package/src/components/form/EnvVariableInput.tsx

@@ -0,0 +1,126 @@
+/**
+ * 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 {
+  useFlowContext,
+  VariableHybridInput,
+  type MetaTreeNode,
+  type VariableHybridInputConverters,
+} from '@nocobase/flow-engine';
+import { useRequest } from 'ahooks';
+import { Input } from 'antd';
+import React, { useMemo } from 'react';
+
+const ENV_EXPR_REGEXP = /\{\{\s*(\$env\.[^{}]+?)\s*\}\}/g;
+const ENV_SINGLE_EXPR_REGEXP = /^\{\{\s*(\$env\.[^{}]+?)\s*\}\}$/;
+const META_TREE_CACHE_KEY = '@nocobase/client-v2:EnvVariableInput:metaTree';
+
+/**
+ * Convert a stored value like `"{{ $env.foo.bar }}"` back into the
+ * `[$env, foo, bar]` path used by the variable picker.
+ */
+export function parseEnvPath(value?: string): string[] | undefined {
+  const matched = value?.trim().match(ENV_SINGLE_EXPR_REGEXP);
+  return matched?.[1] ? matched[1].split('.') : undefined;
+}
+
+/**
+ * Format a meta tree node back into a `"{{ $env.x.y }}"` server-compatible
+ * expression. Used as the `formatPathToValue` converter so the picker output
+ * survives a round trip through the API.
+ */
+export function formatEnvPath(meta?: MetaTreeNode) {
+  const paths = meta?.paths || [];
+  if (paths[0] !== '$env' || paths.length < 2) {
+    return undefined;
+  }
+  return `{{ ${paths.join('.')} }}`;
+}
+
+/**
+ * Pull the `$env` sub-tree off the FlowContext meta registry and eagerly
+ * resolve lazy `children` thunks so the picker can render labels on first
+ * paint. Empty tree (no env-variables plugin or no defined vars) yields `[]`.
+ */
+function useEnvMetaTree(): MetaTreeNode[] {
+  const ctx = useFlowContext();
+  const { data } = useRequest<MetaTreeNode[], []>(
+    async () => {
+      const tree = ctx.getPropertyMetaTree().filter((node) => node.name === '$env');
+      for (const node of tree) {
+        if (typeof node.children === 'function') {
+          try {
+            const resolved = await (node.children as () => Promise<MetaTreeNode[]>)();
+            node.children = Array.isArray(resolved) ? resolved : [];
+          } catch {
+            node.children = [];
+          }
+        }
+      }
+      return tree.filter((node) => Array.isArray(node.children) && node.children.length > 0);
+    },
+    {
+      cacheKey: META_TREE_CACHE_KEY,
+      refreshOnWindowFocus: true,
+    },
+  );
+
+  return data ?? [];
+}
+
+export interface EnvVariableInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  addonBefore?: React.ReactNode;
+  disabled?: boolean;
+  /**
+   * When true, plain (non-variable) values are masked via `Input.Password`
+   * so secret credentials are not displayed verbatim. Variable expressions
+   * remain editable through the variable picker even in password mode.
+   */
+  password?: boolean;
+  placeholder?: string;
+}
+
+const isVariableExpr = (value?: string) => typeof value === 'string' && /\{\{\s*[^{}]+?\s*\}\}/.test(value);
+
+/**
+ * Generic input component for fields that accept either a literal value or a
+ * `{{ $env.X }}` reference. The `$env` namespace is wired through the
+ * environment-variables plugin's `flowEngine.context.defineProperty('$env', ...)`
+ * registration; this component is the single consumption point and degrades
+ * gracefully to a plain text input when no env variables are defined.
+ */
+export function EnvVariableInput(props: EnvVariableInputProps) {
+  const { password, ...rest } = props;
+  const metaTree = useEnvMetaTree();
+
+  const converters = useMemo<VariableHybridInputConverters>(
+    () => ({
+      formatPathToValue: formatEnvPath,
+      parseValueToPath: parseEnvPath,
+      variableRegExp: ENV_EXPR_REGEXP,
+    }),
+    [],
+  );
+
+  if (password && rest.value && !isVariableExpr(rest.value)) {
+    return (
+      <Input.Password
+        disabled={rest.disabled}
+        placeholder={rest.placeholder}
+        value={rest.value}
+        onChange={(event) => rest.onChange?.(event.target.value)}
+        autoFocus
+      />
+    );
+  }
+
+  return <VariableHybridInput {...rest} converters={converters} metaTree={metaTree} />;
+}