CONSOLE-4990: Replace history object navigation with useNavigate hook#15959
Conversation
|
Skipping CI for Draft Pull Request. |
|
@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. |
fab6845 to
4c78f4b
Compare
|
@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. |
738897a to
b7a45bf
Compare
|
/retest |
1 similar comment
|
/retest |
|
/verified by @yapei |
|
@yapei: 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 there seems to be a problem with starting a new cronJob |
|
@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. |
|
/lgtm |
|
/retest |
|
@logonoff, I had to rebase. Mind retagging? |
|
/lgtm |
|
/retest |
|
/lgtm |
|
Rebased |
|
@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. |
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> CONSOLE-4990: i18n changes
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, YAR (yet another rebase). Mind retagging? |
|
/lgtm |
|
Rebased |
|
@logonoff: 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. |
|
[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 |
|
/retest |
|
@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. |
Summary
This PR completes the migration from the deprecated
historyobject to React Router'suseNavigatehook across all remaining packages in the OpenShift Console frontend.Changes
This PR migrates all remaining instances of the deprecated
historyobject to use theuseNavigatehook fromreact-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
useNavigatehookconsole-shared
useNavigatehookcatalog-utils.tsxto useNavigateFunctiontype for DRY principleslocation.pathnameas akeyprop (which caused component remounting on every URL change) to passing it as a regular prop and usingcomponentDidUpdateto 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: Replacehistory.goBackwithnavigate(-1)ProjectAccess.spec.tsx: Updated test mocks (removed obsoletehistorymock, addeduseNavigatemock)ProjectDetailsPage.tsx: AddedNavigateFunctiontype for consistencyProjectDetailsPage.spec.tsx: Updated to userenderWithProvidersutilityEditApplication.tsx,ImportForm.tsx: Removed unnecessary return statements beforehandleRedirect()import-submit-utils.ts: Changed to type-only import forNavigateFunctionknative-plugin
DeleteRevisionModalController.tsx: Replacehistory.push()withnavigate()FunctionDetailsPage.tsx: UsegeneratePath()for safer route parameter interpolationCreateKnatifyPage.tsx: Removed unnecessary return statement beforehandleRedirect()helm-plugin
useNavigatehookHelmReleaseDetailsPage.tsx: WrappedhandleNamespaceChangeinuseCallbackfor performance optimizationoperator-lifecycle-manager
create-catalog-source.tsx: Replacehistory.goBackwithnavigate(-1)operator-hub-items.tsx: Replacehistory.replacewithnavigateoperator-hub-subscribe.tsx: Replacehistory.pushwithnavigateinstall-plan.tsx: Replacehistory.pushwithnavigateuninstall-operator-modal.tsx: Replacehistory.pushwithnavigateoperand-form.tsx: Replacehistory.push/replace/goBackwith navigate equivalentsDEPRECATED_operand-form.tsx: Replacehistory.push/goBackwith navigate equivalentssubscription.tsx: Replacehistory.pushwithnavigateand migrate fromlocation.searchtouseQueryParamsMutator().getQueryArgument()for React Router v6 compatibilitymetal3-plugin
AddBareMetalHost.tsx: Replacehistory.push()withnavigate()public/components
attach-storage.tsx: Removed unusedhistory: Historytype definitionconsole-dynamic-plugin-sdk
console-types.ts: Changed to type-only import forTotype from React Routerhistorypackage to React Router typesCode Quality Improvements
Based on PR review feedback:
import typesyntax where appropriate for better TypeScript practicesNavigateFunctiontype for consistencyuseCallbackwrapper for namespace change handlersgeneratePath()for route parameter interpolation to prevent potential path traversal issuesrenderWithProvidersutility for better test consistencyuseLocation().search+URLSearchParamstouseQueryParamsMutator().getQueryArgument()for proper query parameter handlingTest Updates
ProjectAccess.spec.tsxto remove the obsoletehistorymock and add properuseNavigatemockProjectDetailsPage.spec.tsxto userenderWithProvidersutility instead of manual MemoryRouter wrappingMigration Patterns Used
All migrations follow the established patterns:
history.push(path)→navigate(path)history.replace(path)→navigate(path, { replace: true })history.goBack()→navigate(-1)new URLSearchParams(location.search).has(key)→getQueryArgument(key)(fromuseQueryParamsMutator())useNavigate()hook imports fromreact-router-dom-v5-compatNavigateFunctiontype for function parametersgeneratePath()for parameterized routesCommit Structure
The commits are organized by package for easier review:
CONSOLE-4990: Migrate console-app to useNavigate hookCONSOLE-4990: Migrate console-shared to useNavigate hookCONSOLE-4990: Migrate dev-console to useNavigate hookCONSOLE-4990: Migrate knative-plugin to useNavigate hookCONSOLE-4990: Migrate helm-plugin to useNavigate hookCONSOLE-4990: Migrate operator-lifecycle-manager to useNavigate hookCONSOLE-4990: Migrate remaining packages to useNavigate hookCONSOLE-4990: Replace history types with React Router typesBug Fixes
Fixed CronJob "Start Job" action navigation
Issue: When migrating the CronJob actions from the factory pattern to the new hook-based pattern (
useCronJobActions), the navigation logic was accidentally omitted. After clicking "Start Job" (from either the CronJob list page or details page), the user would remain on the CronJob page instead of being navigated to the newly created Job's details page.Impact: This caused integration test failures:
verify "Start Job" on the CronJob list pageverify "Start Job" on the CronJob details pageverify the number of Jobs in CronJob > Jobs tab list pageverify the number of events in CronJob > Events tab list pageSolution: Updated
useCronJobActions.tsto properly handle navigation after successful job creation:This restores the original behavior from
cronjob-factory.tswherehistory.push(path)was used to navigate to the created job.Files changed:
packages/console-app/src/actions/hooks/useCronJobActions.ts: Added navigation logic with proper error handlingFixed resource tab navigation causing full page reloads
(#15959 (comment))
Issue: The ErrorBoundary component was using
location.pathnameas akeyprop, which caused the entire component tree to remount whenever the URL changed. This resulted in:Solution: Changed to pass
locationPathnameas a prop and usecomponentDidUpdateto 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
Testing
useNavigate()hookCo-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com