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

package/es/components/common/teambition/pipeline-source/workspace/index.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect } from 'react';
+import { Form, Balloon, Input } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import intl from "../../../../../locale";
+import helplink from "../../../../../utils/helplink";
+var Tooltip = Balloon.Tooltip;
+var FormItem = Form.Item;
+var tooltip = function tooltip(trigger, text) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    align: "t",
+    trigger: trigger
+  }, text);
+};
+var Workspace = function Workspace(_ref) {
+  var field = _ref.field,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    sources = _ref.sources,
+    update = _ref.update;
+  var init = field.init;
+  var sourceType = field.getValue('type');
+  useEffect(function () {
+    update && field.validate(['name']);
+  }, []);
+  var handleChange = function handleChange(v) {
+    if (!v) return;
+    field.setValue('name', v);
+  };
+  var workspaceName = function workspaceName(rule, value, callback) {
+    var needRename = (JSON.parse(sources) || []).some(function (s) {
+      var sign = field.getValue('sign');
+      return value === s.name && sign !== s.sign;
+    });
+    if (needRename) {
+      callback(intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.workspace.NeedRename',
+        defaultMessage: '流水线中存在重名工作目录'
+      }));
+      return;
+    }
+    callback();
+  };
+  var WorkspaceLabel = function WorkspaceLabel() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.workspace.Label',
+      defaultMessage: '工作目录'
+    }), tooltip(/*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "question-line",
+      style: {
+        color: 'var(--color-text1-7, #8b8b8b)',
+        marginLeft: 5,
+        cursor: 'pointer'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.workspace.TheSourceFilesOfThe',
+      defaultMessage: '您配置的流水线源的源文件将会被下载至工作目录下，后续任务进入指定工作目录执行'
+    }), helplink('pipeline_source_workdir') && /*#__PURE__*/React.createElement("a", {
+      href: helplink('pipeline_source_workdir'),
+      className: "help-link",
+      target: "_blank",
+      style: {
+        marginRight: 2
+      },
+      rel: "noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.pipeline-source.workspace.ViewHelp',
+      defaultMessage: '查看帮助'
+    }))))));
+  };
+  return /*#__PURE__*/React.createElement(FormItem, {
+    className: "next-top next-inline",
+    label: WorkspaceLabel()
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, init('name', {
+    props: {
+      onChange: function onChange(workspace) {
+        handleChange(workspace);
+      }
+    },
+    rules: [{
+      required: true,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.workspace.PleaseInput',
+        defaultMessage: '请输入工作目录'
+      })
+    }, {
+      pattern: sourceType === 'jenkins' ? /^\w+[\w./-]*$/ : /^\w+[\w.-]*$/,
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-source.workspace.PatternMsg',
+        defaultMessage: "只能包含字母和数字、 '_'、 '.'和'-'，且只能以字母、数字或'_'开头"
+      })
+    }, {
+      validator: workspaceName
+    }]
+  }), {
+    disabled: disabled,
+    maxLength: 100
+  })));
+};
+export default Workspace;

package/es/components/common/teambition/pipeline-tag/empty.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/es/components/common/teambition/pipeline-tag/empty.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["name", "addMode", "style"];
+import React from 'react';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import intl from "../../../../locale";
+var TagEmpty = function TagEmpty(_ref) {
+  var _ref$name = _ref.name,
+    name = _ref$name === void 0 ? intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-tag.empty.TagsToBeConfigured',
+      defaultMessage: '待配置标签'
+    }) : _ref$name,
+    _ref$addMode = _ref.addMode,
+    addMode = _ref$addMode === void 0 ? true : _ref$addMode,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    others = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: _extends({
+      background: 'var(--color-brand3-1, #f2f5f7)',
+      height: 28,
+      borderRadius: 14,
+      color: 'var(--color-text1-7, #8b8b8b)',
+      fontSize: 12,
+      padding: '2px 8px',
+      display: 'inline-flex',
+      alignItems: 'center'
+    }, addMode ? {
+      cursor: 'pointer'
+    } : {}, style)
+  }, others), addMode && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "add-line",
+    size: "small",
+    style: {
+      marginRight: 2
+    }
+  }), name);
+};
+export default /*#__PURE__*/React.memo(TagEmpty);

