OCPBUGS-81520: Console can only show user name instead of full name as the display name

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Leo6Leo

frontend/packages/console-app/src/components/user-preferences/__tests__/UserPreferenceCheckboxField.spec.tsx

@@ -2,14 +2,19 @@ import * as React from 'react';
 import { Checkbox, Skeleton } from '@patternfly/react-core';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UserPreferenceFieldType } from '@console/dynamic-plugin-sdk/src/extensions/user-preferences';
-import { useUserSettings } from '@console/shared';
+import { useUserSettings, useTelemetry } from '@console/shared';
 import UserPreferenceCheckboxField from '../UserPreferenceCheckboxField';
 
 jest.mock('@console/shared/src/hooks/useUserSettings', () => ({
   useUserSettings: jest.fn(),
 }));
 
+jest.mock('@console/shared/src/hooks/useTelemetry', () => ({
+  useTelemetry: jest.fn(),
+}));
+
 const mockUserSettings = useUserSettings as jest.Mock;
+const mockUseTelemetry = useTelemetry as jest.Mock;
 
 describe('UserPreferenceCheckboxField', () => {
   type UserPreferenceCheckboxFieldProps = React.ComponentProps<typeof UserPreferenceCheckboxField>;
@@ -23,6 +28,10 @@ describe('UserPreferenceCheckboxField', () => {
   };
   let wrapper: ShallowWrapper<UserPreferenceCheckboxFieldProps>;
 
+  beforeEach(() => {
+    mockUseTelemetry.mockReturnValue(jest.fn());
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });

frontend/packages/console-app/src/components/user-preferences/__tests__/UserPreferenceDropdownField.spec.tsx

@@ -2,14 +2,19 @@ import * as React from 'react';
 import { Select, SelectProps } from '@patternfly/react-core';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UserPreferenceFieldType } from '@console/dynamic-plugin-sdk/src/extensions/user-preferences';
-import { useUserSettings } from '@console/shared';
+import { useUserSettings, useTelemetry } from '@console/shared';
 import UserPreferenceDropdownField from '../UserPreferenceDropdownField';
 
 jest.mock('@console/shared/src/hooks/useUserSettings', () => ({
   useUserSettings: jest.fn(),
 }));
 
+jest.mock('@console/shared/src/hooks/useTelemetry', () => ({
+  useTelemetry: jest.fn(),
+}));
+
 const mockUserSettings = useUserSettings as jest.Mock;
+const mockUseTelemetry = useTelemetry as jest.Mock;
 
 describe('UserPreferenceDropdownField', () => {
   type UserPreferenceDropdownFieldProps = React.ComponentProps<typeof UserPreferenceDropdownField>;
@@ -24,6 +29,10 @@ describe('UserPreferenceDropdownField', () => {
   };
   let wrapper: ShallowWrapper<UserPreferenceDropdownFieldProps>;
 
+  beforeEach(() => {
+    mockUseTelemetry.mockReturnValue(jest.fn());
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });

frontend/packages/console-dynamic-plugin-sdk/src/app/core/actions/core.ts

@@ -1,9 +1,11 @@
 import { action, ActionType as Action } from 'typesafe-actions';
+import type { UserKind } from '@console/internal/module/k8s/types';
 import { UserInfo } from '../../../extensions';
 import { AdmissionWebhookWarning } from '../../redux-types';
 
 export enum ActionType {
   SetUser = 'setUser',
+  SetUserResource = 'setUserResource',
   BeginImpersonate = 'beginImpersonate',
   EndImpersonate = 'endImpersonate',
   SetActiveCluster = 'setActiveCluster',
@@ -12,6 +14,8 @@ export enum ActionType {
 }
 
 export const setUser = (userInfo: UserInfo) => action(ActionType.SetUser, { userInfo });
+export const setUserResource = (userResource: UserKind) =>
+  action(ActionType.SetUserResource, { userResource });
 export const beginImpersonate = (kind: string, name: string, subprotocols: string[]) =>
   action(ActionType.BeginImpersonate, { kind, name, subprotocols });
 export const endImpersonate = () => action(ActionType.EndImpersonate);
@@ -21,6 +25,7 @@ export const removeAdmissionWebhookWarning = (id) =>
   action(ActionType.RemoveAdmissionWebhookWarning, { id });
 const coreActions = {
   setUser,
+  setUserResource,
   beginImpersonate,
   endImpersonate,
   setAdmissionWebhookWarning,

frontend/packages/console-dynamic-plugin-sdk/src/app/core/reducers/core.ts

@@ -14,6 +14,7 @@ import { ActionType, CoreAction } from '../actions/core';
 export const coreReducer = (
   state: CoreState = {
     user: {},
+    userResource: null,
     admissionWebhookWarnings: ImmutableMap<string, AdmissionWebhookWarning>(),
   },
   action: CoreAction,
@@ -47,6 +48,12 @@ export const coreReducer = (
         user: action.payload.userInfo,
       };
 
+    case ActionType.SetUserResource:
+      return {
+        ...state,
+        userResource: action.payload.userResource,
+      };
+
     case ActionType.SetAdmissionWebhookWarning:
       return {
         ...state,

frontend/packages/console-dynamic-plugin-sdk/src/app/core/reducers/coreSelectors.ts

@@ -1,9 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
+import type { UserKind } from '@console/internal/module/k8s/types';
 import { UserInfo } from '../../../extensions';
 import { ImpersonateKind, SDKStoreState, AdmissionWebhookWarning } from '../../redux-types';
 
 type GetImpersonate = (state: SDKStoreState) => ImpersonateKind;
 type GetUser = (state: SDKStoreState) => UserInfo;
+type GetUserResource = (state: SDKStoreState) => UserKind;
 type GetAdmissionWebhookWarnings = (
   state: SDKStoreState,
 ) => ImmutableMap<string, AdmissionWebhookWarning>;
@@ -31,6 +33,13 @@ export const impersonateStateToProps = (state: SDKStoreState) => {
  */
 export const getUser: GetUser = (state) => state.sdkCore.user;
 
+/**
+ * It provides user resource details from the redux store.
+ * @param state the root state
+ * @returns The user resource state.
+ */
+export const getUserResource: GetUserResource = (state) => state.sdkCore.userResource;
+
 /**
  * It provides admission webhook warning data from the redux store.
  * @param state the root state

frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts

@@ -1,4 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
+import type { UserKind } from '@console/internal/module/k8s/types';
 import { UserInfo } from '../extensions/console-types';
 
 export type K8sState = ImmutableMap<string, any>;
@@ -16,6 +17,7 @@ export type ImpersonateKind = {
 
 export type CoreState = {
   user?: UserInfo;
+  userResource?: UserKind;
   impersonate?: ImpersonateKind;
   admissionWebhookWarnings?: ImmutableMap<string, AdmissionWebhookWarning>;
 };

frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts

@@ -24,6 +24,24 @@ jest.mock('@console/shared/src/hooks/useUserSettings', () => ({
   useUserSettings: jest.fn(),
 }));
 
+jest.mock('@console/shared/src/hooks/useUser', () => ({
+  useUser: jest.fn(() => ({
+    user: {},
+    userResource: {},
+    userResourceLoaded: true,
+    userResourceError: null,
+    username: 'testuser',
+    fullName: 'Test User',
+    displayName: 'Test User',
+  })),
+}));
+
+const mockUserResource = {};
+
+jest.mock('@console/internal/components/utils/k8s-get-hook', () => ({
+  useK8sGet: () => [mockUserResource, true],
+}));
+
 const mockUserSettings = useUserSettings as jest.Mock;
 
 const useResolvedExtensionsMock = useResolvedExtensions as jest.Mock;
@@ -135,10 +153,13 @@ describe('useTelemetry', () => {
     const fireTelemetryEvent = result.current;
     fireTelemetryEvent('test 1');
     expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toBeCalledWith('test 1', {
-      consoleVersion: undefined,
-      clusterType: undefined,
-    });
+    expect(listener).toBeCalledWith(
+      'test 1',
+      expect.objectContaining({
+        consoleVersion: undefined,
+        clusterType: undefined,
+      }),
+    );
   });
 
   it('calls the listener with console version and clusterType when they are configured (x.y.z and OSD)', () => {
@@ -152,10 +173,13 @@ describe('useTelemetry', () => {
     const fireTelemetryEvent = result.current;
     fireTelemetryEvent('test 2');
     expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toBeCalledWith('test 2', {
-      consoleVersion: 'x.y.z',
-      clusterType: 'OSD',
-    });
+    expect(listener).toBeCalledWith(
+      'test 2',
+      expect.objectContaining({
+        consoleVersion: 'x.y.z',
+        clusterType: 'OSD',
+      }),
+    );
   });
 
   it('calls the listener with the optional properties', () => {
@@ -169,12 +193,15 @@ describe('useTelemetry', () => {
     const fireTelemetryEvent = result.current;
     fireTelemetryEvent('test 3', { 'a-string': 'works fine', 'a-boolean': true });
     expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toBeCalledWith('test 3', {
-      consoleVersion: 'x.y.z',
-      clusterType: 'OSD',
-      'a-string': 'works fine',
-      'a-boolean': true,
-    });
+    expect(listener).toBeCalledWith(
+      'test 3',
+      expect.objectContaining({
+        consoleVersion: 'x.y.z',
+        clusterType: 'OSD',
+        'a-string': 'works fine',
+        'a-boolean': true,
+      }),
+    );
   });
 
   it('calls the listener with clusterType DEVSANDBOX when CLUSTER_TYPE is OSD and DEVSANDBOX is "true"', () => {
@@ -192,10 +219,13 @@ describe('useTelemetry', () => {
     const fireTelemetryEvent = result.current;
     fireTelemetryEvent('test 4');
     expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toBeCalledWith('test 4', {
-      consoleVersion: 'x.y.z',
-      clusterType: 'DEVSANDBOX',
-    });
+    expect(listener).toBeCalledWith(
+      'test 4',
+      expect.objectContaining({
+        consoleVersion: 'x.y.z',
+        clusterType: 'DEVSANDBOX',
+      }),
+    );
   });
 
   it('Should not send telemetry event when cluster configuration telemetry state is set to disabled', () => {

frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts

@@ -0,0 +1,121 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { useSelector, useDispatch } from 'react-redux';
+import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
+import { testHook } from '../../../../../__tests__/utils/hooks-utils';
+import { useUser } from '../useUser';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...(jest as any).requireActual('react-redux'),
+  useSelector: jest.fn(),
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('@console/internal/components/utils/k8s-get-hook', () => ({
+  useK8sGet: jest.fn(),
+}));
+
+const mockSetUserResource = jest.fn((userResource) => ({
+  type: 'setUserResource',
+  payload: { userResource },
+}));
+
+jest.mock('@console/dynamic-plugin-sdk', () => ({
+  ...(jest as any).requireActual('@console/dynamic-plugin-sdk'),
+  getUser: jest.fn(),
+  getUserResource: jest.fn(),
+  setUserResource: (...args) => mockSetUserResource(...args),
+}));
+
+const mockDispatch = jest.fn();
+const mockUseSelector = useSelector as jest.Mock;
+const mockUseK8sGet = useK8sGet as jest.Mock;
+const mockUseDispatch = useDispatch as jest.Mock;
+
+describe('useUser', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseDispatch.mockReturnValue(mockDispatch);
+  });
+
+  it('should return user data with displayName from fullName when available', () => {
+    const mockUser = { username: 'testuser@example.com', uid: '123' };
+    const mockUserResource = { fullName: 'Test User', identities: ['testuser'] };
+
+    mockUseSelector
+      .mockReturnValueOnce(mockUser) // for getUser
+      .mockReturnValueOnce(mockUserResource); // for getUserResource
+
+    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+
+    const { result } = testHook(() => useUser());
+
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.userResource).toEqual(mockUserResource);
+    expect(result.current.username).toBe('testuser@example.com');
+    expect(result.current.fullName).toBe('Test User');
+    expect(result.current.displayName).toBe('Test User'); // Should prefer fullName
+  });
+
+  it('should fallback to username when fullName is not available', () => {
+    const mockUser = { username: 'testuser@example.com', uid: '123' };
+    const mockUserResource = { identities: ['testuser'] }; // No fullName
+
+    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+
+    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+
+    const { result } = testHook(() => useUser());
+
+    expect(result.current.displayName).toBe('testuser@example.com'); // Should fallback to username
+    expect(result.current.fullName).toBeUndefined();
+  });
+
+  it('should dispatch setUserResource when user resource is loaded', () => {
+    const mockUser = { username: 'testuser@example.com' };
+    const mockUserResource = { fullName: 'Test User' };
+
+    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(null); // No userResource in Redux yet
+
+    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+
+    testHook(() => useUser());
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'setUserResource',
+      payload: { userResource: mockUserResource },
+    });
+  });
+
+  it('should handle edge cases with empty strings and fallback to "Unknown user"', () => {
+    const mockUser = { username: '' }; // Empty username
+    const mockUserResource = { fullName: '   ' }; // Whitespace-only fullName
+
+    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+
+    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+
+    const { result } = testHook(() => useUser());
+
+    expect(result.current.displayName).toBe('Unknown user'); // Should fallback to translated "Unknown user"
+  });
+
+  it('should trim whitespace from fullName and username', () => {
+    const mockUser = { username: '  testuser@example.com  ' };
+    const mockUserResource = { fullName: '  Test User  ' };
+
+    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+
+    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+
+    const { result } = testHook(() => useUser());
+
+    expect(result.current.displayName).toBe('Test User'); // Should be trimmed
+  });
+});

frontend/packages/console-shared/src/hooks/index.ts

@@ -38,3 +38,4 @@ export * from './usePrometheusGate';
 export * from './useCopyCodeModal';
 export * from './useCopyLoginCommands';
 export * from './useQuickStartContext';
+export * from './useUser';