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

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

@@ -0,0 +1,313 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+import { Dialog, Field, Message, Loading } from '@teamix/ui';
+import Nav from '@alife/teamix-at-nav';
+import exceed from "../../../../utils/apimap";
+import Member, { buildPiplineMembers } from "../yunxiao-member";
+import { formatGroupSelectSource } from "../../../dashboardMain/components/pipeline-operation";
+import PipelineBaseInfo from "./baseInfo";
+import cx from 'classnames';
+import { get } from 'lodash-es';
+import intl from "../../../../locale";
+import allSettled from 'promise.allsettled';
+import { Title } from '@alife/devops-ui';
+import { _initNav } from "../../../../pages/tbNavigationInit/detail";
+import "./index.scss";
+var currentUser = window.AK_GLOBAL.currentUser;
+var permissions = currentUser.permissions.split(',');
+var Item = Nav.Item;
+var prefix = 'pipeline-info';
+var BASE_INFO = 'base-info';
+var MEMBER_MANAGEMENT = 'member-management';
+var PipelineInfo = /*#__PURE__*/function (_Component) {
+  function PipelineInfo(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
+    _this.setInfo = function (props) {
+      var _ref = props || {},
+        _ref$pipeline = _ref.pipeline,
+        _ref$pipeline2 = _ref$pipeline === void 0 ? {} : _ref$pipeline,
+        pipelineName = _ref$pipeline2.pipelineName,
+        _ref$pipeline2$envId = _ref$pipeline2.envId,
+        envId = _ref$pipeline2$envId === void 0 ? '' : _ref$pipeline2$envId,
+        tagIdList = _ref$pipeline2.tagIdList,
+        _ref$pipeline2$groupI = _ref$pipeline2.groupId,
+        groupId = _ref$pipeline2$groupI === void 0 ? '0' : _ref$pipeline2$groupI,
+        _ref$pipeline2$uuid = _ref$pipeline2.uuid,
+        uuid = _ref$pipeline2$uuid === void 0 ? '' : _ref$pipeline2$uuid;
+      _this.baseInfoField.setValues({
+        pipelineName: pipelineName,
+        envId: "" + envId,
+        tagIdList: tagIdList,
+        groupId: groupId,
+        uuid: uuid
+      });
+    };
+    _this.getGroupDataSource = function () {
+      exceed.fetch({
+        api: 'Pipeline.get.groups',
+        data: {
+          pageSize: 300,
+          withExtraInfo: false
+        }
+      }).then(function (_ref2) {
+        var successful = _ref2.successful,
+          object = _ref2.object;
+        if (!successful) return;
+        var groupDataSource = object.dataList.length ? [].concat(object.dataList, [{
+          id: '0',
+          name: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-info.NotGrouped',
+            defaultMessage: '未分组'
+          })
+        }]) : [];
+        _this.setState({
+          groupDataSource: formatGroupSelectSource(groupDataSource || [], permissions)
+        });
+      });
+    };
+    _this.saveMembers = function (_, objType, objId, memberList) {
+      if (memberList === void 0) {
+        memberList = [];
+      }
+      return new Promise(function (resolve, reject) {
+        if (!memberList.length) return reject();
+        var members = buildPiplineMembers(memberList, objType, objId);
+        if (!members.length) return reject();
+        exceed.fetch({
+          api: 'Member.batchOverrideResourceMembers',
+          data: {
+            objType: objType,
+            objId: objId,
+            members: JSON.stringify(members)
+          }
+        }).then(function (_ref3) {
+          var successful = _ref3.successful;
+          successful ? resolve() : reject();
+        })["catch"](reject);
+      });
+    };
+    _this.saveBaseInfo = function () {
+      var _this$props = _this.props,
+        pipeline = _this$props.pipeline,
+        needGroup = _this$props.needGroup;
+      _this.baseInfoField.validate(/*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(errors, vals) {
+          var pipelineName, envId, tagIdList, groupId, requestConfig, result;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!errors) {
+                  _context.next = 2;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 2:
+                _this.setState({
+                  loading: true
+                });
+                pipelineName = vals.pipelineName, envId = vals.envId, tagIdList = vals.tagIdList, groupId = vals.groupId;
+                requestConfig = [{
+                  api: 'Pipeline.base.info',
+                  data: {
+                    pipelineId: pipeline.pipelineId,
+                    pipelineName: pipelineName,
+                    tagList: tagIdList,
+                    envId: envId
+                  }
+                }, needGroup && Number.isFinite(parseInt(groupId, 10)) && pipeline.groupId !== groupId && {
+                  api: 'Pipeline.set.piplines.group',
+                  params: {
+                    id: groupId
+                  },
+                  data: {
+                    pipelines: [pipeline.pipelineId]
+                  }
+                }].filter(Boolean);
+                _context.next = 7;
+                return allSettled(requestConfig.map(function (r) {
+                  return exceed.fetch(r);
+                }));
+              case 7:
+                result = _context.sent;
+                if (result.every(function (i) {
+                  return get(i, 'status') === 'fulfilled' && get(i, 'value.successful', false);
+                })) {
+                  Message.success({
+                    title: intl.get({
+                      id: 'rdc-tb-cd-assets.teambition.pipeline-info.SavedSuccessfully',
+                      defaultMessage: '保存成功'
+                    })
+                  });
+                  // 修改流水线名后更新面包屑
+                  if (location.pathname.includes("pipelines/" + pipeline.pipelineId)) {
+                    _initNav({
+                      pipelineId: pipeline.pipelineId,
+                      title: pipelineName
+                    });
+                  }
+                  _this.props.onRefresh();
+                  _this.onClose();
+                }
+                _this.setState({
+                  loading: false
+                });
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x, _x2) {
+          return _ref4.apply(this, arguments);
+        };
+      }());
+    };
+    _this.onClose = function () {
+      _this.baseInfoField.reset();
+      _this.props.onClose && _this.props.onClose();
+    };
+    _this.renderMember = function () {
+      var pipeline = _this.props.pipeline;
+      if (!Object.keys(pipeline).length) return null;
+      return /*#__PURE__*/React.createElement(Member, {
+        type: "panel",
+        objType: "pipeline",
+        objId: pipeline.pipelineId,
+        onChange: _this.saveMembers,
+        maxContentHeight: "calc(100vh - 310px)",
+        searchPlaceholder: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-info.FindMembers',
+          defaultMessage: '查找成员'
+        })
+      });
+    };
+    _this.baseInfoField = new Field(_this, {
+      autoUnmount: false
+    });
+    _this.state = {
+      loading: false,
+      groupDataSource: [],
+      currentTab: _props.defaultTab
+    };
+    return _this;
+  }
+  _inheritsLoose(PipelineInfo, _Component);
+  var _proto = PipelineInfo.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.getGroupDataSource();
+    this.setInfo(this.props);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.baseInfoField.reset();
+  };
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+      visible = _this$props2.visible,
+      pipeline = _this$props2.pipeline,
+      _this$props2$defaultS = _this$props2.defaultSelectVisible,
+      defaultSelectVisible = _this$props2$defaultS === void 0 ? false : _this$props2$defaultS,
+      dialogProps = _this$props2.dialogProps,
+      needGroup = _this$props2.needGroup,
+      needTag = _this$props2.needTag,
+      needEnv = _this$props2.needEnv;
+    var currentTab = this.state.currentTab;
+    return /*#__PURE__*/React.createElement(Dialog, _extends({
+      className: prefix,
+      visible: visible,
+      onClose: this.onClose,
+      onCancel: this.onClose,
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-info.PipelineInformation',
+        defaultMessage: '流水线信息'
+      }),
+      onOk: this.saveBaseInfo,
+      okProps: {
+        children: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-info.Save',
+          defaultMessage: '保存'
+        })
+      },
+      width: 896,
+      animation: {
+        "in": 'expandInDown',
+        out: 'expandOutUp'
+      },
+      footer: currentTab === BASE_INFO,
+      style: {
+        overflow: 'unset',
+        padding: 0
+      }
+    }, dialogProps), /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      visible: !Object.keys(pipeline).length || this.state.loading
+    }, this.renderSideBar, /*#__PURE__*/React.createElement("div", {
+      className: cx(prefix + "-content", currentTab)
+    }, currentTab === BASE_INFO ? /*#__PURE__*/React.createElement(PipelineBaseInfo, {
+      needGroup: needGroup,
+      needEnv: needEnv,
+      needTag: needTag,
+      needUuid: true,
+      uuidDisabled: true,
+      uuidLabel: intl.get({
+        id: 'rdc-tb-cd-assets.dashboardMain.main.tableColumns.PipelineID',
+        defaultMessage: '流水线 ID'
+      }),
+      field: this.baseInfoField,
+      defaultSelectVisible: defaultSelectVisible,
+      groupDataSource: this.state.groupDataSource
+    }) : this.renderMember())));
+  };
+  return _createClass(PipelineInfo, [{
+    key: "renderSideBar",
+    get: function get() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("div", {
+        className: prefix + "-sideBar"
+      }, /*#__PURE__*/React.createElement(Nav, {
+        defaultSelectedKey: this.props.defaultTab,
+        maxCount: 100,
+        onSelect: function onSelect(v) {
+          return _this2.setState({
+            currentTab: v
+          });
+        }
+      }, /*#__PURE__*/React.createElement(Item, {
+        key: BASE_INFO,
+        icon: "apps",
+        label: /*#__PURE__*/React.createElement(Title, {
+          align: "t",
+          trigger: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-info.BasicData',
+            defaultMessage: '基础资料'
+          })
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-info.BasicData',
+          defaultMessage: '基础资料'
+        }))
+      }), /*#__PURE__*/React.createElement(Item, {
+        key: MEMBER_MANAGEMENT,
+        icon: "user",
+        label: /*#__PURE__*/React.createElement(Title, {
+          align: "t",
+          trigger: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-info.MemberPermissions',
+            defaultMessage: '成员权限'
+          })
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-info.MemberPermissions',
+          defaultMessage: '成员权限'
+        }))
+      })));
+    }
+  }]);
+}(Component);
+PipelineInfo.defaultProps = {
+  needGroup: true
+};
+export default PipelineInfo;

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

