LookoutUI: configure displayname

_local/lookout/config-auth.yaml

@@ -39,3 +39,5 @@ uiConfig:
     authority: "http://localhost:8180/realms/armada"
     clientId: "armada-server"
     scope: "openid profile email"
+    # Keycloak defines a "name" claim which is more human readable than the default "sub"
+    displayNameClaim: "name"

internal/lookout/configuration/types.go

@@ -162,19 +162,24 @@ type AnalyticsConfig struct {
 	DataWrapper         string        `json:"dataWrapper,omitempty"`
 }
 
+type OidcConfig struct {
+	Authority    string `json:"authority"`
+	ClientId     string `json:"clientId"`
+	Scope        string `json:"scope"`
+	LoadUserInfo *bool  `json:"loadUserInfo"`
+	// DisplayNameClaim specifies which OIDC claim to use for the username display.
+	// Common values: "name", "preferred_username", "email", "given_name". Defaults to "sub".
+	DisplayNameClaim *string `json:"displayNameClaim,omitempty"`
+}
+
 // UIConfig must match the LookoutUiConfig TypeScript interface defined in internal/lookoutui/src/config/types.ts
 type UIConfig struct {
 	CustomTitle string `json:"customTitle"`
 
 	// We have a separate flag here (instead of making the Oidc field optional)
 	// so that clients can override the server's preference.
-	OidcEnabled bool `json:"oidcEnabled"`
-	Oidc        *struct {
-		Authority    string `json:"authority"`
-		ClientId     string `json:"clientId"`
-		Scope        string `json:"scope"`
-		LoadUserInfo *bool  `json:"loadUserInfo"`
-	} `json:"oidc,omitempty"`
+	OidcEnabled bool        `json:"oidcEnabled"`
+	Oidc        *OidcConfig `json:"oidc,omitempty"`
 
 	ArmadaApiBaseUrl         string `json:"armadaApiBaseUrl"`
 	UserAnnotationPrefix     string `json:"userAnnotationPrefix"`

internal/lookoutui/src/config/types.ts

@@ -14,6 +14,7 @@ export interface OidcConfig {
   clientId: string
   scope: string
   loadUserInfo: boolean
+  displayNameClaim?: string
 }
 
 export interface CommandSpec {

internal/lookoutui/src/oidcAuth/hooks.ts

@@ -2,9 +2,13 @@ import { useCallback, useContext, useEffect, useState } from "react"
 
 import { UserManager } from "oidc-client-ts"
 
+import { getConfig } from "../config"
+
 import { OidcAuthContext } from "./OidcAuthContext"
 import { appendAuthorizationHeaders } from "./utils"
 
+const config = getConfig()
+
 export const useUserManager = (): UserManager | undefined => useContext(OidcAuthContext)?.userManager
 
 export const useUsername = (): string | null => {
@@ -21,6 +25,17 @@ export const useUsername = (): string | null => {
         return
       }
 
+      if (config.oidc?.displayNameClaim) {
+        const displayName = user.profile[config.oidc.displayNameClaim]
+        if (typeof displayName === "string") {
+          setUsername(displayName)
+          return
+        }
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[useUsername] displayNameClaim "${config.oidc.displayNameClaim}" not found or not a string in OIDC profile; falling back to "sub"`,
+        )
+      }
       setUsername(user.profile.sub)
     })()
   }, [userManager])