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

package/es/components/dashboardNav/index.js

@@ -0,0 +1,1150 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useContext, useCallback, useMemo } from 'react';
+import { navigateWithContexPath } from "../../utils/route-utils";
+import { Context } from "../../contexts/pipeline";
+import { Overlay, Input, Menu, Balloon, Button, PopConfirm, Message, ConfigProvider, Dialog, Form } from '@teamix/ui';
+import exceed from "../../utils/apimap";
+import cx from 'classnames';
+import { generateConfigObj } from "../dashboardMain/enterprise-setting/utils";
+import QuotaNotifyCard from "../quotaNotifyCard";
+import { Star, SearchIcon, YunxiaoIcon, Title } from '@alife/devops-ui';
+import { intervalEnterTime, getFeature, insertIf } from "../../utils";
+import { get, throttle } from 'lodash-es';
+import intl from "../../locale";
+import allSettled from 'promise.allsettled';
+import track from "../../utils/track";
+import { updateAdvance } from "./util";
+import "./index.scss";
+import getUrlWithContextPath from "../../utils/contextPathUtil";
+var Popup = Overlay.Popup;
+var Item = Menu.Item;
+var Tooltip = Balloon.Tooltip;
+var groupOpsStepMap = {
+  edit: 'group-edit',
+  "delete": 'group-delete',
+  home: 'group-home'
+};
+var PIPELINE_GROUP_ADMIN = 'tb.role.pipelineGroup.admin';
+var BUILD_USER_VIEW = 'tb.role.buildUsage.view';
+var createGroupText = intl.get({
+  id: 'rdc-tb-cd-assets.components.dashboardNav.CreateAGroup',
+  defaultMessage: '新建分组'
+});
+var editGroupText = intl.get({
+  id: 'rdc-tb-cd-assets.components.dashboardNav.EditGroups',
+  defaultMessage: '编辑分组'
+});
+var CreateOrEditGroup = function CreateOrEditGroup(props) {
+  var group = props.group,
+    name = props.name,
+    pipelineGroups = props.pipelineGroups,
+    loading = props.loading,
+    onOk = props.onOk,
+    updataGroup = props.updataGroup,
+    visible = props.visible,
+    purpose = props.purpose;
+  var _useState = useState(name),
+    groupName = _useState[0],
+    setGroupName = _useState[1];
+  var isGroupExist = useMemo(function () {
+    return pipelineGroups.some(function (val) {
+      return val.name === groupName && (purpose === 'edit' ? val.name !== name : true);
+    });
+  }, [groupName]);
+  var onUpdataGroup = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(groupName === name && purpose === 'edit' || !groupName)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", onOk());
+          case 2:
+            if (!isGroupExist) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return", Message.error({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.components.dashboardNav.TheGroupAlreadyExists',
+                defaultMessage: '该分组已存在'
+              })
+            }));
+          case 4:
+            _context.next = 6;
+            return updataGroup(_extends({}, group, {
+              name: groupName
+            }));
+          case 6:
+            onOk();
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onUpdataGroup() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var getTitle = function getTitle() {
+    if (purpose === 'edit') {
+      return editGroupText;
+    }
+    return createGroupText;
+  };
+  return /*#__PURE__*/React.createElement(Dialog, {
+    title: getTitle(),
+    visible: visible,
+    onClose: onOk,
+    onCancel: onOk,
+    onOk: onUpdataGroup,
+    height: 320,
+    okProps: {
+      loading: loading,
+      disabled: groupName === name && purpose === 'edit' || isGroupExist || !groupName
+    }
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardMain.GroupName',
+      defaultMessage: '分组名称'
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    autoFocus: true,
+    className: "edit-group-input",
+    maxLength: 40,
+    showLimitHint: true,
+    value: groupName,
+    trim: true,
+    state: isGroupExist ? 'error' : '',
+    onChange: setGroupName
+  })), isGroupExist && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'var(--color-error-4, #ed675a)',
+      fontSize: 12,
+      marginTop: -12
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.components.dashboardNav.TheGroupAlreadyExists',
+    defaultMessage: '该分组已存在'
+  })));
+};
+
+// 定位到选中分组
+var ScrollToActiveGroup = function ScrollToActiveGroup() {
+  useEffect(function () {
+    var _document$querySelect;
+    (_document$querySelect = document.querySelector("." + PREFIX + "-group-item-active")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollIntoView();
+  }, []);
+  return null;
+};
+var PREFIX = 'pipeline-sidebar';
+var timeout = null;
+var DashboardNav = function DashboardNav() {
+  var _useContext = useContext(Context),
+    actions = _useContext.actions,
+    _useContext$permissio = _useContext.permissions,
+    permissions = _useContext$permissio === void 0 ? [] : _useContext$permissio,
+    _useContext$pipelineG = _useContext.pipelineGroups,
+    pipelineGroups = _useContext$pipelineG === void 0 ? [] : _useContext$pipelineG,
+    pipelineTabActiveNav = _useContext.pipelineTabActiveNav,
+    sidebarActiveNav = _useContext.sidebarActiveNav,
+    settingsPopVisible = _useContext.settingsPopVisible;
+  var _useState2 = useState(false),
+    deleteGroupLoading = _useState2[0],
+    setDeleteGroupLoading = _useState2[1];
+  var _useState3 = useState(false),
+    updataGroupLoading = _useState3[0],
+    setUpdataGroupLoading = _useState3[1];
+  var _useState4 = useState([]),
+    pipelineGroupsFilter = _useState4[0],
+    setPipelineGroupsFilter = _useState4[1];
+  var _useState5 = useState(''),
+    searchValue = _useState5[0],
+    setSearchValue = _useState5[1];
+  var _useState6 = useState(false),
+    searchOpen = _useState6[0],
+    setSearchOpen = _useState6[1];
+  var _useState7 = useState({
+      concurrency: 0,
+      concurrencyLimit: 0,
+      buildDuration: 0,
+      buildDurationLimit: 0
+    }),
+    quota = _useState7[0],
+    setQuota = _useState7[1];
+  var _useState8 = useState(false),
+    concurrencyInfinite = _useState8[0],
+    setConcurrencyInfinite = _useState8[1];
+  var _useState9 = useState(false),
+    timeInfinite = _useState9[0],
+    setTimeInfinite = _useState9[1];
+  var _useState10 = useState([]),
+    collecStartGroupIds = _useState10[0],
+    setCollecStartGroupIds = _useState10[1];
+  var _useState11 = useState(true),
+    showGroupText = _useState11[0],
+    setShowGroupText = _useState11[1];
+  var _useState12 = useState(false),
+    editGroupDialogVisible = _useState12[0],
+    setEditGroupDialogVisible = _useState12[1];
+  var _useState13 = useState({}),
+    groupInfo = _useState13[0],
+    setGroupInfo = _useState13[1];
+  var _useState14 = useState(''),
+    groupOperate = _useState14[0],
+    setGroupOperate = _useState14[1];
+  useEffect(function () {
+    var searchResult = pipelineGroups.filter(function (val) {
+      return val.name.includes(searchValue);
+    });
+    setPipelineGroupsFilter(searchResult);
+  }, [pipelineGroups, searchValue]);
+  useEffect(function () {
+    if (pipelineGroups !== null && pipelineGroups !== void 0 && pipelineGroups.length && !collecStartGroupIds.length) {
+      var _pipelineGroups$filte;
+      setCollecStartGroupIds((_pipelineGroups$filte = pipelineGroups.filter(function (_ref2) {
+        var starred = _ref2.starred;
+        return starred;
+      })) === null || _pipelineGroups$filte === void 0 ? void 0 : _pipelineGroups$filte.map(function (_ref3) {
+        var id = _ref3.id;
+        return id;
+      }));
+    }
+  }, [pipelineGroups]);
+  useEffect(function () {
+    // 分组文案在searchIcon收起后再出现
+    if (searchOpen) {
+      setShowGroupText(false);
+    } else {
+      setTimeout(function () {
+        setShowGroupText(true);
+      }, 200);
+    }
+  }, [searchOpen]);
+  var expandGroup = function expandGroup() {
+    var _document$querySelect2;
+    (_document$querySelect2 = document.querySelector('.tb-common-sidebar-main-item-group-arrow .teamix-icon-trilateral-right-fill')) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.click();
+  };
+  var _onOpenedChange = useCallback(throttle(function (opened, isBalloon) {
+    setSearchOpen(opened);
+    if (opened) {
+      //  autofocus
+      if (!isBalloon) {
+        expandGroup();
+      }
+      setTimeout(function () {
+        document.querySelector("." + PREFIX + "-search-group" + (isBalloon ? '-balloon' : '') + " input").click();
+      }, 200);
+    }
+  }, 300), []);
+  var onChange = useCallback(function (value) {
+    return setSearchValue(value);
+  }, []);
+  var goToHome = function goToHome() {
+    setDeleteGroupLoading(false);
+    setUpdataGroupLoading(false);
+  };
+  var onChangeNav = function onChangeNav(_ref4, same) {
+    var path = _ref4.id;
+    if (path === sidebarActiveNav && same !== false) {
+      return;
+    }
+    fetchQuota();
+    actions.setLoading(true);
+    actions.setTabPanelHeight(path === 'my' ? 37 : 0);
+    actions.setSidebarActiveNav(path);
+    actions.setPipelineTabActiveNav('my');
+    actions.setGroupId('');
+    navigateWithContexPath("/" + path);
+  };
+  var onGroupsNavChange = function onGroupsNavChange(_ref5) {
+    var path = _ref5.id;
+    if (path === sidebarActiveNav) {
+      return;
+    }
+    actions.setLoading(true);
+    actions.setTabPanelHeight(0);
+    actions.setSidebarActiveNav(path);
+    actions.setGroupId(path);
+    navigateWithContexPath("/groups/" + path);
+  };
+  var onCreateGroup = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref6) {
+      var name, _yield$exceed$fetch, successful, object;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            name = _ref6.name;
+            if (!(pipelineGroups.length && pipelineGroups.length > 300)) {
+              _context2.next = 4;
+              break;
+            }
+            Message.error({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.components.dashboardNav.YouCannotCreatePipelineGroups',
+                defaultMessage: '无法创建流水线分组,分组最大数量为300个，请删除一些分组后再创建。'
+              })
+            });
+            return _context2.abrupt("return");
+          case 4:
+            setUpdataGroupLoading(true);
+            _context2.next = 7;
+            return exceed.fetch({
+              api: 'Pipeline.create.groups',
+              data: {
+                name: name,
+                description: ''
+              }
+            });
+          case 7:
+            _yield$exceed$fetch = _context2.sent;
+            successful = _yield$exceed$fetch.successful;
+            object = _yield$exceed$fetch.object;
+            if (successful) {
+              _context2.next = 12;
+              break;
+            }
+            return _context2.abrupt("return", setUpdataGroupLoading(false));
+          case 12:
+            _context2.next = 14;
+            return actions.getPipelineGroups();
+          case 14:
+            setUpdataGroupLoading(false);
+            Message.success({
+              title: "\u3010" + name + "\u3011" + intl.get({
+                id: 'rdc-tb-cd-assets.custom-type.dialogs.locale.CreateSuccess',
+                defaultMessage: '创建成功'
+              })
+            });
+            return _context2.abrupt("return", object === null || object === void 0 ? void 0 : object.id);
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onCreateGroup(_x) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var renderCreatePipelineGroup = function renderCreatePipelineGroup(_ref8) {
+    var _ref8$name = _ref8.name,
+      name = _ref8$name === void 0 ? '' : _ref8$name,
+      _ref8$style = _ref8.style,
+      style = _ref8$style === void 0 ? {} : _ref8$style,
+      disabled = _ref8.disabled,
+      createtype = _ref8.createtype,
+      _ref8$hiddenIcon = _ref8.hiddenIcon,
+      hiddenIcon = _ref8$hiddenIcon === void 0 ? false : _ref8$hiddenIcon;
+    var btn = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      style: style,
+      iconSize: "medium",
+      onClick: function onClick() {
+        track({
+          createtype: createtype,
+          page: 'main page',
+          action: 'create pipeline group',
+          daysinceenterflow: intervalEnterTime()
+        });
+        setGroupOperate('create');
+        setEditGroupDialogVisible(true);
+        setGroupInfo({
+          name: ''
+        }); // 新建分组，分组名置为空
+      },
+      className: "create-group-btn",
+      disabled: disabled
+    }, !hiddenIcon && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-line",
+      className: "create-group-btn-icon"
+    }), name);
+    var trigger = disabled ? /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: btn,
+      align: "t",
+      popupStyle: {
+        width: 200
+      },
+      popupProps: {
+        offset: [38, 0]
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardNav.notCreateGroupTip',
+      defaultMessage: '您暂无权限新建分组，请联系企业管理员完成创建'
+    })) : btn;
+    return trigger;
+  };
+  var getEmptyGroupItem = function getEmptyGroupItem() {
+    if (pipelineGroupsFilter.length === 0 && searchValue) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "empty-group-item"
+      }, /*#__PURE__*/React.createElement("span", null, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.No',
+        defaultMessage: '暂无“'
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "search-name"
+      }, searchValue), /*#__PURE__*/React.createElement("span", null, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.Data',
+        defaultMessage: '”的数据'
+      })));
+    }
+    if (pipelineGroups.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "empty-group-item"
+      }, /*#__PURE__*/React.createElement("span", null, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.NoGroup',
+        defaultMessage: '暂无分组，'
+      })), renderCreatePipelineGroup({
+        name: createGroupText,
+        disabled: !permissions.includes(PIPELINE_GROUP_ADMIN),
+        createtype: 'empty page create',
+        hiddenIcon: true
+      }));
+    }
+    return null;
+  };
+  var renderPipelineGroup = function renderPipelineGroup(isBalloon) {
+    var showCreate = permissions.includes(PIPELINE_GROUP_ADMIN) && (showGroupText || isBalloon);
+    return /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__group",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, showGroupText && /*#__PURE__*/React.createElement("span", {
+      className: PREFIX + "__group_title"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardNav.PipelineGrouped',
+      defaultMessage: '已分组'
+    })), isBalloon && /*#__PURE__*/React.createElement(ScrollToActiveGroup, null), /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__group_btns"
+    }, pipelineGroups.length > 0 && /*#__PURE__*/React.createElement(ConfigProvider, {
+      prefix: "next-"
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.PipelineGroupSearchTips',
+        defaultMessage: '请搜索分组'
+      }),
+      className: PREFIX + "-search-group" + (isBalloon ? '-balloon' : ''),
+      direction: "rtl",
+      hasClear: true,
+      value: searchValue,
+      width: (isBalloon ? 192 : 148) + (isBalloon && !showCreate ? 28 : 0),
+      open: searchOpen,
+      onOpenedChange: function onOpenedChange(o) {
+        _onOpenedChange(o, isBalloon);
+      },
+      onChange: onChange,
+      composition: true // 修复受控后不能输入中文的问题
+    })), showCreate && renderCreatePipelineGroup({
+      createtype: 'main page create'
+    })));
+  };
+  var onDeleteGroup = /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(g, index, resolve) {
+      var closeLoading, pipelines, currentGroupId, nextGroupId, prevGroupId;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setDeleteGroupLoading(true);
+            closeLoading = function closeLoading() {
+              setDeleteGroupLoading(false);
+            }; // 查下分组下的所有流水线，然后把所有流水线移除出组，最后在删除组
+            if (!(g.total > 0)) {
+              _context3.next = 12;
+              break;
+            }
+            _context3.next = 5;
+            return exceed.fetch({
+              api: 'Pipeline.get.group.pipelines',
+              params: {
+                id: g.id
+              }
+            });
+          case 5:
+            _context3.t0 = _context3.sent;
+            if (_context3.t0) {
+              _context3.next = 8;
+              break;
+            }
+            _context3.t0 = {};
+          case 8:
+            pipelines = _context3.t0;
+            if (!get(pipelines, 'object.dataList', []).length) {
+              _context3.next = 12;
+              break;
+            }
+            _context3.next = 12;
+            return exceed.fetch({
+              api: 'Pipeline.remove.piplines.group',
+              params: {
+                id: g.id
+              },
+              data: {
+                pipelines: get(pipelines, 'object.dataList', []).map(function (_ref10) {
+                  var pipelineId = _ref10.pipelineId;
+                  return pipelineId;
+                })
+              }
+            })["catch"](closeLoading);
+          case 12:
+            _context3.next = 14;
+            return exceed.fetch({
+              api: 'Pipeline.delete.groups',
+              params: {
+                id: g.id
+              }
+            })["catch"](closeLoading);
+          case 14:
+            _context3.next = 16;
+            return Promise.all([actions.getPipelineGroups(), actions.getPipelineStarGroups()])["catch"](closeLoading);
+          case 16:
+            closeLoading();
+            Message.success({
+              title: "\u3010" + g.name + "\u3011" + intl.get({
+                id: 'rdc-tb-cd-assets.components.variableGroup.deleteVariableGroupDialog.DeletedSuccessfully',
+                defaultMessage: '删除成功'
+              })
+            });
+            resolve && resolve();
+            goToHome();
+            currentGroupId = g.id;
+            if (!(Number.isFinite(parseInt(pipelineTabActiveNav, 10)) && !Number.isFinite(parseInt(sidebarActiveNav, 10)) && String(pipelineTabActiveNav) === String(currentGroupId))) {
+              _context3.next = 24;
+              break;
+            }
+            onChangeNav({
+              id: 'my'
+            }, false);
+            return _context3.abrupt("return");
+          case 24:
+            if (!(String(currentGroupId) !== String(sidebarActiveNav))) {
+              _context3.next = 26;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 26:
+            nextGroupId = get(pipelineGroups, "[" + (index + 1) + "].id", '');
+            prevGroupId = get(pipelineGroups, "[" + (index - 1) + "].id", '');
+            if (!((!nextGroupId || String(nextGroupId) === '0') && !prevGroupId)) {
+              _context3.next = 31;
+              break;
+            }
+            onChangeNav({
+              id: 'my'
+            }, false);
+            return _context3.abrupt("return");
+          case 31:
+            if (!(String(nextGroupId) === '0' && prevGroupId)) {
+              _context3.next = 34;
+              break;
+            }
+            onGroupsNavChange({
+              id: prevGroupId
+            });
+            return _context3.abrupt("return");
+          case 34:
+            if (nextGroupId) {
+              onGroupsNavChange({
+                id: nextGroupId
+              });
+            }
+          case 35:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function onDeleteGroup(_x2, _x3, _x4) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  var onUpdataGroup = /*#__PURE__*/function () {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref11) {
+      var id, name, description, _yield$exceed$fetch2, successful;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            id = _ref11.id, name = _ref11.name, description = _ref11.description;
+            setUpdataGroupLoading(true);
+            _context4.next = 4;
+            return exceed.fetch({
+              api: 'Pipeline.set.groups',
+              params: {
+                id: id
+              },
+              data: {
+                id: id,
+                description: description,
+                name: name
+              }
+            });
+          case 4:
+            _yield$exceed$fetch2 = _context4.sent;
+            successful = _yield$exceed$fetch2.successful;
+            if (successful) {
+              _context4.next = 8;
+              break;
+            }
+            return _context4.abrupt("return", setUpdataGroupLoading(false));
+          case 8:
+            _context4.next = 10;
+            return allSettled([actions.getPipelineStarGroups(), actions.getPipelineGroups()]);
+          case 10:
+            Message.success({
+              title: intl.get({
+                id: 'rdc-tb-cd-assets.components.dashboardNav.NameChangedSuccessfully',
+                defaultMessage: '【{name}】更改成功'
+              }, {
+                name: name
+              })
+            });
+            setUpdataGroupLoading(false);
+            goToHome();
+          case 13:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function onUpdataGroup(_x5) {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+  var renderPipelineGroupOps = function renderPipelineGroupOps(g, index) {
+    var content = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Item, {
+      key: groupOpsStepMap.edit,
+      onClick: function onClick() {
+        setGroupInfo(g);
+        setGroupOperate('edit');
+        setEditGroupDialogVisible(true);
+        document.body.click();
+      }
+    }, editGroupText), /*#__PURE__*/React.createElement(Item, {
+      key: groupOpsStepMap["delete"],
+      className: PREFIX + "-delete-group-item",
+      onClick: function onClick() {
+        document.body.click();
+        Dialog.confirm({
+          messageProps: {
+            type: 'error'
+          },
+          size: 'mini',
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.DeleteAGroup',
+            defaultMessage: '删除分组'
+          }),
+          content: /*#__PURE__*/React.createElement("span", {
+            style: {
+              lineHeight: 1.8
+            }
+          }, "\"" + g.name + "\"", intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.CurrentlyAvailable',
+            defaultMessage: '目前有'
+          }), g.total, intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.LineAreYouSureYou',
+            defaultMessage: '条流水线，确认删除吗？'
+          })),
+          okProps: {
+            children: intl.get({
+              id: 'rdc-tb-cd-assets.dashboardMain.pipeline-group.Delete',
+              defaultMessage: '删除'
+            }),
+            warning: true,
+            loading: deleteGroupLoading
+          },
+          onOk: function onOk() {
+            return new Promise(function (resolve) {
+              onDeleteGroup(g, index, resolve);
+            });
+          }
+        });
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardNav.DeleteAGroup',
+      defaultMessage: '删除分组'
+    })));
+    return /*#__PURE__*/React.createElement(ConfigProvider, {
+      prefix: "next-"
+    }, /*#__PURE__*/React.createElement(Popup, {
+      style: {
+        width: 120
+      },
+      afterClose: goToHome,
+      triggerType: "click",
+      v2: false,
+      trigger: /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        size: "medium",
+        "data-group-id": g.id,
+        style: {
+          marginLeft: 4
+        },
+        className: PREFIX + "__group__item__ops--more",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "more-line"
+      }))
+    }, content));
+  };
+  var onStarPipelineGroup = function onStarPipelineGroup(g) {
+    var resetCollecIds = updateAdvance(collecStartGroupIds, g.id, g.starred, setCollecStartGroupIds);
+    return new Promise(function (resolve, reject) {
+      exceed.fetch({
+        api: 'Pipeline.start.groups',
+        data: {
+          ids: g.id,
+          ops: g.starred ? 'DELETE' : 'ADD'
+        }
+      }).then(function (_ref13) {
+        var successful = _ref13.successful;
+        if (!successful) {
+          reject();
+          resetCollecIds();
+          return;
+        }
+        actions.getPipelineStarGroups();
+        actions.getPipelineGroups();
+        resolve();
+      })["catch"](function () {
+        reject();
+        resetCollecIds();
+        Message.error({
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.CollectionFailedPleaseTryAgain',
+            defaultMessage: '收藏失败，请重试'
+          })
+        });
+      });
+    });
+  };
+  var renderStarPipelineGroup = function renderStarPipelineGroup(g) {
+    return /*#__PURE__*/React.createElement(Star, {
+      key: JSON.stringify(g),
+      defaultStarred: g.starred,
+      onClick: function onClick() {
+        return onStarPipelineGroup(g);
+      }
+    });
+  };
+  var renderLoadMoreButton = function renderLoadMoreButton() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      type: 'primary'
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardNav.LoadMore',
+      defaultMessage: '加载更多...'
+    })));
+  };
+  var renderPipelineGroupItem = function renderPipelineGroupItem(g, index) {
+    if (String(g.id) === '-1') {
+      return renderLoadMoreButton(g, index);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: g.id,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        if (String(g.id) === String(sidebarActiveNav)) {
+          return;
+        }
+        onGroupsNavChange(g);
+      },
+      className: cx(PREFIX + "__group__item", {
+        active: String(g.id) === String(sidebarActiveNav)
+      })
+    }, /*#__PURE__*/React.createElement(Title, {
+      align: "t",
+      popupStyle: {
+        maxWidth: 180
+      },
+      trigger: String(g.id) !== '0' ? g.name : /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'var(--color-text1-7, #8b8b8b)'
+        }
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "warning-fill",
+        size: "medium",
+        style: {
+          marginRight: 4
+        }
+      }), g.name)
+    }, g.name), /*#__PURE__*/React.createElement("div", {
+      "data-group-id": g.id,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      className: cx(PREFIX + "__group__item__ops", {
+        'not-star': !g.starred
+      })
+    }, permissions.includes(PIPELINE_GROUP_ADMIN) && renderPipelineGroupOps(g, index), renderStarPipelineGroup(g)));
+  };
+  var registerSidebar = function registerSidebar(_ref14) {
+    var main = _ref14.main,
+      extra = _ref14.extra;
+    var active;
+    switch (true) {
+      case ['star', 'my'].includes(sidebarActiveNav):
+        active = 'my';
+        break;
+      case Number.isFinite(parseInt(sidebarActiveNav, 10)):
+        active = Number(sidebarActiveNav);
+        break;
+      default:
+        active = sidebarActiveNav;
+    }
+    var config = _extends({
+      active: active,
+      colors: {
+        themeColor: 'var(--color-brand1-6, #1b9aee)'
+      },
+      main: main
+    }, extra.length ? {
+      extra: extra
+    } : {});
+    window.TB_NAVIGATION.initSidebar && window.TB_NAVIGATION.initSidebar(config);
+  };
+  var renderQuota = function renderQuota() {
+    if (!concurrencyInfinite && quota.buildDuration < quota.buildDurationLimit) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "nav_tip"
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'var(--color-text1-7, #8b8b8b)'
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.Concurrency',
+        defaultMessage: '(并发数'
+      })), /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'var(--color-error-5, #e84738)'
+        }
+      }, quota.concurrency, "/", quota.concurrencyLimit), /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'var(--color-text1-7, #8b8b8b)'
+        }
+      }, ")"));
+    }
+    var text = Math.round(quota.buildDuration / 60) + "/" + Math.round(quota.buildDurationLimit / 60);
+    if (text.length > 9) {
+      text = text.substring(0, 8) + "...";
+    }
+    if (!timeInfinite && quota.buildDuration >= quota.buildDurationLimit) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        trigger: /*#__PURE__*/React.createElement("span", {
+          className: "nav_tip"
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: 'var(--color-text1-7, #8b8b8b)'
+          }
+        }, "("), /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: 'var(--color-error-5, #e84738)'
+          }
+        }, text), /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: 'var(--color-text1-7, #8b8b8b)'
+          }
+        }, ")")),
+        align: "t"
+      }, "\u6784\u5EFA\u65F6\u957F " + Math.round(quota.buildDuration / 60) + "/" + Math.round(quota.buildDurationLimit / 60));
+    }
+  };
+  var createGroup = /*#__PURE__*/function () {
+    var _ref16 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(_ref15) {
+      var name, id;
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            name = _ref15.name;
+            _context5.next = 3;
+            return onCreateGroup({
+              name: name
+            });
+          case 3:
+            id = _context5.sent;
+            id && onGroupsNavChange({
+              id: id
+            });
+            setTimeout(function () {
+              var _document$querySelect3, _document$querySelect4;
+              (_document$querySelect3 = document.querySelector("." + PREFIX + "__group-item-active")) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.scrollIntoView();
+              (_document$querySelect4 = document.querySelector("." + PREFIX + "-group-item-active")) === null || _document$querySelect4 === void 0 ? void 0 : _document$querySelect4.scrollIntoView();
+            }, 0);
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function createGroup(_x6) {
+      return _ref16.apply(this, arguments);
+    };
+  }();
+  var initSidebar = function initSidebar() {
+    var _get;
+    var settingNavList = (generateConfigObj(permissions) || {}).navList || [];
+    var extra = [];
+    if (permissions.includes(BUILD_USER_VIEW)) {
+      extra.push({
+        id: 'enterprise-price',
+        name: /*#__PURE__*/React.createElement("span", null, intl.get({
+          id: 'rdc-tb-cd-assets.components.dashboardNav.price',
+          defaultMessage: '资源用量'
+        }), "\xA0\xA0", false && getFeature('price.status.async') && renderQuota()),
+        icon: {
+          useJsx: true,
+          jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+            type: "resource-pool-line"
+          })
+        },
+        onClick: function onClick(_ref17) {
+          var path = _ref17.id;
+          navigateWithContexPath("/" + path + "/state");
+        },
+        href: getUrlWithContextPath('/enterprise-price/state'),
+        tooltipCustom: {
+          content: /*#__PURE__*/React.createElement("span", null, intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.Resources',
+            defaultMessage: '资源用量'
+          }), !concurrencyInfinite && quota.buildDuration < quota.buildDurationLimit && intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.ConcurrencyQuotaconcurrencyQuotaconcurrencylimit',
+            defaultMessage: '并发数 {quotaConcurrency}/{quotaConcurrencyLimit}'
+          }, {
+            quotaConcurrency: quota.concurrency,
+            quotaConcurrencyLimit: quota.concurrencyLimit
+          }))
+        }
+      });
+    }
+    var activeObj = (settingNavList || []).find(function (_ref18) {
+      var _ref18$list = _ref18.list,
+        list = _ref18$list === void 0 ? [] : _ref18$list;
+      return list.length;
+    });
+    var key = (_get = get(activeObj, 'list[0].key')) === null || _get === void 0 ? void 0 : _get.replace(/\/.*$/, ''); // 多级路由取第一层，e.g. build/*groupId
+
+    extra.push.apply(extra, [(settingNavList || []).some(function (_ref19) {
+      var _ref19$list = _ref19.list,
+        list = _ref19$list === void 0 ? [] : _ref19$list;
+      return (list || []).length;
+    }) && {
+      id: 'setting',
+      name: /*#__PURE__*/React.createElement(PopConfirm, {
+        align: "t",
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.components.dashboardNav.MoreFeatures',
+          defaultMessage: '更多功能'
+        }),
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.components.dashboardNav.TagsVariableGroupsHostGroups',
+          defaultMessage: '标签、变量组、主机组等相关功能现在收纳到这里了哦！'
+        }),
+        visible: settingsPopVisible,
+        offset: [0, -2],
+        closable: false,
+        locale: {
+          confirm: intl.get({
+            id: 'rdc-tb-cd-assets.components.dashboardNav.GotIt',
+            defaultMessage: '知道了'
+          })
+        },
+        cancelProps: {
+          text: true,
+          style: {
+            cursor: 'default'
+          }
+        },
+        popupProps: {
+          hasMask: true
+        },
+        onConfirm: function onConfirm() {
+          actions.setSettingsPopVisible(false);
+        },
+        trigger: /*#__PURE__*/React.createElement("span", null, intl.get({
+          id: 'rdc-tb-cd-assets.components.dashboardNav.GlobalSettings',
+          defaultMessage: '全局设置'
+        }))
+      }),
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "setting-line"
+        })
+      },
+      onClick: function onClick(_ref20) {
+        var path = _ref20.id;
+        if (settingsPopVisible) return;
+        navigateWithContexPath("/" + path + "/" + key);
+        track({
+          action: 'flow settings',
+          page: 'main page',
+          daysinceenterflow: intervalEnterTime()
+        });
+      },
+      href: getUrlWithContextPath("/setting/" + key)
+    }].filter(Boolean));
+    var navList = [{
+      id: 'my',
+      name: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.MyPipeline',
+        defaultMessage: '我的流水线'
+      }),
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "pipelines-grey-2-fill"
+        })
+      },
+      onClick: onChangeNav,
+      href: getUrlWithContextPath('/my')
+    }, {
+      id: 'all',
+      name: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.AllAssemblyLines',
+        defaultMessage: '全部流水线'
+      }),
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "relation-chain-2-line"
+        })
+      },
+      onClick: onChangeNav,
+      href: getUrlWithContextPath('/all')
+    }, {
+      type: 'group',
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "group-line"
+        })
+      },
+      name: renderPipelineGroup(),
+      customItemStyle: cx({
+        'group-item-active': /^[0-9]+$/.test(sidebarActiveNav) && sidebarActiveNav !== '0',
+        searching: searchOpen
+      }),
+      customContainerStyle: PREFIX + "-group-container-scroll",
+      hideGroupTag: true,
+      tooltipCustom: {
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "tb-common-sidebar-main-group"
+        }, renderPipelineGroup(true), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__group-list-container"
+        }, getEmptyGroupItem(), pipelineGroupsFilter.filter(function (g) {
+          return g.id !== '0';
+        }).map(function (g, index) {
+          var _cx;
+          return /*#__PURE__*/React.createElement("div", {
+            className: cx('tb-common-sidebar-main-item', 'is-group-item', (_cx = {}, _cx[PREFIX + "-group-item-active"] = String(g.id) === String(sidebarActiveNav), _cx)),
+            "data-active": String(g.id) === String(sidebarActiveNav) ? 'true' : 'false'
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "tb-common-sidebar-main-item-jsx"
+          }, renderPipelineGroupItem(g, index)));
+        }))),
+        className: PREFIX + "__group-container"
+      },
+      emptyJsx: getEmptyGroupItem(),
+      children: pipelineGroupsFilter.filter(function (g) {
+        return g.id !== '0';
+      }).map(function (g, index) {
+        var _cx2;
+        return _extends({}, g, {
+          jsx: renderPipelineGroupItem(g, index),
+          onClick: onGroupsNavChange,
+          // href: getUrlWithContextPath(`/groups/${g.id}`),
+          customItemStyle: cx((_cx2 = {}, _cx2[PREFIX + "__group-item-active"] = String(g.id) === String(sidebarActiveNav), _cx2))
+        });
+      })
+    }, {
+      id: '0',
+      name: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.PipelineUngrouped',
+        defaultMessage: '未分组'
+      }),
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "ungroup-line"
+        })
+      },
+      onClick: onGroupsNavChange,
+      href: getUrlWithContextPath('/groups/0')
+    }].concat(insertIf(getFeature('systemPipeline.show'), {
+      id: 'system',
+      icon: {
+        useJsx: true,
+        jsx: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "computer-line"
+        })
+      },
+      name: /*#__PURE__*/React.createElement("div", {
+        className: "system-pipelines-menu"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.SysemPipeline',
+        defaultMessage: '系统来源'
+      })),
+      tooltipCustom: {
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.components.dashboardNav.SysemPipeline',
+          defaultMessage: '系统来源'
+        })
+      },
+      onClick: onChangeNav,
+      href: getUrlWithContextPath('/system')
+    }));
+    registerSidebar({
+      main: [].concat(navList),
+      extra: extra
+    });
+  };
+  var fetchQuota = function fetchQuota() {
+    if (!getFeature('price.enable')) {
+      return;
+    }
+    exceed.fetch({
+      api: 'region.quota.get'
+    }).then(function (res) {
+      if (res.successful) {
+        setQuota(res.object);
+        setConcurrencyInfinite(res.object.concurrencyLimit === 50);
+        setTimeInfinite(res.object.buildDurationLimit === 50 * 31 * 24 * 3600);
+      }
+    });
+  };
+  useEffect(function () {
+    if (window.TB_NAVIGATION.sidebarRef) {
+      window.TB_NAVIGATION.showSidebar();
+    }
+    fetchQuota();
+    return function () {
+      // window.TB_NAVIGATION.hideSidebar();
+      window.TB_NAVIGATION.removeSidebar();
+      timeout && clearTimeout(timeout);
+    };
+  }, []);
+  initSidebar();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QuotaNotifyCard, {
+    quota: quota
+  }), editGroupDialogVisible && /*#__PURE__*/React.createElement(CreateOrEditGroup, {
+    name: groupInfo.name,
+    group: groupInfo,
+    loading: updataGroupLoading,
+    pipelineGroups: pipelineGroups,
+    updataGroup: groupOperate === 'edit' ? onUpdataGroup : createGroup,
+    onOk: function onOk() {
+      return setEditGroupDialogVisible(false);
+    },
+    visible: editGroupDialogVisible,
+    purpose: groupOperate
+  }));
+};
+export default DashboardNav;