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

package/lib/client/nodes/index.js

@@ -12,13 +12,6 @@ exports.instructions = void 0;
 exports.useAvailableUpstreams = useAvailableUpstreams;
 exports.useNodeContext = useNodeContext;
 exports.useUpstreamScopes = useUpstreamScopes;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
 function _icons() {
   const data = require("@ant-design/icons");
   _icons = function _icons() {
@@ -26,66 +19,67 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _react() {
+  const data = require("@formily/react");
+  _react = function _react() {
     return data;
   };
   return data;
 }
-function _react2() {
-  const data = require("@formily/react");
-  _react2 = function _react2() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
     return data;
   };
   return data;
 }
-function _reactI18next() {
-  const data = require("react-i18next");
-  _reactI18next = function _reactI18next() {
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
     return data;
   };
   return data;
 }
-function _client() {
-  const data = require("@nocobase/utils/client");
-  _client = function _client() {
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+  _react2 = function _react2() {
     return data;
   };
   return data;
 }
-function _client2() {
-  const data = require("@nocobase/client");
-  _client2 = function _client2() {
+function _reactI18next() {
+  const data = require("react-i18next");
+  _reactI18next = function _reactI18next() {
     return data;
   };
   return data;
 }
-var _style = require("../style");
 var _AddButton = require("../AddButton");
 var _FlowContext = require("../FlowContext");
+var _NodeDescription = require("../components/NodeDescription");
+var _constants = require("../constants");
+var _locale = require("../locale");
+var _style = _interopRequireDefault(require("../style"));
+var _aggregate = _interopRequireDefault(require("./aggregate"));
 var _calculation = _interopRequireDefault(require("./calculation"));
 var _condition = _interopRequireDefault(require("./condition"));
-var _parallel = _interopRequireDefault(require("./parallel"));
-var _loop = _interopRequireDefault(require("./loop"));
+var _create = _interopRequireDefault(require("./create"));
 var _delay = _interopRequireDefault(require("./delay"));
+var _destroy = _interopRequireDefault(require("./destroy"));
+var _loop = _interopRequireDefault(require("./loop"));
 var _manual = _interopRequireDefault(require("./manual"));
+var _parallel = _interopRequireDefault(require("./parallel"));
 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");
+var _update = _interopRequireDefault(require("./update"));
+var _sql = _interopRequireDefault(require("./sql"));
 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); }
@@ -105,7 +99,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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)();
+const instructions = new (_client2().Registry)();
 exports.instructions = instructions;
 instructions.register('calculation', _calculation.default);
 instructions.register('condition', _condition.default);
@@ -119,11 +113,12 @@ instructions.register('update', _update.default);
 instructions.register('destroy', _destroy.default);
 instructions.register('aggregate', _aggregate.default);
 instructions.register('request', _request.default);
+instructions.register('sql', _sql.default);
 function useUpdateAction() {
-  const form = (0, _react2().useForm)();
-  const api = (0, _client2().useAPIClient)();
-  const ctx = (0, _client2().useActionContext)();
-  const _useResourceActionCon = (0, _client2().useResourceActionContext)(),
+  const form = (0, _react().useForm)();
+  const api = (0, _client().useAPIClient)();
+  const ctx = (0, _client().useActionContext)();
+  const _useResourceActionCon = (0, _client().useResourceActionContext)(),
     refresh = _useResourceActionCon.refresh;
   const data = useNodeContext();
   const _useFlowContext = (0, _FlowContext.useFlowContext)(),
@@ -149,10 +144,10 @@ function useUpdateAction() {
     }
   };
 }
