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

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

@@ -0,0 +1,551 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { IngredientsContext } from "../../../../IngredientsContext";
+import styles from "./style.module.scss";
+import cx from 'classnames';
+import Welcome from "./Welcome";
+import Search from "./Search";
+import { Switch, Balloon, Tree, Overlay, Divider } from '@teamix/ui';
+import { DocBreadcrumb } from "./Breadcrumb";
+import { groupStep } from "./utils";
+import { groupBy, pick } from 'lodash-es';
+import { Title, ButtonIcon } from '@alife/devops-ui';
+import { getFeature, getLocalStorageCache, setLocalStorageCache } from "../../../../../../utils";
+import { docListPromise, getDisplayName } from "../../getSyntaxDetail";
+import MdContent from "./MdContent";
+import { getComponentName, getStepsListMDInfo } from "../../../../utils";
+import YMAL from 'js-yaml';
+import intl from "../../../../../../locale";
+import { locale } from "../../../../../../utils";
+import { labelHighlight } from "./Search";
+import "./index.scss";
+import cls from 'classnames';
+
+/** 将 docTarget 和 tree 节点联系起来, 这2个函数双向转换 */
+
+function docTargetToNodeKey(target) {
+  return target.type + "##@@" + target.value;
+}
+function nodeKeyToDocTarget(key) {
+  var _key$split = key.split('##@@'),
+    type = _key$split[0],
+    _key$split$ = _key$split[1],
+    value = _key$split$ === void 0 ? '' : _key$split$;
+  return {
+    type: type,
+    value: value
+  };
+}
+
+/**
+ * 对于每一个 docTarget, 目录树都需要展开到对应文档
+ * return 的数据格式提供给 Tree.expandedKeys 属性消费。也给面包屑来渲染层级。
+ * 目录树定位依赖 key ，是个字符串。所以需要上面的函数对 docTarget 进行序列化
+ */
+function getDocMenuPath(target, treeData) {
+  switch (target.type) {
+    case 'none':
+      {
+        return [{
+          key: 'none##@@',
+          label: intl.get({
+            id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.quick.start',
+            defaultMessage: '快速上手'
+          })
+        }];
+      }
+    case 'front-end-doc':
+      {
+        return [
+        // 目前前端文档只有语法细则有定位
+        {
+          key: intl.get({
+            id: 'rdc-tb-cd-assets.components.Docs.GrammarRules',
+            defaultMessage: '语法细则'
+          }),
+          label: intl.get({
+            id: 'rdc-tb-cd-assets.components.Docs.GrammarRules',
+            defaultMessage: '语法细则'
+          })
+        }, {
+          key: docTargetToNodeKey(target),
+          label: target.value
+        }];
+      }
+    case 'job':
+      {
+        var path = [];
+        var jobsNode = treeData.find(function (v) {
+          var isJob = v.key === 'job';
+          return isJob;
+        });
+        if (!jobsNode) {
+          return [{
+            key: 'none##@@',
+            label: intl.get({
+              id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.quick.start',
+              defaultMessage: '快速上手'
+            })
+          }];
+        }
+        path.push(pick(jobsNode, ['label', 'key']));
+        var aJobNode = jobsNode.children.find(function (v) {
+          return nodeKeyToDocTarget(v.key).value === target.value;
+        });
+        path.push(pick(aJobNode, ['label', 'key']));
+        return path;
+      }
+    case 'step':
+      {
+        var _path = [];
+        var stepsNode = treeData.find(function (v) {
+          return v.key === 'step';
+        });
+        if (!stepsNode) {
+          return [{
+            key: 'none##@@',
+            label: intl.get({
+              id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.quick.start',
+              defaultMessage: '快速上手'
+            })
+          }];
+        }
+        _path.push(pick(stepsNode, ['label', 'key']));
+        stepsNode.children.forEach(function (aGroupNode) {
+          var nodeFindInThisGroup = aGroupNode.children.find(function (aStepNode) {
+            return nodeKeyToDocTarget(aStepNode.key).value === target.value;
+          });
+          if (nodeFindInThisGroup) {
+            _path.push(pick(aGroupNode, ['label', 'key']));
+            _path.push(pick(nodeFindInThisGroup, ['label', 'key']));
+          }
+        });
+        return _path;
+      }
+    case 'plugin':
+      {
+        var _path2 = [];
+        var pluginNode = treeData.find(function (v) {
+          return v.key === 'plugin';
+        });
+        if (!pluginNode) {
+          return [{
+            key: 'none##@@',
+            label: intl.get({
+              id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.quick.start',
+              defaultMessage: '快速上手'
+            })
+          }];
+        }
+        _path2.push(pick(pluginNode, ['label', 'key']));
+        var aPluginNode = pluginNode.children.find(function (v) {
+          return nodeKeyToDocTarget(v.key).value === target.value;
+        });
+        _path2.push(pick(aPluginNode, ['label', 'key']));
+        return _path2;
+      }
+    default:
+      throw new Error('rdc-tb-cd-assets: type error');
+  }
+}
+/**
+ * UI：目录树，文档内容。
+ * 外部 props.docTarget，内部state：lastValidDocTarget
+ * 内容变化：
+ * 1，从外部。props.docTarget 变化，且合法，lastValidDocTarget 就会更新。
+ * 2，内部，直接点击目录树上的某个文档节点，也改变 lastValidDocTarget。
+ * 根据 lastValidDocTarget 读取对应的 markdown 数据或欢迎内容。
+ * 目录树只带 key 信息，docTargetToNodeKey｜nodeKeyToDocTarget 一对函数用来关联目录树节点和 docTarget
+ */
+
+export default function Docs(props) {
+  var _lastValidDocTarget$v;
+  var docTarget = props.docTarget,
+    syntaxDetailDocs = props.syntaxDetailDocs;
+  var _useContext = useContext(IngredientsContext),
+    userUseableComponents = _useContext.userUseableComponents,
+    userUseableSteps = _useContext.userUseableSteps,
+    stepsList = _useContext.stepsList,
+    userUseablePluginList = _useContext.userUseablePluginList;
+  var _useState = useState(function () {
+      return getLocalStorageCache('PAC_DOCUMENT_autoPos') !== false;
+    }),
+    autoPos = _useState[0],
+    setAutoPos = _useState[1];
+  var _useState2 = useState(false),
+    menuVisible = _useState2[0],
+    setMenuVisible = _useState2[1];
+  var _useState3 = useState(false),
+    searchFull = _useState3[0],
+    setSearchFull = _useState3[1]; // 搜索框是否撑满（focus后撑满，以免用户误解搜索范围）
+
+  var _useState4 = useState([]),
+    docMenuList = _useState4[0],
+    setDocMenuList = _useState4[1];
+  var _useState5 = useState(null),
+    searchText = _useState5[0],
+    setSearchText = _useState5[1];
+  useEffect(function () {
+    docListPromise.then(function (v) {
+      // 把前端存的文件列表数组，转成目录 tree 节点
+
+      var menuTree = Object.entries(groupBy(v, function (v) {
+        return v.split('/')[0];
+      })).map(function (_ref) {
+        var dir = _ref[0],
+          records = _ref[1];
+        return {
+          label: dir,
+          key: dir,
+          children: records.map(function (r) {
+            var displayName = getDisplayName(r);
+            return {
+              label: displayName,
+              key: docTargetToNodeKey({
+                type: 'front-end-doc',
+                value: displayName
+              })
+            };
+          })
+        };
+      });
+      setDocMenuList(menuTree);
+    });
+  }, []);
+
+  /* 编辑器光标可能在任意位置，这里保留最后一个有效的来渲染 */
+  var _useState6 = useState({
+      type: 'none',
+      value: ''
+    }),
+    lastValidDocTarget = _useState6[0],
+    setLastValidDocTarget = _useState6[1];
+  var _useState7 = useState([]),
+    expandedNodes = _useState7[0],
+    setexpandedNodes = _useState7[1];
+  function getMd(target) {
+    if (target.type === 'front-end-doc') {
+      var _syntaxDetailDocs$fin;
+      return {
+        isValidTarget: true,
+        md: (syntaxDetailDocs === null || syntaxDetailDocs === void 0 ? void 0 : (_syntaxDetailDocs$fin = syntaxDetailDocs.find(function (v) {
+          return v.targetValue === target.value;
+        })) === null || _syntaxDetailDocs$fin === void 0 ? void 0 : _syntaxDetailDocs$fin.md) || '-'
+      };
+    }
+    if (target.type === 'step') {
+      var stepFirstMatch = userUseableSteps === null || userUseableSteps === void 0 ? void 0 : userUseableSteps.find(function (v) {
+        return v.sign === target.value;
+      });
+      var stepV2Match = userUseableSteps === null || userUseableSteps === void 0 ? void 0 : userUseableSteps.find(function (v) {
+        var _v$apiVersion;
+        return v.sign === target.value && ((_v$apiVersion = v.apiVersion) === null || _v$apiVersion === void 0 ? void 0 : _v$apiVersion.startsWith('v2'));
+      });
+      // V2 md 兼容V1，有V2就展示V2
+      var step = stepV2Match || stepFirstMatch;
+      return {
+        isValidTarget: Boolean(step),
+        md: step === null || step === void 0 ? void 0 : step.markdownDescription
+      };
+    } else if (target.type === 'job') {
+      var cpt = userUseableComponents === null || userUseableComponents === void 0 ? void 0 : userUseableComponents.find(function (v) {
+        return v.sign === target.value;
+      });
+      var isValidTarget = Boolean(cpt);
+      var _md;
+      if ((cpt === null || cpt === void 0 ? void 0 : cpt.isAgentlessJob) === 'Y') {
+        var _step = stepsList === null || stepsList === void 0 ? void 0 : stepsList.find(function (v) {
+          return v.sign === target.value;
+        });
+        _md = _step === null || _step === void 0 ? void 0 : _step.markdownDescription;
+      } else {
+        var _cpt$component;
+        _md = cpt === null || cpt === void 0 ? void 0 : (_cpt$component = cpt.component) === null || _cpt$component === void 0 ? void 0 : _cpt$component.markdownDescription;
+      }
+      return {
+        isValidTarget: isValidTarget,
+        md: _md
+      };
+    } else if (target.type === 'plugin') {
+      var _plugin$plugin;
+      var plugin = userUseablePluginList === null || userUseablePluginList === void 0 ? void 0 : userUseablePluginList.find(function (v) {
+        return v.sign === target.value;
+      });
+      var _isValidTarget = Boolean(plugin);
+      var _md2 = plugin === null || plugin === void 0 ? void 0 : (_plugin$plugin = plugin.plugin) === null || _plugin$plugin === void 0 ? void 0 : _plugin$plugin.markdownDescription;
+      return {
+        isValidTarget: _isValidTarget,
+        md: _md2
+      };
+    } else {
+      return {
+        isValidTarget: true,
+        md: ''
+      };
+    }
+  }
+  var _getMd = getMd(lastValidDocTarget),
+    md = _getMd.md;
+  var isEn = locale === 'en_US';
+  var docMenuListAddMdInfo = function docMenuListAddMdInfo(list, mdList) {
+    var mdMap = new Map();
+    mdList.forEach(function (item) {
+      mdMap.set(item.targetValue, item.md);
+    });
+    return list.map(function (l) {
+      return {
+        label: l.label,
+        key: l.key,
+        children: l.children.map(function (c) {
+          return {
+            label: c.label,
+            key: c.key,
+            mdInfo: mdMap.get(c.label)
+          };
+        })
+      };
+    });
+  };
+
+  /** 目录树的内容, 每个可查看的 Node 都能构成一个 docTarget， 并用 key 保存 */
+  var treeData = useMemo(function () {
+    if (!userUseableComponents || !stepsList || !userUseablePluginList) {
+      return [];
+    }
+    var newDocMenuList = docMenuListAddMdInfo(docMenuList, syntaxDetailDocs);
+    return [{
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.quick.start',
+        defaultMessage: '快速上手'
+      }),
+      key: 'none##@@'
+    }].concat(newDocMenuList, [{
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.component',
+        defaultMessage: '组件'
+      }),
+      key: 'job',
+      children: userUseableComponents.filter(function (v) {
+        return v.isAgentlessJob === 'Y' || v.component;
+      }).map(function (cpt) {
+        var doc = {
+          type: 'job',
+          value: cpt.sign
+        };
+        var key = docTargetToNodeKey(doc);
+        var label = getComponentName(cpt, stepsList);
+        var mdInfo = getStepsListMDInfo(cpt, stepsList);
+        if (!label) {
+          return null;
+        }
+        return {
+          label: label,
+          key: key,
+          mdInfo: mdInfo
+        };
+      }).filter(Boolean)
+    }, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.step',
+        defaultMessage: '步骤'
+      }),
+      key: 'step',
+      children: Object.entries(groupStep(userUseableSteps)).map(function (_ref2) {
+        var groupName = _ref2[0],
+          stepInGroup = _ref2[1];
+        return {
+          label: groupName,
+          key: groupName,
+          children: stepInGroup.map(function (step) {
+            var _step$apiVersion;
+            var doc = {
+              type: 'step',
+              value: step.sign
+            };
+
+            // 如果列表里同一个sign 同时有v1&v2, 只展示成一个
+            var thisSignHasV2Step = stepInGroup.find(function (s) {
+              var _s$apiVersion;
+              return s.sign === step.sign && ((_s$apiVersion = s.apiVersion) === null || _s$apiVersion === void 0 ? void 0 : _s$apiVersion.startsWith('v2'));
+            });
+            if (!((_step$apiVersion = step.apiVersion) !== null && _step$apiVersion !== void 0 && _step$apiVersion.startsWith('v2')) && thisSignHasV2Step) {
+              return null;
+            }
+            var defObj = YMAL.load(step.def);
+            var enName = (defObj === null || defObj === void 0 ? void 0 : defObj.name_en_US) || step.name;
+            return {
+              label: isEn ? enName : step.name,
+              key: docTargetToNodeKey(doc),
+              mdInfo: step === null || step === void 0 ? void 0 : step.markdownDescription
+            };
+          }).filter(Boolean)
+        };
+      })
+    }, {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline.edit.yaml.docs.plugin',
+        defaultMessage: '插件'
+      }),
+      key: 'plugin',
+      children: userUseablePluginList === null || userUseablePluginList === void 0 ? void 0 : userUseablePluginList.filter(function (v) {
+        return v.plugin;
+      }).map(function (v) {
+        var _v$plugin, _v$plugin2;
+        var doc = {
+          type: 'plugin',
+          value: v.sign
+        };
+        return {
+          label: (_v$plugin = v.plugin) === null || _v$plugin === void 0 ? void 0 : _v$plugin.name,
+          key: docTargetToNodeKey(doc),
+          mdInfo: (_v$plugin2 = v.plugin) === null || _v$plugin2 === void 0 ? void 0 : _v$plugin2.markdownDescription
+        };
+      })
+    }]);
+  }, [userUseableComponents, stepsList, userUseablePluginList, docMenuList]);
+  var docMenuPath = getDocMenuPath(lastValidDocTarget, treeData);
+  var onSelectSearchMenuItem = function onSelectSearchMenuItem(selectedKey) {
+    var docTarget = nodeKeyToDocTarget(selectedKey);
+    setLastValidDocTarget(docTarget);
+    // 重置目录导航
+    setexpandedNodes(getDocMenuPath(docTarget, treeData).filter(function (_, i, arr) {
+      return i < arr.length - 1;
+    }).map(function (v) {
+      return v.key;
+    }));
+  };
+  var onFocusSearch = function onFocusSearch() {
+    setSearchFull(true);
+  };
+  var onBlurSearch = function onBlurSearch() {
+    setSearchFull(false);
+  };
+  useEffect(function () {
+    /** 是否合法的 step, job, plugin */
+    var _getMd2 = getMd(docTarget),
+      isValidTarget = _getMd2.isValidTarget;
+    if (isValidTarget && autoPos) {
+      setLastValidDocTarget(docTarget);
+      // 重置目录导航
+      setexpandedNodes(getDocMenuPath(docTarget, treeData).filter(function (_, i, arr) {
+        return i < arr.length - 1;
+      }).map(function (v) {
+        return v.key;
+      }));
+    }
+  }, [docTarget.type + docTarget.value + docTarget.time, autoPos, userUseableComponents, stepsList, userUseablePluginList]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.docRoot
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title + " " + (searchFull ? styles.whenSearchFull : '')
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    onClick: function onClick() {
+      setMenuVisible(true);
+    },
+    name: "mulu-catalog-line",
+    tooltip: intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.ExpandDirectory',
+      defaultMessage: '展开目录'
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.titleBreadWrap
+  }, /*#__PURE__*/React.createElement(DocBreadcrumb, {
+    setMenuVisible: setMenuVisible,
+    data: docMenuPath
+  }), /*#__PURE__*/React.createElement(Divider, {
+    direction: "ver"
+  })), /*#__PURE__*/React.createElement(Search, {
+    treeData: treeData,
+    onSelect: onSelectSearchMenuItem,
+    onFocus: onFocusSearch,
+    onBlur: onBlurSearch,
+    setSearchText: setSearchText
+  })), /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+    trigger: /*#__PURE__*/React.createElement("div", {
+      className: styles.autoPos
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.AutomaticPositioning',
+      defaultMessage: '自动定位'
+    }), ' ', /*#__PURE__*/React.createElement(Switch, {
+      checked: autoPos,
+      onChange: function onChange(v) {
+        setAutoPos(v);
+        setLocalStorageCache('PAC_DOCUMENT_autoPos', v);
+      }
+    })),
+    align: "br"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.AfterOpeningItWillAutomatically',
+    defaultMessage: '开启后会根据 YAML 编辑器中光标所在位置，自动切换到相应的文档'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cls(styles.scrollContainer, 'md-scroll-container')
+  }, /*#__PURE__*/React.createElement(Overlay, {
+    visible: menuVisible,
+    v2: true,
+    target: function target() {
+      return document.querySelector("." + styles.header);
+    },
+    container: function container() {
+      return document.querySelector("." + styles.scrollContainer);
+    },
+    align: "tl bl",
+    onRequestClose: function onRequestClose() {
+      setMenuVisible(false);
+    },
+    animation: {
+      "in": 'slideInLeft',
+      out: 'slideOutLeft'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.docTree
+  }, /*#__PURE__*/React.createElement(Tree, {
+    labelRender: function labelRender(_ref3) {
+      var label = _ref3.label;
+      var text = label === '企业步骤' ? getFeature('org.name') + "\u6B65\u9AA4" : label;
+      return /*#__PURE__*/React.createElement(Title, {
+        trigger: text
+      }, text);
+    },
+    autoExpandParent: false,
+    selectedKeys: [docMenuPath[docMenuPath.length - 1].key],
+    expandedKeys: expandedNodes,
+    onSelect: function onSelect(selectedKeys, extra) {
+      if (!extra.node.props.isLeaf) {
+        // toggle 是否展开目录
+        var key = selectedKeys[0];
+        if (expandedNodes.includes(key)) {
+          setexpandedNodes(expandedNodes.filter(function (v) {
+            return v !== key;
+          }));
+        } else {
+          setexpandedNodes([].concat(expandedNodes, [key]));
+        }
+        return;
+      }
+      var docTarget = nodeKeyToDocTarget(selectedKeys[0]);
+      setLastValidDocTarget(docTarget);
+      setMenuVisible(false);
+      // setAutoPos(false);
+    },
+    onExpand: function onExpand(expandedKeys) {
+      setexpandedNodes(expandedKeys);
+    },
+    className: styles.customTeamixTree,
+    isLabelBlock: true,
+    isNodeBlock: {
+      defaultPaddingLeft: 4,
+      indent: 8
+    },
+    dataSource: treeData
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cx('markdown-body')
+  }, lastValidDocTarget.type !== 'none' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.docTitle
+  }, labelHighlight(docMenuPath[docMenuPath.length - 1].label, searchText)), /*#__PURE__*/React.createElement(MdContent, {
+    searchText: searchText
+  }, lastValidDocTarget !== null && lastValidDocTarget !== void 0 && (_lastValidDocTarget$v = lastValidDocTarget.value) !== null && _lastValidDocTarget$v !== void 0 && _lastValidDocTarget$v.startsWith('private') ? intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.DocumentationIsNotSupportedFor',
+    defaultMessage: '自定义步骤暂不支持文档说明'
+  }) : labelHighlight(md, searchText, true))) : /*#__PURE__*/React.createElement(Welcome, null))));
+}

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

