fix(Picker): should display Allow add new data option (#3957)

packages/core/client/src/application/schema-toolbar/hooks/index.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
 import { ISchema } from '@formily/json-schema';
+import React, { useMemo } from 'react';
 import { useComponent, useDesignable } from '../../../schema-component';
 import { SchemaToolbar, SchemaToolbarProps } from '../../../schema-settings/GeneralSchemaDesigner';
 

packages/core/client/src/modules/fields/component/Picker/__e2e__/schemaSettings.test.ts

@@ -0,0 +1,17 @@
+import { expectSettingsMenu, test } from '@nocobase/test/e2e';
+import { oneFormWithPickerField } from './templatesOfBug';
+
+test.describe('SchemaSettings of Picker', () => {
+  test('supports options', async ({ page, mockPage }) => {
+    await mockPage(oneFormWithPickerField).goto();
+
+    await expectSettingsMenu({
+      page,
+      showMenu: async () => {
+        await page.getByLabel('block-item-CollectionField-').hover();
+        await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FormItem-users-users.').hover();
+      },
+      supportedOptions: ['Popup size', 'Allow add new data', 'Title field', 'Allow multiple', 'Field component'],
+    });
+  });
+});

packages/core/client/src/modules/fields/component/Picker/__e2e__/templatesOfBug.ts

@@ -0,0 +1,242 @@
+import { PageConfig } from '@nocobase/test/e2e';
+
+export const oneFormWithPickerField: PageConfig = {
+  pageSchema: {
+    _isJSONSchemaObject: true,
+    version: '2.0',
+    type: 'void',
+    'x-component': 'Page',
+    'x-app-version': '0.21.0-alpha.5',
+    properties: {
+      g31hdrdqs8h: {
+        _isJSONSchemaObject: true,
+        version: '2.0',
+        type: 'void',
+        'x-component': 'Grid',
+        'x-initializer': 'page:addBlock',
+        'x-app-version': '0.21.0-alpha.5',
+        properties: {
+          row_iz2b4igru45: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-index': 3,
+            'x-uid': '617eufdvnh6',
+            'x-async': false,
+          },
+          row_a5ts27jsr0r: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-index': 5,
+            'x-uid': '5y6xse8lly4',
+            'x-async': false,
+          },
+          row_7kgysy6ebmv: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-index': 7,
+            'x-uid': 'xinsxfgxn6w',
+            'x-async': false,
+          },
+          row_8up6dvn9s9x: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-index': 8,
+            properties: {
+              srvh9gyv314: {
+                _isJSONSchemaObject: true,
+                version: '2.0',
+                type: 'void',
+                'x-component': 'Grid.Col',
+                'x-uid': 'cmfgvfgiu5c',
+                'x-async': false,
+                'x-index': 1,
+              },
+            },
+            'x-uid': 'xqhlz9kb9cn',
+            'x-async': false,
+          },
+          ellejr0qqmk: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '0.21.0-alpha.5',
+            'x-uid': '332sv3qoo02',
+            'x-async': false,
+            'x-index': 9,
+          },
+          iikykifub90: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '0.21.0-alpha.5',
+            'x-uid': 'kwwfi3g1s9c',
+            'x-async': false,
+            'x-index': 10,
+          },
+          eocpt7rr5nf: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '0.21.0-alpha.5',
+            'x-uid': 'n8inyj1o337',
+            'x-async': false,
+            'x-index': 11,
+          },
+          '00va5gmpktn': {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '0.21.0-alpha.5',
+            properties: {
+              uhw2kshmg5n: {
+                _isJSONSchemaObject: true,
+                version: '2.0',
+                type: 'void',
+                'x-component': 'Grid.Col',
+                'x-app-version': '0.21.0-alpha.5',
+                properties: {
+                  n3o7bqxxmdp: {
+                    _isJSONSchemaObject: true,
+                    version: '2.0',
+                    type: 'void',
+                    'x-acl-action-props': {
+                      skipScopeCheck: true,
+                    },
+                    'x-acl-action': 'users:create',
+                    'x-decorator': 'FormBlockProvider',
+                    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
+                    'x-decorator-props': {
+                      dataSource: 'main',
+                      collection: 'users',
+                    },
+                    'x-toolbar': 'BlockSchemaToolbar',
+                    'x-settings': 'blockSettings:createForm',
+                    'x-component': 'CardItem',
+                    'x-app-version': '0.21.0-alpha.5',
+                    properties: {
+                      ab6zxnga5yh: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'void',
+                        'x-component': 'FormV2',
+                        'x-use-component-props': 'useCreateFormBlockProps',
+                        'x-app-version': '0.21.0-alpha.5',
+                        properties: {
+                          grid: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            'x-component': 'Grid',
+                            'x-initializer': 'form:configureFields',
+                            'x-app-version': '0.21.0-alpha.5',
+                            properties: {
+                              fv88xejydf7: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                type: 'void',
+                                'x-component': 'Grid.Row',
+                                'x-app-version': '0.21.0-alpha.5',
+                                properties: {
+                                  kgc72n2dnjs: {
+                                    _isJSONSchemaObject: true,
+                                    version: '2.0',
+                                    type: 'void',
+                                    'x-component': 'Grid.Col',
+                                    'x-app-version': '0.21.0-alpha.5',
+                                    properties: {
+                                      roles: {
+                                        'x-uid': 'xh41kv06w9h',
+                                        _isJSONSchemaObject: true,
+                                        version: '2.0',
+                                        type: 'string',
+                                        'x-toolbar': 'FormItemSchemaToolbar',
+                                        'x-settings': 'fieldSettings:FormItem',
+                                        'x-component': 'CollectionField',
+                                        'x-decorator': 'FormItem',
+                                        'x-collection-field': 'users.roles',
+                                        'x-component-props': {
+                                          fieldNames: {
+                                            label: 'name',
+                                            value: 'name',
+                                          },
+                                          mode: 'Picker',
+                                        },
+                                        'x-app-version': '0.21.0-alpha.5',
+                                        'x-async': false,
+                                        'x-index': 1,
+                                      },
+                                    },
+                                    'x-uid': 'j9i44yv2zv0',
+                                    'x-async': false,
+                                    'x-index': 1,
+                                  },
+                                },
+                                'x-uid': 'prexj7926ya',
+                                'x-async': false,
+                                'x-index': 1,
+                              },
+                            },
+                            'x-uid': 'emwe7dhqqxc',
+                            'x-async': false,
+                            'x-index': 1,
+                          },
+                          ypc6lolh1t5: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            'x-initializer': 'createForm:configureActions',
+                            'x-component': 'ActionBar',
+                            'x-component-props': {
+                              layout: 'one-column',
+                              style: {
+                                marginTop: 24,
+                              },
+                            },
+                            'x-app-version': '0.21.0-alpha.5',
+                            'x-uid': 'hurfo4v8c9d',
+                            'x-async': false,
+                            'x-index': 2,
+                          },
+                        },
+                        'x-uid': 'rs8dkg2723x',
+                        'x-async': false,
+                        'x-index': 1,
+                      },
+                    },
+                    'x-uid': 't03by8fpct5',
+                    'x-async': false,
+                    'x-index': 1,
+                  },
+                },
+                'x-uid': 'bempwzkuh75',
+                'x-async': false,
+                'x-index': 1,
+              },
+            },
+            'x-uid': '6dl0rbnvxxx',
+            'x-async': false,
+            'x-index': 12,
+          },
+        },
+        'x-uid': 'gvzvz05oi9h',
+        'x-async': false,
+        'x-index': 1,
+      },
+    },
+    'x-uid': 'mk589w74bvs',
+    'x-async': true,
+    'x-index': 1,
+  },
+};