package/es/components/common/teambition/pipeline-tag/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import Empty from './empty';
+import './index.scss';
+export declare const defaultColor = "#1F9AEF";
+export declare const defaulBackground = "#F2FBFF";
+export declare const pipelineTagColors: {
+    "#1F9AEF": string;
+    '#E63A3A': string;
+    '#FA8C15': string;
+    '#15AD31': string;
+    '#7978E5': string;
+    '#8C8C8C': string;
+};
+declare const PipelineTag: {
+    ({ color, children, style }: {
+        color: any;
+        children: any;
+        style?: {};
+    }): JSX.Element;
+    Empty: any;
+};
+export { Empty };
+export default PipelineTag;

package/es/components/common/teambition/pipeline-tag/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+var _pipelineTagColors;
+import React from 'react';
+import Empty from "./empty";
+import "./index.scss";
+var prefix = 'pipeline-tag';
+export var defaultColor = '#1F9AEF';
+export var defaulBackground = '#F2FBFF';
+export var pipelineTagColors = (_pipelineTagColors = {}, _pipelineTagColors[defaultColor] = defaulBackground, _pipelineTagColors['#E63A3A'] = '#FFF5F5', _pipelineTagColors['#FA8C15'] = '#FFF7ED', _pipelineTagColors['#15AD31'] = '#EDFFED', _pipelineTagColors['#7978E5'] = '#F5F5FF', _pipelineTagColors['#8C8C8C'] = '#F7F7F7', _pipelineTagColors);
+var PipelineTag = function PipelineTag(_ref) {
+  var color = _ref.color,
+    children = _ref.children,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  return /*#__PURE__*/React.createElement("span", {
+    className: prefix,
+    style: _extends({
+      color: color,
+      background: pipelineTagColors[color] || defaulBackground
+    }, style)
+  }, children);
+};
+PipelineTag.Empty = Empty;
+export { Empty };
+export default PipelineTag;

package/es/components/common/teambition/pipeline-tag/index.scss

@@ -0,0 +1,16 @@
+$prefix: pipeline-tag;
+
+.#{$prefix} {
+  padding: 0 4px;
+  font-size: 12px;
+  border-radius: 4px;
+  line-height: initial;
+  margin-right: 4px;
+  height: 20px;
+  max-width: 100px;
+  display: inline-flex;
+  align-items: center;
+  &:last-child {
+    margin-right: 0;
+  }
+}

package/es/components/common/teambition/pipeline-template-card/GraphPreview/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function (props: any): JSX.Element;
+export declare function TheGraphPreview({ pipelineTpl }: {
+    pipelineTpl: any;
+}): JSX.Element;

package/es/components/common/teambition/pipeline-template-card/GraphPreview/index.js