@@ -0,0 +1,11 @@
+.markdown-body {
+  .highlight {
+    background: #fed9b7;
+  }
+}
+
+.breadcrumb-title {
+  .teamix-title {
+    max-width: 160px;
+  }
+}

package/es/components/PipelineFlowEdit/CodeEditor/Helper/components/Docs/search.scss

@@ -0,0 +1,73 @@
+.docs-search {
+  &.focusing {
+    width: inherit !important;
+    flex: 1;
+    border: 1px solid #E9EDF0;
+  }
+
+
+  &.next-search-simple:not(.is-wind) .next-input .next-input-inner .next-search-icon {
+    margin-right: 10px;
+    transform: translateY(2px);
+  }
+}
+
+
+.docs-search-menu {
+  overflow-y: auto;
+  max-height: 350px;
+
+  &.next-menu.next-menu {
+    padding: 8px;
+
+    .next-menu-item {
+      padding: 6px 8px;
+
+      .next-menu-item-text {
+        line-height: 20px;
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+
+  .next-menu-item-inner {
+    height: auto;
+  }
+
+  .search-docs-title {
+    font-size: 13px;
+    color: #575757;
+  }
+
+  .search-docs-info {
+    font-size: 12px;
+    color: #8B8B8B;
+    width: 100%;
+    overflow: hidden; /* 隐藏超出的内容 */
+    white-space: nowrap; /* 不换行 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+
+  .highlight {
+    color: #006AD4;
+  }
+}
+
+.search-menu-wrapper {
+  background: #fff;
+  border-radius: 4px;
+
+  .search-title {
+    color: #8B8B8B;
+    line-height: 32px;
+    padding-left: 16px;
+    font-size: 13px;
+    padding-top: 8px;
+  }
+
+  .docs-search-menu.next-menu.next-menu {
+    box-shadow: none;
+    padding-top: 0;
+  }
+}