@nocobase/client-v2 2.1.0-beta.46 → 2.1.0-beta.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.46",
+  "version": "2.1.0-beta.47",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.0-beta.46",
-    "@nocobase/flow-engine": "2.1.0-beta.46",
-    "@nocobase/sdk": "2.1.0-beta.46",
-    "@nocobase/shared": "2.1.0-beta.46",
-    "@nocobase/utils": "2.1.0-beta.46",
+    "@nocobase/evaluators": "2.1.0-beta.47",
+    "@nocobase/flow-engine": "2.1.0-beta.47",
+    "@nocobase/sdk": "2.1.0-beta.47",
+    "@nocobase/shared": "2.1.0-beta.47",
+    "@nocobase/utils": "2.1.0-beta.47",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -45,5 +45,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "91fd3ab238a5ff58735bbfca04a8cb05d233b0af"
+  "gitHead": "bf8fc3790e3494c901b4d22861c5471a0d27c464"
 }

package/src/components/form/DrawerFormLayout.tsx

@@ -64,7 +64,7 @@ export function DrawerFormLayout(props: DrawerFormLayoutProps) {
   }, [props, view]);
 
   return (
-    <div>
+    <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
       {view.Header ? <view.Header title={props.title} /> : null}
       {props.children}
       {view.Footer ? (

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

@@ -19,6 +19,8 @@ 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. */
@@ -55,6 +57,7 @@ export interface CollectionFilterProps {
 export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const {
     collection,
+    initialValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -71,6 +74,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
 
   const filterAction = useFilterActionProps({
     collection,
+    initialValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

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

@@ -0,0 +1,97 @@
+/**
+ * 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 type { Collection } from '@nocobase/flow-engine';
+import { Empty } from 'antd';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { FilterGroup } from '../../../flow/components/filter';
+import {
+  compileFilterGroup,
+  type CompiledFilter,
+  type FilterApplyAction,
+  useFilterActionProps,
+} from './useFilterActionProps';
+
+const identity = (s: string) => s;
+
+export interface CollectionFilterPanelRef {
+  getFilter: () => CompiledFilter;
+  reset: () => void;
+}
+
+export interface CollectionFilterPanelProps {
+  /** 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 when the condition group structure changes or `reset()` is invoked. */
+  onChange?: (filter: CompiledFilter) => void;
+  /** Translator. Defaults to identity. */
+  t?: (key: string, options?: Record<string, unknown>) => 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`.
+   */
+  nonfilterableFieldNames?: string[];
+  /** Bypass the `filterableFieldNames` whitelist. */
+  noIgnore?: boolean;
+}
+
+/**
+ * Inline collection filter editor for forms and drawers. Unlike `CollectionFilter`, this does not render a trigger button, popover, or nested `<form>`, so it can safely live inside an antd form and be submitted by the outer drawer action.
+ */
+export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, CollectionFilterPanelProps>((props, ref) => {
+  const {
+    collection,
+    initialValue,
+    onChange,
+    t = identity,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+  } = props;
+
+  const filterAction = useFilterActionProps({
+    collection,
+    initialValue,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+    onApply: (filter: CompiledFilter, _action: FilterApplyAction) => {
+      onChange?.(filter);
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFilter: () => compileFilterGroup(filterAction.value),
+      reset: filterAction.onReset,
+    }),
+    [filterAction.onReset, filterAction.value],
+  );
+
+  if (!collection || !filterAction.FilterItem) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('No data')} />;
+  }
+
+  return (
+    <FilterGroup
+      value={filterAction.value}
+      FilterItem={filterAction.FilterItem}
+      onChange={() => onChange?.(compileFilterGroup(filterAction.value))}
+    />
+  );
+});
+
+CollectionFilterPanel.displayName = 'CollectionFilterPanel';
+
+export default CollectionFilterPanel;

package/src/components/form/filter/__tests__/compileFilterGroup.test.ts

@@ -8,7 +8,7 @@
  */
 
 import { describe, expect, it } from 'vitest';
-import { compileFilterGroup } from '../useFilterActionProps';
+import { compileFilterGroup, decompileFilterGroup } from '../useFilterActionProps';
 
 describe('compileFilterGroup', () => {
   it('returns undefined for an empty group so callers can drop the filter param', () => {
@@ -144,3 +144,78 @@ describe('compileFilterGroup', () => {
     });
   });
 });
+
+describe('decompileFilterGroup', () => {
+  it('returns undefined for an empty compiled filter', () => {
+    expect(decompileFilterGroup(undefined)).toBeUndefined();
+    expect(decompileFilterGroup({})).toBeUndefined();
+  });
+
+  it('restores a compiled condition into an editable filter row', () => {
+    expect(decompileFilterGroup({ $and: [{ lockReason: { $includes: 'abuse' } }] })).toEqual({
+      logic: '$and',
+      items: [{ path: 'lockReason', operator: '$includes', value: 'abuse' }],
+    });
+  });
+
+  it('restores a direct condition object into an editable filter row', () => {
+    expect(decompileFilterGroup({ title: { $includes: 'test' } })).toEqual({
+      logic: '$and',
+      items: [{ path: 'title', operator: '$includes', value: 'test' }],
+    });
+  });
+
+  it('restores legacy direct field values as equality rows', () => {
+    expect(decompileFilterGroup({ createdById: '{{ ctx.state.currentUser.id }}' })).toEqual({
+      logic: '$and',
+      items: [{ path: 'createdById', operator: '$eq', value: '{{ ctx.state.currentUser.id }}' }],
+    });
+  });
+
+  it('restores multiple direct condition fields', () => {
+    expect(
+      decompileFilterGroup({
+        title: { $includes: 'test' },
+        status: 'published',
+      }),
+    ).toEqual({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: 'test' },
+        { path: 'status', operator: '$eq', value: 'published' },
+      ],
+    });
+  });
+
+  it('restores nested association paths', () => {
+    expect(decompileFilterGroup({ $and: [{ user: { createdBy: { password: { $includes: '123' } } } }] })).toEqual({
+      logic: '$and',
+      items: [{ path: 'user.createdBy.password', operator: '$includes', value: '123' }],
+    });
+  });
+
+  it('restores nested filter groups', () => {
+    expect(
+      decompileFilterGroup({
+        $and: [
+          { lockReason: { $eq: 'abuse' } },
+          {
+            $or: [{ lockedTs: { $dateAfter: '2026-01-01' } }, { lockedTs: { $dateBefore: '2026-12-31' } }],
+          },
+        ],
+      }),
+    ).toEqual({
+      logic: '$and',
+      items: [
+        { path: 'lockReason', operator: '$eq', value: 'abuse' },
+        {
+          logic: '$or',
+          items: [
+            { path: 'lockedTs', operator: '$dateAfter', value: '2026-01-01' },
+            { path: 'lockedTs', operator: '$dateBefore', value: '2026-12-31' },
+          ],
+        },
+      ],
+    });
+  });
+});

package/src/components/form/filter/index.ts

@@ -10,4 +10,6 @@
 // Higher-level filter compositions for non-schema surfaces (settings pages, panels, side drawers). The low-level primitives — `FilterContainer`, `FilterGroup`, `FilterItem`, `fieldsToOptions`, `useFilterOptions` — live under `src/flow/components/filter/`; this layer composes them with a `Collection` binding and exposes the hook/component pair callers actually reach for. The dependency direction is form/filter → flow/components/filter only.
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
+export { CollectionFilterPanel } from './CollectionFilterPanel';
+export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

package/src/components/form/filter/useFilterActionProps.ts

@@ -68,6 +68,68 @@ const nestPath = (path: string, leaf: unknown): Record<string, unknown> => {
   return result as Record<string, unknown>;
 };
 
+const decompileConditions = (value: unknown, path: string[] = []): CollectionFilterItemValue[] => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return path.length ? [{ path: path.join('.'), operator: '$eq', value }] : [];
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>);
+  const operatorEntries = entries.filter(([key]) => key.startsWith('$'));
+  if (operatorEntries.length) {
+    if (!path.length) {
+      return [];
+    }
+    return operatorEntries.map(([operator, operatorValue]) => ({
+      path: path.join('.'),
+      operator,
+      value: operatorValue,
+    }));
+  }
+
+  return entries.flatMap(([fieldName, nextValue]) => decompileConditions(nextValue, [...path, fieldName]));
+};
+
+const getGroupLogic = (record: Record<string, unknown>): FilterGroupValue['logic'] | undefined => {
+  if (Array.isArray(record.$or)) {
+    return '$or';
+  }
+  if (Array.isArray(record.$and)) {
+    return '$and';
+  }
+  return undefined;
+};
+
+const decompileFilterItem = (item: unknown): FilterGroupItem[] => {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) {
+    return [];
+  }
+  const record = item as Record<string, unknown>;
+  if (getGroupLogic(record)) {
+    const group = decompileFilterGroup(record);
+    return group ? [group] : [];
+  }
+  return decompileConditions(record);
+};
+
+export function decompileFilterGroup(filter: CompiledFilter): FilterGroupValue | undefined {
+  if (!filter || typeof filter !== 'object' || Array.isArray(filter)) {
+    return undefined;
+  }
+
+  const record = filter as Record<string, unknown>;
+  const logic = getGroupLogic(record);
+  if (!logic) {
+    const items = decompileConditions(record);
+    return items.length ? { logic: '$and', items } : undefined;
+  }
+  const sourceItems = record[logic] as unknown[];
+  const items = sourceItems
+    .flatMap((item) => decompileFilterItem(item))
+    .filter((item): item is FilterGroupItem => Boolean(item));
+
+  return items.length ? { logic, items } : undefined;
+}
+
 /**
  * Compile a reactive filter group into the `{ $and: [{ path: { op: val } }] }` envelope accepted by NocoBase's resource `list` filter param. Returns `undefined` when the group is empty so callers can drop the param.
  *
@@ -100,6 +162,8 @@ export type FilterApplyAction = 'submit' | 'reset';
 export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   /** Collection whose fields populate the filter row's field picker. */
   collection: Collection | undefined;
+  /** Previously compiled filter param used to seed the editable filter group. */
+  initialValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -152,12 +216,12 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 

package/src/flow/actions/linkageRules.tsx

@@ -46,7 +46,7 @@ import { useAssociationTitleFieldSync } from '../components/useAssociationTitleF
 import _ from 'lodash';
 import { SubFormFieldModel, SubFormListFieldModel } from '../models';
 import { coerceForToOneField } from '../internal/utils/associationValueCoercion';
-import { enumToOptions } from '../internal/utils/enumOptionsUtils';
+import { enumToOptions, translateOptionLabel } from '../internal/utils/enumOptionsUtils';
 import {
   findFormItemModelByFieldPath,
   getCollectionFromModel,
@@ -156,7 +156,7 @@ const getFieldModelOptions = (fieldModel: any, t: (s: string) => string) => {
   if (originalOptions) {
     return originalOptions.map((option: any) =>
       option && typeof option === 'object' && typeof option.label === 'string'
-        ? { ...option, label: t(option.label) }
+        ? { ...option, label: translateOptionLabel(option.label, t) }
         : option,
     );
   }

package/src/flow/internal/utils/__tests__/enumOptionsUtils.test.ts

@@ -24,27 +24,28 @@ function mockT(input: string) {
 }
 
 describe('enumOptions utils', () => {
-  it('enumToOptions: converts primitive enum and translates labels', () => {
+  it('enumToOptions: converts primitive enum and translates explicit template labels', () => {
     const uiEnum = ['{{t("Yes")}}', '{{t("No")}}'];
-    const options = enumToOptions(uiEnum as any, mockT)!;
-    expect(options).toHaveLength(2);
-    expect(options[0]).toEqual({ label: '是', value: '{{t("Yes")}}' });
-    expect(options[1]).toEqual({ label: '否', value: '{{t("No")}}' });
+    const options = enumToOptions(uiEnum as any, mockT);
+    expect(options).toEqual([
+      { label: '是', value: '{{t("Yes")}}' },
+      { label: '否', value: '{{t("No")}}' },
+    ]);
   });
 
-  it('enumToOptions: keeps object value and translates object label', () => {
+  it('enumToOptions: keeps object value and translates explicit template object label', () => {
     const uiEnum = [
       { label: '{{t("Yes")}}', value: true },
       { label: '{{t("No")}}', value: false },
     ];
-    const options = enumToOptions(uiEnum as any, mockT)!;
+    const options = enumToOptions(uiEnum as any, mockT);
     expect(options).toEqual([
       { label: '是', value: true },
       { label: '否', value: false },
     ]);
   });
 
-  it('translateOptions: maps given options labels through t()', () => {
+  it('translateOptions: maps only explicit template labels through t()', () => {
     const options = [
       { label: '{{t("Draft")}}', value: 'draft' },
       { label: 'No', value: false },
@@ -52,7 +53,7 @@ describe('enumOptions utils', () => {
     const out = translateOptions(options as any, mockT);
     expect(out).toEqual([
       { label: '草稿', value: 'draft' },
-      { label: '否', value: false },
+      { label: 'No', value: false },
     ]);
   });
 

package/src/flow/internal/utils/enumOptionsUtils.ts

@@ -33,13 +33,21 @@ function normalizeUiSchemaEnumToOptions(uiEnum: UiSchemaEnumItem[] = []): Option
   });
 }
 
-// Map option labels through t() (supports {{t('key')}} template and plain strings)
+export function isTranslationTemplate(value: unknown): value is string {
+  return typeof value === 'string' && /\{\{\s*t\s*\(/.test(value);
+}
+
+export function translateOptionLabel(label: any, t: (s: string) => string): any {
+  return isTranslationTemplate(label) ? t(label) : label;
+}
+
+// Map option labels through t() only when labels explicitly use {{t(...)}} templates.
 export function translateOptions(options: Option[] = [], t: (s: string) => string): Option[] {
   if (!Array.isArray(options)) return [] as Option[];
-  return options.map((opt) => (typeof opt?.label === 'string' ? { ...opt, label: t(opt.label) } : opt));
+  return options.map((opt) => ({ ...opt, label: translateOptionLabel(opt?.label, t) }));
 }
 
-// Build options from uiSchema.enum with translated labels
+// Build options from uiSchema.enum with explicitly translated labels
 export function enumToOptions(uiEnum: UiSchemaEnumItem[] | undefined, t: (s: string) => string): Option[] | undefined {
   if (!uiEnum || !Array.isArray(uiEnum) || uiEnum.length === 0) return undefined;
   const normalized = normalizeUiSchemaEnumToOptions(uiEnum);

package/src/flow/models/fields/DisplayEnumFieldModel.tsx

@@ -13,6 +13,7 @@ import { Tag } from 'antd';
 import React from 'react';
 import { castArray } from 'lodash';
 import { ClickableFieldModel } from './ClickableFieldModel';
+import { translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 interface FieldNames {
   value: string;
@@ -70,7 +71,7 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
     }
     return currentOptions.map((option) => (
       <Tag key={option[fieldNames.value]} color={option[fieldNames.color]} icon={<Icon type={option['icon']} />}>
-        {this.translate(option[fieldNames.label])}
+        {translateOptionLabel(option[fieldNames.label], this.translate)}
       </Tag>
     ));
   }

package/src/flow/models/fields/DisplayJSONFieldModel.tsx

@@ -9,7 +9,8 @@
 
 import { css, cx } from '@emotion/css';
 import { DisplayItemModel } from '@nocobase/flow-engine';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
 import { Tooltip } from 'antd';
 import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
 
@@ -21,8 +22,14 @@ const JSONClassName = css`
   border: none !important;
 `;
 
-const EllipsisJSON = ({ content, style, className }) => {
-  const ref = useRef(null);
+interface EllipsisJSONProps {
+  content: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+const EllipsisJSON = ({ content, style, className }: EllipsisJSONProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [overflow, setOverflow] = useState(false);
 
   useEffect(() => {
@@ -75,7 +82,7 @@ const EllipsisJSON = ({ content, style, className }) => {
 };
 
 export class DisplayJSONFieldModel extends DisplayTitleFieldModel {
-  public renderComponent(value) {
+  public renderComponent(value: unknown) {
     const { space, style, className, overflowMode } = this.props;
     let content = '';
     if (value !== undefined && value !== null) {
@@ -96,6 +103,10 @@ export class DisplayJSONFieldModel extends DisplayTitleFieldModel {
       </pre>
     );
   }
+
+  public render() {
+    return this.renderComponent(this.props.value);
+  }
 }
 
 DisplayItemModel.bindModelToInterface('DisplayJSONFieldModel', ['json'], {

package/src/flow/models/fields/SelectFieldModel.tsx

@@ -12,7 +12,7 @@ import { Select, Tag, Tooltip } from 'antd';
 import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
-import { enumToOptions, getSelectedEnumLabels } from '../../internal/utils/enumOptionsUtils';
+import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
   const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
@@ -29,12 +29,12 @@ export class SelectFieldModel extends FieldModel {
     const options = this.props.options?.map((v) => {
       return {
         ...v,
-        label: this.translate(v.label),
+        label: translateOptionLabel(v.label, this.translate),
       };
     });
     const selectedLabels = getSelectedEnumLabels(this.props.value, fallbackOptions).map((item) => ({
       ...item,
-      label: this.translate(item.label),
+      label: translateOptionLabel(item.label, this.translate),
     }));
     const value = Array.isArray(this.props.value)
       ? selectedLabels

package/src/flow/models/fields/__tests__/DisplayJSONFieldModel.test.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DisplayJSONFieldModel } from '../DisplayJSONFieldModel';
+
+describe('DisplayJSONFieldModel', () => {
+  it('renders object field values as formatted JSON', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayJSONFieldModel });
+
+    const model = engine.createModel<DisplayJSONFieldModel>({
+      use: DisplayJSONFieldModel,
+      uid: 'display-json-object-value',
+      props: {
+        value: {
+          enabled: true,
+          name: 'NocoBase',
+        },
+      },
+    });
+
+    const { container } = render(model.render());
+
+    expect(container.textContent).toContain('"enabled": true');
+    expect(container.textContent).toContain('"name": "NocoBase"');
+  });
+});