@@ -0,0 +1,209 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Rect } from "../../../../PipelineGraph/Rect";
+import PipelineCanvas, { CanvasEntity } from "../../../../PipelineGraph/PipelineCanvas";
+import { connectJobToJobInAllStages } from "../../../../PipelineGraph/PipelineDAG";
+import { PipelineRunGraph } from "../../../../PipelineGraph/PipelineRunGraph";
+import ErrorBoundaryCommon from "../../ErrorBoundaryCommon";
+import styles from "./style.module.scss";
+import { Title } from '@alife/devops-ui';
+import { getGraphContentArys } from "../getGraphContentArys";
+export default function (props) {
+  return /*#__PURE__*/React.createElement(ErrorBoundaryCommon, null, /*#__PURE__*/React.createElement(TheGraphPreview, props));
+}
+var JOB_WIDTH = 124;
+export function TheGraphPreview(_ref) {
+  var pipelineTpl = _ref.pipelineTpl;
+  var flow = getGraphContentArys(pipelineTpl);
+
+  // const data = [[['Java 代码扫描'], ['Maven 单元测试']], [['Java 镜像构建']]];
+  //
+
+  var graphRef = useRef();
+  var _useState = useState(null),
+    graph = _useState[0],
+    setGraph = _useState[1];
+  function getItem(name) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      style: {
+        width: JOB_WIDTH
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.text
+    }, /*#__PURE__*/React.createElement(Title, {
+      trigger: name
+    }, name)));
+  }
+  var allNodes = useMemo(function () {
+    var v = flow;
+    // const allNodes = getStagesConnectNodes(v);
+    var allNodes = connectJobToJobInAllStages(v);
+    return allNodes;
+  }, []);
+  useEffect(function () {
+    if (!graphRef.current) {
+      var _graphRef$current;
+      var stages = new Set();
+      flow.forEach(function (v) {
+        stages.add(v.stageId);
+      });
+      graphRef.current = new PipelineRunGraph(allNodes, flow.map(function (v) {
+        return v.stageId;
+      }), {
+        vGap: 16,
+        hGap: 24
+      });
+      allNodes.forEach(function (_ref2) {
+        var id = _ref2.id,
+          payload = _ref2.payload;
+        var isConnector = payload.type === 'STAGE_CONNECTOR';
+        graphRef.current.setUIRectSize(id, function (draft) {
+          if (isConnector) {
+            draft.height = 0;
+            draft.width = 5;
+            draft.preConnector = {
+              x: 2,
+              y: 16
+            };
+            draft.afterConnector = {
+              x: 2,
+              y: 16
+            };
+          } else {
+            draft.height = 32;
+            draft.width = JOB_WIDTH;
+            draft.preConnector = {
+              x: 0,
+              y: 16
+            };
+            draft.afterConnector = {
+              x: JOB_WIDTH,
+              y: 16
+            };
+          }
+        });
+      });
+      var _graph = (_graphRef$current = graphRef.current) === null || _graphRef$current === void 0 ? void 0 : _graphRef$current.getGraph();
+      setGraph(_graph);
+    }
+  }, []);
+
+  // return null;
+
+  var getSize = function getSize() {
+    var bottom = 10;
+    var right = 10;
+    try {
+      var stageRects = graphRef.current.getStageRects();
+      bottom = Math.max.apply(Math, stageRects.map(function (v) {
+        return v.outerRect.bottom;
+      }));
+      right = Math.max.apply(Math, stageRects.map(function (v) {
+        return v.outerRect.right;
+      }));
+    } catch (e) {
+      //
+    }
+    var contentRect = new Rect({
+      x: 0,
+      y: 0,
+      bottom: bottom,
+      right: right
+    });
+    return contentRect;
+  };
+  return /*#__PURE__*/React.createElement(PipelineCanvas, {
+    viewPortSize: getSize(),
+    viewPortCanavsRender: function viewPortCanavsRender() {
+      return null;
+    }
+    // 不需要移动
+    ,
+    getCanvasContentRect: function getCanvasContentRect() {
+      return new Rect({
+        height: 1,
+        width: 1,
+        x: 0,
+        y: 0
+      });
+    },
+    defaultTransform: {
+      translateX: 0,
+      translateY: 0
+    },
+    noInteract: true
+  }, function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+      style: {
+        backgroundColor: 'transparent',
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: -1,
+        transition: 'opacity 0.2s ease-out'
+      }
+      // todo svg size
+      ,
+      width: 5000,
+      height: 5000
+    }, (graph === null || graph === void 0 ? void 0 : graph.edges) && Object.entries(graph.edges).map(function (_ref3) {
+      var id = _ref3[0],
+        pathd = _ref3[1];
+      return /*#__PURE__*/React.createElement("g", {
+        key: id,
+        style: {
+          // 保证 1px 的线在1x屏幕上像素精准
+          transform: window.devicePixelRatio === 1 ? 'translate(-0.5px, -0.5px)' : 'none'
+        }
+      }, /*#__PURE__*/React.createElement("path", {
+        id: id,
+        fill: "none",
+        stroke: "#f7f7f7",
+        strokeWidth: 1,
+        d: pathd
+      }), /*#__PURE__*/React.createElement("path", {
+        key: id,
+        id: id,
+        fill: "none",
+        stroke: "var(--color-line1-3, #cecece)",
+        strokeWidth: 1,
+        d: pathd
+      }));
+    })), function () {
+      if (!graph) {
+        return null;
+      }
+      return allNodes.map(function (node) {
+        var _graph$rects;
+        var pos = (graph === null || graph === void 0 ? void 0 : (_graph$rects = graph.rects) === null || _graph$rects === void 0 ? void 0 : _graph$rects[node.id]) || {};
+        if (node.payload.type === 'JOB') {
+          return /*#__PURE__*/React.createElement(CanvasEntity, {
+            x: pos.x,
+            y: pos.y
+          }, getItem(node.payload.name));
+        } else if (node.payload) {
+          return /*#__PURE__*/React.createElement(CanvasEntity, {
+            x: pos.x,
+            y: pos.y
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              paddingTop: 16
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              boxSizing: 'border-box',
+              width: 5,
+              height: 5,
+              background: 'white',
+              border: '1px solid var(--color-line1-3, #cecece)',
+              borderRadius: '50%',
+              marginTop: -3
+            }
+          })));
+        }
+        return undefined;
+      });
+    }());
+  });
+}

