SRVKP-10306: Upgrade react-router from v5 to v7 to align with console

[anwesha-palit-redhat]

Summary

• Replaced react-router 5.3.x, react-router-dom 5.3.x, and react-router-dom-v5-compat ^6.11.2 with react-router ~7.13.1 to match the console's version.
• Updated @openshift-console/dynamic-plugin-sdk{,-internal,-webpack} from 4.22.0-prerelease.1 to 4.22.0-prerelease.2 (required — the older SDK validates shared modules against v5 and rejects v7).
• Updated react-i18next (~15.1.4 → ~16.5.8), react-redux (8.1.3 → ~9.2.0), and @types/react-redux (6.0.2 → ^7.1.34) to satisfy the new SDK's peer dependencies.
• Migrated all ~67 source files from react-router-dom-v5-compat / react-router-dom imports to react-router.
• Removed the history package dependency from router.ts utilities, replacing it with native window.history APIs.

Why add __mocks__/textEncoderDecoder.ts setup file

React Router v7 internally uses TextEncoder / TextDecoder (for cookie and URL handling). The jsdom test environment doesn't provide these globals, so importing react-router in any test causes ReferenceError: TextEncoder is not defined. The fix adds a __mocks__/textEncoderDecoder.ts setup file — matching the exact same approach used by the console project — that polyfills these globals from Node's util module before tests run. It also adds react-router, cookie, and set-cookie-parser to transformIgnorePatterns exceptions so babel-jest can transform their ESM source.

Why the change in src/components/utils/router.ts

The old version of this file imported createBrowserHistory, createMemoryHistory, and the History type from the history npm package (v4). That package was a standalone dependency of react-router v5 — it provided the browser history abstraction that react-router v5 was built on.
With react-router v7, the history package no longer exists as a separate dependency. Its functionality was absorbed into react-router's internals.

What the old code did:
Created a History instance via createBrowserHistory() (or createMemoryHistory() in tests), configured with the console's base path.

• Monkey-patched history.push and history.replace to strip the base path from URLs before navigating.
• Used history.replace() inside all the query parameter helpers (setQueryArgument, removeQueryArgument, etc.) to update the URL without a full page reload.

What the new code does:
It replaces the history package with the native browser window.history API:

• history.push → window.history.pushState()
• history.replace → window.history.replaceState()
• history.back → window.history.back()

The base-path stripping monkey-patch was also removed. It's no longer needed because callers of history.push (like handlePipelineRunSubmit in pipelines-actions.tsx) pass fully-qualified paths from resourcePathFromModel(), and the query parameter helpers only modify the query string of the current URL (they read window.location.href directly), so base path handling is irrelevant to them.

Test plan

• yarn build passes
• yarn test passes (47/47 suites, 1 skipped — unchanged from before)

Screen Recording for verification in OCP 4.22

react-router-testing-1.mov

react-router-testing-2.mov

react-router-testing-3.mov

[openshift-ci-robot]

@anwesha-palit-redhat: This pull request references SRVKP-10306 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

• Replaced react-router 5.3.x, react-router-dom 5.3.x, and react-router-dom-v5-compat ^6.11.2 with react-router ~7.13.1 to match the console's version.
• Updated @openshift-console/dynamic-plugin-sdk{,-internal,-webpack} from 4.22.0-prerelease.1 to 4.22.0-prerelease.2 (required — the older SDK validates shared modules against v5 and rejects v7).
• Updated react-i18next (~15.1.4 → ~16.5.8), react-redux (8.1.3 → ~9.2.0), and @types/react-redux (6.0.2 → ^7.1.34) to satisfy the new SDK's peer dependencies.
• Migrated all ~67 source files from react-router-dom-v5-compat / react-router-dom imports to react-router.
• Removed the history package dependency from router.ts utilities, replacing it with native window.history APIs.

Why the jest.config change

