fix username not shown for OIDC users

webui/src/lib/components/auth/nav.jsx

@@ -40,16 +40,15 @@ export const GroupNav = ({ groupId, page = 'groups' }) => {
     );
 };
 
-
-export const UserHeader = ({ userId, page }) => {
+export const UserHeader = ({ userEmail, userId, page }) => {
     return (
         <div className="mb-4">
             <Breadcrumb>
                 <Link component={BreadcrumbItem} href='/auth/users'>
                     Users
                 </Link>
                 <Link component={BreadcrumbItem} href={{pathname: '/auth/users/:userId', params: {userId}}}>
-                    {userId}
+                    {userEmail}
                 </Link>
             </Breadcrumb>
 

webui/src/pages/auth/users/index.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {createContext, useCallback, useEffect, useState} from "react";
 import {Route, Switch} from "react-router-dom";
 
 import Button from "react-bootstrap/Button";
@@ -24,22 +24,22 @@ import {
 import UserPage from "./user";
 import validator from "validator/es";
 
+const USER_NOT_FOUND = "unknown";
+export const GetUserEmailByIdContext = createContext();
 
-const UsersContainer = () => {
+
+const UsersContainer = ({nextPage, refresh, setRefresh, error, loading, userListResults}) => {
     const { user } = useUser();
     const currentUser = user;
 
+    const router = useRouter();
+    const after = (router.query.after) ? router.query.after : "";
     const [selected, setSelected] = useState([]);
     const [deleteError, setDeleteError] = useState(null);
     const [showCreate, setShowCreate] = useState(false);
     const [showInvite, setShowInvite] = useState(false);
-    const [refresh, setRefresh] = useState(false);
-
-    const router = useRouter();
-    const after = (router.query.after) ? router.query.after : "";
-    const { results, loading, error, nextPage } =  useAPIWithPagination(() => {
-        return auth.listUsers('', after);
-    }, [after, refresh]);
+
+
 
     useEffect(() => { setSelected([]); }, [refresh, after]);
 
@@ -105,7 +105,7 @@ const UsersContainer = () => {
             />
 
             <DataTable
-                results={results}
+                results={userListResults}
                 headers={['', 'User ID', 'Created At']}
                 keyFn={user => user.id}
                 rowFn={user => [
@@ -157,24 +157,63 @@ const UserActionsActionGroup = ({canInviteUsers, selected, onClickInvite, onClic
     );
 }
 
-const UsersPage = () => {
+const UsersPage = ({nextPage, refresh, setRefresh, error, loading, userListResults}) => {
     return (
         <AuthLayout activeTab="users">
-            <UsersContainer/>
+            <UsersContainer
+                refresh={refresh}
+                loading={loading}
+                error={error}
+                nextPage={nextPage}
+                setRefresh={setRefresh}
+                userListResults={userListResults}
+            />
         </AuthLayout>
     );
 };
 
 const UsersIndexPage = () => {
+    const [refresh, setRefresh] = useState(false);
+    const [usersList, setUsersList] = useState([]);
+    const router = useRouter();
+    const after = (router.query.after) ? router.query.after : "";
+    const { results, loading, error, nextPage } =  useAPIWithPagination(() => {
+        return auth.listUsers('', after);
+    }, [after, refresh]);
+
+    useEffect(() => {
+        setUsersList(results);
+    }, [results, refresh]);
+
+    const getUserEmailById = useCallback((id) => {
+        const userRecord = usersList.find(user => user.id === id);
+        // return something, so we don't completely break the state
+        // this can help us track down issues later on
+        if (!userRecord) {
+            return USER_NOT_FOUND;
+        }
+
+        return userRecord.email || userRecord.id;
+    }, [usersList]);
+
     return (
-        <Switch>
-            <Route path="/auth/users/:userId">
-                <UserPage/>
-            </Route>
-            <Route path="/auth/users">
-                <UsersPage/>
-            </Route>
-        </Switch>
+        <GetUserEmailByIdContext.Provider value={getUserEmailById}>
+            <Switch>
+                <Route path="/auth/users/:userId">
+                    <UserPage getUserEmailById={getUserEmailById} />
+                </Route>
+                <Route path="/auth/users">
+                    <UsersPage 
+                        refresh={refresh}
+                        loading={loading}
+                        error={error}
+                        nextPage={nextPage}
+                        setRefresh={setRefresh}
+                        userListResults={usersList}
+                    />
+                </Route>
+            </Switch>
+        </GetUserEmailByIdContext.Provider>
     )
 }
 

webui/src/pages/auth/users/user/credentials.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 
 import {AuthLayout} from "../../../../lib/components/auth/layout";
-import {UserHeader} from "../../../../lib/components/auth/nav";
+import { UserHeaderWithContext } from "./userHeaderWithContext";
 import {auth} from "../../../../lib/api";
 import {CredentialsShowModal, CredentialsTable} from "../../../../lib/components/auth/credentials";
 import useUser from "../../../../lib/hooks/user";
@@ -46,7 +46,7 @@ const UserCredentialsList = ({ userId, after, onPaginate }) => {
 
     return (
         <>
-            <UserHeader userId={userId} page={'credentials'}/>
+            <UserHeaderWithContext userId={userId} page={'credentials'}/>
 
             <ActionsBar>
                 <ActionGroup orientation="left">

webui/src/pages/auth/users/user/effectivePolicies.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 
 import {AuthLayout} from "../../../../lib/components/auth/layout";
-import {UserHeader} from "../../../../lib/components/auth/nav";
+import { UserHeaderWithContext } from "./userHeaderWithContext";
 import {useAPIWithPagination} from "../../../../lib/hooks/api";
 import {auth} from "../../../../lib/api";
 import {Paginator} from "../../../../lib/components/pagination";
@@ -48,7 +48,7 @@ const UserEffectivePoliciesList = ({ userId, after, onPaginate }) => {
 
     return (
         <>
-            <UserHeader userId={userId} page={'effectivePolicies'}/>
+            <UserHeaderWithContext userId={userId} page={'effectivePolicies'}/>
 
             <ActionsBar>
                 <ActionGroup orientation="left">

webui/src/pages/auth/users/user/groups.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import {AuthLayout} from "../../../../lib/components/auth/layout";
-import {UserHeader} from "../../../../lib/components/auth/nav";
+import { UserHeaderWithContext } from "./userHeaderWithContext";
 import {
     ActionGroup,
     ActionsBar,
@@ -85,7 +85,7 @@ const UserGroupsList = ({ userId, after, onPaginate }) => {
 
     return (
         <>
-            <UserHeader userId={userId} page={'groups'}/>
+            <UserHeaderWithContext userId={userId} page={'groups'}/>
 
             <ActionsBar>
                 <ActionGroup orientation="left">
@@ -118,7 +118,7 @@ const UserGroupsContainer = () => {
 const UserGroupsPage = () => {
     return (
         <AuthLayout activeTab="users">
-            <UserGroupsContainer/>
+            <UserGroupsContainer />
         </AuthLayout>
     );
 };

webui/src/pages/auth/users/user/index.jsx

@@ -22,16 +22,16 @@ export default function UserPage() {
                 <UserRedirect subPath="/groups"/>
             </Route>
             <Route exact path="/auth/users/:userId/groups">
-                <UserGroupsPage/>
+                <UserGroupsPage />
             </Route>
             <Route exact path="/auth/users/:userId/policies">
-                <UserPoliciesPage/>
+                <UserPoliciesPage />
             </Route>
             <Route exact path="/auth/users/:userId/policies/effective">
-                <UserEffectivePoliciesPage/>
+                <UserEffectivePoliciesPage />
             </Route>
             <Route exact path="/auth/users/:userId/credentials">
-                <UserCredentialsPage/>
+                <UserCredentialsPage />
             </Route>
         </Switch>
     );

webui/src/pages/auth/users/user/policies.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import {AuthLayout} from "../../../../lib/components/auth/layout";
-import {UserHeader} from "../../../../lib/components/auth/nav";
+import {UserHeaderWithContext} from "./userHeaderWithContext";
 import {
     ActionGroup,
     ActionsBar,
@@ -86,7 +86,7 @@ const UserPoliciesList = ({ userId, after, onPaginate }) => {
 
     return (
         <>
-            <UserHeader userId={userId} page={'policies'}/>
+            <UserHeaderWithContext userId={userId} page={'policies'}/>
 
             <ActionsBar>
                 <ActionGroup orientation="left">
@@ -119,7 +119,7 @@ const UserPoliciesContainer = () => {
 const UserPoliciesPage = () => {
     return (
         <AuthLayout activeTab="users">
-            <UserPoliciesContainer/>
+            <UserPoliciesContainer />
         </AuthLayout>
     );
 };

webui/src/pages/auth/users/user/userHeaderWithContext.tsx

@@ -0,0 +1,16 @@
+import React, { FC, useContext } from "react";
+import {UserHeader} from "../../../../lib/components/auth/nav";
+import { GetUserEmailByIdContext } from "../index";
+
+export interface UserHeaderWithContextProps {
+    userId: string;
+    page: string;
+}
+
+export const UserHeaderWithContext: FC<UserHeaderWithContextProps> = ({ userId, page }) => {
+    const getUserEmailById = useContext(GetUserEmailByIdContext);
+    const email = getUserEmailById(userId);
+    return (
+        <UserHeader userId={userId} userEmail={email} page={page} />
+    );
+};