refactor(plugin-workflow): optimize hint on binding workflow (#3480)

* refactor(plugin-workflow): optimize hint on binding workflow

* fix(plugin-workflow-form-trigger): fix action triggerable check for form trigger

packages/core/client/src/schema-component/antd/action/Action.Designer.tsx

@@ -2,7 +2,7 @@ import { ArrayTable } from '@formily/antd-v5';
 import { Field, onFieldValueChange } from '@formily/core';
 import { ISchema, connect, mapProps, useField, useFieldSchema, useForm, useFormEffects } from '@formily/react';
 import { isValid, uid } from '@formily/shared';
-import { Alert, Tree as AntdTree, ModalProps } from 'antd';
+import { Alert, Tree as AntdTree, Flex, ModalProps, Space, Tag } from 'antd';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RemoteSelect, useCompile, useDesignable } from '../..';
@@ -29,6 +29,7 @@ import { DefaultValueProvider } from '../../../schema-settings/hooks/useIsAllowT
 import { useLinkageAction } from './hooks';
 import { requestSettingsSchema } from './utils';
 import { useFormBlockContext } from '../../../block-provider';
+import { useRequest } from '../../../api-client';
 
 const Tree = connect(
   AntdTree,
@@ -448,13 +449,14 @@ function RemoveButton(
   );
 }
 
-function WorkflowSelect({ actionType, ...props }) {
+function WorkflowSelect({ actionType, direct = false, ...props }) {
   const { t } = useTranslation();
   const index = ArrayTable.useIndex();
   const { setValuesIn } = useForm();
   const baseCollection = useCollection();
   const { getCollection } = useCollectionManager();
   const [workflowCollection, setWorkflowCollection] = useState(baseCollection.name);
+  const compile = useCompile();
 
   const workflowPlugin = usePlugin('workflow') as any;
   const workflowTypes = useMemo(
@@ -493,11 +495,11 @@ function WorkflowSelect({ actionType, ...props }) {
         return true;
       }
       if (typeof trigger.isActionTriggerable === 'function') {
-        return trigger.isActionTriggerable(config, { action: actionType });
+        return trigger.isActionTriggerable(config, { action: actionType, direct });
       }
       return false;
     },
-    [workflowPlugin, actionType],
+    [workflowPlugin.triggers, actionType, direct],
   );
 
   return (
@@ -520,6 +522,17 @@ function WorkflowSelect({ actionType, ...props }) {
         },
       }}
       optionFilter={optionFilter}
+      optionRender={({ label, data }) => {
+        const typeOption = workflowPlugin.getTriggersOptions().find((item) => item.value === data.type);
+        return typeOption ? (
+          <Flex justify="space-between">
+            <span>{label}</span>
+            <Tag color={typeOption.color}>{compile(typeOption.label)}</Tag>
+          </Flex>
+        ) : (
+          label
+        );
+      }}
       {...props}
     />
   );
@@ -538,7 +551,7 @@ function WorkflowConfig() {
     submit: t('Workflow will be triggered before or after submitting succeeded based on workflow type.', {
       ns: 'workflow',
     }),
-    'customize:save': t('Workflow will be triggered before or after saving succeeded based on workflow type.', {
+    'customize:save': t('Workflow will be triggered before or after submitting succeeded based on workflow type.', {
       ns: 'workflow',
     }),
     'customize:triggerWorkflows': t(
@@ -625,6 +638,7 @@ function WorkflowConfig() {
                         'x-component-props': {
                           placeholder: t('Select workflow', { ns: 'workflow' }),
                           actionType,
+                          direct: fieldSchema['x-action'] === 'customize:triggerWorkflows',
                         },
                         required: true,
                       },

packages/plugins/@nocobase/plugin-workflow-form-trigger/src/client/FormTrigger.tsx

@@ -59,7 +59,9 @@ export default class extends Trigger {
   scope = {
     useCollectionDataSource,
   };
-  isActionTriggerable = true;
+  isActionTriggerable = (config, context) => {
+    return ['create', 'update'].includes(context.action);
+  };
   useVariables(config, options) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const compile = useCompile();

packages/plugins/@nocobase/plugin-workflow/src/locale/zh-CN.json

@@ -36,9 +36,9 @@
     "适用于需要即时反馈的用户操作。不能在此模式下使用异步节点，并且不建议在同步模式下执行耗时的操作。",
 
   "Bind workflows": "绑定工作流",
-  "Workflow will be triggered after submitting succeeded.": "提交成功后触发工作流。",
-  "Workflow will be triggered after saving succeeded.": "保存成功后触发工作流。",
+  "Workflow will be triggered before or after submitting succeeded based on workflow type.": "工作流会基于其类型在提交成功之前或之后触发。",
   "Workflow will be triggered directly once the button clicked, without data saving.": "按钮点击后直接触发工作流，但不会保存数据。",
+  "Workflow will be triggered before deleting succeeded.": "删除成功之前触发工作流。",
   "Submit to workflow": "提交至工作流",
   "Add workflow": "添加工作流",
   "Select workflow": "选择工作流",