@nocobase/client-v2 2.1.0-beta.30 → 2.1.0-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.30",
+  "version": "2.1.0-beta.33",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,18 +24,22 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-beta.30",
-    "@nocobase/sdk": "2.1.0-beta.30",
-    "@nocobase/shared": "2.1.0-beta.30",
+    "@nocobase/evaluators": "2.1.0-beta.33",
+    "@nocobase/flow-engine": "2.1.0-beta.33",
+    "@nocobase/sdk": "2.1.0-beta.33",
+    "@nocobase/shared": "2.1.0-beta.33",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
+    "antd-style": "3.7.1",
+    "axios": "^1.7.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
+    "file-saver": "^2.0.5",
     "i18next": "^22.4.9",
     "json5": "^2.2.3",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "1a493069cd0d8a4f403668bfe592879678c894b2"
+  "gitHead": "4815c394e80a264fa8ed619246280923c47aeb72"
 }

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__/globalDeps.test.ts

@@ -25,6 +25,7 @@ describe('client-v2 defineGlobalDeps', () => {
     expect(define).toHaveBeenCalledWith('@nocobase/utils/client', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@nocobase/client-v2', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@nocobase/flow-engine', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@nocobase/evaluators/client', expect.any(Function));
     expect(define).toHaveBeenCalledWith('ahooks', expect.any(Function));
     expect(define).toHaveBeenCalledWith('dayjs', expect.any(Function));
     expect(define).toHaveBeenCalledWith('lodash', expect.any(Function));

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/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} />;
+}

package/src/components/form/FileSizeInput.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { InputNumber, Select, Space } from 'antd';
+import React, { useCallback } from 'react';
+
+const DEFAULT_MIN = 1;
+const DEFAULT_MAX = Number.POSITIVE_INFINITY;
+const DEFAULT_VALUE = 1024 * 1024 * 20;
+
+const UNIT_OPTIONS = [
+  { value: 1, label: 'Byte' },
+  { value: 1024, label: 'KB' },
+  { value: 1024 * 1024, label: 'MB' },
+  { value: 1024 * 1024 * 1024, label: 'GB' },
+];
+
+// Mirrors v1's `.auto-width` rule registered globally on FormItem: shrink the
+// antd control to its content width while keeping a sensible minimum.
+const autoWidthClassName = css`
+  &.ant-input-number,
+  &.ant-select {
+    width: auto;
+    min-width: 6em;
+  }
+`;
+
+function getUnitOption(value: number, defaultUnit = 1024 * 1024) {
+  const size = value || defaultUnit;
+  for (let i = UNIT_OPTIONS.length - 1; i >= 0; i -= 1) {
+    const option = UNIT_OPTIONS[i];
+    if (size % option.value === 0) {
+      return option;
+    }
+  }
+  return UNIT_OPTIONS[0];
+}
+
+function clampSize(value: number, min: number, max: number) {
+  return Math.min(Math.max(min, value), max);
+}
+
+export interface FileSizeInputProps {
+  value?: number;
+  onChange?: (value?: number) => void;
+  disabled?: boolean;
+  /** Minimum byte size. Empty / below-min input snaps to this on blur. Defaults to 1. */
+  min?: number;
+  /** Maximum byte size. Defaults to `Number.POSITIVE_INFINITY`. */
+  max?: number;
+  /** Default byte size used to derive the initial unit shown when the field is empty. Defaults to 20 MB. */
+  defaultValue?: number;
+}
+
+/**
+ * Byte-valued size input paired with a unit selector (Byte / KB / MB / GB).
+ * The persisted value is always normalized to bytes; the displayed number is
+ * derived from the picked unit. Useful for fields like file-size limits or
+ * memory quotas where the natural input unit varies by magnitude.
+ */
+export function FileSizeInput(props: FileSizeInputProps) {
+  const min = props.min ?? DEFAULT_MIN;
+  const max = props.max ?? DEFAULT_MAX;
+  const defaultValue = props.defaultValue ?? DEFAULT_VALUE;
+  const unit = getUnitOption(props.value ?? defaultValue);
+  const value = props.value == null ? props.value : props.value / unit.value;
+
+  const handleBlur = useCallback(() => {
+    if (props.value == null || props.value < min) {
+      props.onChange?.(min);
+    }
+  }, [props, min]);
+
+  return (
+    <Space.Compact>
+      <InputNumber
+        value={value}
+        disabled={props.disabled}
+        defaultValue={defaultValue / getUnitOption(defaultValue).value}
+        step={1}
+        className={autoWidthClassName}
+        onBlur={handleBlur}
+        onChange={(nextValue) => {
+          props.onChange?.(nextValue == null ? undefined : clampSize(Number(nextValue) * unit.value, min, max));
+        }}
+      />
+      <Select
+        disabled={props.disabled}
+        options={UNIT_OPTIONS}
+        value={unit.value}
+        className={autoWidthClassName}
+        onChange={(nextUnit) => {
+          props.onChange?.(value == null ? undefined : clampSize(Number(value) * nextUnit, min, max));
+        }}
+      />
+    </Space.Compact>
+  );
+}

package/src/components/form/createFormRegistry.ts

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+export interface FormRegistryEntry {
+  name: string;
+}
+
+export interface FormRegistry<T extends FormRegistryEntry> {
+  readonly namespace: string;
+  register(entry: T): void;
+  unregister(name: string): boolean;
+  get(name: string): T | undefined;
+  has(name: string): boolean;
+  list(): T[];
+}
+
+/**
+ * Create an isolated, namespaced registry of form-like entries.
+ *
+ * Each call returns a fresh registry instance backed by its own closure-scoped
+ * `Map`, so plugins do not share state across namespaces. Plugins that need an
+ * extension point for form-shaped registrations (e.g. storage configuration
+ * forms, data-source connection forms) can build their own typed registry on
+ * top of this primitive instead of re-implementing the same boilerplate.
+ *
+ * Re-registering the same `name` overwrites the previous entry and emits a
+ * console warning. This is intentional so HMR / hot reload works without
+ * throwing, while still surfacing unintended duplicates during development.
+ */
+export function createFormRegistry<T extends FormRegistryEntry>(namespace: string): FormRegistry<T> {
+  const entries = new Map<string, T>();
+
+  return {
+    namespace,
+    register(entry) {
+      if (entries.has(entry.name)) {
+        console.warn(`[${namespace}] entry "${entry.name}" already registered, overwriting.`);
+      }
+      entries.set(entry.name, entry);
+    },
+    unregister(name) {
+      return entries.delete(name);
+    },
+    get(name) {
+      return entries.get(name);
+    },
+    has(name) {
+      return entries.has(name);
+    },
+    list() {
+      return Array.from(entries.values());
+    },
+  };
+}

package/src/components/form/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+export * from './createFormRegistry';
+export * from './DrawerFormLayout';
+export * from './EnvVariableInput';
+export * from './FileSizeInput';
+export * from './JsonTextArea';

package/src/components/index.ts

@@ -9,6 +9,6 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './form';
 export * from './Icon';
-export * from './form/JsonTextArea';
 export * from './RouterContextCleaner';