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

package/es/components/common/teambition/pipeline-flow-dialog/index.js

@@ -0,0 +1,2612 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Component } from 'react';
+import { Dialog, Button, Field, Message, Switch, Loading, Balloon, Tab, Tag } from '@teamix/ui';
+import { intervalEnterTime, setLocalStorageCache, getLocalStorageCache, ctrlKey, isDevEnv } from "../../../../utils";
+import { ButtonIcon, YunxiaoIcon, ButtonTooltip } from '@alife/devops-ui';
+import exceed, { exceedFetchWithCache } from "../../../../utils/apimap";
+import YAML from 'js-yaml';
+import track from "../../../../utils/track";
+import cls from 'classnames';
+import CustomTab from "../custom-tab";
+import utils, { getFeature } from "../../../../utils";
+import PipelineFlowOrchestrator, { LIST_MODE, YAML_MODE } from "../pipeline-flow-orchestrator";
+import validate from "./validate";
+import { get, set, cloneDeep, isEqual } from 'lodash-es';
+import EditableLabel from "../editable-label";
+import { NEWBIE_TASK_STATUS } from "../../../newbieTask/util";
+import PipelineSaveDiff from "../pipeline-save-diff";
+import permissionUtil from "../../../../utils/permissionUtil";
+import { navigateWithContexPath } from "../../../../utils/route-utils";
+import { PIPELINE_DRAFT_CACHE, STEPS_CACHE_KEY, PLUGINS_CACHE_KEY, extractRel, attachSources, transformPipelineVo, saveOriginalFlow, getOriginalFlow, clearOriginalFlow, addBranchModeFlagForSources, isStringWithTemplateMark } from "./utils";
+import intl from "../../../../locale";
+import { Perf } from '@alife/yunxiao-common';
+import InlineCode from "../../../InlineCode";
+import "./index.scss";
+import { helpLinkIfAvailable } from "../../../../utils/helplink";
+import Loadable from "../../../../utils/loadable";
+import { removeDoubleQuote } from "../pipeline-run-confirm";
+var PipelineFlowInfo = Loadable({
+  loader: function loader() {
+    return import("../pipeline-flow-info");
+  }
+});
+var PipelineFlowVar = Loadable({
+  loader: function loader() {
+    return import("../pipeline-flow-var");
+  }
+});
+var PipelineFlowScheduler = Loadable({
+  loader: function loader() {
+    return import("../pipeline-flow-scheduler");
+  }
+});
+var RunParamConfigDialog = Loadable({
+  loader: function loader() {
+    return import("../run-param-config-dialog");
+  }
+});
+var PipelineFlowEdit = Loadable({
+  loader: function loader() {
+    return import("../../../PipelineFlowEdit");
+  }
+});
+var PipelineRunConfirm = Loadable({
+  loader: function loader() {
+    return import("../pipeline-run-confirm");
+  }
+});
+
+// dbg Field
+window.Field = Field;
+var Tooltip = Balloon.Tooltip;
+var PREFIX = 'pipeline-flow-dialog';
+var PERMISSION_PIPELINE_EDIT = 'tb.flow.pipeline.edit';
+var pipelineRunCommitKey = 'FLOW_INST_RUNNING_COMMENT';
+var saveParamsValidate = function saveParamsValidate(configValue) {
+  var rules = [{
+    path: 'pipelineVo.name',
+    msg: intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.BasicInformationThePipelineName',
+      defaultMessage: '基本信息-流水线名称不能为空'
+    })
+  }];
+  return validate(configValue, rules);
+};
+var tooltip = function tooltip(trigger, text, key) {
+  if (key === void 0) {
+    key = '';
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: trigger,
+    align: "t",
+    key: key
+  }, text || trigger);
+};
+var alreadyRunPipeline = function alreadyRunPipeline() {
+  return window.AK_GLOBAL.alreadyRunPipeline;
+};
+export var goTemplatePreviewSwitchContainerId = 'go-template-preview-switch';
+var getDefaultState = function getDefaultState(props) {
+  return {
+    /** 各种操作就是在修改 pipeline 这个 stage */
+    pipeline: props.pipeline || {},
+    sourcePipeline: cloneDeep(props.pipeline || {}),
+    invalidateTasks: [],
+    loading: false,
+    requesting: false,
+    /** 只用在 pipelineBtn 判断上... */
+    blankFlow: true,
+    branchRepoConfigs: [],
+    latestInstance: {},
+    runningGlobalParams: [],
+    configDailogVisible: false,
+    pipelineRunConfirmVisible: false,
+    pipelineNameChangeLoading: false,
+    runPipelineButtonLoading: false,
+    /** header 的4个tab */
+    navValue: 'flow',
+    originalSource: '[]',
+    configurationVisible: true,
+    saveAndExecBtnLoading: false,
+    saveBtnLoading: false,
+    // 以下是 PAC 相关
+    flowEditMode: 'code',
+    checkYamlBackendErrorList: [],
+    /** 前端代码编辑器校验出的问题 */
+    feValidateMarkers: [],
+    goTemplateViewMode: 'edit',
+    // pacFlowValid: true,
+
+    /** debug v1 yaml */
+    mode: LIST_MODE,
+    // 保存预览框
+    saveVisible: false,
+    isSaveAndRun: true
+  };
+};
+var PipelineFlowDialog = /*#__PURE__*/function (_Component) {
+  function PipelineFlowDialog(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.field = void 0;
+    _this.runParamConfigField = void 0;
+    _this.fakeSaveLoading = function () {
+      _this.setState({
+        saveBtnLoading: true
+      });
+      var timer = setTimeout(function () {
+        _this.setState({
+          saveBtnLoading: false
+        });
+        clearTimeout(timer);
+      }, 400);
+    };
+    _this.bindShortcuts = function (e) {
+      // Cmd/Ctrl + S 保存
+      if (e[ctrlKey] && e.code === 'KeyS') {
+        e.preventDefault();
+        if (_this.isPipelineAsCode && _this.getIsUnedited()) {
+          _this.fakeSaveLoading();
+          return;
+        }
+        _this.onClickPipelineSaveBtn();
+        track({
+          action: 'PipelineSave-shortcuts',
+          type: _this.isPipelineAsCode ? 'pac' : 'old' // 区分pac或老编辑页
+        });
+      }
+    };
+    _this.changedValidate = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$_this$pipeline, pipelineNotErr, pipelineErrs;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            isDevEnv && console.count('changedValidate');
+            _context.next = 3;
+            return _this.pipelineValidate();
+          case 3:
+            _yield$_this$pipeline = _context.sent;
+            pipelineNotErr = _yield$_this$pipeline.pipelineNotErr;
+            pipelineErrs = _yield$_this$pipeline.pipelineErrs;
+            if (pipelineNotErr) {
+              _this.setState({
+                invalidateTasks: []
+              });
+            } else {
+              _this.onErrors(pipelineErrs);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    _this.checkPermission = function () {
+      permissionUtil.checkPermissionList([PERMISSION_PIPELINE_EDIT], _this.props.pipelineId, 'pipeline', window.AK_GLOBAL.currentUser.workid).then(function (data) {
+        if (data === void 0) {
+          data = {};
+        }
+        if (data[PERMISSION_PIPELINE_EDIT] === false) {
+          navigateWithContexPath('/403');
+        }
+      });
+    };
+    _this.onClose = function () {
+      var _ref2 = _this.props || {},
+        onClose = _ref2.onClose,
+        trackPage = _ref2.trackPage,
+        type = _ref2.type,
+        pipelineId = _ref2.pipelineId,
+        location = _ref2.location;
+      var state = (location === null || location === void 0 ? void 0 : location.state) || {};
+      if (!_this.getIsUnedited() && type !== 'template') {
+        Dialog.confirm({
+          messageProps: {
+            type: 'notice'
+          },
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Exit',
+            defaultMessage: '退出'
+          }),
+          content: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.WhetherToSaveThisModification',
+            defaultMessage: '退出编辑前，是否对本次修改进行保存'
+          }),
+          okProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Save',
+              defaultMessage: '保存'
+            })
+          },
+          cancelProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.DoNotSave',
+              defaultMessage: '不保存'
+            })
+          },
+          onOk: function onOk() {
+            if (_this.isPipelineAsCode) {
+              // this.submitPipeline2();
+              _this.setState({
+                saveVisible: true,
+                isSaveAndRun: false
+              });
+              return;
+            }
+            _this.submitPipeline(function () {
+              clearOriginalFlow(pipelineId);
+              onClose(state === null || state === void 0 ? void 0 : state["new"]);
+              track({
+                action: 'save pipeline',
+                page: trackPage || 'edit page',
+                daysinceenterflow: intervalEnterTime()
+              });
+            });
+          },
+          onCancel: function onCancel() {
+            _this.cleanDrfatCache();
+            clearOriginalFlow(pipelineId);
+            onClose(state === null || state === void 0 ? void 0 : state["new"]);
+            _this.setState({
+              loading: false
+            });
+          }
+        });
+        return;
+      }
+      if (_this.state.changed && type === 'template') {
+        Dialog.confirm({
+          messageProps: {
+            type: 'notice'
+          },
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Exit',
+            defaultMessage: '退出'
+          }),
+          content: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YouHaveNotSavedThe',
+            defaultMessage: '你还没有保存模板，退出后将会清除所有数据'
+          }),
+          okProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Save',
+              defaultMessage: '保存'
+            })
+          },
+          cancelProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.DoNotSave',
+              defaultMessage: '不保存'
+            })
+          },
+          onOk: function onOk() {
+            _this.submitCustomPipelineTemplate().then(function () {
+              onClose();
+              _this.setState({
+                loading: false
+              });
+            });
+          },
+          onCancel: function onCancel() {
+            onClose();
+            _this.setState({
+              loading: false
+            });
+          }
+        });
+        return;
+      }
+      onClose(state === null || state === void 0 ? void 0 : state["new"]);
+      clearOriginalFlow(pipelineId);
+      _this.setState({
+        loading: false
+      });
+    };
+    _this.onErrors = function (errors) {
+      var invalidateTasks = Object.keys(errors).map(function (k) {
+        return k.split('__')[0];
+      }).filter(function (k) {
+        return k;
+      });
+      _this.setState({
+        invalidateTasks: invalidateTasks
+      });
+    };
+    _this.onSourcesChange = function (sources, updateOriginalScource) {
+      if (updateOriginalScource === void 0) {
+        updateOriginalScource = true;
+      }
+      var pipeline = _this.state.pipeline;
+      var _pipeline$pipelineVo = pipeline.pipelineVo,
+        pipelineVo = _pipeline$pipelineVo === void 0 ? {} : _pipeline$pipelineVo;
+      var _pipelineVo$pipelineC = pipelineVo.pipelineConfigVo,
+        pipelineConfigVo = _pipelineVo$pipelineC === void 0 ? {} : _pipelineVo$pipelineC;
+      pipelineConfigVo.sources = sources;
+      _this.setState(_extends({
+        pipeline: pipeline
+      }, updateOriginalScource ? {
+        originalScource: sources
+      } : {}));
+      var timer = setTimeout(function () {
+        _this.changedValidate();
+        clearTimeout(timer);
+      }, 200);
+    };
+    _this.onSettingsChange = function (settings) {
+      var pipeline = _this.state.pipeline;
+      var _pipeline$pipelineVo2 = pipeline.pipelineVo,
+        pipelineVo = _pipeline$pipelineVo2 === void 0 ? {} : _pipeline$pipelineVo2;
+      var _pipelineVo$pipelineC2 = pipelineVo.pipelineConfigVo,
+        pipelineConfigVo = _pipelineVo$pipelineC2 === void 0 ? {} : _pipelineVo$pipelineC2;
+      pipelineConfigVo.settings = settings;
+      _this.setState(pipeline);
+    };
+    _this.onSchedulersChange = function (schedulers) {
+      console.log('schedulers', schedulers);
+      var pipeline = _this.state.pipeline;
+      var _pipeline$pipelineVo3 = pipeline.pipelineVo,
+        pipelineVo = _pipeline$pipelineVo3 === void 0 ? {} : _pipeline$pipelineVo3;
+      var _pipelineVo$pipelineC3 = pipelineVo.pipelineConfigVo,
+        pipelineConfigVo = _pipelineVo$pipelineC3 === void 0 ? {} : _pipelineVo$pipelineC3;
+      pipelineConfigVo.triggerVoList = schedulers;
+      _this.setState(pipeline);
+    };
+    _this.onNameChange = function (name, cb) {
+      var pipeline = _this.state.pipeline;
+      var _pipeline$pipelineVo4 = pipeline.pipelineVo,
+        pipelineVo = _pipeline$pipelineVo4 === void 0 ? {} : _pipeline$pipelineVo4;
+      pipelineVo.name = name;
+      _this.setState({
+        pipeline: pipeline
+      });
+      if (_this.props.type !== 'template') {
+        _this.isPipelineAsCode ? _this.submitPipeline2(cb) : _this.submitPipeline(cb, false);
+      }
+    };
+    /** v1 流水线 */
+    _this.onFlowChange = function (nextFlow, pipelines, cache) {
+      if (cache === void 0) {
+        cache = true;
+      }
+      _this.setState({
+        blankFlow: !(pipelines && pipelines.length > 0)
+      });
+      var pipeline = _this.state.pipeline;
+      var pipelineConfigVo = _extends({}, pipeline.pipelineVo.pipelineConfigVo, {
+        flow: nextFlow
+      });
+      var pipelineVo = _extends({}, pipeline.pipelineVo, {
+        pipelineConfigVo: pipelineConfigVo
+      });
+      pipeline.pipelineVo.pipelineConfigVo.flow = nextFlow;
+      var nextPipeline = _extends({}, pipeline, {
+        pipelineVo: pipelineVo
+      });
+      // const nextPipeline = produce(pipeline, pipelineDraft => {
+      //   pipelineDraft.pipelineVo.pipelineConfigVo.flow = nextFlow;
+      // });
+      _this.setState({
+        changed: true,
+        pipeline: nextPipeline
+      });
+      cache && _this.saveDrfatCache(nextPipeline);
+    };
+    _this.onPacFlowChange = function (nextFlow) {
+      if (isStringWithTemplateMark(nextFlow) !== isStringWithTemplateMark(_this.state.pipeline.pipelineVo.pipelineConfigVo.flow)) {
+        var isTemplateMode = isStringWithTemplateMark(nextFlow);
+        Dialog.confirm({
+          title: isTemplateMode ? /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SwitchedToTemplateMode',
+            defaultMessage: '已切换至 Template 模式'
+          }), /*#__PURE__*/React.createElement(Tag, {
+            type: "primary"
+          }, "BETA")) : intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.OutOfTemplateMode',
+            defaultMessage: '已退出 Template 模式'
+          }),
+          content: isTemplateMode ? /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 440
+            }
+          }, intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ThePipelineHasBeenSwitched',
+            defaultMessage: '流水线已切换至 template 模式，支持使用 template 模板语言动态渲染 YAML，\n            遵循原生 go template 语法，支持预览校验；满足多 Job 灵活动态配置场景，帮助降低 YAML 重复代码。'
+          }), helpLinkIfAvailable('help_pac_template', intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.LearnMore',
+            defaultMessage: '了解更多'
+          }))) : '',
+          footerActions: ['ok'],
+          okProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.GotIt',
+              defaultMessage: '知道了'
+            })
+          }
+        });
+        _this.setState({
+          goTemplateViewMode: 'edit'
+        });
+      }
+      // this.setState({
+      //   pacFlowValid: validYaml,
+      // });
+      var pipeline = _this.state.pipeline;
+      var pipelineConfigVo = _extends({}, pipeline.pipelineVo.pipelineConfigVo, {
+        flow: nextFlow
+      });
+      var pipelineVo = _extends({}, pipeline.pipelineVo, {
+        pipelineConfigVo: pipelineConfigVo
+      });
+      pipeline.pipelineVo.pipelineConfigVo.flow = nextFlow;
+      var nextPipeline = _extends({}, pipeline, {
+        pipelineVo: pipelineVo
+      });
+      _this.setState({
+        changed: true,
+        pipeline: nextPipeline
+      });
+    };
+    _this.onValidate = function () {
+      return new Promise(function (resolve, reject) {
+        _this.field.validate(function (errors) {
+          if (errors) {
+            _this.onErrors(errors);
+            Message.warning({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TheObjectkeyserrorsPipelineHasUnfinished',
+                defaultMessage: '流水线{ObjectKeysErrors}个有未完成的配置，请检查'
+              }, {
+                ObjectKeysErrors: Object.keys(errors).length
+              })
+            });
+            reject(errors);
+            return;
+          }
+          resolve();
+        });
+      });
+    };
+    _this.onBaseInfoChange = function (val) {
+      var pipeline = _this.state.pipeline;
+      var _pipeline$pipelineVo5 = pipeline.pipelineVo,
+        pipelineVo = _pipeline$pipelineVo5 === void 0 ? {} : _pipeline$pipelineVo5;
+      pipeline.pipelineVo = _extends({}, pipelineVo, val);
+      _this.setState({
+        pipeline: pipeline
+      });
+    };
+    _this.getDrfatCache = function () {
+      var pipelineId = _this.props.pipelineId;
+      var preUnSavedPipeline = window.localStorage.getItem(PIPELINE_DRAFT_CACHE + "-" + pipelineId);
+      if (!preUnSavedPipeline) {
+        return null;
+      }
+      return JSON.parse(preUnSavedPipeline);
+    };
+    _this.subscribe = function (fieldName, subscriber, callback) {
+      var subscribers = _this.fieldSubscribeies[fieldName] || {};
+      subscribers[subscriber] = callback;
+      _this.fieldSubscribeies[fieldName] = subscribers;
+    };
+    _this.saveDrfatCache = function (pipeline) {
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+      _this.timeout = setTimeout(function () {
+        var pipelineId = _this.props.pipelineId;
+        setLocalStorageCache(PIPELINE_DRAFT_CACHE + "-" + pipelineId, JSON.stringify(pipeline), false);
+      }, 1000);
+    };
+    _this.doValidate = function () {
+      _this.field.validate(function (errors) {
+        if (errors) {
+          _this.onErrors(errors);
+        } else {
+          _this.setState({
+            invalidateTasks: []
+          });
+        }
+      });
+    };
+    _this.cleanDrfatCache = function () {
+      var pipelineId = _this.props.pipelineId;
+      window.localStorage.removeItem(PIPELINE_DRAFT_CACHE + "-" + pipelineId);
+    };
+    _this.initCreateCustomPipelineTemplate = function () {
+      var pipeline = {};
+      var pipelineVo = {};
+      pipeline.pipelineVo = pipelineVo;
+      pipelineVo.status = 'ONLINE';
+      pipelineVo.name = intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.NewCustomPipelineTemplate',
+        defaultMessage: '新自定义流水线模板'
+      });
+      pipelineVo.siteFrom = 'teambition';
+      pipelineVo.type = _this.props.pipelineVo.type;
+      pipelineVo.pipelineConfigVo = _this.props.pipelineVo.pipelineConfigVo;
+      _this.setState({
+        requesting: false,
+        pipeline: pipeline,
+        sourcePipeline: cloneDeep(pipeline)
+      });
+    };
+    /** didMount 调用一次 */
+    _this.fetchCustomPipelineTemplate = function () {
+      var pipelineTemplateId = _this.props.pipelineTemplateId;
+      exceed.fetch({
+        api: 'PipelineTemplate.custom.get',
+        data: {
+          id: pipelineTemplateId
+        }
+      }).then(function (res) {
+        var pipeline = {
+          pipelineVo: _extends({
+            name: res.object.pipelineTemplate.templateName,
+            pipelineConfigVo: res.object.pipelineConfig
+          }, res.object.pipelineTemplate.pipelineAsCodeVersion ? {
+            type: 'PIPELINEASCODE'
+          } : {})
+        };
+        _this.setState({
+          pipeline: pipeline,
+          sourcePipeline: cloneDeep(pipeline)
+        }, function () {
+          _this.setState({
+            requesting: false
+          }, function () {
+            setTimeout(function () {
+              _this.doValidate();
+            }, 1000);
+          });
+        });
+      });
+    };
+    _this.fetchSteps = function () {
+      var config = {
+        api: 'Pipeline.step.list',
+        data: {
+          displayScope: window.__isEmbedInAppstack ? 'appstack' : 'flow',
+          capabilities: 'ALL',
+          buildEnvironment: 'vm,container'
+        }
+      };
+      exceedFetchWithCache(config).then(function (res) {
+        if (res.successful && res.object) {
+          setLocalStorageCache(STEPS_CACHE_KEY, JSON.stringify(res.object), false);
+        }
+      });
+    };
+    _this.getLatestPiepline = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var pipelineId, _yield$exceed$fetch, successful, object;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            pipelineId = _this.props.pipelineId;
+            _context2.next = 3;
+            return exceed.fetch({
+              api: 'Pipeline.get.instance.latest',
+              params: {
+                pipelineId: pipelineId
+              }
+            });
+          case 3:
+            _yield$exceed$fetch = _context2.sent;
+            successful = _yield$exceed$fetch.successful;
+            object = _yield$exceed$fetch.object;
+            return _context2.abrupt("return", successful ? object : null);
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    _this.setBranchRepoConfigs = function (branchRepoConfigs) {
+      _this.setState({
+        branchRepoConfigs: branchRepoConfigs
+      });
+    };
+    // 查看是否编辑过
+    _this.getIsUnedited = function () {
+      var _this$state = _this.state,
+        pipeline = _this$state.pipeline,
+        sourcePipeline = _this$state.sourcePipeline;
+      var pipelineVo = pipeline.pipelineVo;
+      var sourcePipelineVo = sourcePipeline.pipelineVo;
+      return isEqual(pipelineVo, sourcePipelineVo);
+    };
+    _this.fetchPlugins = function () {
+      exceed.fetch({
+        api: 'Pipeline.plugin.list'
+      }).then(function (res) {
+        console.log('preload plugins');
+        if (res.successful && res.object) {
+          setLocalStorageCache(PLUGINS_CACHE_KEY, JSON.stringify(res.object), false);
+        }
+      });
+    };
+    _this.fetchPipeline = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(notLoading) {
+        var _pipelineRoot$pipelin;
+        var pipelineId, getPipeline, pipelineRoot, _ref6, _ref6$pipelineConfigV, pipelineConfigVo, _flow$pipeline, flow;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              pipelineId = _this.props.pipelineId;
+              if (!notLoading) {
+                _this.setState({
+                  requesting: true
+                });
+              }
+              getPipeline = _this.props.getPipeline ? function () {
+                return cloneDeep(_this.props.getPipeline());
+              } : /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+                var res;
+                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      _context3.next = 2;
+                      return exceed.fetch({
+                        api: 'Pipeline.get',
+                        params: {
+                          id: pipelineId
+                        }
+                      });
+                    case 2:
+                      res = _context3.sent;
+                      return _context3.abrupt("return", res.object);
+                    case 4:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              }));
+              _context4.next = 5;
+              return getPipeline();
+            case 5:
+              _context4.t0 = _context4.sent;
+              if (_context4.t0) {
+                _context4.next = 8;
+                break;
+              }
+              _context4.t0 = {};
+            case 8:
+              pipelineRoot = _context4.t0;
+              pipelineRoot.pipelineVo = _extends({}, pipelineRoot.pipelineVo, transformPipelineVo(pipelineRoot.pipelineVo));
+              _ref6 = pipelineRoot.pipelineVo || {}, _ref6$pipelineConfigV = _ref6.pipelineConfigVo, pipelineConfigVo = _ref6$pipelineConfigV === void 0 ? {} : _ref6$pipelineConfigV; // appstack相关的部分历史流水线可能没有webhook
+              if (!pipelineConfigVo.webhook) {
+                pipelineConfigVo.webhook = utils.uuid(20);
+              }
+              saveOriginalFlow(pipelineConfigVo.flow, pipelineId);
+              if (((_pipelineRoot$pipelin = pipelineRoot.pipelineVo) === null || _pipelineRoot$pipelin === void 0 ? void 0 : _pipelineRoot$pipelin.type) !== 'PIPELINEASCODE') {
+                flow = YAML.load(pipelineConfigVo.flow);
+                if ((flow === null || flow === void 0 ? void 0 : (_flow$pipeline = flow.pipeline) === null || _flow$pipeline === void 0 ? void 0 : _flow$pipeline.length) > 0) {
+                  _this.setState({
+                    blankFlow: false
+                  });
+                }
+              }
+              _this.setState({
+                pipeline: pipelineRoot,
+                sourcePipeline: cloneDeep(pipelineRoot),
+                originalSource: pipelineConfigVo.sources
+              }, function () {
+                _this.setState({
+                  requesting: false
+                }, function () {
+                  setTimeout(function () {
+                    _this.doValidate();
+                  }, 1000);
+                });
+              });
+              return _context4.abrupt("return", pipelineRoot);
+            case 16:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function (_x) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+    _this.pipelineSaveSucceed = function (_ref7) {
+      var pipelineNotErr = _ref7.pipelineNotErr,
+        flow = _ref7.flow,
+        pipelineErrLen = _ref7.pipelineErrLen,
+        sourcesNotErr = _ref7.sourcesNotErr;
+      if (!sourcesNotErr) {
+        Message.warning({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TheCodeSourceHasNot',
+            defaultMessage: '流水线代码源保存失败，代码源未配置完成，其他配置项保存成功'
+          }),
+          duration: 5000
+        });
+        return;
+      }
+      if (pipelineNotErr) {
+        var _ref8 = _this.props || {},
+          pipelineId = _ref8.pipelineId;
+        Message.success({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SavedSuccessfully',
+            defaultMessage: '保存成功'
+          })
+        });
+        clearOriginalFlow(pipelineId);
+        saveOriginalFlow(flow, pipelineId);
+        return;
+      }
+      Message.warning({
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TheProcessHasPipelineerrlenUnfinished',
+          defaultMessage: '流水线编排流程保存失败，流程中有{pipelineErrLen}个未完成的配置，其他配置项保存成功'
+        }, {
+          pipelineErrLen: pipelineErrLen
+        }),
+        duration: 5000
+      });
+      _this.openFirstErrorMenu();
+    };
+    _this.sourcesValidate = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      var _ref10, _ref10$sourceInvalida, sourceInvalidate;
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _ref10 = _this.flowRef.onSourcesValidate() || {}, _ref10$sourceInvalida = _ref10.sourceInvalidate, sourceInvalidate = _ref10$sourceInvalida === void 0 ? {} : _ref10$sourceInvalida;
+            return _context5.abrupt("return", !Object.values(sourceInvalidate).filter(Boolean).length);
+          case 2:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    _this.pipelineValidate = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      var _yield$_this$field$va, errors, len;
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _context6.next = 2;
+            return _this.field.validatePromise();
+          case 2:
+            _yield$_this$field$va = _context6.sent;
+            errors = _yield$_this$field$va.errors;
+            len = Object.keys(errors || {}).length;
+            return _context6.abrupt("return", {
+              pipelineNotErr: !len,
+              pipelineErrLen: len,
+              pipelineErrs: errors
+            });
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    }));
+    _this.submitPipeline2 = /*#__PURE__*/function () {
+      var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(callback, log) {
+        var p, pipeline, pipelineConfigVo, settings, data, onSavePipeline, _yield$onSavePipeline, successful, errorMsg, _window$__openGoTempl2, _window2;
+        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              if (log === void 0) {
+                log = '';
+              }
+              if (!(!_this.isPacEnableGoTemplate && _this.state.feValidateMarkers.length)) {
+                _context7.next = 4;
+                break;
+              }
+              Message.warning(intl.get({
+                id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.PipelineConfigurationErrorPleaseModify',
+                defaultMessage: '流水线配置错误，请修改后保存'
+              }));
+              return _context7.abrupt("return");
+            case 4:
+              p = _this.state.pipeline;
+              pipeline = cloneDeep(p);
+              if ('pipelineVo' in pipeline) {
+                _context7.next = 8;
+                break;
+              }
+              throw new Error();
+            case 8:
+              _this.setState({
+                saveBtnLoading: true
+              });
+              pipelineConfigVo = pipeline.pipelineVo.pipelineConfigVo; // dbg
+              if (localStorage.getItem('__debug_yaml_validate') === 'false') {
+                pipelineConfigVo.doValidate = false;
+              }
+
+              // #region pipelineConfigVo.settings globalParam.masked -> .encrypted
+              settings = JSON.parse(pipelineConfigVo.settings);
+              if (settings.globalParams) {
+                settings.globalParams.forEach(function (globalParam) {
+                  if (!globalParam.masked) {
+                    globalParam.encrypted = false;
+                  }
+                });
+                pipelineConfigVo.settings = JSON.stringify(settings);
+              }
+              // #endregion
+              if (saveParamsValidate(pipeline)) {
+                _context7.next = 15;
+                break;
+              }
+              return _context7.abrupt("return");
+            case 15:
+              pipelineConfigVo.changeLog = log || '';
+              _context7.prev = 16;
+              !_this.isPacEnableGoTemplate && YAML.load(pipeline.pipelineVo.pipelineConfigVo.flow);
+              _context7.next = 24;
+              break;
+            case 20:
+              _context7.prev = 20;
+              _context7.t0 = _context7["catch"](16);
+              Message.error({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlFiledToSave',
+                  defaultMessage: '保存失败'
+                }),
+                content: _context7.t0.message,
+                duration: 6000
+              });
+              return _context7.abrupt("return");
+            case 24:
+              data = {
+                pipeline: JSON.stringify(pipeline.pipelineVo),
+                refObjectList: JSON.stringify(pipeline.pipelineObjRelList)
+              };
+              onSavePipeline = function onSavePipeline() {
+                isDevEnv && console.log(data);
+                if (_this.props.onSavePipeline) {
+                  return _this.props.onSavePipeline(data, 'FlowV2');
+                }
+                return exceed.fetch({
+                  api: 'Pipeline2.update',
+                  data: data,
+                  params: {
+                    id: _this.props.pipelineId
+                  }
+                });
+              };
+              _context7.prev = 26;
+              _context7.next = 29;
+              return onSavePipeline()["catch"](function () {
+                var _window$__openGoTempl, _window;
+                _this.setState({
+                  saveBtnLoading: false
+                });
+                (_window$__openGoTempl = (_window = window).__openGoTemplateEditorDefaultPreview) === null || _window$__openGoTempl === void 0 ? void 0 : _window$__openGoTempl.call(_window);
+                return false;
+              });
+            case 29:
+              _yield$onSavePipeline = _context7.sent;
+              successful = _yield$onSavePipeline.successful;
+              errorMsg = _yield$onSavePipeline.errorMsg;
+              if (successful) {
+                Message.success({
+                  title: intl.get({
+                    id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SavedSuccessfully',
+                    defaultMessage: '保存成功'
+                  })
+                });
+                _this.cleanDrfatCache();
+                _this.fetchPipeline(true);
+                _this.setState({
+                  changed: false,
+                  checkYamlBackendErrorList: []
+                });
+                if (callback && typeof callback === 'function') {
+                  callback();
+                }
+              } else {
+                Message.error({
+                  title: intl.get({
+                    id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlFiledToSave',
+                    defaultMessage: '保存失败'
+                  }),
+                  content: errorMsg,
+                  duration: 6000
+                });
+
+                // @tpl
+                (_window$__openGoTempl2 = (_window2 = window).__openGoTemplateEditorDefaultPreview) === null || _window$__openGoTempl2 === void 0 ? void 0 : _window$__openGoTempl2.call(_window2);
+
+                // 保存失败后，调用一次校验接口，以便显示行内错误
+                !_this.isPacEnableGoTemplate && _this.checkYaml();
+              }
+              _this.setState({
+                saveBtnLoading: false
+              });
+              return _context7.abrupt("return", successful);
+            case 37:
+              _context7.prev = 37;
+              _context7.t1 = _context7["catch"](26);
+              _this.setState({
+                saveBtnLoading: false
+              });
+              return _context7.abrupt("return", false);
+            case 41:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7, null, [[16, 20], [26, 37]]);
+      }));
+      return function (_x2, _x3) {
+        return _ref12.apply(this, arguments);
+      };
+    }();
+    _this.executePipeline2 = /*#__PURE__*/function () {
+      var _ref13 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(id, data) {
+        var _yield$exceed$fetch2, successful, errorMsg;
+        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.prev = 0;
+              _context8.next = 3;
+              return exceed.fetch({
+                api: 'Pipeline2.execute',
+                params: {
+                  id: id
+                },
+                data: data
+              });
+            case 3:
+              _yield$exceed$fetch2 = _context8.sent;
+              successful = _yield$exceed$fetch2.successful;
+              errorMsg = _yield$exceed$fetch2.errorMsg;
+              _this.setState({
+                runPipelineButtonLoading: false,
+                loading: false
+              });
+              if (successful) {
+                _context8.next = 9;
+                break;
+              }
+              return _context8.abrupt("return", Message.error({
+                title: errorMsg || intl.get({
+                  id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlPipelineTriggerFailed',
+                  defaultMessage: '触发失败'
+                })
+              }));
+            case 9:
+              _this.props.onClose();
+              Message.success({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlPipelineTriggerSuccessful',
+                  defaultMessage: '触发成功'
+                })
+              });
+            case 11:
+              _context8.prev = 11;
+              _this.setState({
+                runPipelineButtonLoading: false,
+                loading: false
+              });
+              return _context8.finish(11);
+            case 14:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8, null, [[0,, 11, 14]]);
+      }));
+      return function (_x4, _x5) {
+        return _ref13.apply(this, arguments);
+      };
+    }();
+    _this.submitPipeline = /*#__PURE__*/function () {
+      var _ref14 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9(callback, loading, log) {
+        var _this$state2, p, originalSource, _ref15, pipelineId, pipeline, _yield$_this$pipeline2, pipelineNotErr, pipelineErrs, pipelineErrLen, sourcesNotErr, refreshFlag, path, _path, pipelineConfigVo, settings, newSources, pipelineVo, data, onSavePipeline;
+        return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
+            case 0:
+              if (loading === void 0) {
+                loading = true;
+              }
+              if (log === void 0) {
+                log = '';
+              }
+              _this.setState({
+                saveBtnLoading: true
+              });
+              _context9.next = 5;
+              return new Promise(function (r) {
+                return setTimeout(r, 600);
+              });
+            case 5:
+              _this$state2 = _this.state, p = _this$state2.pipeline, originalSource = _this$state2.originalSource;
+              _ref15 = _this.props || {}, pipelineId = _ref15.pipelineId;
+              pipeline = cloneDeep(p);
+              _context9.next = 10;
+              return _this.pipelineValidate();
+            case 10:
+              _yield$_this$pipeline2 = _context9.sent;
+              pipelineNotErr = _yield$_this$pipeline2.pipelineNotErr;
+              pipelineErrs = _yield$_this$pipeline2.pipelineErrs;
+              pipelineErrLen = _yield$_this$pipeline2.pipelineErrLen;
+              _context9.next = 16;
+              return _this.sourcesValidate();
+            case 16:
+              sourcesNotErr = _context9.sent;
+              // console.log(pipeline);
+              // return;
+              if (pipelineNotErr) {
+                _this.setState({
+                  invalidateTasks: []
+                });
+              } else {
+                _this.onErrors(pipelineErrs);
+              }
+
+              // 步骤偶发 stepIdentifier 重复的兜底方案
+              refreshFlag = false; // eslint-disable-next-line no-void
+              void function () {
+                try {
+                  if (!(pipelineConfigVo !== null && pipelineConfigVo !== void 0 && pipelineConfigVo.flow)) return;
+                  var flowObj = YAML.load(pipelineConfigVo.flow);
+                  var allStages = flowObj.pipeline.flatMap(function (group) {
+                    return (group === null || group === void 0 ? void 0 : group.stages) || [];
+                  });
+                  var jobs = allStages.flatMap(function (stage) {
+                    return (stage === null || stage === void 0 ? void 0 : stage.jobs) || [];
+                  });
+                  jobs.forEach(function (job) {
+                    var _job$params;
+                    var steps = ((_job$params = job.params) === null || _job$params === void 0 ? void 0 : _job$params.steps) || [];
+                    var idToStep = {};
+                    steps.forEach(function (step) {
+                      idToStep[step.stepIdentifier] = idToStep[step.stepIdentifier] || [];
+                      idToStep[step.stepIdentifier].push(step);
+                    });
+                    Object.entries(idToStep).forEach(function (_ref16) {
+                      var steps = _ref16[1];
+                      if (steps.length > 1) {
+                        steps[0].stepIdentifier = job.identifier + "__10_" + String(Date.now()).replace(/\d{3}$/, '000');
+                        refreshFlag = true;
+                      }
+                    });
+                  });
+                  pipelineConfigVo.flow = YAML.dump(flowObj);
+                } catch (e) {
+                  console.error(e);
+                }
+              }();
+
+              // 判断源是否有校验未通过
+              if (!sourcesNotErr) {
+                path = 'pipelineVo.pipelineConfigVo.sources';
+                set(pipeline, path, originalSource);
+              }
+              // 判断pipeline参数
+              if (!pipelineNotErr) {
+                _path = 'pipelineVo.pipelineConfigVo.flow';
+                set(pipeline, _path, getOriginalFlow(pipelineId) || get(pipeline, _path));
+              }
+              pipelineConfigVo = pipeline.pipelineVo.pipelineConfigVo;
+              settings = JSON.parse(pipelineConfigVo.settings);
+              if (settings.globalParams) {
+                settings.globalParams.forEach(function (globalParam) {
+                  if (!globalParam.masked) {
+                    globalParam.encrypted = false;
+                  }
+                });
+                pipelineConfigVo.settings = JSON.stringify(settings);
+              }
+              newSources = addBranchModeFlagForSources(YAML.load(pipelineConfigVo.flow), JSON.parse(pipelineConfigVo.sources));
+              newSources.forEach(function (source) {
+                if (source.data && typeof source.data.trigger !== 'undefined') {
+                  source.data.isTrigger = source.data.trigger;
+                }
+              });
+              pipelineConfigVo.sources = JSON.stringify(newSources);
+              pipelineVo = attachSources(pipeline.pipelineVo);
+              if (saveParamsValidate(pipeline)) {
+                _context9.next = 31;
+                break;
+              }
+              return _context9.abrupt("return");
+            case 31:
+              pipelineConfigVo.changeLog = log || '';
+              _this.setState({
+                saving: true,
+                loading: loading
+              });
+              data = {
+                pipeline: JSON.stringify(pipelineVo),
+                refObjectList: JSON.stringify(extractRel(pipeline))
+              };
+              onSavePipeline = function onSavePipeline() {
+                isDevEnv && console.log(data);
+                if (_this.props.onSavePipeline) {
+                  return _this.props.onSavePipeline(data);
+                }
+                return exceed.fetch({
+                  api: 'Pipeline.edit.submitPipeline',
+                  data: data
+                }).then(function (v) {
+                  if (!v.successful) {
+                    throw new Error();
+                  }
+                });
+              };
+              Promise.resolve(onSavePipeline(data)).then(function () {
+                _this.pipelineSaveSucceed({
+                  pipelineNotErr: pipelineNotErr,
+                  flow: pipelineConfigVo.flow,
+                  sourcesNotErr: sourcesNotErr,
+                  pipelineErrLen: pipelineErrLen
+                });
+                _this.cleanDrfatCache();
+                _this.setState({
+                  changed: false,
+                  loading: false,
+                  saveBtnLoading: false
+                });
+                if (callback && typeof callback === 'function') {
+                  callback();
+                }
+                _this.setState({
+                  saving: false,
+                  loading: false,
+                  originalSource: pipelineConfigVo.sources
+                });
+                if (refreshFlag) {
+                  setTimeout(function () {
+                    window.location.reload();
+                  }, 100);
+                }
+              })["catch"](function (err) {
+                console.log(err);
+                _this.setState({
+                  saving: false,
+                  loading: false,
+                  saveBtnLoading: false
+                });
+              });
+            case 36:
+            case "end":
+              return _context9.stop();
+          }
+        }, _callee9);
+      }));
+      return function (_x6, _x7, _x8) {
+        return _ref14.apply(this, arguments);
+      };
+    }();
+    // eslint-disable-next-line no-async-promise-executor
+    _this.submitCustomPipelineTemplate = function () {
+      return new Promise(/*#__PURE__*/function () {
+        var _ref17 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee10(resolve, reject) {
+          var _this$props, trackPage, model, isEditTemplate, pipeline, _pipeline$pipelineVo$, flow, sources, _settings, souceseList, newSources, settings, flowDetail, flowContent, data, that, savePipelineFromProps, savePipelineTpl, save;
+          return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+            while (1) switch (_context10.prev = _context10.next) {
+              case 0:
+                _this$props = _this.props, trackPage = _this$props.trackPage, model = _this$props.model;
+                isEditTemplate = model === 'edit';
+                pipeline = _this.state.pipeline;
+                _pipeline$pipelineVo$ = pipeline.pipelineVo.pipelineConfigVo, flow = _pipeline$pipelineVo$.flow, sources = _pipeline$pipelineVo$.sources, _settings = _pipeline$pipelineVo$.settings;
+                if (_this.isPacEnableGoTemplate) {
+                  _context10.next = 15;
+                  break;
+                }
+                _context10.prev = 5;
+                if (flow) {
+                  _context10.next = 8;
+                  break;
+                }
+                throw new Error();
+              case 8:
+                YAML.load(flow);
+                _context10.next = 15;
+                break;
+              case 11:
+                _context10.prev = 11;
+                _context10.t0 = _context10["catch"](5);
+                Message.error(intl.get({
+                  id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlIsInvalid',
+                  defaultMessage: 'YAML 不合法'
+                }));
+                return _context10.abrupt("return");
+              case 15:
+                _this.setState({
+                  saveAndExecuting: true,
+                  invalidateTasks: []
+                });
+                souceseList = JSON.parse(sources).map(function (source) {
+                  source.data.webhook = '';
+                  source.data.trigger = false;
+                  return source;
+                });
+                if (!_this.isPipelineAsCode) {
+                  newSources = addBranchModeFlagForSources(YAML.load(flow), souceseList);
+                  newSources.forEach(function (source) {
+                    if (source.data && typeof source.data.trigger !== 'undefined') {
+                      source.data.isTrigger = source.data.trigger;
+                    }
+                  });
+                  pipeline.pipelineVo.pipelineConfigVo.sources = JSON.stringify(newSources);
+                }
+                pipeline.pipelineVo.pipelineConfigVo.doValidate = false;
+                pipeline.pipelineVo.pipelineConfigVo.triggerVoList = [{
+                  type: 'MANUAL'
+                }];
+                settings = JSON.parse(pipeline.pipelineVo.pipelineConfigVo.settings);
+                settings.originPipelineId = pipeline.pipelineVo.id;
+                pipeline.pipelineVo.pipelineConfigVo.settings = JSON.stringify(settings);
+                flowDetail = _this.isPacEnableGoTemplate ? flow : YAML.load(flow); // 缩略图用的
+                flowContent = _this.isPipelineAsCode ? [flowDetail] : flowDetail.pipeline.map(function (group) {
+                  var groupContent = group.stages.map(function (stage) {
+                    var stageContent = stage.jobs.map(function (job) {
+                      return job.displayName;
+                    });
+                    return stageContent;
+                  });
+                  return groupContent;
+                });
+                if (_this.isPipelineAsCode) {
+                  _context10.next = 29;
+                  break;
+                }
+                if ((JSON.parse(_settings || '{}').globalParams || []).length || flowContent.length || souceseList.length) {
+                  _context10.next = 29;
+                  break;
+                }
+                Message.error({
+                  title: intl.get({
+                    id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TheCurrentTemplateConfigurationIs',
+                    defaultMessage: '当前模板配置为空, 请配置模板'
+                  })
+                });
+                return _context10.abrupt("return");
+              case 29:
+                data = {
+                  pipeline: JSON.stringify(pipeline.pipelineVo),
+                  flowContent: JSON.stringify(flowContent),
+                  templateName: pipeline.pipelineVo.name,
+                  id: isEditTemplate ? _this.props.pipelineTemplateId : null
+                };
+                _this.setState({
+                  loading: true
+                });
+                that = _this;
+                savePipelineFromProps = function savePipelineFromProps() {
+                  _this.props.onSavePipeline(data);
+                  _this.setState({
+                    saveAndExecuting: false,
+                    loading: false,
+                    changed: false
+                  });
+                };
+                savePipelineTpl = function savePipelineTpl() {
+                  return exceed.fetch({
+                    api: 'PipelineTemplate.edit.submit',
+                    data: data
+                  }).then(function (res) {
+                    if (res.successful) {
+                      if (isEditTemplate) {
+                        track({
+                          action: 'update pipeline template',
+                          page: trackPage || 'edit page'
+                        });
+                      } else {
+                        track({
+                          action: 'create pipeline template',
+                          page: trackPage || 'edit page'
+                        });
+                      }
+                      Message.success({
+                        title: intl.get({
+                          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.PipelineTemplateSavedSuccessfully',
+                          defaultMessage: '流水线模板保存成功'
+                        })
+                      });
+                      if (!isEditTemplate) {
+                        that.props.setCustoModel('edit');
+                        that.props.setPipelineTemplateId(res.object);
+                      }
+                      resolve();
+                    }
+                    if (res.errorCode === '403') {
+                      Message.error({
+                        title: intl.get({
+                          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TheOperationFailedNoPermission',
+                          defaultMessage: '操作失败，没有权限'
+                        })
+                      });
+                    }
+                    that.setState({
+                      saveAndExecuting: false,
+                      loading: false,
+                      changed: false
+                    });
+                    reject();
+                  })["catch"](function () {
+                    that.setState({
+                      saveAndExecuting: false,
+                      loading: false
+                    });
+                    reject();
+                  });
+                };
+                isDevEnv && console.log(data);
+                save = _this.props.onSavePipeline ? savePipelineFromProps : savePipelineTpl;
+                save();
+              case 37:
+              case "end":
+                return _context10.stop();
+            }
+          }, _callee10, null, [[5, 11]]);
+        }));
+        return function (_x9, _x10) {
+          return _ref17.apply(this, arguments);
+        };
+      }());
+    };
+    _this.saveAndClose = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+      return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
+          case 0:
+            _context11.next = 2;
+            return _this.submitCustomPipelineTemplate();
+          case 2:
+            _this.props.onClose();
+          case 3:
+          case "end":
+            return _context11.stop();
+        }
+      }, _callee11);
+    }));
+    _this.showGloblaParamsDialog = /*#__PURE__*/function () {
+      var _ref19 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee12(pipeline) {
+        var _this$props$changeCon;
+        var pipelineConfigVo, sources, branchRepoSources, settings, _settings$globalParam, globalParams, runningGlobalParams, latestInstance, contextObj, branchRepoInfoObj;
+        return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+          while (1) switch (_context12.prev = _context12.next) {
+            case 0:
+              pipelineConfigVo = pipeline.pipelineVo.pipelineConfigVo;
+              sources = JSON.parse(pipelineConfigVo.sources);
+              branchRepoSources = sources;
+              branchRepoSources.forEach(function (source) {
+                _this.runParamConfigField.setValue("" + source.sign, source.data.branch);
+              });
+              settings = JSON.parse(pipelineConfigVo.settings);
+              _settings$globalParam = settings.globalParams, globalParams = _settings$globalParam === void 0 ? [] : _settings$globalParam;
+              runningGlobalParams = globalParams.filter(function (globalParam) {
+                return globalParam.runningConfig && !globalParam.masked;
+              });
+              runningGlobalParams.forEach(function (_ref20) {
+                var key = _ref20.key,
+                  value = _ref20.value;
+                _this.runParamConfigField.setValue(key, value);
+              });
+              _context12.next = 10;
+              return _this.getLatestPiepline();
+            case 10:
+              latestInstance = _context12.sent;
+              if (branchRepoSources && branchRepoSources.length > 0 || runningGlobalParams && runningGlobalParams.length > 0 || ((_this$props$changeCon = _this.props.changeConfig) === null || _this$props$changeCon === void 0 ? void 0 : _this$props$changeCon.ciType) === 'APP_RELEASE') {
+                if (latestInstance && latestInstance.context) {
+                  contextObj = JSON.parse(latestInstance.context);
+                  if (contextObj.branchRepoInfo) {
+                    branchRepoInfoObj = JSON.parse(contextObj.branchRepoInfo);
+                    branchRepoSources.forEach(function (ele) {
+                      var matchedBranch = branchRepoInfoObj.find(function (it) {
+                        return it.sign === ele.sign;
+                      });
+                      if (matchedBranch) {
+                        ele.data.aoneFlow = matchedBranch;
+                        ele.data.aoneFlow.needCreateBranch = true;
+                        if (latestInstance.flowInstVo && latestInstance.flowInstVo.result && latestInstance.flowInstVo.result.REPO_URL) {
+                          if (latestInstance.flowInstVo.result.REPO_URL === ele.data.repo && latestInstance.flowInstVo.result.RELEASE_BRANCH_NAME) {
+                            ele.data.aoneFlow.releaseBranch = {
+                              branchName: latestInstance.flowInstVo.result.RELEASE_BRANCH_NAME
+                            };
+                            ele.data.aoneFlow.needCreateBranch = false;
+                          }
+                        }
+                      } else {
+                        ele.data.aoneFlow = {
+                          needCreateBranch: true
+                        };
+                      }
+                    });
+                  }
+                }
+                _this.setState({
+                  configDailogVisible: true,
+                  branchRepoConfigs: branchRepoSources,
+                  runningGlobalParams: runningGlobalParams,
+                  latestInstance: latestInstance
+                });
+              } else {
+                _this.setState({
+                  latestInstance: latestInstance,
+                  pipelineRunConfirmVisible: true
+                });
+              }
+            case 12:
+            case "end":
+              return _context12.stop();
+          }
+        }, _callee12);
+      }));
+      return function (_x11) {
+        return _ref19.apply(this, arguments);
+      };
+    }();
+    /** @deprecated */
+    _this.checkYaml = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+      var pipelineVo, _yield$exceed$fetch3, successful, object, hasError, formatErrorList;
+      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
+          case 0:
+            pipelineVo = _this.state.pipeline.pipelineVo;
+            _context13.prev = 1;
+            YAML.load(pipelineVo.pipelineConfigVo.flow);
+            _context13.next = 9;
+            break;
+          case 5:
+            _context13.prev = 5;
+            _context13.t0 = _context13["catch"](1);
+            Message.error({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlCheckFailed',
+                defaultMessage: '校验不通过'
+              }),
+              content: _context13.t0.message,
+              duration: 6000
+            });
+            return _context13.abrupt("return");
+          case 9:
+            _this.setState({
+              yamlBackendValidateLoading: true
+            });
+            _context13.next = 12;
+            return exceed.fetch({
+              api: 'Pipeline2.checkYaml',
+              data: {
+                yaml: pipelineVo.pipelineConfigVo.flow,
+                pipelineId: _this.props.pipelineId
+              }
+            });
+          case 12:
+            _yield$exceed$fetch3 = _context13.sent;
+            successful = _yield$exceed$fetch3.successful;
+            object = _yield$exceed$fetch3.object;
+            if (successful) {
+              _context13.next = 17;
+              break;
+            }
+            return _context13.abrupt("return");
+          case 17:
+            hasError = object.hasError, formatErrorList = object.formatErrorList;
+            if (!hasError && !_this.state.feValidateMarkers.length) {
+              // 只有前端校验也没有错误，才会显示校验通过
+              Message.success({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.YamlCheckSuccessful',
+                  defaultMessage: '校验通过'
+                })
+              });
+              _this.setState({
+                checkYamlBackendErrorList: [],
+                yamlBackendValidateLoading: false
+              });
+            } else {
+              _this.setState({
+                checkYamlBackendErrorList: formatErrorList,
+                yamlBackendValidateLoading: false
+              });
+            }
+          case 19:
+          case "end":
+            return _context13.stop();
+        }
+      }, _callee13, null, [[1, 5]]);
+    }));
+    /** go template 预览内容的校验，传任意的 yaml */
+    _this.checkYamlByContent = /*#__PURE__*/function () {
+      var _ref22 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee14(yaml) {
+        var _yield$exceed$fetch4, successful, object, hasError, formatErrorList;
+        return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+          while (1) switch (_context14.prev = _context14.next) {
+            case 0:
+              _context14.prev = 0;
+              YAML.load(yaml);
+              _context14.next = 7;
+              break;
+            case 4:
+              _context14.prev = 4;
+              _context14.t0 = _context14["catch"](0);
+              return _context14.abrupt("return", false);
+            case 7:
+              _this.setState({
+                yamlBackendValidateLoading: true
+              });
+              _context14.next = 10;
+              return exceed.fetch({
+                api: 'Pipeline2.checkYaml',
+                data: {
+                  yaml: yaml,
+                  pipelineId: _this.props.pipelineId
+                }
+              });
+            case 10:
+              _yield$exceed$fetch4 = _context14.sent;
+              successful = _yield$exceed$fetch4.successful;
+              object = _yield$exceed$fetch4.object;
+              if (successful) {
+                _context14.next = 15;
+                break;
+              }
+              return _context14.abrupt("return", false);
+            case 15:
+              hasError = object.hasError, formatErrorList = object.formatErrorList;
+              _this.setState({
+                checkYamlBackendErrorList: formatErrorList,
+                yamlBackendValidateLoading: false
+              });
+              return _context14.abrupt("return", !hasError);
+            case 18:
+            case "end":
+              return _context14.stop();
+          }
+        }, _callee14, null, [[0, 4]]);
+      }));
+      return function (_x12) {
+        return _ref22.apply(this, arguments);
+      };
+    }();
+    _this.submitAndExecutePipeline = /*#__PURE__*/function () {
+      var _ref23 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee15(log, saveCallback) {
+        var _this2, _this2$state, p, originalSource, _this2$props, _this2$props2, trackPage, pipelineId, pipeline, _yield$_this$pipeline3, pipelineNotErr, pipelineErrs, pipelineErrLen, pipelineType, sourcesNotErr, path, _path2, pipelineConfigVo, settings, newSources, data, successful, _pipeline;
+        return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+          while (1) switch (_context15.prev = _context15.next) {
+            case 0:
+              _context15.next = 2;
+              return new Promise(function (r) {
+                return setTimeout(r, 600);
+              });
+            case 2:
+              _this2 = _this, _this2$state = _this2.state, p = _this2$state.pipeline, originalSource = _this2$state.originalSource, _this2$props = _this2.props, _this2$props2 = _this2$props === void 0 ? {} : _this2$props, trackPage = _this2$props2.trackPage, pipelineId = _this2$props2.pipelineId;
+              pipeline = cloneDeep(p);
+              _context15.next = 6;
+              return _this.pipelineValidate();
+            case 6:
+              _yield$_this$pipeline3 = _context15.sent;
+              pipelineNotErr = _yield$_this$pipeline3.pipelineNotErr;
+              pipelineErrs = _yield$_this$pipeline3.pipelineErrs;
+              pipelineErrLen = _yield$_this$pipeline3.pipelineErrLen;
+              pipelineType = pipeline.pipelineVo ? pipeline.pipelineVo.type : '';
+              if (!(pipelineType !== 'PIPELINEASCODE')) {
+                _context15.next = 15;
+                break;
+              }
+              _context15.next = 14;
+              return _this.sourcesValidate();
+            case 14:
+              sourcesNotErr = _context15.sent;
+            case 15:
+              if (pipelineNotErr) {
+                _this.setState({
+                  invalidateTasks: []
+                });
+              } else {
+                _this.onErrors(pipelineErrs);
+              }
+              if (!sourcesNotErr) {
+                path = 'pipelineVo.pipelineConfigVo.sources';
+                set(pipeline, path, originalSource);
+              }
+
+              // 判断pipeline参数
+              if (!pipelineNotErr) {
+                _path2 = 'pipelineVo.pipelineConfigVo.flow';
+                set(pipeline, _path2, getOriginalFlow(pipelineId) || get(pipeline, _path2));
+              }
+              _this.setState({
+                executinButtonDisable: true
+              });
+              pipelineConfigVo = pipeline.pipelineVo.pipelineConfigVo;
+              settings = JSON.parse(pipelineConfigVo.settings);
+              if (settings.globalParams) {
+                settings.globalParams.forEach(function (globalParam) {
+                  if (!globalParam.masked) {
+                    globalParam.encrypted = false;
+                  }
+                });
+                pipelineConfigVo.settings = JSON.stringify(settings);
+              }
+              if (!_this.isPipelineAsCode) {
+                newSources = addBranchModeFlagForSources(YAML.load(pipelineConfigVo.flow), JSON.parse(pipelineConfigVo.sources));
+                newSources.forEach(function (source) {
+                  if (source.data && typeof source.data.trigger !== 'undefined') {
+                    source.data.isTrigger = source.data.trigger;
+                  }
+                });
+                pipelineConfigVo.sources = JSON.stringify(newSources);
+              }
+              if (saveParamsValidate(pipeline)) {
+                _context15.next = 25;
+                break;
+              }
+              return _context15.abrupt("return");
+            case 25:
+              if (sourcesNotErr && pipelineNotErr && pipelineType !== 'PIPELINEASCODE') {
+                _this.showGloblaParamsDialog(pipeline);
+              }
+              _this.setState({
+                loading: true
+              });
+              pipelineConfigVo.changeLog = log || '';
+              data = {
+                pipeline: JSON.stringify(pipeline.pipelineVo),
+                refObjectList: JSON.stringify(extractRel(pipeline))
+              };
+              if (!(pipelineType === 'PIPELINEASCODE')) {
+                _context15.next = 42;
+                break;
+              }
+              _this.setState({
+                saveAndExecBtnLoading: true
+              });
+              successful = true;
+              if (_this.getIsUnedited()) {
+                _context15.next = 36;
+                break;
+              }
+              _context15.next = 35;
+              return _this.submitPipeline2(saveCallback, log);
+            case 35:
+              successful = _context15.sent;
+            case 36:
+              if (!successful) {
+                _context15.next = 41;
+                break;
+              }
+              _context15.next = 39;
+              return _this.fetchPipeline(true);
+            case 39:
+              _pipeline = _context15.sent;
+              _this.showGloblaParamsDialog(_pipeline);
+            case 41:
+              return _context15.abrupt("return", _this.setState({
+                saveAndExecBtnLoading: false,
+                executinButtonDisable: false
+              }));
+            case 42:
+              exceed.fetch({
+                api: 'Pipeline.edit.submitPipeline',
+                data: data
+              }).then(function (res) {
+                if (res.successful) {
+                  if (saveCallback) {
+                    saveCallback();
+                  }
+                  _this.pipelineSaveSucceed({
+                    pipelineNotErr: pipelineNotErr,
+                    flow: pipelineConfigVo.flow,
+                    sourcesNotErr: sourcesNotErr,
+                    pipelineErrLen: pipelineErrLen
+                  });
+                  _this.setState({
+                    loading: false,
+                    executinButtonDisable: false,
+                    originalSource: pipelineConfigVo.sources
+                  });
+                  track({
+                    action: 'save and execute pipeline',
+                    page: trackPage || 'edit page'
+                  });
+                }
+              })["catch"](function () {
+                _this.setState({
+                  loading: false
+                });
+              });
+            case 43:
+            case "end":
+              return _context15.stop();
+          }
+        }, _callee15);
+      }));
+      return function (_x13, _x14) {
+        return _ref23.apply(this, arguments);
+      };
+    }();
+    _this.executePipeline = function () {
+      var _this$state3 = _this.state,
+        _this$state3$branchRe = _this$state3.branchRepoConfigs,
+        branchRepoConfigs = _this$state3$branchRe === void 0 ? [] : _this$state3$branchRe,
+        pipeline = _this$state3.pipeline;
+      var resolve;
+      var reject;
+      var promiseForSuccessRequest = new Promise(function (res, rej) {
+        resolve = res;
+        reject = rej;
+      });
+      _this.runParamConfigField.validate(function (errors) {
+        if (errors) {
+          var messages = Object.keys(errors).flatMap(function (e) {
+            return errors[e].errors;
+          }).join(',');
+          reject();
+          return Message.warning({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ConfigurationItemErrorMessages',
+              defaultMessage: '配置项错误：{messages}'
+            }, {
+              messages: messages
+            })
+          });
+        }
+        var params = Object.assign({}, _this.runParamConfigField.getValues());
+        var _ref24 = branchRepoConfigs.find(function (_ref25) {
+            var _ref25$data = _ref25.data,
+              data = _ref25$data === void 0 ? {} : _ref25$data;
+            return data.isBranchMode && data.baseBranch;
+          }) || {},
+          _ref24$data = _ref24.data,
+          branchData = _ref24$data === void 0 ? {} : _ref24$data,
+          sign = _ref24.sign,
+          name = _ref24.name;
+        if (branchData.isBranchMode && !get(branchData, 'aoneFlow.featureBranchs', []).length) {
+          reject();
+          return Message.warning({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.AddARunningBranch',
+              defaultMessage: '请添加运行分支'
+            })
+          });
+        }
+        if (branchData.isBranchMode && get(branchData, 'aoneFlow.featureBranchs', []).length) {
+          var branchRepoInfo = [_extends({}, branchData.aoneFlow, {
+            repo: branchData.repo,
+            baseBranch: {
+              branchName: branchData.baseBranch
+            },
+            needCreateBranch: branchData.aoneFlow.needCreateBranch,
+            sign: sign,
+            name: name
+          })].filter(function (_ref26) {
+            var s = _ref26.sign;
+            return !!s;
+          });
+          params.branchRepoInfo = JSON.stringify(branchRepoInfo);
+        }
+        _this.setState({
+          runPipelineButtonLoading: true,
+          loading: true
+        });
+        console.log(params, 'params ');
+        if (params.signArr) {
+          var signArr = params.signArr;
+          signArr.forEach(function (item) {
+            delete params[item];
+          });
+          delete params.signArr;
+        }
+        var data = {
+          params: JSON.stringify(params)
+        };
+        var pipelineType = pipeline.pipelineVo ? pipeline.pipelineVo.type : '';
+        if (pipelineType === 'PIPELINEASCODE') {
+          _this.executePipeline2(_this.props.pipelineId, data).then(resolve, reject);
+          return;
+        }
+        exceed.fetch({
+          api: 'Pipeline.execute',
+          params: {
+            id: _this.state.pipeline.pipelineVo.id
+          },
+          data: data
+        }).then(function (result) {
+          _this.setState({
+            runPipelineButtonLoading: false
+          });
+          if (result.successful && result.object) {
+            resolve();
+            Message.success({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.PipelineTriggered',
+                defaultMessage: '流水线已触发'
+              })
+            });
+            _this.handleNewbieTaskStatus();
+            // navigateWithContexPath(`/pipelines/${this.state.pipeline.pipelineVo.id}/current`);
+            _this.props.onClose();
+            _this.cleanDrfatCache();
+            // 更改当前企业为运行过流水线
+            window.AK_GLOBAL.alreadyRunPipeline = 'true';
+            track({
+              action: 'run pipeline success',
+              page: _this.props.trackPage || 'edit page',
+              daysinceenterflow: intervalEnterTime()
+            });
+          } else {
+            reject();
+          }
+          _this.setState({
+            loading: false,
+            changed: false
+          });
+        })["catch"](function () {
+          return reject();
+        });
+      });
+      return promiseForSuccessRequest;
+    };
+    _this.handleNewbieTaskStatus = function () {
+      var cache = getLocalStorageCache(NEWBIE_TASK_STATUS) || {};
+      setLocalStorageCache(NEWBIE_TASK_STATUS, _extends({}, cache, {
+        create_pipeline: true,
+        update: true
+      }));
+      window.AK_GLOBAL.alreadyRunPipeline = 'true';
+    };
+    _this.configDailogClose = function () {
+      _this.setState(function (state) {
+        return _extends({}, state, {
+          configDailogVisible: false
+        });
+      });
+      _this.runParamConfigField.reset();
+      _this.runParamConfigField.setValue('FLOW_INST_RUNNING_COMMENT', '');
+    };
+    _this.openFirstErrorMenu = function (time) {
+      if (time === void 0) {
+        time = null;
+      }
+      var _ref27 = document.getElementsByClassName('flow-job-capsule--error') || [],
+        errorCaspsule = _ref27[0];
+      if (!errorCaspsule) return;
+      _this.flowRef && _this.flowRef.openFlowEditMenu(errorCaspsule, {
+        time: time
+      });
+    };
+    _this.positionError = function () {
+      if (_this.state.navValue === 'flow') return _this.openFirstErrorMenu(50);
+      _this.setState({
+        navValue: 'flow'
+      }, _this.openFirstErrorMenu);
+    };
+    // 点击「仅保存」按钮
+    _this.onClickPipelineSaveBtn = function (log, saveCallback) {
+      track({
+        action: 'pipelineSaveBtn-click',
+        type: _this.isPipelineAsCode ? 'pac' : 'old' // 区分pac或老编辑页
+      });
+
+      // todo
+      // if (!this.state.pacFlowValid) {
+      //   Message.error('YAML 内容不合法，请检查后重试');
+      //   return;
+      // }
+
+      if (_this.isPipelineAsCode) {
+        _this.submitPipeline2(saveCallback, log);
+        return;
+      }
+      _this.submitPipeline(function () {
+        if (saveCallback) {
+          saveCallback();
+        }
+        track({
+          action: 'save pipeline',
+          page: _this.props.trackPage || 'edit page',
+          daysinceenterflow: intervalEnterTime()
+        });
+      }, true, log);
+    };
+    _this.renderSaveBtn = function () {
+      var _this3 = _this,
+        _this3$state = _this3.state,
+        pipeline = _this3$state.pipeline,
+        blankFlow = _this3$state.blankFlow,
+        _this3$props = _this3.props,
+        _this3$props2 = _this3$props === void 0 ? {} : _this3$props,
+        type = _this3$props2.type,
+        model = _this3$props2.model;
+
+      // yml、可视化切换按钮
+      var code2UISwitcher = getFeature('mock.pac.edit.ui') ? /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'inline-block',
+          verticalAlign: 'middle',
+          marginRight: 10
+        }
+      }, /*#__PURE__*/React.createElement(Tab, {
+        size: 'small',
+        shape: "capsule",
+        activeKey: _this.state.flowEditMode,
+        onChange: function onChange(v) {
+          _this.setState({
+            flowEditMode: v
+          });
+        }
+      }, /*#__PURE__*/React.createElement(Tab.Item, {
+        key: "ui",
+        title: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "branch-line"
+        })
+      }), /*#__PURE__*/React.createElement(Tab.Item, {
+        key: "code",
+        title: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "code-line"
+        })
+      }))) : null;
+      var goTemplatePreviewSwitchContainer = /*#__PURE__*/React.createElement("div", {
+        // 这个切换用 react portal 在子组件里渲染的
+        id: goTemplatePreviewSwitchContainerId,
+        style: {
+          display: _this.isPacEnableGoTemplate ? 'inline-block' : 'none',
+          verticalAlign: 'middle',
+          marginRight: 10
+        }
+      });
+      var templateBtn = /*#__PURE__*/React.createElement(React.Fragment, null, _this.isPipelineAsCode && code2UISwitcher, goTemplatePreviewSwitchContainer, /*#__PURE__*/React.createElement(Button, {
+        key: "template-btn",
+        type: window.__isEmbedInAppstack ? 'primary' : 'normal'
+        // tpl 模板保存卡点
+        ,
+        disabled: !pipeline.pipelineVo,
+        onClick: _this.submitCustomPipelineTemplate
+      }, model === 'edit' ? intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.UpdateTemplate',
+        defaultMessage: '更新模板'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SaveTemplate',
+        defaultMessage: '保存模板'
+      })), window.__isEmbedInAppstack || /*#__PURE__*/React.createElement(Button, {
+        style: {
+          marginLeft: 8
+        }
+        // tpl 模板保存卡点
+        ,
+        disabled: !pipeline.pipelineVo,
+        type: "primary",
+        onClick: _this.saveAndClose
+      }, model === 'edit' ? intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.UpdateTemplateAndClose',
+        defaultMessage: '更新并关闭'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SaveTemplateAndClose',
+        defaultMessage: '保存并关闭'
+      })));
+      var pipelineSaveBtn = function pipelineSaveBtn(disabled) {
+        return /*#__PURE__*/React.createElement(ButtonTooltip, {
+          tooltip: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ShortcutKeys',
+            defaultMessage: '快捷键'
+          }), ' ', /*#__PURE__*/React.createElement(InlineCode, {
+            style: {
+              marginLeft: 4
+            },
+            dark: true
+          }, "Cmd"), ' ', "+ ", /*#__PURE__*/React.createElement(InlineCode, {
+            dark: true
+          }, "S")),
+          onlyDisabled: false,
+          align: 'b',
+          type: window.__isEmbedInAppstack ? 'primary' : 'normal',
+          key: " pipeline-save",
+          disabled: disabled,
+          loading: _this.state.saveBtnLoading,
+          style: {
+            marginRight: 10
+          },
+          onClick: function onClick() {
+            if (_this.isPipelineAsCode && _this.getIsUnedited()) {
+              _this.fakeSaveLoading();
+              return;
+            }
+            if (_this.isPipelineAsCode && _this.state.changed) {
+              _this.setState({
+                saveVisible: true,
+                isSaveAndRun: false
+              });
+            } else {
+              _this.onClickPipelineSaveBtn();
+            }
+          }
+        }, window.__isEmbedInAppstack ? intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Save',
+          defaultMessage: '保存'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SaveOnly',
+          defaultMessage: '仅保存'
+        }));
+      };
+      var pipelineSaveAndExecuteBtn = function pipelineSaveAndExecuteBtn(disabled) {
+        if (disabled === void 0) {
+          disabled = false;
+        }
+        return /*#__PURE__*/React.createElement(Button, {
+          type: "primary",
+          key: " pipeline-saveAndExecute",
+          disabled: disabled,
+          loading: _this.state.saveAndExecBtnLoading,
+          onClick: function onClick() {
+            track({
+              action: 'pipelineSaveAndExecuteBtn-click',
+              type: _this.isPipelineAsCode ? 'pac' : 'old' // 区分pac或老编辑页
+            });
+
+            // tpl
+            // if (!this.state.pacFlowValid) {
+            //   Message.error('YAML 内容不合法，请检查后重试');
+            //   return;
+            // }
+            if (_this.isPipelineAsCode && _this.state.changed) {
+              _this.setState({
+                saveVisible: true,
+                isSaveAndRun: true
+              });
+            } else {
+              _this.submitAndExecutePipeline();
+            }
+          }
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.SaveAndRun',
+          defaultMessage: '保存并运行'
+        }));
+      };
+
+      /** PAC 校验按钮 */
+      var validateButtonIfNeeded = _this.isPipelineAsCode && _this.state.navValue === 'flow' && !_this.isPacEnableGoTemplate ? /*#__PURE__*/React.createElement(ButtonTooltip, {
+        tooltip: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ShortcutKeys',
+          defaultMessage: '快捷键'
+        }), ' ', /*#__PURE__*/React.createElement(InlineCode, {
+          style: {
+            marginLeft: 4
+          },
+          dark: true
+        }, "Cmd"), ' ', "+ ", /*#__PURE__*/React.createElement(InlineCode, {
+          dark: true
+        }, "B")),
+        loading: _this.state.yamlBackendValidateLoading,
+        onlyDisabled: false,
+        align: 'b',
+        id: "guide-validate",
+        type: "normal",
+        key: " pipeline-validate",
+        style: {
+          marginRight: 10
+        },
+        onClick: function onClick() {
+          track({
+            action: 'pacValidateBtn-click'
+          });
+
+          // tpl
+          // if (!this.state.pacFlowValid) {
+          //   Message.error('YAML 内容不合法，请检查后重试');
+          //   return;
+          // }
+          _this.checkYaml();
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Verification',
+        defaultMessage: '校验'
+      })) : null;
+      var pipelineBtnAry = [];
+      if (!window.__isEmbedInAppstack) {
+        pipelineBtnAry.push(pipelineSaveAndExecuteBtn());
+      }
+      var pipelineDisabledBtnAry = [tooltip(pipelineSaveAndExecuteBtn(true), intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ThePipelineRequiresAtLeast',
+        defaultMessage: '流水线至少需要一个任务'
+      }), 'saveAndExecute_t')];
+      if (alreadyRunPipeline() === 'true') {
+        pipelineBtnAry.unshift(pipelineSaveBtn());
+        pipelineDisabledBtnAry.unshift(tooltip(pipelineSaveBtn(true), intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ThePipelineRequiresAtLeast',
+          defaultMessage: '流水线至少需要一个任务'
+        }), 'save_t'));
+      }
+
+      // PAC流水线，且在「流程配置」Tab时，显示校验按钮和可视化切换（根据开关显示）
+      if (_this.isPipelineAsCode && _this.state.navValue === 'flow') {
+        pipelineBtnAry.unshift(validateButtonIfNeeded);
+        pipelineBtnAry.unshift(code2UISwitcher);
+        pipelineBtnAry.unshift(goTemplatePreviewSwitchContainer);
+      }
+      pipelineBtnAry.filter(Boolean);
+      var pipelineBtn = (!pipeline.pipelineVo || blankFlow) && !_this.isPipelineAsCode ? pipelineDisabledBtnAry : pipelineBtnAry;
+      return type === 'template' ? templateBtn : pipelineBtn;
+    };
+    _this.fieldSubscribeies = {};
+    _this.timer = null;
+    _this.field = new Field(_this, {
+      // autoUnmount: false,
+      onChange: function onChange(name) {
+        var subscribes = _this.fieldSubscribeies[name];
+        if (subscribes) {
+          // this.field.reset(Object.keys(subscribes));
+          Object.keys(subscribes).forEach(function (key) {
+            subscribes[key]();
+          });
+        }
+        // 节流校验
+        if (_this.timer) clearTimeout(_this.timer);
+        _this.timer = setTimeout(function () {
+          _this.timer = null;
+          _this.changedValidate();
+        }, 600);
+      }
+    });
+
+    // dbg
+    window.__debug_field = _this.field;
+    _this.runParamConfigField = new Field(_this, {
+      autoUnmount: false
+    });
+    _this.state = getDefaultState(props);
+    return _this;
+  }
+  _inheritsLoose(PipelineFlowDialog, _Component);
+  var _proto = PipelineFlowDialog.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
+    console.count('componentWillReceiveProps');
+    console.log(newProps);
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    var _this4 = this;
+    if (this.props.type !== 'template') {
+      this.checkPermission();
+    }
+    if (this.props.type !== 'template' || this.props.model === 'add') {
+      this.checkPreviewUnSavedContent().then(function () {
+        _this4.fetchPipeline();
+      });
+    } else if (this.props.type === 'template' && this.props.model === 'edit') {
+      if (this.props.pipelineTemplateId) {
+        this.fetchCustomPipelineTemplate();
+      } else if (this.props.getPipeline) {
+        this.fetchPipeline();
+        console.log('fetch pipeline');
+      } else {
+        throw new Error('============ params error ============');
+      }
+      // todo
+    } else if (this.props.model === 'create' || this.props.model === 'create-pac') {
+      this.initCreateCustomPipelineTemplate();
+    }
+    this.fetchSteps();
+    this.fetchPlugins();
+
+    // 注册快捷键
+    document.addEventListener('keydown', this.bindShortcuts);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener('keydown', this.bindShortcuts);
+  };
+  _proto.checkPreviewUnSavedContent = function checkPreviewUnSavedContent() {
+    var _this5 = this;
+    return new Promise(function (resolve, reject) {
+      _this5.setState({
+        requesting: true
+      });
+      var preUnSavedPipeline = _this5.getDrfatCache();
+      if (preUnSavedPipeline) {
+        var _ref28 = preUnSavedPipeline || {},
+          _ref28$pipelineVo = _ref28.pipelineVo,
+          _ref28$pipelineVo2 = _ref28$pipelineVo === void 0 ? {} : _ref28$pipelineVo,
+          _ref28$pipelineVo2$pi = _ref28$pipelineVo2.pipelineConfigVo,
+          _ref28$pipelineVo2$pi2 = _ref28$pipelineVo2$pi === void 0 ? {} : _ref28$pipelineVo2$pi,
+          sources = _ref28$pipelineVo2$pi2.sources;
+        setTimeout(function () {
+          Dialog.confirm({
+            messageProps: {
+              type: 'notice'
+            },
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.RestoreUnsavedContent',
+              defaultMessage: '恢复未保存的内容'
+            }),
+            content: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.IndicatesThatTheLastEditing',
+              defaultMessage: '检测到上次编辑流水线未保存，是否恢复到上次编辑内容'
+            }),
+            onOk: function onOk() {
+              _this5.cleanDrfatCache();
+              _this5.setState({
+                pipeline: preUnSavedPipeline,
+                changed: true,
+                blankFlow: false,
+                originalSource: sources
+              }, function () {
+                setTimeout(function () {
+                  _this5.doValidate();
+                }, 1000);
+                reject();
+                _this5.setState({
+                  requesting: false
+                });
+              });
+            },
+            onCancel: function onCancel() {
+              _this5.cleanDrfatCache();
+              clearOriginalFlow(_this5.props.pipelineId);
+              resolve();
+            },
+            onClose: function onClose() {
+              _this5.cleanDrfatCache();
+              clearOriginalFlow(_this5.props.pipelineId);
+              resolve();
+            }
+          });
+        }, 1000);
+      } else {
+        resolve();
+      }
+    });
+  };
+  _proto.render = function render() {
+    var _this6 = this;
+    var _this$state4 = this.state,
+      loading = _this$state4.loading,
+      configDailogVisible = _this$state4.configDailogVisible,
+      branchRepoConfigs = _this$state4.branchRepoConfigs,
+      runningGlobalParams = _this$state4.runningGlobalParams,
+      runPipelineButtonLoading = _this$state4.runPipelineButtonLoading,
+      executinButtonDisable = _this$state4.executinButtonDisable,
+      _this$state4$latestIn = _this$state4.latestInstance,
+      latestInstance = _this$state4$latestIn === void 0 ? {} : _this$state4$latestIn,
+      pipelineRunConfirmVisible = _this$state4.pipelineRunConfirmVisible,
+      saveVisible = _this$state4.saveVisible,
+      saveBtnLoading = _this$state4.saveBtnLoading,
+      isSaveAndRun = _this$state4.isSaveAndRun,
+      sourcePipeline = _this$state4.sourcePipeline,
+      pipeline = _this$state4.pipeline;
+
+    // dbg
+    // window._pipeline = this.state.pipeline;
+
+    var visible = this.props.visible;
+    var prevRunningComment = JSON.parse((latestInstance || {}).context || '{}').FLOW_INST_RUNNING_COMMENT || '';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
+      v2: false,
+      className: PREFIX,
+      visible: visible,
+      footer: false,
+      closeable: false,
+      title: false,
+      loading: loading,
+      width: "100vw",
+      closeMode: [],
+      animation: {
+        "in": 'expandInDown',
+        out: 'expandOutUp'
+      }
+    }, this.header, this.content), !!configDailogVisible && /*#__PURE__*/React.createElement(RunParamConfigDialog, {
+      visible: configDailogVisible,
+      onClose: this.configDailogClose,
+      branchRepoConfigs: branchRepoConfigs,
+      setBranchRepoConfigs: this.setBranchRepoConfigs,
+      runningGlobalParams: runningGlobalParams,
+      onOk: this.executePipeline,
+      field: this.runParamConfigField,
+      loading: runPipelineButtonLoading,
+      disabled: executinButtonDisable,
+      prevRunningComment: prevRunningComment,
+      pipelineId: this.props.pipelineId
+    }), !!pipelineRunConfirmVisible && /*#__PURE__*/React.createElement(PipelineRunConfirm, _extends({
+      visible: true,
+      loading: runPipelineButtonLoading,
+      extraDisabled: !prevRunningComment,
+      onExtraClick: function onExtraClick() {
+        _this6.runParamConfigField.setValue(pipelineRunCommitKey, removeDoubleQuote(prevRunningComment));
+      },
+      onClose: function onClose() {
+        _this6.setState({
+          pipelineRunConfirmVisible: false,
+          loading: false
+        });
+        _this6.runParamConfigField.setValue(pipelineRunCommitKey, '');
+      },
+      onOk: this.executePipeline
+    }, this.runParamConfigField.init(pipelineRunCommitKey))), saveVisible && /*#__PURE__*/React.createElement(PipelineSaveDiff, {
+      visible: saveVisible,
+      setVisible: function setVisible(v) {
+        return _this6.setState({
+          saveVisible: v
+        });
+      },
+      saveLoading: saveBtnLoading,
+      saveCallback: isSaveAndRun ? this.submitAndExecutePipeline : this.onClickPipelineSaveBtn,
+      sourcePipeline: sourcePipeline,
+      pipeline: pipeline,
+      isSaveAndRun: isSaveAndRun
+    }));
+  };
+  return _createClass(PipelineFlowDialog, [{
+    key: "isPipelineAsCode",
+    get: function get() {
+      var _this$state$pipeline$;
+      return ((_this$state$pipeline$ = this.state.pipeline.pipelineVo) === null || _this$state$pipeline$ === void 0 ? void 0 : _this$state$pipeline$.type) === 'PIPELINEASCODE';
+      //  || this.state.pipeline?.pipelineVo?.pipelineConfigVo?.pipelineType === 'PIPELINEASCODE'
+    }
+  }, {
+    key: "isPacEnableGoTemplate",
+    get: function get() {
+      var _this$state$pipeline$2, _this$state$pipeline$3;
+      return this.isPipelineAsCode && isStringWithTemplateMark((_this$state$pipeline$2 = this.state.pipeline.pipelineVo) === null || _this$state$pipeline$2 === void 0 ? void 0 : (_this$state$pipeline$3 = _this$state$pipeline$2.pipelineConfigVo) === null || _this$state$pipeline$3 === void 0 ? void 0 : _this$state$pipeline$3.flow);
+    }
+  }, {
+    key: "header",
+    get: function get() {
+      var _this7 = this;
+      var _this$state5 = this.state,
+        navValue = _this$state5.navValue,
+        _this$state5$invalida = _this$state5.invalidateTasks,
+        invalidateTasks = _this$state5$invalida === void 0 ? [] : _this$state5$invalida,
+        _this$state5$pipeline = _this$state5.pipeline,
+        pipeline = _this$state5$pipeline === void 0 ? {} : _this$state5$pipeline,
+        pipelineNameChangeLoading = _this$state5.pipelineNameChangeLoading,
+        _this$props2 = this.props,
+        _this$props3 = _this$props2 === void 0 ? {} : _this$props2,
+        type = _this$props3.type,
+        trackPage = _this$props3.trackPage;
+      var enableYAML = /yaml=true/.test(location.search);
+      var navDataSource = [{
+        text: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.ProcessConfiguration',
+          defaultMessage: '流程配置'
+        }),
+        key: 'flow',
+        action: 'open flow chart dailog'
+      }, {
+        text: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.VariablesAndCaches',
+          defaultMessage: '变量和缓存'
+        }),
+        key: 'globalVar',
+        action: 'open global params dailog'
+      }];
+      if (type !== 'template') {
+        navDataSource.splice(1, 0, {
+          text: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.TriggerSettings',
+            defaultMessage: '触发设置'
+          }),
+          key: 'scheduler',
+          action: 'open timer setting dialog'
+        });
+        navDataSource.unshift({
+          text: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.BasicInformation',
+            defaultMessage: '基本信息'
+          }),
+          key: 'baseInfo',
+          action: 'open base info dailog'
+        });
+      }
+      var getEditableLabel = function getEditableLabel() {
+        return /*#__PURE__*/React.createElement(EditableLabel, {
+          style: {
+            margin: 0
+          },
+          hasLimitHint: true,
+          loading: type === 'template' ? false : pipelineNameChangeLoading,
+          value: (pipeline.pipelineVo || {}).name || '_label_loading_',
+          onChange: function onChange(value) {
+            type !== 'template' && _this7.setState({
+              pipelineNameChangeLoading: true
+            });
+            _this7.onNameChange(value, function () {
+              track({
+                action: 'save pipeline name',
+                page: trackPage || 'edit page',
+                daysinceenterflow: intervalEnterTime()
+              });
+              type !== 'template' && _this7.setState({
+                pipelineNameChangeLoading: false
+              });
+            });
+          }
+        });
+      };
+      return /*#__PURE__*/React.createElement("header", {
+        className: PREFIX + "__header"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__header--left"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        trigger: /*#__PURE__*/React.createElement("div", {
+          onClick: this.onClose,
+          className: 'btn'
+        }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "arrow-left-line"
+        }))
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.Return',
+        defaultMessage: '返回'
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "title"
+      }, getEditableLabel())), /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__header--middle"
+      }, /*#__PURE__*/React.createElement(CustomTab, {
+        shape: 'wrapped',
+        size: 'small',
+        value: navValue,
+        dataSource: navDataSource,
+        onChange: function onChange(_ref29) {
+          var key = _ref29.key,
+            action = _ref29.action;
+          _this7.setState({
+            navValue: key
+          });
+          track({
+            action: action,
+            page: trackPage || 'edit page',
+            daysinceenterflow: intervalEnterTime()
+          });
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__header--right"
+      }, enableYAML && /*#__PURE__*/React.createElement(Switch, {
+        checked: this.state.mode === YAML_MODE,
+        onChange: function onChange(checked) {
+          return _this7.setState({
+            mode: checked ? YAML_MODE : LIST_MODE
+          });
+        }
+      }), !!invalidateTasks.length && /*#__PURE__*/React.createElement("span", {
+        className: cls('text', 'error', {
+          link: true
+        }),
+        onClick: this.positionError
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "info-fill",
+        style: {
+          color: 'red',
+          marginRight: 6
+        }
+      }), intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.InvalidatetasksloppyTasksAreNotConfigured',
+        defaultMessage: '{invalidateTasksLength} 项任务未配置完'
+      }, {
+        invalidateTasksLength: invalidateTasks.length
+      })), this.renderSaveBtn(), window.__isEmbedInAppstack && /*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "false-line",
+        onClick: this.onClose
+      })));
+    }
+  }, {
+    key: "content",
+    get: function get() {
+      var _this8 = this,
+        _pipeline$pipelineVo6;
+      var _this$state6 = this.state,
+        navValue = _this$state6.navValue,
+        requesting = _this$state6.requesting,
+        pipeline = _this$state6.pipeline,
+        invalidateTasks = _this$state6.invalidateTasks,
+        mode = _this$state6.mode,
+        checkYamlBackendErrorList = _this$state6.checkYamlBackendErrorList;
+      if (requesting || !pipeline.pipelineVo) return /*#__PURE__*/React.createElement(Loading, {
+        inline: false,
+        style: {
+          height: 400
+        }
+      });
+      var _ref30 = this.props || {},
+        pipelineId = _ref30.pipelineId,
+        trackPage = _ref30.trackPage,
+        type = _ref30.type;
+      var _ref31 = pipeline.pipelineVo || {},
+        _ref31$pipelineConfig = _ref31.pipelineConfigVo,
+        pipelineConfigVo = _ref31$pipelineConfig === void 0 ? {} : _ref31$pipelineConfig,
+        name = _ref31.name,
+        envId = _ref31.envId,
+        _ref31$tagIds = _ref31.tagIds,
+        tagIds = _ref31$tagIds === void 0 ? '' : _ref31$tagIds,
+        groupId = _ref31.groupId,
+        _ref31$uuid = _ref31.uuid,
+        uuid = _ref31$uuid === void 0 ? '' : _ref31$uuid;
+      var _ref32 = pipelineConfigVo || {},
+        flow = _ref32.flow,
+        settings = _ref32.settings,
+        sources = _ref32.sources,
+        _ref32$triggerVoList = _ref32.triggerVoList,
+        schedulers = _ref32$triggerVoList === void 0 ? [] : _ref32$triggerVoList,
+        webhook = _ref32.webhook;
+      var flowEditComponent = this.isPipelineAsCode ? /*#__PURE__*/React.createElement(PipelineFlowEdit, {
+        pipelineConfigVo: pipelineConfigVo,
+        type: this.state.flowEditMode,
+        isTemplate: this.props.type === 'template',
+        setFlowEditMode: function setFlowEditMode(cb) {
+          _this8.setState(cb);
+        },
+        onPacFlowChange: this.onPacFlowChange,
+        checkYamlBackendErrorList: checkYamlBackendErrorList,
+        doYamlBackendCheck: this.checkYamlByContent,
+        yamlBackendValidateLoading: this.state.yamlBackendValidateLoading,
+        setFeValidateMarkers: function setFeValidateMarkers(feValidateMarkers) {
+          _this8.setState({
+            feValidateMarkers: feValidateMarkers
+          });
+        },
+        pipelineId: this.props.pipelineId
+        // tpl
+        ,
+        goTemplateViewMode: this.state.goTemplateViewMode
+      }) : null;
+      var componentMap = {
+        flow: flowEditComponent,
+        baseInfo: /*#__PURE__*/React.createElement(PipelineFlowInfo, {
+          flowInfo: {
+            name: name,
+            envId: envId,
+            tagIds: tagIds,
+            pipelineId: pipelineId,
+            groupId: groupId,
+            uuid: uuid
+          },
+          memberInfo: {
+            pipelineId: pipelineId
+          },
+          onChange: this.onBaseInfoChange
+        }),
+        globalVar: /*#__PURE__*/React.createElement(PipelineFlowVar, {
+          globalParams: JSON.parse(settings || '{}').globalParams || [],
+          settings: JSON.parse(settings || '{}'),
+          caches: JSON.parse(settings || '{}').caches,
+          variableGroupIds: JSON.parse(settings || '{}').variableGroupIds || [],
+          onSettingsChange: this.onSettingsChange,
+          pipelineId: pipelineId,
+          type: type
+        }),
+        scheduler: /*#__PURE__*/React.createElement(PipelineFlowScheduler, {
+          schedulers: schedulers,
+          webhookKey: webhook,
+          settings: JSON.parse(settings || '{}'),
+          onSettingsChange: this.onSettingsChange,
+          onSchedulersChange: this.onSchedulersChange
+        })
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__content"
+      }, componentMap[navValue] ? componentMap[navValue] : componentMap.flow, this.isPipelineAsCode || /*#__PURE__*/React.createElement(PipelineFlowOrchestrator, {
+        ref: function ref(_ref33) {
+          _this8.flowRef = _ref33;
+        },
+        display: navValue === 'flow',
+        pipelineId: pipelineId,
+        sources: sources,
+        webhook: webhook || utils.uuid(20),
+        onSourcesChange: this.onSourcesChange,
+        flow: flow,
+        pipelineType: (_pipeline$pipelineVo6 = pipeline.pipelineVo) === null || _pipeline$pipelineVo6 === void 0 ? void 0 : _pipeline$pipelineVo6.type,
+        settings: settings,
+        field: this.field,
+        invalidateTasks: invalidateTasks,
+        onPipelineChange: this.onFlowChange,
+        onErrors: this.onErrors,
+        mode: mode,
+        doValidate: this.doValidate,
+        type: type,
+        subscribe: this.subscribe,
+        trackPage: trackPage,
+        onUpdatePipeline: function onUpdatePipeline(newPipeline) {
+          var _flow = YAML.safeDump(JSON.parse(JSON.stringify({
+            schema: 'tb',
+            pipeline: newPipeline
+          })));
+          set(pipeline, 'pipelineVo.pipelineConfigVo.flow', _flow);
+          _this8.setState({
+            pipeline: pipeline
+          });
+          _this8.saveDrfatCache(pipeline);
+        },
+        appstackChangeConfig: this.props.changeConfig
+      }), /*#__PURE__*/React.createElement(Perf, null));
+    }
+  }]);
+}(Component);
+export default PipelineFlowDialog;