@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/common/teambition/flow-engine/job.js

@@ -0,0 +1,567 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable no-prototype-builtins */
+import React, { Component } from 'react';
+import { Form, Tag, Loading, Input, Balloon, Switch, Message } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import YAML from 'js-yaml';
+import exceed, { cachedAsyncData } from "../../../../utils/apimap";
+import Template from "./template";
+import Plugins from "./plugins";
+import { isEqual } from 'lodash-es';
+import intl from "../../../../locale";
+import helpLink from "../../../../utils/helplink";
+import { getFeature, isStepAppstackPresetAppname, setLocalStorageCache } from "../../../../utils";
+import "./index.scss";
+import AdvancedSetting from "./AdvancedSetting";
+
+/** @typedef {import('./job.d').JobProps} JobProps */
+/** @typedef {import('./job.d').Job} IJob */
+
+var COMPONENT_CACHE_PREFIX = 'pipeline-component-';
+var FormItem = Form.Item;
+export var getAllSteps = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var config, data, steps, appstacks;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          config = {
+            api: 'Pipeline.step.list',
+            data: {
+              displayScope: window.__isEmbedInAppstack ? 'appstack' : 'flow',
+              capabilities: 'ALL',
+              buildEnvironment: 'vm,container'
+            }
+          };
+          _context.next = 3;
+          return cachedAsyncData(function () {
+            return exceed.fetch(config);
+          }, config);
+        case 3:
+          data = _context.sent;
+          steps = data.object; // hack appstack
+          if (window.__isEmbedInAppstack && window.__appstackAppName) {
+            appstacks = steps.filter(function (v) {
+              return isStepAppstackPresetAppname(v.stepType);
+            });
+            appstacks.forEach(function (aStep) {
+              var def = YAML.load(aStep.def);
+              var appName = def.items.find(function (item) {
+                return item.name === 'APP_NAME';
+              });
+              appName.disableCondition = 'true == true';
+              aStep.def = YAML.dump(def);
+            });
+          }
+          return _context.abrupt("return", steps);
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getAllSteps() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getOutputs = function getOutputs(flow) {
+  if (flow === void 0) {
+    flow = [];
+  }
+  if (!flow.length) return [];
+  return flow.flatMap(function (_ref2) {
+    var _ref2$stages = _ref2.stages,
+      stages = _ref2$stages === void 0 ? [] : _ref2$stages;
+    return stages.flatMap(function (_ref3) {
+      var _ref3$jobs = _ref3.jobs,
+        jobs = _ref3$jobs === void 0 ? [] : _ref3$jobs;
+      return jobs.flatMap(function (_ref4) {
+        var _ref4$output = _ref4.output,
+          output = _ref4$output === void 0 ? [] : _ref4$output;
+        return output;
+      });
+    });
+  });
+};
+
+/**
+ * @extends React.Component<JobProps, any>
+ */
+var Job = /*#__PURE__*/function (_Component) {
+  function Job(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    /*
+     * Template更新逻辑
+     * 一个Template可能返回1~n个出参
+     * 例如执行组件，添加多个步骤，可能返回多个出参
+     */
+    _this.onTemplateChange = function (paramName, v, outputs) {
+      if (outputs === void 0) {
+        outputs = [];
+      }
+      // 当前组件如果不可见，禁止变更
+      if (!_this.props.visible) {
+        return;
+      }
+      var job = _this.state.job;
+
+      // 更新参数value
+      var params = Object.assign({}, job.params);
+      params[paramName] = v;
+
+      // 更新出参
+      var output = (outputs.length ? outputs : []).filter(function (i) {
+        return i["export"];
+      }).map(function (i) {
+        return Object.assign({}, i, {
+          ref: paramName
+        });
+      });
+
+      // todo: overwrite outputs by ref
+      if (paramName === 'steps') {
+        _this.onChange(Object.assign({}, job, {
+          output: output,
+          params: params
+        }));
+      } else {
+        _this.onChange(Object.assign({}, job, {
+          params: params
+        }));
+      }
+    };
+    /**
+     * 流水线名称修改
+     */
+    _this.onNameChange = function (displayName) {
+      var job = Object.assign({}, _this.state.job, {
+        displayName: displayName
+      });
+      _this.onChange(job);
+    };
+    _this.onChange = function (job) {
+      _this.setState({
+        job: job
+      });
+      _this.props.onJobChange(job);
+    };
+    _this.getComponentInfo = function (item) {
+      if (!item || !item.task) {
+        return;
+      }
+      var _item$task$split = item.task.split('@'),
+        _item$task$split$ = _item$task$split[0],
+        sign = _item$task$split$ === void 0 ? '' : _item$task$split$,
+        _item$task$split$2 = _item$task$split[1],
+        version = _item$task$split$2 === void 0 ? '' : _item$task$split$2;
+      if (sign === 'undefined' || version === 'undefined') {
+        return;
+      }
+      _this.setState({
+        loading: true
+      });
+      var api = '';
+      if (window.AK_GLOBAL.useLatestComponentVersion) {
+        api = 'Pipeline.component.getMax';
+      } else {
+        api = 'Pipeline.component.get';
+      }
+      exceed.fetch({
+        api: api,
+        data: {
+          sign: sign,
+          version: version
+        }
+      }).then(function (res) {
+        _this.setState({
+          loading: false
+        });
+        if (res.successful && res.object) {
+          _this.setState({
+            component: res.object,
+            init: true
+          });
+          var content = YAML.load(res.object.content);
+          _this.setState({
+            helpLink: content.helpLink
+          });
+          setLocalStorageCache(COMPONENT_CACHE_PREFIX + "-" + sign + "@" + version, JSON.stringify(res.object), false);
+          _this.checkComponentUpdate();
+        }
+      });
+    };
+    /**
+     * 如果组件使用最新版本 （useLatestComponentVersion），那么填充新增的参数默认值
+     * 解决：appstack 公有云启用了 useLatestComponentVersion，用户编辑时需要填写执行组件新的参数
+     */
+    _this.checkComponentUpdate = function () {
+      if (window.AK_GLOBAL.useLatestComponentVersion) {
+        var _flow$groupIndex, _flow$groupIndex$stag, _flow$groupIndex$stag2;
+        var _this$props = _this.props,
+          flow = _this$props.flow,
+          groupIndex = _this$props.groupIndex,
+          stageIndex = _this$props.stageIndex,
+          jobIndex = _this$props.jobIndex;
+        var job = flow === null || flow === void 0 ? void 0 : (_flow$groupIndex = flow[groupIndex]) === null || _flow$groupIndex === void 0 ? void 0 : (_flow$groupIndex$stag = _flow$groupIndex.stages) === null || _flow$groupIndex$stag === void 0 ? void 0 : (_flow$groupIndex$stag2 = _flow$groupIndex$stag[stageIndex].jobs) === null || _flow$groupIndex$stag2 === void 0 ? void 0 : _flow$groupIndex$stag2[jobIndex];
+        var content = YAML.load(_this.state.component.content);
+        var defaultValuesToAdd = {};
+        content.items.forEach(function (defItem) {
+          var _job$params;
+          if (!((_job$params = job.params) !== null && _job$params !== void 0 && _job$params.hasOwnProperty(defItem.name)) && defItem.value != undefined) {
+            defaultValuesToAdd[defItem.name] = defItem.value;
+          }
+        });
+        if (Object.keys(defaultValuesToAdd).length) {
+          _this.onChange(_extends({}, job, {
+            params: _extends({}, job.params, defaultValuesToAdd)
+          }));
+        }
+      }
+    };
+    _this.renderContent = function (isBatchUpdateTemplate) {
+      var component = _this.state.component;
+      if (!component || !component.content) {
+        return null;
+      }
+      var content = YAML.load(component.content);
+      var _this$props2 = _this.props,
+        field = _this$props2.field,
+        flow = _this$props2.flow,
+        groupIndex = _this$props2.groupIndex,
+        stageIndex = _this$props2.stageIndex,
+        jobIndex = _this$props2.jobIndex,
+        pipelineId = _this$props2.pipelineId,
+        sources = _this$props2.sources,
+        subscribe = _this$props2.subscribe,
+        container = _this$props2.container,
+        trackPage = _this$props2.trackPage,
+        scenarioidentifier = _this$props2.scenarioidentifier,
+        taskGroupMode = _this$props2.taskGroupMode;
+      var job = _this.state.job;
+      var result = content.items.map(function (template) {
+        var paramName = template.name;
+        var paramValue = job.params[template.name];
+        // 兼容老版本组件
+        if (template.name === 'clone_option' && !paramValue) {
+          paramValue = 'all';
+        }
+
+        // 组件自动升级，填充默认参数
+        if (window.AK_GLOBAL.useLatestComponentVersion) {
+          var _job$params2;
+          if (!((_job$params2 = job.params) !== null && _job$params2 !== void 0 && _job$params2.hasOwnProperty(template.name)) && template.value != undefined) {
+            paramValue = template.value;
+          }
+        }
+        return /*#__PURE__*/React.createElement(Template, {
+          key: job.identifier + "-" + paramName,
+          pipelineId: pipelineId,
+          flow: flow,
+          sources: sources,
+          groupIndex: groupIndex,
+          stageIndex: stageIndex,
+          jobIndex: jobIndex,
+          template: template,
+          field: field,
+          identifier: job.identifier,
+          name: paramName,
+          initValue: paramValue,
+          subscribe: subscribe,
+          trackPage: trackPage,
+          popupContainer: container,
+          scenarioidentifier: scenarioidentifier,
+          parentVisible: _this.props.visible,
+          taskGroupMode: taskGroupMode,
+          templateBatchUpdate: job.templateBatchUpdate,
+          isBatchUpdateTemplate: isBatchUpdateTemplate,
+          onChange:
+          /**
+           * 字段内容变更onChange事件，v当前字段的值/ outputs当前字段产生的出参列表
+           * add_steps字段可能产生多个出参
+           */
+          function onChange(v, outputs, removeIdentifiers) {
+            if (outputs === void 0) {
+              outputs = [];
+            }
+            if (removeIdentifiers.length && removeIdentifiers.length > 0) {
+              console.warn('debug', v, outputs, removeIdentifiers);
+            }
+            _this.onTemplateChange(paramName, v, outputs);
+          },
+          updateHelpLink: function updateHelpLink(helpLink) {
+            if (!_this.state.helpLink) {
+              _this.setState({
+                helpLink: helpLink
+              });
+            }
+          }
+        });
+      });
+      return result;
+    };
+    _this.state = {
+      loading: false,
+      init: false,
+      helpLink: null,
+      /** @type {IJob} */
+      job: props.job,
+      prevOutputLen: 0,
+      allSteps: null
+    };
+    return _this;
+  }
+  _inheritsLoose(Job, _Component);
+  var _proto = Job.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+    var job = this.state.job;
+    this.getComponentInfo(job);
+    getAllSteps().then(function (steps) {
+      return _this2.setState({
+        allSteps: steps
+      });
+    });
+  };
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    if (!this.state.init) {
+      // 第一次渲染，确保表单已经被正确加载一次
+      return true;
+    }
+    if (nextProps.sources.length !== this.props.sources.length) {
+      // 当source变化后，确保源码校验
+      return true;
+    }
+
+    // 当前置依赖output发生变化时更新
+    if (this.props.flow.length !== 1 && this.props.groupIndex > 0 && !this.props.visible && this.props.visible === nextProps.visible) {
+      var prevFlow = this.props.flow.slice(0, this.props.groupIndex);
+      var nextFlow = nextProps.flow.slice(0, this.props.groupIndex);
+      var prevOutput = getOutputs(prevFlow);
+      var nextOutput = getOutputs(nextFlow);
+
+      // *监听不到输出长度变化
+      if (prevOutput.length && nextOutput.length && !isEqual(prevOutput, nextOutput)) {
+        console.log('output update');
+        return true;
+      }
+      var len = this.state.prevOutputLen;
+      if (len !== nextOutput.length) {
+        this.setState({
+          prevOutputLen: nextOutput.length
+        });
+        return true;
+      }
+    }
+    if (!this.props.visible && this.props.visible === nextProps.visible) {
+      return false;
+    }
+    return true;
+  };
+  _proto.render = function render() {
+    var _window$YUNXIAO_COMMO,
+      _this3 = this;
+    var loading = this.state.loading;
+    if (loading) return /*#__PURE__*/React.createElement(Loading, {
+      inline: false
+    });
+    var _this$props3 = this.props,
+      field = _this$props3.field,
+      job = _this$props3.job,
+      visible = _this$props3.visible,
+      container = _this$props3.container,
+      taskGroupMode = _this$props3.taskGroupMode,
+      createTask = _this$props3.createTask;
+    var isBatchUpdateTemplate = !taskGroupMode && job.templateBatchUpdate === 'Y';
+    var init = field.init;
+    var fieldName = job.identifier + "_taskname";
+    var description = job.identifier + "_taskdescname";
+    var batchUpdate = job.identifier + "_taskbatchupdate";
+    var jobTitleLabel = intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TaskName',
+      defaultMessage: '任务名称'
+    });
+    if (this.state.helpLink) {
+      jobTitleLabel = /*#__PURE__*/React.createElement("div", null, intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TaskName',
+        defaultMessage: '任务名称'
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "hint-icon block"
+      }, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+        align: "tl",
+        trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "question-line"
+        }),
+        popupProps: {
+          offset: [-3, -8]
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+        className: "engine-help-link",
+        href: this.state.helpLink,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.ViewDocuments',
+        defaultMessage: '查看文档'
+      }))))));
+    }
+    var batchUpdateHeader = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-engine.job.SupportsBatchUpgrade',
+      defaultMessage: '支持批量升级'
+    })), /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+      align: "tr",
+      closable: false,
+      trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "question-line",
+        style: {
+          cursor: 'pointer',
+          color: 'var(--color-text1-7, #8b8b8b)',
+          marginLeft: 6
+        }
+      })
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-engine.job.WhenThisOptionIsTurned',
+      defaultMessage: '打开此选项，流水线编辑在使用该任务模板时无法任意修改本任务相关配置；你可以通过修改任务模板对所有关联的流水线进行批量升级。任务模板一旦创建，此选项不支持二次修改'
+    }), helpLink('task_groups_batch_upgrade') && /*#__PURE__*/React.createElement(React.Fragment, null, "\uFF0C", /*#__PURE__*/React.createElement("a", {
+      href: helpLink('task_groups_batch_upgrade'),
+      className: "engine-help-link",
+      target: '_blank',
+      rel: "noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.flow-engine.job.ViewHelp',
+      defaultMessage: '查看帮助'
+    })))));
+    var isAgentLess = this.state.allSteps && this.state.allSteps.some(function (s) {
+      var _job$params3, _job$params3$steps, _job$params3$steps$, _s$apiVersion;
+      var step = s.stepType === (job === null || job === void 0 ? void 0 : (_job$params3 = job.params) === null || _job$params3 === void 0 ? void 0 : (_job$params3$steps = _job$params3.steps) === null || _job$params3$steps === void 0 ? void 0 : (_job$params3$steps$ = _job$params3$steps[0]) === null || _job$params3$steps$ === void 0 ? void 0 : _job$params3$steps$.stepType);
+      return step && ((_s$apiVersion = s.apiVersion) === null || _s$apiVersion === void 0 ? void 0 : _s$apiVersion.includes('agentless')) || step && s.kind && s.kind === 'ComponentJob';
+    });
+    /** 后期有常开的功能，就可以去掉这个判断 */
+    var _isAllAdvFeatureDisabled = ((_window$YUNXIAO_COMMO = window.YUNXIAO_COMMON) === null || _window$YUNXIAO_COMMO === void 0 ? void 0 : _window$YUNXIAO_COMMO.instanceTypeGrayRegion) !== 'true' && !getFeature('build.timeoutMinutes');
+    var jobEnableAdvancedSettings = job.task.includes('execution-component') && !isAgentLess && !_isAllAdvFeatureDisabled;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flow-engine-job flow-engine-job--" + (visible ? 'visible' : 'hidden')
+    }, /*#__PURE__*/React.createElement(Form, {
+      labelAlign: "top",
+      field: field
+    }, /*#__PURE__*/React.createElement(FormItem, {
+      label: jobTitleLabel,
+      validateState: field.getError(fieldName) ? 'error' : '',
+      help: field.getError(fieldName) ? field.getError(fieldName).join(',') : ''
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      disabled: isBatchUpdateTemplate
+    }, init(fieldName, {
+      initValue: job.displayName,
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TheTaskNameMustBe',
+          defaultMessage: '任务名称不能为空'
+        })
+      }],
+      props: {
+        onChange: function onChange(displayName) {
+          _this3.onNameChange(displayName);
+        }
+      }
+    }))), isBatchUpdateTemplate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Message, {
+      shape: "inline",
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.ThisTaskSupportsBatchUpgrade',
+        defaultMessage: '该任务支持批量升级，流水线在使用任务时无法任意更改任务配置'
+      }),
+      type: "help",
+      style: {
+        marginTop: 8
+      }
+    }), ' ')), taskGroupMode && /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TaskDescription',
+        defaultMessage: '任务描述'
+      }),
+      validateState: field.getError(description) ? 'error' : '',
+      help: field.getError(description) ? field.getError(description).join(',') : ''
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.EnterATaskDescription',
+        defaultMessage: '请输入任务描述'
+      })
+    }, init(description, {
+      initValue: job.description,
+      rules: [{
+        required: true,
+        message: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TheTaskDescriptionNameMust',
+          defaultMessage: '任务描述名称不能为空'
+        })
+      }],
+      props: {
+        onChange: function onChange(val) {
+          _this3.onChange(Object.assign({}, job, {
+            description: val
+          }));
+        }
+      }
+    })))), taskGroupMode && /*#__PURE__*/React.createElement(FormItem, {
+      label: batchUpdateHeader
+    }, /*#__PURE__*/React.createElement(Switch, _extends({
+      checked: job.batchUpdate === 'Y'
+    }, init(batchUpdate, {
+      props: {
+        onChange: function onChange(val) {
+          _this3.onChange(Object.assign({}, job, {
+            batchUpdate: val ? 'Y' : 'N'
+          }));
+        }
+      }
+    }), {
+      disabled: !createTask
+    }))), this.renderContent(isBatchUpdateTemplate), jobEnableAdvancedSettings && /*#__PURE__*/React.createElement(AdvancedSetting, {
+      field: field,
+      jobParams: job.params,
+      jobIdentifier: job.identifier,
+      onChange: function onChange(updatedPart) {
+        _this3.onChange(_extends({}, job, {
+          params: _extends({}, job.params, updatedPart)
+        }));
+      }
+    }), getFeature('edit.task.plugins') && /*#__PURE__*/React.createElement(Plugins, {
+      field: field,
+      jobPlugins: job.plugins,
+      jobIdentifier: job.identifier,
+      container: container,
+      isBatchUpdateTemplate: isBatchUpdateTemplate,
+      onChange: function onChange(plugins) {
+        job.plugins = plugins;
+        _this3.onChange(job);
+      }
+    }), (job.output || []).length > 0 && /*#__PURE__*/React.createElement(FormItem, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.flow-engine.job.TaskOutput',
+        defaultMessage: '任务输出'
+      })
+    }, (job.output || []).map(function (o) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: o.name,
+        style: {
+          marginBottom: 4
+        }
+      }, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+        align: "t",
+        trigger: /*#__PURE__*/React.createElement(Tag, {
+          type: "primary"
+        }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "attachment-line"
+        }), o.displayName),
+        popupProps: {
+          offset: [-3, -8]
+        }
+      }, o.displayName));
+    }))));
+  };
+  return Job;
+}(Component);
+export default Job;

