CONSOLE-4990: Migrate from history object to React Router v6/v7 hooks

Migrates from direct history object usage to React Router v6/v7 compatible
hook-based patterns as part of the React Router v7 upgrade effort.

- Created useQueryParamsMutator() hook providing query parameter mutation
  functions (setQueryArgument, setQueryArguments, setAllQueryArguments,
  removeQueryArgument, removeQueryArguments, setOrRemoveQueryArgument)
- Uses useSearchParams() from react-router-dom-v5-compat
- Stable function references via useRef pattern - prevents unnecessary re-renders
  and eliminates dependency array workarounds
- Only triggers updates when values actually change (performance optimization)
- Uses replace: true to avoid polluting browser history
- Preserves location.hash and location.state on all mutations
- Added comprehensive unit tests in router-hooks.spec.tsx

Easy conversions - Added hook call, updated imports:
- public/components/filter-toolbar.tsx
- public/components/search.tsx
- public/components/api-explorer.tsx
- public/components/cluster-settings/cluster-settings.tsx
- public/components/namespace-bar.tsx
- public/components/useRowFilterFix.ts
- public/components/useLabelSelectionFix.ts
- public/components/useSearchFilters.ts
- packages/topology/src/components/page/TopologyPage.tsx
- packages/topology/src/components/page/TopologyView.tsx
- packages/topology/src/filters/TopologyFilterBar.tsx
- packages/console-shared/src/components/catalog/CatalogController.tsx
- packages/operator-lifecycle-manager/src/components/subscription.tsx
- packages/operator-lifecycle-manager/src/components/operator-hub/operator-channel-version-select.tsx
- packages/console-app/src/components/nodes/NodeLogs.tsx

Complex refactors:
- pod-logs.jsx - Functional wrapper pattern to inject hooks without class conversion
- filter-utils.ts - Removed deprecated functions, moved logic to TopologyFilterBar
- QuickSearchModalBody.tsx + 4 files - Replaced history.push() with useNavigate()

- Fixed "Clear all filters" functionality in Search page and Topology filter bar
  by using removeQueryArguments() to atomically remove multiple params
- Fixed getQueryArgument reference stability issue in TopologyPage useEffect
  by implementing searchParamsRef pattern (addresses PR review feedback)

- Removed deprecated query parameter mutation functions from router.ts
- Removed unnecessary useRouterPush hook (use useNavigate() directly)
- Removed unnecessary location.state from setSearchParams calls (React Router
  preserves state automatically with replace: true)
- Removed eslint-disable workaround in TopologyPage (no longer needed)

- Updated TopologyPage tests to mock useQueryParamsMutator directly instead of
  low-level router hooks (better abstraction, more maintainable)

The history object export is kept as it's still used by:
- Router component initialization in app.tsx
- Monkey-patching for base path handling
- 20+ other files (separate migration)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: rhamilto

frontend/packages/console-app/src/components/nodes/NodeLogs.tsx

@@ -22,11 +22,7 @@ import { css } from '@patternfly/react-styles';
 import { Trans, useTranslation } from 'react-i18next';
 import { coFetch } from '@console/internal/co-fetch';
 import { ThemeContext } from '@console/internal/components/ThemeProvider';
-import {
-  getQueryArgument,
-  removeQueryArgument,
-  setQueryArgument,
-} from '@console/internal/components/utils/router';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { LoadingBox, LoadingInline } from '@console/internal/components/utils/status-box';
 import { modelFor, NodeKind, resourceURL } from '@console/internal/module/k8s';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