package/es/components/common/teambition/pipeline-template-card/GraphPreview/style.module.scss

@@ -0,0 +1,21 @@
+.item {
+  height: 32px;
+  font-size: 12px;
+  padding: 8px 16px;
+
+  background: white;
+  border-radius: 100px;
+  border: 1px solid var(--color-brand3-3, #dae0e5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--color-text1-3, #575757);
+}
+
+.text {
+  width: fit-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/es/components/common/teambition/pipeline-template-card/getGraphContentArys.d.ts

@@ -0,0 +1,6 @@
+import { CustomPipelineTemplate } from 'src/types/CustomPipelineTemplate';
+import { PresetPipelineTemplate } from 'src/types/PresetPipelineTemplate';
+export declare function getGraphContentArys(tpl: PresetPipelineTemplate | CustomPipelineTemplate): {
+    readonly stageId: string;
+    readonly nodes: any;
+}[];

package/es/components/common/teambition/pipeline-template-card/getGraphContentArys.js

@@ -0,0 +1,70 @@
+import YAML from 'js-yaml';
+export function getGraphContentArys(tpl) {
+  var isYunxiaoTpl = tpl.templateType === 'pipeline';
+  var isCustomPac = tpl.templateType === 'CUSTOM_PIPELINE' && tpl.pipelineAsCodeVersion;
+  function threeDContentAryToJobs(contentAry) {
+    var v = contentAry.map(function (oldGroup, oldGroupIndex) {
+      return {
+        stageId: String(oldGroupIndex),
+        nodes: oldGroup.flatMap(function (oldStage, oldStageIndex) {
+          var stageId = "job-group" + oldGroupIndex + "-stage" + oldStageIndex;
+          return oldStage.map(function (jobName, index) {
+            var jobId = stageId + "-" + index;
+            var isFirst = index === 0;
+            var dependsOn;
+            if (isFirst) {
+              dependsOn = [];
+            } else {
+              var prevJobId = stageId + "-" + (index - 1);
+              dependsOn = [prevJobId];
+            }
+            return {
+              id: jobId,
+              dependsOn: dependsOn,
+              payload: {
+                type: 'JOB',
+                stageId: String(oldGroupIndex),
+                name: jobName,
+                job: {}
+              }
+            };
+          });
+        })
+      };
+    });
+    return v;
+  }
+  if (isYunxiaoTpl || isCustomPac) {
+    var yaml = tpl.templateType === 'CUSTOM_PIPELINE' ? JSON.parse(tpl.content)[0] : YAML.load(tpl.contentV2);
+    if (!(yaml !== null && yaml !== void 0 && yaml.stages)) {
+      return [];
+    }
+    var jobs = Object.entries(yaml.stages).map(function (_ref) {
+      var stageId = _ref[0],
+        stage = _ref[1];
+      var nodes = Object.entries(stage.jobs).map(function (_ref2) {
+        var jobId = _ref2[0],
+          job = _ref2[1];
+        return {
+          id: jobId,
+          dependsOn: [job.needs || []].flat(),
+          payload: {
+            type: 'JOB',
+            stageId: String(stageId),
+            name: job.name,
+            job: {}
+          }
+        };
+      });
+      return {
+        stageId: stageId,
+        nodes: nodes
+      };
+    });
+    return jobs;
+  } else {
+    var content = JSON.parse(tpl.content);
+    var v = threeDContentAryToJobs(content);
+    return v;
+  }
+}

package/es/components/common/teambition/pipeline-template-card/groups.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+declare const GROUPS: {
+    readonly java: {
+        readonly label: "Java";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly php: {
+        readonly label: "PHP";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly nodejs: {
+        readonly label: "Node.js";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly go: {
+        readonly label: "Go";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly python: {
+        readonly label: "Python";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly dotnetcore: {
+        readonly label: ".NET Core";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly gcc: {
+        readonly label: "C++";
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly mobile: {
+        readonly label: any;
+        readonly visible: any;
+        readonly icon: JSX.Element;
+    };
+    readonly empty: {
+        readonly label: any;
+        readonly visible: true;
+        readonly icon: JSX.Element;
+    };
+    readonly other: {
+        readonly label: any;
+        readonly icon: JSX.Element;
+        readonly visible: any;
+    };
+};
+export default GROUPS;

package/es/components/common/teambition/pipeline-template-card/groups.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { PipelineIconFont } from "../icon-font";
+import { getFeature } from "../../../../utils";
+import intl from "../../../../locale";
+import { YunxiaoIcon } from '@alife/devops-ui';
+var GROUPS = {
+  java: {
+    label: 'Java',
+    visible: getFeature('PipelineTepmplate.group.java'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "java-fill"
+    })
+  },
+  php: {
+    label: 'PHP',
+    visible: getFeature('PipelineTepmplate.group.php'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "php-fill"
+    })
+  },
+  nodejs: {
+    label: 'Node.js',
+    visible: getFeature('PipelineTepmplate.group.nodejs'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "node-fill"
+    })
+  },
+  go: {
+    label: 'Go',
+    visible: getFeature('PipelineTepmplate.group.go'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "GO-fill"
+    })
+  },
+  python: {
+    label: 'Python',
+    visible: getFeature('PipelineTepmplate.group.python'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "python-fill"
+    })
+  },
+  dotnetcore: {
+    label: '.NET Core',
+    visible: getFeature('PipelineTepmplate.group.dotnetcore'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "NET-fill"
+    })
+  },
+  gcc: {
+    label: 'C++',
+    visible: getFeature('PipelineTepmplate.group.gcc'),
+    icon: /*#__PURE__*/React.createElement(PipelineIconFont, {
+      type: "C-line"
+    })
+  },
+  mobile: {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline.new.groups.MobileTerminal',
+      defaultMessage: '移动端'
+    }),
+    visible: getFeature('PipelineTepmplate.group.mobile'),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "phone-2-line"
+    })
+  },
+  empty: {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-template-card.groups.EmptyTemplate',
+      defaultMessage: '空模板'
+    }),
+    visible: true,
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "empty-line"
+    })
+  },
+  other: {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.pipeline.new.groups.Other',
+      defaultMessage: '其他'
+    }),
+    icon: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "more-line"
+    }),
+    visible: getFeature('PipelineTepmplate.group.other')
+  }
+};
+export default GROUPS;

package/es/components/common/teambition/pipeline-template-card/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { CustomPipelineTemplate } from 'src/types/CustomPipelineTemplate';
+import { PresetPipelineTemplate } from 'src/types/PresetPipelineTemplate';
+interface Props {
+    pipelineTpl: PresetPipelineTemplate | CustomPipelineTemplate;
+    onEdit?: Function;
+    onDelete?: Function;
+    selected?: boolean;
+    onClick?: Function;
+    onDoubleClick?: Function;
+    onChangeCb?: Function;
+    showEnableOrDisable?: boolean;
+    unusable?: boolean;
+    setCopyVisible?: Function;
+    setCopyPipelineInfo?: Function;
+}
+declare const PipelineTemplateCard: (props: Props) => JSX.Element;
+export default PipelineTemplateCard;