fix(filter-form): fix operator not valid in block templates (#4390)

* fix(filter-form): fix operator not valid in block templates

* test: add e2e test

* test: clear data templates

* chore: fix e2e tests

* chore: stash

* chore: change import path to fix unit tests

* chore: change import path to fix unit tests

* chore: fix build

packages/core/client/src/application/__tests__/hoc/withDynamicSchemaProps.test.tsx

@@ -9,8 +9,8 @@
 
 import { render } from '@nocobase/test/client';
 import React from 'react';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { SchemaComponent, SchemaComponentProvider } from '../../../schema-component';
-import { withDynamicSchemaProps } from '../../hoc';
 
 const HelloComponent = withDynamicSchemaProps((props: any) => (
   <pre data-testid="component">{JSON.stringify(props)}</pre>

packages/core/client/src/application/__tests__/schema-settings/hooks/useSchemaSettingsRender.test.tsx

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
 import { Application, SchemaSettings, useSchemaSettingsRender } from '@nocobase/client';
 import { render, screen, waitFor } from '@nocobase/test/client';
+import React from 'react';
 
 describe('useSchemaSettingsRender', () => {
   async function createApp(DemoComponent: any) {

packages/core/client/src/application/index.ts

@@ -8,15 +8,16 @@
  */
 
 export * from './Application';
-export * from './hooks';
 export * from './Plugin';
+export * from './PluginSettingsManager';
 export * from './RouterManager';
-export * from './utils';
 export * from './components';
+export { ApplicationContext } from './context';
+export * from './globalType';
+export * from './hooks';
 export * from './schema-initializer';
 export * from './schema-settings';
+export * from './schema-settings/context/SchemaSettingItemContext';
+export * from './schema-settings/hooks/useSchemaSettingsRender';
 export * from './schema-toolbar';
-export * from './PluginSettingsManager';
-export * from './hoc';
-export { ApplicationContext } from './context';
-export * from './globalType';
+export * from './utils';

packages/core/client/src/application/schema-settings/components/SchemaSettingsChildren.tsx

@@ -9,6 +9,7 @@
 
 import React, { FC, memo, useEffect, useMemo, useRef } from 'react';
 
+import { useFieldComponentName } from '../../../common/useFieldComponentName';
 import { useFindComponent } from '../../../schema-component';
 import {
   SchemaSettingsActionModalItem,
@@ -24,9 +25,8 @@ import {
   SchemaSettingsSwitchItem,
   useSchemaSettings,
 } from '../../../schema-settings/SchemaSettings';
-import { SchemaSettingItemContext } from '../context';
+import { SchemaSettingItemContext } from '../context/SchemaSettingItemContext';
 import { SchemaSettingsItemType } from '../types';
-import { useFieldComponentName } from '../../../common/useFieldComponentName';
 
 export interface SchemaSettingsChildrenProps {
   children: SchemaSettingsItemType[];

packages/core/client/src/application/schema-settings/index.ts

@@ -9,7 +9,6 @@
 
 export * from './SchemaSettings';
 export * from './SchemaSettingsManager';
-export * from './hooks';
 export * from './components';
-export * from './context';
+export * from './context/SchemaSettingItemContext';
 export * from './types';

packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx

@@ -31,6 +31,7 @@ import { CollapseItemSchemaToolbar } from '../modules/blocks/filter-blocks/colla
 import { useCollapseBlockDecoratorProps } from '../modules/blocks/filter-blocks/collapse/hooks/useCollapseBlockDecoratorProps';
 import { useFilterFormBlockDecoratorProps } from '../modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps';
 import { useFilterFormBlockProps } from '../modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps';
+import { useFormItemProps } from '../modules/blocks/filter-blocks/form/hooks/useFormItemProps';
 import { SchemaComponentOptions } from '../schema-component';
 import { RecordLink, useParamsFromRecord, useSourceIdFromParentRecord, useSourceIdFromRecord } from './BlockProvider';
 import { DetailsBlockProvider, useDetailsBlockProps } from './DetailsBlockProvider';
@@ -83,6 +84,7 @@ export const BlockSchemaComponentProvider: React.FC = (props) => {
         useFilterFormBlockProps,
         useFilterFormBlockDecoratorProps,
         useGridCardBlockDecoratorProps,
+        useFormItemProps,
       }}
     >
       {props.children}
@@ -142,6 +144,7 @@ export class BlockSchemaComponentPlugin extends Plugin {
       useFilterFormBlockProps,
       useFilterFormBlockDecoratorProps,
       useGridCardBlockDecoratorProps,
+      useFormItemProps,
     });
   }
 }

packages/core/client/src/block-provider/CollectOperators.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 React, { FC, createContext, useCallback, useRef } from 'react';
+
+const NOOP = () => {};
+
+const CollectOperatorsContext = createContext<{
+  /** 手机单个字段的操作符 */
+  collectOperator: (name: string | number, operator: string) => void;
+  /** 获取所有字段的操作符 */
+  getOperators: () => Record<string, string>;
+  /** 获取单个字段的操作符 */
+  getOperator: (name: string | number) => string;
+  /** 移除单个字段的操作符 */
+  removeOperator: (name: string | number) => void;
+}>(null);
+
+export const CollectOperators: FC<{ defaultOperators: Record<string, string> }> = (props) => {
+  const operators = useRef(props.defaultOperators || {});
+
+  const collectOperator = useCallback((name: string, operator: string) => {
+    operators.current[name] = operator;
+  }, []);
+
+  const getOperators = useCallback(() => {
+    return { ...operators.current };
+  }, []);
+
+  const getOperator = useCallback((name: string) => {
+    return operators.current[name];
+  }, []);
+
+  const removeOperator = useCallback((name: string) => {
+    delete operators.current[name];
+  }, []);
+
+  return (
+    <CollectOperatorsContext.Provider
+      value={{
+        collectOperator,
+        getOperators,
+        getOperator,
+        removeOperator,
+      }}
+    >
+      {props.children}
+    </CollectOperatorsContext.Provider>
+  );
+};
+
+export const useOperators = () => {
+  const {
+    getOperator = NOOP,
+    getOperators = NOOP,
+    collectOperator = NOOP,
+    removeOperator = NOOP,
+  } = React.useContext(CollectOperatorsContext) || {};
+  return {
+    getOperator,
+    getOperators: getOperators as () => Record<string, string> | undefined,
+    collectOperator,
+    removeOperator,
+  };
+};

packages/core/client/src/block-provider/DetailsBlockProvider.tsx

@@ -11,10 +11,10 @@ import { createForm } from '@formily/core';
 import { useField, useFieldSchema } from '@formily/react';
 import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
-import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
 import { useCollectionManager_deprecated } from '../collection-manager';
 import { useCollectionRecordData } from '../data-source';
 import { useCollectionParentRecord } from '../data-source/collection-record/CollectionRecordProvider';
+import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { useDetailsWithPaginationBlockParams } from '../modules/blocks/data-blocks/details-multi/hooks/useDetailsWithPaginationBlockParams';
 import { RecordProvider } from '../record-provider';
 import { useDesignable } from '../schema-component';

packages/core/client/src/block-provider/FilterFormBlockProvider.tsx

@@ -7,18 +7,26 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { useFieldSchema } from '@formily/react';
 import React from 'react';
+import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { DatePickerProvider } from '../schema-component';
 import { DefaultValueProvider } from '../schema-settings';
+import { CollectOperators } from './CollectOperators';
 import { FormBlockProvider } from './FormBlockProvider';
-import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
 
 export const FilterFormBlockProvider = withDynamicSchemaProps((props) => {
+  const filedSchema = useFieldSchema();
+  // 'x-filter-operators' 已被弃用，这里是为了兼容旧的配置
+  const deprecatedOperators = filedSchema['x-filter-operators'] || {};
+
   return (
-    <DatePickerProvider value={{ utc: false }}>
-      <DefaultValueProvider isAllowToSetDefaultValue={() => false}>
-        <FormBlockProvider name="filter-form" {...props}></FormBlockProvider>
-      </DefaultValueProvider>
-    </DatePickerProvider>
+    <CollectOperators defaultOperators={deprecatedOperators}>
+      <DatePickerProvider value={{ utc: false }}>
+        <DefaultValueProvider isAllowToSetDefaultValue={() => false}>
+          <FormBlockProvider name="filter-form" {...props}></FormBlockProvider>
+        </DefaultValueProvider>
+      </DatePickerProvider>
+    </CollectOperators>
   );
 });

packages/core/client/src/block-provider/FormBlockProvider.tsx

@@ -11,13 +11,13 @@ import { createForm } from '@formily/core';
 import { Schema, useField } from '@formily/react';
 import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
-import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
 import {
   CollectionRecord,
   useCollectionManager,
   useCollectionParentRecordData,
   useCollectionRecord,
 } from '../data-source';
+import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { useTreeParentRecord } from '../modules/blocks/data-blocks/table/TreeRecordProvider';
 import { RecordProvider } from '../record-provider';
 import { useActionContext } from '../schema-component';

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -10,8 +10,8 @@
 import { createForm } from '@formily/core';
 import { FormContext, useField, useFieldSchema } from '@formily/react';
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
 import { useCollectionManager_deprecated } from '../collection-manager';
+import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { useTableBlockParams } from '../modules/blocks/data-blocks/table';
 import { FixedBlockWrapper, SchemaComponentOptions } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';

packages/core/client/src/block-provider/TableSelectorProvider.tsx

@@ -12,11 +12,11 @@ import { Schema, useField, useFieldSchema } from '@formily/react';
 import _ from 'lodash';
 import uniq from 'lodash/uniq';
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
 import { useCollectionManager_deprecated } from '../collection-manager';
 import { useCollectionParentRecordData } from '../data-source/collection-record/CollectionRecordProvider';
 import { isInFilterFormBlock } from '../filter-provider';
 import { mergeFilter } from '../filter-provider/utils';
+import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { RecordProvider, useRecord } from '../record-provider';
 import { SchemaComponentOptions } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';

packages/core/client/src/block-provider/__tests__/CollectOperators.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 { render } from '@nocobase/test/client';
+import React from 'react';
+import { CollectOperators, useOperators } from '../CollectOperators';
+
+describe('CollectOperators', () => {
+  it('should collect and get operators correctly', () => {
+    const defaultOperators = {
+      field1: 'operator1',
+      field2: 'operator2',
+    };
+
+    const TestComponent = () => {
+      const { collectOperator, getOperators, getOperator } = useOperators();
+
+      collectOperator('field3', 'operator3');
+
+      const operators = getOperators();
+      const operator = getOperator('field1') as string;
+
+      return (
+        <div>
+          <span data-testid="operators">{JSON.stringify(operators)}</span>
+          <span data-testid="operator">{operator}</span>
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(
+      <CollectOperators defaultOperators={defaultOperators}>
+        <TestComponent />
+      </CollectOperators>,
+    );
+
+    const operatorsElement = getByTestId('operators');
+    const operatorElement = getByTestId('operator');
+
+    expect(JSON.parse(operatorsElement.textContent)).toEqual({
+      ...defaultOperators,
+      field3: 'operator3',
+    });
+    expect(operatorElement.textContent).toBe('operator1');
+  });
+});

packages/core/client/src/block-provider/hooks/index.ts

@@ -40,6 +40,7 @@ import { useLocalVariables, useVariables } from '../../variables';
 import { isVariable } from '../../variables/utils/isVariable';
 import { transformVariableValue } from '../../variables/utils/transformVariableValue';
 import { useBlockRequestContext, useFilterByTk, useParamsFromRecord } from '../BlockProvider';
+import { useOperators } from '../CollectOperators';
 import { useDetailsBlockContext } from '../DetailsBlockProvider';
 import { TableFieldResource } from '../TableFieldProvider';
 
@@ -413,6 +414,7 @@ export const useFilterBlockActionProps = () => {
   const { getDataBlocks } = useFilterBlock();
   const { name } = useCollection_deprecated();
   const { getCollectionJoinField } = useCollectionManager_deprecated();
+  const { getOperators } = useOperators();
 
   actionField.data = actionField.data || {};
 
@@ -433,7 +435,7 @@ export const useFilterBlockActionProps = () => {
             const storedFilter = block.service.params?.[1]?.filters || {};
 
             storedFilter[uid] = removeNullCondition(
-              transformToFilter(form.values, fieldSchema, getCollectionJoinField, name),
+              transformToFilter(form.values, getOperators(), getCollectionJoinField, name),
             );
 
             const mergedFilter = mergeFilter([

packages/core/client/src/data-source/collection-field/CollectionField.tsx

@@ -13,10 +13,10 @@ import { merge } from '@formily/shared';
 import { concat } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useFormBlockContext } from '../../block-provider/FormBlockProvider';
+import { useDynamicComponentProps } from '../../hoc/withDynamicSchemaProps';
 import { useCompile, useComponent } from '../../schema-component';
 import { useIsAllowToSetDefaultValue } from '../../schema-settings/hooks/useIsAllowToSetDefaultValue';
 import { CollectionFieldProvider, useCollectionField } from './CollectionFieldProvider';
-import { useDynamicComponentProps } from '../../application/hoc';
 
 type Props = {
   component: any;

packages/core/client/src/data-source/data-block/DataBlockProvider.tsx

@@ -11,7 +11,7 @@ import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'
 
 import { ACLCollectionProvider } from '../../acl/ACLProvider';
 import { UseRequestOptions, UseRequestService } from '../../api-client';
-import { withDynamicSchemaProps } from '../../application/hoc';
+import { withDynamicSchemaProps } from '../../hoc/withDynamicSchemaProps';
 import { Designable, useDesignable } from '../../schema-component';
 import {
   AssociationProvider,