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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IProps {
+    children: string;
+    searchText: string;
+}
+export default function MdContent(props: IProps): JSX.Element;
+export {};

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

@@ -0,0 +1,94 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import Md from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import ImageViewer from 'react-simple-image-viewer';
+export default function MdContent(props) {
+  var children = props.children,
+    searchText = props.searchText;
+  var _useState = useState(null),
+    viewingImage = _useState[0],
+    setViewingImage = _useState[1];
+  console.log(searchText, 'searchText');
+  var renderChildrenAsSpans = useCallback(function (children) {
+    var regex = /<span\s+class\s*=\s*['"]highlight['"]\s*>(.*?)<\/span>/g;
+    var matches = children.match(regex);
+    if (matches && matches.length > 0) {
+      var childrenSplit = children.split(matches[0]);
+      return childrenSplit.map(function (child, i) {
+        if (i === childrenSplit.length - 1) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, child);
+        }
+        return /*#__PURE__*/React.createElement(React.Fragment, null, child, /*#__PURE__*/React.createElement("span", {
+          className: "highlight"
+        }, searchText));
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, [searchText, children]);
+  var cpt = useMemo(function () {
+    return {
+      img: function img(_ref) {
+        var src = _ref.src;
+        return /*#__PURE__*/React.createElement("img", {
+          style: {
+            cursor: 'pointer'
+          },
+          src: src,
+          onClick: function onClick() {
+            setViewingImage(src);
+          }
+        });
+      },
+      code: function code(node) {
+        var newChildren = node.children[0];
+        return /*#__PURE__*/React.createElement("code", {
+          className: node.className
+        }, renderChildrenAsSpans(newChildren));
+      }
+    };
+  }, [children, searchText]);
+  useEffect(function () {
+    if (searchText) {
+      scrollHighlight();
+    }
+  }, [searchText, children]);
+  var scrollHighlight = function scrollHighlight() {
+    var wrapper = document.getElementsByClassName('md-scroll-container')[0];
+    var element = document.getElementsByClassName('highlight')[0];
+    if (wrapper && element) {
+      var elementRect = element.getBoundingClientRect();
+      var wrapperRect = wrapper.getBoundingClientRect();
+      var top = elementRect.top - wrapperRect.top + wrapper.scrollTop;
+      wrapper.scrollTo({
+        top: top,
+        behavior: 'smooth' // 平滑滚动
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Md, {
+    key: children,
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeRaw],
+    components: cpt
+  }, children), viewingImage &&
+  /*#__PURE__*/
+  // 要盖住收起面板的那个按钮
+  React.createElement("div", {
+    style: {
+      position: 'relative',
+      zIndex: 3
+    }
+  }, /*#__PURE__*/React.createElement(ImageViewer, {
+    src: [viewingImage],
+    currentIndex: 0,
+    onClose: function onClose() {
+      setViewingImage(null);
+    },
+    disableScroll: false,
+    backgroundStyle: {
+      backgroundColor: 'rgba(0,0,0,0.9)'
+    },
+    closeOnClickOutside: true
+  })));
+}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './search.scss';
+interface IProps {
+    treeData: Array<{
+        label: string;
+        key: string;
+        children?: any;
+    }>;
+    onSelect: (selectedKey: string) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    setSearchText?: (text: string) => void;
+}
+export declare const labelHighlight: (label: string, key: string, isMd?: boolean) => string | JSX.Element;
+export default function DocsSearch({ treeData, onSelect, onFocus, onBlur, setSearchText, }: IProps): JSX.Element;
+export {};

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

@@ -0,0 +1,150 @@
+import React, { useMemo, useState } from 'react';
+import { Search, Menu } from '@teamix/ui';
+import styles from "./style.module.scss";
+import intl from "../../../../../../locale";
+import cls from 'classnames';
+import "./search.scss";
+// 拍平树结构
+var _flatTreeData = function flatTreeData(data) {
+  return data.reduce(function (accumulator, currentValue) {
+    if (currentValue.children) {
+      accumulator.push.apply(accumulator, _flatTreeData(currentValue.children));
+    } else {
+      accumulator.push(currentValue);
+    }
+    return accumulator;
+  }, []);
+};
+var docsHighlight = function docsHighlight(docs, key) {
+  var highlightDom = /*#__PURE__*/React.createElement("span", {
+    className: "highlight"
+  }, key);
+  var docsSplit = docs.split(key);
+  var splitText = docsSplit[0];
+  // 去掉中英文字符和中英文逗号句号
+  var sText = splitText.replace(/[^a-zA-Z0-9\u4e00-\u9fa5 ,.，。]/g, '');
+  var commaIndex = sText.lastIndexOf('，');
+  var commaEnIndex = sText.lastIndexOf(',');
+  var periodIndex = sText.lastIndexOf('。');
+  var periodEnIndex = sText.lastIndexOf('.');
+  var last = Math.max(commaIndex, commaEnIndex, periodIndex, periodEnIndex);
+  var preText = '';
+  var suffixText = docsSplit[1];
+  if (last >= 0) {
+    splitText = splitText.slice(last + 1);
+  }
+  preText = splitText.length > 5 ? splitText.slice(-Math.floor(Math.random() * 5)) : '';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, preText, highlightDom, suffixText);
+};
+export var labelHighlight = function labelHighlight(label, key, isMd) {
+  if (!key) return label;
+  try {
+    var regex = new RegExp("(" + key + ")", 'gi'); // 使用正则表达式来匹配关键词
+    var highlighted = label.split(regex); // 分割字符串
+
+    // 高亮关键词
+    var highlightedWithKeyword = highlighted.map(function (part, i) {
+      return part === key ? "<span class=\"highlight\">" + part + "</span>" : part;
+    });
+    var highlightedText = highlightedWithKeyword.join('');
+    return isMd ? highlightedText : /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    });
+  } catch (error) {
+    return label;
+  }
+};
+export default function DocsSearch(_ref) {
+  var treeData = _ref.treeData,
+    onSelect = _ref.onSelect,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    setSearchText = _ref.setSearchText;
+  var _useState = useState(null),
+    searchValue = _useState[0],
+    setSearchValue = _useState[1];
+  var _useState2 = useState(false),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var dataSource = useMemo(function () {
+    return _flatTreeData(treeData);
+  }, [treeData]);
+  var filteredDataSource = dataSource.filter(function (item) {
+    return item.label && item.key && item.mdInfo && (item.label.toLowerCase().indexOf(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) !== -1 || item.key.toLowerCase().indexOf(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) !== -1 || item.mdInfo.toLowerCase().indexOf(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) !== -1);
+  });
+  // .slice(0, 15); // 仅展示前20条，以免超出屏幕
+  var renderMenu = function renderMenu() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "search-menu-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-title"
+    }, "\u641C\u7D22\u7ED3\u679C"), /*#__PURE__*/React.createElement(Menu, {
+      onItemClick: function onItemClick(selectedKey) {
+        onSelect(selectedKey);
+        _onChange(null);
+        location.hash = 'highlight';
+      },
+      className: cls(styles.searchMenu, 'docs-search-menu')
+    }, filteredDataSource.map(function (item) {
+      var docsText = docsHighlight(item.mdInfo, searchValue);
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: item.key
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "search-docs-title"
+      }, labelHighlight(item.label, searchValue)), /*#__PURE__*/React.createElement("div", {
+        className: "search-docs-info"
+      }, docsText));
+    }), !filteredDataSource.length && /*#__PURE__*/React.createElement("div", {
+      className: styles.searchEmpty
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.Search.NoRelatedDocumentsFound',
+      defaultMessage: '未找到相关文档'
+    }))));
+  };
+  var _onChange = function onChange(value) {
+    setVisible(value ? value.length > 0 : false);
+    setSearchValue(value);
+  };
+  var onVisibleChange = function onVisibleChange() {
+    setVisible(false);
+  };
+  var onSearchBlur = function onSearchBlur() {
+    // 若 searchValue 存在，延迟blur，以免导致 onItemClick 触发前就被干掉
+    if (searchValue) {
+      setTimeout(function () {
+        onBlur();
+      }, 300);
+    } else {
+      onBlur();
+    }
+  };
+  var onSearchFocus = function onSearchFocus() {
+    if (searchValue) {
+      setVisible(true);
+    }
+    onFocus();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Search, {
+    className: cls(styles.search, 'docs-search'),
+    shape: "simple"
+    // hasIcon={false}
+    ,
+    onChange: function onChange(v) {
+      setSearchText(v);
+      _onChange(v);
+    },
+    onVisibleChange: onVisibleChange,
+    onFocus: onSearchFocus,
+    onBlur: onSearchBlur,
+    popupContent: renderMenu(),
+    placeholder: intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.Search.EnterKeywordsToFindDocuments',
+      defaultMessage: '输入关键字查找文档'
+    }),
+    value: searchValue,
+    visible: visible,
+    autoWidth: false
+  }));
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Welcome(): JSX.Element;

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

