From d94dd6078160fa5c897785e5250da45e9d19f809 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 26 Oct 2021 09:51:03 -0700
Subject: [PATCH 1/2] Fixed group names in user dropdown

---
 ui/src/app/core/components/Header.js |  7 ++++---
 ui/src/app/core/user/UserContext.js  | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
index 7bb693b1e..ab4ae8804 100644
--- 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/user/UserContext.js b/ui/src/app/core/user/UserContext.js
index 14666abe8..f2438a9ef 100644
--- 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
 };

From 9a23a7fa1efb2161f39a06d1bf73b12383dd8975 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 26 Oct 2021 12:54:16 -0700
Subject: [PATCH 2/2] Fixed test

---
 ui/src/app/core/components/Header.test.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/core/components/Header.test.js b/ui/src/app/core/components/Header.test.js
index 70d186d91..59866943f 100644
--- a/ui/src/app/core/components/Header.test.js
+++ b/ui/src/app/core/components/Header.test.js
@@ -17,11 +17,13 @@ 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', () => {
@@ -29,6 +31,7 @@ describe('header for admins', () => {
         mockIsAdmin.mockReturnValue(true);
         mockCurrentUser.mockReturnValue({ username: 'foo', groupId: 'bar' });
         mockCurrentUserLoading.mockReturnValue(false);
+        mockUseUserGroupNames.mockReturnValue('Foo');
     });
 
     it('should display logo and navigation', () => {