From 4f4d9b0f964216fe36414daef4bb6142edf0eca1 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 26 Jul 2021 11:28:55 -0700
Subject: [PATCH] Fixed SHIBUI-1998 role_admin group

---
 .../main/resources/i18n/messages.properties   |  2 +
 ui/src/app/admin/component/UserMaintenance.js | 45 ++++++++++++-------
 ui/src/app/admin/container/UserManagement.js  |  8 ++--
 ui/src/app/dashboard/view/AdminTab.js         |  9 +++-
 4 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
index 6173587f4..9789f7299 100644
--- a/backend/src/main/resources/i18n/messages.properties
+++ b/backend/src/main/resources/i18n/messages.properties
@@ -489,6 +489,8 @@ label.by=By
 label.source=Metadata Source
 label.provider=Metadata Provider
 
+message.user-role-admin-group=Cannot change group for ROLE_ADMIN users.
+
 message.delete-user-title=Delete User?
 message.delete-user-body=You are requesting to delete a user. If you complete this process the user will be removed. This cannot be undone. Do you wish to continue?
 
diff --git a/ui/src/app/admin/component/UserMaintenance.js b/ui/src/app/admin/component/UserMaintenance.js
index 6bb40810d..c4542438f 100644
--- a/ui/src/app/admin/component/UserMaintenance.js
+++ b/ui/src/app/admin/component/UserMaintenance.js
@@ -3,15 +3,19 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
 
 import Translate from '../../i18n/components/translate';
 import { useCurrentUser } from '../../core/user/UserContext';
 
 import { GroupsProvider } from '../hoc/GroupsProvider';
+import { useTranslator } from '../../i18n/hooks';
 
-export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUserRole, onChangeUserGroup }) {
+export default function UserMaintenance({ users, roles, loading, onDeleteUser, onChangeUserRole, onChangeUserGroup }) {
 
     const currentUser = useCurrentUser();
+    const translator = useTranslator();
 
     return (
         <div className="table-responsive mt-3 provider-list">
@@ -43,7 +47,7 @@ export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUs
                                                 className="form-control"
                                                 onChange={(event) => onChangeUserRole(user, event.target.value)}
                                                 value={user.role}
-                                                disabled={currentUser.username === user.username}
+                                                disabled={loading || currentUser.username === user.username}
                                                 disablevalidation="true">
                                                 {roles.map((role, ridx) => (
                                                     <option key={role} value={role}>{role}</option>
@@ -51,20 +55,29 @@ export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUs
                                             </select>
                                         </td>
                                         <td>
-                                            <label htmlFor={`group-${user.username}`} className="sr-only"><Translate value="action.user-group">User group</Translate></label>
-                                            <select
-                                                id={`group-${user.username}`}
-                                                name={`group-${user.username}`}
-                                                className="form-control"
-                                                onChange={(event) => onChangeUserGroup(user, event.target.value)}
-                                                value={user.groupId ? user.groupId : ''}
-                                                disabled={loadingGroups || currentUser.username === user.username}
-                                                disablevalidation="true">
-                                                <option>Select Group</option>
-                                                {groups.map((g, ridx) => (
-                                                    <option key={ridx} value={g.resourceId}>{g.name}</option>
-                                                ))}
-                                            </select>
+                                            <OverlayTrigger
+                                                trigger={user.role === 'ROLE_ADMIN' ? ['hover', 'focus'] : []}
+                                                overlay={
+                                                <Tooltip>{translator(`message.user-role-admin-group`)}</Tooltip>
+                                            }>
+                                                <span className="d-block">
+                                                    <label htmlFor={`group-${user.username}`} className="sr-only"><Translate value="action.user-group">User group</Translate></label>
+                                                    <select
+                                                        id={`group-${user.username}`}
+                                                        name={`group-${user.username}`}
+                                                        className="form-control"
+                                                        onChange={(event) => onChangeUserGroup(user, event.target.value)}
+                                                        value={user.groupId ? user.groupId : ''}
+                                                        disabled={loading || loadingGroups || currentUser.username === user.username || user.role === 'ROLE_ADMIN'}
+                                                        disablevalidation="true">
+                                                        <option>Select Group</option>
+                                                        {groups.map((g, ridx) => (
+                                                            <option key={ridx} value={g.resourceId}>{g.name}</option>
+                                                        ))}
+                                                    </select>
+                                                </span>
+                                            </OverlayTrigger>
+                                            
                                         </td>
                                         <td>
                                             {currentUser.username !== user.username &&
diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
index b8e8e6784..29f4a8108 100644
--- a/ui/src/app/admin/container/UserManagement.js
+++ b/ui/src/app/admin/container/UserManagement.js
@@ -10,13 +10,13 @@ import Translate from '../../i18n/components/translate';
 import API_BASE_PATH from '../../App.constant';
 import { NotificationContext, createNotificationAction} from '../../notifications/hoc/Notifications';
 
-export default function UserManagement({ users, children, reload }) {
+export default function UserManagement({ users, children, reload}) {
 
     const [roles, setRoles] = React.useState([]);
 
     const { dispatch } = React.useContext(NotificationContext);
 
-    const { get, patch, del, response } = useFetch(`${API_BASE_PATH}`, {});
+    const { get, patch, del, response, loading } = useFetch(`${API_BASE_PATH}`, {});
 
     async function loadRoles() {
         const roles = await get('/supportedRoles')
@@ -26,6 +26,7 @@ export default function UserManagement({ users, children, reload }) {
     }
 
     async function setUserRoleRequest(user, role) {
+        user.role = role;
         await patch(`/admin/users/${user.username}`, {
             ...user,
             role
@@ -39,6 +40,7 @@ export default function UserManagement({ users, children, reload }) {
     }
 
     async function setUserGroupRequest(user, groupId) {
+        user.groupId = groupId;
         await patch(`/admin/users/${user.username}`, {
             ...user,
             groupId
@@ -79,7 +81,7 @@ export default function UserManagement({ users, children, reload }) {
 
     return (
         <div className="user-management">
-            {children(users, roles, setUserRoleRequest, setUserGroupRequest, (id) => setDeleting(id))}
+            {children(users, roles, setUserRoleRequest, setUserGroupRequest, (id) => setDeleting(id), loading)}
             <Modal show={!!deleting} onHide={() => setDeleting(null)}>
                 <Modal.Header toggle={toggle}><Translate value="message.delete-user-title">Delete User?</Translate></Modal.Header>
                 <Modal.Body className="d-flex align-content-center">
diff --git a/ui/src/app/dashboard/view/AdminTab.js b/ui/src/app/dashboard/view/AdminTab.js
index 268ea61fc..5c116c242 100644
--- a/ui/src/app/dashboard/view/AdminTab.js
+++ b/ui/src/app/dashboard/view/AdminTab.js
@@ -39,8 +39,13 @@ export function AdminTab () {
                 </div>
                 <div className="p-3">
                     <UserManagement users={users} reload={loadUsers}>
-                        {(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser) =>
-                            <UserMaintenance users={ u } roles={roles} onChangeUserRole={onChangeUserRole} onDeleteUser={onDeleteUser} onChangeUserGroup={onChangeUserGroup} />}
+                        {(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser, loading) =>
+                            <UserMaintenance users={ u }
+                                roles={roles}
+                                loading={loading}
+                                onChangeUserRole={onChangeUserRole}
+                                onDeleteUser={onDeleteUser}
+                                onChangeUserGroup={onChangeUserGroup} />}
                     </UserManagement>
                 </div>
             </div>