CONSOLE-4990: Migrate from history object to React Router v6/v7 hooks#15956
Open
rhamilto wants to merge 1 commit intoopenshift:mainfrom
Open
CONSOLE-4990: Migrate from history object to React Router v6/v7 hooks#15956rhamilto wants to merge 1 commit intoopenshift:mainfrom
rhamilto wants to merge 1 commit intoopenshift:mainfrom
Conversation
openshift-ci-robot
added
the
jira/valid-reference
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
openshift-ci
bot
added
the
do-not-merge/work-in-progress
Contributor
|
Skipping CI for Draft Pull Request. |
openshift-ci
bot
added
component/core
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
b07637c to
ab42d3d
Compare
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
ab42d3d to
d73bffe
Compare
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
d73bffe to
329e981
Compare
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
2 times, most recently
from
329e981 to
2b47c8e
Compare
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
2b47c8e to
eba5379
Compare
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
eba5379 to
265c9d9
Compare
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
1 similar comment
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
rhamilto
added a commit
to rhamilto/console
that referenced
this pull request
Jan 29, 2026
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: openshift#15956
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
openshift-ci-robot
removed
the
verified
Member
Author
|
/verified by @yapei |
openshift-ci-robot
added
the
verified
Contributor
|
@rhamilto: This PR has been marked as verified by DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
9a8dd02 to
eb769df
Compare
openshift-ci-robot
removed
the
verified
rhamilto
force-pushed
the
CONSOLE-4990
branch
2 times, most recently
from
9a8dd02 to
b5e3987
Compare
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
1 similar comment
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
Member
Author
|
@yapei, I had to push some changes and found the following bug Mind re-verifying? |
Member
Author
Latest UpdatesAddressed review feedback and fixed additional bugs: 1. Fixed
|
Contributor
|
@rhamilto: This pull request references CONSOLE-4990 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
Contributor
|
/lgtm |
Contributor
|
it looks like pod logs can not be successfully loaded, others are working well |
Member
Author
That is very strange. It seems to be working fine for me. Can you try again? Screen.Recording.2026-02-05.at.8.07.02.AM.mov |
Member
Author
|
/retest |
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>
rhamilto
force-pushed
the
CONSOLE-4990
branch
from
b5e3987 to
23ae6dd
Compare
rhamilto
commented
Feb 5, 2026
| projectDropdown.shouldContain(installedNamespace); | ||
| operator.filterByName(operatorName); | ||
| listPage.rows.countShouldBe(1); | ||
| // TODO: figure out why this arbitrary wait is needed |
Member
Author
There was a problem hiding this comment.
This is a workaround we are using in a number of places within Cypress tests. It's far from ideal, but a proper fix feels like it's out of scope of this PR. To my knowledge, there is nothing specific within the PR that would be creating the need for this.
Member
Author
|
/retest |
Contributor
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: jhadvig, logonoff, rhamilto, vojtechszocs The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
Contributor
|
@rhamilto: all tests passed! Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates from direct
historyobject usage to React Router v6/v7 compatible hook-based patterns as part of the React Router v7 upgrade effort.Core Implementation
New
useQueryParamsMutator()HooksetQueryArgument,setQueryArguments,setAllQueryArguments,removeQueryArgument,removeQueryArguments,setOrRemoveQueryArgument)useSearchParams()fromreact-router-dom-v5-compatuseRefpattern - prevents unnecessary re-renders and eliminates dependency array workaroundsreplace: trueto avoid polluting browser historylocation.hashandlocation.stateon all mutationsrouter-hooks.spec.tsxMigration Scope
19 Files Migrated:
Easy conversions (added hook call, updated imports):
public/components/filter-toolbar.tsxpublic/components/search.tsxpublic/components/api-explorer.tsxpublic/components/cluster-settings/cluster-settings.tsxpublic/components/namespace-bar.tsxpublic/components/useRowFilterFix.tspublic/components/useLabelSelectionFix.tspublic/components/useSearchFilters.tspackages/topology/src/components/page/TopologyPage.tsxpackages/topology/src/components/page/TopologyView.tsxpackages/topology/src/filters/TopologyFilterBar.tsxpackages/console-shared/src/components/catalog/CatalogController.tsxpackages/operator-lifecycle-manager/src/components/subscription.tsxpackages/operator-lifecycle-manager/src/components/operator-hub/operator-channel-version-select.tsxpackages/console-app/src/components/nodes/NodeLogs.tsxComplex refactors:
pod-logs.jsx- Functional wrapper pattern to inject hooks without class conversionfilter-utils.ts- Removed deprecated functions, moved logic to TopologyFilterBarQuickSearchModalBody.tsx+ 4 files - Replacedhistory.push()withuseNavigate()Bug Fixes
removeQueryArguments()to atomically remove multiple paramsgetQueryArgumentreference stability issue in TopologyPageuseEffectby implementingsearchParamsRefpattern (stable function references)Code Cleanup
router.tsuseRouterPushhook (useuseNavigate()directly)location.statefromsetSearchParamscalls (React Router preserves state automatically withreplace: true)Test Improvements
useQueryParamsMutatordirectly instead of low-level router hooks (better abstraction, more maintainable)What Remains
The
historyobject export is kept as it's still used by:app.tsxRelated
Part of React Router v7 upgrade effort (CONSOLE-4990)