feat: ISV create role (#817)

src/components/Base/Tree/index.scss

@@ -170,4 +170,7 @@
       box-sizing: border-box;
     }
   }
+  &:global(.rc-tree li span.rc-tree-checkbox) {
+    margin-right: 8px;
+  }
 }

src/components/Collapse/index.jsx

@@ -22,7 +22,7 @@ export default class SingleCollapse extends Component {
     disabled: false,
     iconPosition: 'left',
     iconType: 'chevron-right',
-    toggleType: 'header',
+    toggleType: 'icon',
     onChange: _.noop
   };
 
@@ -40,6 +40,7 @@ export default class SingleCollapse extends Component {
       props.className = styles.cursorPointer;
     }
     if (iconType === 'switch') {
+      props.onChange = this.toggleCheck;
       return <Switch checked={isCheck} {...props} />;
     }
 
@@ -60,12 +61,13 @@ export default class SingleCollapse extends Component {
 
   renderHeader() {
     const { iconPosition, header, toggleType } = this.props;
-    const onClick = toggleType === 'header' ? this.toggleCheck : _.noop;
+    const clickable = toggleType === 'header' || this.state.isCheck;
+    const onClick = clickable ? this.toggleCheck : _.noop;
     return (
       <div
         onClick={onClick}
         className={classnames(styles.headerContainer, {
-          [styles.cursorPointer]: toggleType === 'header'
+          [styles.cursorPointer]: clickable
         })}
       >
         {iconPosition === 'left' && this.renderIcon()}

src/components/Collapse/index.scss

@@ -28,5 +28,6 @@
   .content {
     opacity: 1;
     height: auto;
+    pointer-events: auto;
   }
 }

src/config/roles.js

@@ -38,4 +38,6 @@ export const roleToPortal = {
   user: 'user'
 };
 
+export const moduleDataLevels = ['self', 'group', 'all'];
+
 export default roles;

src/locales/en/user.json

@@ -1,4 +1,5 @@
 {
+  "ISV_ROLE_CREATE_TIP": "If the above roles do not meet the management requirements, you can",
   "Global Admin Role description": "Maximum privilege administrator, cannot delete and modify",
   "DELETE_GROUP_TIP": "TIPS: Organizations with bound users and organizations with children cannot be deleted"
 }

src/locales/zh/user.json

@@ -25,7 +25,9 @@
   "Change password successful": "修改密码成功",
   "isv": "应用服务商",
   "user": "用户",
+  "Permission": "权限",
   "Set permission": "设置权限",
+  "Create a role": "创建新角色",
   "Delete role": "删除角色",
   "Disable": "禁用",
   "Search app name or ID": "搜索应用名称或 ID",
@@ -47,6 +49,7 @@
   "Do you sure to delete groupName": "您确定要删除组织 {{groupName}} 吗？",
   "Do you sure to delete roleName": "您确定要删除角色 {{roleName}} 吗？",
   "Do you sure to leaveGroup groupName": "确定为选中的 {{names}} {{count}} 账号离开组织",
+  "ISV_ROLE_CREATE_TIP": "如果以上角色不能满足管理需求，可以",
   "DELETE_GROUP_TIP": "提示：删除操作会将所有子级组织以及其绑定的用户关系",
   "Group name": "组织名称",
   "Add the child node": "添加下一级",

src/portals/admin/pages/Roles/BindingActions/group.jsx

@@ -1,14 +1,20 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
 import _ from 'lodash';
 
-import { Tree } from 'components/Base';
+import { Tree, Select } from 'components/Base';
+import { moduleDataLevels } from 'config/roles';
+
 import styles from './index.scss';
 
 @observer
 export default class ActionGroup extends Component {
+  get disabled() {
+    return _.get(this.props, 'roleStore.handelType') !== 'setBindAction';
+  }
+
   renderActionCount() {
     const { t, data } = this.props;
     const { selectedActions } = data;
@@ -26,53 +32,98 @@ export default class ActionGroup extends Component {
   }
 
   renderTreeTitle = node => {
-    const { t, roleStore } = this.props;
-    const { handelType } = roleStore;
-    const disabled = handelType !== 'setBindAction';
+    const { t } = this.props;
 
     if (node.title === 'All actions') {
       return this.renderActionCount();
     }
 
-    if (disabled) {
+    if (this.disabled) {
       return null;
     }
     return t(node.title);
   };
 
+  renderHeader() {
+    const { data, t, hideHeader } = this.props;
+    const { name } = data;
+    if (hideHeader) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        {!_.isEmpty(name) && <h3 className={styles.header}>{t(name)}</h3>}
+        <div>{t('Operation list')}</div>
+      </Fragment>
+    );
+  }
+
+  renderDataLevel() {
+    const {
+      data, t, roleStore, hideDataLevel
+    } = this.props;
+    const { dataLevelMap } = roleStore;
+    const moduleId = _.first(data.id.split('.'));
+    if (hideDataLevel) {
+      return null;
+    }
+
+    if (this.disabled) {
+      return (
+        <div className={styles.dataLevel}>
+          {t('Data range')}:
+          <strong>{t(`data_level_${data.data_level}`)}</strong>
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.dataLevel}>
+        {t('Data range')}:
+        <Select
+          className={styles.select}
+          value={dataLevelMap[moduleId]}
+          onChange={value => roleStore.changeDataLevelMap(moduleId, value)}
+        >
+          {moduleDataLevels.map(item => (
+            <Select.Option key={item} value={item}>
+              {t(`data_level_${item}`)}
+            </Select.Option>
+          ))}
+        </Select>
+      </div>
+    );
+  }
+
   render() {
     const {
-      keys, data, index, roleStore, t
+      keys, data, index, roleStore
     } = this.props;
     if (_.isEmpty(data)) {
       return null;
     }
-    const { handelType, selectAction } = roleStore;
-    const { name, treeData } = data;
-    const disabled = handelType !== 'setBindAction';
+    const { selectAction } = roleStore;
+    const { treeData } = data;
 
     return (
       <div className={styles.actions}>
-        {!_.isEmpty(name) && <h3 className={styles.header}>{t(name)}</h3>}
-        <div>{t('Operation list')}</div>
+        {this.renderHeader()}
         <Tree
           checkable
           defaultExpandAll
-          disabled={disabled}
+          disabled={this.disabled}
           selectable={false}
           checkedKeys={keys}
           className={classnames(styles.tree, {
-            [styles.disabledTree]: disabled
+            [styles.disabledTree]: this.disabled
           })}
           treeData={treeData}
           onCheck={selectAction(index)}
           renderTreeTitle={this.renderTreeTitle}
           switcherIcon={this.renderSwitchIcon}
         />
-        <div>
-          {t('Data range')}:
-          <strong>{t(`data_level_${data.data_level}`)}</strong>
-        </div>
+        {this.renderDataLevel()}
       </div>
     );
   }

src/portals/admin/pages/Roles/BindingActions/index.scss

@@ -74,3 +74,12 @@
   display: inline-block;
   margin-left: 8px;
 }
+
+.dataLevel {
+  display: flex;
+  align-items: center;
+}
+.select {
+  margin-left: 5px;
+  width: 129px;
+}

src/portals/admin/pages/Roles/Popover/index.jsx

@@ -56,7 +56,9 @@ export default class RolePopover extends Component {
   renderHandleGroupNode = () => {
     const { t, roleStore } = this.props;
     const { role } = roleStore;
-    const isSystem = role.owner_path === ':system';
+    if (!role) return null;
+
+    const isSystem = role.owner === 'system';
 
     return (
       <div className="operate-menu">

src/portals/admin/pages/Roles/RoleTree/index.jsx

@@ -18,7 +18,7 @@ export default class RoleTree extends Component {
       ({ portal }) => portal === 'admin'
     );
     const normalRoles = roleStore.roles.filter(
-      ({ portal, owner_path }) => normalPortal.includes(portal) && owner_path === ':system'
+      ({ portal, owner }) => normalPortal.includes(portal) && owner === 'system'
     );
     const navData = [
       {

src/portals/admin/pages/Users/index.jsx

@@ -108,6 +108,8 @@ export default class Users extends Component {
         <Icon type="dark" name="more" />
       </Popover>
       <Tooltip
+        portal
+        isShowArrow
         placement="top"
         targetCls={classnames(styles.tooltip)}
         content={t('Add the child node')}