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

Replace direct history object usage with React Router v6/v7 compatible
hooks to prepare for react-router v7 upgrade.

## Key Changes

### New Hook API (public/components/utils/router.ts)

**useQueryParamsMutator()**
- Returns 7 query parameter mutation functions using useSearchParams()
- Preserves URL hash and location state during updates
- Only triggers updates when values actually change (optimization)
- Uses replace mode to avoid polluting browser history

**useRouterPush()**
- Replacement for direct history.push() calls
- Uses useNavigate() from react-router-dom-v5-compat

### Migration Pattern

Components now import and use hooks instead of utility functions:

**Before:**
```typescript
import { setQueryArgument } from '@console/internal/components/utils/router';

const MyComponent = () => {
  const onClick = () => setQueryArgument('key', 'value');
  return <button onClick={onClick}>Click</button>;
};
```

**After:**
```typescript
import { useQueryParamsMutator } from '@console/internal/components/utils/router';

const MyComponent = () => {
  const { setQueryArgument } = useQueryParamsMutator();
  const onClick = () => setQueryArgument('key', 'value');
  return <button onClick={onClick}>Click</button>;
};
```

## Files Migrated (19 of 20)

### Easy Conversions (14 files)
- public/components/useRowFilterFix.ts
- public/components/useLabelSelectionFix.ts
- public/components/useSearchFilters.ts
- 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
- packages/console-app/src/components/nodes/NodeLogs.tsx
- packages/console-shared/src/components/catalog/CatalogController.tsx
- packages/topology/src/components/page/TopologyPage.tsx
- packages/topology/src/components/page/TopologyView.tsx
- packages/operator-lifecycle-manager/src/components/subscription.tsx
- packages/operator-lifecycle-manager/src/components/operator-hub/operator-channel-version-select.tsx

### Complex Migrations (5 files)

**QuickSearch component tree** - Required prop drilling navigate/removeQueryArgument:
- packages/console-shared/src/components/quick-search/QuickSearchModalBody.tsx
- packages/console-shared/src/components/quick-search/QuickSearchContent.tsx
- packages/console-shared/src/components/quick-search/QuickSearchList.tsx
- packages/console-shared/src/components/quick-search/QuickSearchDetails.tsx
- packages/console-shared/src/components/quick-search/utils/quick-search-utils.tsx

**TopologyFilterBar** - Replaced utility functions with direct hook usage:
- packages/topology/src/filters/TopologyFilterBar.tsx
- packages/topology/src/filters/filter-utils.ts (removed deprecated functions)

## Testing

**Unit Tests:**
- Added comprehensive tests for new hooks (public/components/utils/__tests__/router-hooks.spec.tsx)
- All existing tests pass (20/20 ✓)

**Type Safety:**
- Zero TypeScript errors
- All TSDoc warnings fixed

**Code Quality:**
- ESLint pre-commit hooks pass
- Dependency arrays updated correctly

## Remaining Work

- 1 file remains: public/components/pod-logs.jsx (class → functional component conversion)
- Manual testing of key user flows
- Remove deprecated functions after all migrations complete

## Related

- Epic: CONSOLE-4392 (Upgrade to react-router v7)
- PR: #15956

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

Author: rhamilto

CONSOLE-4990-PROGRESS.md

@@ -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-app/src/components/nodes/NodeLogs.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/catalog/CatalogController.tsx

