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

package/es/components/dashboardMain/components/pipeline-operation/index.js

@@ -0,0 +1,461 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["pipeline", "collectPipelineIds", "pipelinePermissionResult", "pipelineGroups", "style", "permissions", "currentGroupInfo"];
+import React, { useState } from 'react';
+import { Menu, Button, Balloon, Select } from '@teamix/ui';
+import RunPipelineButton from "../../../common/teambition/run-pipeline-btn";
+import AtFollowDialog from '@alife/teamix-follow-dialog';
+import OperationPanel from "../../../common/teambition/operation-panel";
+import cx from 'classnames';
+import { get } from 'lodash-es';
+import intl from "../../../../locale";
+import { Star, YunxiaoIcon, Title, ButtonIcon } from '@alife/devops-ui';
+import "./index.scss";
+var Tooltip = Balloon.Tooltip;
+var PREFIX = 'pipeline-operation';
+var PERMISSION_PIPELINE_GROUP_ADMIN = 'tb.role.pipelineGroup.admin';
+var PERMISSION_PIPELINE_RUN = 'tb.flow.pipeline.run';
+var PERMISSION_PIPELINE_ADMIN = 'tb.role.pipeline.admin';
+var currentUser = window.AK_GLOBAL.currentUser;
+export var getStarInfo = function getStarInfo(collected) {
+  if (collected) {
+    return {
+      label: intl.get({
+        id: 'rdc-tb-cd-assets.tbNavigationInit.star.CancelStarMark',
+        defaultMessage: '取消收藏'
+      }),
+      iconType: 'star-fill',
+      action: 'DELETE',
+      className: 'show'
+    };
+  }
+  return {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.tbNavigationInit.star.Star',
+      defaultMessage: '收藏'
+    }),
+    iconType: 'star-fill',
+    action: 'ADD',
+    className: ''
+  };
+};
+export var formatGroupSelectSource = function formatGroupSelectSource(pipelineGroups, permissions) {
+  if (pipelineGroups === void 0) {
+    pipelineGroups = [];
+  }
+  if (permissions === void 0) {
+    permissions = [];
+  }
+  var defaultLabel = intl.get({
+    id: 'rdc-tb-cd-assets.components.pipeline-operation.NotGrouped',
+    defaultMessage: '未分组'
+  });
+  if (!pipelineGroups.length || !permissions.length) {
+    // 后端可能没初始化0分组，默认提供一个
+    return [{
+      value: 0,
+      label: defaultLabel
+    }];
+  }
+  return (pipelineGroups || []).map(function (_ref) {
+    var id = _ref.id,
+      name = _ref.name;
+    var disabled = false;
+    // !(permissions || []).includes(PERMISSION_PIPELINE_GROUP_ADMIN) &&
+    // String(id) !== '0' &&
+    // appRoleName !== 'admin';
+    var label = disabled ? /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement("div", null, name),
+      align: "t"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermissionToMoveTo',
+      defaultMessage: '无权限移动至该分组，仅可移动至拥有所有权限的分组'
+    })) : name;
+    return {
+      value: id,
+      label: String(id) === '0' ? defaultLabel : label,
+      disabled: disabled
+    };
+  });
+};
+var tooltip = function tooltip(trigger, text, align, others) {
+  if (others === void 0) {
+    others = {};
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    trigger: trigger,
+    align: align
+  }, others), text);
+};
+var stepKeyMap = {
+  home: 'home',
+  group: 'group'
+};
+var PERMISSION_PIPELINE_EDIT = 'tb.flow.pipeline.edit';
+var PipelineOperation = function PipelineOperation(props) {
+  var _cx2;
+  var pipeline = props.pipeline,
+    collectPipelineIds = props.collectPipelineIds,
+    pipelinePermissionResult = props.pipelinePermissionResult,
+    _props$pipelineGroups = props.pipelineGroups,
+    pipelineGroups = _props$pipelineGroups === void 0 ? [] : _props$pipelineGroups,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$permissions = props.permissions,
+    permissions = _props$permissions === void 0 ? [] : _props$permissions,
+    _props$currentGroupIn = props.currentGroupInfo,
+    currentGroupInfo = _props$currentGroupIn === void 0 ? {} : _props$currentGroupIn,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  var onDeletePipeline = props.onDeletePipeline,
+    onEditPipelineInfo = props.onEditPipelineInfo,
+    onPipelineStar = props.onPipelineStar,
+    onRefreshPipelines = props.onRefreshPipelines,
+    onCopyPipeline = props.onCopyPipeline,
+    onPipelineMoveGroup = props.onPipelineMoveGroup,
+    onAddPipelineTag = props.onAddPipelineTag;
+  var permObj = pipelinePermissionResult[String(pipeline.pipelineId)] || {};
+  var editable = !location.pathname.includes('system') && (permObj[PERMISSION_PIPELINE_EDIT] || false);
+  var run = !location.pathname.includes('system') && (permObj[PERMISSION_PIPELINE_RUN] || false);
+  var _useState = useState(stepKeyMap.home),
+    step = _useState[0],
+    setStep = _useState[1];
+  var _useState2 = useState(false),
+    saveGroupLoading = _useState2[0],
+    setSaveGroupLoading = _useState2[1];
+  var groupIdInit = get(pipeline, 'extendInfoVo.groupId', '');
+  var _useState3 = useState(groupIdInit),
+    selectGroupId = _useState3[0],
+    setSelectGroupId = _useState3[1];
+  var initGroupId = function initGroupId() {
+    return setSelectGroupId(groupIdInit);
+  };
+  var renderStar = function renderStar() {
+    var starInfo = getStarInfo(collectPipelineIds.includes(pipeline.pipelineId));
+    if (location.pathname.includes('system')) {
+      var tips = intl.get({
+        id: 'rdc-tb-cd-assets.components.pipeline-operation.ThisPipelineIsAPipeline',
+        defaultMessage: '该流水线为云效的系统服务自动创建的流水线，无法进行该操作'
+      });
+      return /*#__PURE__*/React.createElement("li", {
+        className: PREFIX + "__item " + PREFIX + "__star"
+      }, tooltip(/*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "star-fill",
+        disabled: true
+      }), tips, 'tl'));
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      className: PREFIX + "__item " + PREFIX + "__star"
+    }, /*#__PURE__*/React.createElement(Star, {
+      text: intl.get({
+        id: 'rdc-tb-cd-assets.components.pipeline-operation.Collection',
+        defaultMessage: '收藏'
+      }),
+      starredText: intl.get({
+        id: 'rdc-tb-cd-assets.components.pipeline-operation.CancelCollection',
+        defaultMessage: '取消收藏'
+      }),
+      key: JSON.stringify(starInfo),
+      style: {
+        display: 'inline'
+      },
+      defaultStarred: collectPipelineIds.includes(pipeline.pipelineId),
+      onClick: function onClick() {
+        return onPipelineStar(pipeline, starInfo);
+      }
+    }));
+  };
+  var renderRun = function renderRun() {
+    var btn = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      disabled: !run,
+      style: {
+        minWidth: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "play-line"
+    }));
+    var tips = '';
+    if (location.pathname.includes('system')) {
+      tips = intl.get({
+        id: 'rdc-tb-cd-assets.components.pipeline-operation.ThisPipelineIsAPipeline',
+        defaultMessage: '该流水线为云效的系统服务自动创建的流水线，无法进行该操作'
+      });
+    } else {
+      tips = run ? intl.get({
+        id: 'rdc-tb-cd-assets.dashboardMain.main.main.Run',
+        defaultMessage: '运行'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+        defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+      });
+    }
+    var trigger = /*#__PURE__*/React.createElement("li", {
+      className: PREFIX + "__item",
+      key: run
+    }, tooltip(btn, tips, run ? 't' : 'tl'));
+    return /*#__PURE__*/React.createElement(RunPipelineButton, {
+      notJump: true,
+      id: pipeline.pipelineId,
+      disabled: !run,
+      trackInfo: {
+        page: 'main page'
+      },
+      trigger: trigger,
+      onRunPost: function onRunPost() {
+        var clock = setTimeout(function () {
+          onRefreshPipelines();
+          clearTimeout(clock);
+        }, 150);
+      }
+    });
+  };
+  var renderCopy = function renderCopy(tips) {
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      },
+      disabled: !editable
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "copy-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.main.pipelineTable.ReplicationPipeline',
+      defaultMessage: '复制流水线'
+    }));
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: !editable,
+      onClick: function onClick() {
+        return onCopyPipeline(pipeline);
+      }
+    }, editable ? trigger : tooltip(trigger, tips || intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+      defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+    }), 'tl'));
+  };
+  var renderMore = function renderMore() {
+    return /*#__PURE__*/React.createElement("li", {
+      className: PREFIX + "__item"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "more-line"
+    })));
+  };
+  var renderGroup = function renderGroup(tips) {
+    var _ref2 = currentGroupInfo || {},
+      appRoleName = _ref2.appRoleName,
+      _ref2$creatorUserVo = _ref2.creatorUserVo,
+      creatorUserVo = _ref2$creatorUserVo === void 0 ? {} : _ref2$creatorUserVo;
+    var disabled = tips || (permissions.includes(PERMISSION_PIPELINE_ADMIN) ? false : !(editable || permissions.includes(PERMISSION_PIPELINE_GROUP_ADMIN) || appRoleName === 'admin' && creatorUserVo.id === currentUser.workid));
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      },
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "move-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.MobileGroup',
+      defaultMessage: '移动分组'
+    }));
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: disabled,
+      onClick: function onClick() {
+        return setStep(stepKeyMap.group);
+      }
+    }, editable ? trigger : tooltip(trigger, tips || intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+      defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+    }), 'tl'));
+  };
+  var renderEditInfo = function renderEditInfo(tips) {
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      },
+      disabled: !editable
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "edit-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-flow-dialog.BasicInformation',
+      defaultMessage: '基本信息'
+    }));
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: !editable,
+      onClick: function onClick() {
+        return onEditPipelineInfo(pipeline);
+      }
+    }, editable ? trigger : tooltip(trigger, tips || intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+      defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+    }), 'tl'));
+  };
+  var renderDelete = function renderDelete(tips) {
+    var _cx;
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      },
+      disabled: !editable
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "delete-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Delete',
+      defaultMessage: '删除'
+    }));
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: !editable,
+      onClick: function onClick() {
+        return onDeletePipeline(pipeline);
+      },
+      className: cx((_cx = {}, _cx[PREFIX + "__delete"] = editable, _cx))
+    }, editable ? trigger : tooltip(trigger, tips || intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+      defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+    }), 'tl'));
+  };
+  var renderTag = function renderTag(tips) {
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        minWidth: 'auto'
+      },
+      disabled: !editable
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "tag-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.SetTags',
+      defaultMessage: '设置标签'
+    }));
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: !editable,
+      onClick: function onClick() {
+        return onAddPipelineTag(pipeline);
+      },
+      className: PREFIX + "__tag"
+    }, editable ? trigger : tooltip(trigger, tips || intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.NoPermission',
+      defaultMessage: '无权限对流水线进行此操作，请联系拥有该流水线所有权限的管理员添加权限'
+    }), 'tl'));
+  };
+  var onSaveMoveGroup = function onSaveMoveGroup() {
+    setSaveGroupLoading(true);
+    var groupName = pipelineGroups.find(function (_ref3) {
+      var id = _ref3.id;
+      return id === selectGroupId;
+    }).name;
+    onPipelineMoveGroup([pipeline.pipelineId], {
+      groupName: groupName,
+      groupId: selectGroupId
+    })["finally"](function () {
+      setSaveGroupLoading(false);
+      document.body.click();
+    });
+  };
+  var goToHome = function goToHome() {
+    setStep(stepKeyMap.home);
+  };
+  return /*#__PURE__*/React.createElement("ul", {
+    className: PREFIX,
+    style: style
+  }, renderStar(), renderRun(), /*#__PURE__*/React.createElement(AtFollowDialog, _extends({
+    offset: [0, 0],
+    align: "tr br",
+    noBodyPadding: true,
+    trigger: renderMore(),
+    shouldUpdatePosition: true,
+    onOpen: initGroupId,
+    onBackClick: goToHome,
+    afterClose: goToHome,
+    v2: false,
+    safeNode: document.querySelector("." + PREFIX + "__group__select"),
+    title: step === stepKeyMap.group ? intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.SelectATargetGroup',
+      defaultMessage: '请选择目标组'
+    }) : false,
+    style: {
+      width:
+      // eslint-disable-next-line no-nested-ternary
+      step === stepKeyMap.group ? 240 : intl.getLang() === 'en_US' ? 176 : 140
+    },
+    hasBackIcon: step !== stepKeyMap.home,
+    className: cx(PREFIX + "__more", (_cx2 = {}, _cx2[PREFIX + "__group"] = step === stepKeyMap.group, _cx2))
+  }, others), function () {
+    // console.log(document.querySelector(`.${PREFIX}__more`), '===')
+    var tips = location.pathname.includes('system') ? intl.get({
+      id: 'rdc-tb-cd-assets.components.pipeline-operation.ThisPipelineIsAPipeline',
+      defaultMessage: '该流水线为云效的系统服务自动创建的流水线，无法进行该操作'
+    }) : '';
+    switch (step) {
+      case stepKeyMap.group:
+        return /*#__PURE__*/React.createElement(OperationPanel, {
+          onOk: onSaveMoveGroup,
+          okProps: {
+            loading: saveGroupLoading,
+            disabled: !selectGroupId
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width:
+            // eslint-disable-next-line no-nested-ternary
+            step === stepKeyMap.group ? 200 : intl.getLang() === 'en_US' ? 136 : 100,
+            color: 'var(--color-text1-7, #8b8b8b)',
+            marginBottom: 6
+          }
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.components.pipeline-operation.GroupName',
+          defaultMessage: '分组名称'
+        })), /*#__PURE__*/React.createElement(Select, {
+          popupClassName: PREFIX + "__group__select",
+          style: {
+            width: '100%'
+          },
+          placeholder: intl.get({
+            id: 'rdc-tb-cd-assets.components.pipeline-operation.SelectAGroup',
+            defaultMessage: '请选择分组'
+          }),
+          itemRender: function itemRender(_ref4) {
+            var label = _ref4.label;
+            return /*#__PURE__*/React.createElement("div", {
+              style: {
+                maxWidth: 140
+              }
+            }, /*#__PURE__*/React.createElement(Title, {
+              trigger: label,
+              align: "t"
+            }, label));
+          },
+          showSearch: true,
+          popupContainer: function popupContainer(_ref5) {
+            var parentNode = _ref5.parentNode;
+            return parentNode;
+          },
+          value: selectGroupId,
+          onChange: setSelectGroupId,
+          dataSource: formatGroupSelectSource(pipelineGroups, permissions),
+          autoWidth: true
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(Menu, {
+          style: {
+            minWidth: 140
+          },
+          className: PREFIX + "__menu"
+        }, renderGroup(tips), renderEditInfo(tips), renderCopy(tips), renderTag(tips), renderDelete(tips));
+    }
+  }()));
+};
+export default PipelineOperation;

