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

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Docs/style.module.scss

@@ -0,0 +1,135 @@
+@mixin scrollBar {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: var(--color-line1-3, #cecece);
+  }
+}
+
+.docRoot {
+  position: relative;
+  overflow: hidden;
+}
+
+.scrollContainer {
+  height: calc(100vh - 111px);
+  overflow: auto;
+  padding: 20px;
+  @include scrollBar();
+
+  transition: opacity 0.6s;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--color-brand3-2, #e9edf0);
+  position: relative;
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+
+    .titleBreadWrap {
+      display: flex;
+      align-items: center;
+      transition: all 0.2s;
+      max-width: 280px;
+      overflow: hidden;
+    }
+    .search {
+      width: 180px;
+      margin-left: auto;
+    }
+    // 当搜索框focus时，撑满搜索框
+    &.whenSearchFull {
+      .titleBreadWrap {
+        max-width: 0;
+      }
+    }
+    // hack 搜索框和分隔符
+    :global {
+      .next-search {
+        .next-input-group {
+          border: none;
+        }
+        .next-input-inner.next-after {
+          padding-right: 0;
+        }
+      }
+      .next-breadcrumb .next-breadcrumb-separator {
+        margin: 0 4px;
+      }
+      .next-divider {
+        margin: 0 4px 0 12px;
+      }
+    }
+  }
+  .autoPos {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+.customTeamixTree {
+  // .treeLabel {
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  // }
+  :global {
+    .next-tree-node,
+    .next-tree-node-inner {
+      margin-bottom: 4px;
+      .next-tree-node-label-wrapper {
+        overflow: hidden;
+        .next-tree-node-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      .next-tree-switcher {
+        // 文字超长不占用原来图标空间
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.docTitle {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 500;
+  color: var(--color-text1-4, #292929);
+  margin-bottom: 16px;
+}
+
+.docTree.docTree.docTree {
+  background-color: var(--color-brand3-1, #f2f5f7);
+  transition: transform 0.2s;
+  width: 220px;
+  padding: 8px;
+  border-right: 1px solid var(--color-brand3-2, #e9edf0);
+  z-index: 100;
+  overflow-y: auto;
+  @include scrollBar();
+  box-shadow: none;
+  height: calc(100% - 54px);
+}
+
+.searchMenu {
+  width: 420px;
+}
+.searchEmpty {
+  color: var(--color-text1-7, #8b8b8b);
+  padding: 0 8px;
+}
+

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Docs/utils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="lodash" />
+export declare function groupStep(steps: any[]): import("lodash").Dictionary<any[]>;

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Docs/utils.js

@@ -0,0 +1,13 @@
+import { groupBy } from 'lodash-es';
+import { i18nStepCategory } from "../../../../../../utils";
+import YAML from 'js-yaml';
+import intl from "../../../../../../locale";
+export function groupStep(steps) {
+  return groupBy(steps, function (step) {
+    var defObj = YAML.load(step.def);
+    return i18nStepCategory(defObj, 'category') || intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.utils.Unknown',
+      defaultMessage: '未知'
+    });
+  });
+}

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Docs/welcome.module.scss

@@ -0,0 +1,55 @@
+.niceday {
+  color: var(--color-text1-4, #292929);
+  font-size: 24px;
+  line-height: 34px;
+  margin-bottom: 4px;
+  font-weight: 600;
+  font-family: 'DINPro';
+  .cursorBlink {
+    animation: blink 1s infinite steps(1, end);
+    @keyframes blink {
+      from {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+}
+.title {
+  color: var(--color-brand1-6, #1b9aee);
+  font-size: 24px;
+  line-height: 34px;
+  margin-bottom: 20px;
+  font-weight: 600;
+}
+.text {
+  font-size: 14px;
+  color: var(--color-text1-4, #292929);
+  margin-bottom: 8px;
+}
+.editorCard {
+  border-radius: 4px;
+  border: 1px solid var(--color-brand3-2, #e9edf0);
+  margin-top: 22px;
+}
+
+.editorHeader {
+  background: var(--color-brand3-1, #f2f5f7);
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 14px 0 20px;
+  font-size: 13px;
+  color: var(--color-text1-2, #6e6e6e);
+}
+
+.operate {
+  display: flex;
+  align-items: center;
+}

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Tasks/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './index.scss';
+export default function Tasks(): JSX.Element;

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

@@ -0,0 +1,189 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect, Suspense } from 'react';
+import { Message, Loading } from '@teamix/ui';
+import { ButtonIcon, Cover } from '@alife/devops-ui';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import TaskTemplate from "../../../../../common/teambition/task-template";
+import { fetchComponents, fetchSteps } from "../../../../../common/teambition/task-template/utils";
+import "./index.scss";
+import intl from "../../../../../../locale";
+var prefix = 'pac-helper-tasks';
+var MonacoEditor = /*#__PURE__*/React.lazy(function () {
+  return import(/* webpackChunkName: 'editor' */"../../../../../common/teambition/pipeline-flow-orchestrator/editor");
+});
+export default function Tasks() {
+  var _useState = useState([]),
+    components = _useState[0],
+    setComponents = _useState[1];
+  var _useState2 = useState([]),
+    stepList = _useState2[0],
+    setStepList = _useState2[1];
+  var _useState3 = useState(null),
+    activeTask = _useState3[0],
+    setActiveTask = _useState3[1];
+  var _useState4 = useState(null),
+    activeTaskCoverJsx = _useState4[0],
+    setActiveTaskCoverJsx = _useState4[1];
+  var getComponents = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$fetchComponent, successful, dataList;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetchComponents();
+          case 2:
+            _yield$fetchComponent = _context.sent;
+            successful = _yield$fetchComponent.successful;
+            dataList = _yield$fetchComponent.dataList;
+            if (!(!successful || !dataList)) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return");
+          case 7:
+            setComponents(dataList);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getComponents() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var getSteps = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _yield$fetchSteps, successful, object;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return fetchSteps();
+          case 2:
+            _yield$fetchSteps = _context2.sent;
+            successful = _yield$fetchSteps.successful;
+            object = _yield$fetchSteps.object;
+            if (!(!successful || !object)) {
+              _context2.next = 7;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 7:
+            setStepList(object);
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function getSteps() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onBackToTasks = function onBackToTasks() {
+    setActiveTask(null);
+  };
+  useEffect(function () {
+    getComponents();
+    getSteps();
+  }, []);
+  function getYamlStr() {
+    return activeTask.pipelineAsCodeVersion ? JSON.parse(activeTask.content).yaml : activeTask.contentV2;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "" + prefix
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: activeTask ? 'none' : 'block'
+    }
+  }, /*#__PURE__*/React.createElement(TaskTemplate, {
+    stepList: stepList,
+    components: components,
+    onJobAdd: function onJobAdd(stageTemplate, coverJsx) {
+      setActiveTaskCoverJsx(coverJsx); // 因icon逻辑写在TaskTemplate组件内，故在此设置
+      setActiveTask(stageTemplate);
+    },
+    defaultNav: intl.get({
+      id: 'rdc-tb-cd-assets.components.Tasks.CodeScan',
+      defaultMessage: '代码扫描'
+    }),
+    needTask: true,
+    type: "pipeline",
+    isPac: true,
+    bodyHeight: 'calc(100vh - 110px)',
+    bodyContentHeight: '100%',
+    disabledTasks: ['TASK_EMPTY_AGENT_LESS']
+  })), !!activeTask && /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-header"
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    name: "arrow-left-2-line",
+    tooltip: intl.get({
+      id: 'rdc-tb-cd-assets.components.Tasks.ReturnsAllTasks',
+      defaultMessage: '返回全部任务'
+    }),
+    onClick: onBackToTasks
+  }), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-header-text"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Tasks.TaskDetails',
+    defaultMessage: '任务详情'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-info"
+  }, !!activeTaskCoverJsx && /*#__PURE__*/React.createElement(Cover, {
+    size: 'large',
+    className: prefix + "-task-info-cover",
+    backgroundColor: "var(--color-brand3-1, #f2f5f7)"
+  }, activeTaskCoverJsx), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-info-name"
+  }, activeTask.templateName), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-info-desc"
+  }, activeTask.description))), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-content-header"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Tasks.YamlExample',
+    defaultMessage: 'YAML 示例'
+  }), /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: getYamlStr().replace(/^---\n/, ''),
+    onCopy: function onCopy() {
+      return Message.success({
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.components.Tasks.SuccessfullyCopiedToTheClipboard',
+          defaultMessage: '成功复制到剪贴板'
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    name: "copy-line",
+    tooltip: intl.get({
+      id: 'rdc-tb-cd-assets.components.Tasks.CopyYamlSample',
+      defaultMessage: '复制 YAML 示例'
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-task-content-body"
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(Loading, {
+      inline: false
+    })
+  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+    language: "yaml",
+    mode: "yaml",
+    value: getYamlStr(),
+    theme: "vs-light",
+    options: {
+      renderSideBySide: false,
+      selectOnLineNumbers: true,
+      minimap: {
+        enabled: false
+      },
+      fontSize: 12,
+      automaticLayout: true
+    }
+  }))))));
+}

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

@@ -0,0 +1,67 @@
+$prefix: pac-helper-tasks;
+
+.#{$prefix} {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-task {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      border-bottom: 1px solid var(--color-brand3-2, #e9edf0);
+      height: 54px;
+      &-text {
+        color: var(--color-text1-4, #292929);
+        font-size: 14px;
+        font-weight: 500;
+        margin-left: 4px;
+      }
+    }
+    &-info {
+      display: flex;
+      padding: 16px 20px;
+      &-cover {
+        margin-right: 12px;
+        color: var(--color-brand1-6, #1b9aee) !important;
+        flex: none;
+      }
+      &-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--color-text1-4, #292929);
+        margin: 3px 0 4px;
+      }
+      &-desc {
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--color-text1-7, #8b8b8b);
+      }
+    }
+    &-content {
+      position: relative;
+      border: 1px solid var(--color-Brand3-2, #e9edf0);
+      border-radius: 4px;
+      margin: 0 20px 32px;
+      overflow: hidden;
+
+      &-header {
+        background: var(--color-Brand3-1, #f2f5f7);
+        color: var(--color-text1-4, #292929);
+        font-size: 14px;
+        font-weight: 500;
+        padding: 12px 14px 10px 18px;
+        display: flex;
+        justify-content: space-between;
+      }
+      &-body {
+        height: calc(100vh - 270px);
+      }
+    }
+  }
+}

package/es/components/PipelineFlowEdit/CodeEditor/Helper/getSyntaxDetail.d.ts

@@ -0,0 +1,6 @@
+export declare const docListPromise: Promise<string[]>;
+export declare const getDisplayName: (r: string) => string;
+export declare function getSyntaxDetailDocs(): Promise<{
+    targetValue: string;
+    md: string;
+}[]>;

package/es/components/PipelineFlowEdit/CodeEditor/Helper/getSyntaxDetail.js

@@ -0,0 +1,83 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getFeatures } from "../../../../utils/features";
+import { locale } from "../../../../utils";
+var path = (window.flowCdnPath || window.cdnPath).replace(/\/$/, '');
+var folderPath = getFeatures('PAC.public.assets.path.doc');
+var folderPathEn = getFeatures('PAC.public.assets.path.doc.en');
+var docsPath = locale === 'en_US' ? folderPathEn : folderPath;
+export var docListPromise = fetch("" + path + docsPath + "/index").then(function (v) {
+  return v.text();
+}).then(function (content) {
+  return content.split('\n').map(function (line) {
+    return line.trim();
+  }).filter(Boolean);
+});
+
+// 去掉序号，去掉后缀扩展名 (.txt)
+// e.g. "语法细则/01. 流水线源 sources.txt" => "流水线源 sources"
+export var getDisplayName = function getDisplayName(r) {
+  return r.split('/')[1].replace(/^\d+\. ?/, '').replace(/\.txt$/, '');
+};
+
+// 数组，文件对应的 docTarget.value 和 文件md内容
+export function getSyntaxDetailDocs() {
+  return _getSyntaxDetailDocs.apply(this, arguments);
+}
+function _getSyntaxDetailDocs() {
+  _getSyntaxDetailDocs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var fileList, reqs;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return docListPromise;
+        case 2:
+          fileList = _context2.sent;
+          reqs = fileList.map(/*#__PURE__*/function () {
+            var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileEntry) {
+              var md;
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    md = '';
+                    _context.prev = 1;
+                    _context.next = 4;
+                    return fetch("" + path + docsPath + "/" + encodeURIComponent(fileEntry)).then(function (v) {
+                      return v.text();
+                    });
+                  case 4:
+                    md = _context.sent;
+                    _context.next = 10;
+                    break;
+                  case 7:
+                    _context.prev = 7;
+                    _context.t0 = _context["catch"](1);
+                    console.error("doc " + fileEntry + " load failed", _context.t0);
+                  case 10:
+                    return _context.abrupt("return", {
+                      targetValue: getDisplayName(fileEntry),
+                      md: md
+                    });
+                  case 11:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[1, 7]]);
+            }));
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }());
+          _context2.next = 6;
+          return Promise.all(reqs);
+        case 6:
+          return _context2.abrupt("return", _context2.sent);
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _getSyntaxDetailDocs.apply(this, arguments);
+}

