Fixed group names in user dropdown

TIER · Oct 26, 2021 · d94dd60 · d94dd60
1 parent 006b7fb
commit d94dd60
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 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/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
 };