@@ -179,6 +175,8 @@ const HeaderBanner: FC<{ lineCount: number }> = ({ lineCount }) => {
 };
 
 const NodeLogs: FC<NodeLogsProps> = ({ obj: node }) => {
+  const { getQueryArgument, setQueryArgument, removeQueryArgument } = useQueryParamsMutator();
+
   const {
     kind,
     metadata: { labels, name, namespace: ns },

frontend/packages/console-shared/src/components/catalog/CatalogController.tsx

@@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom-v5-compat';
 import { FLAG_TECH_PREVIEW } from '@console/app/src/consts';
 import { ResolvedExtension, CatalogItemType, CatalogCategory } from '@console/dynamic-plugin-sdk';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
-import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils/router';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { skeletonCatalog } from '@console/internal/components/utils/skeleton-catalog';
 import { StatusBox } from '@console/internal/components/utils/status-box';
 import OLMv1Alert from '@console/operator-lifecycle-manager-v1/src/components/OLMv1Alert';
@@ -51,6 +51,7 @@ const CatalogController: FC<CatalogControllerProps> = ({
   hideSidebar,
   categories,
 }) => {
+  const { setQueryArgument, removeQueryArgument } = useQueryParamsMutator();
   const { t } = useTranslation();
   const { pathname } = useLocation();
   const queryParams = useQueryParams();
@@ -151,13 +152,16 @@ const CatalogController: FC<CatalogControllerProps> = ({
     [catalogItems, filterGroups],
   );
 
-  const openDetailsPanel = useCallback((item: CatalogItem): void => {
-    setQueryArgument(CatalogQueryParams.SELECTED_ID, item.uid);
-  }, []);
+  const openDetailsPanel = useCallback(
+    (item: CatalogItem): void => {
+      setQueryArgument(CatalogQueryParams.SELECTED_ID, item.uid);
+    },
+    [setQueryArgument],
+  );
 
   const closeDetailsPanel = useCallback((): void => {
     removeQueryArgument(CatalogQueryParams.SELECTED_ID);
-  }, []);
+  }, [removeQueryArgument]);
 
   const renderTile = useCallback(
     (item: CatalogItem) => (

frontend/packages/console-shared/src/components/quick-search/QuickSearchDetails.tsx

@@ -1,7 +1,9 @@
 import type { ReactNode, FC } from 'react';
 import { Button, ButtonVariant, Content, Title } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions/catalog';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { useTelemetry } from '../../hooks/useTelemetry';
 import CatalogBadges from '../catalog/CatalogBadges';
 import { handleCta } from './utils/quick-search-utils';
@@ -11,10 +13,14 @@ import './QuickSearchDetails.scss';
 export type QuickSearchDetailsRendererProps = {
   selectedItem: CatalogItem;
   closeModal: () => void;
+  navigate: (url: string) => void;
+  removeQueryArgument: (key: string) => void;
 };
 export type DetailsRendererFunction = (props: QuickSearchDetailsRendererProps) => ReactNode;
-export interface QuickSearchDetailsProps extends QuickSearchDetailsRendererProps {
-  detailsRenderer: DetailsRendererFunction;
+export interface QuickSearchDetailsProps {
+  selectedItem: CatalogItem;
+  closeModal: () => void;
+  detailsRenderer?: DetailsRendererFunction;
 }
 
 const QuickSearchDetails: FC<QuickSearchDetailsProps> = ({
@@ -23,18 +29,18 @@ const QuickSearchDetails: FC<QuickSearchDetailsProps> = ({
   detailsRenderer,
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { removeQueryArgument } = useQueryParamsMutator();
   const fireTelemetryEvent = useTelemetry();
 
-  const defaultContentRenderer: DetailsRendererFunction = (
-    props: QuickSearchDetailsProps,
-  ): ReactNode => {
+  const defaultContentRenderer = (): ReactNode => {
     return (
       <>
-        <Title headingLevel="h4">{props.selectedItem.name}</Title>
-        {props.selectedItem.provider && (
+        <Title headingLevel="h4">{selectedItem.name}</Title>
+        {selectedItem.provider && (
           <span className="ocs-quick-search-details__provider">
             {t('console-shared~Provided by {{provider}}', {
-              provider: props.selectedItem.provider,
+              provider: selectedItem.provider,
             })}
           </span>
         )}
@@ -46,22 +52,30 @@ const QuickSearchDetails: FC<QuickSearchDetailsProps> = ({
           className="ocs-quick-search-details__form-button"
           data-test="create-quick-search"
           onClick={(e) => {
-            handleCta(e, props.selectedItem, props.closeModal, fireTelemetryEvent);
+            handleCta(
+              e,
+              selectedItem,
+              closeModal,
+              fireTelemetryEvent,
+              navigate,
+              removeQueryArgument,
+            );
           }}
         >
-          {props.selectedItem.cta.label}
+          {selectedItem.cta.label}
         </Button>
         <Content className="ocs-quick-search-details__description">
-          {props.selectedItem.description}
+          {selectedItem.description}
         </Content>
       </>
     );
   };
-  const detailsContentRenderer: DetailsRendererFunction = detailsRenderer ?? defaultContentRenderer;
 
   return (
     <div className="ocs-quick-search-details">
-      {detailsContentRenderer({ selectedItem, closeModal })}
+      {detailsRenderer
+        ? detailsRenderer({ selectedItem, closeModal, navigate, removeQueryArgument })
+        : defaultContentRenderer()}
     </div>
   );
 };

frontend/packages/console-shared/src/components/quick-search/QuickSearchList.tsx

@@ -14,9 +14,10 @@ import {
 } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link, useNavigate } from 'react-router-dom-v5-compat';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
 import { getImageForIconClass } from '@console/internal/components/catalog/catalog-item-icon';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { useTelemetry } from '../../hooks/useTelemetry';
 import { CatalogType, getIconProps } from '../catalog';
 import { CatalogLinkData } from './utils/quick-search-types';
@@ -48,6 +49,8 @@ const QuickSearchList: FC<QuickSearchListProps> = ({
   onListChange,
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { removeQueryArgument } = useQueryParamsMutator();
   const fireTelemetryEvent = useTelemetry();
   const [itemsCount, setItemsCount] = useState<number>(limitItemCount || listItems.length);
   const listHeight = document.querySelector('.ocs-quick-search-list__list')?.clientHeight || 0;
@@ -105,7 +108,9 @@ const QuickSearchList: FC<QuickSearchListProps> = ({
                 'ocs-quick-search-list__item--highlight': item.uid === selectedItemId,
               })}
               onDoubleClick={(e: SyntheticEvent) => {
-                handleCta(e, item, closeModal, fireTelemetryEvent);
+                if (item.cta) {
+                  handleCta(e, item, closeModal, fireTelemetryEvent, navigate, removeQueryArgument);
+                }
               }}
             >
               <DataListItemRow className="ocs-quick-search-list__item-row">

frontend/packages/console-shared/src/components/quick-search/QuickSearchModalBody.tsx

@@ -1,13 +1,9 @@
 import type { ReactNode, FC, FormEvent } from 'react';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ModalBody, ModalHeader } from '@patternfly/react-core';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
-import {
-  getQueryArgument,
-  removeQueryArgument,
-  setQueryArgument,
-  history,
-} from '@console/internal/components/utils/router';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { useTelemetry } from '../../hooks/useTelemetry';
 import { CatalogType } from '../catalog';
 import QuickSearchBar from './QuickSearchBar';
@@ -37,6 +33,8 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
   icon,
   detailsRenderer,
 }) => {
+  const { getQueryArgument, setQueryArgument, removeQueryArgument } = useQueryParamsMutator();
+  const navigate = useNavigate();
   const [catalogItems, setCatalogItems] = useState<CatalogItem[]>(null);
   const [catalogTypes, setCatalogTypes] = useState<CatalogType[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>(getQueryArgument('catalogSearch') || '');
@@ -81,7 +79,7 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
       setSelectedItemId('');
       setSelectedItem(null);
     },
-    [searchCatalog],
+    [searchCatalog, setQueryArgument, removeQueryArgument],
   );
 
   const onCancel = useCallback(() => {
@@ -104,12 +102,12 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
       const { id } = document.activeElement;
       const activeViewAllLink = viewAll?.find((link) => link.catalogType === id);
       if (activeViewAllLink) {
-        history.push(activeViewAllLink.to);
+        navigate(activeViewAllLink.to);
       } else if (selectedItem) {
-        handleCta(e, selectedItem, closeModal, fireTelemetryEvent);
+        handleCta(e, selectedItem, closeModal, fireTelemetryEvent, navigate, removeQueryArgument);
       }
     },
-    [closeModal, fireTelemetryEvent, selectedItem, viewAll],
+    [closeModal, fireTelemetryEvent, selectedItem, viewAll, navigate, removeQueryArgument],
   );
 
   const selectPrevious = useCallback(() => {

frontend/packages/console-shared/src/components/quick-search/utils/quick-search-utils.tsx

@@ -1,6 +1,5 @@
 import type { SyntheticEvent } from 'react';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
-import { history, removeQueryArgument } from '@console/internal/components/utils/router';
 import { keywordCompare } from '../../catalog';
 
 export const quickSearch = (items: CatalogItem[], query: string) => {
@@ -12,6 +11,8 @@ export const handleCta = async (
   item: CatalogItem,
   closeModal: () => void,
   fireTelemetryEvent: (event: string, properties?: {}) => void,
+  navigate: (url: string) => void,
+  removeQueryArg: (key: string) => void,
   callbackProps: { [key: string]: string } = {},
 ) => {
   e.preventDefault();
@@ -24,6 +25,6 @@ export const handleCta = async (
     });
     closeModal();
     await callback(callbackProps);
-    removeQueryArgument('catalogSearch');
-  } else history.push(href);
+    removeQueryArg('catalogSearch');
+  } else navigate(href);
 };

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/views/operator.view.ts

@@ -93,6 +93,8 @@ export const operator = {
     projectDropdown.shouldContain(installedNamespace);
     operator.filterByName(operatorName);
     listPage.rows.countShouldBe(1);
+    // TODO: figure out why this arbitrary wait is needed
+    cy.wait(3000);
     cy.byTestOperatorRow(operatorName).should('exist');
     cy.byTestOperatorRow(operatorName).click();
   },

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-channel-version-select.tsx

@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { setQueryArgument } from '@console/internal/components/utils';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import { alphanumericCompare } from '@console/shared';
 import { PackageManifestKind } from '../../types';
 import { DeprecatedOperatorWarningIcon } from '../deprecated-operator-warnings/deprecated-operator-warnings';
@@ -23,6 +23,7 @@ export const OperatorChannelSelect: FC<OperatorChannelSelectProps> = ({
   setUpdateVersion,
 }) => {
   const { t } = useTranslation();
+  const { setQueryArgument } = useQueryParamsMutator();
   const channels = useMemo(() => packageManifest?.status.channels ?? [], [packageManifest]);
   const [isChannelSelectOpen, setIsChannelSelectOpen] = useState(false);
   const { setDeprecatedChannel } = useDeprecatedOperatorWarnings();
@@ -63,7 +64,7 @@ export const OperatorChannelSelect: FC<OperatorChannelSelectProps> = ({
         'deprecation',
       ),
     );
-  }, [selectedChannel, channels, setDeprecatedChannel]);
+  }, [selectedChannel, channels, setDeprecatedChannel, setQueryArgument]);
 
   return (
     <>
@@ -113,6 +114,7 @@ export const OperatorVersionSelect: FC<OperatorVersionSelectProps> = ({
   showVersionAlert = false,
 }) => {
   const { t } = useTranslation();
+  const { setQueryArgument } = useQueryParamsMutator();
   const { setDeprecatedVersion } = useDeprecatedOperatorWarnings();
   const [isVersionSelectOpen, setIsVersionSelectOpen] = useState(false);
   const [defaultVersionForChannel, setDefaultVersionForChannel] = useState('-');
@@ -163,7 +165,7 @@ export const OperatorVersionSelect: FC<OperatorVersionSelectProps> = ({
         'deprecation',
       ),
     );
-  }, [selectedUpdateVersion, selectedChannelVersions, setDeprecatedVersion]);
+  }, [selectedUpdateVersion, selectedChannelVersions, setDeprecatedVersion, setQueryArgument]);
 
   return (
     <>

frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx

@@ -44,7 +44,7 @@ import {
   ResourceSummary,
   SectionHeading,
 } from '@console/internal/components/utils';
-import { removeQueryArgument } from '@console/internal/components/utils/router';
+import { useQueryParamsMutator } from '@console/internal/components/utils/router';
 import {
   k8sGet,
   k8sKill,
@@ -419,6 +419,7 @@ export const SubscriptionDetails: FC<SubscriptionDetailsProps> = ({
   subscriptions = [],
 }) => {
   const { t } = useTranslation();
+  const { removeQueryArgument } = useQueryParamsMutator();
   const { source, sourceNamespace } = obj?.spec ?? {};
   const catalogHealth = obj?.status?.catalogHealth?.find(
     (ch) => ch.catalogSourceRef.name === source,

frontend/packages/topology/src/__tests__/TopologyPage.spec.tsx

@@ -1,5 +1,6 @@
 import { configure, render, screen } from '@testing-library/react';
 import * as Router from 'react-router-dom-v5-compat';
+import * as RouterUtils from '@console/internal/components/utils/router';
 import { useQueryParams, useUserSettingsCompatibility } from '@console/shared/src';
 import { TopologyPage } from '../components/page/TopologyPage';
 import { TopologyViewType } from '../topology-types';
@@ -41,6 +42,11 @@ jest.mock('react-router-dom-v5-compat', () => ({
   useParams: jest.fn(),
 }));
 
+jest.mock('@console/internal/components/utils/router', () => ({
+  ...jest.requireActual('@console/internal/components/utils/router'),
+  useQueryParamsMutator: jest.fn(),
+}));
+
 jest.mock('../filters/FilterProvider', () => ({
   ...jest.requireActual('../filters/FilterProvider'),
   FilterProvider: 'FilterProvider',
@@ -66,6 +72,17 @@ describe('TopologyPage view logic', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (Router.useParams as jest.Mock).mockReturnValue({ name: 'default' });
+
+    // Mock useQueryParamsMutator
+    (RouterUtils.useQueryParamsMutator as jest.Mock).mockReturnValue({
+      getQueryArgument: jest.fn(),
+      setQueryArgument: jest.fn(),
+      setQueryArguments: jest.fn(),
+      setAllQueryArguments: jest.fn(),
+      removeQueryArgument: jest.fn(),
+      removeQueryArguments: jest.fn(),
+      setOrRemoveQueryArgument: jest.fn(),
+    });
   });
 
   it('should default to graph view', () => {