package/es/components/PipelineFlowEdit/CodeEditor/Helper/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import 'utils/md.style.css';
+export interface IHelperNavItem {
+    id: string;
+    text: string;
+    icon: string;
+    component: React.FC;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

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

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import track from "../../../../utils/track";
+import "../../../../utils/md.style.css";
+import { getSyntaxDetailDocs } from "./getSyntaxDetail";
+import { localStorage } from '@alife/yunxiao-common';
+import intl from "../../../../locale";
+import Loadable from "../../../../utils/loadable";
+var Panel = Loadable({
+  loader: function loader() {
+    return import("./Panel");
+  }
+});
+var Nav = Loadable({
+  loader: function loader() {
+    return import("./Nav");
+  }
+});
+var Tasks = Loadable({
+  loader: function loader() {
+    return import("./components/Tasks");
+  }
+});
+var Docs = Loadable({
+  loader: function loader() {
+    return import("./components/Docs");
+  }
+});
+var helperNavItems = [{
+  id: 'tasks',
+  text: intl.get({
+    id: 'rdc-tb-cd-assets.CodeEditor.Helper.Task',
+    defaultMessage: '任务'
+  }),
+  icon: 'add-line',
+  component: Tasks
+}, {
+  id: 'docs',
+  text: intl.get({
+    id: 'rdc-tb-cd-assets.CodeEditor.Helper.Document',
+    defaultMessage: '文档'
+  }),
+  icon: 'guidebook-3-line',
+  component: Docs
+}];
+function CodeEditorHelper(props, ref) {
+  var _localStorage$getItem;
+  var _React$useState = React.useState([]),
+    syntaxDetailDocs = _React$useState[0],
+    setSyntaxDetailDocs = _React$useState[1];
+  React.useEffect(function () {
+    getSyntaxDetailDocs().then(function (v) {
+      setSyntaxDetailDocs(v);
+    });
+  }, []);
+  var _React$useState2 = React.useState((_localStorage$getItem = localStorage.getItem('flowPacHelperActiveNavItemId')) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : helperNavItems[0].id),
+    activeNavItemId = _React$useState2[0],
+    setActiveNavItemId = _React$useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return {
+      close: function close() {
+        return setActiveNavItemId('');
+      }
+    };
+  }, []);
+  var activeNavItem = helperNavItems.find(function (item) {
+    return item.id === activeNavItemId;
+  });
+  React.useEffect(function () {
+    localStorage.setItem('flowPacHelperActiveNavItemId', activeNavItemId);
+  }, [activeNavItemId]);
+  var onActiveNavItemChange = function onActiveNavItemChange(id) {
+    if (activeNavItemId === id) {
+      setActiveNavItemId('');
+    } else {
+      setActiveNavItemId(id);
+    }
+    track({
+      action: 'pac-helper-nav-click',
+      type: id
+    });
+  };
+
+  // 点收起，直接关闭面板
+  var onClosePanel = function onClosePanel() {
+    setActiveNavItemId('');
+  };
+  var ActiveComponent = activeNavItem === null || activeNavItem === void 0 ? void 0 : activeNavItem.component;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!activeNavItem && /*#__PURE__*/React.createElement(Panel, {
+    onToggle: onClosePanel
+  }, /*#__PURE__*/React.createElement(ActiveComponent, {
+    docTarget: props.docTarget,
+    syntaxDetailDocs: syntaxDetailDocs
+  })), /*#__PURE__*/React.createElement(Nav, {
+    dataSource: helperNavItems,
+    activeNavItemId: activeNavItemId,
+    onChange: onActiveNavItemChange
+  }));
+}
+export default /*#__PURE__*/React.forwardRef(CodeEditorHelper);

package/es/components/PipelineFlowEdit/CodeEditor/PreviewVariables/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function PreviewVariables({ variables, onChange, setIsVariablesValid, }: {
+    variables: any;
+    onChange: any;
+    setIsVariablesValid: any;
+}): JSX.Element;