@nocobase/plugin-workflow 0.9.2-alpha.4 → 0.9.4-alpha.1

package/lib/client/nodes/index.js

@@ -11,6 +11,7 @@ exports.RemoveButton = RemoveButton;
 exports.instructions = void 0;
 exports.useAvailableUpstreams = useAvailableUpstreams;
 exports.useNodeContext = useNodeContext;
+exports.useUpstreamScopes = useUpstreamScopes;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function _react() {
@@ -53,13 +54,6 @@ function _reactI18next() {
   };
   return data;
 }
-function _jsonTemplates() {
-  const data = _interopRequireDefault(require("json-templates"));
-  _jsonTemplates = function _jsonTemplates() {
-    return data;
-  };
-  return data;
-}
 function _client() {
   const data = require("@nocobase/utils/client");
   _client = function _client() {
@@ -80,42 +74,50 @@ var _FlowContext = require("../FlowContext");
 var _calculation = _interopRequireDefault(require("./calculation"));
 var _condition = _interopRequireDefault(require("./condition"));
 var _parallel = _interopRequireDefault(require("./parallel"));
+var _loop = _interopRequireDefault(require("./loop"));
 var _delay = _interopRequireDefault(require("./delay"));
 var _manual = _interopRequireDefault(require("./manual"));
 var _query = _interopRequireDefault(require("./query"));
 var _create = _interopRequireDefault(require("./create"));
 var _update = _interopRequireDefault(require("./update"));
 var _destroy = _interopRequireDefault(require("./destroy"));
+var _aggregate = _interopRequireDefault(require("./aggregate"));
 var _constants = require("../constants");
 var _locale = require("../locale");
 var _request = _interopRequireDefault(require("./request"));
+var _NodeDescription = require("../components/NodeDescription");
+const _excluded = ["job"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-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 _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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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); }); }; }
 const instructions = new (_client().Registry)();
 exports.instructions = instructions;
+instructions.register('calculation', _calculation.default);
 instructions.register('condition', _condition.default);
 instructions.register('parallel', _parallel.default);
-instructions.register('calculation', _calculation.default);
+instructions.register('loop', _loop.default);
 instructions.register('delay', _delay.default);
 instructions.register('manual', _manual.default);
 instructions.register('query', _query.default);
 instructions.register('create', _create.default);
 instructions.register('update', _update.default);
 instructions.register('destroy', _destroy.default);
+instructions.register('aggregate', _aggregate.default);
 instructions.register('request', _request.default);
 function useUpdateAction() {
   const form = (0, _react2().useForm)();
@@ -162,6 +164,18 @@ function useAvailableUpstreams(node) {
   }
   return stack;
 }
+function useUpstreamScopes(node) {
+  const stack = [];
+  if (!node) {
+    return [];
+  }
+  for (let current = node; current; current = current.upstream) {
+    if (current.upstream && current.branchIndex != null) {
+      stack.push(current.upstream);
+    }
+  }
+  return stack;
+}
 function Node({
   data
 }) {
@@ -229,7 +243,7 @@ function RemoveButton() {
         if (node === current) {
           return false;
         }
-        const template = (0, _jsonTemplates().default)(node.config);
+        const template = (0, _client().parse)(node.config);
         const refs = template.parameters.filter(({
           key
         }) => key.startsWith(`$jobsMapByNodeId.${current.id}.`) || key === `$jobsMapByNodeId.${current.id}`);
@@ -262,106 +276,76 @@ function RemoveButton() {
     className: "workflow-node-remove-button"
   });
 }
