@nocobase/plugin-workflow 0.9.3-alpha.1 → 0.9.4-alpha.1

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

@@ -8,11 +8,6 @@ interface Calculator {
     group: string;
 }
 export declare const calculators: Registry<Calculator>;
-export declare function Calculation({ calculator, operands, onChange }: {
-    calculator: any;
-    operands?: any[];
-    onChange: any;
-}): JSX.Element;
 declare function CalculationConfig({ value, onChange }: {
     value: any;
     onChange: any;
@@ -21,6 +16,7 @@ declare const _default: {
     title: string;
     type: string;
     group: string;
+    description: string;
     fieldset: {
         rejectOnFalse: {
             type: string;
@@ -96,7 +92,7 @@ declare const _default: {
             rejectOnFalse: boolean;
         };
     }[];
-    render(data: any): JSX.Element;
+    render: (data: any) => JSX.Element;
     scope: {
         renderEngineReference: (key: string) => JSX.Element;
         useWorkflowVariableOptions: typeof useWorkflowVariableOptions;

package/lib/client/nodes/condition.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Calculation = Calculation;
 exports.default = exports.calculators = void 0;
 function _icons() {
   const data = require("@ant-design/icons");
@@ -211,7 +210,8 @@ function Calculation({
       operands,
       calculator: v
     }),
-    placeholder: (0, _locale.lang)('Calculator')
+    placeholder: (0, _locale.lang)('Calculator'),
+    dropdownMatchSelectWidth: false
   }, calculatorGroups.filter(group => Boolean(getGroupCalculators(group.value).length)).map(group => _react().default.createElement(_antd().Select.OptGroup, {
     key: group.value,
     label: compile(group.title)
@@ -380,6 +380,7 @@ var _default = {
   title: `{{t("Condition", { ns: "${_locale.NAMESPACE}" })}}`,
   type: 'condition',
   group: 'control',
+  description: `{{t('Based on boolean result of the calculation to determine whether to "continue" or "exit" the process, or continue on different branches of "yes" and "no".', { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     rejectOnFalse: {
       type: 'boolean',
@@ -477,7 +478,7 @@ var _default = {
       rejectOnFalse: false
     }
   }],
-  render(data) {
+  render: function Renderer(data) {
     const _useTranslation2 = (0, _reactI18next().useTranslation)(),
       t = _useTranslation2.t;
     const _useFlowContext = (0, _FlowContext.useFlowContext)(),

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

@@ -4,17 +4,17 @@ declare const _default: {
     title: string;
     type: string;
     group: string;
+    description: string;
     fieldset: {
         collection: {
             type: string;
             title: string;
             required: boolean;
-            'x-reactions': string[];
+            'x-reactions': any[];
             'x-decorator': string;
             'x-component': string;
             'x-component-props': {
                 dropdownMatchSelectWidth: boolean;
-                placeholder: string;
             };
         };
         params: {
@@ -62,7 +62,9 @@ declare const _default: {
         CollectionFieldset: import("react").MemoExoticComponent<import("react").FunctionComponent<Pick<any, string | number | symbol>>>;
         FieldsSelect: import("react").MemoExoticComponent<import("react").FunctionComponent<Pick<any, string | number | symbol>>>;
     };
-    getOptions(config: any, types: any): import("../variable").VariableOption[];
+    useVariables({ config }: {
+        config: any;
+    }, options: any): import("../variable").VariableOption[];
     useInitializers(node: any): SchemaInitializerItemOptions | null;
     initializers: {
         CollectionFieldInitializers: typeof CollectionFieldInitializers;

package/lib/client/nodes/create.js

@@ -19,10 +19,16 @@ var _CollectionFieldInitializers = require("../components/CollectionFieldInitial
 var _variable = require("../variable");
 var _FieldsSelect = require("../components/FieldsSelect");
 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); }
 var _default = {
   title: `{{t("Create record", { ns: "${_locale.NAMESPACE}" })}}`,
   type: 'create',
   group: 'collection',
+  description: `{{t("Add new record to a collection. You can use variables from upstream nodes to assign values to fields.", { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     collection: _collection.collection,
     // multiple: {
@@ -51,13 +57,16 @@ var _default = {
     CollectionFieldset: _CollectionFieldset.default,
     FieldsSelect: _FieldsSelect.FieldsSelect
   },
-  getOptions(config, types) {
-    var _config$params, _config$params$append;
-    return (0, _variable.useCollectionFieldOptions)({
-      collection: config.collection,
-      types,
-      depth: ((_config$params = config.params) === null || _config$params === void 0 ? void 0 : (_config$params$append = _config$params.appends) === null || _config$params$append === void 0 ? void 0 : _config$params$append.length) ? 1 : 0
-    });
+  useVariables({
+    config
+  }, options) {
+    var _options$depth, _config$params, _config$params$append;
+    const result = (0, _variable.useCollectionFieldOptions)(_objectSpread(_objectSpread({
+      collection: config === null || config === void 0 ? void 0 : config.collection
+    }, options), {}, {
+      depth: ((_options$depth = options === null || options === void 0 ? void 0 : options.depth) !== null && _options$depth !== void 0 ? _options$depth : config === null || config === void 0 ? void 0 : (_config$params = config.params) === null || _config$params === void 0 ? void 0 : (_config$params$append = _config$params.appends) === null || _config$params$append === void 0 ? void 0 : _config$params$append.length) ? 1 : 0
+    }));
+    return (result === null || result === void 0 ? void 0 : result.length) ? result : null;
   },
   useInitializers(node) {
     var _node$title;

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

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

package/lib/client/nodes/delay.js

@@ -12,6 +12,7 @@ var _default = {
   title: `{{t("Delay", { ns: "${_locale.NAMESPACE}" })}}`,
   type: 'delay',
   group: 'control',
+  description: `{{t("Delay a period of time and then continue or exit the process. Can be used to set wait or timeout times in parallel branches.", { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     duration: {
       type: 'number',

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

@@ -4,17 +4,17 @@ declare const _default: {
     title: string;
     type: string;
     group: string;
+    description: string;
     fieldset: {
         collection: {
             type: string;
             title: string;
             required: boolean;
-            'x-reactions': string[];
+            'x-reactions': any[];
             'x-decorator': string;
             'x-component': string;
             'x-component-props': {
                 dropdownMatchSelectWidth: boolean;
-                placeholder: string;
             };
         };
         params: {

package/lib/client/nodes/destroy.js

@@ -24,6 +24,7 @@ var _default = {
   title: '{{t("Delete record")}}',
   type: 'destroy',
   group: 'collection',
+  description: `{{t("Delete records of a collection. Could use variables in workflow context as filter. All records match the filter will be deleted.", { ns: "${_locale.NAMESPACE}" })}}`,
   fieldset: {
     collection: _collection.collection,
     params: {

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

@@ -7,6 +7,7 @@ export interface Instruction {
     title: string;
     type: string;
     group: string;
+    description?: string;
     options?: {
         label: string;
         value: any;
@@ -22,9 +23,10 @@ export interface Instruction {
     components?: {
         [key: string]: any;
     };
-    render?(props: any): React.ReactNode;
+    render?(props: any): JSX.Element;
     endding?: boolean;
-    getOptions?(config: any, types?: any): VariableOptions;
+    useVariables?(node: any, options?: any): VariableOptions;
+    useScopeVariables?(node: any, options?: any): VariableOptions;
     useInitializers?(node: any): SchemaInitializerItemOptions | null;
     initializers?: {
         [key: string]: any;
@@ -34,6 +36,7 @@ export declare const instructions: Registry<Instruction>;
 export declare const NodeContext: React.Context<any>;
 export declare function useNodeContext(): any;
 export declare function useAvailableUpstreams(node: any): any[];
+export declare function useUpstreamScopes(node: any): any[];
 export declare function Node({ data }: {
     data: any;
 }): JSX.Element;

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() {
@@ -73,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)();
@@ -155,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
 }) {
@@ -255,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) {
@@ -363,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);
@@ -404,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();
@@ -453,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': {
@@ -483,6 +474,14 @@ function NodeDefaultView(props) {
                               `
               }
             }
+          } : instruction.description ? {
+            description: {
+              type: 'void',
+              'x-component': _NodeDescription.NodeDescription,
+              'x-component-props': {
+                instruction
+              }
+            }
           } : {}), {}, {
             fieldset: {
               type: 'void',
@@ -499,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;