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

package/es/components/PipelineFlowEdit/CodeEditor/index.js

@@ -0,0 +1,394 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+/* eslint-disable react/prop-types */
+import React, { Suspense, useContext, useState, useEffect, useRef } from 'react';
+import { Loading } from '@teamix/ui';
+import { editor, MarkerSeverity, KeyMod, KeyCode, Uri } from 'monaco-editor';
+import { parseDocument, LineCounter, isMap } from 'yaml';
+import { getCursorTarget } from "./cursorTarget";
+import { setDiagnosticsOptions } from '@alife/yx-monaco-yaml';
+import "./index.scss";
+import { IngredientsContext } from "../IngredientsContext";
+import { EditingDocument } from "../FlowDocument/EditingDocument";
+import { getFeatures } from "../../../utils/features";
+import { isDevEnv } from "../../../utils";
+import ProblemsPanel from "./ProblemsPanel";
+import { isStringWithTemplateMark } from "../../common/teambition/pipeline-flow-dialog/utils";
+import Loadable from "../../../utils/loadable";
+var Helper = Loadable({
+  loader: function loader() {
+    return import("./Helper");
+  }
+});
+var Guide = Loadable({
+  loader: function loader() {
+    return import("./Guide");
+  }
+});
+var GoTemplateEditor = Loadable({
+  loader: function loader() {
+    return import("./GoTemplateEditor");
+  }
+});
+var pacSchema = getFeatures('PAC.schema.content');
+var pacModelUri = Uri.parse('file:///pac.yaml');
+var diagschemas = [{
+  uri: 'http://example.com/schema-pac.json',
+  // uri: `${window.cdnPath}schema-pac.json`,
+  fileMatch: [String(pacModelUri)],
+  // 页面上有多个editor（如右侧文档中的），所以要设fileMatch仅对pac编辑器生效
+  schema: pacSchema
+}, {
+  uri: 'http://example.com/schema-pac-dynamic.json',
+  fileMatch: ['*'],
+  schema: {
+    type: 'object',
+    properties: {
+      // sources: {},
+      // stages: {},
+    }
+  }
+}];
+var MonacoEditor = /*#__PURE__*/React.lazy(function () {
+  return import(/* webpackChunkName: 'editor' */"../../common/teambition/pipeline-flow-orchestrator/editor");
+}
+// eslint-disable-next-line function-paren-newline
+);
+export default function CodeEditor(props) {
+  var helperPanelRef = useRef();
+  var flowYaml = props.flowYaml,
+    checkYamlBackendErrorList = props.checkYamlBackendErrorList,
+    doYamlBackendCheck = props.doYamlBackendCheck,
+    onChange = props.onChange,
+    isTemplate = props.isTemplate,
+    setFeValidateMarkers = props.setFeValidateMarkers,
+    yamlBackendValidateLoading = props.yamlBackendValidateLoading,
+    goTemplateViewMode = props.goTemplateViewMode,
+    pipelineId = props.pipelineId;
+  useEffect(function () {
+    // 设置 json schema
+    setDiagnosticsOptions({
+      schemas: diagschemas,
+      enableSchemaRequest: false,
+      hover: true,
+      completion: true,
+      validate: !isTemplate,
+      format: true
+    });
+  }, []);
+  var isGoTemplate = isStringWithTemplateMark(flowYaml);
+  var _useState = useState({
+      type: 'none',
+      value: '',
+      time: Date.now()
+    }),
+    docTarget = _useState[0],
+    setDocTarget = _useState[1];
+  var ingredientsContextValue = useContext(IngredientsContext);
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'pac-code-editor-wrap'
+  }, /*#__PURE__*/React.createElement(Guide, null), isGoTemplate ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(GoTemplateEditor, {
+    value: flowYaml,
+    checkYamlBackendErrorList: checkYamlBackendErrorList,
+    doYamlBackendCheck: doYamlBackendCheck,
+    onChange: onChange,
+    setDocTarget: setDocTarget,
+    ingredientsContextValue: ingredientsContextValue,
+    setFeValidateMarkers: setFeValidateMarkers,
+    yamlBackendValidateLoading: yamlBackendValidateLoading,
+    goTemplateViewMode: goTemplateViewMode,
+    helperPanelRef: helperPanelRef,
+    pipelineId: pipelineId
+  })) : /*#__PURE__*/React.createElement(FlowYamlEditor, {
+    value: flowYaml,
+    checkYamlBackendErrorList: checkYamlBackendErrorList,
+    doYamlBackendCheck: doYamlBackendCheck,
+    onChange: onChange,
+    setDocTarget: setDocTarget,
+    ingredientsContextValue: ingredientsContextValue,
+    setFeValidateMarkers: setFeValidateMarkers,
+    yamlBackendValidateLoading: yamlBackendValidateLoading,
+    goTemplateViewMode: goTemplateViewMode
+  }), /*#__PURE__*/React.createElement(Helper, {
+    ref: helperPanelRef,
+    docTarget: docTarget
+  }));
+}
+export var FlowYamlEditor = /*#__PURE__*/function (_React$Component) {
+  // 问题面板的ref
+
+  function FlowYamlEditor(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
+      editorInst: null,
+      editorModel: null,
+      markers: [],
+      // 编辑器行内展示的问题
+      unmatchedErrors: [],
+      // 后端校验path未匹配到的问题
+      cursorPosition: null // 光标位置，供ProblemsPanel展示
+    };
+    _this.initialValidated = false;
+    _this.problemsPanelRef = null;
+    _this.onEditorDidMount = function (editorInst) {
+      var editorModel = editorInst.getModel();
+      _this.setState({
+        editorInst: editorInst,
+        editorModel: editorModel
+      });
+
+      // 编辑器内容变化时，执行动态校验
+      editorModel.onDidChangeContent(function () {
+        _this.setMarkers();
+      });
+
+      // 根据光标位置切换对应文档
+      editorInst.onDidChangeCursorPosition(function (pos) {
+        _this.setState({
+          cursorPosition: pos.position
+        });
+        try {
+          // 判断是否打开文档面板
+          if (document.getElementById('editor-panel-nav-id-docs') && document.getElementById('editor-panel-nav-id-docs').className.indexOf('active') === -1) {
+            return;
+          }
+          var target = getCursorTarget({
+            textModel: editorModel,
+            positionEvent: pos
+          });
+          _this.props.setDocTarget(_extends({}, target, {
+            time: Date.now()
+          }));
+          isDevEnv && console.log(pos.position, target);
+        } catch (e) {
+          console.error('onDidChangeCursorPosition:', e);
+        }
+      });
+
+      // 自定义命令 增加option+/或Alt+/唤起补全
+      // eslint-disable-next-line no-bitwise
+      editorInst.addCommand(KeyMod.Alt | KeyCode.Slash, function () {
+        editorInst.trigger('', 'editor.action.triggerSuggest', '');
+      });
+
+      // TODO: 自定义命令 Cmd+S保存
+      // eslint-disable-next-line no-bitwise
+      // editorInst.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, () => {
+      //   console.log('save!');
+      // });
+    };
+    _this.onEditorChange = function (val) {
+      _this.props.onChange(val, _this.state.editorInst);
+      // this.setState({ yamlCache: val });
+      // onPipelineChange(val, [{}], false);
+    };
+    _this.problemsPanelRef = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+
+  /** setDocTarget 会刷新影响输入（未知影响，先去掉） */
+  // shouldComponentUpdate(nextProps: Readonly<{}>): boolean {
+  //   if (nextProps.value !== this.props.value) {
+  //     return true;
+  //   }
+  //   return false;
+  // }
+  _inheritsLoose(FlowYamlEditor, _React$Component);
+  var _proto = FlowYamlEditor.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+    editor.onDidChangeMarkers(function (_ref) {
+      var resource = _ref[0];
+      var editorMarkers = editor.getModelMarkers({
+        resource: resource
+      });
+      var markers = editorMarkers.map(function (item) {
+        return _extends({}, item, {
+          severity: item.owner === 'yaml' ? MarkerSeverity.Error : item.severity // monaco-yaml报的错默认为warn级别，先全部设为error级别
+        });
+      });
+      _this2.setState({
+        markers: markers
+      });
+      _this2.props.setFeValidateMarkers(
+      // 过滤前端的报错
+      markers.filter(function (v) {
+        return v.owner === 'yaml';
+      }));
+    });
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this3 = this;
+    // 后端校验结果发生变化时，更新markers，并打开问题面板
+    if (prevProps.checkYamlBackendErrorList !== this.props.checkYamlBackendErrorList) {
+      var _this$props$checkYaml, _this$problemsPanelRe, _this$problemsPanelRe2;
+      this.setMarkers();
+      ((_this$props$checkYaml = this.props.checkYamlBackendErrorList) === null || _this$props$checkYaml === void 0 ? void 0 : _this$props$checkYaml.length) && ((_this$problemsPanelRe = this.problemsPanelRef) === null || _this$problemsPanelRe === void 0 ? void 0 : (_this$problemsPanelRe2 = _this$problemsPanelRe.current) === null || _this$problemsPanelRe2 === void 0 ? void 0 : _this$problemsPanelRe2.setPanelVisible(true));
+    }
+    if (!this.initialValidated && this.state.editorInst && this.props.ingredientsContextValue.componentsList && this.props.ingredientsContextValue.stepsList) {
+      var editorModel = this.state.editorInst.getModel();
+      var text = editorModel.getValue();
+      var counter = new LineCounter();
+      var doc = parseDocument(text, {
+        lineCounter: counter
+      });
+      setTimeout(function () {
+        _this3.createDynmanicSchema(doc);
+      }, 100);
+      this.initialValidated = true;
+    }
+  };
+  _proto.createDynmanicSchema = function createDynmanicSchema(doc) {
+    // return;
+    try {
+      var flowDoc = new EditingDocument(this.state.editorModel, doc.contents, this.props.ingredientsContextValue);
+      flowDoc.setYamlSchema();
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  // 动态（后端）校验逻辑
+  /** 匹配报错位置，通过 editor.setModelMarkers 设置到编辑器 marker */;
+  _proto.setMarkers = function setMarkers() {
+    var editorModel = this.state.editorModel;
+    if (!editorModel) {
+      return;
+    }
+    var markers = []; // 匹配到路径的问题
+    var unmatchedErrors = []; // 未匹配到路径的问题
+    var text = editorModel.getValue();
+    var counter = new LineCounter();
+    var doc = parseDocument(text, {
+      lineCounter: counter
+    });
+    var checkYamlBackendErrorList = this.props.checkYamlBackendErrorList;
+    this.createDynmanicSchema(doc);
+    checkYamlBackendErrorList.forEach(function (checkYamlError) {
+      var errorRange;
+      var errorPathArr = checkYamlError.path.split('.');
+
+      // 查看AST结构工具： https://astexplorer.net/#/gist/1a8a9165cdea1ac994f3acb8366fdd47/4078a3b07b5c0bd036cb59decfa279fb745877e2
+      function recursiveAST(node, i) {
+        if (i === errorPathArr.length) {
+          // 标识已递归到最后一级
+          errorRange = node.range;
+          return;
+        }
+        if (isMap(node)) {
+          node.items.forEach(function (pair) {
+            var _pair$key;
+            if (((_pair$key = pair.key) === null || _pair$key === void 0 ? void 0 : _pair$key.value) === errorPathArr[i]) {
+              recursiveAST(pair.value, i + 1);
+            }
+          });
+        }
+      }
+      recursiveAST(doc.contents, 0);
+      if (errorRange) {
+        markers.push({
+          message: checkYamlError.errorMessage,
+          severity: MarkerSeverity.Error,
+          startLineNumber: editorModel.getPositionAt(errorRange[0]).lineNumber,
+          startColumn: editorModel.getPositionAt(errorRange[0]).column,
+          endLineNumber: editorModel.getPositionAt(errorRange[1]).lineNumber,
+          endColumn: editorModel.getPositionAt(errorRange[1]).column
+        });
+      } else {
+        unmatchedErrors.push(checkYamlError);
+      }
+    });
+    editor.setModelMarkers(editorModel, 'backend', markers); // owner:'backend'标识问题来源为后端校验
+    this.setState({
+      unmatchedErrors: unmatchedErrors
+    });
+  };
+  _proto.render = function render() {
+    var _this4 = this;
+    var _this$state = this.state,
+      markers = _this$state.markers,
+      unmatchedErrors = _this$state.unmatchedErrors,
+      cursorPosition = _this$state.cursorPosition,
+      editorInst = _this$state.editorInst;
+    var hasProblems = markers.length || unmatchedErrors.length;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pac-code-editor " + (hasProblems ? 'pac-code-editor-with-problems' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: '1',
+        height: 1,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: '1',
+        width: 1,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement(Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Loading, {
+        inline: false
+      })
+    }, /*#__PURE__*/React.createElement(MonacoEditor
+    // height="80vh"
+    , {
+      editorDidMount: this.onEditorDidMount,
+      onChange: this.onEditorChange,
+      language: this.props.isErrorMsgContent ? 'plaintext' : 'yaml',
+      mode: "yaml",
+      value: this.props.value,
+      theme: "vs-light",
+      overrideServices: {
+        // 让补全的description默认展示 https://stackoverflow.com/questions/54795603/always-show-the-show-more-section-in-monaco-editor
+        storageService: {
+          get: function get() {},
+          getBoolean: function getBoolean(key) {
+            return key === 'expandSuggestionDocs';
+          },
+          getNumber: function getNumber() {
+            return 0;
+          },
+          remove: function remove() {},
+          store: function store() {},
+          onWillSaveState: function onWillSaveState() {},
+          onDidChangeStorage: function onDidChangeStorage() {},
+          onDidChangeValue: function onDidChangeValue() {}
+        }
+      },
+      options: {
+        readOnly: this.props.readOnly,
+        renderValidationDecorations: 'on',
+        renderSideBySide: false,
+        selectOnLineNumbers: true,
+        minimap: {
+          enabled: false
+        },
+        fontSize: 14,
+        tabSize: 2,
+        detectIndentation: false,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        // 禁用底部很长的滚动
+        wordBasedSuggestions: false,
+        // 禁用 used words 补全
+        quickSuggestions: true,
+        // 支持输入直接唤起补全
+        model: editor.getModel(pacModelUri) || editor.createModel(this.props.value, 'yaml', pacModelUri) // 页面上有多个editor（如右侧文档中的），所以要设fileMatch仅对pac编辑器生效
+      }
+    }))), this.props.children), /*#__PURE__*/React.createElement(ProblemsPanel, {
+      markers: markers,
+      unmatchedErrors: unmatchedErrors,
+      editorInst: editorInst,
+      cursorPosition: cursorPosition,
+      doYamlBackendCheckWithYaml: function doYamlBackendCheckWithYaml() {
+        return _this4.props.doYamlBackendCheck(_this4.props.value);
+      },
+      yamlBackendValidateLoading: this.props.yamlBackendValidateLoading,
+      ref: this.problemsPanelRef
+    }));
+  };
+  return FlowYamlEditor;
+}(React.Component);

