@nocobase/client-v2 2.1.0-beta.8 → 2.2.0-alpha.1

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/__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/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/filter/CollectionFilter.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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;
+  /** Previously compiled filter param used to seed the editable filter group. */
+  initialValue?: CompiledFilter;
+  /** 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,
+    initialValue,
+    onChange,
+    t = identity,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    buttonText,
+    showCount = true,
+    popoverProps,
+    buttonProps,
+    popoverMinWidth = 520,
+  } = props;
+
+  const [open, setOpen] = useState(false);
+
+  const filterAction = useFilterActionProps({
+    collection,
+    initialValue,
+    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;