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

package/src/components/form/EnvVariableInput.tsx

@@ -7,19 +7,14 @@
  * 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 type { MetaTreeNode, VariableHybridInputConverters } from '@nocobase/flow-engine';
 import { Input } from 'antd';
 import React, { useMemo } from 'react';
+import { VariableInput } from './VariableInput';
 
 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';
+const ENV_NAMESPACES = ['$env'];
 
 /**
  * Convert a stored value like `"{{ $env.foo.bar }}"` back into the
@@ -43,37 +38,6 @@ export function formatEnvPath(meta?: MetaTreeNode) {
   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;
@@ -91,15 +55,16 @@ export interface EnvVariableInputProps {
 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.
+ * Convenience wrapper around `VariableInput` constrained to the `$env`
+ * namespace, with optional password-input masking for plain values. Use for
+ * fields that accept either a literal credential or a `{{ $env.X }}`
+ * reference (S3 access keys, OAuth secrets, etc.). The `$env` tree is
+ * provided by the environment-variables plugin's
+ * `flowEngine.context.defineProperty('$env', ...)`; this component degrades
+ * gracefully to an empty picker when no env variables are defined.
  */
 export function EnvVariableInput(props: EnvVariableInputProps) {
   const { password, ...rest } = props;
-  const metaTree = useEnvMetaTree();
 
   const converters = useMemo<VariableHybridInputConverters>(
     () => ({
@@ -122,5 +87,5 @@ export function EnvVariableInput(props: EnvVariableInputProps) {
     );
   }
 
-  return <VariableHybridInput {...rest} converters={converters} metaTree={metaTree} />;
+  return <VariableInput {...rest} namespaces={ENV_NAMESPACES} converters={converters} />;
 }

package/src/components/form/VariableInput.tsx

@@ -0,0 +1,177 @@
+/**
+ * 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 React, { useMemo } from 'react';
+import { TextAreaWithContextSelector } from '../../flow/components/TextAreaWithContextSelector';
+
+/**
+ * The flow-engine defaults emit `{{ ctx.$X.Y }}` and only parse the same
+ * shape back into a path — but NocoBase server templates (and v1 stored
+ * values) use the bare `{{$X.Y}}` form without the `ctx.` prefix. These
+ * converters keep the picker's output stable against v1 and let already-
+ * stored values round-trip to a labelled pill instead of falling back to a
+ * raw `{{…}}` literal.
+ */
+const VARIABLE_EXPR_RE = /^\{\{\s*(.+?)\s*\}\}$/;
+
+export function parseVariablePath(value?: string): string[] | undefined {
+  if (typeof value !== 'string') return undefined;
+  const match = value.trim().match(VARIABLE_EXPR_RE);
+  if (!match) return undefined;
+  let pathString = match[1];
+  // Backwards-compat: accept the legacy `ctx.` prefix so values produced by
+  // pre-fix versions of the picker still resolve to a labelled pill.
+  if (pathString === 'ctx') return [];
+  if (pathString.startsWith('ctx.')) pathString = pathString.slice(4);
+  return pathString.split('.');
+}
+
+export function formatVariablePath(meta?: MetaTreeNode): string | undefined {
+  const paths = meta?.paths || [];
+  if (paths.length === 0) return undefined;
+  // No inner spaces — matches the v1 storage shape exactly so round-trips
+  // through the API stay byte-stable.
+  return `{{${paths.join('.')}}}`;
+}
+
+const META_TREE_CACHE_PREFIX = '@nocobase/client-v2:VariableInput:metaTree';
+
+/**
+ * Resolve the meta tree the variable picker should expose. Filters the global
+ * meta tree by `namespaces` (top-level property names like `'$env'`,
+ * `'$user'`), appends `extraNodes`, and eagerly resolves any lazy `children`
+ * thunks so labels render on first paint.
+ *
+ * Returns `[]` while loading or when no nodes survive the filter, mirroring
+ * the existing EnvVariableInput behavior so the picker still opens but offers
+ * nothing.
+ */
+export function useFilteredMetaTree(options: { namespaces?: string[]; extraNodes?: MetaTreeNode[] }): MetaTreeNode[] {
+  const { namespaces, extraNodes } = options;
+  const ctx = useFlowContext();
+  const cacheKey = useMemo(() => {
+    const ns = namespaces ? [...namespaces].sort().join(',') : '*';
+    return `${META_TREE_CACHE_PREFIX}:${ns}`;
+  }, [namespaces]);
+
+  const { data } = useRequest<MetaTreeNode[], []>(
+    async () => {
+      const all = ctx.getPropertyMetaTree?.() ?? [];
+      const filtered = namespaces ? all.filter((node) => namespaces.includes(node.name)) : all;
+      for (const node of filtered) {
+        if (typeof node.children === 'function') {
+          try {
+            const resolved = await (node.children as () => Promise<MetaTreeNode[]>)();
+            node.children = Array.isArray(resolved) ? resolved : [];
+          } catch {
+            node.children = [];
+          }
+        }
+      }
+      const withChildren = filtered.filter(
+        (node) => !Array.isArray(node.children) || node.children.length > 0 || node.type !== 'object',
+      );
+      return withChildren;
+    },
+    {
+      cacheKey,
+      refreshOnWindowFocus: true,
+    },
+  );
+
+  return useMemo(() => {
+    const base = data ?? [];
+    if (!extraNodes?.length) return base;
+    return [...base, ...extraNodes];
+  }, [data, extraNodes]);
+}
+
+export interface VariableInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  addonBefore?: React.ReactNode;
+  /**
+   * Restrict the picker to specific top-level meta tree namespaces (e.g.
+   * `['$env', '$user']`). When omitted, every registered top-level property is
+   * exposed. Filter happens at the picker level — the underlying regex used
+   * for pill rendering still matches any `{{ ... }}` expression so pre-existing
+   * out-of-scope values stay legible.
+   */
+  namespaces?: string[];
+  /**
+   * Static leaves appended to the picker, after the namespace-filtered nodes.
+   * Use for ad-hoc local-only variables (e.g. `$resetLink`) that are not part
+   * of the global FlowContext registry.
+   */
+  extraNodes?: MetaTreeNode[];
+  /**
+   * Override the converters used by the underlying `VariableHybridInput`.
+   * Mostly useful when the caller wants to constrain `formatPathToValue` to a
+   * specific namespace (see `EnvVariableInput` for that pattern).
+   */
+  converters?: VariableHybridInputConverters;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Inline (single-line) variable input. Renders the literal text and any
+ * `{{ ... }}` references as styled pills via `VariableHybridInput`. Use for
+ * fields like form input titles, email subject lines, or any place a single
+ * line of mixed literal+variable content is appropriate.
+ */
+export function VariableInput(props: VariableInputProps) {
+  const { namespaces, extraNodes, converters, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const mergedConverters = useMemo<VariableHybridInputConverters>(
+    () => ({
+      formatPathToValue: formatVariablePath,
+      parseValueToPath: parseVariablePath,
+      ...converters,
+    }),
+    [converters],
+  );
+  return <VariableHybridInput {...rest} converters={mergedConverters} metaTree={metaTree} />;
+}
+
+export interface VariableTextAreaProps extends Omit<VariableInputProps, 'converters' | 'addonBefore'> {
+  rows?: number;
+  maxRows?: number;
+}
+
+/**
+ * Multi-line variable input. Variables are inserted as raw `{{ ... }}` text at
+ * the caret rather than rendered as pills — use for email body templates and
+ * other free-form long-form text where literal display of variable expressions
+ * is desirable (the server expands them at render time).
+ */
+export function VariableTextArea(props: VariableTextAreaProps) {
+  const { namespaces, extraNodes, rows, maxRows, style, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const metaTreeGetter = useMemo(() => () => metaTree, [metaTree]);
+  return (
+    <TextAreaWithContextSelector
+      {...rest}
+      rows={rows}
+      maxRows={maxRows}
+      style={style}
+      metaTree={metaTreeGetter}
+      formatPathToValue={(meta) => formatVariablePath(meta) ?? ''}
+    />
+  );
+}

package/src/components/form/__tests__/EnvVariableInput.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { FlowContext, FlowContextProvider, MetaTreeNode } from '@nocobase/flow-engine';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { EnvVariableInput, formatEnvPath, parseEnvPath } from '../EnvVariableInput';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as any).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret', BASE_URL: 'https://example.com' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+        BASE_URL: { title: 'Base URL', type: 'string' },
+      },
+    },
+  });
+
+  ctx.defineProperty('$user', {
+    value: { name: 'John' },
+    meta: {
+      title: 'User',
+      type: 'object',
+      properties: {
+        name: { title: 'Name', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('parseEnvPath', () => {
+  it('parses single segment', () => {
+    expect(parseEnvPath('{{ $env.API_KEY }}')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('parses nested segments', () => {
+    expect(parseEnvPath('{{ $env.foo.bar.baz }}')).toEqual(['$env', 'foo', 'bar', 'baz']);
+  });
+
+  it('trims surrounding whitespace', () => {
+    expect(parseEnvPath('   {{ $env.API_KEY }}   ')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('returns undefined for plain text', () => {
+    expect(parseEnvPath('plain value')).toBeUndefined();
+  });
+
+  it('returns undefined for non-$env variable', () => {
+    expect(parseEnvPath('{{ $user.name }}')).toBeUndefined();
+  });
+
+  it('returns undefined for mixed content', () => {
+    expect(parseEnvPath('prefix {{ $env.API_KEY }} suffix')).toBeUndefined();
+  });
+
+  it('returns undefined for empty / undefined', () => {
+    expect(parseEnvPath('')).toBeUndefined();
+    expect(parseEnvPath(undefined)).toBeUndefined();
+  });
+});
+
+describe('formatEnvPath', () => {
+  it('formats a single nested env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'API_KEY'] } as MetaTreeNode)).toBe('{{ $env.API_KEY }}');
+  });
+
+  it('formats multi-level env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'foo', 'bar'] } as MetaTreeNode)).toBe('{{ $env.foo.bar }}');
+  });
+
+  it('returns undefined for non-$env namespace', () => {
+    expect(formatEnvPath({ paths: ['$user', 'name'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for $env root only', () => {
+    expect(formatEnvPath({ paths: ['$env'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for empty meta', () => {
+    expect(formatEnvPath(undefined)).toBeUndefined();
+    expect(formatEnvPath({ paths: [] } as MetaTreeNode)).toBeUndefined();
+  });
+});
+
+describe('EnvVariableInput component', () => {
+  it('renders contenteditable editor with the variable selector button', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'textbox' })).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the variable as a styled pill when value is a $env expression', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+      expect(tag.className).toContain('nb-variable-tag');
+    });
+  });
+
+  it('renders password input when value is plain text and password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="my-secret" password onChange={() => undefined} />);
+
+    const input = await screen.findByDisplayValue('my-secret');
+    expect(input).toBeInTheDocument();
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('does NOT mask when value is a $env expression even with password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" password onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+    });
+    expect(screen.queryByDisplayValue('{{ $env.API_KEY }}')).not.toBeInTheDocument();
+  });
+
+  it('propagates onChange when typing into the password input', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(ctx, <EnvVariableInput value="initial" password onChange={handleChange} />);
+
+    const input = await screen.findByDisplayValue('initial');
+    fireEvent.change(input, { target: { value: 'next-value' } });
+    expect(handleChange).toHaveBeenCalledWith('next-value');
+  });
+
+  it('renders placeholder text on the editor', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" placeholder="enter or pick" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('data-placeholder')).toBe('enter or pick');
+    });
+  });
+
+  it('honors disabled state', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" disabled onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('contenteditable')).toBe('false');
+    });
+  });
+});

package/src/components/form/index.tsx

@@ -12,3 +12,4 @@ export * from './DrawerFormLayout';
 export * from './EnvVariableInput';
 export * from './FileSizeInput';
 export * from './JsonTextArea';
+export * from './VariableInput';

package/src/components/form/table/RowOverlayPreview.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { cx } from '@emotion/css';
+import { theme } from 'antd';
+import React from 'react';
+import { overlayCellStylesClassName } from './styles';
+import type { RowSnapshot } from './utils';
+
+/**
+ * Floating clone of the row being dragged, rendered inside a `<DragOverlay>`
+ * so it follows the cursor while the source row stays in place. We inject the
+ * snapshot's `outerHTML` straight into a mini `<table>` so every antd class
+ * (`ant-table-cell`, `ant-table-selection-column`, theme tokens, etc.) is
+ * preserved. A `<colgroup>` re-applies the measured cell widths so the clone
+ * lines up column-for-column with the source row; the wrapper's pinned
+ * `height` + table `height:100%` keeps vertical sizing consistent regardless
+ * of which antd table size variant the caller picked.
+ *
+ * The wrapper also carries `overlayCellStylesClassName` so the index numeric
+ * (`.nb-table-index`) is hidden while dragging — only the handle + checkbox
+ * are surfaced inside the floating clone.
+ */
+export function RowOverlayPreview(props: { snapshot: RowSnapshot }) {
+  const { token } = theme.useToken();
+  const { html, cellWidths, totalWidth, totalHeight } = props.snapshot;
+  const colGroupHTML = cellWidths.map((width) => `<col style="width:${width}px" />`).join('');
+  const tableHTML = `<table style="table-layout:fixed;width:100%;height:100%;border-collapse:collapse"><colgroup>${colGroupHTML}</colgroup><tbody class="ant-table-tbody">${html}</tbody></table>`;
+  return (
+    <div
+      className={cx('ant-table-wrapper', overlayCellStylesClassName)}
+      style={{
+        width: totalWidth || 'auto',
+        height: totalHeight || 'auto',
+        background: token.colorBgContainer,
+        boxShadow: token.boxShadowSecondary,
+        borderRadius: token.borderRadius,
+        pointerEvents: 'none',
+        opacity: 0.95,
+        overflow: 'hidden',
+      }}
+      dangerouslySetInnerHTML={{ __html: tableHTML }}
+    />
+  );
+}

package/src/components/form/table/SelectionCell.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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 { cx } from '@emotion/css';
+import React from 'react';
+import { SORT_HANDLE_GUTTER } from './constants';
+import { SortHandle } from './dnd/SortableRow';
+
+export interface SelectionCellProps {
+  /** Whether the row is currently selected — drives the index/checkbox swap. */
+  checked: boolean;
+  /** Zero-based row index (within the current page). `TableIndex` displays it as `index + 1`. */
+  index: number;
+  /** Render the drag handle on the left gutter. Mutually exclusive with `showStandaloneHandle`. */
+  showHandle: boolean;
+  /** Render the row index numeric. When `false` only the antd checkbox is shown (default antd UX). */
+  showIndex: boolean;
+  /** The original antd checkbox node produced by `rowSelection.renderCell`. */
+  originalNode: React.ReactNode;
+}
+
+const handleSpanStyle: React.CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  bottom: 0,
+  width: SORT_HANDLE_GUTTER,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+/**
+ * The body half of the rowSelection column. Renders, in order:
+ *   1. An absolute-positioned drag handle pinned to the left gutter (only
+ *      when `showHandle` is true). The parent `<td>` must be
+ *      `position: relative` for the handle to land inside the gutter —
+ *      `selectionGutterClassName` in `styles.ts` adds that.
+ *   2. A `.nb-row-selection-cell` wrapper that contains both the row index
+ *      and the checkbox. CSS in `indexSwapClassName` swaps which one is
+ *      visible depending on hover / `checked` state.
+ *
+ * When `showIndex` is false we drop the swap entirely and render only the
+ * original antd checkbox — matches the default antd selection column UX for
+ * tables that don't want the index numeric.
+ */
+export function SelectionCell(props: SelectionCellProps) {
+  const { checked, index, showHandle, showIndex, originalNode } = props;
+  return (
+    <>
+      {showHandle ? (
+        <span style={handleSpanStyle}>
+          <SortHandle />
+        </span>
+      ) : null}
+      {showIndex ? (
+        <span className={cx('nb-row-selection-cell', { checked })}>
+          <span className="nb-table-index">{index + 1}</span>
+          <span className="nb-origin-node">{originalNode}</span>
+        </span>
+      ) : (
+        originalNode
+      )}
+    </>
+  );
+}