package/es/components/PipelineFlowEdit/CodeEditor/index.scss

@@ -0,0 +1,97 @@
+.pac-code-editor-wrap {
+  display: flex;
+  height: 100%;
+
+  .pac-code-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .react-monaco-editor-container {
+      flex: 1;
+    }
+  }
+}
+
+// hack monaco hover提示面板内的样式
+// 注意：支持暗色或多主题后，这块儿hack代码要跟随搞多份！
+.monaco-hover {
+  // display: block !important; // 使面板常驻，便于调样式
+  // visibility: visible !important; // 使面板常驻，便于调样式
+
+  background: var(--color-white, #fff) !important;
+  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid var(--color-Brand3-2, #e9edf0) !important;
+  border-radius: 4px !important;
+
+  // padding
+  .hover-contents:not(.html-hover-contents) {
+    padding: 13px 14px 6px;
+
+    // 隐藏最后一行 Source: xxx
+    > div > p:last-child {
+      display: none;
+    }
+  }
+
+  // 标题
+  h4 {
+    font-weight: bold; // windows
+    margin-top: 0;
+    font-size: 14px;
+  }
+
+  // 正文
+  p {
+    margin: 0 0 4px;
+  }
+
+  // list
+  li {
+    list-style: initial;
+  }
+
+  // code
+  .monaco-tokenized-source {
+    font-size: 12px;
+    padding: 8px 12px;
+    margin: 8px 0;
+    border-radius: 4px;
+    background-color: var(--color-Brand3-1, #f2f5f7);
+  }
+
+  table {
+    border-collapse: collapse;
+    border: 1px solid var(--color-Brand3-2, #e9edf0);
+    border-radius: 4px;
+    margin: 8px 0;
+    thead {
+      th {
+        color: var(--color-text1-7, #8b8b8b);
+        background: var(--color-Brand3-1, #f2f5f7);
+        padding: 6px 12px;
+      }
+    }
+    tbody {
+      color: var(--color-text1-3, #575757);
+      tr:not(:last-child) {
+        td {
+          border-bottom: 1px solid var(--color-Brand3-2, #e9edf0);
+          padding: 6px 12px;
+        }
+      }
+    }
+  }
+
+  // 问题
+  .marker {
+    color: var(--color-error-5, #cd3021);
+    background: var(--color-error-1, #ffe8e6);
+  }
+
+  // 去掉 view problems 那一栏
+  .hover-row.status-bar {
+    display: none;
+  }
+}

package/es/components/PipelineFlowEdit/CodeEditor/types.d.ts

@@ -0,0 +1,5 @@
+/** 结构化的文档标识，由于从编辑器识别的 value 不确定性，可能无效 */
+export interface DocTarget {
+    type: 'front-end-doc' | 'step' | 'job' | 'plugin' | 'none';
+    value: string;
+}

package/es/components/PipelineFlowEdit/CodeEditor/types.js

@@ -0,0 +1 @@
+export {};