@nocobase/client-v2 2.1.0-beta.36 → 2.1.0-beta.38

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

@@ -0,0 +1,198 @@
+/**
+ * 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 { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Radio, Select, TimePicker } from 'antd';
+import React from 'react';
+import type { FilterOperator, FilterOption } from '../../../flow/components/filter/useFilterOptions';
+import { PasswordInput } from '../PasswordInput';
+import { DateFilterDynamicComponent } from './DateFilterDynamicComponent';
+
+export interface FilterValueInputProps {
+  /** The currently selected leaf field option from the field picker. */
+  field?: FilterOption;
+  /** The currently selected operator (full object, not just `.value`). */
+  operator?: FilterOperator;
+  /** Current value. Shape depends on operator/field. */
+  value: any;
+  /** Notify the parent when the user edits the value. */
+  onChange: (value: any) => void;
+  /** Translator used by sub-renderers. */
+  t?: (key: string) => string;
+  /** Optional placeholder for the fallback `Input`. */
+  placeholder?: string;
+}
+
+const identity = (s: string) => s;
+
+type EffectiveSchema = {
+  'x-component'?: string;
+  'x-component-props'?: Record<string, any>;
+  enum?: Array<{ value: any; label: string }> | any[];
+};
+
+const baseStyle = { minWidth: 200 } as const;
+
+/** Resolve operator-level schema → field uiSchema → fallback Input. */
+const resolveSchema = (field?: FilterOption, operator?: FilterOperator): EffectiveSchema => {
+  if (operator?.schema?.['x-component']) {
+    return operator.schema as EffectiveSchema;
+  }
+  const fieldSchema = field?.schema as EffectiveSchema | undefined;
+  if (fieldSchema?.['x-component']) {
+    return fieldSchema;
+  }
+  return { 'x-component': 'Input' };
+};
+
+/**
+ * Interface-aware value renderer for filter rows. Returns `null` for `noValue` operators (`$empty`, `$notEmpty`). Otherwise dispatches the effective `x-component` (operator schema > field uiSchema > Input) to a small registry of antd controls.
+ */
+export const FilterValueInput: React.FC<FilterValueInputProps> = (props) => {
+  const { field, operator, value, onChange, t = identity, placeholder } = props;
+
+  if (operator?.noValue) {
+    return null;
+  }
+
+  const schema = resolveSchema(field, operator);
+  const componentName = schema['x-component'];
+  const componentProps = schema['x-component-props'] || {};
+  const enumOptions = (schema as any).enum || (field?.schema as any)?.enum;
+
+  switch (componentName) {
+    case 'DateFilterDynamicComponent':
+      return <DateFilterDynamicComponent value={value} onChange={onChange} isRange={!!componentProps.isRange} t={t} />;
+
+    case 'DatePicker':
+    case 'UnixTimestamp':
+      return (
+        <DatePicker
+          value={value}
+          onChange={onChange}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+
+    case 'TimePicker':
+      return (
+        <TimePicker
+          value={value}
+          onChange={onChange}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+
+    case 'InputNumber':
+    case 'Percent':
+      return (
+        <InputNumber
+          value={value}
+          onChange={(next) => onChange(next ?? undefined)}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+
+    case 'ColorPicker':
+      return <ColorPicker value={value} onChange={(_color, hex) => onChange(hex)} {...componentProps} />;
+
+    case 'Checkbox':
+      return <Checkbox checked={!!value} onChange={(e) => onChange(e.target.checked)} {...componentProps} />;
+
+    case 'Checkbox.Group': {
+      const options = Array.isArray(componentProps.options) ? componentProps.options : enumOptions;
+      return (
+        <Checkbox.Group
+          value={value}
+          onChange={onChange}
+          options={options as any}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+    }
+
+    case 'Radio.Group': {
+      const options = Array.isArray(componentProps.options) ? componentProps.options : enumOptions;
+      return (
+        <Radio.Group
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          options={options as any}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+    }
+
+    case 'Select': {
+      const { mode, options, multiple } = componentProps;
+      const resolvedMode = mode === 'tags' || mode === 'multiple' ? mode : multiple ? 'multiple' : undefined;
+      const inlineOptions = Array.isArray(options) ? options : enumOptions;
+      const resolvedOptions = Array.isArray(inlineOptions)
+        ? inlineOptions.map((option: any) => ({
+            ...option,
+            label: typeof option.label === 'string' ? t(option.label) : option.label,
+          }))
+        : undefined;
+      return (
+        <Select
+          value={value}
+          onChange={onChange}
+          mode={resolvedMode}
+          options={resolvedOptions}
+          allowClear
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+    }
+
+    case 'Password':
+      return (
+        <PasswordInput
+          value={value}
+          onChange={(e: any) => onChange(e?.target?.value ?? e)}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+
+    case 'Input.TextArea':
+    case 'Input.JSON':
+    case 'Markdown':
+    case 'RichText':
+      return (
+        <Input.TextArea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+
+    case 'Input':
+    case 'Input.URL':
+    case 'NanoIDInput':
+    default:
+      return (
+        <Input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          {...componentProps}
+          style={{ ...baseStyle, ...(componentProps.style || {}) }}
+        />
+      );
+  }
+};
+
+export default FilterValueInput;

package/src/components/form/filter/__tests__/CollectionFilterItem.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * 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 { observable } from '@nocobase/flow-engine';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+type StubField = {
+  name: string;
+  title: string;
+  children?: StubField[];
+};
+
+// `fieldsToOptions` walks the live data-source registry to build option trees with operator lists per field interface. For a focused unit test we stub it so the test isn't coupled to interface registration. The stub returns the same nested shape `fieldsToOptions` would produce so `CollectionFilterItem`'s Cascader sees children for association-like fields.
+vi.mock('../../../../flow/components/filter/fieldsToOptions', () => {
+  const toOption = (field: StubField): any => ({
+    name: field.name,
+    title: field.title,
+    operators: field.children
+      ? undefined
+      : [
+          { value: '$eq', label: 'equals' },
+          { value: '$ne', label: 'not equals' },
+        ],
+    children: field.children?.map(toOption),
+  });
+  return {
+    fieldsToOptions: (fields: StubField[], _depth: number, ignore: string[]) =>
+      fields.filter((f) => !ignore.includes(f.name)).map(toOption),
+  };
+});
+
+import { CollectionFilterItem, createCollectionFilterItem } from '../CollectionFilterItem';
+
+function buildStubCollection(fieldDefs: StubField[]) {
+  return {
+    getFields: () =>
+      fieldDefs.map((f) => ({
+        name: f.name,
+        title: f.title,
+        type: 'string',
+        interface: 'input',
+        target: undefined as string | undefined,
+        // Mirror the stub's children so any downstream call that descends through the field tree behaves the same as `fieldsToOptions` does.
+        children: f.children,
+      })),
+  } as any;
+}
+
+function openFieldCascader(container: HTMLElement) {
+  const selector = container.querySelector('.ant-select-selector');
+  if (!selector) throw new Error('expected Cascader trigger to be rendered');
+  // antd Cascader renders an internal Select-style selector; mouseDown opens its popup just like a plain Select.
+  fireEvent.mouseDown(selector);
+}
+
+function openOperatorSelect(container: HTMLElement) {
+  // Operator dropdown is the second `.ant-select-selector` on the row; the first one is the Cascader's internal selector.
+  const selectors = container.querySelectorAll('.ant-select-selector');
+  if (selectors.length < 2) throw new Error('expected operator Select to be rendered');
+  fireEvent.mouseDown(selectors[1]);
+}
+
+describe('CollectionFilterItem', () => {
+  it('renders field options from the bound collection', async () => {
+    const value = observable({ path: '', operator: '', value: '' });
+    const collection = buildStubCollection([
+      { name: 'username', title: 'Username' },
+      { name: 'lockReason', title: 'Lock reason' },
+    ]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    openFieldCascader(container);
+    expect(await screen.findByText('Username')).toBeInTheDocument();
+    expect(await screen.findByText('Lock reason')).toBeInTheDocument();
+  });
+
+  it('updates value.path and seeds operator on leaf selection', async () => {
+    const value = observable({ path: '', operator: '', value: '' });
+    const collection = buildStubCollection([
+      { name: 'username', title: 'Username' },
+      { name: 'lockReason', title: 'Lock reason' },
+    ]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    openFieldCascader(container);
+    fireEvent.click(await screen.findByText('Username'));
+
+    await waitFor(() => {
+      expect(value.path).toBe('username');
+      // First operator from the stubbed options must be seeded automatically so the row is immediately usable without an extra click.
+      expect(value.operator).toBe('$eq');
+      // Field change clears the value — its shape is operator/field dependent (string for `$eq`, descriptor for `$dateOn`, etc.), so we don't carry the old value across field switches.
+      expect(value.value).toBeUndefined();
+    });
+  });
+
+  it('clears value when the operator changes', async () => {
+    const value = observable({ path: 'username', operator: '$eq', value: 'alice' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    openOperatorSelect(container);
+    fireEvent.click(await screen.findByText('not equals'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe('$ne');
+      // Same rationale as the field-change branch — a stale string from `$eq` would be structurally incompatible with e.g. a `$dateOn` descriptor if the user picks a date operator next.
+      expect(value.value).toBeUndefined();
+    });
+  });
+
+  it('honours filterableFieldNames whitelist', async () => {
+    const value = observable({ path: '', operator: '', value: '' });
+    const collection = buildStubCollection([
+      { name: 'username', title: 'Username' },
+      { name: 'lockReason', title: 'Lock reason' },
+    ]);
+
+    const { container } = render(
+      <CollectionFilterItem value={value} collection={collection} filterableFieldNames={['username']} />,
+    );
+
+    openFieldCascader(container);
+    expect(await screen.findByText('Username')).toBeInTheDocument();
+    expect(screen.queryByText('Lock reason')).not.toBeInTheDocument();
+  });
+
+  it('writes through value.value on input change', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    render(<CollectionFilterItem value={value} collection={collection} />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter value'), { target: { value: 'alice' } });
+    expect(value.value).toBe('alice');
+  });
+
+  it('lets the user change the operator independently', async () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    openOperatorSelect(container);
+    fireEvent.click(await screen.findByText('not equals'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe('$ne');
+    });
+  });
+
+  it('drills into nested association fields and joins the path with dots', async () => {
+    const value = observable({ path: '', operator: '', value: '' });
+    const collection = buildStubCollection([
+      {
+        name: 'user',
+        title: 'User',
+        // Association parent — no operators of its own; should appear disabled in the Cascader so users have to drill into a leaf.
+        children: [
+          { name: 'username', title: 'Username' },
+          { name: 'nickname', title: 'Nickname' },
+        ],
+      },
+      { name: 'lockedTs', title: 'Locked time' },
+    ]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    openFieldCascader(container);
+    // Click the association parent to reveal its children. Cascader is configured with `expandTrigger="click"`.
+    fireEvent.click(await screen.findByText('User'));
+    fireEvent.click(await screen.findByText('Username'));
+
+    await waitFor(() => {
+      // The selected leaf path is dot-joined so callers can use it directly as a filter path (e.g. `user.username`).
+      expect(value.path).toBe('user.username');
+      expect(value.operator).toBe('$eq');
+    });
+  });
+
+  it('createCollectionFilterItem binds the collection so FilterContainer can drive it', async () => {
+    const value = observable({ path: '', operator: '', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const Item = createCollectionFilterItem(collection, { filterableFieldNames: ['username'] });
+    const { container } = render(<Item value={value} />);
+
+    openFieldCascader(container);
+    fireEvent.click(await screen.findByText('Username'));
+    await waitFor(() => {
+      expect(value.path).toBe('username');
+    });
+  });
+});

package/src/components/form/filter/__tests__/DateFilterDynamicComponent.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * 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 } from '@testing-library/react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  DateFilterDynamicComponent,
+  FORMAT_BY_PICKER,
+  formatDateFilterValue,
+  parseDateFilterValue,
+} from '../DateFilterDynamicComponent';
+
+// `formatDateFilterValue` needs the quarter plugin to format `[Q]Q`, and `parseDateFilterValue` needs customParseFormat to parse non-ISO strings like `2026-02`. The component itself imports `dayjs` directly and relies on plugins being registered at app boot; in tests we register them locally so the unit-style helpers can run standalone.
+dayjs.extend(customParseFormat);
+dayjs.extend(quarterOfYear);
+
+function openModeDropdown(container: HTMLElement) {
+  const selector = container.querySelector('.ant-select-selector');
+  if (!selector) throw new Error('expected mode Select to be rendered');
+  fireEvent.mouseDown(selector);
+}
+
+describe('DateFilterDynamicComponent', () => {
+  it('defaults to Exact day mode and shows the picker-granularity + DatePicker controls', () => {
+    const { container } = render(<DateFilterDynamicComponent value={undefined} onChange={() => undefined} />);
+    // Three controls in the compact row: mode select, granularity select, DatePicker. antd renders Select via `.ant-select`, DatePicker via `.ant-picker`.
+    expect(container.querySelectorAll('.ant-select').length).toBeGreaterThanOrEqual(2);
+    expect(container.querySelector('.ant-picker')).not.toBeNull();
+    // Mode display reads "Exact day" with no value yet.
+    expect(screen.getByText('Exact day')).toBeInTheDocument();
+  });
+
+  it('emits { type: "past", number: 1, unit: "day" } when switching mode to Past', () => {
+    const onChange = vi.fn();
+    const { container } = render(<DateFilterDynamicComponent value={undefined} onChange={onChange} />);
+
+    openModeDropdown(container);
+    // "Past" appears in the dropdown's primary list (rendered via dropdownRender, so options have role="option" instead of antd's stock list).
+    const option = screen.getAllByRole('option').find((el) => el.textContent === 'Past');
+    if (!option) throw new Error('expected a Past option in the dropdown');
+    fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith({ type: 'past', number: 1, unit: 'day' });
+  });
+
+  it('emits { type: "today" } when switching mode to Today (no number / unit / picker)', () => {
+    const onChange = vi.fn();
+    const { container } = render(<DateFilterDynamicComponent value={undefined} onChange={onChange} />);
+
+    openModeDropdown(container);
+    const option = screen.getAllByRole('option').find((el) => el.textContent === 'Today');
+    if (!option) throw new Error('expected a Today option in the dropdown');
+    fireEvent.click(option);
+
+    expect(onChange).toHaveBeenCalledWith({ type: 'today' });
+  });
+
+  it('emits undefined (clears the descriptor) when switching back to Exact day', () => {
+    const onChange = vi.fn();
+    const { container } = render(<DateFilterDynamicComponent value={{ type: 'today' }} onChange={onChange} />);
+
+    openModeDropdown(container);
+    const option = screen.getAllByRole('option').find((el) => el.textContent === 'Exact day');
+    if (!option) throw new Error('expected an Exact day option in the dropdown');
+    fireEvent.click(option);
+
+    // Exact mode owns its value via the DatePicker, so the descriptor is cleared first; the picker emits its own value on user pick.
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('shows InputNumber + unit Select when the value is a past/next descriptor', () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <DateFilterDynamicComponent value={{ type: 'past', number: 3, unit: 'week' }} onChange={onChange} />,
+    );
+
+    // InputNumber present (antd renders `.ant-input-number`); unit Select is the second `.ant-select` in the row (mode is first).
+    expect(container.querySelector('.ant-input-number')).not.toBeNull();
+    expect(container.querySelectorAll('.ant-select').length).toBeGreaterThanOrEqual(2);
+    // DatePicker should NOT be rendered in relative-number mode.
+    expect(container.querySelector('.ant-picker')).toBeNull();
+  });
+
+  it('renders the RangePicker when isRange is true', () => {
+    const { container } = render(<DateFilterDynamicComponent value={undefined} onChange={() => undefined} isRange />);
+    // RangePicker carries the `.ant-picker-range` class; the granularity Select is suppressed in range mode (only mode select + range picker).
+    expect(container.querySelector('.ant-picker-range')).not.toBeNull();
+  });
+
+  it('hydrates a stored granularity-formatted string back into the DatePicker', () => {
+    // `2026-02-15` is the canonical Date-picker shape NocoBase's `$dateOn` operator emits when the user picks an exact day. The DatePicker must hydrate from it (so reopening the popover or re-rendering keeps the value) instead of treating it as an opaque blob.
+    //
+    // Note: the picker-mode state is local to the component and defaults to `date` on every mount, so values stored at other granularities (`2026-02` for month, `2026` for year) won't pre-fill on remount — only when the user is still in the same session. This matches v1's behaviour, where reopening a filter popover also re-derives the picker mode from the input shape.
+    const { container } = render(<DateFilterDynamicComponent value="2026-02-15" onChange={() => undefined} />);
+    const dateInput = container.querySelector('.ant-picker input') as HTMLInputElement;
+    if (!dateInput) throw new Error('expected antd DatePicker input to be rendered');
+    expect(dateInput.value).toBe('2026-02-15');
+  });
+
+  describe('format helpers (parseDateFilterValue / formatDateFilterValue)', () => {
+    // These two helpers are the heart of the v1-compatible URL output: `formatDateFilterValue` converts a Dayjs into the picker-shaped string the server expects, and `parseDateFilterValue` round-trips back so the controlled DatePicker can hydrate. Driving them directly is more reliable than poking antd's picker panel under jsdom.
+
+    it('formats Dayjs values per picker granularity (date / month / quarter / year)', () => {
+      const sample = dayjs('2026-02-15');
+      expect(formatDateFilterValue(sample, 'date')).toBe('2026-02-15');
+      expect(formatDateFilterValue(sample, 'month')).toBe('2026-02');
+      expect(formatDateFilterValue(sample, 'year')).toBe('2026');
+      expect(formatDateFilterValue(sample, 'quarter')).toBe('2026-Q1');
+    });
+
+    it('returns undefined for empty / non-Dayjs input so callers can drop the value', () => {
+      expect(formatDateFilterValue(null, 'date')).toBeUndefined();
+      expect(formatDateFilterValue(undefined, 'date')).toBeUndefined();
+    });
+
+    it('round-trips a granularity string back into a Dayjs at the matching format', () => {
+      const parsed = parseDateFilterValue('2026-02', 'month');
+      expect(parsed?.isValid()).toBe(true);
+      expect(parsed?.format(FORMAT_BY_PICKER.month)).toBe('2026-02');
+    });
+
+    it('returns null for missing / unparseable strings', () => {
+      expect(parseDateFilterValue(undefined, 'month')).toBeNull();
+      expect(parseDateFilterValue('', 'month')).toBeNull();
+      expect(parseDateFilterValue('not-a-date', 'month')).toBeNull();
+    });
+  });
+
+  it('translates mode labels via the provided t function', () => {
+    const t = (key: string) => (key === 'Past' ? 'PAST_ZH' : key);
+    const { container } = render(<DateFilterDynamicComponent value={undefined} onChange={() => undefined} t={t} />);
+
+    openModeDropdown(container);
+    // The translated label should appear in the dropdown options.
+    expect(screen.getAllByRole('option').some((el) => el.textContent === 'PAST_ZH')).toBe(true);
+    expect(container).toBeTruthy();
+  });
+});