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
This commit is contained in:
xusongfu 2022-03-01 18:41:43 +08:00
parent 757047a1cb
commit 58be21a2b9
5 changed files with 231 additions and 146 deletions

View File

@ -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) => (
<Select
size="small"
options={this.groupRolesList(groupId)}
defaultValue={this.defaultRoles(groupId)}
onChange={this.onSubChange}
/>
);
renderSelect = (groupId) => {
return (
<Select
size="small"
mode={this.multipleMode}
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;
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);

View File

@ -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 (
<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;
const { user_id } = option;
userRoles[user_id] = [value];
this.setState({ userRoles });
if (
(this.multipleMode && value.length && option.length) ||
(!this.multipleMode && value && option)
) {
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 { domainDefault, userRoles } = this.state;
const { users } = this.item;
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;
const oldUserRoles = this.item.userMapProjectRoles;
if (!this.multipleMode) {
// 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) {
const role_id =
(userRoles[user_id] || [])[0] || this.projectRoleList[0].id;
promiseList.push(
globalProjectStore.assignUserRole({ id, user_id, role_id })
);
} else {
const role_id = userRoles[user_id][0];
if (
(oldUserRoles[user_id] && oldUserRoles[user_id][0] !== role_id) ||
!oldUserRoles[user_id]
) {
if (!defaultUsers.includes(user_id)) {
if (userRoles[user_id]) {
userRoles[user_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.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);

View File

@ -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;

View File

@ -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 { projectRoles: users } = this.state;
if (!users[projectId]) {
const { roles, projects } = this.item;
const { projectRoles } = this.state;
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;
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);

View File

@ -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>);
}
},
},