CONSOLE-4990: Replace history object navigation with useNavigate hook by rhamilto · Pull Request #15959 · openshift/console

rhamilto · 2026-01-29T19:04:54Z

Summary

This PR completes the migration from the deprecated history object to React Router's useNavigate hook across all remaining packages in the OpenShift Console frontend.

Changes

This PR migrates all remaining instances of the deprecated history object to use the useNavigate hook from react-router-dom-v5-compat, except for:

public/components/app.tsx (will be handled in CONSOLE-4392)
public/components/factory/modal.tsx (will be handled in CONSOLE-5012)

Packages Migrated

console-app
- Updated navigation patterns to use useNavigate hook
console-shared
- Updated navigation patterns to use useNavigate hook
- Updated catalog-utils.tsx to use NavigateFunction type for DRY principles
- ErrorBoundary fix: Changed from using location.pathname as a key prop (which caused component remounting on every URL change) to passing it as a regular prop and using componentDidUpdate to reset error state only when there's an active error AND the location changes. This prevents unnecessary component remounting during tab navigation.
dev-console
- ProjectAccess.tsx: Replace history.goBack with navigate(-1)
- ProjectAccess.spec.tsx: Updated test mocks (removed obsolete history mock, added useNavigate mock)
- ProjectDetailsPage.tsx: Added NavigateFunction type for consistency
- ProjectDetailsPage.spec.tsx: Updated to use renderWithProviders utility
- EditApplication.tsx, ImportForm.tsx: Removed unnecessary return statements before handleRedirect()
- import-submit-utils.ts: Changed to type-only import for NavigateFunction
knative-plugin
- DeleteRevisionModalController.tsx: Replace history.push() with navigate()
- FunctionDetailsPage.tsx: Use generatePath() for safer route parameter interpolation
- CreateKnatifyPage.tsx: Removed unnecessary return statement before handleRedirect()
helm-plugin
- Updated navigation patterns to use useNavigate hook
- HelmReleaseDetailsPage.tsx: Wrapped handleNamespaceChange in useCallback for performance optimization
operator-lifecycle-manager
- create-catalog-source.tsx: Replace history.goBack with navigate(-1)
- operator-hub-items.tsx: Replace history.replace with navigate
- operator-hub-subscribe.tsx: Replace history.push with navigate
- install-plan.tsx: Replace history.push with navigate
- uninstall-operator-modal.tsx: Replace history.push with navigate
- operand-form.tsx: Replace history.push/replace/goBack with navigate equivalents
- DEPRECATED_operand-form.tsx: Replace history.push/goBack with navigate equivalents
- subscription.tsx: Replace history.push with navigate
metal3-plugin
- AddBareMetalHost.tsx: Replace history.push() with navigate()
public/components
- attach-storage.tsx: Removed unused history: History type definition
console-dynamic-plugin-sdk
- console-types.ts: Changed to type-only import for To type from React Router
- Updated release notes with migration guide for history package to React Router types

Code Quality Improvements

Based on PR review feedback:

Type-only imports: Changed to import type syntax where appropriate for better TypeScript practices
DRY principles: Replaced inline function types with NavigateFunction type for consistency
Performance optimization: Added useCallback wrapper for namespace change handlers
Safer path construction: Used generatePath() for route parameter interpolation to prevent potential path traversal issues
Test improvements: Updated tests to use renderWithProviders utility for better test consistency
Code cleanup: Removed unnecessary return statements from void-returning functions

Test Updates

Updated ProjectAccess.spec.tsx to remove the obsolete history mock and add proper useNavigate mock
Updated ProjectDetailsPage.spec.tsx to use renderWithProviders utility instead of manual MemoryRouter wrapping

Migration Patterns Used

All migrations follow the established patterns:

history.push(path) → navigate(path)
history.replace(path) → navigate(path, { replace: true })
history.goBack() → navigate(-1)
Added useNavigate() hook imports from react-router-dom-v5-compat
Updated component implementations to use the navigate function
Used NavigateFunction type for function parameters
Used generatePath() for parameterized routes

Commit Structure

The commits are organized by package for easier review:

CONSOLE-4990: Migrate console-app to useNavigate hook
CONSOLE-4990: Migrate console-shared to useNavigate hook
CONSOLE-4990: Migrate dev-console to useNavigate hook
CONSOLE-4990: Migrate knative-plugin to useNavigate hook
CONSOLE-4990: Migrate helm-plugin to useNavigate hook
CONSOLE-4990: Migrate operator-lifecycle-manager to useNavigate hook
CONSOLE-4990: Migrate remaining packages to useNavigate hook
CONSOLE-4990: Replace history types with React Router types

Bug Fix

