refactor(FormV2): add FormWithDataTemplates component (#4551)

* Revert "fix(client): fix data template style (#4536)"

This reverts commit db66090ab2.

* refactor(FormV2): add FormWithDataTemplates component

* chore: fix failed e2e tests

* chore: make e2e test more stable

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

@@ -8,8 +8,8 @@
  */
 
 import { createForm } from '@formily/core';
-import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
-import { Spin, theme } from 'antd';
+import { Schema, useField } from '@formily/react';
+import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import {
   CollectionRecord,
@@ -20,8 +20,7 @@ import {
 import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { useTreeParentRecord } from '../modules/blocks/data-blocks/table/TreeRecordProvider';
 import { RecordProvider } from '../record-provider';
-import { useActionContext, useDesignable } from '../schema-component';
-import { Templates as DataTemplateSelect } from '../schema-component/antd/form-v2/Templates';
+import { useActionContext } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { TemplateBlockProvider } from './TemplateBlockProvider';
 import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
@@ -95,9 +94,7 @@ const InternalFormBlockProvider = (props) => {
   return (
     <FormBlockContext.Provider value={formBlockValue}>
       <RecordProvider isNew={record?.isNew} parent={record?.parentRecord?.data} record={record?.data}>
-        <div ref={formBlockRef}>
-          <RenderChildrenWithDataTemplates form={form} />
-        </div>
+        <div ref={formBlockRef}>{props.children}</div>
       </RecordProvider>
     </FormBlockContext.Provider>
   );
@@ -178,20 +175,6 @@ export const useFormBlockProps = () => {
   };
 };
 
-const RenderChildrenWithDataTemplates = ({ form }) => {
-  const FieldSchema = useFieldSchema();
-  const { findComponent } = useDesignable();
-  const field = useField();
-  const Component = findComponent(field.component?.[0]) || React.Fragment;
-  const { token } = theme.useToken();
-  return (
-    <Component {...field.componentProps}>
-      <DataTemplateSelect style={{ marginBottom: token.margin }} form={form} />
-      <RecursionField schema={FieldSchema} onlyRenderProperties />
-    </Component>
-  );
-};
-
 /**
  * @internal
  */

packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts

@@ -729,6 +729,8 @@ test.describe('creation form block schema settings', () => {
         'x-index': 1,
       },
     }).goto();
+
+    await page.waitForLoadState('networkidle');
     await page.getByLabel('schema-initializer-Grid-page:addBlock').hover();
     //使用复制模板
     await page.getByRole('menuitem', { name: 'form Form' }).first().hover();

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

@@ -0,0 +1,31 @@
+/**
+ * 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 from 'react';
+import { Templates } from '../..';
+import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { useToken } from '../../../style';
+import { Form } from './Form';
+
+export const FormWithDataTemplates: any = withDynamicSchemaProps(
+  (props) => {
+    const formBlockCtx = useFormBlockContext();
+    const { token } = useToken();
+    return (
+      <>
+        <Templates style={{ marginBottom: token.margin }} form={props.form || formBlockCtx?.form} />
+        <Form {...props} />
+      </>
+    );
+  },
+  {
+    displayName: 'FormWithDataTemplates',
+  },
+);

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

@@ -93,7 +93,7 @@ export const useFormDataTemplates = () => {
   };
 };
 
-export const Templates = ({ style = {}, form }) => {
+export const Templates = ({ style = {}, form }: { style?: React.CSSProperties; form?: any }) => {
   const { token } = useToken();
   const { templates, display, enabled, defaultTemplate } = useFormDataTemplates();
   const { getCollectionJoinField } = useCollectionManager_deprecated();
@@ -103,7 +103,7 @@ export const Templates = ({ style = {}, form }) => {
   const api = useAPIClient();
   const { t } = useTranslation();
   useEffect(() => {
-    if (enabled && defaultTemplate) {
+    if (enabled && defaultTemplate && form) {
       form.__template = true;
       if (defaultTemplate.key === 'duplicate') {
         handleTemplateDataChange(defaultTemplate.dataId, defaultTemplate);

packages/core/client/src/schema-component/antd/form-v2/index.ts

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { Form as FormV2 } from './Form';
 import { DetailsDesigner, FormDesigner, ReadPrettyFormDesigner } from './Form.Designer';
 import { FilterDesigner } from './Form.FilterDesigner';
+import { FormWithDataTemplates as FormV2 } from './FormWithDataTemplates';
 import { Templates } from './Templates';
 export * from './Form.Settings';
 

packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts

@@ -439,7 +439,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single
   await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click();
   const conditionalRightConstant = faker.lorem.words();
   await page.waitForTimeout(500);
-  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 });
+  await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 100 });
   await expect(conditionNode.conditionExpressionEditBox).toHaveText(
     `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`,
   );