openshift · upalatucci · Jun 16, 2026
diff --git a/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx b/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx
@@ -1,5 +1,5 @@
 import type { FC, Provider as ProviderComponent, ReactNode } from 'react';
-import { createContext, Suspense, useContext, useEffect } from 'react';
+import { createContext, Suspense, useContext, useEffect, useMemo } from 'react';
 import type { LoadedAndResolvedExtension } from '@openshift/dynamic-plugin-sdk';
 import {
   Button,
@@ -24,6 +24,8 @@ import {
 } from '@console/dynamic-plugin-sdk';
 import { applyReduxExtensions } from '@console/internal/redux';
 import { LoadingBox } from '@console/shared/src/components/loading/LoadingBox';
+import { ForcedPerspectiveContext } from '@console/shared/src/hooks/forcedPerspectiveContext';
+import { useForcedPerspective } from '@console/shared/src/hooks/useForcedPerspective';
 import { usePerspectives } from '@console/shared/src/hooks/usePerspectives';
 import { useLanguage } from '../user-preferences/language/useLanguage';
 import { usePreferredLanguage } from '../user-preferences/language/usePreferredLanguage';
@@ -148,11 +150,12 @@ export const ContextProviderExtensionWrapper: FC<{ children: ReactNode }> = ({ c
  * NamespaceContext, and ContextProviderExtensionsContext.
  */
 export const DetectContext: FC<{ children: ReactNode }> = ({ children }) => {
+  const forcedPerspective = useForcedPerspective();
   const [
     activePerspective,
     setActivePerspective,
     perspectiveLoaded,
-  ] = useValuesForPerspectiveContext();
+  ] = useValuesForPerspectiveContext(forcedPerspective);
   const { namespace, setNamespace, loaded: namespaceLoaded } = useValuesForNamespaceContext();
 
   const [preferredLanguage, , preferredLanguageLoaded] = usePreferredLanguage();
@@ -170,18 +173,31 @@ export const DetectContext: FC<{ children: ReactNode }> = ({ children }) => {
   const location = useLocation();
 
   useEffect(() => {
+    if (forcedPerspective.perspectiveId) {
+      if (forcedPerspective.perspectiveId !== activePerspective) {
+        setActivePerspective(forcedPerspective.perspectiveId, createPath(location));
+      }
+      return;
+    }
     if (perspectiveParam && perspectiveParam !== activePerspective) {
       setActivePerspective(perspectiveParam, createPath(location));
     }
-  }, [perspectiveParam, activePerspective, setActivePerspective, location]);
+  }, [
+    forcedPerspective.perspectiveId,
+    perspectiveParam,
+    activePerspective,
+    setActivePerspective,
+    location,
+  ]);
 
   useEffect(() => {
     if (reducersResolved) {
       applyReduxExtensions(reduxReducerExtensions);
     }
   }, [reducersResolved, reduxReducerExtensions]);
 
-  const needsPerspectiveDetection = perspectiveLoaded && !activePerspective;
+  const needsPerspectiveDetection =
+    perspectiveLoaded && !activePerspective && !forcedPerspective.perspectiveId;
   const ready =
     perspectiveLoaded &&
     !!activePerspective &&
@@ -190,6 +206,15 @@ export const DetectContext: FC<{ children: ReactNode }> = ({ children }) => {
     providersResolved &&
     preferredLanguageLoaded;
 
+  const perspectiveContextValue = useMemo(() => ({ activePerspective, setActivePerspective }), [
+    activePerspective,
+    setActivePerspective,
+  ]);
+  const namespaceContextValue = useMemo(() => ({ namespace, setNamespace }), [
+    namespace,
+    setNamespace,
+  ]);
+
   if (!ready) {
     const pending: string[] = [];
     if (!perspectiveLoaded) pending.push('Perspective');
@@ -210,12 +235,14 @@ export const DetectContext: FC<{ children: ReactNode }> = ({ children }) => {
   }
 
   return (
-    <PerspectiveContext.Provider value={{ activePerspective, setActivePerspective }}>
-      <NamespaceContext.Provider value={{ namespace, setNamespace }}>
-        <ContextProviderExtensionsContext.Provider value={contextProviderExtensions}>
-          {children}
-        </ContextProviderExtensionsContext.Provider>
-      </NamespaceContext.Provider>
-    </PerspectiveContext.Provider>
+    <ForcedPerspectiveContext.Provider value={forcedPerspective}>
+      <PerspectiveContext.Provider value={perspectiveContextValue}>
+        <NamespaceContext.Provider value={namespaceContextValue}>
+          <ContextProviderExtensionsContext.Provider value={contextProviderExtensions}>
+            {children}
+          </ContextProviderExtensionsContext.Provider>
+        </NamespaceContext.Provider>
+      </PerspectiveContext.Provider>
+    </ForcedPerspectiveContext.Provider>
   );
 };
diff --git a/...onsole-app/src/components/detect-context/__tests__/useValuesForPerspectiveContext.spec.ts b/...onsole-app/src/components/detect-context/__tests__/useValuesForPerspectiveContext.spec.ts
@@ -12,6 +12,8 @@ import { usePreferredPerspective } from '../../user-preferences/perspective/useP
 import { useLastPerspective } from '../useLastPerspective';
 import { useValuesForPerspectiveContext } from '../useValuesForPerspectiveContext';
 
+const noForcedPerspective = { loaded: true, perspectiveId: null };
+
 jest.mock('@console/shared/src/hooks/usePerspectives', () => ({
   usePerspectiveExtension: jest.fn(),
   usePerspectives: jest.fn(),
@@ -44,7 +46,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['foo', jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue([undefined, jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    const { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    const { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     const [perspective] = result.current;
     expect(perspective).toBe('');
   });
@@ -54,7 +58,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['dev', jest.fn(), false]);
     usePreferredPerspectiveMock.mockReturnValue(['admin', jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    let { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    let { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     let [perspective, , loaded] = result.current;
     expect(perspective).toBe('');
     expect(loaded).toBeFalsy();
@@ -65,7 +71,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['dev', jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue(['admin', jest.fn(), false]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    ({ result } = renderHookWithProviders(() => useValuesForPerspectiveContext()));
+    ({ result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    ));
     [perspective, , loaded] = result.current;
     expect(perspective).toBe('');
     expect(loaded).toBeFalsy();
@@ -76,7 +84,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['dev', jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue(['admin', jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    const { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    const { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     const [perspective] = result.current;
     expect(perspective).toEqual('admin');
   });
@@ -86,7 +96,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['dev', jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue([undefined, jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    const { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    const { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     const [perspective] = result.current;
     expect(perspective).toEqual('dev');
   });
@@ -96,7 +108,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue(['dev', jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue(['dev', jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    const { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    const { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     const [perspective] = result.current;
     expect(perspective).toEqual('dev');
   });
@@ -106,7 +120,9 @@ describe('useValuesForPerspectiveContext', () => {
     useLastPerspectiveMock.mockReturnValue([undefined, jest.fn(), true]);
     usePreferredPerspectiveMock.mockReturnValue([undefined, jest.fn(), true]);
     usePerspectiveExtensionMock.mockReturnValue(acmPerspectiveExtension);
-    const { result } = renderHookWithProviders(() => useValuesForPerspectiveContext());
+    const { result } = renderHookWithProviders(() =>
+      useValuesForPerspectiveContext(noForcedPerspective),
+    );
     const [perspective] = result.current;
     expect(perspective).toEqual(ACM_PERSPECTIVE_ID);
   });

diff --git a/...tend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts b/...tend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts
@@ -6,17 +6,16 @@ import {
   usePerspectives,
 } from '@console/shared/src/hooks/usePerspectives';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
+import type { ForcedPerspectiveResult } from '@console/shared/src/utils/forcedPerspective';
 import { ACM_PERSPECTIVE_ID } from '../../consts';
 import { usePreferredPerspective } from '../user-preferences/perspective/usePreferredPerspective';
 import { useLastPerspective } from './useLastPerspective';
 
 type SetActivePerspective = ReturnType<UseActivePerspective>[1];
 
-export const useValuesForPerspectiveContext = (): [
-  PerspectiveType,
-  SetActivePerspective,
-  boolean,
-] => {
+export const useValuesForPerspectiveContext = (
+  forcedPerspective: ForcedPerspectiveResult,
+): [PerspectiveType, SetActivePerspective, boolean] => {
   const navigate = useNavigate();
   const fireTelemetryEvent = useTelemetry();
   const perspectiveExtensions = usePerspectives();
@@ -32,7 +31,13 @@ export const useValuesForPerspectiveContext = (): [
       ? ACM_PERSPECTIVE_ID
       : existingPerspective || '';
   const isValidPerspective =
-    loaded && perspectiveExtensions.some((p) => p.properties.id === perspective);
+    (loaded && perspectiveExtensions.some((p) => p.properties.id === perspective)) ||
+    !!forcedPerspective.perspectiveId;
+  const resolvedPerspective = forcedPerspective.perspectiveId
+    ? forcedPerspective.perspectiveId
+    : isValidPerspective
+    ? perspective
+    : '';
 
   const setPerspective = useCallback<SetActivePerspective>(
     (newPerspective, next) => {
@@ -45,5 +50,5 @@ export const useValuesForPerspectiveContext = (): [
     [setLastPerspective, setActivePerspective, navigate, fireTelemetryEvent],
   );
 
-  return [isValidPerspective ? perspective : '', setPerspective, loaded];
+  return [resolvedPerspective, setPerspective, loaded];
 };
diff --git a/frontend/packages/console-app/src/components/nav/NavHeader.tsx b/frontend/packages/console-app/src/components/nav/NavHeader.tsx
@@ -1,12 +1,18 @@
 import type { FC, MouseEvent, Ref } from 'react';
 import { useMemo, useState, useCallback } from 'react';
 import type { MenuToggleElement } from '@patternfly/react-core';
-import { MenuToggle, Select, SelectList, SelectOption, Title } from '@patternfly/react-core';
-import { RhUiGearGroupFillIcon } from '@patternfly/react-icons';
-import { useTranslation } from 'react-i18next';
+import {
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  Title,
+  Skeleton,
+} from '@patternfly/react-core';
 import type { Perspective } from '@console/dynamic-plugin-sdk';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { AsyncComponent } from '@console/internal/components/utils/async';
+import { useForcedPerspectiveContext } from '@console/shared/src/hooks/forcedPerspectiveContext';
 import { usePerspectives } from '@console/shared/src/hooks/usePerspectives';
 
 type NavHeaderProps = {
@@ -22,6 +28,18 @@ type PerspectiveDropdownItemProps = {
 
 const IconLoadingComponent: FC = () => <>&emsp;</>;
 
+const PerspectiveIcon: FC<{
+  icon?: Perspective['properties']['icon'];
+}> = ({ icon }) =>
+  icon ? (
+    <AsyncComponent
+      loader={() => icon().then((m) => m.default)}
+      LoadingComponent={IconLoadingComponent}
+    />
+  ) : (
+    <Skeleton />
+  );
+
 const PerspectiveDropdownItem: FC<PerspectiveDropdownItemProps> = ({ perspective, onClick }) => {
   return (
     <SelectOption
@@ -31,12 +49,7 @@ const PerspectiveDropdownItem: FC<PerspectiveDropdownItemProps> = ({ perspective
         e.preventDefault();
         onClick(perspective.properties.id);
       }}
-      icon={
-        <AsyncComponent
-          loader={() => perspective.properties.icon().then((m) => m.default)}
-          LoadingComponent={IconLoadingComponent}
-        />
-      }
+      icon={<PerspectiveIcon icon={perspective.properties.icon} />}
     >
       <Title headingLevel="h2" size="md">
         {perspective.properties.name}
@@ -49,7 +62,13 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
   const [activePerspective, setActivePerspective] = useActivePerspective();
   const [isPerspectiveDropdownOpen, setPerspectiveDropdownOpen] = useState(false);
   const perspectiveExtensions = usePerspectives();
-  const { t } = useTranslation('console-app');
+  const forcedPerspective = useForcedPerspectiveContext();
+  const displayedPerspective = useMemo(() => {
+    const targetId = forcedPerspective.perspectiveId || activePerspective;
+    return (
+      perspectiveExtensions.find((p) => p?.properties?.id === targetId) ?? perspectiveExtensions[0]
+    );
+  }, [forcedPerspective.perspectiveId, activePerspective, perspectiveExtensions]);
 
   const togglePerspectiveOpen = useCallback(() => {
     setPerspectiveDropdownOpen((isOpen) => !isOpen);
@@ -80,7 +99,7 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
     [activePerspective, perspectiveExtensions],
   );
 
-  return perspectiveDropdownItems.length > 1 ? (
+  return perspectiveDropdownItems.length > 1 && !forcedPerspective.perspectiveId ? (
     <div
       className="oc-nav-header"
       data-tour-id="tour-perspective-dropdown"
@@ -97,14 +116,7 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
             isExpanded={isPerspectiveDropdownOpen}
             ref={toggleRef}
             onClick={() => togglePerspectiveOpen()}
-            icon={
-              icon && (
-                <AsyncComponent
-                  loader={() => icon().then((m) => m.default)}
-                  LoadingComponent={IconLoadingComponent}
-                />
-              )
-            }
+            icon={<PerspectiveIcon icon={icon ?? undefined} />}
           >
             {name && (
               <Title headingLevel="h2" size="md">
@@ -121,9 +133,17 @@ const NavHeader: FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
       </Select>
     </div>
   ) : (
-    <div data-test-id="perspective-switcher-toggle" id="core-platform-perspective">
+    <div
+      data-test-id="perspective-switcher-toggle"
+      id={
+        forcedPerspective.perspectiveId ||
+        displayedPerspective?.properties?.id ||
+        'core-platform-perspective'
+      }
+    >
       <Title headingLevel="h2" size="md">
-        <RhUiGearGroupFillIcon /> {t('Core platform')}
+        <PerspectiveIcon icon={displayedPerspective?.properties?.icon} />{' '}
+        {displayedPerspective?.properties?.name ?? <Skeleton />}
       </Title>
     </div>
   );

diff --git a/frontend/packages/console-app/src/components/nav/PerspectiveNav.tsx b/frontend/packages/console-app/src/components/nav/PerspectiveNav.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { NavList } from '@patternfly/react-core';
 import type { DragDropSortProps, DraggableObject } from '@patternfly/react-drag-drop';
 import { DragDropSort } from '@patternfly/react-drag-drop';
@@ -18,18 +18,15 @@ import { getSortedNavExtensions, isTopLevelNavItem } from './utils';
 
 import './PerspectiveNav.scss';
 
-const PerspectiveNav: FC<{}> = () => {
+const PerspectiveNav: FC = () => {
   const [activePerspective] = useActivePerspective();
   const allNavExtensions = useNavExtensionsForPerspective(activePerspective);
   const [pinnedResources, setPinnedResources, pinnedResourcesLoaded] = usePinnedResources();
-  const [validPinnedResources, setValidPinnedResources] = useState<string[]>([]);
+  const validPinnedResources = useMemo(() => pinnedResources.filter((res) => !!modelFor(res)), [
+    pinnedResources,
+  ]);
   const { t } = useTranslation('console-app');
 
-  useEffect(() => {
-    const validResources = pinnedResources.filter((res) => !!modelFor(res));
-    setValidPinnedResources(validResources);
-  }, [setValidPinnedResources, pinnedResources]);
-
   const orderedNavExtensions = useMemo(() => {
     const topLevelNavExtensions = allNavExtensions.filter(isTopLevelNavItem);
     return getSortedNavExtensions(topLevelNavExtensions);
@@ -98,4 +95,4 @@ const PerspectiveNav: FC<{}> = () => {
   );
 };
 
-export default PerspectiveNav;
+export default memo(PerspectiveNav);
diff --git a/frontend/packages/console-app/src/components/nav/__tests__/NavHeader.spec.tsx b/frontend/packages/console-app/src/components/nav/__tests__/NavHeader.spec.tsx
@@ -8,11 +8,16 @@ jest.mock('@console/internal/components/utils/async', () => ({
   AsyncComponent: () => null,
 }));
 
+jest.mock('@console/shared/src/hooks/forcedPerspectiveContext', () => ({
+  useForcedPerspectiveContext: jest.fn(() => ({ loaded: true, perspectiveId: null })),
+}));
+
 describe('NavHeader', () => {
   const mockOnPerspectiveSelected = jest.fn();
   let mockSetActivePerspective: jest.Mock;
 
   beforeEach(() => {
+    window.localStorage.clear();
     jest.clearAllMocks();
     mockSetActivePerspective = jest.fn();
   });