diff --git a/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx b/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx index 990432f29c4..905a36693dc 100644 --- a/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx +++ b/frontend/packages/console-app/src/components/detect-context/DetectContext.tsx @@ -14,7 +14,7 @@ import { PageSidebarBody, } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; -import { createPath, useLocation } from 'react-router'; +import { createPath, useLocation, useNavigate } from 'react-router'; import type { Perspective, ReduxReducer, ContextProvider } from '@console/dynamic-plugin-sdk'; import { PerspectiveContext, @@ -168,12 +168,21 @@ export const DetectContext: FC<{ children: ReactNode }> = ({ children }) => { const perspectiveExtensions = usePerspectives(); const perspectiveParam = getPerspectiveURLParam(perspectiveExtensions); const location = useLocation(); + const navigate = useNavigate(); useEffect(() => { - if (perspectiveParam && perspectiveParam !== activePerspective) { - setActivePerspective(perspectiveParam, createPath(location)); + if (perspectiveParam) { + const params = new URLSearchParams(location.search); + params.delete('perspective'); + const search = params.toString(); + const cleanPath = createPath({ ...location, search: search ? `?${search}` : '' }); + if (perspectiveParam !== activePerspective) { + setActivePerspective(perspectiveParam, cleanPath); + } else { + navigate(cleanPath, { replace: true }); + } } - }, [perspectiveParam, activePerspective, setActivePerspective, location]); + }, [perspectiveParam, activePerspective, setActivePerspective, navigate, location]); useEffect(() => { if (reducersResolved) { diff --git a/frontend/packages/console-app/src/components/detect-context/__tests__/DetectContext.spec.tsx b/frontend/packages/console-app/src/components/detect-context/__tests__/DetectContext.spec.tsx index 96c867bd785..4ad52bcbba4 100644 --- a/frontend/packages/console-app/src/components/detect-context/__tests__/DetectContext.spec.tsx +++ b/frontend/packages/console-app/src/components/detect-context/__tests__/DetectContext.spec.tsx @@ -49,7 +49,8 @@ jest.mock('@console/internal/redux', () => ({ jest.mock('react-router', () => ({ useLocation: jest.fn(), - createPath: jest.fn((loc) => loc.pathname), + useNavigate: jest.fn(() => jest.fn()), + createPath: jest.fn((loc) => `${loc.pathname}${loc.search || ''}${loc.hash || ''}`), })); const useValuesForPerspectiveContextMock = useValuesForPerspectiveContext as jest.Mock; diff --git a/frontend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts b/frontend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts index 4be72bae345..fffb3dab069 100644 --- a/frontend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts +++ b/frontend/packages/console-app/src/components/detect-context/useValuesForPerspectiveContext.ts @@ -1,5 +1,5 @@ import { useCallback, useState } from 'react'; -import { useNavigate } from 'react-router'; +import { createPath, useNavigate } from 'react-router'; import type { PerspectiveType, UseActivePerspective } from '@console/dynamic-plugin-sdk'; import { usePerspectiveExtension, @@ -36,13 +36,19 @@ export const useValuesForPerspectiveContext = (): [ const setPerspective = useCallback( (newPerspective, next) => { + const perspectiveChanged = newPerspective !== perspective; setLastPerspective(newPerspective); setActivePerspective(newPerspective); - // Navigate to next or root and let the default page determine where to go to next - navigate(next || '/'); + // Only navigate if perspective changed + if (perspectiveChanged) { + const targetPath = next || '/'; + if (targetPath !== createPath(window.location)) { + navigate(targetPath); + } + } fireTelemetryEvent('Perspective Changed', { perspective: newPerspective }); }, - [setLastPerspective, setActivePerspective, navigate, fireTelemetryEvent], + [setLastPerspective, setActivePerspective, navigate, fireTelemetryEvent, perspective], ); return [isValidPerspective ? perspective : '', setPerspective, loaded];