React Router v7 internally uses TextEncoder / TextDecoder (for cookie and URL handling). The jsdom test environment doesn't provide these globals, so importing react-router in any test causes ReferenceError: TextEncoder is not defined. The fix adds a __mocks__/textEncoderDecoder.ts setup file — matching the exact same approach used by the console project — that polyfills these globals from Node's util module before tests run. It also adds react-router, cookie, and set-cookie-parser to transformIgnorePatterns exceptions so babel-jest can transform their ESM source.

Test plan

• yarn build passes
• yarn test passes (47/47 suites, 1 skipped — unchanged from before)

Screen Recording for verification in OCP 4.22

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]

@anwesha-palit-redhat: This pull request references SRVKP-10306 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

• Replaced react-router 5.3.x, react-router-dom 5.3.x, and react-router-dom-v5-compat ^6.11.2 with react-router ~7.13.1 to match the console's version.
• Updated @openshift-console/dynamic-plugin-sdk{,-internal,-webpack} from 4.22.0-prerelease.1 to 4.22.0-prerelease.2 (required — the older SDK validates shared modules against v5 and rejects v7).
• Updated react-i18next (~15.1.4 → ~16.5.8), react-redux (8.1.3 → ~9.2.0), and @types/react-redux (6.0.2 → ^7.1.34) to satisfy the new SDK's peer dependencies.
• Migrated all ~67 source files from react-router-dom-v5-compat / react-router-dom imports to react-router.
• Removed the history package dependency from router.ts utilities, replacing it with native window.history APIs.

Why the jest.config change

React Router v7 internally uses TextEncoder / TextDecoder (for cookie and URL handling). The jsdom test environment doesn't provide these globals, so importing react-router in any test causes ReferenceError: TextEncoder is not defined. The fix adds a __mocks__/textEncoderDecoder.ts setup file — matching the exact same approach used by the console project — that polyfills these globals from Node's util module before tests run. It also adds react-router, cookie, and set-cookie-parser to transformIgnorePatterns exceptions so babel-jest can transform their ESM source.

Test plan

• yarn build passes
• yarn test passes (47/47 suites, 1 skipped — unchanged from before)

Screen Recording for verification in OCP 4.22

react-router-testing-1.mov

react-router-testing-2.mov

react-router-testing-3.mov

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]

@anwesha-palit-redhat: This pull request references SRVKP-10306 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

• Replaced react-router 5.3.x, react-router-dom 5.3.x, and react-router-dom-v5-compat ^6.11.2 with react-router ~7.13.1 to match the console's version.
• Updated @openshift-console/dynamic-plugin-sdk{,-internal,-webpack} from 4.22.0-prerelease.1 to 4.22.0-prerelease.2 (required — the older SDK validates shared modules against v5 and rejects v7).
• Updated react-i18next (~15.1.4 → ~16.5.8), react-redux (8.1.3 → ~9.2.0), and @types/react-redux (6.0.2 → ^7.1.34) to satisfy the new SDK's peer dependencies.
• Migrated all ~67 source files from react-router-dom-v5-compat / react-router-dom imports to react-router.
• Removed the history package dependency from router.ts utilities, replacing it with native window.history APIs.

Why add __mocks__/textEncoderDecoder.ts setup file

React Router v7 internally uses TextEncoder / TextDecoder (for cookie and URL handling). The jsdom test environment doesn't provide these globals, so importing react-router in any test causes ReferenceError: TextEncoder is not defined. The fix adds a __mocks__/textEncoderDecoder.ts setup file — matching the exact same approach used by the console project — that polyfills these globals from Node's util module before tests run. It also adds react-router, cookie, and set-cookie-parser to transformIgnorePatterns exceptions so babel-jest can transform their ESM source.

Why did i change src/components/utils/router.ts

The old version of this file imported createBrowserHistory, createMemoryHistory, and the History type from the history npm package (v4). That package was a standalone dependency of react-router v5 — it provided the browser history abstraction that react-router v5 was built on.
With react-router v7, the history package no longer exists as a separate dependency. Its functionality was absorbed into react-router's internals.

What the old code did:
Created a History instance via createBrowserHistory() (or createMemoryHistory() in tests), configured with the console's base path.

