chore: Bump react-router-dom to react-router v7 and fix navigate for limit ranges and resource quotas

Author: mrCherry97

cypress/support/component.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount } from 'cypress/react18';
 import { ThemeProvider } from '@ui5/webcomponents-react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { RecoilRoot } from 'recoil';
 
 import i18n from 'i18next';

package-lock.json

@@ -102,7 +102,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.1",
-    "react-router-dom": "^6.3.0",
+    "react-router": "^7.4.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-tippy": "^1.4.0",
     "recoil": "^0.7.5",

package.json

@@ -20,7 +20,7 @@ import {
   Result,
 } from '../types';
 import { K8sResource } from 'types';
-import { matchPath } from 'react-router-dom';
+import { matchPath } from 'react-router';
 
 function getAutocompleteEntries({
   tokens,

src/command-pallette/CommandPalletteUI/handlers/clusterResourceHandler.ts

@@ -14,7 +14,7 @@ import { clusterState } from 'state/clusterAtom';
 import { availableNodesSelector } from 'state/navigation/availableNodesSelector';
 import { CommandPaletteContext, HelpEntries, Result } from './types';
 import { useClustersInfo } from 'state/utils/getClustersInfo';
-import { useNavigate, To } from 'react-router-dom';
+import { useNavigate, To } from 'react-router';
 import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom';
 
 type useSearchResultsProps = {

src/command-pallette/CommandPalletteUI/useSearchResults.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
@@ -121,10 +121,9 @@ export default function App() {
                   path="cluster/:currentClusterName"
                   element={<Navigate to="overview" />}
                 />
-                <Route
-                  path="cluster/:currentClusterName/*"
-                  element={<ClusterRoutes />}
-                />
+                <Route path="cluster/:currentClusterName">
+                  <Route path="*" element={<ClusterRoutes />} />
+                </Route>
                 {makeGardenerLoginRoute()}
               </Routes>
               <Preferences />

src/components/App/App.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
-import { Route, Routes, useSearchParams } from 'react-router-dom';
+import {
+  Route,
+  Routes,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
-import { useNavigate, useParams } from 'react-router-dom';
 
 import { WithTitle } from 'shared/hooks/useWindowTitle';
 import { ClusterOverview } from 'components/Clusters/views/ClusterOverview/ClusterOverview';
@@ -91,7 +96,9 @@ export default function ClusterRoutes() {
       {extensibilityRoutes}
       {resourceRoutes}
       {otherRoutes}
-      <Route path="namespaces/:namespaceId/*" element={<NamespaceRoutes />} />
+      <Route path="namespaces/:namespaceId">
+        <Route path="*" element={<NamespaceRoutes />} />
+      </Route>
     </Routes>
   );
 }

src/components/App/ClusterRoutes.js

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import pluralize from 'pluralize';
 import i18next from 'i18next';
-import { Route, useParams } from 'react-router-dom';
+import { Route, useParams } from 'react-router';
 import { useRecoilValue } from 'recoil';
 import { FlexibleColumnLayout } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';

src/components/App/ExtensibilityRoutes.js

@@ -1,6 +1,6 @@
 import { Button, MessageBox, Text } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router';
 import { useRecoilValue } from 'recoil';
 import { extensionsState } from 'state/navigation/extensionsAtom';
 

src/components/App/IncorrectPath.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Routes, Route, useParams } from 'react-router-dom';
+import { Routes, Route, useParams } from 'react-router';
 import { useRecoilValue } from 'recoil';
 import { useTranslation } from 'react-i18next';