From dc0a14f39bd5872b20b23fcaae7c2a234f33ef61 Mon Sep 17 00:00:00 2001 From: raza-khan0108 Date: Sun, 1 Mar 2026 00:12:20 +0530 Subject: [PATCH 1/2] Upgrade react-router-dom to v6 --- web/app/js/components/BreadcrumbHeader.jsx | 5 +- web/app/js/components/Navigation.jsx | 54 ++++++----- web/app/js/components/Navigation.test.jsx | 32 +++---- web/app/js/components/util/withRouter.jsx | 26 +++++ web/app/js/index.js | 81 ++++++++-------- web/app/package.json | 4 +- web/app/test/testHelpers.jsx | 17 ++-- web/app/yarn.lock | 106 +++++---------------- 8 files changed, 143 insertions(+), 182 deletions(-) create mode 100644 web/app/js/components/util/withRouter.jsx diff --git a/web/app/js/components/BreadcrumbHeader.jsx b/web/app/js/components/BreadcrumbHeader.jsx index 8e53a5fdaaf44..f6d1ad0fcec83 100644 --- a/web/app/js/components/BreadcrumbHeader.jsx +++ b/web/app/js/components/BreadcrumbHeader.jsx @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import ReactRouterPropTypes from 'react-router-prop-types'; import { Trans } from '@lingui/macro'; import _chunk from 'lodash/chunk'; import _takeWhile from 'lodash/takeWhile'; @@ -87,7 +86,7 @@ class BreadcrumbHeader extends React.Component { return ( {BreadcrumbHeader.renderBreadcrumbSegment(pathSegment.segment, breadcrumbs.length, index)} - { index < breadcrumbs.length - 1 ? ' > ' : null } + {index < breadcrumbs.length - 1 ? ' > ' : null} ); }); @@ -98,7 +97,7 @@ BreadcrumbHeader.propTypes = { api: PropTypes.shape({ PrefixedLink: PropTypes.func.isRequired, }).isRequired, - location: ReactRouterPropTypes.location.isRequired, + location: PropTypes.shape({}).isRequired, pathPrefix: PropTypes.string.isRequired, }; diff --git a/web/app/js/components/Navigation.jsx b/web/app/js/components/Navigation.jsx index 627a46345fe34..7fb5594bdbfa6 100644 --- a/web/app/js/components/Navigation.jsx +++ b/web/app/js/components/Navigation.jsx @@ -15,7 +15,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; import PropTypes from 'prop-types'; import React from 'react'; -import ReactRouterPropTypes from 'react-router-prop-types'; + import TextField from '@material-ui/core/TextField'; import Toolbar from '@material-ui/core/Toolbar'; import { Trans } from '@lingui/macro'; @@ -473,7 +473,7 @@ class NavigationBase extends React.Component { const drawer = (
- { !mobileSidebarOpen && + {!mobileSidebarOpen &&
{linkerdWordLogo} @@ -485,19 +485,19 @@ class NavigationBase extends React.Component { sidebarHeadingCluster - { this.menuItem('/namespaces', menuItemNamespaces, namespaceIcon) } + {this.menuItem('/namespaces', menuItemNamespaces, namespaceIcon)} - { this.menuItem( + {this.menuItem( '/controlplane', menuItemControlPlane, , - ) } + )} - { showGatewayLink && this.menuItem( + {showGatewayLink && this.menuItem( '/gateways', menuItemGateway, , - ) } + )} @@ -541,23 +541,23 @@ class NavigationBase extends React.Component { sidebarHeadingWorkloads - { this.menuItem(`/namespaces/${selectedNamespace}/cronjobs`, menuItemCronJobs, cronJobIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/cronjobs`, menuItemCronJobs, cronJobIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/daemonsets`, menuItemDaemonSets, daemonsetIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/daemonsets`, menuItemDaemonSets, daemonsetIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/deployments`, menuItemDeployments, deploymentIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/deployments`, menuItemDeployments, deploymentIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/services`, menuItemServices, serviceIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/services`, menuItemServices, serviceIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/jobs`, menuItemJobs, jobIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/jobs`, menuItemJobs, jobIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/pods`, menuItemPods, podIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/pods`, menuItemPods, podIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/replicasets`, menuItemReplicaSets, replicaSetIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/replicasets`, menuItemReplicaSets, replicaSetIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/replicationcontrollers`, menuItemReplicationControllers, replicaSetIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/replicationcontrollers`, menuItemReplicationControllers, replicaSetIcon)} - { this.menuItem(`/namespaces/${selectedNamespace}/statefulsets`, menuItemStatefulSets, statefulSetIcon) } + {this.menuItem(`/namespaces/${selectedNamespace}/statefulsets`, menuItemStatefulSets, statefulSetIcon)} @@ -566,14 +566,14 @@ class NavigationBase extends React.Component { sidebarHeadingTools - { this.menuItem('/tap', menuItemTap, ) } - { this.menuItem('/top', menuItemTop, ) } - { this.menuItem('/routes', menuItemRoutes, ) } + {this.menuItem('/tap', menuItemTap, )} + {this.menuItem('/top', menuItemTop, )} + {this.menuItem('/routes', menuItemRoutes, )} - { this.menuItem( + {this.menuItem( '/community', menuItemCommunity, , this.handleCommunityClick, - ) } + )} - { this.menuItem( + {this.menuItem( '/extensions', menuItemExtension, , @@ -653,7 +653,7 @@ class NavigationBase extends React.Component {
{linkerdWordLogo}
- { !mobileSidebarOpen && // mobile view but no sidebar + {!mobileSidebarOpen && // mobile view but no sidebar @@ -682,6 +682,8 @@ class NavigationBase extends React.Component { } } +import { withRouter } from './util/withRouter.jsx'; + NavigationBase.propTypes = { api: PropTypes.shape({}).isRequired, checkNamespaceMatch: PropTypes.func.isRequired, @@ -690,8 +692,8 @@ NavigationBase.propTypes = { PropTypes.object, ]).isRequired, isPageVisible: PropTypes.bool.isRequired, - history: ReactRouterPropTypes.history.isRequired, - location: ReactRouterPropTypes.location.isRequired, + history: PropTypes.shape({}).isRequired, + location: PropTypes.shape({}).isRequired, pathPrefix: PropTypes.string.isRequired, releaseVersion: PropTypes.string.isRequired, selectedNamespace: PropTypes.string.isRequired, @@ -700,4 +702,4 @@ NavigationBase.propTypes = { uuid: PropTypes.string.isRequired, }; -export default withPageVisibility(withContext(withStyles(styles, { withTheme: true })(NavigationBase))); +export default withRouter(withPageVisibility(withContext(withStyles(styles, { withTheme: true })(NavigationBase)))); diff --git a/web/app/js/components/Navigation.test.jsx b/web/app/js/components/Navigation.test.jsx index 0be0c0877230e..96e37e3a84fff 100644 --- a/web/app/js/components/Navigation.test.jsx +++ b/web/app/js/components/Navigation.test.jsx @@ -1,20 +1,19 @@ import _merge from 'lodash/merge'; import ApiHelpers from './util/ApiHelpers.jsx'; -import { BrowserRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router-dom'; import React from 'react'; import mediaQuery from 'css-mediaquery'; import Navigation from './Navigation.jsx'; import sinon from 'sinon'; import sinonStubPromise from 'sinon-stub-promise'; import { mount } from 'enzyme'; -import { createMemoryHistory } from 'history'; import { i18nWrap } from '../../test/testHelpers.jsx'; function createMatchMedia(width) { return query => ({ matches: mediaQuery.match(query, { width }), - addListener: () => {}, - removeListener: () => {}, + addListener: () => { }, + removeListener: () => { }, }); } @@ -32,16 +31,15 @@ const newVer = "edge-2.3.4"; const defaultProps = { api: ApiHelpers(''), - checkNamespaceMatch: () => {}, + checkNamespaceMatch: () => { }, ChildComponent: () => null, classes: {}, - history: createMemoryHistory('/namespaces'), location: loc, pathPrefix: '', releaseVersion: curVer, selectedNamespace: 'emojivoto', theme: {}, - updateNamespaceInContext: () => {}, + updateNamespaceInContext: () => { }, uuid: 'fakeuuid', }; @@ -68,9 +66,9 @@ describe('Navigation', () => { }); component = mount( - + - + ); return withPromise(() => { @@ -86,9 +84,9 @@ describe('Navigation', () => { }); component = mount( - + - + ); return withPromise(() => { @@ -109,9 +107,9 @@ describe('Navigation', () => { }); component = mount( - + - + ); return withPromise(() => { @@ -134,9 +132,9 @@ describe('Namespace Select Button', () => { const component = mount( i18nWrap( - + - + ) ); @@ -147,9 +145,9 @@ describe('Namespace Select Button', () => { it('renders emojivoto text', () => { const component = mount( i18nWrap( - + - + ) ); diff --git a/web/app/js/components/util/withRouter.jsx b/web/app/js/components/util/withRouter.jsx new file mode 100644 index 0000000000000..17a79198a1696 --- /dev/null +++ b/web/app/js/components/util/withRouter.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; + +export function withRouter(Component) { + function ComponentWithRouterProp(props) { + const location = useLocation(); + const navigate = useNavigate(); + const params = useParams(); + + // Map v6 hooks to v5 props: history (with push/replace), location, match + return ( + navigate(path, { replace: true, state }), + location, + }} + match={{ params }} + /> + ); + } + + return ComponentWithRouterProp; +} diff --git a/web/app/js/index.js b/web/app/js/index.js index 99c57493d58da..c5c06e25f9d15 100644 --- a/web/app/js/index.js +++ b/web/app/js/index.js @@ -122,102 +122,101 @@ const AppHTML = function() { - - - - - - - - - - - + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> + element={} /> } /> - - + element={} /> + } /> + diff --git a/web/app/package.json b/web/app/package.json index c717d1df97df6..92e4f7decc1d5 100644 --- a/web/app/package.json +++ b/web/app/package.json @@ -34,8 +34,7 @@ "react-dom": "16.14.0", "react-linkify": "1.0.0-alpha", "react-page-visibility": "^7.0.0", - "react-router-dom": "5.3.4", - "react-router-prop-types": "1.0.5", + "react-router-dom": "^6.22.3", "regenerator-runtime": "^0.14.1", "use-query-params": "2.2.2", "whatwg-fetch": "3.6.20" @@ -68,7 +67,6 @@ "eslint-plugin-react-hooks": "^4.6.2", "eslint-webpack-plugin": "^4.2.0", "file-loader": "^6.2.0", - "history": "5.3.0", "html-webpack-plugin": "^5.6.6", "jest": "^30.1.3", "jest-environment-jsdom": "^30.2.0", diff --git a/web/app/test/testHelpers.jsx b/web/app/test/testHelpers.jsx index f942f851c79e9..dda984c08bd85 100644 --- a/web/app/test/testHelpers.jsx +++ b/web/app/test/testHelpers.jsx @@ -1,8 +1,7 @@ +import React from 'react'; import _merge from 'lodash/merge'; import ApiHelpers from '../js/components/util/ApiHelpers.jsx'; -import { createMemoryHistory } from 'history'; -import React from 'react'; -import { Route, Router } from 'react-router-dom'; +import { Route, Routes, MemoryRouter } from 'react-router-dom'; import { I18nProvider } from '@lingui/react'; import { i18n } from '@lingui/core'; import { en } from 'make-plural/plurals' @@ -20,14 +19,16 @@ i18n.loadLocaleData('en'); i18n.load('en', catalogEn.messages); i18n.activate('en'); -export function routerWrap(Component, extraProps={}, route="/", currentLoc="/") { +export function routerWrap(Component, extraProps = {}, route = "/", currentLoc = "/") { const createElement = (ComponentToWrap, props) => ( ); return ( - - createElement(Component, props)} /> - + + + + + ); } @@ -39,4 +40,4 @@ export function i18nWrap(Component) { ); } -export function i18nAndRouterWrap(component, props) { return i18nWrap(routerWrap(component, props))}; +export function i18nAndRouterWrap(component, props) { return i18nWrap(routerWrap(component, props)) }; diff --git a/web/app/yarn.lock b/web/app/yarn.lock index dbc6993aa8789..6731be186a5eb 100644 --- a/web/app/yarn.lock +++ b/web/app/yarn.lock @@ -1079,7 +1079,7 @@ "@babel/plugin-transform-react-jsx-development" "^7.27.1" "@babel/plugin-transform-react-pure-annotations" "^7.27.1" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.28.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.28.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": version "7.28.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b" integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA== @@ -2058,6 +2058,11 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1" integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww== +"@remix-run/router@1.23.2": + version "1.23.2" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.2.tgz#156c4b481c0bee22a19f7924728a67120de06971" + integrity sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w== + "@rtsao/scc@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8" @@ -2316,7 +2321,7 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== -"@types/prop-types@*", "@types/prop-types@^15.7.3": +"@types/prop-types@*": version "15.7.4" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== @@ -5781,26 +5786,7 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -history@5.3.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" - integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== - dependencies: - "@babel/runtime" "^7.7.6" - -history@^4.9.0: - version "4.10.1" - resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" - integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== - dependencies: - "@babel/runtime" "^7.1.2" - loose-envify "^1.2.0" - resolve-pathname "^3.0.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - value-equal "^1.0.1" - -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6543,11 +6529,6 @@ is-wsl@^3.1.0: dependencies: is-inside-container "^1.0.0" -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= - isarray@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" @@ -7433,7 +7414,7 @@ log-symbols@^4.1.0: chalk "^4.1.0" is-unicode-supported "^0.1.0" -loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -8101,13 +8082,6 @@ path-scurry@^1.11.1: lru-cache "^10.2.0" minipass "^5.0.0 || ^6.0.2 || ^7.0.0" -path-to-regexp@^1.7.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" - integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== - dependencies: - isarray "0.0.1" - path-to-regexp@~0.1.12: version "0.1.12" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7" @@ -8483,7 +8457,7 @@ react-dom@16.14.0: prop-types "^15.6.2" scheduler "^0.19.1" -react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.6: +react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8513,41 +8487,20 @@ react-page-visibility@^7.0.0: dependencies: prop-types "^15.7.2" -react-router-dom@5.3.4: - version "5.3.4" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6" - integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ== +react-router-dom@^6.22.3: + version "6.30.3" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.30.3.tgz#42ae6dc4c7158bfb0b935f162b9621b29dddf740" + integrity sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag== dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - loose-envify "^1.3.1" - prop-types "^15.6.2" - react-router "5.3.4" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" + "@remix-run/router" "1.23.2" + react-router "6.30.3" -react-router-prop-types@1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/react-router-prop-types/-/react-router-prop-types-1.0.5.tgz#2e671d8412a793106bf70dc15c9ecc83ea4bc15b" - integrity sha512-q1xlFU2ol2U5zeVbA5hyBuxD3scHenqgMgCTuJQUanA2SyG8A3Fb1S6DleOo1cnGJB5Q05hnLge64kRj+xsuPA== - dependencies: - "@types/prop-types" "^15.7.3" - prop-types "^15.7.2" - -react-router@5.3.4: - version "5.3.4" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5" - integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA== +react-router@6.30.3: + version "6.30.3" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.30.3.tgz#994b3ccdbe0e81fe84d4f998100f62584dfbf1cf" + integrity sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw== dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - hoist-non-react-statics "^3.1.0" - loose-envify "^1.3.1" - path-to-regexp "^1.7.0" - prop-types "^15.6.2" - react-is "^16.6.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" + "@remix-run/router" "1.23.2" react-test-renderer@16.14.0, react-test-renderer@^16.0.0-0: version "16.14.0" @@ -8822,11 +8775,6 @@ resolve-from@^5.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69" integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw== -resolve-pathname@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" - integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== - resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4: version "1.22.8" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" @@ -9700,12 +9648,7 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== -tiny-invariant@^1.0.2: - version "1.1.0" - resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" - integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== - -tiny-warning@^1.0.0, tiny-warning@^1.0.2: +tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -10154,11 +10097,6 @@ v8-to-istanbul@^9.0.1: "@types/istanbul-lib-coverage" "^2.0.1" convert-source-map "^1.6.0" -value-equal@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" - integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== - vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" From 328a96f2a59bc9ae11279709bfb5b252cee49467 Mon Sep 17 00:00:00 2001 From: raza-khan0108 Date: Sun, 1 Mar 2026 00:35:05 +0530 Subject: [PATCH 2/2] Fix ReactRouter adapter imports and shim match.url for legacy compatibility --- web/app/js/components/util/withRouter.jsx | 2 +- web/app/js/index.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/web/app/js/components/util/withRouter.jsx b/web/app/js/components/util/withRouter.jsx index 17a79198a1696..9bb36619e43f9 100644 --- a/web/app/js/components/util/withRouter.jsx +++ b/web/app/js/components/util/withRouter.jsx @@ -17,7 +17,7 @@ export function withRouter(Component) { replace: (path, state) => navigate(path, { replace: true, state }), location, }} - match={{ params }} + match={{ params, url: location.pathname }} /> ); } diff --git a/web/app/js/index.js b/web/app/js/index.js index c5c06e25f9d15..c64ef2fa61341 100644 --- a/web/app/js/index.js +++ b/web/app/js/index.js @@ -1,7 +1,7 @@ import '../css/styles.css'; import '../img/favicon.png'; // needs to be referenced somewhere so webpack bundles it -import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; +import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; import { DETECTORS, LocaleResolver, TRANSFORMERS } from 'locales-detector'; import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'; @@ -14,7 +14,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import _find from 'lodash/find'; import _isEmpty from 'lodash/isEmpty'; -import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'; +import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import ApiHelpers from './components/util/ApiHelpers.jsx'; import AppContext from './components/util/AppContext.jsx'; import Community from './components/Community.jsx'; @@ -49,8 +49,8 @@ const pathArray = window.location.pathname.split('/'); // defaultNamespace if (pathArray[0] === '' && pathArray[1] === 'namespaces' && pathArray[2]) { defaultNamespace = pathArray[2]; -// if the current URL path is a legacy path such as `/daemonsets`, the -// defaultNamespace should be "_all", unless the path is `/namespaces` + // if the current URL path is a legacy path such as `/daemonsets`, the + // defaultNamespace should be "_all", unless the path is `/namespaces` } else if (pathArray.length === 2 && pathArray[1] !== '' && pathArray[1] !== 'namespaces') { defaultNamespace = '_all'; } @@ -70,7 +70,7 @@ const langOptions = { }, }; const selectedLocale = - _find(detectedLocales, l => !_isEmpty(langOptions[l])) || 'en'; + _find(detectedLocales, l => !_isEmpty(langOptions[l])) || 'en'; const selectedLangOptions = langOptions[selectedLocale] || langOptions.en; i18n.loadLocaleData(selectedLocale, { plurals: selectedLangOptions.plurals }); @@ -114,7 +114,7 @@ class App extends React.Component { } } -const AppHTML = function() { +const AppHTML = function () { const theme = createTheme(dashboardTheme); return (