packages/core/client/src/modules/fields/component/Picker/recordPickerComponentFieldSettings.tsx

@@ -3,14 +3,15 @@ import { useField, useFieldSchema } from '@formily/react';
 import { useTranslation } from 'react-i18next';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
 import { useFieldComponentName } from '../../../../common/useFieldComponentName';
+import { useCollectionField } from '../../../../data-source';
 import { useDesignable, useFieldModeOptions, useIsAddNewForm } from '../../../../schema-component';
 import { isSubMode } from '../../../../schema-component/antd/association-field/util';
 import {
+  allowAddNew,
   useIsFieldReadPretty,
   useTitleFieldOptions,
 } from '../../../../schema-component/antd/form-item/FormItem.Settings';
 import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
-import { useCollectionField } from '../../../../data-source';
 
 export const titleField: any = {
   name: 'titleField',
@@ -179,6 +180,7 @@ export const recordPickerComponentFieldSettings = new SchemaSettings({
         };
       },
     },
+    allowAddNew,
     allowMultiple,
     titleField,
   ],

packages/core/client/src/schema-component/antd/form-item/FormItem.Settings.tsx

@@ -4,25 +4,26 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { SchemaSettings } from '../../../application/schema-settings';
+import { SchemaSettings, SchemaSettingsItemType } from '../../../application/schema-settings';
 import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
 import {
   Collection_deprecated,
-  useCollection_deprecated,
   useCollectionField_deprecated,
   useCollectionManager_deprecated,
+  useCollection_deprecated,
 } from '../../../collection-manager';
 import { useRecord } from '../../../record-provider';
