feat: detail block support linkage rule (#4221)

* feat: detail block support linkage rule

* fix: bug

* fix: bug

* test: e2e test

packages/core/client/src/modules/blocks/data-blocks/details-multi/__e2e__/schemaSettings.test.ts

@@ -28,6 +28,7 @@ test.describe('multi data details block schema settings', () => {
       },
       supportedOptions: [
         'Edit block title',
+        'Linkage rules',
         'Set the data scope',
         'Set default sorting rules',
         'Save as template',

packages/core/client/src/modules/blocks/data-blocks/details-multi/detailsWithPaginationSettings.tsx

@@ -16,7 +16,11 @@ import { useFormBlockContext } from '../../../../block-provider';
 import { useDetailsBlockContext } from '../../../../block-provider/DetailsBlockProvider';
 import { useCollection_deprecated, useSortFields } from '../../../../collection-manager';
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
-import { SchemaSettingsBlockTitleItem, SchemaSettingsTemplate } from '../../../../schema-settings';
+import {
+  SchemaSettingsBlockTitleItem,
+  SchemaSettingsTemplate,
+  SchemaSettingsLinkageRules,
+} from '../../../../schema-settings';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
 import { setDataLoadingModeSettingsItem } from './setDataLoadingModeSettingsItem';
 
@@ -25,6 +29,17 @@ const commonItems: SchemaSettingsItemType[] = [
     name: 'title',
     Component: SchemaSettingsBlockTitleItem,
   },
+  {
+    name: 'linkageRules',
+    Component: SchemaSettingsLinkageRules,
+    useComponentProps() {
+      const { name } = useCollection_deprecated();
+      return {
+        collectionName: name,
+        readPretty: true,
+      };
+    },
+  },
   {
     name: 'dataScope',
     Component: SchemaSettingsDataScope,

packages/core/client/src/modules/blocks/data-blocks/details-single/__e2e__/schemaSettings.test.ts

@@ -24,7 +24,7 @@ test.describe('single details block schema settings', () => {
         await page.getByLabel('block-item-CardItem-general-form').hover();
         await page.getByLabel('designer-schema-settings-CardItem-FormV2.ReadPrettyDesigner-general').hover();
       },
-      supportedOptions: ['Edit block title', 'Save as block template', 'Delete'],
+      supportedOptions: ['Edit block title', 'Linkage rules', 'Save as block template', 'Delete'],
     });
   });
 });

packages/core/client/src/modules/blocks/data-blocks/details-single/detailsBlockSettings.ts

@@ -10,7 +10,11 @@
 import { useFieldSchema } from '@formily/react';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
 import { useCollection_deprecated } from '../../../../collection-manager';
-import { SchemaSettingsBlockTitleItem, SchemaSettingsFormItemTemplate } from '../../../../schema-settings';
+import {
+  SchemaSettingsBlockTitleItem,
+  SchemaSettingsFormItemTemplate,
+  SchemaSettingsLinkageRules,
+} from '../../../../schema-settings';
 import { SchemaSettingsItemType } from '../../../../application/schema-settings/types';
 
 const commonItems: SchemaSettingsItemType[] = [
@@ -18,6 +22,17 @@ const commonItems: SchemaSettingsItemType[] = [
     name: 'title',
     Component: SchemaSettingsBlockTitleItem,
   },
+  {
+    name: 'linkageRules',
+    Component: SchemaSettingsLinkageRules,
+    useComponentProps() {
+      const { name } = useCollection_deprecated();
+      return {
+        collectionName: name,
+        readPretty: true,
+      };
+    },
+  },
   {
     name: 'formItemTemplate',
     Component: SchemaSettingsFormItemTemplate,

packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx

@@ -107,6 +107,17 @@ export const readPrettyFormSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'linkageRules',
+      Component: SchemaSettingsLinkageRules,
+      useComponentProps() {
+        const { name } = useCollection_deprecated();
+        return {
+          collectionName: name,
+          readPretty: true,
+        };
+      },
+    },
     {
       name: 'formItemTemplate',
       Component: SchemaSettingsFormItemTemplate,
@@ -150,6 +161,17 @@ export const formDetailsSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'linkageRules',
+      Component: SchemaSettingsLinkageRules,
+      useComponentProps() {
+        const { name } = useCollection_deprecated();
+        return {
+          collectionName: name,
+          readPretty: true,
+        };
+      },
+    },
     {
       name: 'dataScope',
       Component: SchemaSettingsDataScope,

packages/core/client/src/schema-settings/LinkageRules/action-hooks.ts

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { useCollectionManager_deprecated } from '../../collection-manager';
 import { ActionType } from './type';
 
-export const useLinkageCollectionFieldOptions = (collectionName: string) => {
+export const useLinkageCollectionFieldOptions = (collectionName: string, readPretty: boolean) => {
   const { getCollectionFields, getInterface } = useCollectionManager_deprecated();
   const fields = getCollectionFields(collectionName).filter((v) => {
     return !['id', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'].includes(v.name);
@@ -27,7 +27,12 @@ export const useLinkageCollectionFieldOptions = (collectionName: string) => {
     { label: t('Required'), value: ActionType.Required, selected: false, schema: {} },
     { label: t('Not required'), value: ActionType.InRequired, selected: false, schema: {} },
     { label: t('Value'), value: ActionType.Value, selected: false, schema: {} },
-  ];
+  ].filter((v) => {
+    if (readPretty) {
+      return [ActionType.Visible, ActionType.None].includes(v.value);
+    }
+    return v;
+  });
   const field2option = (field, depth) => {
     const fieldInterface = getInterface(field.interface);
     if (!fieldInterface) {

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -1253,7 +1253,7 @@ export const SchemaSettingsDefaultSortingRules = function DefaultSortingRules(pr
 };
 
 export const SchemaSettingsLinkageRules = function LinkageRules(props) {
-  const { collectionName } = props;
+  const { collectionName, readPretty } = props;
   const fieldSchema = useFieldSchema();
   const { form } = useFormBlockContext();
   const { dn } = useDesignable();
@@ -1280,7 +1280,7 @@ export const SchemaSettingsLinkageRules = function LinkageRules(props) {
               defaultValues: gridSchema?.['x-linkage-rules'] || fieldSchema?.['x-linkage-rules'],
               type,
               // eslint-disable-next-line react-hooks/rules-of-hooks
-              linkageOptions: useLinkageCollectionFieldOptions(collectionName),
+              linkageOptions: useLinkageCollectionFieldOptions(collectionName, readPretty),
               collectionName,
               form,
               variables,