-const NodeContext = _react().default.createContext({});
+const NodeContext = _react2().default.createContext({});
 exports.NodeContext = NodeContext;
 function useNodeContext() {
-  return (0, _react().useContext)(NodeContext);
+  return (0, _react2().useContext)(NodeContext);
 }
 function useAvailableUpstreams(node) {
   const stack = [];
@@ -179,20 +174,22 @@ function useUpstreamScopes(node) {
 function Node({
   data
 }) {
+  const _useStyles = (0, _style.default)(),
+    styles = _useStyles.styles;
   const _instructions$get = instructions.get(data.type),
     _instructions$get$com = _instructions$get.component,
     Component = _instructions$get$com === void 0 ? NodeDefaultView : _instructions$get$com,
     endding = _instructions$get.endding;
-  return _react().default.createElement(NodeContext.Provider, {
+  return _react2().default.createElement(NodeContext.Provider, {
     value: data
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeBlockClass)
-  }, _react().default.createElement(Component, {
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(styles.nodeBlockClass)
+  }, _react2().default.createElement(Component, {
     data: data
-  }), !endding ? _react().default.createElement(_AddButton.AddButton, {
+  }), !endding ? _react2().default.createElement(_AddButton.AddButton, {
     upstream: data
-  }) : _react().default.createElement("div", {
-    className: (0, _css().css)`
+  }) : _react2().default.createElement("div", {
+    className: (0, _client().css)`
               flex-grow: 1;
               display: flex;
               flex-direction: column;
@@ -201,25 +198,27 @@ function Node({
               width: 1px;
               height: 6em;
               padding: 2em 0;
-              background-color: #f0f2f5;
+              background-color: var(--nb-box-bg);
 
               .anticon {
                 font-size: 1.5em;
                 line-height: 100%;
               }
             `
-  }, _react().default.createElement(_icons().CloseOutlined, null))));
+  }, _react2().default.createElement(_icons().CloseOutlined, null))));
 }
 function RemoveButton() {
   var _useFlowContext2;
   const _useTranslation = (0, _reactI18next().useTranslation)(),
     t = _useTranslation.t;
-  const api = (0, _client2().useAPIClient)();
+  const api = (0, _client().useAPIClient)();
   const _ref = (_useFlowContext2 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext2 !== void 0 ? _useFlowContext2 : {},
     workflow = _ref.workflow,
     nodes = _ref.nodes,
     refresh = _ref.refresh;
   const current = useNodeContext();
+  const _App$useApp = _antd().App.useApp(),
+    modal = _App$useApp.modal;
   if (!workflow) {
     return null;
   }
@@ -246,14 +245,14 @@ function RemoveButton() {
         if (node === current) {
           return false;
         }
-        const template = (0, _client().parse)(node.config);
+        const template = (0, _client2().parse)(node.config);
         const refs = template.parameters.filter(({
           key
         }) => key.startsWith(`$jobsMapByNodeId.${current.id}.`) || key === `$jobsMapByNodeId.${current.id}`);
         return refs.length;
       });
       if (usingNodes.length) {
-        _antd().Modal.error({
+        modal.error({
           title: (0, _locale.lang)('Can not delete'),
           content: (0, _locale.lang)('The result of this node has been referenced by other nodes ({{nodes}}), please remove the usage before deleting.', {
             nodes: usingNodes.map(item => `#${item.id}`).join(', ')
@@ -263,7 +262,7 @@ function RemoveButton() {
       }
       const hasBranches = !nodes.find(item => item.upstream === current && item.branchIndex != null);
       const message = hasBranches ? t('Are you sure you want to delete it?') : (0, _locale.lang)('This node contains branches, deleting will also be preformed to them, are you sure?');
-      _antd().Modal.confirm({
+      modal.confirm({
         title: t('Delete'),
         content: message,
         onOk
@@ -271,10 +270,10 @@ function RemoveButton() {
     });
     return _onRemove.apply(this, arguments);
   }
-  return workflow.executed ? null : _react().default.createElement(_antd().Button, {
+  return workflow.executed ? null : _react2().default.createElement(_antd().Button, {
     type: "text",
     shape: "circle",
-    icon: _react().default.createElement(_icons().DeleteOutlined, null),
+    icon: _react2().default.createElement(_icons().DeleteOutlined, null),
     onClick: onRemove,
     className: "workflow-node-remove-button"
   });
@@ -282,13 +281,16 @@ function RemoveButton() {
 function InnerJobButton(_ref2) {
   let job = _ref2.job,
     props = _objectWithoutProperties(_ref2, _excluded);
+  const _useStyles2 = (0, _style.default)(),
+    styles = _useStyles2.styles;
   const _JobStatusOptionsMap$ = _constants.JobStatusOptionsMap[job.status],
     icon = _JobStatusOptionsMap$.icon,
     color = _JobStatusOptionsMap$.color;
-  return _react().default.createElement(_antd().Button, _objectSpread(_objectSpread({}, props), {}, {
+  return _react2().default.createElement(_antd().Button, _objectSpread(_objectSpread({}, props), {}, {
     shape: "circle",
-    className: (0, _css().cx)(_style.nodeJobButtonClass, props.className)
-  }), _react().default.createElement(_antd().Tag, {
+    size: "small",
+    className: (0, _client().cx)(styles.nodeJobButtonClass, props.className)
+  }), _react2().default.createElement(_antd().Tag, {
     color: color
   }, icon));
 }
@@ -299,12 +301,14 @@ function JobButton() {
     setViewJob = _useFlowContext3.setViewJob;
   const _ref3 = (_useNodeContext = useNodeContext()) !== null && _useNodeContext !== void 0 ? _useNodeContext : {},
     jobs = _ref3.jobs;
+  const _useStyles3 = (0, _style.default)(),
+    styles = _useStyles3.styles;
   if (!execution) {
     return null;
   }
   if (!jobs.length) {
-    return _react().default.createElement("span", {
-      className: (0, _css().cx)(_style.nodeJobButtonClass, (0, _css().css)`
+    return _react2().default.createElement("span", {
+      className: (0, _client().cx)(styles.nodeJobButtonClass, (0, _client().css)`
             border: 2px solid #d9d9d9;
             border-radius: 50%;
             cursor: not-allowed;
@@ -317,7 +321,7 @@ function JobButton() {
     const job = jobs.find(item => item.id == key);
     setViewJob(job);
   }
-  return jobs.length > 1 ? _react().default.createElement(_antd().Dropdown, {
+  return jobs.length > 1 ? _react2().default.createElement(_antd().Dropdown, {
     menu: {
       items: jobs.map(job => {
         const _JobStatusOptionsMap$2 = _constants.JobStatusOptionsMap[job.status],
@@ -325,9 +329,10 @@ function JobButton() {
           color = _JobStatusOptionsMap$2.color;
         return {
           key: job.id,
-          label: _react().default.createElement("div", {
-            className: (0, _css().css)`
+          label: _react2().default.createElement("div", {
+            className: (0, _client().css)`
                   display: flex;
+                  align-items: center;
                   gap: 0.5em;
 
                   time {
@@ -335,18 +340,18 @@ function JobButton() {
                     font-size: 0.8em;
                   }
                 `
-          }, _react().default.createElement("span", {
-            className: (0, _css().cx)(_style.nodeJobButtonClass, 'inner')
-          }, _react().default.createElement(_antd().Tag, {
+          }, _react2().default.createElement("span", {
+            className: (0, _client().cx)(styles.nodeJobButtonClass, 'inner')
+          }, _react2().default.createElement(_antd().Tag, {
             color: color
-          }, icon)), _react().default.createElement("time", null, (0, _client().str2moment)(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')))
+          }, icon)), _react2().default.createElement("time", null, (0, _client2().str2moment)(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')))
         };
       }),
       onClick: onOpenJob
     }
-  }, _react().default.createElement(InnerJobButton, {
+  }, _react2().default.createElement(InnerJobButton, {
     job: jobs[jobs.length - 1]
-  })) : _react().default.createElement(InnerJobButton, {
+  })) : _react2().default.createElement(InnerJobButton, {
     job: jobs[0],
     onClick: () => setViewJob(jobs[0])
   });
@@ -355,19 +360,21 @@ function NodeDefaultView(props) {
   var _useFlowContext4, _data$title;
   const data = props.data,
     children = props.children;
-  const compile = (0, _client2().useCompile)();
-  const api = (0, _client2().useAPIClient)();
+  const compile = (0, _client().useCompile)();
+  const api = (0, _client().useAPIClient)();
   const _ref4 = (_useFlowContext4 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext4 !== void 0 ? _useFlowContext4 : {},
     workflow = _ref4.workflow,
     refresh = _ref4.refresh;
+  const _useStyles4 = (0, _style.default)(),
+    styles = _useStyles4.styles;
   const instruction = instructions.get(data.type);
   const detailText = workflow.executed ? '{{t("View")}}' : '{{t("Configure")}}';
   const typeTitle = compile(instruction.title);
-  const _useState = (0, _react().useState)((_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : typeTitle),
+  const _useState = (0, _react2().useState)((_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : typeTitle),
     _useState2 = _slicedToArray(_useState, 2),
     editingTitle = _useState2[0],
     setEditingTitle = _useState2[1];
-  const _useState3 = (0, _react().useState)(false),
+  const _useState3 = (0, _react2().useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     editingConfig = _useState4[0],
     setEditingConfig = _useState4[1];
@@ -406,29 +413,29 @@ function NodeDefaultView(props) {
       }
     }
   }
-  return _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeClass, `workflow-node-type-${data.type}`)
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeCardClass, {
+  return _react2().default.createElement("div", {
+    className: (0, _client().cx)(styles.nodeClass, `workflow-node-type-${data.type}`)
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(styles.nodeCardClass, {
       configuring: editingConfig
     }),
     onClick: onOpenDrawer
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeMetaClass, 'workflow-node-meta')
-  }, _react().default.createElement(_antd().Tag, null, typeTitle), _react().default.createElement("span", {
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(styles.nodeMetaClass, 'workflow-node-meta')
+  }, _react2().default.createElement(_antd().Tag, null, typeTitle), _react2().default.createElement("span", {
     className: "workflow-node-id"
-  }, data.id)), _react().default.createElement("div", null, _react().default.createElement(_antd().Input.TextArea, {
+  }, data.id)), _react2().default.createElement("div", null, _react2().default.createElement(_antd().Input.TextArea, {
     disabled: workflow.executed,
     value: editingTitle,
     onChange: ev => setEditingTitle(ev.target.value),
     onBlur: ev => onChangeTitle(ev.target.value),
     autoSize: true
-  })), _react().default.createElement(RemoveButton, null), _react().default.createElement(JobButton, null), _react().default.createElement(_client2().ActionContextProvider, {
+  })), _react2().default.createElement(RemoveButton, null), _react2().default.createElement(JobButton, null), _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible: editingConfig,
       setVisible: setEditingConfig
     }
-  }, _react().default.createElement(_client2().SchemaComponent, {
+  }, _react2().default.createElement(_client().SchemaComponent, {
     scope: instruction.scope,
     components: instruction.components,
     schema: {
@@ -455,7 +462,7 @@ function NodeDefaultView(props) {
             useValues(options) {
               const _useNodeContext2 = useNodeContext(),
                 config = _useNodeContext2.config;
-              return (0, _client2().useRequest)(() => {
+              return (0, _client().useRequest)(() => {
                 return Promise.resolve({
                   data: config
                 });
@@ -470,7 +477,7 @@ function NodeDefaultView(props) {
                 type: 'warning',
                 showIcon: true,
                 message: `{{t("Node in executed workflow cannot be modified", { ns: "${_locale.NAMESPACE}" })}}`,
-                className: (0, _css().css)`
+                className: (0, _client().css)`
                                 width: 100%;
                                 font-size: 85%;
                                 margin-bottom: 2em;
@@ -490,25 +497,11 @@ function NodeDefaultView(props) {
               type: 'void',
               'x-component': 'fieldset',
               'x-component-props': {
-                className: (0, _css().css)`
+                className: (0, _client().css)`
                           .ant-select,
                           .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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWorkflowVariableOptions, VariableOption } from '../variable';
+import { VariableOption, useWorkflowVariableOptions } from '../variable';
 declare const _default: {
     title: string;
     type: string;

package/lib/client/nodes/loop.js

@@ -4,13 +4,6 @@ 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() {
@@ -18,40 +11,47 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
     return data;
   };
   return data;
 }
 var _ = require(".");
+var _Branch = require("../Branch");
 var _FlowContext = require("../FlowContext");
 var _locale = require("../locale");
+var _style = _interopRequireDefault(require("../style"));
 var _variable = require("../variable");
-var _style = require("../style");
-var _Branch = require("../Branch");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 findOption(options, paths) {
-  let current = options;
+  let opts = options;
+  let option = null;
   for (let i = 0; i < paths.length; i++) {
     const path = paths[i];
-    const option = current.find(item => item.value === path);
-    if (!option) {
-      return null;
+    const current = opts.find(item => item.value === path);
+    if (!current) {
+      break;
     }
-    if (option.children) {
-      current = option.children;
+    option = current;
+    if (current.children) {
+      opts = current.children;
     }
   }
-  return current;
+  return option;
 }
 var _default = {
   title: `{{t("Loop", { ns: "${_locale.NAMESPACE}" })}}`,
@@ -69,7 +69,7 @@ var _default = {
         scope: '{{useWorkflowVariableOptions()}}',
         changeOnSelect: true,
         useTypedConstant: ['string', 'number', 'null'],
-        className: (0, _css().css)`
+        className: (0, _client().css)`
           width: 100%;
 
           .variable {
@@ -91,13 +91,15 @@ var _default = {
     var _entry$branchIndex;
     const _useFlowContext = (0, _FlowContext.useFlowContext)(),
       nodes = _useFlowContext.nodes;
+    const _useStyles = (0, _style.default)(),
+      styles = _useStyles.styles;
     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)
+      className: styles.nodeSubtreeClass
     }, _react().default.createElement("div", {
-      className: (0, _css().cx)(_style.branchBlockClass, (0, _css().css)`
+      className: (0, _client().cx)(styles.branchBlockClass, (0, _client().css)`
                 padding-left: 20em;
               `)
     }, _react().default.createElement(_Branch.Branch, {
@@ -105,26 +107,13 @@ var _default = {
       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)
+      className: styles.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)`
+      className: (0, _client().cx)(styles.addButtonClass, styles.loopLineClass)
+    }, _react().default.createElement(_icons().ArrowUpOutlined, null)))), _react().default.createElement("div", {
+      className: (0, _client().css)`
               position: relative;
               height: 2em;
             `
@@ -140,39 +129,42 @@ var _default = {
     if (!target) {
       return null;
     }
+    const _options$fieldNames = options.fieldNames,
+      fieldNames = _options$fieldNames === void 0 ? _variable.defaultFieldNames : _options$fieldNames;
     // 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 = {
+    let targetOption = {
       key: 'item',
-      value: 'item',
-      label: (0, _locale.lang)('Loop target')
+      [fieldNames.value]: 'item',
+      [fieldNames.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;
+        const opts = item.useOptions(options).filter(Boolean);
         return {
-          label: compile(item.title),
-          value: item.value,
+          [fieldNames.label]: compile(item.title),
+          [fieldNames.value]: item.value,
           key: item.value,
-          children: compile(opts),
+          [fieldNames.children]: opts,
           disabled: opts && !opts.length
         };
       });
-      targetOption.children = findOption(targetOptions, paths);
+      const found = findOption(targetOptions, paths);
+      targetOption = Object.assign(_objectSpread({}, targetOption), found, targetOption);
     }
     return [targetOption, {
       key: 'index',
-      value: 'index',
-      label: (0, _locale.lang)('Loop index')
+      [fieldNames.value]: 'index',
+      [fieldNames.label]: (0, _locale.lang)('Loop index')
     }, {
       key: 'length',
-      value: 'length',
-      label: (0, _locale.lang)('Loop length')
+      [fieldNames.value]: 'length',
+      [fieldNames.label]: (0, _locale.lang)('Loop length')
     }];
   }
 };

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

@@ -68,11 +68,8 @@ function InternalFormBlockInitializer(_ref) {
               type: 'primary',
               useAction: '{{ useSubmit }}'
             },
-            'x-designer': 'Action.Designer',
-            'x-designer-props': {
-              type: 'record'
-            },
-            'x-action': `${_constants.JOB_STATUS.RESOLVED}`
+            'x-designer': 'ManualActionDesigner',
+            'x-designer-props': {}
           }
         }
       }, schema), {}, {
@@ -84,6 +81,10 @@ function InternalFormBlockInitializer(_ref) {
         _Object$keys2 = _slicedToArray(_Object$keys, 1),
         formKey = _Object$keys2[0];
       result.properties[formKey].properties.actions['x-decorator'] = 'ActionBarProvider';
+      result.properties[formKey].properties.actions['x-component-props'].style = {
+        marginTop: '1.5em',
+        flexWrap: 'wrap'
+      };
       (0, _utils.traverseSchema)(result, node => {
         if (node['x-uid']) {
           delete node['x-uid'];