+import { useColumnSchema } from '../../../schema-component/antd/table-v2/Table.Column.Decorator';
 import { generalSettingsItems } from '../../../schema-items/GeneralSettings';
-import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled';
-import { SchemaSettingsSortingRule } from '../../../schema-settings/SchemaSettingsSortingRule';
-import { SchemaSettingsDateFormat } from '../../../schema-settings/SchemaSettingsDateFormat';
-import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
-import { SchemaSettingsDefaultValue } from '../../../schema-settings/SchemaSettingsDefaultValue';
 import { ActionType } from '../../../schema-settings/LinkageRules/type';
+import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
+import { SchemaSettingsDateFormat } from '../../../schema-settings/SchemaSettingsDateFormat';
+import { SchemaSettingsDefaultValue } from '../../../schema-settings/SchemaSettingsDefaultValue';
+import { SchemaSettingsSortingRule } from '../../../schema-settings/SchemaSettingsSortingRule';
 import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
 import { useIsAllowToSetDefaultValue } from '../../../schema-settings/hooks/useIsAllowToSetDefaultValue';
 import { useIsShowMultipleSwitch } from '../../../schema-settings/hooks/useIsShowMultipleSwitch';
+import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled';
 import { useLocalVariables, useVariables } from '../../../variables';
 import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
 import { isSubMode } from '../association-field/util';
@@ -30,7 +31,67 @@ import { removeNullCondition } from '../filter';
 import { DynamicComponentProps } from '../filter/DynamicComponent';
 import { getTempFieldState } from '../form-v2/utils';
 import { useColorFields } from '../table-v2/Table.Column.Designer';