Fixed resource tab navigation causing full page reloads (#15959 (comment))

The ErrorBoundary component was using location.pathname as a key prop, which caused the entire component tree to remount whenever the URL changed. This resulted in:

Components unmounting and remounting when switching between resource tabs (Details → YAML → Events)
Unnecessary data refetching
Loss of component state

Solution: Changed to pass locationPathname as a prop and use componentDidUpdate to reset error state only when there's an active error AND the location changes. This preserves the error reset behavior while avoiding unnecessary remounts.

Related Issues

Relates to CONSOLE-4990
Relates to CONSOLE-5012 (modal.tsx migration)

Testing

All modified components have been updated to use useNavigate() hook
Test files updated to properly mock the new hook
No functional changes to navigation behavior
All existing navigation patterns preserved
ErrorBoundary tests pass with new implementation
Code quality improvements applied based on review feedback

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

openshift-ci · 2026-01-29T19:05:03Z

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

openshift-ci-robot · 2026-01-29T19:05:05Z

@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.

Details

In response to this:

Summary

Migrates all programmatic navigation from the deprecated history object to the React Router v6/v7 compatible useNavigate hook as part of the React Router v7 upgrade effort.

Epic: CONSOLE-4392 - Upgrade to react-router v7

Related PR: #15956 (Query parameter management migration)

Changes Overview

This PR migrates 54 files across 9 packages, organized into 6 commits by package for easier review.

Migration Pattern

Before:
import { history } from '@console/internal/components/utils/router';

const MyComponent = () => {
 const navigate = () => history.push('/path');
 const goBack = () => history.goBack();
 return <button onClick={navigate}>Navigate</button>;
};
After:
import { useNavigate } from 'react-router-dom-v5-compat';

const MyComponent = () => {
 const navigate = useNavigate();
 const handleNavigate = () => navigate('/path');
 const goBack = () => navigate(-1);
 return <button onClick={handleNavigate}>Navigate</button>;
};
Changes by Package

1. console-app (9 files)

cronjob-factory.ts - Converted to dependency injection pattern

cronjob-provider.ts - Use navigate in action creator

7 component files - Standard migration pattern

Key Pattern: Dependency injection for action creators

2. console-shared (8 files)

error-boundary.tsx - Used key prop pattern for location-based reset

catalog-utils.tsx - Utility file with parameter injection

6 component files - Standard migration pattern

Key Patterns:

Key prop for class component reset on navigation

Parameter injection for utility functions

3. dev-console (17 files)

import-submit-utils.ts - Updated to accept NavigateFunction

jar-file-upload-utils.ts - Utility with parameter injection

add-page-utils.ts - Utility with parameter injection

14 component files - Standard migration pattern

Key Pattern: Dependency injection for shared utility functions

4. knative-plugin (8 files)

create-eventsources-utils.ts - Utility with parameter injection

7 component files - Standard migration pattern

5. helm-plugin (5 files)

All component files - Standard migration pattern

6. Other packages (6 files)

operator-lifecycle-manager (2 files)

topology (1 file)

shipwright-plugin (1 file)

metal3-plugin (1 file)

public (1 file)

Replacements Made

history.push(path) → navigate(path)

history.replace(path) → navigate(path, { replace: true })

history.goBack() → navigate(-1)

Testing

✅ TypeScript compilation: 0 errors

✅ ESLint pre-commit hooks: Passing for all commits

✅ No remaining history imports for programmatic navigation

✅ All 54 files successfully migrated

What Remains

The history object export is intentionally kept in router.ts as it's still used by:

Router component initialization in app.tsx

Monkey-patching for base path handling (removeBasePath)

Will be removed in a future PR as part of the final React Router v7 migration

Commit Structure

Each commit is scoped to a single package for easier review:

CONSOLE-4990: Migrate console-app to useNavigate hook

CONSOLE-4990: Migrate console-shared to useNavigate hook

CONSOLE-4990: Migrate dev-console to useNavigate hook

CONSOLE-4990: Migrate knative-plugin to useNavigate hook

CONSOLE-4990: Migrate helm-plugin to useNavigate hook

CONSOLE-4990: Migrate remaining packages to useNavigate hook

Related Issues

Part of CONSOLE-4392 - React Router v7 upgrade epic

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 · 2026-01-29T19:06:18Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rhamilto

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

frontend/packages/console-app/src/actions/providers/cronjob-provider.ts

frontend/packages/console-shared/src/components/dynamic-form/index.tsx

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

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

frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx

openshift-ci-robot · 2026-01-29T21:55:51Z

@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.

Details

In response to this:

Summary

Migrates all programmatic navigation from the deprecated history object to the React Router v6/v7 compatible useNavigate hook as part of the React Router v7 upgrade effort.

Epic: CONSOLE-4392 - Upgrade to react-router v7

Changes Overview

This PR migrates 81 files across multiple packages, organized into 7 commits by package for easier review.

Migration Patterns

1. Basic Navigation Migration

Before:
import { history } from '@console/internal/components/utils/router';

const MyComponent = () => {
 const navigate = () => history.push('/path');
 const goBack = () => history.goBack();
 return <button onClick={navigate}>Navigate</button>;
};
After:
import { useNavigate } from 'react-router-dom-v5-compat';
import { useCallback } from 'react';

const MyComponent = () => {
 const navigate = useNavigate();
 const handleNavigate = useCallback(() => navigate('/path'), [navigate]);
 const handleCancel = useCallback(() => navigate(-1), [navigate]);
 return <button onClick={handleNavigate}>Navigate</button>;
};
2. Utility Function Pattern (Dependency Injection)

Before:
import { history } from '@console/internal/components/utils/router';

export const navigateToResource = (path: string) => {
 history.push(path);
};
After:
type NavigateFunction = (to: string, options?: { replace?: boolean }) => void;

export const navigateToResource = (path: string, navigate: NavigateFunction) => {
 navigate(path);
};
3. Query Parameter Management

All query parameter mutations now use the new useQueryParamsMutator hook (introduced in the first commit):
const { getQueryArgument, setQueryArgument, removeQueryArgument } = useQueryParamsMutator();
Key Improvements

✅ Performance Optimization: All navigation callbacks properly wrapped in useCallback to prevent unnecessary re-renders
✅ Dependency Injection: Utility functions accept navigate as a parameter for better testability
✅ Type Safety: Proper TypeScript typing with NavigateFunction throughout
✅ Comprehensive Testing: 251 lines of tests for the new useQueryParamsMutator hook

Changes by Commit

1. 9215732b94 - Core Infrastructure Migration

New Hook: useQueryParamsMutator with comprehensive API

Test Coverage: 251 lines of unit tests

Pattern: Functional wrapper for class components (PodLogs)

Files: 8 core files including router utilities

2. 0b76e669fc - console-app Migration

Files: 12 files

Key Pattern: Dependency injection for cronjob-factory

New Hook: Foundation for useCronJobActions (completed in commit 7)

3. d39392028f - console-shared Migration

Files: 13 files

Key Patterns:

Key prop for ErrorBoundary reset on navigation

Parameter injection for catalog utilities

All callbacks properly memoized with useCallback

4. 7ba04a6760 - dev-console Migration

Files: 18 files

Key Pattern: Dependency injection for import/jar utilities

Consistency: All form cancel handlers use useCallback(() => navigate(-1), [navigate])

5. 85e900fdbe - knative-plugin Migration

Files: 8 files

Key Pattern: Dependency injection for create-eventsources-utils

Consistency: All callbacks properly wrapped in useCallback

6. def35a3651 - helm-plugin Migration

Files: 5 files

Key Pattern: Complex navigation logic with multiple paths

Consistency: All callbacks properly wrapped in useCallback

7. 4c78f4b1d0 - Remaining Packages + Advanced Patterns

Files: 10 files

New Hook: useCronJobActions with excellent design patterns

Packages: operator-lifecycle-manager, topology, shipwright, metal3, public

Advanced: Refactored operator-hub-items to use useQueryParamsMutator

Replacements Made

history.push(path) → navigate(path)

history.replace(path) → navigate(path, { replace: true })

history.goBack() → navigate(-1)

All inline navigation callbacks → wrapped in useCallback with proper dependencies

Code Quality

✅ Consistent Patterns: All 81 files follow the same migration patterns
✅ useCallback Usage: Every navigation callback properly memoized
✅ Dependency Arrays: All callbacks have correct dependency arrays
✅ Type Safety: Proper TypeScript types throughout
✅ Documentation: JSDoc for complex hooks (e.g., useCronJobActions)
✅ Testing: Comprehensive test coverage for new utilities

Testing

✅ TypeScript compilation: 0 errors

✅ ESLint pre-commit hooks: Passing for all commits

✅ All useCallback dependencies validated by react-hooks/exhaustive-deps

✅ Unit tests: 251 lines of comprehensive tests for useQueryParamsMutator

✅ All 81 files successfully migrated

What Remains

The history object export is intentionally kept in router.ts as it's still used by:

Router component initialization in app.tsx

Monkey-patching for base path handling (removeBasePath)

Legacy getQueryArgument function (marked @deprecated, 28+ usages to migrate separately)

These will be removed in future PRs as part of the final React Router v7 migration.

Commit Structure

Each commit is scoped to a package/layer for easier review:

Core Infrastructure: useQueryParamsMutator hook + tests

console-app: Action creators and components

console-shared: Shared utilities and components

dev-console: Developer console package

knative-plugin: Knative serverless plugin

helm-plugin: Helm chart plugin

Remaining packages: operator-lifecycle-manager, topology, shipwright, metal3, public

Review Notes

This migration has been thoroughly reviewed for:

✅ Correct migration patterns

✅ useCallback consistency and correctness

✅ Dependency injection for utilities

✅ Type safety

✅ Performance optimization

✅ Test coverage

Status: Ready for final review and merge

Related Issues

Part of CONSOLE-4392 - React Router v7 upgrade epic

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-robot · 2026-02-11T12:20:57Z

@rhamilto: The /verified command must be used with one of the following actions: by, later, remove, or bypass. See https://docs.ci.openshift.org/docs/architecture/jira/#premerge-verification for more information.

Details

In response to this:

Pushed a test fix.
/verified

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 · 2026-02-11T12:21:11Z

/verified by @rhamilto

openshift-ci-robot · 2026-02-11T12:21:25Z

@rhamilto: This PR has been marked as verified by @rhamilto.

Details

In response to this:

/verified by @rhamilto

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 · 2026-02-11T16:52:43Z

/retest

rhamilto · 2026-02-12T09:12:24Z

tech debt
/label px-approved
/label docs-approved
/assign @jhadvig

rhamilto · 2026-02-17T15:47:44Z

/label acknowledge-critical-fixes-only

logonoff

good stuff! here are a bunch of nitpicks

logonoff · 2026-02-17T15:51:13Z

frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md

+## Migration from `history` package to React Router types
+
+Console has migrated from using the `history` package to React Router's native types. This affects
+the following public API types:
+
+- `UseDeleteModal` hook's `redirectTo` parameter type has changed from `LocationDescriptor` (from `history`)
+  to `To` (from `react-router-dom-v5-compat`)
+
+### Migration guide
+
+If your plugin uses the `useDeleteModal` hook and passes a `redirectTo` parameter, update your imports:
+
+```diff
+- import { LocationDescriptor } from 'history';
+ import { To } from 'react-router-dom-v5-compat';
+
+  const MyComponent = ({ resource }) => {
+-   const launchDeleteModal = useDeleteModal(resource, redirectTo as LocationDescriptor);
+   const launchDeleteModal = useDeleteModal(resource, redirectTo as To);
+    // ...
+  };
+```
+
+The `To` type is compatible with the previous `LocationDescriptor` type (accepts strings and location
+objects), so most plugins should only need to update their imports.
+


I'd like to put this in a seperate react-router subsection given we'll likely have other stuff there

Once the react-router upgrade is done, we'll add the following and demote the headings being added.

## React Router upgrade Console has upgraded from react router 5 to 6. As a result, some changes to the plugin API were made. Here is how you upgrade your plugin: ### Migration from `history` package to React Router types ...

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

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

frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx

frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx

frontend/packages/helm-plugin/src/components/details-page/HelmReleaseDetailsPage.tsx

frontend/packages/knative-plugin/src/components/functions/FunctionDetailsPage.tsx

frontend/packages/dev-console/src/components/import/ImportForm.tsx

frontend/packages/knative-plugin/src/components/knatify/CreateKnatifyPage.tsx

rhamilto

Addressed review comments:

✅ Type-only imports (comments #2817764074, #2817781098, #2817782328):

Changed to import type { To } in console-types.ts
Changed to import type { NavigateFunction } in import-submit-utils.ts
Added NavigateFunction type in ProjectDetailsPage.tsx

✅ DRY NavigateFunction type (comments #2817769613, #2817770687):

Updated setURLParams and updateURLParams in catalog-utils.tsx to use NavigateFunction type

✅ Remove unnecessary return statements (comments #2817777547, #2817801167, #2817801364):

Removed return before handleRedirect() in EditApplication.tsx
Removed return before handleRedirect() in ImportForm.tsx
Removed return before handleRedirect() in CreateKnatifyPage.tsx

✅ useCallback optimization (comment #2817790079):

Wrapped handleNamespaceChange in useCallback in HelmReleaseDetailsPage.tsx

✅ Use renderWithProviders (comment #2817785414):

Updated ProjectDetailsPage.spec.tsx to use renderWithProviders utility

✅ Use generatePath (comment #2818935424):

Updated FunctionDetailsPage.tsx to use generatePath for safer path construction

All changes have been squashed into their respective commits.

openshift-ci-robot · 2026-02-17T20:56:20Z

@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.

Details

In response to this:

Summary

This PR completes the migration from the deprecated history object to React Router's useNavigate hook across all remaining packages in the OpenShift Console frontend.

Changes

This PR migrates all remaining instances of the deprecated history object to use the useNavigate hook from react-router-dom-v5-compat, except for:

public/components/app.tsx (will be handled in CONSOLE-4392)

public/components/factory/modal.tsx (will be handled in CONSOLE-5012)

Packages Migrated

console-app

Updated navigation patterns to use useNavigate hook

console-shared

Updated navigation patterns to use useNavigate hook

Updated catalog-utils.tsx to use NavigateFunction type for DRY principles

ErrorBoundary fix: Changed from using location.pathname as a key prop (which caused component remounting on every URL change) to passing it as a regular prop and using componentDidUpdate to reset error state only when there's an active error AND the location changes. This prevents unnecessary component remounting during tab navigation.

dev-console

ProjectAccess.tsx: Replace history.goBack with navigate(-1)

ProjectAccess.spec.tsx: Updated test mocks (removed obsolete history mock, added useNavigate mock)

ProjectDetailsPage.tsx: Added NavigateFunction type for consistency

ProjectDetailsPage.spec.tsx: Updated to use renderWithProviders utility

EditApplication.tsx, ImportForm.tsx: Removed unnecessary return statements before handleRedirect()

import-submit-utils.ts: Changed to type-only import for NavigateFunction

knative-plugin

DeleteRevisionModalController.tsx: Replace history.push() with navigate()

FunctionDetailsPage.tsx: Use generatePath() for safer route parameter interpolation

CreateKnatifyPage.tsx: Removed unnecessary return statement before handleRedirect()

helm-plugin

Updated navigation patterns to use useNavigate hook

HelmReleaseDetailsPage.tsx: Wrapped handleNamespaceChange in useCallback for performance optimization

operator-lifecycle-manager

create-catalog-source.tsx: Replace history.goBack with navigate(-1)

operator-hub-items.tsx: Replace history.replace with navigate

operator-hub-subscribe.tsx: Replace history.push with navigate

install-plan.tsx: Replace history.push with navigate

uninstall-operator-modal.tsx: Replace history.push with navigate

operand-form.tsx: Replace history.push/replace/goBack with navigate equivalents

DEPRECATED_operand-form.tsx: Replace history.push/goBack with navigate equivalents

subscription.tsx: Replace history.push with navigate

metal3-plugin

AddBareMetalHost.tsx: Replace history.push() with navigate()

public/components

attach-storage.tsx: Removed unused history: History type definition

console-dynamic-plugin-sdk

console-types.ts: Changed to type-only import for To type from React Router

Updated release notes with migration guide for history package to React Router types

Code Quality Improvements

Based on PR review feedback:

Type-only imports: Changed to import type syntax where appropriate for better TypeScript practices

DRY principles: Replaced inline function types with NavigateFunction type for consistency

Performance optimization: Added useCallback wrapper for namespace change handlers

Safer path construction: Used generatePath() for route parameter interpolation to prevent potential path traversal issues

Test improvements: Updated tests to use renderWithProviders utility for better test consistency

Code cleanup: Removed unnecessary return statements from void-returning functions

Test Updates

Updated ProjectAccess.spec.tsx to remove the obsolete history mock and add proper useNavigate mock

Updated ProjectDetailsPage.spec.tsx to use renderWithProviders utility instead of manual MemoryRouter wrapping

Migration Patterns Used

All migrations follow the established patterns:

history.push(path) → navigate(path)

history.replace(path) → navigate(path, { replace: true })

history.goBack() → navigate(-1)

Added useNavigate() hook imports from react-router-dom-v5-compat

Updated component implementations to use the navigate function

Used NavigateFunction type for function parameters

Used generatePath() for parameterized routes

Commit Structure

The commits are organized by package for easier review:

CONSOLE-4990: Migrate console-app to useNavigate hook

CONSOLE-4990: Migrate console-shared to useNavigate hook

CONSOLE-4990: Migrate dev-console to useNavigate hook

CONSOLE-4990: Migrate knative-plugin to useNavigate hook

CONSOLE-4990: Migrate helm-plugin to useNavigate hook

CONSOLE-4990: Migrate operator-lifecycle-manager to useNavigate hook

CONSOLE-4990: Migrate remaining packages to useNavigate hook

CONSOLE-4990: Replace history types with React Router types

Bug Fix

Fixed resource tab navigation causing full page reloads (#15959 (comment))

The ErrorBoundary component was using location.pathname as a key prop, which caused the entire component tree to remount whenever the URL changed. This resulted in:

Components unmounting and remounting when switching between resource tabs (Details → YAML → Events)

Unnecessary data refetching

Loss of component state

Solution: Changed to pass locationPathname as a prop and use componentDidUpdate to reset error state only when there's an active error AND the location changes. This preserves the error reset behavior while avoiding unnecessary remounts.

Related Issues

Relates to CONSOLE-4990

Relates to CONSOLE-5012 (modal.tsx migration)

Testing

All modified components have been updated to use useNavigate() hook

Test files updated to properly mock the new hook

No functional changes to navigation behavior

All existing navigation patterns preserved

ErrorBoundary tests pass with new implementation

Code quality improvements applied based on review feedback

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

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.

Replace history object usage with useNavigate hook in console-app package. Changes: - cronjob-factory.ts: Converted to dependency injection pattern - cronjob-provider.ts: Use navigate in action creator - ClusterConfigurationPage.tsx: Replace history.push with navigate - Lightspeed.tsx: Replace history.push with navigate - clone-pvc-modal.tsx: Replace history.push with navigate - restore-pvc-modal.tsx: Replace history.push with navigate - PDBForm.tsx: Replace history.push with navigate - UserPreferencePage.tsx: Replace history.push with navigate - create-volume-snapshot.tsx: Replace history.push with navigate All changes: - Replaced history.push(path) with navigate(path) - Added useNavigate() hook calls - Updated imports to use react-router-dom-v5-compat Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in console-shared package. Changes: - ActionMenuItem.tsx: Replace history.push with navigate - CatalogTile.tsx: Replace history.push with navigate - CatalogView.tsx: Replace history.push with navigate - catalog-utils.tsx: Accept NavigateFunction as parameter - dynamic-form/index.tsx: Replace history.goBack with navigate(-1) - error-boundary.tsx: Use componentDidUpdate instead of key prop for location-based reset - DeleteResourceModal.tsx: Replace history.push with navigate - MultiTabListPage.tsx: Replace history.push with navigate Migration patterns: - Components: Added useNavigate() hook - Utilities: Parameter injection for NavigateFunction - ErrorBoundary: Pass locationPathname as prop and use componentDidUpdate to reset error state only when there's an active error AND location changes. This avoids unnecessary component remounting during tab navigation. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in dev-console package. Changes: - AddCardItem.tsx: Pass navigate to navigateTo utility - EditBuildConfig.tsx: Replace history.push with navigate - EditDeployment.tsx: Replace history.push with navigate - EditApplication.tsx: Replace history.goBack with navigate(-1) - AddHealthChecks.tsx: Replace history.push with navigate - AddHealthChecksForm.tsx: Replace history.goBack with navigate(-1) - HPAFormikForm.tsx: Replace history.goBack with navigate(-1) - DeployImage.tsx: Pass navigate to handleRedirect - ImportForm.tsx: Pass navigate to handleRedirect - ImportSamplePage.tsx: Pass navigate to handleRedirect - import-submit-utils.ts: Accept NavigateFunction parameter - UploadJar.tsx: Replace history.goBack with navigate(-1) - useUploadJarFormToast.ts: Accept navigate as parameter - AddServerlessFunction.tsx: Replace history.goBack with navigate(-1) - jar-file-upload-utils.ts: Accept navigate as parameter - MonitoringPage.tsx: Replace history.push with navigate - ProjectDetailsPage.tsx: Replace history.push with navigate - add-page-utils.ts: Accept navigate as parameter All utility functions updated to use dependency injection pattern. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in knative-plugin package. Changes: - EventSink.tsx: Replace history.goBack with navigate(-1) - EventSource.tsx: Replace history.goBack with navigate(-1) - AddBroker.tsx: Replace history.goBack with navigate(-1) - AddChannel.tsx: Replace history.goBack with navigate(-1) - Subscribe.tsx: Replace history.push with navigate - FunctionDetailsPage.tsx: Replace history.push with navigate - CreateKnatifyPage.tsx: Replace history.goBack with navigate(-1) - create-eventsources-utils.ts: Accept NavigateFunction parameter All components updated to use useNavigate() hook. Utility function updated to use dependency injection pattern. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in helm-plugin package. Changes: - HelmReleaseDetailsPage.tsx: Replace history.push with navigate - CreateHelmChartRepository.tsx: Replace history.goBack with navigate(-1) - CreateHelmChartRepositoryPage.tsx: Replace history.push with navigate - HelmInstallUpgradePage.tsx: Replace history.push/goBack with navigate - HelmReleaseRollbackPage.tsx: Replace history.push/goBack with navigate All components updated to use useNavigate() hook from react-router-dom-v5-compat. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in operator-lifecycle-manager package. Changes: - create-catalog-source.tsx: Replace history.goBack with navigate(-1) - operator-hub-items.tsx: Replace history.replace with navigate - operator-hub-subscribe.tsx: Replace history.push with navigate - install-plan.tsx: Replace history.push with navigate - uninstall-operator-modal.tsx: Replace history.push with navigate - operand-form.tsx: Replace history.push/replace/goBack with navigate - DEPRECATED_operand-form.tsx: Replace history.push/goBack with navigate - subscription.tsx: Replace history.push with navigate All components updated to use useNavigate() hook from react-router-dom-v5-compat. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace history object usage with useNavigate hook in remaining packages. Changes: - topology/ExportViewLogButton.tsx: Replace history.push with navigate - shipwright-plugin/EditBuild.tsx: Replace history.push/goBack with navigate - metal3-plugin/AddBareMetalHost.tsx: Replace history.push with navigate - metal3-plugin/AddBareMetalHostForm.tsx: Replace history.goBack with navigate(-1) - public/QuickCreate.tsx: Replace history.push with navigate - public/attach-storage.tsx: Remove unused history type definition All components updated to use useNavigate() hook from react-router-dom-v5-compat. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Replace `LocationDescriptor` and `Location` types from the history package with `To` and `Location` types from react-router-dom-v5-compat. This is part of the migration to programmatic navigation using React Router hooks instead of the history object. Changes: - Replace LocationDescriptor with To in console-types.ts (SDK) - Replace LocationDescriptor with To in delete-modal.tsx - Replace History.LocationDescriptor with To in LinkStatus.tsx - Replace Location import in telemetry.ts Breaking Change: The UseDeleteModal hook's redirectTo parameter type has changed from LocationDescriptor (history) to To (react-router-dom). Plugin developers should update their imports accordingly. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

logonoff · 2026-02-19T19:54:44Z

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { Action } from '@console/dynamic-plugin-sdk';
+import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
+import { resourceObjPath } from '@console/internal/components/utils/resource-link';
+import { JobModel } from '@console/internal/models';
+import {
+  k8sCreate,
+  CronJobKind,
+  JobKind,
+  referenceFor,
+  K8sResourceCommon,
+} from '@console/internal/module/k8s';
+import { CronJobActionCreator } from './types';


@typescript-eslint/consistent-type-imports - use import type

logonoff · 2026-02-19T19:58:14Z

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

+    },
+  };
+
+  return k8sCreate(JobModel, reqPayload as K8sResourceCommon);


type assertion doesnt appear needed

Suggested change

return k8sCreate(JobModel, reqPayload as K8sResourceCommon);

return k8sCreate(JobModel, reqPayload);

logonoff · 2026-02-19T20:00:50Z

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

+  resource: 'jobs',
+  name: obj.metadata?.name,
+  namespace: obj.metadata?.namespace,
+  verb: 'create' as const,


why is as const needed? do we/should we do this elsewhere?

logonoff · 2026-02-19T20:01:26Z

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const memoizedFilterActions = useDeepCompareMemoize(filterActions);
+
+  const factory = useMemo(
+    () => ({
+      [CronJobActionCreator.StartJob]: () => ({
+        id: 'start-job',
+        label: t('console-app~Start Job'),
+        cta: () => {


nit

Suggested change

const { t } = useTranslation();

const navigate = useNavigate();

const memoizedFilterActions = useDeepCompareMemoize(filterActions);

const factory = useMemo(

() => ({

[CronJobActionCreator.StartJob]: () => ({

id: 'start-job',

label: t('console-app~Start Job'),

cta: () => {

const { t } = useTranslation('console-app');

const navigate = useNavigate();

const memoizedFilterActions = useDeepCompareMemoize(filterActions);

const factory = useMemo(

() => ({

[CronJobActionCreator.StartJob]: () => ({

id: 'start-job',

label: t('Start Job'),

cta: () => {

logonoff · 2026-02-19T20:02:05Z

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

+              // TODO: Show error in notification in the follow on tech-debt.
+              // eslint-disable-next-line no-console
+              console.error('Failed to start a Job.', error);
+            });


this is already a hook. this doesn't have to be tech debt, we can just use useToast here

logonoff · 2026-02-19T20:05:25Z

frontend/packages/console-app/src/components/file-upload/file-upload-context.ts

-          requiredFileExtension.properties.handler(f, namespace);
+          const path = requiredFileExtension.properties.handler(f, namespace);
+          if (path) {
+            navigate(path);
+          }


does this change any existing behaviour?

logonoff · 2026-02-19T20:07:23Z

frontend/packages/console-shared/src/components/error/error-boundary.tsx

 }

+// Functional wrapper to handle location changes
+const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children, FallbackComponent }) => {


this makes locationPathname a prop from a typescript perspective when it is not

logonoff · 2026-02-19T20:09:13Z

frontend/packages/dev-console/src/components/jar-file-upload/jar-file-upload-utils.ts

+export const jarFileUploadHandler = (file: File, namespace: string): string => {
+  return `/upload-jar/ns/${namespace}`;


i would like to DRY up this type

Suggested change

export const jarFileUploadHandler = (file: File, namespace: string): string => {

return `/upload-jar/ns/${namespace}`;

import type { FileUploadHandler } from '@console/dynamic-plugin-sdk/src/extensions/file-upload';

export const jarFileUploadHandler: FileUploadHandler = (file, namespace) => {

return `/upload-jar/ns/${namespace}`;

logonoff · 2026-02-19T20:09:40Z

frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx

 export const MONITORING_ALL_NS_PAGE_URI = '/dev-monitoring/all-namespaces';

-const handleNamespaceChange = (newNamespace: string): void => {
+const handleNamespaceChange = (newNamespace: string, navigate: (url: string) => void): void => {


nit: use NavigateFunction type here for consistency

logonoff · 2026-02-19T20:11:16Z

frontend/packages/knative-plugin/src/components/knatify/CreateKnatifyPage.tsx

+        return undefined;
      }
+      return undefined;
    } catch {
      const resourceActions = knatifyResources(values, appName, true).then(() =>
        knatifyResources(values, appName),
      );

-      resourceActions
+      return resourceActions


why the need for all these returns?

openshift-ci · 2026-02-19T21:49:08Z

@rhamilto: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	`9eab703`	link	true	`/test e2e-gcp-console`

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.

openshift-merge-robot · 2026-02-19T21:49:18Z

PR needs rebase.

Details

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 kubernetes-sigs/prow repository.

openshift-ci bot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 29, 2026

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Jan 29, 2026

rhamilto mentioned this pull request Jan 29, 2026

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

Merged

openshift-ci bot added the component/core Related to console core functionality label Jan 29, 2026

rhamilto changed the title ~~CONSOLE-4990: Replace history object navigation with useNavigate hook~~ [WIP] CONSOLE-4990: Replace history object navigation with useNavigate hook Jan 29, 2026

rhamilto marked this pull request as ready for review January 29, 2026 19:07

openshift-ci bot requested review from jhadvig and rawagner January 29, 2026 19:08

logonoff reviewed Jan 29, 2026

View reviewed changes

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch from fab6845 to 4c78f4b Compare January 29, 2026 21:55

rhamilto changed the title ~~[WIP] CONSOLE-4990: Replace history object navigation with useNavigate hook~~ CONSOLE-4990: Replace history object navigation with useNavigate hook Jan 29, 2026

openshift-ci bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 29, 2026

rhamilto changed the title ~~CONSOLE-4990: Replace history object navigation with useNavigate hook~~ [WIP] CONSOLE-4990: Replace history object navigation with useNavigate hook Jan 29, 2026

openshift-ci bot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 29, 2026

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch 2 times, most recently from 738897a to b7a45bf Compare January 29, 2026 22:06

openshift-ci bot added the kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated label Jan 29, 2026

rhamilto changed the title ~~[WIP] CONSOLE-4990: Replace history object navigation with useNavigate hook~~ CONSOLE-4990: Replace history object navigation with useNavigate hook Jan 29, 2026

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Feb 11, 2026

openshift-ci bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Feb 12, 2026

openshift-ci bot added the acknowledge-critical-fixes-only Indicates if the issuer of the label is OK with the policy. label Feb 17, 2026

logonoff reviewed Feb 17, 2026

View reviewed changes

rhamilto commented Feb 17, 2026

View reviewed changes

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch from 2f4ced5 to 783cf6a Compare February 17, 2026 20:54

openshift-ci-robot removed the verified Signifies that the PR passed pre-merge verification criteria label Feb 17, 2026

rhamilto and others added 3 commits February 18, 2026 17:11

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch from 783cf6a to 6819723 Compare February 18, 2026 22:16

rhamilto and others added 4 commits February 19, 2026 09:04

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch from 6819723 to ee61fdf Compare February 19, 2026 14:05

rhamilto force-pushed the CONSOLE-4990-programmatic-navigation branch from ee61fdf to 9eab703 Compare February 19, 2026 15:26

logonoff reviewed Feb 19, 2026

View reviewed changes

openshift-merge-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 19, 2026

	return k8sCreate(JobModel, reqPayload as K8sResourceCommon);
	return k8sCreate(JobModel, reqPayload);

		export const jarFileUploadHandler = (file: File, namespace: string): string => {
		return `/upload-jar/ns/${namespace}`;

Conversation

rhamilto commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Packages Migrated

Code Quality Improvements

Test Updates

Migration Patterns Used

Commit Structure

Bug Fix

Related Issues

Testing

Uh oh!

openshift-ci bot commented Jan 29, 2026

Uh oh!

openshift-ci-robot commented Jan 29, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Overview

Migration Pattern

Changes by Package

1. console-app (9 files)

2. console-shared (8 files)

3. dev-console (17 files)

4. knative-plugin (8 files)

5. helm-plugin (5 files)

6. Other packages (6 files)

Replacements Made

Testing

What Remains

Commit Structure

Related Issues

Uh oh!

openshift-ci bot commented Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

openshift-ci-robot commented Jan 29, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Overview

Migration Patterns

Key Improvements

Changes by Commit

1. 9215732b94 - Core Infrastructure Migration

2. 0b76e669fc - console-app Migration

3. d39392028f - console-shared Migration

4. 7ba04a6760 - dev-console Migration

5. 85e900fdbe - knative-plugin Migration

6. def35a3651 - helm-plugin Migration

7. 4c78f4b1d0 - Remaining Packages + Advanced Patterns

Replacements Made

Code Quality

Testing

What Remains

Commit Structure

Review Notes

Related Issues

Uh oh!

openshift-ci-robot commented Feb 11, 2026

Uh oh!

rhamilto commented Feb 11, 2026

Uh oh!

openshift-ci-robot commented Feb 11, 2026

Uh oh!

rhamilto commented Feb 11, 2026

Uh oh!

rhamilto commented Feb 12, 2026

Uh oh!

rhamilto commented Feb 17, 2026

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

rhamilto commented Jan 29, 2026 •

edited

Loading

openshift-ci-robot commented Jan 29, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 29, 2026 •

edited by openshift-ci bot

Loading

1. `9215732b94` - Core Infrastructure Migration

2. `0b76e669fc` - console-app Migration

3. `d39392028f` - console-shared Migration

4. `7ba04a6760` - dev-console Migration

5. `85e900fdbe` - knative-plugin Migration

6. `def35a3651` - helm-plugin Migration

7. `4c78f4b1d0` - Remaining Packages + Advanced Patterns