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

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/Textarea.js

@@ -0,0 +1,30 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Input } from '@teamix/ui';
+import { debounce } from 'lodash-es';
+export default function TextAreaField(props) {
+  var defItem = props.defItem,
+    onChangeCommit = props.onChangeCommit,
+    syncedValue = props.syncedValue;
+  // const placeholder =
+  //   defItem.rulesInYaml?.required === false && defItem.rulesInYaml?.defaultValue
+  //     ? `默认将使用：${defItem.rulesInYaml?.defaultValue}`
+  //     : '';
+
+  var _useState = useState(syncedValue),
+    value = _useState[0],
+    setValue = _useState[1];
+  var onChangeCommitDebounced = useCallback(debounce(onChangeCommit, 10), [onChangeCommit]);
+  useEffect(function () {
+    if (value !== syncedValue) {
+      setValue(syncedValue);
+    }
+  }, [syncedValue]);
+  return /*#__PURE__*/React.createElement(Input.TextArea, {
+    value: value,
+    onChange: function onChange(v) {
+      onChangeCommitDebounced(v);
+      setValue(v);
+    }
+    // onBlur={() => onChangeCommit(value)}
+  });
+}

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/Tip.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DefCptBaseProps } from './common';
+type Props = DefCptBaseProps;
+export default function TipField(props: Props): JSX.Element;
+export {};

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/Tip.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Message } from '@teamix/ui';
+export default function TipField(props) {
+  var defItem = props.defItem;
+  return /*#__PURE__*/React.createElement(Message, {
+    shape: "inline",
+    type: defItem.tipType || 'notice',
+    style: {
+      marginTop: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: defItem.message
+    }
+  }));
+}

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/common.d.ts

@@ -0,0 +1,5 @@
+export interface DefCptBaseProps {
+    defItem: any;
+    onChangeCommit: any;
+    syncedValue: any;
+}

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/common.js

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

package/es/components/PipelineFlowEdit/UIEditor-deprecated/viewPortRender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const viewPortCanavsRender: (graph: PipelineRunGraph, transform: any, viewPortSize: any) => JSX.Element;

package/es/components/PipelineFlowEdit/UIEditor-deprecated/viewPortRender.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { roundToPoint5 } from "../../PipelineGraph/utils";
+import { createProjection } from "../../PipelineGraph/createProjection";
+export var viewPortCanavsRender = function viewPortCanavsRender(graph, transform, viewPortSize) {
+  var _graph$nodes, _graphItem$stageConne;
+  if (!graph) {
+    return null;
+  }
+  var timmerId = "timmer" + performance.now().toFixed(0);
+  console.time(timmerId);
+  var projection = createProjection(transform);
+  var graphContent;
+  try {
+    graphContent = graph.getGraph();
+  } catch (e) {
+    return null;
+  }
+  var graphItem = {
+    stageConnector: (_graph$nodes = graph.nodes) === null || _graph$nodes === void 0 ? void 0 : _graph$nodes.filter(function (n) {
+      return n.payload.type === 'STAGE_CONNECTOR';
+    }).map(function (node) {
+      var _graphContent, _graphContent$rects;
+      return (_graphContent = graphContent) === null || _graphContent === void 0 ? void 0 : (_graphContent$rects = _graphContent.rects) === null || _graphContent$rects === void 0 ? void 0 : _graphContent$rects[node.id];
+    }),
+    stages: function () {
+      try {
+        return graph === null || graph === void 0 ? void 0 : graph.getStageRects();
+      } catch (e) {}
+    }()
+  };
+  console.timeEnd(timmerId);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%"
+  }, graphItem === null || graphItem === void 0 ? void 0 : (_graphItem$stageConne = graphItem.stageConnector) === null || _graphItem$stageConne === void 0 ? void 0 : _graphItem$stageConne.map(function (connector) {
+    if (!connector) return null;
+    var posOnVP = projection.canvasToViewPort(connector);
+    return /*#__PURE__*/React.createElement("path", {
+      style: {
+        animation: 'none'
+      },
+      d: "M " + roundToPoint5(posOnVP.x) + ",0 V " + viewPortSize.height,
+      strokeWidth: "1",
+      stroke: "#dbdbdb"
+    });
+  })));
+};

package/es/components/PipelineFlowEdit/_DetailDialog.d.ts

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

package/es/components/PipelineFlowEdit/_DetailDialog.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Overlay } from '@teamix/ui';
+export default function DetailDialog() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Overlay, {
+    v2: false,
+    target: null,
+    container: document
+  }));
+}

