Merged in bugfix/SHIBUI-2196 (pull request #560)

Fixed group names in user dropdown Approved-by: Bill Smith Approved-by: Jonathan Johnson
TIER · Nov 1, 2021 · a3cda94 · a3cda94
2 parents 1cf5abc + 9a23a7f
commit a3cda94
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
@@ -13,7 +13,7 @@ import Translate from '../../i18n/components/translate';
 import { useTranslator } from '../../i18n/hooks';
 
 import { brand } from '../../app.brand';
-import { useCurrentUser, useCurrentUserLoading, useIsAdmin } from '../user/UserContext';
+import { useCurrentUser, useCurrentUserLoading, useIsAdmin, useUserGroupNames } from '../user/UserContext';
 import { BASE_PATH } from '../../App.constant';
 
 export function Header () {
@@ -22,7 +22,8 @@ export function Header () {
 
     const isAdmin = useIsAdmin();
 
-    const { username, groupId } = useCurrentUser();
+    const { username } = useCurrentUser();
+    const name = useUserGroupNames();
     const loading = useCurrentUserLoading();
 
     return (
@@ -97,7 +98,7 @@ export function Header () {
                         </Dropdown.Toggle>
                         <Dropdown.Menu alignRight={true}>
                             <Dropdown.Header>Groups</Dropdown.Header>
-                            <Dropdown.ItemText id="advanced-nav-dropdown-groups">{groupId}</Dropdown.ItemText>
+                            <Dropdown.ItemText id="advanced-nav-dropdown-groups">{name}</Dropdown.ItemText>
                             <div class="dropdown-divider"></div>
                             <Dropdown.Item href={`/${BASE_PATH}logout`} target="_self" className="text-primary" aria-label={translator('action.logout')}
                                 id="user-nav-dropdown-logout">

diff --git a/ui/src/app/core/components/Header.test.js b/ui/src/app/core/components/Header.test.js
@@ -17,18 +17,21 @@ jest.mock('../../i18n/hooks', () => ({
 const mockIsAdmin = jest.fn();
 const mockCurrentUser = jest.fn();
 const mockCurrentUserLoading = jest.fn();
+const mockUseUserGroupNames = jest.fn();
 
 jest.mock('../user/UserContext', () => ({
     useIsAdmin: () => mockIsAdmin(),
     useCurrentUser: () => mockCurrentUser(),
-    useCurrentUserLoading: () => mockCurrentUserLoading()
+    useCurrentUserLoading: () => mockCurrentUserLoading(),
+    useUserGroupNames: () => mockUseUserGroupNames()
 }));
 
 describe('header for admins', () => {
     beforeEach(() => {
         mockIsAdmin.mockReturnValue(true);
         mockCurrentUser.mockReturnValue({ username: 'foo', groupId: 'bar' });
         mockCurrentUserLoading.mockReturnValue(false);
+        mockUseUserGroupNames.mockReturnValue('Foo');
     });
 
     it('should display logo and navigation', () => {

diff --git a/ui/src/app/core/user/UserContext.js b/ui/src/app/core/user/UserContext.js
@@ -72,7 +72,17 @@ function useCanEnable() {
 
 function useUserGroup() {
     const user = useCurrentUser();
-    return user?.userGroups[0];
+    return (user?.userGroups && user.userGroups.length > 0) ? user.userGroups[0] : null;
+}
+
+function useUserGroups() {
+    const user = useCurrentUser();
+    return (user?.userGroups && Array.isArray(user.userGroups)) ? user.userGroups : [];
+}
+
+function useUserGroupNames() {
+    const groups = useUserGroups();
+    return groups.map(g => g.name).join(', ');
 }
 
 function useUserGroupRegexValidator () {
@@ -91,5 +101,6 @@ export {
     useCanEnable,
     useCurrentUserLoading,
     useUserGroupRegexValidator,
-    useUserGroup
+    useUserGroup,
+    useUserGroupNames
 };