@nocobase/plugin-workflow 0.11.0-alpha.1 → 0.11.1-alpha.2

package/src/client/WorkflowCanvas.tsx

@@ -1,14 +1,14 @@
 import { DownOutlined, EllipsisOutlined, RightOutlined } from '@ant-design/icons';
 import {
   ActionContextProvider,
-  cx,
   ResourceActionProvider,
   SchemaComponent,
+  cx,
   useDocumentTitle,
   useResourceActionContext,
   useResourceContext,
 } from '@nocobase/client';
-import { Breadcrumb, Button, Dropdown, message, Modal, Switch } from 'antd';
+import { App, Breadcrumb, Button, Dropdown, Switch, message } from 'antd';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +18,7 @@ import { ExecutionLink } from './ExecutionLink';
 import { FlowContext, useFlowContext } from './FlowContext';
 import { lang } from './locale';
 import { executionSchema } from './schemas/executions';
-import { workflowVersionDropdownClass } from './style';
+import useStyles from './style';
 import { linkNodes } from './utils';
 
 function ExecutionResourceProvider({ request, filter = {}, ...others }) {
@@ -47,6 +47,9 @@ export function WorkflowCanvas() {
   const { resource } = useResourceContext();
   const { setTitle } = useDocumentTitle();
   const [visible, setVisible] = useState(false);
+  const { styles } = useStyles();
+  const { modal } = App.useApp();
+
   useEffect(() => {
     const { title } = data?.data ?? {};
     setTitle?.(`${lang('Workflow')}${title ? `: ${title}` : ''}`);
@@ -95,7 +98,7 @@ export function WorkflowCanvas() {
     const content = workflow.current
       ? lang('Delete a main version will cause all other revisions to be deleted too.')
       : '';
-    Modal.confirm({
+    modal.confirm({
       title: t('Are you sure you want to delete it?'),
       content,
       async onOk() {
@@ -141,14 +144,12 @@ export function WorkflowCanvas() {
     >
       <div className="workflow-toolbar">
         <header>
-          <Breadcrumb>
-            <Breadcrumb.Item>
-              <Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link>
-            </Breadcrumb.Item>
-            <Breadcrumb.Item>
-              <strong>{workflow.title}</strong>
-            </Breadcrumb.Item>
-          </Breadcrumb>
+          <Breadcrumb
+            items={[
+              { title: <Link to={`/admin/settings/workflow/workflows`}>{lang('Workflow')}</Link> },
+              { title: <strong>{workflow.title}</strong> },
+            ]}
+          />
         </header>
         <aside>
           <div className="workflow-versions">
@@ -157,7 +158,7 @@ export function WorkflowCanvas() {
               menu={{
                 onClick: onSwitchVersion,
                 defaultSelectedKeys: [`${workflow.id}`],
-                className: cx(workflowVersionDropdownClass),
+                className: cx(styles.workflowVersionDropdownClass),
                 items: revisions
                   .sort((a, b) => b.id - a.id)
                   .map((item, index) => ({

package/src/client/WorkflowPage.tsx

@@ -1,14 +1,15 @@
 import { cx, SchemaComponent } from '@nocobase/client';
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { workflowPageClass } from './style';
+import useStyles from './style';
 import { WorkflowCanvas } from './WorkflowCanvas';
 
 export const WorkflowPage = () => {
   const params = useParams<any>();
+  const { styles } = useStyles();
 
   return (
-    <div className={cx(workflowPageClass)}>
+    <div className={cx(styles.workflowPageClass)}>
       <SchemaComponent
         schema={{
           type: 'void',

package/src/client/WorkflowProvider.tsx

@@ -6,15 +6,15 @@ import {
 } from '@nocobase/client';
 import { Card } from 'antd';
 import React, { useContext } from 'react';
-import OpenDrawer from './components/OpenDrawer';
 import { ExecutionLink } from './ExecutionLink';
 import { ExecutionResourceProvider } from './ExecutionResourceProvider';
+import { WorkflowLink } from './WorkflowLink';
+import OpenDrawer from './components/OpenDrawer';
 import expressionField from './interfaces/expression';
 import { lang } from './locale';
 import { instructions } from './nodes';
 import { workflowSchema } from './schemas/workflows';
 import { triggers } from './triggers';
-import { WorkflowLink } from './WorkflowLink';
 
 // registerField(expressionField.group, 'expression', expressionField);
 

package/src/client/components/CollectionBlockInitializer.tsx

@@ -14,14 +14,14 @@ function InnerCollectionBlockInitializer({ insert, collection, dataSource, ...pr
   const { getTemplateSchemaByMode } = useSchemaTemplateManager();
   const { getCollection } = useCollectionManager();
   const items = useRecordCollectionDataSourceItems('FormItem') as SchemaInitializerItemOptions[];
-  const resovledCollection = getCollection(collection);
+  const resolvedCollection = getCollection(collection);
 
   async function onConfirm({ item }) {
     const template = item.template ? await getTemplateSchemaByMode(item) : null;
     const result = {
       type: 'void',
-      name: resovledCollection.name,
-      title: resovledCollection.title,
+      name: resolvedCollection.name,
+      title: resolvedCollection.title,
       'x-decorator': 'DetailsBlockProvider',
       'x-decorator-props': {
         collection,

package/src/client/components/CollectionFieldset.tsx

@@ -3,11 +3,12 @@ import { observer, useField, useForm } from '@formily/react';
 import {
   CollectionField,
   CollectionProvider,
-  css,
   SchemaComponent,
+  Variable,
+  css,
   useCollectionManager,
   useCompile,
-  Variable,
+  useToken,
 } from '@nocobase/client';
 import { Button, Dropdown, Form, Input, MenuProps } from 'antd';
 import React, { useMemo } from 'react';
@@ -42,6 +43,7 @@ export function useCollectionUIFields(collection) {
 // NOTE: observer for watching useProps
 const CollectionFieldSet = observer(
   ({ value, disabled, onChange, filter }: any) => {
+    const { token } = useToken();
     const { t } = useTranslation();
     const compile = useCompile();
     const form = useForm();
@@ -147,7 +149,7 @@ const CollectionFieldSet = observer(
             ) : null}
           </CollectionProvider>
         ) : (
-          <p>{lang('Please select collection first')}</p>
+          <p style={{ color: token.colorText }}>{lang('Please select collection first')}</p>
         )}
       </fieldset>
     );

package/src/client/components/FieldsSelect.tsx

@@ -4,9 +4,13 @@ import React from 'react';
 
 import { useCollectionManager, useCompile } from '@nocobase/client';
 
+function defaultFilter() {
+  return true;
+}
+
 export const FieldsSelect = observer(
   (props: any) => {
-    const { filter = () => true, ...others } = props;
+    const { filter = defaultFilter, ...others } = props;
     const compile = useCompile();
     const { getCollectionFields } = useCollectionManager();
     const { values } = useForm();

package/src/client/components/NodeDescription.tsx

@@ -1,41 +1,48 @@
-import { css, cx } from '@nocobase/client';
+import { createStyles, cx } from '@nocobase/client';
 import { Tag } from 'antd';
 import React from 'react';
 import { lang } from '../locale';
 
-export function NodeDescription(props) {
-  const { instruction } = props;
-  const className = css`
-    margin-bottom: 1.5em;
-    padding: 1em;
-    background: #f6f6f6;
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      margin-bottom: 1.5em;
+      padding: 1em;
+      background-color: ${token.colorFillAlter};
 
-    > *:last-child {
-      margin-bottom: 0;
-    }
+      > *:last-child {
+        margin-bottom: 0;
+      }
 
-    dl {
-      display: flex;
+      dl {
+        display: flex;
 
-      dt {
-        &:after {
-          content: ':';
-          margin-right: 0.5em;
+        dt {
+          color: ${token.colorText};
+          &:after {
+            content: ':';
+            margin-right: 0.5em;
+          }
         }
       }
-    }
 
-    p {
-      color: rgba(0, 0, 0, 0.45);
-    }
-  `;
+      p {
+        color: ${token.colorTextDescription};
+      }
+    `,
+  };
+});
+
+export function NodeDescription(props) {
+  const { instruction } = props;
+  const { styles } = useStyles();
 
   return (
-    <div className={cx(className, props.className)}>
+    <div className={cx(styles.container, props.className)}>
       <dl>
         <dt>{lang('Node type')}</dt>
         <dd>
-          <Tag>{instruction.title}</Tag>
+          <Tag style={{ background: 'none' }}>{instruction.title}</Tag>
         </dd>
       </dl>
       {instruction.description ? <p>{instruction.description}</p> : null}

package/src/client/index.tsx

@@ -6,12 +6,12 @@ export { useWorkflowVariableOptions } from './variable';
 
 import { Plugin, useCollectionDataSource } from '@nocobase/client';
 import React from 'react';
-import { DynamicExpression } from './components/DynamicExpression';
 import { ExecutionPage } from './ExecutionPage';
-import { WorkflowTodo } from './nodes/manual/WorkflowTodo';
-import { WorkflowTodoBlockInitializer } from './nodes/manual/WorkflowTodoBlockInitializer';
 import { WorkflowPage } from './WorkflowPage';
 import { WorkflowProvider } from './WorkflowProvider';
+import { DynamicExpression } from './components/DynamicExpression';
+import { WorkflowTodo } from './nodes/manual/WorkflowTodo';
+import { WorkflowTodoBlockInitializer } from './nodes/manual/WorkflowTodoBlockInitializer';
 
 export class WorkflowPlugin extends Plugin {
   async load() {

package/src/client/locale/zh-CN.ts

@@ -28,8 +28,8 @@ export default {
     '只有被选中的某个字段发生变动时才会触发。如果不选择，则表示任何字段变动时都会触发。新增或删除数据时，任意字段都被认为发生变动。',
   'Only triggers when match conditions': '满足以下条件才触发',
   'Preload associations': '预加载关联数据',
-  'Please select the associated fields that need to be accessed in subsequent nodes':
-    '请选中需要在后续节点中被访问的关系字段',
+  'Please select the associated fields that need to be accessed in subsequent nodes. With more than two levels of to-many associations may cause performance issue, please use with caution.':
+    '请选中需要在后续节点中被访问的关系字段。超过两层的对多关联可能会导致性能问题，请谨慎使用。',
   'Schedule event': '定时任务',
   'Trigger mode': '触发模式',
   'Based on certain date': '自定义时间',
@@ -90,6 +90,8 @@ export default {
   Manual: '人工处理',
   'Could be used for manually submitting data, and determine whether to continue or exit. Workflow will generate a todo item for assigned user when it reaches a manual node, and continue processing after user submits the form.':
     '可用于人工提交数据，并决定是否继续或退出流程。工作流在执行到人工节点时会为被指派的用户生成待办事项，直到用户提交对应表单后继续处理该流程。',
+  'Values preset in this form will override user submitted ones when continue or reject.':
+    '表单中预设的字段值会在用户提交继续或拒绝时覆盖相应字段的值。',
   'Extended types': '扩展类型',
   'Node type': '节点类型',
   Calculation: '运算',
@@ -239,4 +241,8 @@ export default {
   'Dynamic expression': '动态表达式',
   'An expression for calculation in each rows': '每行数据计算规则不同时使用',
   Unconfigured: '未配置',
+
+  'SQL action': 'SQL 操作',
+  'Execute a SQL statement in database': '在数据库中执行一个 SQL 语句',
+  'Usage of SQL query result is not supported yet.': 'SQL 执行的结果暂不支持使用。'
 };

package/src/client/nodes/aggregate.tsx

@@ -13,7 +13,7 @@ import {
 import { collection, filter } from '../schemas/collection';
 import { NAMESPACE, lang } from '../locale';
 import { FilterDynamicComponent } from '../components/FilterDynamicComponent';
-import { BaseTypeSets, nodesOptions, triggerOptions, useWorkflowVariableOptions } from '../variable';
+import { BaseTypeSets, defaultFieldNames, nodesOptions, triggerOptions, useWorkflowVariableOptions } from '../variable';
 import { FieldsSelect } from '../components/FieldsSelect';
 import { ValueBlock } from '../components/ValueBlock';
 import { useNodeContext } from '.';
@@ -299,7 +299,7 @@ export default {
     ValueBlock,
     AssociatedConfig,
   },
-  useVariables({ id, title }, { types }) {
+  useVariables({ id, title }, { types, fieldNames = defaultFieldNames }) {
     if (
       types &&
       !types.some((type) => type in BaseTypeSets || Object.values(BaseTypeSets).some((set) => set.has(type)))
@@ -307,8 +307,8 @@ export default {
       return null;
     }
     return {
-      value: `${id}`,
-      label: title,
+      [fieldNames.value]: `${id}`,
+      [fieldNames.label]: title,
     };
   },
   useInitializers(node): SchemaInitializerItemOptions | null {

package/src/client/nodes/calculation.tsx

@@ -1,5 +1,5 @@
 import { FormItem, FormLayout } from '@formily/antd-v5';
-import { SchemaInitializerItemOptions, Variable, css, useCollectionManager } from '@nocobase/client';
+import { SchemaInitializerItemOptions, Variable, css, defaultFieldNames, useCollectionManager } from '@nocobase/client';
 import { Evaluator, evaluators, getOptions } from '@nocobase/evaluators/client';
 import { parse } from '@nocobase/utils/client';
 import { Radio } from 'antd';
@@ -192,8 +192,7 @@ export default {
     RadioWithTooltip,
     DynamicConfig,
   },
-  useVariables({ id, title }, options) {
-    const { types } = options ?? {};
+  useVariables({ id, title }, { types, fieldNames = defaultFieldNames }) {
     if (
       types &&
       !types.some((type) => type in BaseTypeSets || Object.values(BaseTypeSets).some((set) => set.has(type)))
@@ -201,8 +200,8 @@ export default {
       return null;
     }
     return {
-      value: id,
-      label: title,
+      [fieldNames.value]: `${id}`,
+      [fieldNames.label]: title,
     };
   },
   useInitializers(node): SchemaInitializerItemOptions {

package/src/client/nodes/condition.tsx

@@ -5,14 +5,13 @@ import { Registry } from '@nocobase/utils/client';
 import { Button, Select } from 'antd';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { cloneDeep } from 'lodash';
 import { NodeDefaultView } from '.';
 import { Branch } from '../Branch';
 import { RadioWithTooltip, RadioWithTooltipOption } from '../components/RadioWithTooltip';
 import { renderEngineReference } from '../components/renderEngineReference';
 import { useFlowContext } from '../FlowContext';
 import { lang, NAMESPACE } from '../locale';
-import { branchBlockClass, nodeSubtreeClass } from '../style';
+import useStyles from '../style';
 import { useWorkflowVariableOptions } from '../variable';
 
 interface Calculator {
@@ -413,6 +412,7 @@ export default {
   component: function Component({ data }) {
     const { t } = useTranslation();
     const { nodes } = useFlowContext();
+    const { styles } = useStyles();
     const {
       id,
       config: { rejectOnFalse },
@@ -422,10 +422,10 @@ export default {
     return (
       <NodeDefaultView data={data}>
         {rejectOnFalse ? null : (
-          <div className={cx(nodeSubtreeClass)}>
+          <div className={cx(styles.nodeSubtreeClass)}>
             <div
               className={cx(
-                branchBlockClass,
+                styles.branchBlockClass,
                 css`
                   > * > .workflow-branch-lines {
                     > button {
@@ -438,36 +438,9 @@ export default {
               <Branch from={data} entry={falseEntry} branchIndex={0} />
               <Branch from={data} entry={trueEntry} branchIndex={1} />
             </div>
-            <div
-              className={css`
-                position: relative;
-                height: 2em;
-                overflow: visible;
-
-                > span {
-                  position: absolute;
-                  top: calc(1.5em - 1px);
-                  line-height: 1em;
-                  color: #999;
-                  background-color: var(--nb-box-bg);
-                  padding: 1px;
-                }
-              `}
-            >
-              <span
-                className={css`
-                  right: 4em;
-                `}
-              >
-                {t('No')}
-              </span>
-              <span
-                className={css`
-                  left: 4em;
-                `}
-              >
-                {t('Yes')}
-              </span>
+            <div className={styles.conditionClass}>
+              <span style={{ right: '4em' }}>{t('No')}</span>
+              <span style={{ left: '4em' }}>{t('Yes')}</span>
             </div>
           </div>
         )}

package/src/client/nodes/create.tsx

@@ -38,7 +38,6 @@ export default {
   },
   components: {
     CollectionFieldset,
-    FieldsSelect,
   },
   useVariables({ id, title, config }, options) {
     const compile = useCompile();

package/src/client/nodes/index.tsx

@@ -13,7 +13,7 @@ import {
   useResourceActionContext,
 } from '@nocobase/client';
 import { Registry, parse, str2moment } from '@nocobase/utils/client';
-import { Alert, Button, Dropdown, Input, Modal, Tag, message } from 'antd';
+import { Alert, App, Button, Dropdown, Input, Tag, message } from 'antd';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AddButton } from '../AddButton';
@@ -21,7 +21,7 @@ import { useFlowContext } from '../FlowContext';
 import { NodeDescription } from '../components/NodeDescription';
 import { JobStatusOptionsMap } from '../constants';
 import { NAMESPACE, lang } from '../locale';
-import { nodeBlockClass, nodeCardClass, nodeClass, nodeJobButtonClass, nodeMetaClass } from '../style';
+import useStyles from '../style';
 import { VariableOption, VariableOptions } from '../variable';
 import aggregate from './aggregate';
 import calculation from './calculation';
@@ -35,6 +35,7 @@ import parallel from './parallel';
 import query from './query';
 import request from './request';
 import update from './update';
+import sql from './sql';
 
 export interface Instruction {
   title: string;
@@ -71,6 +72,7 @@ instructions.register('destroy', destroy);
 instructions.register('aggregate', aggregate);
 
 instructions.register('request', request);
+instructions.register('sql', sql);
 
 function useUpdateAction() {
   const form = useForm();
@@ -132,11 +134,12 @@ export function useUpstreamScopes(node) {
 }
 
 export function Node({ data }) {
+  const { styles } = useStyles();
   const { component: Component = NodeDefaultView, endding } = instructions.get(data.type);
 
   return (
     <NodeContext.Provider value={data}>
-      <div className={cx(nodeBlockClass)}>
+      <div className={cx(styles.nodeBlockClass)}>
         <Component data={data} />
         {!endding ? (
           <AddButton upstream={data} />
@@ -172,6 +175,8 @@ export function RemoveButton() {
   const api = useAPIClient();
   const { workflow, nodes, refresh } = useFlowContext() ?? {};
   const current = useNodeContext();
+  const { modal } = App.useApp();
+
   if (!workflow) {
     return null;
   }
@@ -198,7 +203,7 @@ export function RemoveButton() {
     });
 
     if (usingNodes.length) {
-      Modal.error({
+      modal.error({
         title: lang('Can not delete'),
         content: lang(
           'The result of this node has been referenced by other nodes ({{nodes}}), please remove the usage before deleting.',
@@ -213,7 +218,7 @@ export function RemoveButton() {
       ? t('Are you sure you want to delete it?')
       : lang('This node contains branches, deleting will also be preformed to them, are you sure?');
 
-    Modal.confirm({
+    modal.confirm({
       title: t('Delete'),
       content: message,
       onOk,
@@ -232,10 +237,11 @@ export function RemoveButton() {
 }
 
 function InnerJobButton({ job, ...props }) {
+  const { styles } = useStyles();
   const { icon, color } = JobStatusOptionsMap[job.status];
 
   return (
-    <Button {...props} shape="circle" className={cx(nodeJobButtonClass, props.className)}>
+    <Button {...props} shape="circle" size="small" className={cx(styles.nodeJobButtonClass, props.className)}>
       <Tag color={color}>{icon}</Tag>
     </Button>
   );
@@ -244,6 +250,8 @@ function InnerJobButton({ job, ...props }) {
 export function JobButton() {
   const { execution, setViewJob } = useFlowContext();
   const { jobs } = useNodeContext() ?? {};
+  const { styles } = useStyles();
+
   if (!execution) {
     return null;
   }
@@ -252,7 +260,7 @@ export function JobButton() {
     return (
       <span
         className={cx(
-          nodeJobButtonClass,
+          styles.nodeJobButtonClass,
           css`
             border: 2px solid #d9d9d9;
             border-radius: 50%;
@@ -279,6 +287,7 @@ export function JobButton() {
               <div
                 className={css`
                   display: flex;
+                  align-items: center;
                   gap: 0.5em;
 
                   time {
@@ -287,7 +296,7 @@ export function JobButton() {
                   }
                 `}
               >
-                <span className={cx(nodeJobButtonClass, 'inner')}>
+                <span className={cx(styles.nodeJobButtonClass, 'inner')}>
                   <Tag color={color}>{icon}</Tag>
                 </span>
                 <time>{str2moment(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')}</time>
@@ -310,6 +319,7 @@ export function NodeDefaultView(props) {
   const compile = useCompile();
   const api = useAPIClient();
   const { workflow, refresh } = useFlowContext() ?? {};
+  const { styles } = useStyles();
 
   const instruction = instructions.get(data.type);
   const detailText = workflow.executed ? '{{t("View")}}' : '{{t("Configure")}}';
@@ -349,9 +359,9 @@ export function NodeDefaultView(props) {
   }
 
   return (
-    <div className={cx(nodeClass, `workflow-node-type-${data.type}`)}>
-      <div className={cx(nodeCardClass, { configuring: editingConfig })} onClick={onOpenDrawer}>
-        <div className={cx(nodeMetaClass, 'workflow-node-meta')}>
+    <div className={cx(styles.nodeClass, `workflow-node-type-${data.type}`)}>
+      <div className={cx(styles.nodeCardClass, { configuring: editingConfig })} onClick={onOpenDrawer}>
+        <div className={cx(styles.nodeMetaClass, 'workflow-node-meta')}>
           <Tag>{typeTitle}</Tag>
           <span className="workflow-node-id">{data.id}</span>
         </div>
@@ -435,20 +445,6 @@ export function NodeDefaultView(props) {
                           .ant-cascader-picker,
                           .ant-picker,
                           .ant-input-number,
-                          .ant-input-affix-wrapper {
-                            &:not(.full-width) {
-                              width: auto;
-                              min-width: 6em;
-                            }
-                          }
-                          .ant-input-affix-wrapper {
-                            &:not(.full-width) {
-                              .ant-input {
-                                width: auto;
-                                min-width: 6em;
-                              }
-                            }
-                          }
                         `,
                       },
                       properties: instruction.fieldset,