@@ -0,0 +1,93 @@
+import React, { Suspense } from 'react';
+import { Loading, Balloon, Message } from '@teamix/ui';
+import styles from "./welcome.module.scss";
+import { ButtonIcon } from '@alife/devops-ui';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { helpLinkIfAvailable } from "../../../../../../utils/helplink";
+import intl from "../../../../../../locale";
+var MonacoEditor = /*#__PURE__*/React.lazy(function () {
+  return import(/* webpackChunkName: 'editor' */"../../../../../common/teambition/pipeline-flow-orchestrator/editor");
+});
+var content = intl.get({
+  id: 'rdc-tb-cd-assets.components.Docs.Welcome.SourcesSourcesConfigurePipelineSource',
+  defaultMessage: 'sources:                                                  # sources 配置流水线源节点\n  my_repo:                                                # 流水线源唯一标识 id\n    type: codeup                                          # 流水线源类型\n    name: 代码源名称                                       # 代码源的展示名称\n    endpoint: <your-codeup-repository-url>                # 代码源的 url\n    branch: master                                        # 代码源的默认分支\n    triggerEvents: push                                    # 代码源监听事件\n    certificate:                                          # certificate 认证信息\n      type: serviceConnection                              # 认证类型为服务连接\n      serviceConnection: <your-service-connection-id>      # 服务连接 id\nstages:                                       # stages 配置流水线阶段\n  build_stage:                                # 流水线阶段标识 id\n    name: 构建阶段                             # 流水线阶段的展示名称\n    jobs:                                     # jobs 配置流水线任务\n      build_job:                              # 流水线任务标识 id\n        name: 构建任务                         # 流水线任务的展示名称\n        runsOn: <your-build-cluster-id>             # 流水线任务运行的集群环境\n        steps:                                # steps 配置流水线步骤\n          build_step:                         # 流水线步骤标识 id\n            step: JavaBuild                   # 选择执行步骤\n            name: java构建                     # 流水线执行步骤的展示名称\n            with:                             # 步骤的参数\n              run: |\n                mvn -B clean package -Dmaven.test.skip=true -Dautoconfig.skip\n          upload_step:\n            step: ArtifactUpload\n            name: 构建物上传\n            with:\n              uploadType: flowPublic\n              artifact: default\n              filePath:\n                - target/\n                - deploy.sh\n  deploy_stage:\n    name: 部署阶段\n    jobs:\n      deploy_job:\n        name: 主机组部署任务\n        component: VMDeploy                # 选择执行组件\n        with:                              # 执行组件的参数\n          artifact: $[stages.build_stage.build_job.upload_step.artifacts.default]\n          machineGroup: <your-machine-group-id>\n          artifactDownloadPath: /home/admin/app/package.tgz\n          executeUser: root\n          run: |\n            mkdir -p /home/admin/application/\n            tar zxvf /home/admin/app/package.tgz -C /home/admin/application/\n            sh /home/admin/application/deploy.sh restart'
+});
+export default function Welcome() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.niceday
+  }, "Pipeline as Code ", /*#__PURE__*/React.createElement("span", {
+    className: styles.cursorBlink
+  }, "_")), /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.Welcome.YamlSyntaxRulesSmartTips',
+    defaultMessage: 'YAML语法规则智能提示'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.Welcome.YouCanTurnOnThe',
+    defaultMessage: '你可以随时通过右上角开关来打开YAML语法规则智能提示'
+  }), ' ', helpLinkIfAvailable('pipeline_yaml_syntax_help', function (renderATag) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "\uFF0C", renderATag(intl.get({
+      id: 'rdc-tb-cd-assets.components.Docs.Welcome.ViewTheCompleteGuide',
+      defaultMessage: '查看完整指南'
+    })));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.Welcome.QuicklyUnderstandTheOverallStructure',
+    defaultMessage: '快速了解流水线 YAML 整体结构，从一个 Java 构建并部署至主机组的示例开始吧'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.editorCard
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.editorHeader
+  }, /*#__PURE__*/React.createElement("div", null, "YAML"), /*#__PURE__*/React.createElement("div", {
+    className: styles.operate
+  }, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+    trigger: /*#__PURE__*/React.createElement(CopyToClipboard, {
+      text: content,
+      onCopy: function onCopy() {
+        return Message.success({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.components.Docs.Welcome.SuccessfullyCopiedToTheClipboard',
+            defaultMessage: '成功复制到剪贴板'
+          })
+        });
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonIcon, {
+      name: "copy-line"
+    })))
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.Docs.Welcome.CopyYamlToTheClipboard',
+    defaultMessage: '复制YAML到剪贴板'
+  })))), /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      style: {
+        height: '420px'
+      }
+    })
+  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+    height: "420px",
+    language: "yaml",
+    mode: "yaml",
+    value: content,
+    theme: "vs-light",
+    options: {
+      renderSideBySide: false,
+      selectOnLineNumbers: true,
+      minimap: {
+        enabled: false
+      },
+      fontSize: 14,
+      automaticLayout: true,
+      domReadOnly: true,
+      readOnly: true,
+      scrollBeyondLastLine: false
+    }
+  }))));
+}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { DocTarget } from '../../../types';
+import './index.scss';
+interface Props {
+    docTarget: DocTarget & {
+        time: number;
+    };
+    syntaxDetailDocs: any[];
+}
+/**
+ * UI：目录树，文档内容。
+ * 外部 props.docTarget，内部state：lastValidDocTarget
+ * 内容变化：
+ * 1，从外部。props.docTarget 变化，且合法，lastValidDocTarget 就会更新。
+ * 2，内部，直接点击目录树上的某个文档节点，也改变 lastValidDocTarget。
+ * 根据 lastValidDocTarget 读取对应的 markdown 数据或欢迎内容。
+ * 目录树只带 key 信息，docTargetToNodeKey｜nodeKeyToDocTarget 一对函数用来关联目录树节点和 docTarget
+ */
+export default function Docs(props: Props): JSX.Element;
+export {};