Fix(plugin-workflow) (#353)

* fix(plugin-workflow): fix component reaction

* test(plugin-workflow): try to fix ci random failing

packages/core/client/src/workflow/WorkflowCanvas.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Dropdown, Menu, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { cx } from '@emotion/css';
-import { addButtonClass, branchBlockClass, branchClass, nodeBlockClass, nodeCardClass, nodeHeaderClass, nodeTitleClass } from './style';
+import { useTranslation } from 'react-i18next';
 
 import {
   useCollection,
@@ -10,8 +10,7 @@ import {
   useResourceActionContext
 } from '..';
 import { Instruction, instructions, Node } from './nodes';
-import { t } from 'i18next';
-import { useTranslation } from 'react-i18next';
+import { addButtonClass, branchBlockClass, branchClass, nodeBlockClass, nodeCardClass, nodeHeaderClass, nodeTitleClass } from './style';
 
 
 

packages/core/client/src/workflow/schemas/collection.ts

@@ -1,6 +1,5 @@
 import { css } from "@emotion/css";
 import { useForm } from "@formily/react";
-import { useCollectionManager } from "../../collection-manager";
 import { useCollectionFilterOptions } from "../../collection-manager/action-hooks";
 
 export const collection = {

packages/core/client/src/workflow/triggers/collection.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Select } from 'antd';
-import { action } from '@formily/reactive';
-import { useForm } from '@formily/react';
+import { observer, useForm } from '@formily/react';
 
 import { useCollectionDataSource, useCollectionManager } from '../../collection-manager';
 import { useCompile } from '../../schema-component';
@@ -11,26 +10,27 @@ import { BaseTypeSet } from '../calculators';
 import { collection, filter } from '../schemas/collection';
 import { useTranslation } from 'react-i18next';
 
-function useCollectionFieldsDataSource() {
+const FieldsSelect = observer((props) => {
   const compile = useCompile();
   const { getCollectionFields } = useCollectionManager();
   const { values } = useForm();
   const fields = getCollectionFields(values?.config?.collection);
 
-  return (field: any) => {
-    action.bound((data: any) => {
-      field.dataSource = data
+  return (
+    <Select
+      {...props}
+    >
+      {fields
         .filter(field => (
           !field.hidden
           && (field.uiSchema ? !field.uiSchema['x-read-pretty'] : true)
         ))
-        .map(field => ({
-          label: compile(field.uiSchema?.title),
-          value: field.name
-        }));
-    })(fields);
-  };
-}
+        .map(field => (
+          <Select.Option value={field.name}>{compile(field.uiSchema?.title)}</Select.Option>
+        ))}
+    </Select>
+  );
+});
 
 export default {
   title: '{{t("Collection event")}}',
@@ -59,13 +59,10 @@ export default {
       title: '{{t("Changed fields")}}',
       description: '{{t("Triggered only if one of the selected fields changes. If unselected, it means that it will be triggered when any field changes. When record is added or deleted, any field is considered to have been changed.")}}',
       'x-decorator': 'FormItem',
-      'x-component': 'Select',
+      'x-component': 'FieldsSelect',
       'x-component-props': {
         mode: 'multiple',
-      },
-      'x-reactions': [
-        '{{useCollectionFieldsDataSource()}}'
-      ]
+      }
     },
     'config.condition': {
       ...filter,
@@ -74,8 +71,10 @@ export default {
     }
   },
   scope: {
-    useCollectionDataSource,
-    useCollectionFieldsDataSource
+    useCollectionDataSource
+  },
+  components: {
+    FieldsSelect
   },
   getter({ type, options, onChange }) {
     const { t } = useTranslation();

packages/core/client/src/workflow/triggers/index.tsx

@@ -54,7 +54,7 @@ export const TriggerConfig = () => {
     return null;
   }
   const { type, config } = data.data;
-  const { title, fieldset, scope } = triggers.get(type);
+  const { title, fieldset, scope, components } = triggers.get(type);
   return (
     <div className={cx(nodeCardClass)}>
       <div className={cx(nodeMetaClass)}>
@@ -110,6 +110,7 @@ export const TriggerConfig = () => {
           }
         }}
         scope={scope}
+        components={components}
       />
     </div>
   );

packages/plugins/workflow/src/__tests__/instructions/condition.test.ts

@@ -148,32 +148,34 @@ describe('workflow > instructions > condition', () => {
     });
 
     it('and false', async () => {
-      const n1 = workflow.createNode({
-        type: 'condition',
-        config: {
-          calculation: {
-            group: {
-              type: 'and',
-              calculations: [
-                {
-                  calculator: 'equal',
-                  operands: [{ value: 1 }, { value: 1 }]
-                },
-                {
-                  calculator: 'equal',
-                  operands: [{ value: 0 }, { value: 1 }]
-                }
-              ]
+      await db.sequelize.transaction(async transaction => {
+        const n1 = workflow.createNode({
+          type: 'condition',
+          config: {
+            calculation: {
+              group: {
+                type: 'and',
+                calculations: [
+                  {
+                    calculator: 'equal',
+                    operands: [{ value: 1 }, { value: 1 }]
+                  },
+                  {
+                    calculator: 'equal',
+                    operands: [{ value: 0 }, { value: 1 }]
+                  }
+                ]
+              }
             }
           }
-        }
+        }, { transaction });
+
+        const post = await PostModel.create({ title: 't1' }, { transaction });
+
+        const [execution] = await workflow.getExecutions({ transaction });
+        const [job] = await execution.getJobs({ transaction });
+        expect(job.result).toBe(false);
       });
-
-      const post = await PostModel.create({ title: 't1' });
-
-      const [execution] = await workflow.getExecutions();
-      const [job] = await execution.getJobs();
-      expect(job.result).toBe(false);
     });
 
     it('or true', async () => {
@@ -235,37 +237,39 @@ describe('workflow > instructions > condition', () => {
     });
 
     it('nested', async () => {
-      const n1 = workflow.createNode({
-        type: 'condition',
-        config: {
-          calculation: {
-            group: {
-              type: 'and',
-              calculations: [
-                {
-                  calculator: 'equal',
-                  operands: [{ value: 1 }, { value: 1 }]
-                },
-                {
-                  group: {
-                    type: 'or',
-                    calculations: [
-                      { calculator: 'equal', operands: [{ value: 0 }, { value: 1 }] },
-                      { calculator: 'equal', operands: [{ value: 0 }, { value: 1 }] }
-                    ]
+      await db.sequelize.transaction(async transaction => {
+        const n1 = workflow.createNode({
+          type: 'condition',
+          config: {
+            calculation: {
+              group: {
+                type: 'and',
+                calculations: [
+                  {
+                    calculator: 'equal',
+                    operands: [{ value: 1 }, { value: 1 }]
+                  },
+                  {
+                    group: {
+                      type: 'or',
+                      calculations: [
+                        { calculator: 'equal', operands: [{ value: 0 }, { value: 1 }] },
+                        { calculator: 'equal', operands: [{ value: 0 }, { value: 1 }] }
+                      ]
+                    }
                   }
-                }
-              ]
+                ]
+              }
             }
           }
-        }
+        }, { transaction });
+
+        const post = await PostModel.create({ title: 't1' }, { transaction });
+
+        const [execution] = await workflow.getExecutions({ transaction });
+        const [job] = await execution.getJobs({ transaction });
+        expect(job.result).toBe(false);
       });
-
-      const post = await PostModel.create({ title: 't1' });
-
-      const [execution] = await workflow.getExecutions();
-      const [job] = await execution.getJobs();
-      expect(job.result).toBe(false);
     });
   });
 });