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] 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
 };