package/es/components/dashboardMain/components/pipeline-operation/index.scss

@@ -0,0 +1,68 @@
+$PREFIX: pipeline-operation;
+
+@include block($PREFIX) {
+  display: flex;
+  width: 100%;
+  padding-right: 12px;
+  justify-content: flex-end;
+
+  @include element(star) {
+    .yunxiao-star {
+      display: inline-block !important;
+      transform: translateY(3px);
+    }
+    @include element(show) {
+      .next-btn .teamix-icon {
+        color: #ffaf38;
+      }
+    }
+
+    .next-btn {
+      transform: translateY(3px);
+      .next-icon:hover {
+        color: #ffaf38;
+      }
+    }
+    button.next-btn.next-btn-text.isOnlyIcon {
+      width: 20px;
+      margin-right: 4px;
+    }
+  }
+
+  @include element(delete) {
+    &:hover .next-btn {
+      color: red;
+
+      .next-icon {
+        color: red;
+      }
+    }
+  }
+
+  @include element(more) {
+    box-shadow: 0 0 32px 0 rgba(38, 38, 38, .16) !important;
+
+    .teamix-follow-dialog-header {
+      display: none;
+    }
+  }
+
+  @include element(group) {
+    .teamix-follow-dialog-header {
+      display: block !important;
+    }
+  }
+
+  @include element(menu) {
+    .next-menu-item.next-disabled {
+      padding: 8px;
+      .next-menu-item-inner {
+        height: 20px;
+      }
+    }
+    .next-menu-item-inner {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/es/components/dashboardMain/components/pipeline-panel/index.d.ts

@@ -0,0 +1,3 @@
+import './index.scss';
+declare const _default: any;
+export default _default;