Skip to content

Commit

Permalink
Fixed issue with users displaying as ROLE_ADMIN on admin tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Feb 14, 2023
1 parent 0cf0e3e commit 6bb426a
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 18 deletions.
38 changes: 24 additions & 14 deletions ui/src/app/admin/component/UserMaintenance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@ import { useCurrentUser } from '../../core/user/UserContext';

import { GroupsProvider } from '../hoc/GroupsProvider';
import { useTranslator } from '../../i18n/hooks';
import Spinner from '../../core/components/Spinner';

export default function UserMaintenance({ users, roles, loading, onDeleteUser, onChangeUserRole, onChangeUserGroup }) {
export default function UserMaintenance({ users, roles, loading, onDeleteUser, onChangeUserRole, onChangeUserGroup, updating = [] }) {

const currentUser = useCurrentUser();
const translator = useTranslator();

const isUpdating = React.useCallback((username) => updating.find(u => u === username), [updating]);

return (
<div className="table-responsive mt-3 provider-list">
<table className="table table-striped w-100 table-hover">
Expand All @@ -41,19 +44,26 @@ export default function UserMaintenance({ users, roles, loading, onDeleteUser, o
<td className="align-middle">{user.firstName} {user.lastName}</td>
<td className="align-middle">{user.emailAddress}</td>
<td className="align-middle">
<label htmlFor={`role-${user.username}`} className="sr-only"><Translate value="action.user-role">User role</Translate></label>
<Form.Select
id={`role-${user.username}`}
name={`role-${user.username}`}
className="form-control"
onChange={(event) => onChangeUserRole({user, role: event.target.value})}
defaultValue={user.role}
disabled={loading || currentUser.username === user.username}
disablevalidation="true">
{roles.map((role, ridx) => (
<option key={role} value={role}>{role}</option>
))}
</Form.Select>
<span className="d-flex align-items-center">
<label htmlFor={`role-${user.username}`} className="sr-only">
<Translate value="action.user-role">User role</Translate>
</label>
<Form.Select
id={`role-${user.username}`}
name={`role-${user.username}`}
className="form-control"
onChange={(event) => onChangeUserRole({user, role: event.target.value})}
value={user.role}
disabled={ isUpdating(user.username) || loading || currentUser.username === user.username}
disablevalidation="true">
{roles.map((role, ridx) => (
<option key={role} value={role}>{role}</option>
))}
</Form.Select>
<span className={`${isUpdating(user.username) ? 'visible' : 'invisible' } d-flex justify-content-center text-primary ms-2`}>
<Spinner size="1x" />
</span>
</span>
</td>
<td className="align-middle">
<OverlayTrigger
Expand Down
17 changes: 15 additions & 2 deletions ui/src/app/admin/container/UserManagement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ import Button from 'react-bootstrap/Button';
import Translate from '../../i18n/components/translate';
import API_BASE_PATH from '../../App.constant';
import { useRemoveUserMutation, useSetUserGroupRequestMutation, useSetUserRoleRequestMutation } from '../../store/user/UserSlice';
import { cloneDeep } from 'lodash';

export default function UserManagement({ users, children, reload}) {
export default function UserManagement({ users = [], children, reload}) {

const [roles, setRoles] = React.useState([]);
const [updating, setUpdating] = React.useState([]);
const [cloned, setCloned] = React.useState(cloneDeep(users));

const { get, response, loading } = useFetch(`${API_BASE_PATH}`, {});

Expand All @@ -27,6 +30,12 @@ export default function UserManagement({ users, children, reload}) {
const [setUserRoleRequest] = useSetUserRoleRequestMutation();
const [deleteUserRequest] = useRemoveUserMutation();

const onChangeUserRole = React.useCallback(async ({ user, role }) => {
setUpdating([...updating, user.username]);
Object.assign(user, {role});
setUserRoleRequest({ user, role }).unwrap().then(() => setUpdating(updating.filter(u => u !== user.username)));
}, [updating, setUserRoleRequest]);


/*eslint-disable react-hooks/exhaustive-deps*/
React.useEffect(() => {
Expand All @@ -40,9 +49,13 @@ export default function UserManagement({ users, children, reload}) {
setDeleting(null);
};

React.useEffect(() => {
setCloned(cloneDeep(users));
}, [users]);

return (
<div className="user-management">
{children(users, roles, setUserRoleRequest, setUserGroupRequest, (id) => setDeleting(id), loading)}
{children(cloned, roles, onChangeUserRole, setUserGroupRequest, (id) => setDeleting(id), loading, updating)}
<Modal show={!!deleting} onHide={() => setDeleting(null)}>
<Modal.Header><Translate value="message.delete-user-title">Delete User?</Translate></Modal.Header>
<Modal.Body className="d-flex align-content-center">
Expand Down
5 changes: 3 additions & 2 deletions ui/src/app/dashboard/view/AdminTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,14 @@ export function AdminTab () {
</div>
<div className="p-3">
<UserManagement users={users}>
{(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser, loading) =>
{(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser, loading, updating) =>
<UserMaintenance users={ u }
roles={roles}
loading={loading}
onChangeUserRole={onChangeUserRole}
onDeleteUser={onDeleteUser}
onChangeUserGroup={onChangeUserGroup} />}
onChangeUserGroup={onChangeUserGroup}
updating={updating} />}

</UserManagement>
{loading && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
Expand Down

0 comments on commit 6bb426a

Please sign in to comment.