+function InnerJobButton(_ref2) {
+  let job = _ref2.job,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const _JobStatusOptionsMap$ = _constants.JobStatusOptionsMap[job.status],
+    icon = _JobStatusOptionsMap$.icon,
+    color = _JobStatusOptionsMap$.color;
+  return _react().default.createElement(_antd().Button, _objectSpread(_objectSpread({}, props), {}, {
+    shape: "circle",
+    className: _style.nodeJobButtonClass
+  }), _react().default.createElement(_antd().Tag, {
+    color: color
+  }, icon));
+}
 function JobButton() {
   var _useNodeContext;
-  const compile = (0, _client2().useCompile)();
   const _useFlowContext3 = (0, _FlowContext.useFlowContext)(),
-    execution = _useFlowContext3.execution;
-  const _ref2 = (_useNodeContext = useNodeContext()) !== null && _useNodeContext !== void 0 ? _useNodeContext : {},
-    id = _ref2.id,
-    type = _ref2.type,
-    title = _ref2.title,
-    job = _ref2.job;
+    execution = _useFlowContext3.execution,
+    setViewJob = _useFlowContext3.setViewJob;
+  const _ref3 = (_useNodeContext = useNodeContext()) !== null && _useNodeContext !== void 0 ? _useNodeContext : {},
+    jobs = _ref3.jobs;
   if (!execution) {
     return null;
   }
-  if (!job) {
+  if (!jobs.length) {
     return _react().default.createElement("span", {
-      className: (0, _css().cx)('workflow-node-job-button', (0, _css().css)`
+      className: (0, _css().cx)(_style.nodeJobButtonClass, (0, _css().css)`
             border: 2px solid #d9d9d9;
             border-radius: 50%;
             cursor: not-allowed;
           `)
     });
   }
-  const instruction = instructions.get(type);
-  const _JobStatusOptionsMap$ = _constants.JobStatusOptionsMap[job.status],
-    value = _JobStatusOptionsMap$.value,
-    icon = _JobStatusOptionsMap$.icon,
-    color = _JobStatusOptionsMap$.color;
-  return _react().default.createElement(_client2().SchemaComponent, {
-    schema: {
-      type: 'void',
-      properties: {
-        [`${job.id}-button`]: {
-          type: 'void',
-          'x-component': 'Action',
-          'x-component-props': {
-            title: _react().default.createElement(_antd().Tag, {
-              color: color
-            }, icon),
-            shape: 'circle',
-            className: ['workflow-node-job-button', (0, _css().css)`
-                  .ant-tag {
-                    padding: 0;
-                    width: 100%;
-                    line-height: 18px;
-                    margin-right: 0;
-                    border-radius: 50%;
+  function onOpenJob({
+    key
+  }) {
+    const job = jobs.find(item => item.id == key);
+    setViewJob(job);
+  }
+  return jobs.length > 1 ? _react().default.createElement(_antd().Dropdown, {
+    menu: {
+      items: jobs.map(job => {
+        const _JobStatusOptionsMap$2 = _constants.JobStatusOptionsMap[job.status],
+          icon = _JobStatusOptionsMap$2.icon,
+          color = _JobStatusOptionsMap$2.color;
+        return {
+          key: job.id,
+          label: _react().default.createElement("div", {
+            className: (0, _css().css)`
+                  display: flex;
+                  gap: 0.5em;
+
+                  time {
+                    color: #999;
+                    font-size: 0.8em;
                   }
-                `]
-          },
-          properties: {
-            [`${job.id}-modal`]: {
-              type: 'void',
-              'x-decorator': 'Form',
-              'x-decorator-props': {
-                initialValue: job
-              },
-              'x-component': 'Action.Modal',
-              title: _react().default.createElement("div", {
-                className: (0, _css().cx)(_style.nodeTitleClass)
-              }, _react().default.createElement(_antd().Tag, null, compile(instruction.title)), _react().default.createElement("strong", null, title), _react().default.createElement("span", {
-                className: "workflow-node-id"
-              }, "#", id)),
-              properties: {
-                status: {
-                  type: 'number',
-                  title: `{{t("Status", { ns: "${_locale.NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Select',
-                  enum: _constants.JobStatusOptions,
-                  'x-read-pretty': true
-                },
-                updatedAt: {
-                  type: 'string',
-                  title: `{{t("Executed at", { ns: "${_locale.NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'DatePicker',
-                  'x-component-props': {
-                    showTime: true
-                  },
-                  'x-read-pretty': true
-                },
-                result: {
-                  type: 'object',
-                  title: `{{t("Node result", { ns: "${_locale.NAMESPACE}" })}}`,
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.JSON',
-                  'x-component-props': {
-                    className: (0, _css().css)`
-                        padding: 1em;
-                        background-color: #eee;
-                      `
-                  },
-                  'x-read-pretty': true
-                }
-              }
-            }
-          }
-        }
-      }
+                `
+          }, _react().default.createElement("span", {
+            className: _style.nodeJobButtonClass
+          }, _react().default.createElement(_antd().Tag, {
+            color: color
+          }, icon)), _react().default.createElement("time", null, (0, _client().str2moment)(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')))
+        };
+      }),
+      onClick: onOpenJob
     }
+  }, _react().default.createElement(InnerJobButton, {
+    job: jobs[jobs.length - 1]
+  })) : _react().default.createElement(InnerJobButton, {
+    job: jobs[0],
+    onClick: () => setViewJob(jobs[0])
   });
 }
 function NodeDefaultView(props) {
@@ -370,9 +354,9 @@ function NodeDefaultView(props) {
     children = props.children;
   const compile = (0, _client2().useCompile)();
   const api = (0, _client2().useAPIClient)();
-  const _ref3 = (_useFlowContext4 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext4 !== void 0 ? _useFlowContext4 : {},
-    workflow = _ref3.workflow,
-    refresh = _ref3.refresh;
+  const _ref4 = (_useFlowContext4 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext4 !== void 0 ? _useFlowContext4 : {},
+    workflow = _ref4.workflow,
+    refresh = _ref4.refresh;
   const instruction = instructions.get(data.type);
   const detailText = workflow.executed ? '{{t("View")}}' : '{{t("Configure")}}';
   const typeTitle = compile(instruction.title);
@@ -411,7 +395,7 @@ function NodeDefaultView(props) {
       return;
     }
     const whiteSet = new Set(['workflow-node-meta', 'workflow-node-config-button', 'ant-input-disabled']);
-    for (let el = ev.target; el && el !== ev.currentTarget; el = el.parentNode) {
+    for (let el = ev.target; el && el !== ev.currentTarget && el !== document.documentElement; el = el.parentNode) {
       if (Array.from(el.classList).some(name => whiteSet.has(name))) {
         setEditingConfig(true);
         ev.stopPropagation();
@@ -460,7 +444,7 @@ function NodeDefaultView(props) {
         },
         [`${instruction.type}_${data.id}`]: {
           type: 'void',
-          title: instruction.title,
+          title: data.title,
           'x-component': 'Action.Drawer',
           'x-decorator': 'Form',
           'x-decorator-props': {
@@ -490,6 +474,14 @@ function NodeDefaultView(props) {
                               `
               }
             }
+          } : instruction.description ? {
+            description: {
+              type: 'void',
+              'x-component': _NodeDescription.NodeDescription,
+              'x-component-props': {
+                instruction
+              }
+            }
           } : {}), {}, {
             fieldset: {
               type: 'void',
@@ -506,7 +498,6 @@ function NodeDefaultView(props) {
                               min-width: 6em;
                             }
                           }
-
                           .ant-input-affix-wrapper {
                             &:not(.full-width) {
                               .ant-input {

package/lib/client/nodes/loop.d.ts

@@ -0,0 +1,29 @@
+import { useWorkflowVariableOptions, VariableOption } from '../variable';
+declare const _default: {
+    title: string;
+    type: string;
+    group: string;
+    description: string;
+    fieldset: {
+        target: {
+            type: string;
+            title: string;
+            description: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-component-props': {
+                scope: string;
+                useTypedConstant: string[];
+            };
+            required: boolean;
+        };
+    };
+    view: {};
+    render: (data: any) => JSX.Element;
+    scope: {
+        useWorkflowVariableOptions: typeof useWorkflowVariableOptions;
+    };
+    components: {};
+    useScopeVariables(node: any, options: any): VariableOption[];
+};
+export default _default;

package/lib/client/nodes/loop.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+var _ = require(".");
+var _FlowContext = require("../FlowContext");
+var _locale = require("../locale");
+var _variable = require("../variable");
+var _style = require("../style");
+var _Branch = require("../Branch");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function findOption(options, paths) {
+  let current = options;
+  for (let i = 0; i < paths.length; i++) {
+    const path = paths[i];
+    const option = current.find(item => item.value === path);
+    if (!option) {
+      return null;
+    }
+    if (option.children) {
+      current = option.children;
+    }
+  }
+  return current;
+}
+var _default = {
+  title: `{{t("Loop", { ns: "${_locale.NAMESPACE}" })}}`,
+  type: 'loop',
+  group: 'control',
+  description: `{{t("By using a loop node, you can perform the same operation on multiple sets of data. The source of these sets can be either multiple records from a query node or multiple associated records of a single record. Loop node can also be used for iterating a certain number of times or for looping through each character in a string. However, excessive looping may cause performance issues, so use with caution.", { ns: "${_locale.NAMESPACE}" })}}`,
+  fieldset: {
+    target: {
+      type: 'string',
+      title: `{{t("Loop target", { ns: "${_locale.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: "${_locale.NAMESPACE}" })}}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Variable.Input',
+      'x-component-props': {
+        scope: '{{useWorkflowVariableOptions}}',
+        useTypedConstant: ['string', 'number', 'null']
+      },
+      required: true
+    }
+  },
+  view: {},
+  render: function Renderer(data) {
+    var _entry$branchIndex;
+    const _useFlowContext = (0, _FlowContext.useFlowContext)(),
+      nodes = _useFlowContext.nodes;
+    const entry = nodes.find(node => node.upstreamId === data.id && node.branchIndex != null);
+    return _react().default.createElement(_.NodeDefaultView, {
+      data: data
+    }, _react().default.createElement("div", {
+      className: (0, _css().cx)(_style.nodeSubtreeClass)
+    }, _react().default.createElement("div", {
+      className: (0, _css().cx)(_style.branchBlockClass, (0, _css().css)`
+                padding-left: 20em;
+              `)
+    }, _react().default.createElement(_Branch.Branch, {
+      from: data,
+      entry: entry,
+      branchIndex: (_entry$branchIndex = entry === null || entry === void 0 ? void 0 : entry.branchIndex) !== null && _entry$branchIndex !== void 0 ? _entry$branchIndex : 0
+    }), _react().default.createElement("div", {
+      className: (0, _css().cx)(_style.branchClass)
+    }, _react().default.createElement("div", {
+      className: "workflow-branch-lines"
+    }), _react().default.createElement("div", {
+      className: (0, _css().cx)(_style.addButtonClass, (0, _css().css)`
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 2em;
+                    height: 6em;
+                  `)
+    }, _react().default.createElement(_icons().ArrowUpOutlined, {
+      className: (0, _css().css)`
+                    background-color: #f0f2f5;
+                  `
+    })))), _react().default.createElement("div", {
+      className: (0, _css().css)`
+              position: relative;
+              height: 2em;
+            `
+    })));
+  },
+  scope: {
+    useWorkflowVariableOptions: _variable.useWorkflowVariableOptions
+  },
+  components: {},
+  useScopeVariables(node, options) {
+    const compile = (0, _client().useCompile)();
+    const target = node.config.target;
+    if (!target) {
+      return null;
+    }
+    // const { workflow } = useFlowContext();
+    // const current = useNodeContext();
+    // const upstreams = useAvailableUpstreams(current);
+    // find target data model by path described in `config.target`
+    // 1. get options from $context/$jobsMapByNodeId
+    // 2. route to sub-options and use as loop target options
+    const targetOption = {
+      key: 'item',
+      value: 'item',
+      label: (0, _locale.lang)('Loop target')
+    };
+    if (typeof target === 'string' && target.startsWith('{{') && target.endsWith('}}')) {
+      const paths = target.slice(2, -2).split('.').map(path => path.trim());
+      const targetOptions = [_variable.nodesOptions, _variable.triggerOptions].map(item => {
+        const opts = typeof item.useOptions === 'function' ? item.useOptions(options).filter(Boolean) : null;
+        return {
+          label: compile(item.title),
+          value: item.value,
+          key: item.value,
+          children: compile(opts),
+          disabled: opts && !opts.length
+        };
+      });
+      targetOption.children = findOption(targetOptions, paths);
+    }
+    return [targetOption, {
+      key: 'index',
+      value: 'index',
+      label: (0, _locale.lang)('Loop index')
+    }, {
+      key: 'length',
+      value: 'length',
+      label: (0, _locale.lang)('Loop length')
+    }];
+  }
+};
+exports.default = _default;

package/lib/client/nodes/manual/AssigneesSelect.js

@@ -25,12 +25,14 @@ function AssigneesSelect({
   value = [],
   onChange: _onChange
 }) {
-  const scope = (0, _variable.useWorkflowVariableOptions)([{
-    type: 'reference',
-    options: {
-      collection: 'users'
-    }
-  }]);
+  const scope = (0, _variable.useWorkflowVariableOptions)({
+    types: [{
+      type: 'reference',
+      options: {
+        collection: 'users'
+      }
+    }]
+  });
   return _react().default.createElement(_client().Variable.Input, {
     scope: scope,
     value: value[0],

package/lib/client/nodes/manual/WorkflowTodo.js

@@ -25,13 +25,6 @@ function _antd() {
   };
   return data;
 }
-function _jsonTemplates() {
-  const data = _interopRequireDefault(require("json-templates"));
-  _jsonTemplates = function _jsonTemplates() {
-    return data;
-  };
-  return data;
-}
 function _css() {
   const data = require("@emotion/css");
   _css = function _css() {
@@ -468,7 +461,7 @@ function useFlowRecordFromBlock(opts) {
     dataSource = _useFieldSchema['x-context-datasource'];
   const _useFlowContext = (0, _FlowContext.useFlowContext)(),
     execution = _useFlowContext.execution;
-  const result = (0, _jsonTemplates().default)(dataSource)({
+  const result = (0, _client2().parse)(dataSource)({
     $context: execution === null || execution === void 0 ? void 0 : execution.context,
     $jobsMapByNodeId: ((_execution$jobs = execution === null || execution === void 0 ? void 0 : execution.jobs) !== null && _execution$jobs !== void 0 ? _execution$jobs : []).reduce((map, job) => Object.assign(map, {
       [job.nodeId]: job.result

package/lib/client/nodes/manual/index.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
     title: string;
     type: string;
     group: string;
+    description: string;
     fieldset: {
         assignees: {
             type: string;
@@ -58,7 +59,11 @@ declare const _default: {
         ModeConfig: typeof ModeConfig;
         AssigneesSelect: typeof AssigneesSelect;
     };
-    getOptions(config: any, types: any): {
+    useVariables({ config }: {
+        config: any;
+    }, { types }: {
+        types: any;
+    }): {
         key: string;
         value: string;
         label: any;

package/lib/client/nodes/manual/index.js

@@ -40,6 +40,7 @@ var _default = {
   title: `{{t("Manual", { ns: "${_locale.NAMESPACE}" })}}`,
   type: 'manual',
   group: 'manual',
+  description: `{{t("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.", { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     assignees: {
       type: 'array',
@@ -93,7 +94,11 @@ var _default = {
     ModeConfig: _ModeConfig.ModeConfig,
     AssigneesSelect: _AssigneesSelect.AssigneesSelect
   },
-  getOptions(config, types) {
+  useVariables({
+    config
+  }, {
+    types
+  }) {
     var _config$forms;
     const formKeys = Object.keys((_config$forms = config.forms) !== null && _config$forms !== void 0 ? _config$forms : {});
     if (!formKeys.length) {

package/lib/client/nodes/parallel.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     type: string;
     group: string;
+    description: string;
     fieldset: {
         mode: {
             type: string;

package/lib/client/nodes/parallel.js

@@ -50,6 +50,7 @@ var _default = {
   title: `{{t("Parallel branch", { ns: "${_locale.NAMESPACE}" })}}`,
   type: 'parallel',
   group: 'control',
+  description: `{{t("Run multiple branch processes in parallel.", { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     mode: {
       type: 'string',
@@ -68,7 +69,7 @@ var _default = {
         }, {
           value: 'race',
           label: `{{t('Any succeeded or failed', { ns: "${_locale.NAMESPACE}" })}}`,
-          tooltip: `{{t('Continue after any branch succeeded, or exit after any branch failed', { ns: "${_locale.NAMESPACE}" })}}`
+          tooltip: `{{t('Continue after any branch succeeded, or exit after any branch failed.', { ns: "${_locale.NAMESPACE}" })}}`
         }]
       },
       default: 'all'