@@ -0,0 +1,56 @@
+.pipeline-info {
+  width: 896px;
+  .next-dialog-body.next-dialog-body {
+    padding: 0;
+    &.next-dialog-body-no-padding {
+      margin-right: 0 !important;
+      overflow-y: hidden !important;
+    }
+  }
+  &-sideBar {
+    width: 20%;
+    display: inline-block;
+    vertical-align: top;
+    border-right: 1px solid var(--color-brand3-1, #f2f5f7);
+    height: calc(100vh - 306px);
+    @import "src/components/common/at-dialog-nav.scss";
+
+    .at-nav-item-main {
+      display: flex;
+      align-items: center;
+    }
+
+    .at-nav-item-label {
+      overflow: hidden;
+    }
+  }
+  &-content {
+    width: calc(100% - 20%);
+    overflow-x: auto;
+    display: inline-block;
+    vertical-align: top;
+    overflow-y: auto;
+    height: calc(100vh - 306px);
+    &.base-info {
+      padding: 10px 20px 0 20px;
+    }
+  }
+
+}
+.tag-select {
+  &-item {
+    & > span:nth-child(1) {
+      width: 12px;
+      height: 12px;
+      display: inline-block;
+      border-radius: 100%;
+      margin-right: 7px;
+    }
+  }
+  &-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

package/es/components/common/teambition/pipeline-info/tagSelect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const getTagList: (groupNameCb: any) => Promise<{
+    tagLists?: undefined;
+    formatTagLists?: undefined;
+} | {
+    tagLists: any;
+    formatTagLists: any;
+}>;
+declare const TagSelect: (props: any) => JSX.Element;
+export default TagSelect;

package/es/components/common/teambition/pipeline-info/tagSelect.js

@@ -0,0 +1,291 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+var _excluded = ["onChange", "value", "createTag", "defaultSelectVisible"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect, cloneElement } from 'react';
+import { Select as AtSelect, Button, Field } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import exceed from "../../../../utils/apimap";
+import { debounce } from 'lodash-es';
+import AddTagDialog from "../../../dashboardMain/components/tag-setting/add-tag-dialog";
+import intl from "../../../../locale";
+export var getTagList = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(groupNameCb) {
+    var config, _yield$exceed$fetch, successful, object;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          config = {
+            api: 'Tag.group.list',
+            data: {
+              withDetails: true
+            }
+          };
+          _context.next = 3;
+          return exceed.fetch(config);
+        case 3:
+          _yield$exceed$fetch = _context.sent;
+          successful = _yield$exceed$fetch.successful;
+          object = _yield$exceed$fetch.object;
+          if (successful) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 8:
+          return _context.abrupt("return", {
+            tagLists: object,
+            formatTagLists: formatSelectData(object, groupNameCb)
+          });
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getTagList(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var formatSelectData = function formatSelectData(data, groupNameCb) {
+  if (data === void 0) {
+    data = [];
+  }
+  return data.reduce(function (prev, item) {
+    var name = item.name,
+      id = item.id,
+      _item$tagList = item.tagList,
+      tagList = _item$tagList === void 0 ? [] : _item$tagList;
+    if (!tagList.length) return prev;
+    var children = tagList.map(function (_ref2) {
+      var label = _ref2.name,
+        value = _ref2.id,
+        color = _ref2.color;
+      return {
+        label: label,
+        value: value,
+        color: color
+      };
+    });
+    return [].concat(prev, [{
+      label: groupNameCb ? groupNameCb({
+        name: name,
+        id: id
+      }) : name,
+      children: children
+    }]);
+  }, []);
+};
+var _ref3 = window.AK_GLOBAL.currentUser || {},
+  permissions = _ref3.permissions;
+var canCreateTag = permissions.includes('tb.role.tag.create');
+var createTrigger = function createTrigger(_ref4) {
+  var _ref4$icon = _ref4.icon,
+    icon = _ref4$icon === void 0 ? false : _ref4$icon,
+    _ref4$text = _ref4.text,
+    text = _ref4$text === void 0 ? '' : _ref4$text;
+  return /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    type: "primary",
+    disabled: !canCreateTag
+  }, icon && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    type: "add-fill"
+  }), text || intl.get({
+    id: 'rdc-tb-cd-assets.teambition.pipeline-info.tagSelect.CreateTag',
+    defaultMessage: '新建标签'
+  }));
+};
+var prefix = 'tag-select';
+var timer = null;
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+    value = props.value,
+    _props$createTag = props.createTag,
+    createTag = _props$createTag === void 0 ? true : _props$createTag,
+    _props$defaultSelectV = props.defaultSelectVisible,
+    defaultSelectVisible = _props$defaultSelectV === void 0 ? false : _props$defaultSelectV,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useState = useState([]),
+    selectData = _useState[0],
+    setSelectData = _useState[1];
+  var _useState2 = useState([]),
+    originalData = _useState2[0],
+    setOriginalData = _useState2[1];
+  var _useState3 = useState({}),
+    addTagInfo = _useState3[0],
+    setAddTagInfo = _useState3[1];
+  var _useState4 = useState(false),
+    addTagVisible = _useState4[0],
+    setAddTagVisible = _useState4[1];
+  var _useState5 = useState(false),
+    tagSelectVisible = _useState5[0],
+    setTagSelectVisible = _useState5[1];
+  var tagField = Field.useField();
+  var onAddTag = function onAddTag(e, _ref5) {
+    var name = _ref5.name,
+      id = _ref5.id;
+    e.stopPropagation();
+    tagField.setValues({
+      tagGroupId: id
+    });
+    setAddTagInfo({
+      tagGroupDatasource: [{
+        name: name,
+        id: id
+      }],
+      tagGroupDisabled: true
+    });
+    setAddTagVisible(true);
+    setTagSelectVisible(false);
+  };
+  var groupNameCb = function groupNameCb(_ref6) {
+    var name = _ref6.name,
+      id = _ref6.id;
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix + "-label"
+    }, name, createTag && /*#__PURE__*/cloneElement(createTrigger({
+      icon: true
+    }), {
+      onClick: function onClick(e) {
+        return onAddTag(e, {
+          name: name,
+          id: id
+        });
+      }
+    }));
+  };
+  var getSelectData = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _yield$getTagList, tagLists, formatTagLists;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return getTagList(groupNameCb);
+          case 2:
+            _yield$getTagList = _context2.sent;
+            tagLists = _yield$getTagList.tagLists;
+            formatTagLists = _yield$getTagList.formatTagLists;
+            setOriginalData(tagLists);
+            setSelectData(formatTagLists);
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function getSelectData() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (!defaultSelectVisible) {
+      return;
+    }
+    timer = setTimeout(function () {
+      setTagSelectVisible(defaultSelectVisible);
+    }, 500);
+  }, [defaultSelectVisible]);
+  useEffect(function () {
+    getSelectData();
+    return function () {
+      timer && clearTimeout(timer);
+    };
+  }, []);
+  var onSearch = function onSearch(v) {
+    if (v) {
+      var res = originalData.reduce(function (pre, _ref8) {
+        var _ref8$tagList = _ref8.tagList,
+          tagList = _ref8$tagList === void 0 ? [] : _ref8$tagList,
+          name = _ref8.name,
+          id = _ref8.id;
+        if (!tagList.length) return [];
+        var filterTagList = tagList.filter(function (_ref9) {
+          var innerName = _ref9.name;
+          return innerName.includes(v);
+        });
+        if (!filterTagList.length) return pre;
+        return [].concat(pre, formatSelectData([{
+          name: name,
+          id: id,
+          tagList: filterTagList
+        }]));
+      }, []);
+      setSelectData(res);
+      return;
+    }
+    setSelectData(formatSelectData(originalData));
+  };
+  var renderItem = function renderItem(_ref10) {
+    var color = _ref10.color,
+      label = _ref10.label;
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix + "-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        background: color
+      }
+    }), /*#__PURE__*/React.createElement("span", null, label));
+  };
+  var notFoundContent = function notFoundContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-info.tagSelect.NoLabel',
+      defaultMessage: '暂无标签，'
+    }), /*#__PURE__*/cloneElement(createTrigger({
+      text: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-info.tagSelect.ClickCreateTag',
+        defaultMessage: '点击新建标签'
+      })
+    }), {
+      onClick: function onClick(e) {
+        return onAddTag(e, {
+          name: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-info.tagSelect.Unclassified',
+            defaultMessage: '未分类'
+          }),
+          id: 0
+        });
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AtSelect, _extends({
+    mode: "tag",
+    showSearch: true,
+    filterLocal: false,
+    onSearch: debounce(onSearch, 500),
+    style: {
+      width: '100%'
+    },
+    popupClassName: prefix,
+    itemRender: renderItem,
+    dataSource: selectData,
+    notFoundContent: notFoundContent(),
+    visible: tagSelectVisible
+  }, value ? {
+    value: (value || []).map(Number)
+  } : {}, {
+    onVisibleChange: setTagSelectVisible,
+    onChange: function onChange(v) {
+      _onChange && _onChange(v);
+    }
+  }, others)), addTagVisible && /*#__PURE__*/React.createElement(AddTagDialog, _extends({}, addTagInfo, {
+    visible: addTagVisible,
+    onClose: function onClose() {
+      setAddTagVisible(false);
+      tagField.reset();
+    },
+    onRefresh: function onRefresh() {
+      return getSelectData();
+    },
+    field: tagField
+  })));
+};
+export default TagSelect;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Folding: ({ children, visible, setVisible }: {
+    children: any;
+    visible: any;
+    setVisible: any;
+}) => JSX.Element;
+export default Folding;