@nocobase/client-v2 2.1.0-alpha.40 → 2.1.0-alpha.46

package/src/components/form/VariableInput.tsx

@@ -25,28 +25,75 @@ import { TextAreaWithContextSelector } from '../../flow/components/TextAreaWithC
  * 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('.');
+
+/**
+ * Variable delimiters: opening + closing tokens. Default `['{{', '}}']`
+ * matches NocoBase server template convention (Handlebars HTML-escaped
+ * output). Pass `['{{{', '}}}']` to switch to Handlebars' raw/unescaped
+ * form — required for fields whose content is rendered as HTML (e.g.
+ * in-app message body) so the variable expansion bypasses HTML escaping.
+ *
+ * Restrict to literal-token pairs, since the regex builder escapes them
+ * verbatim.
+ */
+export type VariableDelimiters = readonly [string, string];
+
+const DEFAULT_DELIMITERS: VariableDelimiters = ['{{', '}}'];
+
+function escapeForRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-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('.')}}}`;
+/**
+ * Factory: returns a `parseValueToPath` bound to the given delimiters.
+ * Anchored (`^…$`) — only treats the whole input as a single variable
+ * reference, matching the v1 single-line picker behaviour.
+ */
+export function makeParseVariablePath(delimiters: VariableDelimiters = DEFAULT_DELIMITERS) {
+  const [open, close] = delimiters;
+  const re = new RegExp(`^${escapeForRegExp(open)}\\s*(.+?)\\s*${escapeForRegExp(close)}$`);
+  return (value?: string): string[] | undefined => {
+    if (typeof value !== 'string') return undefined;
+    const match = value.trim().match(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('.');
+  };
 }
 
+/**
+ * Factory: returns a `formatPathToValue` bound to the given delimiters.
+ * No inner spaces — matches the v1 storage shape exactly so round-trips
+ * through the API stay byte-stable.
+ */
+export function makeFormatVariablePath(delimiters: VariableDelimiters = DEFAULT_DELIMITERS) {
+  const [open, close] = delimiters;
+  return (meta?: MetaTreeNode): string | undefined => {
+    const paths = meta?.paths || [];
+    if (paths.length === 0) return undefined;
+    return `${open}${paths.join('.')}${close}`;
+  };
+}
+
+/**
+ * Factory: returns a global regex matching every occurrence of the
+ * variable token within a longer string. Used by `VariableHybridInput`
+ * to render embedded variables as pills.
+ */
+export function makeVariableRegExp(delimiters: VariableDelimiters = DEFAULT_DELIMITERS): RegExp {
+  const [open, close] = delimiters;
+  return new RegExp(`${escapeForRegExp(open)}\\s*([^{}]+?)\\s*${escapeForRegExp(close)}`, 'g');
+}
+
+// Default exports — `{{ ... }}` for the most common case. Kept named so
+// existing callers don't need to switch to the factory.
+export const parseVariablePath = makeParseVariablePath();
+export const formatVariablePath = makeFormatVariablePath();
+
 const META_TREE_CACHE_PREFIX = '@nocobase/client-v2:VariableInput:metaTree';
 
 /**
@@ -123,8 +170,22 @@ export interface VariableInputProps {
    * 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).
+   *
+   * Takes precedence over `delimiters` when both are set on the same field
+   * (an explicit converter wins over the delimiter-derived one).
    */
   converters?: VariableHybridInputConverters;
+  /**
+   * Token pair wrapping variable references in the stored string. Defaults
+   * to `['{{', '}}']` — the standard NocoBase server-template form,
+   * HTML-escaped by Handlebars. Pass `['{{{', '}}}']` for fields rendered
+   * as HTML where escaping would corrupt the variable value (e.g. the
+   * in-app message body).
+   *
+   * Ignored when `converters` is also supplied — caller-provided converters
+   * win.
+   */
+  delimiters?: VariableDelimiters;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -136,16 +197,24 @@ export interface VariableInputProps {
  * line of mixed literal+variable content is appropriate.
  */
 export function VariableInput(props: VariableInputProps) {
-  const { namespaces, extraNodes, converters, ...rest } = props;
+  const { namespaces, extraNodes, converters, delimiters, ...rest } = props;
   const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
-  const mergedConverters = useMemo<VariableHybridInputConverters>(
-    () => ({
-      formatPathToValue: formatVariablePath,
-      parseValueToPath: parseVariablePath,
+  const mergedConverters = useMemo<VariableHybridInputConverters>(() => {
+    // Default delimiters → reuse the pre-built singletons.
+    if (!delimiters) {
+      return {
+        formatPathToValue: formatVariablePath,
+        parseValueToPath: parseVariablePath,
+        ...converters,
+      };
+    }
+    return {
+      formatPathToValue: makeFormatVariablePath(delimiters),
+      parseValueToPath: makeParseVariablePath(delimiters),
+      variableRegExp: makeVariableRegExp(delimiters),
       ...converters,
-    }),
-    [converters],
-  );
+    };
+  }, [converters, delimiters]);
   return <VariableHybridInput {...rest} converters={mergedConverters} metaTree={metaTree} />;
 }
 
@@ -161,9 +230,13 @@ export interface VariableTextAreaProps extends Omit<VariableInputProps, 'convert
  * is desirable (the server expands them at render time).
  */
 export function VariableTextArea(props: VariableTextAreaProps) {
-  const { namespaces, extraNodes, rows, maxRows, style, ...rest } = props;
+  const { namespaces, extraNodes, rows, maxRows, style, delimiters, ...rest } = props;
   const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
   const metaTreeGetter = useMemo(() => () => metaTree, [metaTree]);
+  const formatPathToValue = useMemo(
+    () => (delimiters ? makeFormatVariablePath(delimiters) : formatVariablePath),
+    [delimiters],
+  );
   return (
     <TextAreaWithContextSelector
       {...rest}
@@ -171,7 +244,7 @@ export function VariableTextArea(props: VariableTextAreaProps) {
       maxRows={maxRows}
       style={style}
       metaTree={metaTreeGetter}
-      formatPathToValue={(meta) => formatVariablePath(meta) ?? ''}
+      formatPathToValue={(meta) => formatPathToValue(meta) ?? ''}
     />
   );
 }

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

@@ -0,0 +1,152 @@
+/**
+ * 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 { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { TypedVariableInput } from '../TypedVariableInput';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as any).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { SMTP_PORT: 465, SECURE_FLAG: true },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        SMTP_PORT: { title: 'SMTP Port', type: 'number' },
+        SECURE_FLAG: { title: 'Secure flag', type: 'boolean' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('TypedVariableInput - constant rendering', () => {
+  it('renders an InputNumber for a numeric value when types=[number]', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={465}
+        types={[['number', { min: 1, max: 65535 }]]}
+        namespaces={['$env']}
+        onChange={() => undefined}
+      />,
+    );
+    const numberInput = await screen.findByDisplayValue('465');
+    expect(numberInput).toBeInTheDocument();
+    expect(numberInput.getAttribute('role')).toBe('spinbutton');
+  });
+
+  it('renders a boolean Select when value is true and types=[boolean]', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={true} types={['boolean']} namespaces={['$env']} onChange={() => undefined} />,
+    );
+    await waitFor(() => {
+      // antd Select renders the chosen item label via a selection-item span
+      const item = screen.getByText('True');
+      expect(item).toBeInTheDocument();
+    });
+  });
+
+  it('renders the Null placeholder when value=null and nullable=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={null} types={['number']} namespaces={['$env']} nullable onChange={() => undefined} />,
+    );
+    // Uses placeholder slot (not value) so antd's grey placeholder colour
+    // applies — see comment in TypedVariableInput.tsx.
+    const nullInput = await screen.findByPlaceholderText('<Null>');
+    expect(nullInput).toBeInTheDocument();
+    expect(nullInput.getAttribute('readonly')).not.toBeNull();
+  });
+});
+
+describe('TypedVariableInput - variable rendering', () => {
+  it('renders a labelled pill when value is a {{ $env.X }} expression', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value="{{$env.SMTP_PORT}}"
+        types={['number']}
+        namespaces={['$env']}
+        onChange={() => undefined}
+      />,
+    );
+    await waitFor(() => {
+      const tag = screen.getByRole('button', { name: 'variable-tag' });
+      expect(tag.textContent).toContain('Env');
+      expect(tag.textContent).toContain('SMTP Port');
+    });
+  });
+
+  it('clears back to null when the close button is clicked (nullable=true)', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value="{{$env.SMTP_PORT}}"
+        types={['number']}
+        namespaces={['$env']}
+        nullable
+        onChange={handleChange}
+      />,
+    );
+    const clear = await screen.findByRole('button', { name: 'icon-close' });
+    fireEvent.click(clear);
+    expect(handleChange).toHaveBeenCalledWith(null);
+  });
+
+  it('clears back to default-of-first-type when nullable=false', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value="{{$env.SMTP_PORT}}"
+        types={['number']}
+        namespaces={['$env']}
+        nullable={false}
+        onChange={handleChange}
+      />,
+    );
+    const clear = await screen.findByRole('button', { name: 'icon-close' });
+    fireEvent.click(clear);
+    expect(handleChange).toHaveBeenCalledWith(0);
+  });
+});
+
+describe('TypedVariableInput - editor onChange propagation', () => {
+  it('forwards numeric edits via onChange', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(ctx, <TypedVariableInput value={465} types={['number']} onChange={handleChange} />);
+    const numberInput = await screen.findByDisplayValue('465');
+    fireEvent.change(numberInput, { target: { value: '587' } });
+    // antd InputNumber may emit on blur; force blur to flush
+    fireEvent.blur(numberInput);
+    expect(handleChange).toHaveBeenCalled();
+    const lastCall = handleChange.mock.calls[handleChange.mock.calls.length - 1][0];
+    expect(lastCall).toBe(587);
+  });
+});

package/src/components/form/__tests__/VariableInput.test.ts

@@ -0,0 +1,85 @@
+/**
+ * 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 {
+  formatVariablePath,
+  makeFormatVariablePath,
+  makeParseVariablePath,
+  makeVariableRegExp,
+  parseVariablePath,
+} from '../VariableInput';
+
+describe('VariableInput delimiter helpers', () => {
+  describe('default delimiters {{ }}', () => {
+    it('formats meta nodes into `{{x.y}}` with no inner spaces', () => {
+      expect(formatVariablePath({ paths: ['$user', 'id'] } as any)).toBe('{{$user.id}}');
+    });
+
+    it('parses `{{x.y}}` into a path array', () => {
+      expect(parseVariablePath('{{ $user.id }}')).toEqual(['$user', 'id']);
+      expect(parseVariablePath('{{$user.id}}')).toEqual(['$user', 'id']);
+    });
+
+    it('strips a legacy `ctx.` prefix for backwards-compat', () => {
+      expect(parseVariablePath('{{ctx.$user.id}}')).toEqual(['$user', 'id']);
+      expect(parseVariablePath('{{ctx}}')).toEqual([]);
+    });
+
+    it('returns undefined for plain text', () => {
+      expect(parseVariablePath('hello world')).toBeUndefined();
+      expect(parseVariablePath('')).toBeUndefined();
+      expect(parseVariablePath(undefined)).toBeUndefined();
+    });
+  });
+
+  describe('triple-brace delimiters {{{ }}}', () => {
+    const format = makeFormatVariablePath(['{{{', '}}}']);
+    const parse = makeParseVariablePath(['{{{', '}}}']);
+
+    it('formats meta nodes into `{{{x.y}}}`', () => {
+      expect(format({ paths: ['$user', 'id'] } as any)).toBe('{{{$user.id}}}');
+    });
+
+    it('parses `{{{x.y}}}` into a path array', () => {
+      expect(parse('{{{$user.id}}}')).toEqual(['$user', 'id']);
+      expect(parse('{{{ $user.id }}}')).toEqual(['$user', 'id']);
+    });
+
+    it('does not match the double-brace form', () => {
+      expect(parse('{{$user.id}}')).toBeUndefined();
+    });
+  });
+
+  describe('makeVariableRegExp', () => {
+    it('matches every occurrence in a longer string under default delimiters', () => {
+      const re = makeVariableRegExp();
+      const matches = Array.from('hello {{ $user.id }} world {{ $env.X }}'.matchAll(re)).map((m) => m[1]);
+      expect(matches).toEqual(['$user.id', '$env.X']);
+    });
+
+    it('matches triple-brace occurrences when configured', () => {
+      const re = makeVariableRegExp(['{{{', '}}}']);
+      const matches = Array.from('hi {{{$user.id}}} :)'.matchAll(re)).map((m) => m[1]);
+      expect(matches).toEqual(['$user.id']);
+    });
+
+    it('does not match double-brace occurrences under triple-brace config', () => {
+      const re = makeVariableRegExp(['{{{', '}}}']);
+      const matches = Array.from('plain {{ x }} text'.matchAll(re));
+      expect(matches).toHaveLength(0);
+    });
+  });
+
+  it('handles empty paths consistently', () => {
+    expect(formatVariablePath({ paths: [] } as any)).toBeUndefined();
+    expect(formatVariablePath(undefined)).toBeUndefined();
+    expect(makeFormatVariablePath(['{{{', '}}}'])({ paths: [] } as any)).toBeUndefined();
+  });
+});

package/src/components/form/filter/CollectionFilter.tsx

@@ -0,0 +1,111 @@
+/**
+ * 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 { FilterOutlined } from '@ant-design/icons';
+import type { Collection } from '@nocobase/flow-engine';
+import { Button, type ButtonProps, Popover, type PopoverProps } from 'antd';
+import React, { FC, useState } from 'react';
+import { FilterContent } from '../../../flow/components/filter';
+import { CompiledFilter, FilterApplyAction, useFilterActionProps } from './useFilterActionProps';
+
+const identity = (s: string) => s;
+
+export interface CollectionFilterProps {
+  /** Collection whose fields drive the filter row's field picker. */
+  collection: Collection | undefined;
+  /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
+  onChange: (filter: CompiledFilter) => void;
+  /** Translator. Defaults to identity. */
+  t?: (key: string, options?: Record<string, any>) => string;
+  /** Whitelist of root-level field names to expose. */
+  filterableFieldNames?: string[];
+  /**
+   * Blacklist of root-level field names to drop. Mirrors v1's `nonfilterable: [...]` on `Filter.Action`. When both `filterableFieldNames` and this prop are supplied, both apply (final = whitelist ∩ ¬blacklist).
+   */
+  nonfilterableFieldNames?: string[];
+  /**
+   * Bypass the `filterableFieldNames` whitelist.
+   *
+   * Legacy escape hatch — prefer adjusting `filterableFieldNames` / `nonfilterableFieldNames` instead.
+   */
+  noIgnore?: boolean;
+  /** Override the trigger button's label. Defaults to `t('Filter')`, or the v1-style `t('{{count}} filter items', { count })` when conditions are present. */
+  buttonText?: React.ReactNode;
+  /** Swap the default `t('Filter')` label for v1's `t('{{count}} filter items', { count })` when conditions are present. Defaults to `true`. */
+  showCount?: boolean;
+  /** Pass-through props for the antd `<Popover>`. */
+  popoverProps?: Omit<PopoverProps, 'open' | 'onOpenChange' | 'content' | 'children'>;
+  /** Pass-through props for the trigger `<Button>`. */
+  buttonProps?: Omit<ButtonProps, 'icon' | 'type' | 'children' | 'onClick'>;
+  /** Min-width applied to the popover body. Defaults to `520`. */
+  popoverMinWidth?: number;
+}
+
+/**
+ * Filter button bound to a collection. Renders an antd `<Popover>` over a `<Button>`; the popover hosts a multi-condition filter form (field picker, operator, value). Submit dismisses the popover and emits the compiled filter via `onChange`; Reset keeps the popover open and emits `undefined`.
+ *
+ * Pair with `<ExtendCollectionsProvider>` when the target collection is client-only (e.g. a `schema-only` server collection that isn't auto-published to the v2 data source).
+ */
+export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
+  const {
+    collection,
+    onChange,
+    t = identity,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    buttonText,
+    showCount = true,
+    popoverProps,
+    buttonProps,
+    popoverMinWidth = 520,
+  } = props;
+
+  const [open, setOpen] = useState(false);
+
+  const filterAction = useFilterActionProps({
+    collection,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+    onApply: (filter: CompiledFilter, action: FilterApplyAction) => {
+      onChange(filter);
+      if (action === 'submit') setOpen(false);
+    },
+  });
+
+  // Matches v1's `Filter.Action`: when at least one condition is set, the button label switches to the count-aware string (`"N 个筛选项"` in zh-CN). The button itself stays in the default (white) style — v1 never flipped it to `type='primary'`.
+  const label =
+    buttonText ??
+    (showCount && filterAction.conditionCount > 0
+      ? t('{{count}} filter items', { count: filterAction.conditionCount })
+      : t('Filter'));
+
+  return (
+    <Popover
+      trigger="click"
+      placement="bottomLeft"
+      {...popoverProps}
+      open={open}
+      onOpenChange={setOpen}
+      content={
+        <div style={{ minWidth: popoverMinWidth }}>
+          <FilterContent value={filterAction.value} ctx={filterAction.ctx} FilterItem={filterAction.FilterItem} />
+        </div>
+      }
+    >
+      <Button icon={<FilterOutlined />} disabled={!collection} {...buttonProps}>
+        {label}
+      </Button>
+    </Popover>
+  );
+};
+
+export default CollectionFilter;