package/es/components/PipelineFlowEdit/const.d.ts

@@ -0,0 +1,3 @@
+export declare const SYMBOL_ID: unique symbol;
+export declare const SYMBOL_DEF_VALUES_TAG: unique symbol;
+export declare const ExecutionComponentName = "ExecutionComponent";

package/es/components/PipelineFlowEdit/const.js

@@ -0,0 +1,3 @@
+export var SYMBOL_ID = Symbol('SYMBOL_ID');
+export var SYMBOL_DEF_VALUES_TAG = Symbol('SYMBOL_DEF_VALUES_TAG');
+export var ExecutionComponentName = 'ExecutionComponent';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { PipelineConfigVo } from 'src/types/PipelineConfigVo';
+import { checkYamlBackendError } from 'src/types/pac';
+import { editor } from 'monaco-editor';
+import type PipelineFlowDialog from '../common/teambition/pipeline-flow-dialog';
+import { GoTemplateViewMode } from '../common/teambition/pipeline-flow-dialog';
+interface PipelineFlowEditorProps {
+    type: 'code' | 'ui';
+    setFlowEditMode?: Function;
+    pipelineConfigVo: PipelineConfigVo;
+    checkYamlBackendErrorList: checkYamlBackendError[];
+    doYamlBackendCheck: (yaml: string) => Promise<void>;
+    onPacFlowChange: PipelineFlowDialog['onPacFlowChange'];
+    isTemplate?: boolean;
+    setFeValidateMarkers: editor.IMarker[];
+    yamlBackendValidateLoading: boolean;
+    goTemplateViewMode: GoTemplateViewMode;
+    pipelineId: number;
+}
+export default function PipelineFlowEditor(props: PipelineFlowEditorProps): JSX.Element;
+export {};

package/es/components/PipelineFlowEdit/index.js