-import { useColumnSchema } from '../../../schema-component/antd/table-v2/Table.Column.Decorator';
+
+export const allowAddNew: SchemaSettingsItemType = {
+  name: 'allowAddNew',
+  type: 'switch',
+  useVisible() {
+    const readPretty = useIsFieldReadPretty();
+    const isAssociationField = useIsAssociationField();
+    const fieldMode = useFieldMode();
+    return !readPretty && isAssociationField && ['Picker'].includes(fieldMode);
+  },
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField<Field>();
+    const fieldSchema = useFieldSchema();
+    const { dn, refresh, insertAdjacent } = useDesignable();
+    return {
+      title: t('Allow add new data'),
+      checked: fieldSchema['x-add-new'] as boolean,
+      onChange(allowAddNew) {
+        const hasAddNew = fieldSchema.reduceProperties((buf, schema) => {
+          if (schema['x-component'] === 'Action') {
+            return schema;
+          }
+          return buf;
+        }, null);
+
+        if (!hasAddNew) {
+          const addNewActionSchema = {
+            'x-action': 'create',
+            'x-acl-action': 'create',
+            title: "{{t('Add new')}}",
+            // 'x-designer': 'Action.Designer',
+            'x-toolbar': 'ActionSchemaToolbar',
+            'x-toolbar-props': {
+              draggable: false,
+            },
+            'x-settings': 'actionSettings:addNew',
+            'x-component': 'Action',
+            'x-decorator': 'ACLActionProvider',
+            'x-component-props': {
+              openMode: 'drawer',
+              type: 'default',
+              component: 'CreateRecordAction',
+            },
+          };
+          insertAdjacent('afterBegin', addNewActionSchema);
+        }
+        const schema = {
+          ['x-uid']: fieldSchema['x-uid'],
+        };
+        field['x-add-new'] = allowAddNew;
+        fieldSchema['x-add-new'] = allowAddNew;
+        schema['x-add-new'] = allowAddNew;
+        dn.emit('patch', {
+          schema,
+        });
+        refresh();
+      },
+    };
+  },
+};
 
 /**
  * @deprecated
@@ -456,63 +517,7 @@ export const formItemSettings = new SchemaSettings({
         return showModeSelect;
       },
     },
-    {
+    allowAddNew,
-      name: 'allowAddNew',
-      type: 'switch',
-      useVisible() {
-        const readPretty = useIsFieldReadPretty();
-        const isAssociationField = useIsAssociationField();
-        const fieldMode = useFieldMode();
-        return !readPretty && isAssociationField && ['Picker'].includes(fieldMode);
-      },
-      useComponentProps() {
-        const { t } = useTranslation();
-        const field = useField<Field>();
-        const fieldSchema = useFieldSchema();
-        const { dn, refresh, insertAdjacent } = useDesignable();
-        return {
-          title: t('Allow add new data'),
-          checked: fieldSchema['x-add-new'] as boolean,
-          onChange(allowAddNew) {
-            const hasAddNew = fieldSchema.reduceProperties((buf, schema) => {
-              if (schema['x-component'] === 'Action') {
-                return schema;
-              }
-              return buf;
-            }, null);
-
-            if (!hasAddNew) {
-              const addNewActionschema = {
-                'x-action': 'create',
-                'x-acl-action': 'create',
-                title: "{{t('Add new')}}",
-                // 'x-designer': 'Action.Designer',
-                'x-toolbar': 'ActionSchemaToolbar',
-                'x-settings': 'actonSettings:addNew',
-                'x-component': 'Action',
-                'x-decorator': 'ACLActionProvider',
-                'x-component-props': {
-                  openMode: 'drawer',
-                  type: 'default',
-                  component: 'CreateRecordAction',
-                },
-              };
-              insertAdjacent('afterBegin', addNewActionschema);
-            }
-            const schema = {
-              ['x-uid']: fieldSchema['x-uid'],
-            };
-            field['x-add-new'] = allowAddNew;
-            fieldSchema['x-add-new'] = allowAddNew;
-            schema['x-add-new'] = allowAddNew;
-            dn.emit('patch', {
-              schema,
-            });
-            refresh();
-          },
-        };
-      },
-    },
     {
       name: 'addMode',
       type: 'select',
@@ -551,7 +556,7 @@ export const formItemSettings = new SchemaSettings({
                   title: "{{t('Add new')}}",
                   // 'x-designer': 'Action.Designer',
                   'x-toolbar': 'ActionSchemaToolbar',
-                  'x-settings': 'actonSettings:addNew',
+                  'x-settings': 'actionSettings:addNew',
                   'x-component': 'Action',
                   'x-decorator': 'ACLActionProvider',
                   'x-component-props': {