feat(plugin-workflow): add mode column to show if sync or not (#4767)

* feat(plugin-workflow): add mode column to show if sync or not

* fix(plugin-workflow): fix trigger tag

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

@@ -10,7 +10,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
-import { App, Breadcrumb, Button, Dropdown, Result, Spin, Switch, Tooltip, message } from 'antd';
+import { App, Breadcrumb, Button, Dropdown, Result, Spin, Switch, Tag, Tooltip, message } from 'antd';
 import { DownOutlined, EllipsisOutlined, RightOutlined } from '@ant-design/icons';
 import {
   ActionContextProvider,
@@ -177,6 +177,11 @@ export function WorkflowCanvas() {
           />
         </header>
         <aside>
+          {workflow.sync ? (
+            <Tag color="orange">{lang('Synchronously')}</Tag>
+          ) : (
+            <Tag color="cyan">{lang('Asynchronously')}</Tag>
+          )}
           <Dropdown
             className="workflow-versions"
             trigger={['click']}
@@ -220,6 +225,14 @@ export function WorkflowCanvas() {
           <Dropdown
             menu={{
               items: [
+                {
+                  key: 'key',
+                  label: `Key: ${workflow.key}`,
+                  disabled: true,
+                },
+                {
+                  type: 'divider',
+                },
                 {
                   role: 'button',
                   'aria-label': 'history',
@@ -234,7 +247,10 @@ export function WorkflowCanvas() {
                   label: lang('Copy to new version'),
                   disabled: !revisionable,
                 },
-                { role: 'button', 'aria-label': 'delete', key: 'delete', label: t('Delete') },
+                {
+                  type: 'divider',
+                },
+                { role: 'button', 'aria-label': 'delete', danger: true, key: 'delete', label: t('Delete') },
               ] as any[],
               onClick: onMenuCommand,
             }}

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

@@ -49,6 +49,30 @@ const collection = {
         required: true,
       } as ISchema,
     },
+    {
+      type: 'boolean',
+      name: 'sync',
+      interface: 'select',
+      uiSchema: {
+        title: `{{t("Mode", { ns: "${NAMESPACE}" })}}`,
+        type: 'boolean',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: [
+          {
+            label: `{{ t("Asynchronously", { ns: "${NAMESPACE}" }) }}`,
+            value: false,
+            color: 'cyan',
+          },
+          {
+            label: `{{ t("Synchronously", { ns: "${NAMESPACE}" }) }}`,
+            value: true,
+            color: 'orange',
+          },
+        ],
+        required: true,
+      } as ISchema,
+    },
     {
       type: 'string',
       name: 'description',
@@ -331,6 +355,18 @@ export const workflowSchema: ISchema = {
                 },
               },
             },
+            sync: {
+              type: 'void',
+              'x-decorator': 'Table.Column.Decorator',
+              'x-component': 'Table.Column',
+              properties: {
+                sync: {
+                  type: 'boolean',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
             enabled: {
               type: 'void',
               'x-decorator': 'Table.Column.Decorator',

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

@@ -8,15 +8,14 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Alert, Button, Input, Tag, Tooltip, message } from 'antd';
+import { Button, Input, Tag, Tooltip, message } from 'antd';
 import { cloneDeep } from 'lodash';
-import { InfoOutlined } from '@ant-design/icons';
+import { InfoOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { createForm } from '@formily/core';
 import { ISchema, useForm } from '@formily/react';
 
 import {
   ActionContextProvider,
-  FieldNames,
   FormProvider,
   SchemaComponent,
   SchemaInitializerItemType,
@@ -256,7 +255,7 @@ export const TriggerConfig = () => {
     >
       <div className={cx(styles.nodeMetaClass, 'workflow-node-meta')}>
         <Tag color="gold">
-          <span className="trigger">{titleText}</span>
+          <ThunderboltOutlined />
           <span className="type">{compile(trigger.title)}</span>
         </Tag>
       </div>