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

package/es/components/common/teambition/flow-engine/fields/steps.js

@@ -0,0 +1,719 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["field", "identifier"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable react/prop-types */
+/* eslint-disable import/no-cycle */
+/* eslint-disable react/no-multi-comp */
+import React, { Component } from 'react';
+import { Button, Dropdown, Menu, Balloon, Dialog } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { isEqual, omit, groupBy } from 'lodash-es';
+import YAML from 'js-yaml';
+import track from "../../../../../utils/track";
+import { intervalEnterTime, i18nStepName, i18nStepCategory, i18n, getFeature } from "../../../../../utils";
+import helpLink from "../../../../../utils/helplink";
+import Step from "./step";
+import fetch from "../fetch";
+import { transform as fieldInitlizer } from "../../flow-engine/jobInitializer";
+import IconFont from "../../icon-font";
+import Image from "../../icon-image";
+import { sourceIconMap } from "../../pipeline-flow-orchestrator/utils";
+import intl from "../../../../../locale";
+import { debounce } from 'lodash';
+import { ArtifactSourceTypes } from "../../pipeline-source/artifact-source";
+import { getAllSteps } from "../job";
+// import {freeze} from 'immer'
+
+/** @typedef {import('./steps.d').ExecCptStep} ExecCptStep */
+/** @typedef {import('./steps.d').def} def */
+/** @typedef {import('../job.d').Step} Step */
+
+var CUSTOM_STEP_DOCUMENT = helpLink('custom_step');
+
+// 潜在的对象修改可能导致问题...
+
+// const YamlLoadWithMemo = (() => {
+//   const isPrepub = window.origin === 'https://pre-flow.aliyun.com';
+//   if (isPrepub) {
+//     window.addEventListener('error', () => {
+//       alert('error');
+//     })
+//   }
+//   const memo = new Map();
+//   return (yamlStr) => {
+//     if (isPrepub) {
+//       const cached = memo.get(yamlStr)
+//       if (cached) {
+//         return cached;
+//       }
+//       const obj = YAML.load(yamlStr);
+//       freeze(obj, true);
+//       memo.set(yamlStr, obj)
+//       return obj
+//     }
+//     return YAML.load(yamlStr)
+//   }
+// })()
+
+var YamlLoadWithMemo = function YamlLoadWithMemo(s) {
+  return YAML.load(s);
+};
+var renderData = function renderData(/** @type {Step[]} */
+value, steps, sources, field, identifier, currentSteps) {
+  if (value === void 0) {
+    value = [];
+  }
+  if (steps === void 0) {
+    steps = [];
+  }
+  if (sources === void 0) {
+    sources = [];
+  }
+  return value.map(function (item) {
+    var step = steps.find(function (s) {
+      return s.stepType === item.stepType;
+    });
+    // 对 v1 v2 步骤切换的校验
+    var invalidStepVersion = false;
+    // FIXME: 硬编码「活动校验」（yunxiao-ecs-demo）步骤跳过失效校验。因云栖大会时，step v2还没上线，这个会报步骤已失效
+    // if (currentSteps.length) {
+    if (currentSteps.length && item.stepType !== 'yunxiao-ecs-demo') {
+      invalidStepVersion = !currentSteps.find(function (s) {
+        return s.stepType === item.stepType;
+      });
+    }
+    if (step) {
+      var _sources, _sources$filter;
+      /** @type {def} */
+      var def = YamlLoadWithMemo(step.def);
+      var items = def.items;
+      var apiVersion = def.apiVersion;
+      // ACR 源不要工作目录, filter 去掉
+      var sourcesForThisItem = (_sources = sources) === null || _sources === void 0 ? void 0 : (_sources$filter = _sources.filter) === null || _sources$filter === void 0 ? void 0 : _sources$filter.call(_sources, function (_ref) {
+        var type = _ref.type;
+        return type !== ArtifactSourceTypes.acr;
+      });
+      var cloneOp = field.getValue(identifier + "__clone_option");
+      var selectedSources = field.getValue(identifier + "__selected_sources") || [];
+      var visibile = false;
+      var dataSource = [];
+      if (item.name === intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.BranchManager',
+        defaultMessage: '分支管理器'
+      })) {
+        sourcesForThisItem = sources.map(function (source) {
+          return _extends({}, source, {
+            disabled: !source.data.isBranchMode
+          });
+        });
+      }
+      if (cloneOp === 'selected' && selectedSources.length >= 2) {
+        visibile = true;
+        dataSource = sourcesForThisItem.filter(function (s) {
+          return selectedSources.includes(s.sign);
+        });
+      }
+      if ((cloneOp === 'all' || !cloneOp) && sourcesForThisItem.length >= 2) {
+        visibile = true;
+        dataSource = sourcesForThisItem;
+      }
+      var sourceSelect = {
+        label: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.steps.WorkingDirectory',
+          defaultMessage: '工作目录'
+        }),
+        name: 'source',
+        type: 'select',
+        hidden: !visibile,
+        description: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.steps.SelectAWorkspaceTips',
+          defaultMessage: '您配置流水线源的源文件将会被下载至工作目录下，当流水线配置多个源的情况下，可以选择具体的工作目录，流水线会自动 cd 进入工作目录执行任务'
+        }),
+        placeholder: intl.get({
+          id: 'rdc-tb-cd-assets.flow-engine.fields.steps.SelectAWorkspace',
+          defaultMessage: '请选择工作目录'
+        }),
+        datasource: dataSource.map(function (source) {
+          var type = source.type;
+          return {
+            label: !cloneOp ? decodeURI(source.label || source.name) + "/" + source.data.branch : source.name,
+            value: source.sign,
+            disabled: source.disabled,
+            icon: /*#__PURE__*/React.createElement(Image, {
+              type: sourceIconMap[type] ? sourceIconMap[type] : sourceIconMap.aliyunGit
+            })
+          };
+        }),
+        rules: [{
+          validator: function validator(rule, v, callback) {
+            if (!visibile) {
+              callback();
+              return;
+            }
+            if (!v) {
+              callback(intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.fields.steps.SelectAWorkspace',
+                defaultMessage: '请选择工作目录'
+              }));
+              return;
+            }
+            var find = dataSource.find(function (s) {
+              return s.sign === v;
+            });
+            if (!find) {
+              callback(intl.get({
+                id: 'rdc-tb-cd-assets.flow-engine.fields.steps.TheConfigurationOfTheCode',
+                defaultMessage: '代码库配置已变更，请修改'
+              }));
+            }
+            callback();
+          }
+        }]
+      };
+      return Object.assign({}, item, {
+        def: Object.assign({}, def, {
+          apiVersion: apiVersion,
+          items: [sourceSelect].concat(items)
+        }),
+        invalidStepVersion: invalidStepVersion
+      });
+    }
+    console.warn(item.stepType, 'not found in steps', steps);
+    return Object.assign({}, item, {
+      def: {
+        items: []
+      },
+      invalidStepVersion: invalidStepVersion
+    });
+  });
+};
+var getOutput = function getOutput(s) {
+  if (s.def) {
+    var outputs = (s.def.dynamicOutputs || []).map(function (output) {
+      var dynamicOutputName = s.stepIdentifier + "." + output.value;
+      var _output$type = output.type,
+        type = _output$type === void 0 ? 'user' : _output$type,
+        _output$description = output.description,
+        description = _output$description === void 0 ? '' : _output$description;
+      var o = {
+        name: dynamicOutputName,
+        displayName: s.name + "." + i18n(output, 'label'),
+        type: type,
+        identifier: s.stepIdentifier + "__" + output.value,
+        description: description,
+        "export": true
+      };
+      return o;
+    });
+    var outputsFromItem = s.def.items.filter(function (o) {
+      return !o.hidden;
+    }).map(function (i) {
+      var dynamicOutputName = s.stepIdentifier + ".dynamic_output." + s[i.name];
+      var _ref2 = i.export_to_output || {},
+        _ref2$type = _ref2.type,
+        type = _ref2$type === void 0 ? 'user' : _ref2$type,
+        _ref2$description = _ref2.description,
+        description = _ref2$description === void 0 ? '' : _ref2$description;
+      var o = {
+        name: dynamicOutputName,
+        displayName: i18n(i, 'label') + "." + s[i.name],
+        type: type,
+        identifier: s.stepIdentifier + "__" + i.name,
+        description: description,
+        "export": !!i.export_to_output
+      };
+      return o;
+    });
+    // if (outputs.length !== 0) {
+    //   return outputs;
+    // }
+    return outputsFromItem.concat(outputs);
+  }
+  return [];
+};
+var getOutputs = function getOutputs(value) {
+  return value.flatMap(function (s) {
+    return getOutput(s);
+  });
+};
+var getListStyle = function getListStyle() {
+  return {};
+};
+var reorder = function reorder(list, startIndex, endIndex) {
+  var result = Array.from(list);
+  var _result$splice = result.splice(startIndex, 1),
+    removed = _result$splice[0];
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+var filterStepsByVisibleKey = function filterStepsByVisibleKey(steps) {
+  if (steps === void 0) {
+    steps = [];
+  }
+  return steps.filter(function (_ref3) {
+    var visible = _ref3.visible;
+    return visible;
+  });
+};
+var Tooltip = Balloon.Tooltip;
+var Steps = /*#__PURE__*/function (_Component) {
+  function Steps(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    // const cacheSteps = JSON.parse(window.localStorage.getItem(STEPS_CACHE_KEY) || '[]');
+    _this.onChange = function (value, outputs, removeIdentifier) {
+      _this.setState({
+        value: value
+      });
+      var pure = function pure(v) {
+        return v.map(function (i) {
+          return omit(i, 'def');
+        });
+      };
+      _this.props.onChange(pure(value), outputs, removeIdentifier);
+    };
+    _this.onStepChange = function (step, index) {
+      var _this$state$value = _this.state.value,
+        value = _this$state$value === void 0 ? [] : _this$state$value;
+      value[index] = omit(step, 'isOpen');
+      var outputs = getOutputs(value);
+      _this.onChange(value, outputs);
+    };
+    _this.onDragEnd = function (result) {
+      if (!result.destination) {
+        return;
+      }
+      var _this$state$value2 = _this.state.value,
+        value = _this$state$value2 === void 0 ? [] : _this$state$value2;
+      var reorderValue = reorder(value, result.source.index, result.destination.index);
+      var outputs = getOutputs(reorderValue);
+      _this.onChange(reorderValue, outputs);
+    };
+    _this.onStepAdd = function (/** @type {ExecCptStep} */step) {
+      track({
+        action: 'add step with type',
+        page: _this.props.trackPage || 'edit page',
+        stepType: step.stepType,
+        daysinceenterflow: intervalEnterTime()
+      });
+      var _this$state$value3 = _this.state.value,
+        value = _this$state$value3 === void 0 ? [] : _this$state$value3;
+      var parent = _this.props.identifier;
+      /** @type {def} */
+      var def = YamlLoadWithMemo(step.def);
+      var obj = {
+        name: i18nStepName(def),
+        stepType: step.stepType,
+        stepIdentifier: parent + "__10_" + new Date().getTime(),
+        isOpen: true,
+        freeInTaskGroupModeFields: []
+      };
+
+      // 默认参数
+      def.items.forEach(function (item) {
+        obj[item.name] = fieldInitlizer(item.type)(item);
+        if (item.freeInTaskGroupMode) {
+          obj.freeInTaskGroupModeFields.push(item.name);
+        }
+      });
+      obj.def = def;
+      // 添加任务时关闭其他展开项
+
+      /** @type {Step[]} */
+      var newValue = value.map(function (item) {
+        return _extends({}, item, {
+          isOpen: false
+        });
+      });
+      newValue.push(obj);
+      var outputs = getOutputs(newValue);
+      _this.onChange(newValue, outputs);
+    };
+    _this.onStepsRemove = function (indexs) {
+      var _this$state$value4 = _this.state.value,
+        value = _this$state$value4 === void 0 ? [] : _this$state$value4;
+      var identifiers = [];
+      var steps = value.filter(function (v, i) {
+        return !indexs.includes(i);
+      });
+      var outputs = getOutputs(steps);
+      _this.onChange(steps, outputs, identifiers);
+    };
+    // 参考 state.steps
+    _this.getAllSteps = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var steps, _this$props, sources, field, identifier, value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return getAllSteps();
+          case 2:
+            steps = _context.sent;
+            _this$props = _this.props, sources = _this$props.sources, field = _this$props.field, identifier = _this$props.identifier;
+            value = renderData(_this.state.value || [], steps, sources, field, identifier, _this.state.currentSteps);
+            _this.setState({
+              steps: steps,
+              value: value
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    // 参考 state.currentSteps
+    _this.getSteps = function () {
+      var api = _this.props.content.add_button.datasource.api;
+      var matchResult = api.match(/\$\{[^}]*\}/g);
+      if (matchResult) {
+        matchResult.forEach(function (matched) {
+          var name = matched.replace(/\$\{([^}]*)}/, '$1');
+          var value = _this.props.field.getValue(_this.props.identifier + "__" + name);
+          api = api.replace(matched, value !== null && value !== void 0 ? value : '');
+        });
+      }
+      return fetch({
+        url: api,
+        useCachedAsyncData: true
+      });
+    };
+    _this.getStepList = function () {
+      var reqFlag = Date.now();
+      _this.reqFlag = reqFlag;
+      _this.getSteps().then(function (res) {
+        if (reqFlag !== _this.reqFlag) {
+          // 多个并行请求返回顺序和请求顺序不一致可能有问题，只保留最新一次的来 setState.
+          console.info('stepList: outdated result ignored');
+          return;
+        }
+        if (res.successful && res.object) {
+          _this.setState({
+            currentSteps: filterStepsByVisibleKey(res.object)
+          });
+        }
+        _this.setState({
+          loading: false
+        });
+      });
+    };
+    var cacheSteps = [];
+    var currentSteps = filterStepsByVisibleKey(cacheSteps);
+    var _props$value = props.value,
+      _value = _props$value === void 0 ? [] : _props$value,
+      _props$sources = props.sources,
+      _sources2 = _props$sources === void 0 ? [] : _props$sources,
+      _field = props.field,
+      _identifier = props.identifier;
+    var formatData = _value.map ? renderData(_value, cacheSteps, _sources2, _field, _identifier, currentSteps) : [];
+    _this.state = {
+      loading: true,
+      /** 所有步骤信息 */
+      steps: cacheSteps,
+      /** 可以添加的步骤，只能是v1 v2其中一种, 由后端根据参数返回 */
+      currentSteps: currentSteps,
+      value: formatData
+    };
+    return _this;
+  }
+  _inheritsLoose(Steps, _Component);
+  var _proto = Steps.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+    this.matchAndSubscribe();
+    this.getStepList();
+    this.getAllSteps();
+
+    // TODO 有个步骤不显示的 bug，这里先处理下
+    setTimeout(function () {
+      _this2.forceUpdate();
+    }, 1000);
+  };
+  _proto.matchAndSubscribe = function matchAndSubscribe() {
+    var _this3 = this;
+    var api = this.props.content.add_button.datasource.api;
+    var _this$props2 = this.props,
+      identifier = _this$props2.identifier,
+      fieldName = _this$props2.fieldName,
+      field = _this$props2.field;
+    var onChangeDebounced = debounce(function () {
+      var _field$validate;
+      _this3.getStepList();
+      (_field$validate = field.validate) === null || _field$validate === void 0 ? void 0 : _field$validate.call(field);
+    }, 200);
+    var matchResult = api.match(/\$\{[^}]*\}/g);
+    if (matchResult) {
+      matchResult.forEach(function (matched) {
+        var name = matched.replace(/\$\{([^}]*)}/, '$1');
+        _this3.props.subscribe(identifier + "__" + name, fieldName, function () {
+          window.setTimeout(function () {
+            // 多个参数变化
+            onChangeDebounced();
+          }, 100);
+        });
+      });
+    }
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  ;
+  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var sort = function sort(v) {
+      return (v.map ? v : []).map(function (i) {
+        return i.sign;
+      }).sort();
+    };
+    var current = sort(this.props.sources);
+    var next = sort(nextProps.sources);
+    var _this$state = this.state,
+      value = _this$state.value,
+      steps = _this$state.steps,
+      currentSteps = _this$state.currentSteps;
+    var _this$props3 = this.props,
+      field = _this$props3.field,
+      identifier = _this$props3.identifier;
+    var sources = nextProps.sources;
+    var formatData = value.map ? renderData(value, steps, sources, field, identifier, currentSteps) : [];
+    if (!isEqual(current, next)) {
+      console.warn('sources update.', current, next);
+      this.setState({
+        value: formatData
+      });
+    }
+  };
+  // getStepsFromRemoteOrCache = () => {
+  //   let useCache = false;
+  //   const stepsCache = window.localStorage.getItem(STEPS_CACHE_KEY);
+  //   if (stepsCache && stepsCache !== null) {
+  //     useCache = true;
+  //   }
+  //   if (useCache) {
+  //     console.warn('use steps from cache');
+  //     return;
+  //   }
+  //   console.warn('steps cache not found, send request to load.');
+  //   this.getStepList(true);
+  // };
+  _proto.render = function render() {
+    var _this4 = this;
+    var _this$state2 = this.state,
+      currentSteps = _this$state2.currentSteps,
+      loading = _this$state2.loading;
+    var _this$props4 = this.props,
+      _this$props4$value = _this$props4.value,
+      originValue = _this$props4$value === void 0 ? [] : _this$props4$value,
+      sources = _this$props4.sources,
+      isBatchUpdateTemplate = _this$props4.isBatchUpdateTemplate;
+    var _this$props5 = this.props,
+      field = _this$props5.field,
+      parent = _this$props5.identifier,
+      restProps = _objectWithoutPropertiesLoose(_this$props5, _excluded);
+    var groupByCategory = groupBy(currentSteps.filter(function (step) {
+      return !step.stepType.includes('kubectl-batch');
+    }).filter(function (step) {
+      return !((step.apiVersion || '').includes('agentless') || 'ComponentJob' == step.kind);
+    }).filter(function (step) {
+      return !step.stepType.includes('yunxiao-xiqi');
+    }).map(function (step) {
+      var def = YamlLoadWithMemo(step.def);
+      var category = i18nStepCategory(def, 'category') || intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.Default',
+        defaultMessage: '默认'
+      });
+      return Object.assign({}, step, {
+        category: category
+      });
+    }), function (step) {
+      return step.category;
+    });
+    var value = originValue.map ? renderData(originValue, this.state.steps, sources, field, parent, this.state.currentSteps) : [];
+    var invalidStepIndexs = value.flatMap(function (step, i) {
+      return step.invalidStepVersion ? [i] : [];
+    });
+    var hasInvalid = invalidStepIndexs.length > 0;
+    var key = parent + "__" + this.props.content.name;
+    var hasError = this.props.field.getError(key);
+    if (hasInvalid && !hasError) {
+      this.props.field.setError(key, ' ');
+    } else if (!hasInvalid && hasError) {
+      this.props.field.setError(key, '');
+    }
+    var isAgentLess = value.find(function (item) {
+      return (item.def.apiVersion || '').includes('agentless') || 'ComponentJob' == item.def.kind;
+    }) !== undefined;
+    var notHasV2 = currentSteps.every(function (step) {
+      var _step$apiVersion;
+      return !(step !== null && step !== void 0 && (_step$apiVersion = step.apiVersion) !== null && _step$apiVersion !== void 0 && _step$apiVersion.startsWith('v2'));
+    });
+    if (getFeature('edit.custom.steps') && notHasV2) {
+      groupByCategory[intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.CustomSteps',
+        defaultMessage: '自定义步骤'
+      })] = groupByCategory[intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.CustomSteps',
+        defaultMessage: '自定义步骤'
+      })] ? groupByCategory[intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.CustomSteps',
+        defaultMessage: '自定义步骤'
+      })].concat({
+        stepType: 'custom_document',
+        border: true
+      }) : [{
+        stepType: 'custom_document'
+      }];
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "inner-field-container",
+      "data-loading": loading
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "inner-field-container__extra btn-right"
+    }, hasError && /*#__PURE__*/React.createElement(Button, {
+      size: "medium",
+      style: {
+        transform: 'translateY(4px)',
+        marginRight: 8
+      },
+      type: "primary",
+      warning: true,
+      text: true,
+      onClick: function onClick() {
+        Dialog.alert({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.steps.TaskStepsClearPrompt',
+            defaultMessage: '任务步骤清空提示'
+          }),
+          content: intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.steps.ModifyingTheOperatingSystemOr',
+            defaultMessage: '修改构建节点操作系统或架构导致任务步骤失效。确认清空 {invalidStepIndexsLength} 个失效步骤吗'
+          }, {
+            invalidStepIndexsLength: invalidStepIndexs.length
+          }),
+          onOk: function onOk() {
+            _this4.onStepsRemove(invalidStepIndexs);
+          }
+        });
+      }
+    }, invalidStepIndexs.length, intl.get({
+      id: 'rdc-tb-cd-assets.flow-engine.fields.steps.FailureSteps',
+      defaultMessage: '个失效步骤'
+    })), !isAgentLess && /*#__PURE__*/React.createElement(Dropdown, {
+      disabled: isBatchUpdateTemplate,
+      trigger: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        text: true,
+        style: {
+          transform: 'translateY(2px)'
+        },
+        onClick: this.getStepList,
+        disabled: isBatchUpdateTemplate
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "add-fill"
+      }), intl.get({
+        id: 'rdc-tb-cd-assets.flow-engine.fields.steps.AddProcedure',
+        defaultMessage: '添加步骤'
+      }))),
+      container: function container(_ref5) {
+        var parentNode = _ref5.parentNode;
+        return parentNode;
+      },
+      triggerType: "click"
+      // offset={[0, -5]}
+    }, /*#__PURE__*/React.createElement(Menu, {
+      triggerType: "hover",
+      mode: "popup",
+      className: "step-container-menu",
+      popupClassName: "step-container-menu-inner",
+      popupAutoWidth: true,
+      visible: true
+    }, Object.keys(groupByCategory).map(function (group) {
+      var groupLabel = group === '企业步骤' ? getFeature('org.name') + "\u6B65\u9AA4" : group;
+      return /*#__PURE__*/React.createElement(Menu.SubMenu, {
+        key: parent + "." + group,
+        label: groupLabel,
+        hozAlign: "right"
+      }, groupByCategory[group].filter(function (step) {
+        return !((step.apiVersion || '').includes('agentless') || 'ComponentJob' == step.kind);
+      }).map(function (step) {
+        if (step.stepType === 'custom_document') {
+          return /*#__PURE__*/React.createElement(Menu.Item, {
+            key: parent + ".guide"
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "custom-document-link" + (step.border ? '-border' : '')
+          }, /*#__PURE__*/React.createElement(IconFont, {
+            type: "guidebook-2-line",
+            size: "small"
+          }), CUSTOM_STEP_DOCUMENT && /*#__PURE__*/React.createElement("a", {
+            href: CUSTOM_STEP_DOCUMENT,
+            target: "_blank",
+            rel: "noreferrer"
+          }, intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.steps.CreateTutorial',
+            defaultMessage: '创建教程'
+          }))));
+        }
+        if (step.owner !== 'flow' && step.stepType !== 'custom_document') {
+          return /*#__PURE__*/React.createElement(Menu.Item, {
+            onClick: function onClick() {
+              return _this4.onStepAdd(step);
+            },
+            key: parent + ".custom." + step.stepType
+          }, step.text, /*#__PURE__*/React.createElement("span", {
+            className: "step-owner-placeholder"
+          }), /*#__PURE__*/React.createElement(Tooltip, {
+            align: "tl",
+            trigger: /*#__PURE__*/React.createElement(IconFont, {
+              type: "enterprise-line",
+              className: "step-owner"
+            })
+          }, intl.get({
+            id: 'rdc-tb-cd-assets.flow-engine.fields.steps.ProvidedByStepowner',
+            defaultMessage: '由{stepOwner}提供'
+          }, {
+            stepOwner: step.owner
+          })));
+        }
+        var def = YamlLoadWithMemo(step.def);
+        return /*#__PURE__*/React.createElement(Menu.Item, {
+          key: parent + "." + step.stepType,
+          onClick: function onClick() {
+            return _this4.onStepAdd(step);
+          }
+        }, i18nStepName(def));
+      }));
+    })))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        minHeight: value.length * 46
+      }
+    }, /*#__PURE__*/React.createElement(DragDropContext, {
+      onDragEnd: this.onDragEnd
+    }, /*#__PURE__*/React.createElement(Droppable, {
+      droppableId: "droppable"
+    }, function (provided, snapshot) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, provided.droppableProps, {
+        ref: provided.innerRef,
+        style: getListStyle(snapshot.isDraggingOver)
+      }), value.map(function (step, index) {
+        return /*#__PURE__*/React.createElement(Step, _extends({
+          key: step.stepIdentifier
+        }, restProps, {
+          step: step,
+          index: index,
+          field: field,
+          onStepChange: _this4.onStepChange,
+          onStepRemove: function onStepRemove(i) {
+            return _this4.onStepsRemove([i]);
+          },
+          isAgentLess: isAgentLess,
+          updateHelpLink: _this4.props.updateHelpLink,
+          isBatchUpdateTemplate: isBatchUpdateTemplate,
+          isStepInvalid: step.invalidStepVersion
+        }));
+      }));
+    }))));
+  };
+  return Steps;
+}(Component);
+export default Steps;