@@ -0,0 +1,254 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useMemo } from 'react';
+import YAML from 'js-yaml';
+import { freeze } from 'immer';
+import * as immer from 'immer';
+import track from "../../utils/track";
+import { IngredientsContext } from "./IngredientsContext";
+import { unstable_batchedUpdates } from 'react-dom';
+import { exceedFetchWithCache } from "../../utils/apimap";
+import Loadable from "../../utils/loadable";
+var UIEditor = Loadable({
+  loader: function loader() {
+    return import("./UIEditor-deprecated/UIEditor");
+  }
+});
+var CodeEditor = Loadable({
+  loader: function loader() {
+    return import("./CodeEditor");
+  }
+});
+window.immer = immer;
+window.JSYAML = YAML;
+
+// 如果没有 markdownDescription 代表在 YAML 里不可用，则需要隐藏此条目
+var filterByMarkdownDescExist = {
+  component: function component(cptList, stepList) {
+    return cptList === null || cptList === void 0 ? void 0 : cptList.filter(function (cptItem) {
+      if ((cptItem === null || cptItem === void 0 ? void 0 : cptItem.isAgentlessJob) === 'Y') {
+        var _stepList$find;
+        // 对于 agentlessJob， 找到它的 step 并判断 markdown.
+        // 私有步骤不根据 markdown 隐藏
+        var step = stepList === null || stepList === void 0 ? void 0 : (_stepList$find = stepList.find) === null || _stepList$find === void 0 ? void 0 : _stepList$find.call(stepList, function (stepItem) {
+          return cptItem.sign === stepItem.sign;
+        });
+        return step !== null && step !== void 0 && step.privateStep ? true : step === null || step === void 0 ? void 0 : step.markdownDescription;
+      } else {
+        var _cptItem$component;
+        return cptItem === null || cptItem === void 0 ? void 0 : (_cptItem$component = cptItem.component) === null || _cptItem$component === void 0 ? void 0 : _cptItem$component.markdownDescription;
+      }
+    });
+  },
+  plugin: function plugin(list) {
+    return list === null || list === void 0 ? void 0 : list.filter(function (item) {
+      var _item$plugin;
+      return item === null || item === void 0 ? void 0 : (_item$plugin = item.plugin) === null || _item$plugin === void 0 ? void 0 : _item$plugin.markdownDescription;
+    });
+  },
+  step: function step(list) {
+    var r = list === null || list === void 0 ? void 0 : list.filter(function (item) {
+      return item.privateStep ? true : item === null || item === void 0 ? void 0 : item.markdownDescription;
+    });
+    return r;
+  }
+};
+export default function PipelineFlowEditor(props) {
+  var type = props.type,
+    pipelineConfigVo = props.pipelineConfigVo,
+    onPipelineChange = props.onPacFlowChange,
+    checkYamlBackendErrorList = props.checkYamlBackendErrorList,
+    doYamlBackendCheck = props.doYamlBackendCheck,
+    isTemplate = props.isTemplate,
+    setFeValidateMarkers = props.setFeValidateMarkers,
+    yamlBackendValidateLoading = props.yamlBackendValidateLoading,
+    goTemplateViewMode = props.goTemplateViewMode,
+    pipelineId = props.pipelineId;
+  var _useCptList = useCptList(),
+    componentsList = _useCptList[0];
+  var _useStepsList = useStepsList(),
+    stepsList = _useStepsList[0];
+  var _usePluginList = usePluginList(),
+    pluginList = _usePluginList[0];
+
+  // const [yamlStr, setYamlStr] = useState(pipelineConfigVo.flow);
+  var value = pipelineConfigVo.flow;
+
+  /**
+   * 代表整个配置的流程yaml。只在切到 code 模式时候序列化。
+   */
+  var _useState = useState(function () {
+      return [
+        // freeze(parseFlowYaml(pipelineConfigVo.flow), true),
+      ];
+    }),
+    flowHistory = _useState[0],
+    setFlowHistory = _useState[1];
+  var _useState2 = useState(0),
+    cursor = _useState2[0],
+    setCursor = _useState2[1];
+  var flow = flowHistory[cursor];
+  function pushFlow(nextFlow) {
+    var garbageRemoved = flowHistory.slice(0, cursor + 1);
+    unstable_batchedUpdates(function () {
+      setFlowHistory([].concat(garbageRemoved, [nextFlow]));
+      setCursor(cursor + 1);
+    });
+  }
+  useEffect(function () {
+    // 进入pac编辑页的埋点，「流程配置」Tab每次激活都会发送
+    track({
+      action: 'enter-pac-editor'
+    });
+  }, []);
+  var userUseableSteps = useMemo(function () {
+    return filterByMarkdownDescExist.step((stepsList === null || stepsList === void 0 ? void 0 : stepsList.filter(function (s) {
+      var _s$apiVersion;
+      return !((_s$apiVersion = s.apiVersion) !== null && _s$apiVersion !== void 0 && _s$apiVersion.includes('agentless') || 'ComponentJob' == s.kind);
+    })) || []);
+  }, [stepsList]);
+  var userUseableComponents = useMemo(function () {
+    return filterByMarkdownDescExist.component((componentsList === null || componentsList === void 0 ? void 0 : componentsList.filter(function (cpt) {
+      return !cpt.hideInDocMenu;
+    })) || [], stepsList);
+  }, [componentsList, stepsList]);
+  var userUseablePluginList = useMemo(function () {
+    return filterByMarkdownDescExist.plugin(pluginList);
+  }, [pluginList]);
+  switch (type) {
+    case 'code':
+      return /*#__PURE__*/React.createElement(IngredientsContext.Provider, {
+        value: {
+          componentsList: componentsList,
+          stepsList: stepsList,
+          pluginList: pluginList,
+          userUseableSteps: userUseableSteps,
+          userUseableComponents: userUseableComponents,
+          userUseablePluginList: userUseablePluginList
+        }
+      }, /*#__PURE__*/React.createElement(CodeEditor, {
+        flowYaml: value,
+        onChange: function onChange(yaml) {
+          onPipelineChange(yaml);
+        },
+        checkYamlBackendErrorList: checkYamlBackendErrorList,
+        doYamlBackendCheck: doYamlBackendCheck,
+        isTemplate: isTemplate,
+        setFeValidateMarkers: setFeValidateMarkers,
+        yamlBackendValidateLoading: yamlBackendValidateLoading,
+        goTemplateViewMode: goTemplateViewMode,
+        pipelineId: pipelineId
+      }));
+    case 'ui':
+      return /*#__PURE__*/React.createElement(UIWrap, {
+        flowHistory: flowHistory,
+        flow: flow,
+        onFlowChange: function onFlowChange(newFlow) {
+          freeze(newFlow, true);
+          pushFlow(newFlow);
+        }
+      });
+    default:
+      return /*#__PURE__*/React.createElement("h1", null, "unknown type");
+  }
+}
+function UIWrap(props) {
+  var _useCptList2 = useCptList(),
+    componentsList = _useCptList2[0];
+  var _useStepsList2 = useStepsList(),
+    stepsList = _useStepsList2[0];
+  var _usePluginList2 = usePluginList(),
+    pluginList = _usePluginList2[0];
+  return /*#__PURE__*/React.createElement(IngredientsContext.Provider, {
+    value: {
+      componentsList: componentsList,
+      stepsList: stepsList,
+      pluginList: pluginList
+    }
+  }, /*#__PURE__*/React.createElement(UIEditor, props));
+}
+function useCptList() {
+  var _useState3 = useState(null),
+    value = _useState3[0],
+    setValue = _useState3[1];
+  useEffect(function () {
+    // 得调两次接口，得到哪些组件 hideInDocMenu。。。
+    Promise.all([exceedFetchWithCache({
+      api: 'Pipeline2.get.componentGroup',
+      data: {
+        appSystem: window.__isEmbedInAppstack ? 'appStack' : 'flow'
+      }
+    }), exceedFetchWithCache({
+      api: 'Pipeline2.get.componentGroup',
+      data: {
+        doFilter: true,
+        appSystem: window.__isEmbedInAppstack ? 'appStack' : 'flow'
+      }
+    })]).then(function (_ref) {
+      var all = _ref[0],
+        visibleJobsInDocMenu = _ref[1];
+      var list = all.object.map(function (item) {
+        var _item$component;
+        return _extends({}, item, {
+          defObj: YAML.load(((_item$component = item.component) === null || _item$component === void 0 ? void 0 : _item$component.content) || ''),
+          // dbg
+          // defObj: debug_defMock(item),
+          hideInDocMenu: !visibleJobsInDocMenu.object.find(function (v) {
+            return v.sign === item.sign;
+          })
+        });
+      });
+      setValue(list);
+    });
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function debug_defMock(item) {
+    var _item$component2;
+    if (item.sign === 'ExecutionComponent') {
+      var defObj = YAML.load('');
+      return defObj;
+    }
+    return YAML.load(((_item$component2 = item.component) === null || _item$component2 === void 0 ? void 0 : _item$component2.content) || '');
+  }
+  return [value];
+}
+function useStepsList() {
+  var _useState4 = useState(null),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  useEffect(function () {
+    exceedFetchWithCache({
+      api: 'Pipeline2.get.stepGroup',
+      data: {
+        displayScope: window.__isEmbedInAppstack ? 'appstack' : 'flow'
+      }
+    }).then(function (v) {
+      var withDef = v.object.map(function (item) {
+        return _extends({}, item, {
+          defObj: YAML.load(item.def)
+        });
+      });
+      setValue(withDef);
+    });
+  }, []);
+  return [value];
+}
+function usePluginList() {
+  var _useState5 = useState(null),
+    value = _useState5[0],
+    setValue = _useState5[1];
+  useEffect(function () {
+    exceedFetchWithCache({
+      api: 'Pipeline2.get.pluginGroup'
+    }).then(function (v) {
+      var withDef = v.object.map(function (item) {
+        var _item$plugin2;
+        return _extends({}, item, {
+          defObj: YAML.load(((_item$plugin2 = item.plugin) === null || _item$plugin2 === void 0 ? void 0 : _item$plugin2.content) || '')
+        });
+      });
+      setValue(withDef);
+    });
+  }, []);
+  return [value];
+}

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

@@ -0,0 +1,28 @@
+import { SYMBOL_ID, SYMBOL_DEF_VALUES_TAG } from './const';
+export interface entry<T> {
+    [SYMBOL_ID]: string;
+    id: string;
+    value: T;
+}
+export interface FlowState {
+    stages: Array<entry<{
+        name?: string;
+        jobs?: FlowJobState[];
+    }>>;
+}
+export type FlowJobState = entry<{
+    name?: string;
+    component?: string;
+    steps?: FlowStepState[];
+    with?: IDefValues;
+    needs?: string | string[];
+}>;
+export type FlowStepState = entry<{
+    name?: string;
+    step?: string;
+    with?: IDefValues;
+}>;
+export interface IDefValues {
+    [SYMBOL_DEF_VALUES_TAG]: typeof SYMBOL_DEF_VALUES_TAG;
+    [name: string]: unknown;
+}

package/es/components/PipelineFlowEdit/types.js

@@ -0,0 +1,6 @@
+import { SYMBOL_ID, SYMBOL_DEF_VALUES_TAG } from "./const";
+
+// export type IDefValueItem = {
+//   name: string;
+//   value: unknown;
+// }

package/es/components/PipelineFlowEdit/utils.d.ts

@@ -0,0 +1,7 @@
+export declare function getComponentName(component: any, stepsList: any[]): any;
+export declare function getStepsListMDInfo(component: any, stepsList: any[]): any;
+/**
+ * 一个标记，开头补充三个空格，能够在补全选项中显示 CompletionItemLabel.detail
+ * yx monaco yaml 对应处理： https://code.alibaba-inc.com/yunxiao-monaco/monaco-yaml/blob/yx/4.0.6/src/languageFeatures.ts#L56
+ */
+export declare function monacoYamlCompletionItemDescMark(text: string): string;

package/es/components/PipelineFlowEdit/utils.js

@@ -0,0 +1,62 @@
+import YAML from 'js-yaml';
+import { isDevEnv, locale } from "../../utils";
+var isEn = locale === 'en_US';
+
+/** 任务名称可能由一个 step 定义（agentless） */
+import intl from "../../locale";
+export function getComponentName(component, stepsList) {
+  var _component$component;
+  if (component.isAgentlessJob === 'Y') {
+    var step = stepsList.find(function (aStep) {
+      return aStep.sign === component.sign;
+    });
+    if (!step) {
+      if (isDevEnv) {
+        var msg = intl.get({
+          id: 'rdc-tb-cd-assets.components.PipelineFlowEdit.utils.AgentlessjobComponentsignCannotFindThe',
+          defaultMessage: 'AgentlessJob {componentSign} 无法找到对应的 step'
+        }, {
+          componentSign: component.sign
+        });
+        console.error(msg);
+        // Message.error(msg);
+      }
+      return null;
+    }
+    var stepDefObj = YAML.load(step.def);
+    var enName = stepDefObj.name_en_US;
+    return isEn ? enName || step.name : step.name;
+  }
+  return (_component$component = component.component) === null || _component$component === void 0 ? void 0 : _component$component.name;
+}
+export function getStepsListMDInfo(component, stepsList) {
+  var _component$component2;
+  if (component.isAgentlessJob === 'Y') {
+    var step = stepsList.find(function (aStep) {
+      return aStep.sign === component.sign;
+    });
+    if (!step) {
+      if (isDevEnv) {
+        var msg = intl.get({
+          id: 'rdc-tb-cd-assets.components.PipelineFlowEdit.utils.AgentlessjobComponentsignCannotFindThe',
+          defaultMessage: 'AgentlessJob {componentSign} 无法找到对应的 step'
+        }, {
+          componentSign: component.sign
+        });
+        console.error(msg);
+        // Message.error(msg);
+      }
+      return null;
+    }
+    return step.markdownDescription;
+  }
+  return (_component$component2 = component.component) === null || _component$component2 === void 0 ? void 0 : _component$component2.markdownDescription;
+}
+
+/**
+ * 一个标记，开头补充三个空格，能够在补全选项中显示 CompletionItemLabel.detail
+ * yx monaco yaml 对应处理： https://code.alibaba-inc.com/yunxiao-monaco/monaco-yaml/blob/yx/4.0.6/src/languageFeatures.ts#L56
+ */
+export function monacoYamlCompletionItemDescMark(text) {
+  return "   " + text;
+}

package/es/components/PipelineGraph/AnimatedContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './AnimatedContainer.scss';
+type IAnimatedContainerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export default function AnimatedContainer(props: IAnimatedContainerProps): JSX.Element;
+export {};

package/es/components/PipelineGraph/AnimatedContainer.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children"];
+import React, { useCallback, useRef } from 'react';
+import { clog } from "../../utils/debug";
+import "./AnimatedContainer.scss";
+export default function AnimatedContainer(props) {
+  var rootRef = useRef(null);
+  var className = props.className,
+    children = props.children,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var measureRef = useCallback(function (node) {
+    if (node && rootRef.current) {
+      var observer = new ResizeObserver(function (e) {
+        rootRef.current.style.height = e[0].contentRect.height + "px";
+      });
+      observer.observe(node);
+      clog('AnimatedContainer observe start');
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    ref: rootRef,
+    className: "AnimatedContainer " + className
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: measureRef,
+    className: "sizeMeasure"
+  }, children));
+}

package/es/components/PipelineGraph/AnimatedContainer.scss

@@ -0,0 +1,12 @@
+.AnimatedContainer {
+  box-sizing: content-box;
+  // overflow: hidden;
+  transition: height 0.2s ease;
+}
+
+.sizeMeasure {
+  display: flow-root;
+  & > div:last-child {
+    border-radius: 0 0 4px 0;
+  }
+}

package/es/components/PipelineGraph/Guide.d.ts

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