Merge pull request #15743 from Leo6Leo/leo/ocpbugs/65793/show-full-user-name/4.20

openshift-merge-bot[bot] · web-flow · commit 883425d5dde3 · 2025-11-26T20:08:11.000Z
[release-4.20] OCPBUGS-65793: OpenShift Console can only show user name instead of full name as the display name
diff --git a/frontend/packages/console-app/src/components/user-preferences/__tests__/UserPreferenceCheckboxField.spec.tsx b/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();
   });
diff --git a/frontend/packages/console-app/src/components/user-preferences/__tests__/UserPreferenceDropdownField.spec.tsx b/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();
   });
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/core/actions/core.ts b/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,
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/core/reducers/core.ts b/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,
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/core/reducers/coreSelectors.ts b/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
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts b/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>;
 };
diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts
@@ -24,6 +24,18 @@ 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 = {};
 
 const exampleReturnValue = {
diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts
@@ -0,0 +1,119 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
+import { testHook } from '@console/shared/src/test-utils/hooks-utils';
+import { useUser } from '../useUser';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.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.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
+  });
+});
diff --git a/frontend/packages/console-shared/src/hooks/index.ts b/frontend/packages/console-shared/src/hooks/index.ts
@@ -37,3 +37,4 @@ export * from './usePrometheusGate';
 export * from './useCopyCodeModal';
 export * from './useCopyLoginCommands';
 export * from './useQuickStartContext';
+export * from './useUser';
diff --git a/frontend/packages/console-shared/src/hooks/useTelemetry.ts b/frontend/packages/console-shared/src/hooks/useTelemetry.ts
@@ -6,14 +6,13 @@ import {
   TelemetryEventListener,
   UserInfo,
 } from '@console/dynamic-plugin-sdk';
-import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
-import { UserModel } from '@console/internal/models';
 import type { UserKind } from '@console/internal/module/k8s/types';
 import {
   CLUSTER_TELEMETRY_ANALYTICS,
   PREFERRED_TELEMETRY_USER_SETTING_KEY,
   USER_TELEMETRY_ANALYTICS,
 } from '../constants';
+import { useUser } from './useUser';
 import { useUserSettings } from './useUserSettings';
 
 export interface ClusterProperties {
@@ -81,7 +80,8 @@ export const useTelemetry = () => {
     true,
   );
 
-  const [userResource, userResourceIsLoaded] = useK8sGet<UserKind>(UserModel, '~');
+  // Use centralized user data instead of fetching directly
+  const { userResource, userResourceLoaded: userResourceIsLoaded } = useUser();
 
   const [extensions] = useResolvedExtensions<TelemetryListener>(isTelemetryListener);
 
diff --git a/frontend/packages/console-shared/src/hooks/useUser.ts b/frontend/packages/console-shared/src/hooks/useUser.ts
@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { getUser, getUserResource, setUserResource } from '@console/dynamic-plugin-sdk';
+import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
+import { UserModel } from '@console/internal/models';
+import type { UserKind } from '@console/internal/module/k8s/types';
+
+/**
+ * Custom hook that provides centralized user data fetching and management.
+ * This hook fetches both the UserInfo (from authentication) and UserKind (from k8s API)
+ * and stores them in Redux for use throughout the application.
+ *
+ * @returns Object containing user info, user resource, and loading states
+ */
+export const useUser = () => {
+  const { t } = useTranslation('public');
+  const dispatch = useDispatch();
+
+  // Get current user info from Redux (username, groups, etc.)
+  const user = useSelector(getUser);
+
+  // Get current user resource from Redux (fullName, identities, etc.)
+  const userResource = useSelector(getUserResource);
+
+  // Fetch user resource from k8s API
+  const [userResourceData, userResourceLoaded, userResourceError] = useK8sGet<UserKind>(
+    UserModel,
+    '~',
+  );
+
+  // Update Redux when user resource is loaded
+  useEffect(() => {
+    if (userResourceLoaded && userResourceData && !userResourceError) {
+      dispatch(setUserResource(userResourceData));
+    }
+  }, [dispatch, userResourceData, userResourceLoaded, userResourceError]);
+
+  const currentUserResource = userResource || userResourceData;
+  const currentUsername = user?.username;
+  const currentFullName = currentUserResource?.fullName;
+
+  // Create a robust display name that always has a fallback
+  const getDisplayName = () => {
+    // Prefer fullName if it exists and is not empty
+    if (currentFullName && currentFullName.trim()) {
+      return currentFullName.trim();
+    }
+    // Fallback to username if it exists and is not empty
+    if (currentUsername && currentUsername.trim()) {
+      return currentUsername.trim();
+    }
+    // Final fallback for edge cases
+    return t('Unknown user');
+  };
+
+  return {
+    user,
+    userResource: currentUserResource,
+    userResourceLoaded,
+    userResourceError,
+    // Computed properties for convenience
+    username: currentUsername,
+    fullName: currentFullName,
+    displayName: getDisplayName(),
+  };
+};
diff --git a/frontend/packages/topology/src/components/export-app/__tests__/ExportApplicationModal.spec.tsx b/frontend/packages/topology/src/components/export-app/__tests__/ExportApplicationModal.spec.tsx
diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
