@nocobase/plugin-workflow 0.10.1-alpha.1 → 0.11.1-alpha.1

package/lib/server/migrations/20230411034722-manual-multi-form.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _lodash() {
-  const data = require("lodash");
-  _lodash = function _lodash() {
-    return data;
-  };
-  return data;
-}
 function _server() {
   const data = require("@nocobase/server");
   _server = function _server() {
@@ -287,7 +280,7 @@ class _default extends _server().Migration {
           yield usedNodes.reduce((promise, node) => promise.then( /*#__PURE__*/_asyncToGenerator(function* () {
             var _node$config2;
             yield node.update({
-              config: migrateUsedConfig((0, _lodash().cloneDeep)((_node$config2 = node.config) !== null && _node$config2 !== void 0 ? _node$config2 : {}), nodeForms)
+              config: migrateUsedConfig(_utils().lodash.cloneDeep((_node$config2 = node.config) !== null && _node$config2 !== void 0 ? _node$config2 : {}), nodeForms)
             }, {
               silent: true,
               transaction

package/lib/server/migrations/20230710115902-manual-action-values.d.ts

@@ -0,0 +1,4 @@
+import { Migration } from '@nocobase/server';
+export default class extends Migration {
+    up(): Promise<void>;
+}

package/lib/server/migrations/20230710115902-manual-action-values.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _server() {
+  const data = require("@nocobase/server");
+  _server = function _server() {
+    return data;
+  };
+  return data;
+}
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function findSchema(root, filter, onlyLeaf = false) {
+  const result = [];
+  if (!root) {
+    return result;
+  }
+  if (filter(root) && (!onlyLeaf || !root.properties)) {
+    result.push(root);
+    return result;
+  }
+  if (root.properties) {
+    Object.keys(root.properties).forEach(key => {
+      result.push(...findSchema(root.properties[key], filter));
+    });
+  }
+  return result;
+}
+function migrateConfig(config) {
+  const _config$forms = config.forms,
+    forms = _config$forms === void 0 ? {} : _config$forms,
+    _config$schema = config.schema,
+    schema = _config$schema === void 0 ? {} : _config$schema;
+  const root = {
+    properties: schema
+  };
+  Object.keys(forms).forEach(key => {
+    const form = forms[key];
+    const formSchema = findSchema(root, item => item.name === key);
+    const actions = findSchema(formSchema[0], item => item['x-component'] === 'Action');
+    form.actions = actions.map(action => {
+      action['x-designer'] = 'ManualActionDesigner';
+      action['x-action-settings'] = {};
+      delete action['x-action'];
+      return {
+        status: action['x-decorator-props'].value,
+        values: {},
+        key: action.name
+      };
+    });
+  });
+  return config;
+}
+class _default extends _server().Migration {
+  up() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const match = yield _this.app.version.satisfies('<0.11.0-alpha.2');
+      if (!match) {
+        return;
+      }
+      const db = _this.context.db;
+      const NodeRepo = db.getRepository('flow_nodes');
+      yield db.sequelize.transaction( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(function* (transaction) {
+          const nodes = yield NodeRepo.find({
+            filter: {
+              type: 'manual'
+            },
+            transaction
+          });
+          console.log('%d nodes need to be migrated.', nodes.length);
+          yield nodes.reduce((promise, node) => promise.then(() => {
+            node.set('config', _objectSpread({}, migrateConfig(node.config)));
+            node.changed('config', true);
+            return node.save({
+              silent: true,
+              transaction
+            });
+          }), Promise.resolve());
+        });
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+    })();
+  }
+}
+exports.default = _default;

package/lib/server/triggers/collection.d.ts

@@ -1,5 +1,5 @@
 import { Trigger } from '..';
-import WorkflowModel from '../models/Workflow';
+import type { WorkflowModel } from '../types';
 export interface CollectionChangeTriggerConfig {
     collection: string;
     mode: number;

package/lib/server/triggers/collection.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ = require("..");
+var _utils = require("../utils");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
@@ -56,7 +57,7 @@ function _handler() {
       return;
     }
     // NOTE: if no configured condition match, do not trigger
-    if (condition && ((_condition$$and = condition.$and) === null || _condition$$and === void 0 ? void 0 : _condition$$and.length)) {
+    if (condition && (_condition$$and = condition.$and) !== null && _condition$$and !== void 0 && _condition$$and.length) {
       // TODO: change to map filter format to calculation format
       // const calculation = toCalculation(condition);
       const count = yield repository.count({
@@ -72,22 +73,23 @@ function _handler() {
         return;
       }
     }
-    if ((appends === null || appends === void 0 ? void 0 : appends.length) && !(mode & MODE_BITMAP.DESTROY)) {
-      const includeFields = appends.filter(field => !data.get(field) || !data[field]);
-      const included = yield model.findByPk(data[model.primaryKeyAttribute], {
-        attributes: [model.primaryKeyAttribute],
-        include: includeFields,
+    let result = data;
+    if (appends !== null && appends !== void 0 && appends.length && !(mode & MODE_BITMAP.DESTROY)) {
+      const includeFields = appends.reduce((set, field) => {
+        set.add(field.split('.')[0]);
+        set.add(field);
+        return set;
+      }, new Set());
+      result = yield repository.findOne({
+        filterByTk: data[model.primaryKeyAttribute],
+        appends: Array.from(includeFields),
         transaction
       });
-      includeFields.forEach(field => {
-        const value = included.get(field);
-        data.set(field, Array.isArray(value) ? value.map(item => item.toJSON()) : value ? value.toJSON() : null, {
-          raw: true
-        });
-      });
     }
+    // TODO: `result.toJSON()` throws error
+    const json = (0, _utils.toJSON)(result);
     this.plugin.trigger(workflow, {
-      data: data.toJSON()
+      data: json
     }, {
       context
     });

package/lib/server/triggers/index.d.ts

@@ -1,5 +1,5 @@
 import Plugin from '..';
-import WorkflowModel from '../models/Workflow';
+import type { WorkflowModel } from '../types';
 export declare abstract class Trigger {
     readonly plugin: Plugin;
     constructor(plugin: Plugin);

package/lib/server/triggers/schedule.d.ts

@@ -1,5 +1,5 @@
 import Plugin, { Trigger } from '..';
-export declare type ScheduleOnField = string | {
+export type ScheduleOnField = string | {
     field: string;
     offset?: number;
     unit?: 1000 | 60000 | 3600000 | 86400000;

package/lib/server/triggers/schedule.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SCHEDULE_MODE = void 0;
-function _cronParser() {
-  const data = _interopRequireDefault(require("cron-parser"));
-  _cronParser = function _cronParser() {
+function _database() {
+  const data = require("@nocobase/database");
+  _database = function _database() {
     return data;
   };
   return data;
 }
-function _sequelize() {
-  const data = require("sequelize");
-  _sequelize = function _sequelize() {
+function _cronParser() {
+  const data = _interopRequireDefault(require("cron-parser"));
+  _cronParser = function _cronParser() {
     return data;
   };
   return data;
@@ -233,7 +233,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
       }
       const conditions = [{
         [startsOn.field]: {
-          [_sequelize().Op.lt]: new Date(startTimestamp + _this2.cacheCycle)
+          [_database().Op.lt]: new Date(startTimestamp + _this2.cacheCycle)
         }
       }];
       // when repeat is number, means repeat after startsOn
@@ -241,8 +241,8 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
       if (repeat) {
         const tsFn = DialectTimestampFnMap[db.options.dialect];
         if (typeof repeat === 'number' && repeat > _this2.cacheCycle && tsFn) {
-          conditions.push((0, _sequelize().where)((0, _sequelize().fn)('MOD', (0, _sequelize().literal)(`${Math.round(timestamp / 1000)} - ${tsFn(startsOn.field)}`), Math.round(repeat / 1000)), {
-            [_sequelize().Op.lt]: Math.round(_this2.cacheCycle / 1000)
+          conditions.push((0, _database().where)((0, _database().fn)('MOD', (0, _database().literal)(`${Math.round(timestamp / 1000)} - ${tsFn(startsOn.field)}`), Math.round(repeat / 1000)), {
+            [_database().Op.lt]: Math.round(_this2.cacheCycle / 1000)
           }));
           // conditions.push(literal(`mod(${timestamp} - ${tsFn(startsOn.field)} * 1000, ${repeat}) < ${this.cacheCycle}`));
         }
@@ -259,7 +259,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
           } else {
             conditions.push({
               [endsOn.field]: {
-                [_sequelize().Op.gte]: new Date(endTimestamp + _this2.interval)
+                [_database().Op.gte]: new Date(endTimestamp + _this2.interval)
               }
             });
           }
@@ -267,7 +267,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
       } else {
         conditions.push({
           [startsOn.field]: {
-            [_sequelize().Op.gte]: new Date(startTimestamp)
+            [_database().Op.gte]: new Date(startTimestamp)
           }
         });
       }
@@ -275,7 +275,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
         model = _db$getCollection.model;
       const count = yield model.count({
         where: {
-          [_sequelize().Op.and]: conditions
+          [_database().Op.and]: conditions
         }
       });
       return Boolean(count);
@@ -297,20 +297,20 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
       }
       const conditions = [{
         [startsOn.field]: {
-          [_sequelize().Op.lt]: new Date(startTimestamp + _this3.interval)
+          [_database().Op.lt]: new Date(startTimestamp + _this3.interval)
         }
       }];
       if (repeat) {
         // startsOn not after now
         conditions.push({
           [startsOn.field]: {
-            [_sequelize().Op.lt]: new Date(startTimestamp)
+            [_database().Op.lt]: new Date(startTimestamp)
           }
         });
         const tsFn = DialectTimestampFnMap[_this3.plugin.app.db.options.dialect];
         if (typeof repeat === 'number' && tsFn) {
-          conditions.push((0, _sequelize().where)((0, _sequelize().fn)('MOD', (0, _sequelize().literal)(`${Math.round(timestamp / 1000)} - ${tsFn(startsOn.field)}`), Math.round(repeat / 1000)), {
-            [_sequelize().Op.eq]: 0
+          conditions.push((0, _database().where)((0, _database().fn)('MOD', (0, _database().literal)(`${Math.round(timestamp / 1000)} - ${tsFn(startsOn.field)}`), Math.round(repeat / 1000)), {
+            [_database().Op.eq]: 0
           }));
           // conditions.push(literal(`MOD(CAST(${timestamp} AS BIGINT) - CAST((FLOOR(${tsFn(startsOn.field)}) AS BIGINT) * 1000), ${repeat}) = 0`));
         }
@@ -327,7 +327,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
           } else {
             conditions.push({
               [endsOn.field]: {
-                [_sequelize().Op.gte]: new Date(endTimestamp + _this3.interval)
+                [_database().Op.gte]: new Date(endTimestamp + _this3.interval)
               }
             });
           }
@@ -336,7 +336,7 @@ ScheduleModes.set(SCHEDULE_MODE.COLLECTION_FIELD, {
         // startsOn exactly equal to now in 1s
         conditions.push({
           [startsOn.field]: {
-            [_sequelize().Op.gte]: new Date(startTimestamp)
+            [_database().Op.gte]: new Date(startTimestamp)
           }
         });
       }

package/lib/server/{models → types}/Execution.d.ts

@@ -1,7 +1,6 @@
-import { Database, Model } from '@nocobase/database';
-import { BelongsToGetAssociationMixin, HasManyGetAssociationsMixin } from 'sequelize';
-import WorkflowModel from './Workflow';
+import { BelongsToGetAssociationMixin, Database, HasManyGetAssociationsMixin, Model } from '@nocobase/database';
 import JobModel from './Job';
+import WorkflowModel from './Workflow';
 export default class ExecutionModel extends Model {
     static readonly database: Database;
     id: number;

package/lib/server/{models → types}/FlowNode.d.ts

@@ -1,5 +1,4 @@
-import { Database, Model } from '@nocobase/database';
-import { BelongsToGetAssociationMixin } from 'sequelize';
+import { BelongsToGetAssociationMixin, Database, Model } from '@nocobase/database';
 import WorkflowModel from './Workflow';
 export default class FlowNodeModel extends Model {
     static readonly database: Database;

package/lib/server/{models → types}/Job.d.ts

@@ -1,5 +1,4 @@
-import { Model } from '@nocobase/database';
-import { BelongsToGetAssociationMixin } from 'sequelize';
+import { BelongsToGetAssociationMixin, Model } from '@nocobase/database';
 import FlowNodeModel from './FlowNode';
 export default class JobModel extends Model {
     id: number;

package/lib/server/{models → types}/Workflow.d.ts

@@ -1,5 +1,4 @@
-import { Database, Model } from '@nocobase/database';
-import { HasManyCountAssociationsMixin, HasManyCreateAssociationMixin, HasManyGetAssociationsMixin } from 'sequelize';
+import { Database, HasManyCountAssociationsMixin, HasManyCreateAssociationMixin, HasManyGetAssociationsMixin, Model } from '@nocobase/database';
 import ExecutionModel from './Execution';
 import FlowNodeModel from './FlowNode';
 export default class WorkflowModel extends Model {

package/lib/server/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { default as WorkflowModel } from './Workflow';
+export type { default as FlowNodeModel } from './FlowNode';
+export type { default as ExecutionModel } from './Execution';
+export type { default as JobModel } from './Job';

package/lib/server/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/server/utils.d.ts

@@ -0,0 +1,2 @@
+import { Model } from '@nocobase/database';
+export declare function toJSON(data: Model | Model[]): object;

package/lib/server/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toJSON = toJSON;
+function toJSON(data) {
+  if (typeof data !== 'object' || !data) {
+    return data;
+  }
+  if (Array.isArray(data)) {
+    return data.map(toJSON);
+  }
+  const result = data.get();
+  Object.keys(data.constructor.associations).forEach(key => {
+    if (result[key] != null) {
+      result[key] = toJSON(result[key]);
+    }
+  });
+  return result;
+}

package/package.json

@@ -1,34 +1,55 @@
 {
   "name": "@nocobase/plugin-workflow",
-  "displayName": "workflow",
+  "displayName": "Workflow",
   "displayName.zh-CN": "工作流",
-  "description": " a powerful workflow plugin designed to support business process management and automation. .",
+  "description": "A powerful workflow plugin designed to support business process management and automation.",
   "description.zh-CN": "工作流插件，为业务流程管理和自动化提供支持。",
-  "version": "0.10.1-alpha.1",
+  "version": "0.11.1-alpha.1",
   "license": "AGPL-3.0",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./lib/server/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh-CN.md",
+    "CHANGELOG.md",
+    "server.js",
+    "server.d.ts",
+    "client.js",
+    "client.d.ts"
+  ],
   "dependencies": {
-    "@nocobase/actions": "0.10.1-alpha.1",
-    "@nocobase/client": "0.10.1-alpha.1",
-    "@nocobase/database": "0.10.1-alpha.1",
-    "@nocobase/evaluators": "0.10.1-alpha.1",
-    "@nocobase/logger": "0.10.1-alpha.1",
-    "@nocobase/resourcer": "0.10.1-alpha.1",
-    "@nocobase/server": "0.10.1-alpha.1",
-    "@nocobase/utils": "0.10.1-alpha.1",
-    "antd": "^4.24.8",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "cron-parser": "4.4.0",
     "lru-cache": "8.0.5",
-    "moment": "^2.29.2",
     "react-js-cron": "^3.1.0"
   },
+  "peerDependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@formily/antd-v5": "1.1.0-beta.4",
+    "@formily/core": "2.2.26",
+    "@formily/react": "2.2.26",
+    "@nocobase/actions": "0.11.0-alpha.1",
+    "@nocobase/client": "0.11.0-alpha.1",
+    "@nocobase/database": "0.11.0-alpha.1",
+    "@nocobase/evaluators": "0.11.0-alpha.1",
+    "@nocobase/logger": "0.11.0-alpha.1",
+    "@nocobase/plugin-users": "0.11.0-alpha.1",
+    "@nocobase/resourcer": "0.11.0-alpha.1",
+    "@nocobase/server": "0.11.0-alpha.1",
+    "@nocobase/utils": "0.11.0-alpha.1",
+    "antd": "^5.6.4",
+    "dayjs": "^1.11.8",
+    "react": "18.x",
+    "react-i18next": "^11.15.1",
+    "react-router-dom": "^6.11.2",
+    "sequelize": "^6.26.0",
+    "winston": "^3.8.2"
+  },
   "devDependencies": {
-    "@nocobase/plugin-formula-field": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1",
+    "@nocobase/test": "0.11.1-alpha.1",
     "@types/ejs": "^3.1.1"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "gitHead": "9ed1dba520bc5f3a7cb1255ea8d92ccbefc11bc8"
 }

package/server.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/server';
-export { default } from './lib/server';
+export * from './src/server';
+export { default } from './src/server';
 

package/server.js

@@ -1,30 +1 @@
-"use strict";
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _index = _interopRequireWildcard(require("./lib/server"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/server/index.js');

package/src/client/AddButton.tsx

@@ -0,0 +1,111 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { cx, css, useAPIClient, useCompile } from '@nocobase/client';
+import { Button, Dropdown, MenuProps } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { useFlowContext } from './FlowContext';
+import { NAMESPACE } from './locale';
+import { Instruction, instructions } from './nodes';
+import useStyles from './style';
+
+interface AddButtonProps {
+  upstream;
+  branchIndex?: number | null;
+}
+
+export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
+  const compile = useCompile();
+  const api = useAPIClient();
+  const { workflow, refresh } = useFlowContext() ?? {};
+  const instructionList = Array.from(instructions.getValues()) as Instruction[];
+  const { styles } = useStyles();
+
+  const groups = useMemo(() => {
+    return [
+      { key: 'control', label: `{{t("Control", { ns: "${NAMESPACE}" })}}` },
+      { key: 'collection', label: `{{t("Collection operations", { ns: "${NAMESPACE}" })}}` },
+      { key: 'manual', label: `{{t("Manual", { ns: "${NAMESPACE}" })}}` },
+      { key: 'extended', label: `{{t("Extended types", { ns: "${NAMESPACE}" })}}` },
+    ]
+      .filter((group) => instructionList.filter((item) => item.group === group.key).length)
+      .map((group) => {
+        const groupInstructions = instructionList.filter((item) => item.group === group.key);
+
+        return {
+          ...group,
+          type: 'group',
+          children: groupInstructions.map((item) => ({
+            key: item.type,
+            label: item.title,
+            type: item.options ? 'subMenu' : null,
+            children: item.options
+              ? item.options.map((option) => ({
+                  key: option.key,
+                  label: option.label,
+                }))
+              : null,
+          })),
+        };
+      });
+  }, [instructionList]);
+  const resource = useMemo(() => {
+    if (!workflow) {
+      return null;
+    }
+    return api.resource('workflows.nodes', workflow.id);
+  }, [workflow?.id]);
+  const onCreate = useCallback(
+    async ({ keyPath }) => {
+      const type = keyPath.pop();
+      const config = {};
+      const [optionKey] = keyPath;
+      const instruction = instructions.get(type);
+      if (optionKey) {
+        const { value } = instruction.options?.find((item) => item.key === optionKey) ?? {};
+        Object.assign(config, value);
+      }
+
+      if (resource) {
+        await resource.create({
+          values: {
+            type,
+            upstreamId: upstream?.id ?? null,
+            branchIndex,
+            title: compile(instruction.title),
+            config,
+          },
+        });
+        refresh();
+      }
+    },
+    [branchIndex, resource?.create, upstream?.id],
+  );
+
+  const menu = useMemo<MenuProps>(() => {
+    return {
+      onClick: onCreate,
+      items: compile(groups),
+    };
+  }, [groups, onCreate]);
+
+  if (!workflow) {
+    return null;
+  }
+
+  return (
+    <div className={styles.addButtonClass}>
+      <Dropdown
+        trigger={['click']}
+        menu={menu}
+        disabled={workflow.executed}
+        overlayClassName={css`
+          .ant-dropdown-menu-root{
+            max-height: 30em;
+            overflow-y: auto;
+          }
+        `}
+      >
+        <Button shape="circle" icon={<PlusOutlined />} />
+      </Dropdown>
+    </div>
+  );
+}

package/src/client/Branch.tsx

@@ -0,0 +1,37 @@
+import { cx } from '@nocobase/client';
+import React from 'react';
+import { AddButton } from './AddButton';
+import { Node } from './nodes';
+import useStyles from './style';
+
+export function Branch({
+  from = null,
+  entry = null,
+  branchIndex = null,
+  controller = null,
+}: {
+  from?: any;
+  entry?: any;
+  branchIndex?: number | null;
+  controller?: any;
+}) {
+  const { styles } = useStyles();
+
+  const list: any[] = [];
+  for (let node = entry; node; node = node.downstream) {
+    list.push(node);
+  }
+
+  return (
+    <div className={cx(styles.branchClass)}>
+      <div className="workflow-branch-lines" />
+      {controller}
+      <AddButton upstream={from} branchIndex={branchIndex} />
+      <div className="workflow-node-list">
+        {list.map((item) => (
+          <Node data={item} key={item.id} />
+        ))}
+      </div>
+    </div>
+  );
+}