package/es/components/common/teambition/flow-engine/jobInitializer.d.ts

@@ -0,0 +1,15 @@
+export declare const transform: (type: any) => (item: any) => any;
+declare const _default: (component: any, componentParams?: {}, componentOutput?: any[]) => {
+    displayName: any;
+    task: string;
+    identifier: any;
+    templateType: any;
+    templateSign: any;
+    templateBatchUpdate: any;
+    extraInfo: any;
+    params: any;
+    plugins: any[];
+    output: any[];
+    freeInTaskGroupModeFields: any[];
+};
+export default _default;

package/es/components/common/teambition/flow-engine/jobInitializer.js

@@ -0,0 +1,64 @@
+/**
+ * 字段初始化方法
+ * 例如：
+ * add_steps的默认输出化值应该为[]
+ * checkbox的初始化值应该为 bool
+ */
+import YAML from 'js-yaml';
+var simpleFieldInitilalizer = function simpleFieldInitilalizer(item) {
+  return item.value || '';
+};
+var arrayInitilalizer = function arrayInitilalizer() {
+  return [];
+};
+var booleanInitilalizer = function booleanInitilalizer(item) {
+  if (item.value) {
+    return item.value === true;
+  }
+  return false;
+};
+export var transform = function transform(type) {
+  switch (type.toLowerCase()) {
+    case 'add_steps':
+      return arrayInitilalizer;
+    case 'checkbox':
+      return booleanInitilalizer;
+    default:
+      return simpleFieldInitilalizer;
+  }
+};
+export default (function (component, componentParams, componentOutput) {
+  if (componentParams === void 0) {
+    componentParams = {};
+  }
+  if (componentOutput === void 0) {
+    componentOutput = [];
+  }
+  var content = YAML.load(component.content);
+  var params = Object.assign(componentParams);
+  if (content.context) {
+    content.context.forEach(function (contextParam) {
+      params[contextParam] = "${INPUTS." + contextParam + "}";
+    });
+  }
+  var freeInTaskGroupModeFields = [];
+  (content.items || []).forEach(function (item) {
+    params[item.name] = typeof componentParams[item.name] !== 'undefined' ? componentParams[item.name] : transform(item.type)(item);
+    if (item.freeInTaskGroupMode) {
+      freeInTaskGroupModeFields.push(item.name);
+    }
+  });
+  return {
+    displayName: component.name,
+    task: component.sign + "@" + component.version,
+    identifier: component.identifier || "10_" + new Date().getTime(),
+    templateType: component.templateType || 'task',
+    templateSign: component.templateSign || '',
+    templateBatchUpdate: component.batchUpdate || 'N',
+    extraInfo: component.extraInfo || '',
+    params: params,
+    plugins: [],
+    output: componentOutput,
+    freeInTaskGroupModeFields: freeInTaskGroupModeFields
+  };
+});

package/es/components/common/teambition/flow-engine/plugins.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const Plugins: ({ field, jobIdentifier, jobPlugins, onChange, container, isBatchUpdateTemplate }: {
+    field: any;
+    jobIdentifier: any;
+    jobPlugins?: any[];
+    onChange?: () => void;
+    container: any;
+    isBatchUpdateTemplate: any;
+}) => JSX.Element;
+export default Plugins;