fix(plugin-workflow): fix variables and form changed (#2955)

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

@@ -106,7 +106,7 @@ const WithForm = (props: WithFormProps) => {
     return () => {
       form.removeEffects(id);
     };
-  }, [props.disabled]);
+  }, [form, props.disabled, setFormValueChanged]);
 
   useEffect(() => {
     const id = uid();

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/calculation.tsx

@@ -1,5 +1,5 @@
 import { FormItem, FormLayout } from '@formily/antd-v5';
-import { SchemaInitializerItemOptions, Variable, css, defaultFieldNames, useCollectionManager } from '@nocobase/client';
+import { SchemaInitializerItemOptions, Variable, defaultFieldNames, useCollectionManager } from '@nocobase/client';
 import { Evaluator, evaluators, getOptions } from '@nocobase/evaluators/client';
 import { Radio } from 'antd';
 import React from 'react';
@@ -8,7 +8,7 @@ import { RadioWithTooltip } from '../components/RadioWithTooltip';
 import { ValueBlock } from '../components/ValueBlock';
 import { renderEngineReference } from '../components/renderEngineReference';
 import { NAMESPACE, lang } from '../locale';
-import { BaseTypeSets, useWorkflowVariableOptions } from '../variable';
+import { BaseTypeSets, WorkflowVariableInput, WorkflowVariableTextArea, useWorkflowVariableOptions } from '../variable';
 
 function useDynamicExpressionCollectionFieldMatcher(field): boolean {
   if (!['belongsTo', 'hasOne'].includes(field.type)) {
@@ -93,13 +93,10 @@ export default {
       type: 'string',
       title: `{{t("Calculation expression", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
-      'x-component': 'CalculationExpression',
-      // NOTE: can not use Variable.Input and scope directly as below,
-      //       because the scope will be cached.
-      // 'x-component': 'Variable.Input',
-      // 'x-component-props': {
-      //   scope: '{{useWorkflowVariableOptions()}}',
-      // },
+      'x-component': 'WorkflowVariableTextArea',
+      'x-component-props': {
+        changeOnSelect: true,
+      },
       ['x-validator'](value, rules, { form }) {
         const { values } = form;
         const { evaluate } = evaluators.get(values.engine) as Evaluator;
@@ -135,9 +132,12 @@ export default {
       type: 'string',
       title: `{{t("Variable datasource", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
-      'x-component': 'ScopeSelect',
+      'x-component': 'WorkflowVariableInput',
       'x-component-props': {
         changeOnSelect: true,
+        variableOptions: {
+          types: [{ type: 'reference', options: { collection: '*', entity: true } }],
+        },
       },
       'x-reactions': {
         dependencies: ['dynamic'],
@@ -154,17 +154,8 @@ export default {
     renderEngineReference,
   },
   components: {
-    CalculationExpression(props) {
-      const scope = useWorkflowVariableOptions();
-
-      return <Variable.TextArea scope={scope} changeOnSelect {...props} />;
-    },
-    ScopeSelect(props) {
-      const scope = useWorkflowVariableOptions({
-        types: [{ type: 'reference', options: { collection: '*', entity: true } }],
-      });
-      return <Variable.Input scope={scope} {...props} />;
-    },
+    WorkflowVariableInput,
+    WorkflowVariableTextArea,
     RadioWithTooltip,
     DynamicConfig,
     ValueBlock,

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx

@@ -1,5 +1,11 @@
-import { CloseOutlined, DeleteOutlined } from '@ant-design/icons';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+import { cloneDeep } from 'lodash';
+import { createForm } from '@formily/core';
 import { ISchema, useForm } from '@formily/react';
+import { App, Button, Dropdown, Input, Tag, Tooltip, message } from 'antd';
+import { useTranslation } from 'react-i18next';
+
 import {
   ActionContextProvider,
   SchemaComponent,
@@ -9,13 +15,10 @@ import {
   useAPIClient,
   useActionContext,
   useCompile,
-  useRequest,
   useResourceActionContext,
 } from '@nocobase/client';
 import { Registry, parse, str2moment } from '@nocobase/utils/client';
-import { App, Button, Dropdown, Input, Tag, Tooltip, message } from 'antd';
-import React, { useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+
 import { AddButton } from '../AddButton';
 import { useFlowContext } from '../FlowContext';
 import { DrawerDescription } from '../components/DrawerDescription';
@@ -25,6 +28,7 @@ import { useGetAriaLabelOfAddButton } from '../hooks/useGetAriaLabelOfAddButton'
 import { lang } from '../locale';
 import useStyles from '../style';
 import { VariableOption, VariableOptions } from '../variable';
+
 import aggregate from './aggregate';
 import calculation from './calculation';
 import condition from './condition';
@@ -96,6 +100,7 @@ function useUpdateAction() {
           config: form.values,
         },
       });
+      ctx.setFormValueChanged(false);
       ctx.setVisible(false);
       refresh();
     },
@@ -281,8 +286,29 @@ export function NodeDefaultView(props) {
 
   const [editingTitle, setEditingTitle] = useState<string>(data.title ?? typeTitle);
   const [editingConfig, setEditingConfig] = useState(false);
+  const [formValueChanged, setFormValueChanged] = useState(false);
 
-  async function onChangeTitle(next) {
+  const form = useMemo(() => {
+    const values = cloneDeep(data.config);
+    return createForm({
+      initialValues: values,
+      values,
+      disabled: workflow.executed,
+    });
+  }, [data, workflow]);
+
+  const resetForm = useCallback(
+    (changed) => {
+      setFormValueChanged(changed);
+      if (!changed) {
+        form.reset();
+      }
+    },
+    [form],
+  );
+
+  const onChangeTitle = useCallback(
+    async function (next) {
       const title = next || typeTitle;
       setEditingTitle(title);
       if (title === data.title) {
@@ -295,9 +321,11 @@ export function NodeDefaultView(props) {
         },
       });
       refresh();
-  }
+    },
+    [data],
+  );
 
-  function onOpenDrawer(ev) {
+  const onOpenDrawer = useCallback(function (ev) {
     if (ev.target === ev.currentTarget) {
       setEditingConfig(true);
       return;
@@ -310,7 +338,7 @@ export function NodeDefaultView(props) {
         return;
       }
     }
-  }
+  }, []);
 
   return (
     <div className={cx(styles.nodeClass, `workflow-node-type-${data.type}`)}>
@@ -324,7 +352,6 @@ export function NodeDefaultView(props) {
           <Tag>{typeTitle}</Tag>
           <span className="workflow-node-id">{data.id}</span>
         </div>
-        <div>
         <Input.TextArea
           role="button"
           aria-label="textarea"
@@ -334,10 +361,16 @@ export function NodeDefaultView(props) {
           onBlur={(ev) => onChangeTitle(ev.target.value)}
           autoSize
         />
-        </div>
         <RemoveButton />
         <JobButton />
-        <ActionContextProvider value={{ visible: editingConfig, setVisible: setEditingConfig }}>
+        <ActionContextProvider
+          value={{
+            visible: editingConfig,
+            setVisible: setEditingConfig,
+            formValueChanged,
+            setFormValueChanged: resetForm,
+          }}
+        >
           <SchemaComponent
             scope={instruction.scope}
             components={instruction.components}
@@ -383,17 +416,11 @@ export function NodeDefaultView(props) {
                       </Tooltip>
                     </div>
                   ),
-                  'x-component': 'Action.Drawer',
-                  'x-decorator': 'Form',
+                  'x-decorator': 'FormV2',
                   'x-decorator-props': {
-                    disabled: workflow.executed,
-                    useValues(options) {
-                      const { config } = useNodeContext();
-                      return useRequest(() => {
-                        return Promise.resolve({ data: config });
-                      }, options);
-                    },
+                    form,
                   },
+                  'x-component': 'Action.Drawer',
                   properties: {
                     ...(instruction.description
                       ? {

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/loop.tsx

@@ -1,18 +1,14 @@
-import { ArrowUpOutlined } from '@ant-design/icons';
-import { css, cx, useCompile } from '@nocobase/client';
 import React from 'react';
+import { ArrowUpOutlined } from '@ant-design/icons';
+
+import { css, cx, useCompile } from '@nocobase/client';
+
 import { NodeDefaultView } from '.';
 import { Branch } from '../Branch';
 import { useFlowContext } from '../FlowContext';
 import { NAMESPACE, lang } from '../locale';
 import useStyles from '../style';
-import {
-  VariableOption,
-  defaultFieldNames,
-  nodesOptions,
-  triggerOptions,
-  useWorkflowVariableOptions,
-} from '../variable';
+import { VariableOption, WorkflowVariableInput, defaultFieldNames, nodesOptions, triggerOptions } from '../variable';
 
 function findOption(options: VariableOption[], paths: string[]) {
   let opts = options;
@@ -45,9 +41,8 @@ export default {
       title: `{{t("Loop target", { ns: "${NAMESPACE}" })}}`,
       description: `{{t("A single number will be treated as a loop count, a single string will be treated as an array of characters, and other non-array values will be converted to arrays. The loop node ends when the loop count is reached, or when the array loop is completed. You can also add condition nodes to the loop to terminate it.", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
-      'x-component': 'Variable.Input',
+      'x-component': 'WorkflowVariableInput',
       'x-component-props': {
-        scope: '{{useWorkflowVariableOptions()}}',
         changeOnSelect: true,
         useTypedConstant: ['string', 'number', 'null'],
         className: css`
@@ -95,10 +90,10 @@ export default {
       </NodeDefaultView>
     );
   },
-  scope: {
-    useWorkflowVariableOptions,
+  scope: {},
+  components: {
+    WorkflowVariableInput,
   },
-  components: {},
   useScopeVariables(node, options) {
     const compile = useCompile();
     const { target } = node.config;

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/query.tsx

@@ -12,7 +12,7 @@ import { appends, collection, filter, pagination, sort } from '../schemas/collec
 import { NAMESPACE } from '../locale';
 import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
 import { FilterDynamicComponent } from '../components/FilterDynamicComponent';
-import { getCollectionFieldOptions, useWorkflowVariableOptions } from '../variable';
+import { WorkflowVariableInput, getCollectionFieldOptions } from '../variable';
 import { useForm } from '@formily/react';
 
 export default {
@@ -59,7 +59,6 @@ export default {
   view: {},
   scope: {
     useCollectionDataSource,
-    useWorkflowVariableOptions,
     useSortableFields() {
       const compile = useCompile();
       const { getCollectionFields, getInterface } = useCollectionManager();
@@ -88,6 +87,7 @@ export default {
     ArrayItems,
     FilterDynamicComponent,
     SchemaComponentContext,
+    WorkflowVariableInput,
   },
   useVariables({ key: name, title, config }, options) {
     const compile = useCompile();

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/request.tsx

@@ -1,9 +1,8 @@
 import { ArrayItems } from '@formily/antd-v5';
-import React from 'react';
 
-import { Variable } from '@nocobase/client';
+import { defaultFieldNames } from '@nocobase/client';
 import { NAMESPACE } from '../locale';
-import { useWorkflowVariableOptions } from '../variable';
+import { WorkflowVariableInput } from '../variable';
 
 export default {
   title: `{{t("HTTP request", { ns: "${NAMESPACE}" })}}`,
@@ -66,9 +65,8 @@ export default {
               value: {
                 type: 'string',
                 'x-decorator': 'FormItem',
-                'x-component': 'Variable.Input',
+                'x-component': 'WorkflowVariableInput',
                 'x-component-props': {
-                  scope: '{{useWorkflowVariableOptions()}}',
                   useTypedConstant: true,
                 },
               },
@@ -112,9 +110,8 @@ export default {
               value: {
                 type: 'string',
                 'x-decorator': 'FormItem',
-                'x-component': 'Variable.Input',
+                'x-component': 'WorkflowVariableInput',
                 'x-component-props': {
-                  scope: '{{useWorkflowVariableOptions()}}',
                   useTypedConstant: true,
                 },
               },
@@ -140,7 +137,7 @@ export default {
       title: `{{t("Body", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
       'x-decorator-props': {},
-      'x-component': 'RequestBody',
+      'x-component': 'WorkflowVariableJSON',
       'x-component-props': {
         changeOnSelect: true,
         autoSize: {
@@ -171,14 +168,15 @@ export default {
     },
   },
   view: {},
-  scope: {
-    useWorkflowVariableOptions,
-  },
+  scope: {},
   components: {
     ArrayItems,
-    RequestBody(props) {
-      const scope = useWorkflowVariableOptions();
-      return <Variable.JSON scope={scope} {...props} />;
+    WorkflowVariableInput,
   },
+  useVariables({ key, title }, { types, fieldNames = defaultFieldNames }) {
+    return {
+      [fieldNames.value]: key,
+      [fieldNames.label]: title,
+    };
   },
 };

packages/plugins/@nocobase/plugin-workflow/src/client/nodes/sql.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
-import { Variable, css } from '@nocobase/client';
+import { css, defaultFieldNames } from '@nocobase/client';
 
 import { NAMESPACE } from '../locale';
-import { useWorkflowVariableOptions } from '../variable';
+import { WorkflowVariableRawTextArea } from '../variable';
 
 export default {
   title: `{{t("SQL action", { ns: "${NAMESPACE}" })}}`,
@@ -17,7 +15,7 @@ export default {
       title: 'SQL',
       description: `{{t("Usage of SQL query result is not supported yet.", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
-      'x-component': 'SQLInput',
+      'x-component': 'WorkflowVariableRawTextArea',
       'x-component-props': {
         rows: 20,
         className: css`
@@ -29,9 +27,12 @@ export default {
   },
   scope: {},
   components: {
-    SQLInput(props) {
-      const scope = useWorkflowVariableOptions();
-      return <Variable.RawTextArea scope={scope} {...props} />;
+    WorkflowVariableRawTextArea,
   },
+  useVariables({ key, title }, { types, fieldNames = defaultFieldNames }) {
+    return {
+      [fieldNames.value]: key,
+      [fieldNames.label]: title,
+    };
   },
 };

packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts

@@ -135,9 +135,8 @@ export const pagination = {
               type: 'number',
               title: '{{t("Page number")}}',
               'x-decorator': 'FormItem',
-              'x-component': 'Variable.Input',
+              'x-component': 'WorkflowVariableInput',
               'x-component-props': {
-                scope: '{{useWorkflowVariableOptions()}}',
                 useTypedConstant: ['number', 'null'],
               },
               default: 1,

packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx

@@ -14,7 +14,7 @@ import {
 } from '@nocobase/client';
 import { Registry } from '@nocobase/utils/client';
 import { Button, Input, Tag, message } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFlowContext } from '../FlowContext';
 import { DrawerDescription } from '../components/DrawerDescription';
 import { NAMESPACE, lang } from '../locale';
@@ -23,6 +23,7 @@ import { VariableOptions } from '../variable';
 import collection from './collection';
 import formTrigger from './form';
 import schedule from './schedule/';
+import { cloneDeep } from 'lodash';
 
 function useUpdateConfigAction() {
   const form = useForm();
@@ -43,6 +44,7 @@ function useUpdateConfigAction() {
           config: form.values,
         },
       });
+      ctx.setFormValueChanged(false);
       ctx.setVisible(false);
       refresh();
     },
@@ -146,35 +148,44 @@ export const TriggerConfig = () => {
   const { workflow, refresh } = useFlowContext();
   const [editingTitle, setEditingTitle] = useState<string>('');
   const [editingConfig, setEditingConfig] = useState(false);
+  const [formValueChanged, setFormValueChanged] = useState(false);
   const { styles } = useStyles();
-  let typeTitle = '';
+  const compile = useCompile();
+
+  const { title, type, executed } = workflow;
+  const trigger = triggers.get(type);
+  const typeTitle = compile(trigger.title);
+  const { fieldset, scope, components } = trigger;
+  const detailText = executed ? '{{t("View")}}' : '{{t("Configure")}}';
+  const titleText = lang('Trigger');
+
   useEffect(() => {
     if (workflow) {
       setEditingTitle(workflow.title ?? typeTitle);
     }
   }, [workflow]);
 
-  const form = useMemo(
-    () =>
-      createForm({
-        initialValues: workflow?.config,
-        values: workflow?.config,
+  const form = useMemo(() => {
+    const values = cloneDeep(workflow?.config);
+    return createForm({
+      initialValues: values,
+      values,
       disabled: workflow?.executed,
-      }),
-    [workflow],
+    });
+  }, [workflow]);
+
+  const resetForm = useCallback(
+    (changed) => {
+      setFormValueChanged(changed);
+      if (!changed) {
+        form.reset();
+      }
+    },
+    [form],
   );
 
-  if (!workflow || !workflow.type) {
-    return null;
-  }
-  const { title, type, executed } = workflow;
-  const trigger = triggers.get(type);
-  const { fieldset, scope, components } = trigger;
-  typeTitle = trigger.title;
-  const detailText = executed ? '{{t("View")}}' : '{{t("Configure")}}';
-  const titleText = lang('Trigger');
-
-  async function onChangeTitle(next) {
+  const onChangeTitle = useCallback(
+    async function (next) {
       const t = next || typeTitle;
       setEditingTitle(t);
       if (t === title) {
@@ -187,9 +198,11 @@ export const TriggerConfig = () => {
         },
       });
       refresh();
-  }
+    },
+    [workflow],
+  );
 
-  function onOpenDrawer(ev) {
+  const onOpenDrawer = useCallback(function (ev) {
     if (ev.target === ev.currentTarget) {
       setEditingConfig(true);
       return;
@@ -202,7 +215,7 @@ export const TriggerConfig = () => {
         return;
       }
     }
-  }
+  }, []);
 
   return (
     <div
@@ -225,7 +238,14 @@ export const TriggerConfig = () => {
         />
       </div>
       <TriggerExecution />
-      <ActionContextProvider value={{ visible: editingConfig, setVisible: setEditingConfig }}>
+      <ActionContextProvider
+        value={{
+          visible: editingConfig,
+          setVisible: setEditingConfig,
+          formValueChanged,
+          setFormValueChanged: resetForm,
+        }}
+      >
         <SchemaComponent
           schema={{
             name: `workflow-trigger-${workflow.id}`,

packages/plugins/@nocobase/plugin-workflow/src/client/variable.tsx

@@ -1,4 +1,7 @@
-import { useCompile } from '@nocobase/client';
+import React from 'react';
+
+import { Variable, useCompile } from '@nocobase/client';
+
 import { useFlowContext } from './FlowContext';
 import { NAMESPACE, lang } from './locale';
 import { instructions, useAvailableUpstreams, useNodeContext, useUpstreamScopes } from './nodes';
@@ -211,20 +214,29 @@ function filterTypedFields({ fields, types, appends, depth = 1, compile, getColl
   });
 }
 
-export function useWorkflowVariableOptions(options: OptionsOfUseVariableOptions = {}) {
-  const fieldNames = Object.assign({}, defaultFieldNames, options.fieldNames ?? {});
-  const opts = Object.assign(options, { fieldNames });
+function useOptions(scope, opts) {
   const compile = useCompile();
-  const result = [scopeOptions, nodesOptions, triggerOptions, systemOptions].map((item: any) => {
-    const children = item.useOptions?.(opts)?.filter(Boolean);
+  const children = scope.useOptions?.(opts)?.filter(Boolean);
+  const { fieldNames } = opts;
   return {
-      [fieldNames.label]: compile(item.label),
-      [fieldNames.value]: item.value,
-      key: item[fieldNames.value],
+    [fieldNames.label]: compile(scope.label),
+    [fieldNames.value]: scope.value,
+    key: scope[fieldNames.value],
     [fieldNames.children]: children,
     disabled: !children || !children.length,
   };
-  });
+}
+
+export function useWorkflowVariableOptions(options: OptionsOfUseVariableOptions = {}) {
+  const fieldNames = Object.assign({}, defaultFieldNames, options.fieldNames ?? {});
+  const opts = Object.assign(options, { fieldNames });
+  const result = [
+    useOptions(scopeOptions, opts),
+    useOptions(nodesOptions, opts),
+    useOptions(triggerOptions, opts),
+    useOptions(systemOptions, opts),
+  ];
+  // const cache = useMemo(() => result, [result]);
 
   return result;
 }
@@ -349,3 +361,23 @@ export function getCollectionFieldOptions(options): VariableOption[] {
 
   return result;
 }
+
+export function WorkflowVariableInput({ variableOptions, ...props }): JSX.Element {
+  const scope = useWorkflowVariableOptions(variableOptions);
+  return <Variable.Input scope={scope} {...props} />;
+}
+
+export function WorkflowVariableTextArea({ variableOptions, ...props }): JSX.Element {
+  const scope = useWorkflowVariableOptions(variableOptions);
+  return <Variable.TextArea scope={scope} {...props} />;
+}
+
+export function WorkflowVariableRawTextArea({ variableOptions, ...props }): JSX.Element {
+  const scope = useWorkflowVariableOptions(variableOptions);
+  return <Variable.RawTextArea scope={scope} {...props} />;
+}
+
+export function WorkflowVariableJSON({ variableOptions, ...props }): JSX.Element {
+  const scope = useWorkflowVariableOptions(variableOptions);
+  return <Variable.JSON scope={scope} {...props} />;
+}

packages/plugins/@nocobase/plugin-workflow/src/server/triggers/schedule.ts

@@ -511,7 +511,7 @@ export default class ScheduleTrigger extends Trigger {
       const should = await this.shouldCache(workflow, now);
 
       if (should) {
-        this.plugin.app.logger.info('caching scheduled workflow will run in next minute:', workflow.id);
+        this.plugin.getLogger(workflow.id).info('caching scheduled workflow will run in next minute');
       }
 
       this.setCache(workflow, !should);