From 58be21a2b9c55876e455bc84210dde14f7ff6ed0 Mon Sep 17 00:00:00 2001 From: xusongfu Date: Tue, 1 Mar 2022 18:41:43 +0800 Subject: [PATCH] fix: Fix the user manager & group manager The select is single when configuring roles for projects, which is not matched with horizon Change to multi-select when configuring roles for projects Change-Id: I3ecee8431f107e723c0046c549a8e016a846f6a2 --- .../Project/actions/UserGroupManager.jsx | 152 +++++++++++------- .../Project/actions/UserManager.jsx | 112 ++++++++----- .../identity/containers/Project/index.jsx | 2 +- .../containers/User/actions/SystemRole.jsx | 109 ++++++++----- .../identity/containers/UserGroup/index.jsx | 2 +- 5 files changed, 231 insertions(+), 146 deletions(-) diff --git a/src/pages/identity/containers/Project/actions/UserGroupManager.jsx b/src/pages/identity/containers/Project/actions/UserGroupManager.jsx index 93b2f02c..92c4e501 100644 --- a/src/pages/identity/containers/Project/actions/UserGroupManager.jsx +++ b/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; - if (!groups[groupId]) { + const { groupRoles: projectGroups } = this.state; + 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) => ( - + ); + }; get rightUserGroupTable() { return [ @@ -135,22 +143,31 @@ export class UserGroupManager extends ModalAction { } onSubChange = (value, option) => { - const { groupRoles } = this.state; - const { groupId } = option; - groupRoles[groupId] = [value]; - this.setState({ groupRoles }); + if ( + (this.multipleMode && value.length && option.length) || + (!this.multipleMode && value && option) + ) { + 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) { - const role_id = this.projectRoleList[0].id; - promiseList.push( - globalProjectStore.assignGroupRole({ id, group_id, role_id }) - ); - } else { - const role_id = groupRoles[group_id][0]; - if ( - (oldGroupRoles[group_id] && oldGroupRoles[group_id][0] !== role_id) || - !oldGroupRoles[group_id] - ) { + if (!defaultGroups.includes(group_id)) { + if (groupRoles[group_id]) { + groupRoles[group_id].forEach((role_id) => { + promiseList.push( + globalProjectStore.assignGroupRole({ id, group_id, role_id }) + ); + }); + } else { 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); diff --git a/src/pages/identity/containers/Project/actions/UserManager.jsx b/src/pages/identity/containers/Project/actions/UserManager.jsx index 20be5b67..8d1b022c 100644 --- a/src/pages/identity/containers/Project/actions/UserManager.jsx +++ b/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 { userRoles: users } = this.state; - if (!users[userId]) { + const { roles, users } = this.item; + const { userRoles: projectUsers } = this.state; + 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 ( { - const { projectRoles } = this.state; - const { project_id } = option; - projectRoles[project_id] = [value]; - this.setState({ projectRoles }); + if ( + (this.multipleMode && value.length && option.length) || + (!this.multipleMode && value && option) + ) { + 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 { domainDefault, projectRoles } = this.state; + const { projects } = this.item; + 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; - const oldProjectRoles = this.item.projectMapSystemRole; + if (!this.multipleMode) { + // 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) { - const role_id = - (projectRoles[id] || [])[0] || this.systemRoleList[0].id; - promiseList.push( - globalProjectStore.assignUserRole({ id, user_id, role_id }) - ); - } else { - const role_id = projectRoles[id][0]; - if ( - (oldProjectRoles[id] && oldProjectRoles[id][0] !== role_id) || - !oldProjectRoles[id] - ) { + if (!defaultProjects.includes(id)) { + if (projectRoles[id]) { + projectRoles[id].forEach((role_id) => { + promiseList.push( + globalProjectStore.assignUserRole({ id, user_id, role_id }) + ); + }); + } else { 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); diff --git a/src/pages/identity/containers/UserGroup/index.jsx b/src/pages/identity/containers/UserGroup/index.jsx index 619eb198..c142579c 100644 --- a/src/pages/identity/containers/UserGroup/index.jsx +++ b/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) =>
{it}
); + return projectScope.map((it, idx) =>
{it}
); } }, },