• Monkey-patched history.push and history.replace to strip the base path from URLs before navigating.
• Used history.replace() inside all the query parameter helpers (setQueryArgument, removeQueryArgument, etc.) to update the URL without a full page reload.

What the new code does:
It replaces the history package with the native browser window.history API:

• history.push → window.history.pushState()
• history.replace → window.history.replaceState()
• history.back → window.history.back()

The base-path stripping monkey-patch was also removed. It's no longer needed because callers of history.push (like handlePipelineRunSubmit in pipelines-actions.tsx) pass fully-qualified paths from resourcePathFromModel(), and the query parameter helpers only modify the query string of the current URL (they read window.location.href directly), so base path handling is irrelevant to them.

Test plan

• yarn build passes
• yarn test passes (47/47 suites, 1 skipped — unchanged from before)

Screen Recording for verification in OCP 4.22

react-router-testing-1.mov

react-router-testing-2.mov

react-router-testing-3.mov

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]

@anwesha-palit-redhat: This pull request references SRVKP-10306 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

• Replaced react-router 5.3.x, react-router-dom 5.3.x, and react-router-dom-v5-compat ^6.11.2 with react-router ~7.13.1 to match the console's version.
• Updated @openshift-console/dynamic-plugin-sdk{,-internal,-webpack} from 4.22.0-prerelease.1 to 4.22.0-prerelease.2 (required — the older SDK validates shared modules against v5 and rejects v7).
• Updated react-i18next (~15.1.4 → ~16.5.8), react-redux (8.1.3 → ~9.2.0), and @types/react-redux (6.0.2 → ^7.1.34) to satisfy the new SDK's peer dependencies.
• Migrated all ~67 source files from react-router-dom-v5-compat / react-router-dom imports to react-router.
• Removed the history package dependency from router.ts utilities, replacing it with native window.history APIs.

Why add __mocks__/textEncoderDecoder.ts setup file

React Router v7 internally uses TextEncoder / TextDecoder (for cookie and URL handling). The jsdom test environment doesn't provide these globals, so importing react-router in any test causes ReferenceError: TextEncoder is not defined. The fix adds a __mocks__/textEncoderDecoder.ts setup file — matching the exact same approach used by the console project — that polyfills these globals from Node's util module before tests run. It also adds react-router, cookie, and set-cookie-parser to transformIgnorePatterns exceptions so babel-jest can transform their ESM source.

Why the change in src/components/utils/router.ts

The old version of this file imported createBrowserHistory, createMemoryHistory, and the History type from the history npm package (v4). That package was a standalone dependency of react-router v5 — it provided the browser history abstraction that react-router v5 was built on.
With react-router v7, the history package no longer exists as a separate dependency. Its functionality was absorbed into react-router's internals.

What the old code did:
Created a History instance via createBrowserHistory() (or createMemoryHistory() in tests), configured with the console's base path.

• Monkey-patched history.push and history.replace to strip the base path from URLs before navigating.
• Used history.replace() inside all the query parameter helpers (setQueryArgument, removeQueryArgument, etc.) to update the URL without a full page reload.

What the new code does:
It replaces the history package with the native browser window.history API:

• history.push → window.history.pushState()
• history.replace → window.history.replaceState()
• history.back → window.history.back()

The base-path stripping monkey-patch was also removed. It's no longer needed because callers of history.push (like handlePipelineRunSubmit in pipelines-actions.tsx) pass fully-qualified paths from resourcePathFromModel(), and the query parameter helpers only modify the query string of the current URL (they read window.location.href directly), so base path handling is irrelevant to them.

Test plan

• yarn build passes
• yarn test passes (47/47 suites, 1 skipped — unchanged from before)

Screen Recording for verification in OCP 4.22

react-router-testing-1.mov

react-router-testing-2.mov

react-router-testing-3.mov

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.

[arvindk-softwaredev]

nit: club imports from react-router in line #4 and #10

[anwesha-palit-redhat]

done

[arvindk-softwaredev]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: anwesha-palit-redhat, arvindk-softwaredev

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:

• OWNERS [anwesha-palit-redhat,arvindk-softwaredev]

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