@@ -21,6 +21,8 @@ interface QuickSearchContentProps {
   closeModal: () => void;
   detailsRenderer?: DetailsRendererFunction;
   onListChange?: (items: number) => void;
+  navigate: (url: string) => void;
+  removeQueryArgument: (key: string) => void;
 }
 
 const QuickSearchContent: FC<QuickSearchContentProps> = ({
@@ -36,6 +38,8 @@ const QuickSearchContent: FC<QuickSearchContentProps> = ({
   limitItemCount,
   detailsRenderer,
   onListChange,
+  navigate,
+  removeQueryArgument,
 }) => {
   return (
     <Split className="ocs-quick-search-content" tabIndex={-1}>
@@ -55,6 +59,8 @@ const QuickSearchContent: FC<QuickSearchContentProps> = ({
           onSelectListItem={(_event, itemId) => onSelect(itemId)}
           closeModal={closeModal}
           onListChange={onListChange}
+          navigate={navigate}
+          removeQueryArgument={removeQueryArgument}
         />
       </SplitItem>
       <Divider component="div" orientation={{ default: 'vertical' }} tabIndex={-1} />
@@ -63,6 +69,8 @@ const QuickSearchContent: FC<QuickSearchContentProps> = ({
           detailsRenderer={detailsRenderer}
           selectedItem={selectedItem}
           closeModal={closeModal}
+          navigate={navigate}
+          removeQueryArgument={removeQueryArgument}
         />
       </SplitItem>
     </Split>

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

@@ -11,6 +11,8 @@ 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 {
@@ -21,6 +23,8 @@ const QuickSearchDetails: FC<QuickSearchDetailsProps> = ({
   selectedItem,
   closeModal,
   detailsRenderer,
+  navigate,
+  removeQueryArgument,
 }) => {
   const { t } = useTranslation();
   const fireTelemetryEvent = useTelemetry();
@@ -46,7 +50,14 @@ 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,
+              props.selectedItem,
+              props.closeModal,
+              fireTelemetryEvent,
+              props.navigate,
+              props.removeQueryArgument,
+            );
           }}
         >
           {props.selectedItem.cta.label}
@@ -61,7 +72,7 @@ const QuickSearchDetails: FC<QuickSearchDetailsProps> = ({
 
   return (
     <div className="ocs-quick-search-details">
-      {detailsContentRenderer({ selectedItem, closeModal })}
+      {detailsContentRenderer({ selectedItem, closeModal, navigate, removeQueryArgument })}
     </div>
   );
 };

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

@@ -35,6 +35,8 @@ interface QuickSearchListProps {
   onSelectListItem: DataListProps['onSelectDataListItem'];
   onListChange?: (items: number) => void;
   closeModal: () => void;
+  navigate: (url: string) => void;
+  removeQueryArgument: (key: string) => void;
 }
 
 const QuickSearchList: FC<QuickSearchListProps> = ({
@@ -46,6 +48,8 @@ const QuickSearchList: FC<QuickSearchListProps> = ({
   closeModal,
   limitItemCount,
   onListChange,
+  navigate,
+  removeQueryArgument,
 }) => {
   const { t } = useTranslation();
   const fireTelemetryEvent = useTelemetry();
@@ -105,7 +109,7 @@ const QuickSearchList: FC<QuickSearchListProps> = ({
                 'ocs-quick-search-list__item--highlight': item.uid === selectedItemId,
               })}
               onDoubleClick={(e: SyntheticEvent) => {
-                handleCta(e, item, closeModal, fireTelemetryEvent);
+                handleCta(e, item, closeModal, fireTelemetryEvent, navigate, removeQueryArgument);
               }}
             >
               <DataListItemRow className="ocs-quick-search-list__item-row">

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

@@ -2,12 +2,7 @@ import type { ReactNode, FC, FormEvent } from 'react';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ModalBody, ModalHeader } from '@patternfly/react-core';
 import { CatalogItem } from '@console/dynamic-plugin-sdk';
-import {
-  getQueryArgument,
-  removeQueryArgument,
-  setQueryArgument,
-  history,
-} from '@console/internal/components/utils/router';
+import { useQueryParamsMutator, useRouterPush } from '@console/internal/components/utils/router';
 import { useTelemetry } from '../../hooks/useTelemetry';
 import { CatalogType } from '../catalog';
 import QuickSearchBar from './QuickSearchBar';
@@ -37,6 +32,8 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
   icon,
   detailsRenderer,
 }) => {
+  const { getQueryArgument, setQueryArgument, removeQueryArgument } = useQueryParamsMutator();
+  const navigate = useRouterPush();
   const [catalogItems, setCatalogItems] = useState<CatalogItem[]>(null);
   const [catalogTypes, setCatalogTypes] = useState<CatalogType[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>(getQueryArgument('catalogSearch') || '');
@@ -81,7 +78,7 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
       setSelectedItemId('');
       setSelectedItem(null);
     },
-    [searchCatalog],
+    [searchCatalog, setQueryArgument, removeQueryArgument],
   );
 
   const onCancel = useCallback(() => {
@@ -104,12 +101,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(() => {
@@ -198,6 +195,8 @@ const QuickSearchModalBody: FC<QuickSearchModalBodyProps> = ({
             limitItemCount={limitItemCount}
             detailsRenderer={detailsRenderer}
             onListChange={handleListChange}
+            navigate={navigate}
+            removeQueryArgument={removeQueryArgument}
             onSelect={(itemId) => {
               setSelectedItemId(itemId);
               setSelectedItem(catalogItems?.find((item) => item.uid === itemId));

frontend/packages/console-shared/src/components/quick-search/QuickSearchModalBody.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/console-shared/src/components/quick-search/utils/quick-search-utils.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/operator-hub/operator-channel-version-select.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,