Merge "fix: Fix the user manager & group manager"

src/pages/identity/containers/Project/actions/UserGroupManager.jsx

@@ -16,42 +16,22 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { Select } from 'antd';
 import globalProjectStore from 'stores/keystone/project';
-import globalGroupStore from 'stores/keystone/user-group';
+import { GroupStore } from 'stores/keystone/user-group';
 import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 
 export class UserGroupManager extends ModalAction {
-  constructor(props) {
-    super(props);
-    this.state = {
-      groupRoles: {},
-      groupList: [],
-    };
-  }
-
-  componentDidMount() {
-    const { groups } = this.item;
-    globalGroupStore.fetchGroupData().then((res) => {
-      const domainUsers = res.filter(
-        (it) => it.domain_id === this.item.domain_id
-      );
-      const groupList = domainUsers.map((it) => ({
-        ...it,
-        key: it.id,
-      }));
-      this.setState({ groupList });
-    });
-    this.setState({ groupRoles: { ...groups } });
-  }
-
   static id = 'management-user-group';
 
   static title = t('Manage User Group');
 
   init() {
-    // this.userGroupStore = globalGroupStore;
+    const roles = JSON.stringify(this.item.groups);
+    this.state.domainDefault = this.item.domain_id;
+    this.state.groupRoles = JSON.parse(roles);
+    this.userGroupStore = new GroupStore();
     this.store = globalRoleStore;
-    // this.getUserGroup();
+    this.getUserGroup();
     this.getRoleList();
   }
 
@@ -59,6 +39,10 @@ export class UserGroupManager extends ModalAction {
     return t('Manager user group');
   }
 
+  get multipleMode() {
+    return 'multiple';
+  }
+
   getUserGroup() {
     this.userGroupStore.fetchList();
   }
@@ -68,7 +52,11 @@ export class UserGroupManager extends ModalAction {
   }
 
   static get modalSize() {
-    return 'middle';
+    return 'large';
+  }
+
+  getModalSize() {
+    return 'large';
   }
 
   get item() {
@@ -77,6 +65,13 @@ export class UserGroupManager extends ModalAction {
     return item;
   }
 
+  get groupList() {
+    return (this.userGroupStore.list.data || []).map((it) => ({
+      ...it,
+      key: it.id,
+    }));
+  }
+
   get projectRoleList() {
     const projectRole = this.store.list.data || [];
     return projectRole;
@@ -86,16 +81,26 @@ export class UserGroupManager extends ModalAction {
     this.projectRoleList.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
       groupId,
     }));
 
   defaultRoles = (groupId) => {
     const { groups, roles } = this.item;
-    // const oldUserRoles = groups;
+    const { groupRoles: projectGroups } = this.state;
-    if (!groups[groupId]) {
+    const filterGroups = this.multipleMode ? groups : projectGroups;
+    if (!filterGroups[groupId]) {
       roles[groupId] = [this.projectRoleList[0].id];
+    } else {
+      const usersProjectRole = filterGroups[groupId].filter((it) => {
+        const projectRole = this.projectRoleList.find((role) => role.id === it);
+        return !!projectRole;
+      });
+      return this.multipleMode
+        ? usersProjectRole
+        : usersProjectRole.slice(0, 1);
     }
-    return roles[groupId] || groups[groupId];
+    return roles[groupId];
   };
 
   static policy = 'identity:update_project';
@@ -111,14 +116,17 @@ export class UserGroupManager extends ModalAction {
     ];
   }
 
-  renderSelect = (groupId) => (
+  renderSelect = (groupId) => {
-    <Select
+    return (
-      size="small"
+      <Select
-      options={this.groupRolesList(groupId)}
+        size="small"
-      defaultValue={this.defaultRoles(groupId)}
+        mode={this.multipleMode}
-      onChange={this.onSubChange}
+        options={this.groupRolesList(groupId)}
-    />
+        defaultValue={this.defaultRoles(groupId)}
-  );
+        onChange={this.onSubChange}
+      />
+    );
+  };
 
   get rightUserGroupTable() {
     return [
@@ -135,22 +143,31 @@ export class UserGroupManager extends ModalAction {
   }
 
   onSubChange = (value, option) => {
-    const { groupRoles } = this.state;
+    if (
-    const { groupId } = option;
+      (this.multipleMode && value.length && option.length) ||
-    groupRoles[groupId] = [value];
+      (!this.multipleMode && value && option)
-    this.setState({ groupRoles });
+    ) {
+      const { groupRoles } = this.state;
+      const { groupId } = this.multipleMode ? option[0] : option;
+      groupRoles[groupId] = this.multipleMode ? value : [value];
+      this.setState({ groupRoles });
+    } else {
+      this.setState({ groupRoles: {} });
+    }
   };
 
   get formItems() {
     const { groups } = this.item;
-    const { groupList } = this.state;
+    const { domainDefault } = this.state;
     return [
       {
         name: 'select_group',
         type: 'transfer',
         leftTableColumns: this.leftUserGroupTable,
         rightTableColumns: this.rightUserGroupTable,
-        dataSource: groupList,
+        dataSource: this.groupList
+          ? this.groupList.filter((it) => it.domain_id === domainDefault)
+          : [],
         disabled: false,
         showSearch: true,
         oriTargetKeys: groups ? Object.keys(groups) : [],
@@ -160,11 +177,17 @@ export class UserGroupManager extends ModalAction {
 
   onSubmit = async (values) => {
     const { groupRoles } = this.state;
+    if (!this.multipleMode) {
+      // If it is not multiple choices, role only takes the first item of the array
+      Object.keys(groupRoles).forEach((key) => {
+        groupRoles[key] = groupRoles[key].slice(0, 1);
+      });
+    }
     const { groups: oldGroupRoles, id } = this.item;
     const defaultGroups = Object.keys(groupRoles);
     const promiseList = [];
     defaultGroups.forEach((group_id) => {
-      if (values.select_group.indexOf(group_id) === -1) {
+      if (!values.select_group.includes(group_id)) {
         (oldGroupRoles[group_id] || []).forEach((role_id) => {
           promiseList.push(
             globalProjectStore.removeGroupRole({ id, group_id, role_id })
@@ -172,7 +195,7 @@ export class UserGroupManager extends ModalAction {
         });
       } else {
         (oldGroupRoles[group_id] || []).forEach((role_id) => {
-          if (groupRoles[group_id].indexOf(role_id) === -1) {
+          if (!groupRoles[group_id].includes(role_id)) {
             promiseList.push(
               globalProjectStore.removeGroupRole({ id, group_id, role_id })
             );
@@ -181,21 +204,34 @@ export class UserGroupManager extends ModalAction {
       }
     });
     values.select_group.forEach((group_id) => {
-      if (defaultGroups.indexOf(group_id) === -1) {
+      if (!defaultGroups.includes(group_id)) {
-        const role_id = this.projectRoleList[0].id;
+        if (groupRoles[group_id]) {
-        promiseList.push(
+          groupRoles[group_id].forEach((role_id) => {
-          globalProjectStore.assignGroupRole({ id, group_id, role_id })
+            promiseList.push(
-        );
+              globalProjectStore.assignGroupRole({ id, group_id, role_id })
-      } else {
+            );
-        const role_id = groupRoles[group_id][0];
+          });
-        if (
+        } else {
-          (oldGroupRoles[group_id] && oldGroupRoles[group_id][0] !== role_id) ||
-          !oldGroupRoles[group_id]
-        ) {
           promiseList.push(
-            globalProjectStore.assignGroupRole({ id, group_id, role_id })
+            globalProjectStore.assignGroupRole({
+              id,
+              group_id,
+              role_id: this.projectRoleList[0].id,
+            })
           );
         }
+      } else {
+        (groupRoles[group_id] || []).forEach((role_id) => {
+          if (
+            (oldGroupRoles[group_id] &&
+              !oldGroupRoles[group_id].includes(role_id)) ||
+            !oldGroupRoles[group_id]
+          ) {
+            promiseList.push(
+              globalProjectStore.assignGroupRole({ id, group_id, role_id })
+            );
+          }
+        });
       }
     });
     const results = await Promise.all(promiseList);

src/pages/identity/containers/Project/actions/UserManager.jsx

@@ -22,20 +22,6 @@ import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
 export class UserManager extends ModalAction {
-  constructor(props) {
-    super(props);
-    const projectRole = JSON.stringify(this.item.userMapProjectRoles);
-    this.state = {
-      domainDefault: this.item.domain_id,
-      userRoles: JSON.parse(projectRole),
-      userList: [],
-    };
-  }
-
-  // componentDidMount() {
-  //   this.setState({ userRoles: this.defaultUserRoles });
-  // }
-
   static id = 'management-user';
 
   static title = t('Manage User');
@@ -45,6 +31,9 @@ export class UserManager extends ModalAction {
   }
 
   init() {
+    const projectRole = JSON.stringify(this.item.userMapProjectRoles);
+    this.state.domainDefault = this.item.domain_id;
+    this.state.userRoles = JSON.parse(projectRole);
     this.store = globalRoleStore;
     this.domainStore = globalDomainStore;
     this.userStore = new UserStore();
@@ -73,6 +62,10 @@ export class UserManager extends ModalAction {
     return 'large';
   }
 
+  get multipleMode() {
+    return 'multiple';
+  }
+
   // get defaultUserRoles() {
   //   const { users } = this.item;
   //   const defaultUsers = Object.keys(users);
@@ -103,6 +96,7 @@ export class UserManager extends ModalAction {
     return domainList.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
     }));
   }
 
@@ -111,6 +105,7 @@ export class UserManager extends ModalAction {
     return (domains || []).map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
     }));
   }
 
@@ -146,6 +141,7 @@ export class UserManager extends ModalAction {
     return adminRole.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
       user_id,
     }));
   };
@@ -154,20 +150,24 @@ export class UserManager extends ModalAction {
     this.projectRoleList.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
       user_id,
     }));
 
   defaultRoles = (userId) => {
-    const { roles } = this.item;
+    const { roles, users } = this.item;
-    const { userRoles: users } = this.state;
+    const { userRoles: projectUsers } = this.state;
-    if (!users[userId]) {
+    const filterUsers = this.multipleMode ? users : projectUsers;
+    if (!filterUsers[userId]) {
       roles[userId] = [this.projectRoleList[0].id];
     } else {
-      const usersProjectRole = users[userId].filter((it) => {
+      const usersProjectRole = filterUsers[userId].filter((it) => {
         const projectRole = this.projectRoleList.find((role) => role.id === it);
         return !!projectRole;
       });
-      return usersProjectRole;
+      return this.multipleMode
+        ? usersProjectRole
+        : usersProjectRole.slice(0, 1);
     }
     return roles[userId];
   };
@@ -208,6 +208,7 @@ export class UserManager extends ModalAction {
     return (
       <Select
         size="small"
+        mode={this.multipleMode}
         options={disable ? this.adminRoleList(id) : this.userRolesList(id)}
         defaultValue={disable ? this.adminRoleId : this.defaultRoles(id)}
         onChange={this.onSubChange}
@@ -217,10 +218,17 @@ export class UserManager extends ModalAction {
   };
 
   onSubChange = (value, option) => {
-    const { userRoles } = this.state;
+    if (
-    const { user_id } = option;
+      (this.multipleMode && value.length && option.length) ||
-    userRoles[user_id] = [value];
+      (!this.multipleMode && value && option)
-    this.setState({ userRoles });
+    ) {
+      const { userRoles } = this.state;
+      const { user_id } = this.multipleMode ? option[0] : option;
+      userRoles[user_id] = this.multipleMode ? value : [value];
+      this.setState({ userRoles });
+    } else {
+      this.setState({ userRoles: {} });
+    }
   };
 
   get defaultValue() {
@@ -232,8 +240,8 @@ export class UserManager extends ModalAction {
   }
 
   get formItems() {
-    // const { users } = this.item;
+    const { users } = this.item;
-    const { domainDefault, userRoles } = this.state;
+    const { domainDefault } = this.state;
     return [
       {
         name: 'domain_id',
@@ -260,19 +268,25 @@ export class UserManager extends ModalAction {
           : [],
         disabled: false,
         showSearch: true,
-        oriTargetKeys: userRoles ? Object.keys(userRoles) : [],
+        oriTargetKeys: users ? Object.keys(users) : [],
       },
     ];
   }
 
   onSubmit = async (values) => {
     const { userRoles } = this.state;
-    const { id } = this.item;
+    if (!this.multipleMode) {
-    const oldUserRoles = this.item.userMapProjectRoles;
+      // If it is not multiple choices, role only takes the first item of the array
+      Object.keys(userRoles).forEach((key) => {
+        userRoles[key] = userRoles[key].slice(0, 1);
+      });
+    }
+    const { id, users } = this.item;
+    const oldUserRoles = users;
     const defaultUsers = Object.keys(oldUserRoles);
     const promiseList = [];
     defaultUsers.forEach((user_id) => {
-      if (values.select_user.indexOf(user_id) === -1) {
+      if (!values.select_user.includes(user_id)) {
         (oldUserRoles[user_id] || []).forEach((role_id) => {
           promiseList.push(
             globalProjectStore.removeUserRole({ id, user_id, role_id })
@@ -280,7 +294,7 @@ export class UserManager extends ModalAction {
         });
       } else {
         (oldUserRoles[user_id] || []).forEach((role_id) => {
-          if (userRoles[user_id].indexOf(role_id) === -1) {
+          if (!userRoles[user_id].includes(role_id)) {
             promiseList.push(
               globalProjectStore.removeUserRole({ id, user_id, role_id })
             );
@@ -289,22 +303,34 @@ export class UserManager extends ModalAction {
       }
     });
     values.select_user.forEach((user_id) => {
-      if (defaultUsers.indexOf(user_id) === -1) {
+      if (!defaultUsers.includes(user_id)) {
-        const role_id =
+        if (userRoles[user_id]) {
-          (userRoles[user_id] || [])[0] || this.projectRoleList[0].id;
+          userRoles[user_id].forEach((role_id) => {
-        promiseList.push(
+            promiseList.push(
-          globalProjectStore.assignUserRole({ id, user_id, role_id })
+              globalProjectStore.assignUserRole({ id, user_id, role_id })
-        );
+            );
-      } else {
+          });
-        const role_id = userRoles[user_id][0];
+        } else {
-        if (
-          (oldUserRoles[user_id] && oldUserRoles[user_id][0] !== role_id) ||
-          !oldUserRoles[user_id]
-        ) {
           promiseList.push(
-            globalProjectStore.assignUserRole({ id, user_id, role_id })
+            globalProjectStore.assignUserRole({
+              id,
+              user_id,
+              role_id: this.projectRoleList[0].id,
+            })
           );
         }
+      } else {
+        (userRoles[user_id] || []).forEach((role_id) => {
+          if (
+            (oldUserRoles[user_id] &&
+              !oldUserRoles[user_id].includes(role_id)) ||
+            !oldUserRoles[user_id]
+          ) {
+            promiseList.push(
+              globalProjectStore.assignUserRole({ id, user_id, role_id })
+            );
+          }
+        });
       }
     });
     const results = await Promise.all(promiseList);

src/pages/identity/containers/Project/index.jsx

@@ -74,7 +74,7 @@ export class Projects extends Base {
         render: (roles, value) => {
           const { groupProjectRole = [] } = value;
           const rolesAll = [...(roles || []), ...(groupProjectRole || [])];
-          return (rolesAll || []).map((it) => <div>{it}</div>);
+          return (rolesAll || []).map((it, idx) => <div key={idx}>{it}</div>);
         },
         stringify: (roles, value) => {
           const { groupProjectRole = [] } = value;

src/pages/identity/containers/User/actions/SystemRole.jsx

@@ -22,20 +22,6 @@ import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
 export class SystemRole extends ModalAction {
-  constructor(props) {
-    super(props);
-    const systemRole = JSON.stringify(this.item.projectMapSystemRole);
-    this.state = {
-      domainDefault: this.item.domain_id,
-      projectRoles: JSON.parse(systemRole),
-      projectList: [],
-    };
-  }
-
-  // componentDidMount() {
-  //   this.setState({ projectRoles: this.defaultSystemRoles });
-  // }
-
   static id = 'edit-system-permission';
 
   static title = t('Edit System Permission');
@@ -45,6 +31,9 @@ export class SystemRole extends ModalAction {
   }
 
   init() {
+    const systemRole = JSON.stringify(this.item.projectMapSystemRole);
+    this.state.domainDefault = this.item.domain_id;
+    this.state.projectRoles = JSON.parse(systemRole);
     this.store = globalRoleStore;
     this.domainStore = globalDomainStore;
     this.userStore = globalUserStore;
@@ -103,6 +92,7 @@ export class SystemRole extends ModalAction {
     return domainList.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
     }));
   }
 
@@ -112,6 +102,10 @@ export class SystemRole extends ModalAction {
     return item;
   }
 
+  get multipleMode() {
+    return 'multiple';
+  }
+
   get projectList() {
     return (this.userStore.projects || []).map((it) => ({
       ...it,
@@ -138,6 +132,7 @@ export class SystemRole extends ModalAction {
     return adminRole.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
       project_id,
     }));
   };
@@ -146,23 +141,25 @@ export class SystemRole extends ModalAction {
     this.systemRoleList.map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
       project_id,
     }));
 
   defaultRoles = (projectId) => {
-    const { roles } = this.item;
+    const { roles, projects } = this.item;
-    const { projectRoles: users } = this.state;
+    const { projectRoles } = this.state;
-    if (!users[projectId]) {
+    const filterRoles = this.multipleMode ? projects : projectRoles;
+    if (!filterRoles[projectId]) {
       roles[projectId] = [this.systemRoleList[0].id];
     } else {
-      const usersSystemRole = users[projectId].filter((it) => {
+      const usersSystemRole = filterRoles[projectId].filter((it) => {
         const systemRole = this.systemRoleList.filter((role) => role.id === it);
         if (systemRole[0]) {
           return true;
         }
         return false;
       });
-      return usersSystemRole;
+      return this.multipleMode ? usersSystemRole : usersSystemRole.slice(0, 1);
     }
     return roles[projectId];
   };
@@ -205,6 +202,7 @@ export class SystemRole extends ModalAction {
     return (
       <Select
         size="small"
+        mode={this.multipleMode}
         options={disable ? this.adminRoleList(id) : this.projectRolesList(id)}
         defaultValue={disable ? this.adminRoleId : this.defaultRoles(id)}
         onChange={this.onSubChange}
@@ -214,10 +212,17 @@ export class SystemRole extends ModalAction {
   };
 
   onSubChange = (value, option) => {
-    const { projectRoles } = this.state;
+    if (
-    const { project_id } = option;
+      (this.multipleMode && value.length && option.length) ||
-    projectRoles[project_id] = [value];
+      (!this.multipleMode && value && option)
-    this.setState({ projectRoles });
+    ) {
+      const { projectRoles } = this.state;
+      const { project_id } = this.multipleMode ? option[0] : option;
+      projectRoles[project_id] = this.multipleMode ? value : [value];
+      this.setState({ projectRoles });
+    } else {
+      this.setState({ projectRoles: {} });
+    }
   };
 
   get checkedList() {
@@ -225,6 +230,7 @@ export class SystemRole extends ModalAction {
     return (domains || []).map((it) => ({
       label: it.name,
       value: it.id,
+      key: it.id,
     }));
   }
 
@@ -237,8 +243,8 @@ export class SystemRole extends ModalAction {
   }
 
   get formItems() {
-    // const { users } = this.item;
+    const { projects } = this.item;
-    const { domainDefault, projectRoles } = this.state;
+    const { domainDefault } = this.state;
     return [
       {
         name: 'domain_id',
@@ -265,19 +271,25 @@ export class SystemRole extends ModalAction {
           : [],
         disabled: false,
         showSearch: true,
-        oriTargetKeys: projectRoles ? Object.keys(projectRoles) : [],
+        oriTargetKeys: projects ? Object.keys(projects) : [],
       },
     ];
   }
 
   onSubmit = async (values) => {
     const { projectRoles } = this.state;
-    const { id: user_id } = this.item;
+    if (!this.multipleMode) {
-    const oldProjectRoles = this.item.projectMapSystemRole;
+      // If it is not multiple choices, role only takes the first item of the array
+      Object.keys(projectRoles).forEach((key) => {
+        projectRoles[key] = projectRoles[key].slice(0, 1);
+      });
+    }
+    const { id: user_id, projects } = this.item;
+    const oldProjectRoles = projects;
     const defaultProjects = Object.keys(oldProjectRoles);
     const promiseList = [];
     defaultProjects.forEach((id) => {
-      if (values.select_project.indexOf(id) === -1) {
+      if (!values.select_project.includes(id)) {
         (oldProjectRoles[id] || []).forEach((role_id) => {
           promiseList.push(
             globalProjectStore.removeUserRole({ id, user_id, role_id })
@@ -285,7 +297,7 @@ export class SystemRole extends ModalAction {
         });
       } else {
         (oldProjectRoles[id] || []).forEach((role_id) => {
-          if (projectRoles[id].indexOf(role_id) === -1) {
+          if (projectRoles[id] && !projectRoles[id].includes(role_id)) {
             promiseList.push(
               globalProjectStore.removeUserRole({ id, user_id, role_id })
             );
@@ -294,22 +306,33 @@ export class SystemRole extends ModalAction {
       }
     });
     values.select_project.forEach((id) => {
-      if (defaultProjects.indexOf(id) === -1) {
+      if (!defaultProjects.includes(id)) {
-        const role_id =
+        if (projectRoles[id]) {
-          (projectRoles[id] || [])[0] || this.systemRoleList[0].id;
+          projectRoles[id].forEach((role_id) => {
-        promiseList.push(
+            promiseList.push(
-          globalProjectStore.assignUserRole({ id, user_id, role_id })
+              globalProjectStore.assignUserRole({ id, user_id, role_id })
-        );
+            );
-      } else {
+          });
-        const role_id = projectRoles[id][0];
+        } else {
-        if (
-          (oldProjectRoles[id] && oldProjectRoles[id][0] !== role_id) ||
-          !oldProjectRoles[id]
-        ) {
           promiseList.push(
-            globalProjectStore.assignUserRole({ id, user_id, role_id })
+            globalProjectStore.assignUserRole({
+              id,
+              user_id,
+              role_id: this.systemRoleList[0].id,
+            })
           );
         }
+      } else {
+        (projectRoles[id] || []).forEach((role_id) => {
+          if (
+            (oldProjectRoles[id] && !oldProjectRoles[id].includes(role_id)) ||
+            !oldProjectRoles[id]
+          ) {
+            promiseList.push(
+              globalProjectStore.assignUserRole({ id, user_id, role_id })
+            );
+          }
+        });
       }
     });
     const results = await Promise.all(promiseList);

src/pages/identity/containers/UserGroup/index.jsx

@@ -59,7 +59,7 @@ export default class UserGroups extends Base {
         isHideable: true,
         render: (projectScope) => {
           if (projectScope && projectScope[0]) {
-            return projectScope.map((it) => <div>{it}</div>);
+            return projectScope.map((it, idx) => <div key={idx}>{it}</div>);
           }
         },
       },