chore(deps): Upgrade react-router-dom to v6 MAASENG-1606 (#5369)

Co-authored-by: Peter Makowski <peter.makowski@canonical.com>

package.json

@@ -54,6 +54,7 @@
     "date-fns": "2.30.0",
     "fast-deep-equal": "3.1.3",
     "formik": "2.4.5",
+    "history": "5.3.0",
     "http-proxy-middleware": "2.0.6",
     "human-interval": "2.0.1",
     "js-file-download": "0.4.12",
@@ -65,8 +66,7 @@
     "react-dropzone": "14.2.3",
     "react-portal": "4.2.2",
     "react-redux": "8.0.5",
-    "react-router-dom": "5.3.4",
-    "react-router-dom-v5-compat": "6.22.3",
+    "react-router-dom": "6.22.3",
     "react-storage-hooks": "4.0.1",
     "react-useportal": "1.0.19",
     "reconnecting-websocket": "4.4.0",

src/__snapshots__/root-reducer.test.ts.snap

@@ -278,6 +278,7 @@ exports[`rootReducer > should reset app to initial state on LOGOUT_SUCCESS, exce
     "action": "POP",
     "location": {
       "hash": "",
+      "key": "",
       "pathname": "/",
       "search": "",
       "state": null,

src/app/Routes.test.tsx

@@ -197,13 +197,13 @@ describe("Routes", () => {
     expect(window.location.pathname).toBe(urls.machines.index);
   });
 
-  it("redirects from Settings base URL to configuration", async () => {
+  it("redirects from Settings base URL to general", async () => {
     renderWithBrowserRouter(<Routes />, {
       route: urls.settings.index,
       state,
     });
     await waitFor(() =>
-      expect(window.location.pathname).toBe(urls.settings.configuration.index)
+      expect(window.location.pathname).toBe(urls.settings.configuration.general)
     );
   });
 

src/app/Routes.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 
-import { Redirect, Route, Routes as ReactRouterRoutes } from "react-router-dom";
+import { Navigate, Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
 import ErrorBoundary from "@/app/base/components/ErrorBoundary";
 import urls from "@/app/base/urls";
@@ -40,7 +40,10 @@ const ZonesList = lazy(() => import("@/app/zones/views/ZonesList"));
 
 const Routes = (): JSX.Element => (
   <ReactRouterRoutes>
-    <Route element={<Redirect to={urls.machines.index} />} path={urls.index} />
+    <Route
+      element={<Navigate replace to={urls.machines.index} />}
+      path={urls.index}
+    />
     <Route
       element={
         <ErrorBoundary>
@@ -74,11 +77,11 @@ const Routes = (): JSX.Element => (
       path={`${urls.networkDiscovery.index}/*`}
     />
     <Route
-      element={<Redirect to={urls.networkDiscovery.index} />}
+      element={<Navigate replace to={urls.networkDiscovery.index} />}
       path={urls.networkDiscovery.legacyIndex}
     />
     <Route
-      element={<Redirect to={urls.networkDiscovery.configuration} />}
+      element={<Navigate replace to={urls.networkDiscovery.configuration} />}
       path={urls.networkDiscovery.legacyConfiguration}
     />
     <Route

src/app/base/components/AppSideNavigation/AppSideNavigation.test.tsx

@@ -1,6 +1,7 @@
 import { createMemoryHistory } from "history";
 import { Provider } from "react-redux";
-import { BrowserRouter, Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { HistoryRouter as Router } from "redux-first-history/rr6";
 import configureStore from "redux-mock-store";
 
 import AppSideNavigation from "./AppSideNavigation";

src/app/base/components/AppSidePanel/AppSidePanel.tsx

@@ -3,10 +3,10 @@ import { useEffect, type ReactNode } from "react";
 import { ContentSection } from "@canonical/maas-react-components";
 import { useOnEscapePressed } from "@canonical/react-components";
 import classNames from "classnames";
-import { useHistory } from "react-router-dom";
 
 import type { SidePanelSize } from "@/app/base/side-panel-context";
 import { useSidePanel } from "@/app/base/side-panel-context";
+import { history } from "@/redux-store";
 
 export type AppSidePanelProps = {
   title: string | null;
@@ -16,7 +16,6 @@ export type AppSidePanelProps = {
 
 const useCloseSidePanelOnRouteChange = (): void => {
   const { setSidePanelContent } = useSidePanel();
-  const history = useHistory();
 
   // close side panel on route change
   useEffect(() => {
@@ -25,7 +24,7 @@ const useCloseSidePanelOnRouteChange = (): void => {
     return () => {
       unlisten();
     };
-  }, [history, setSidePanelContent]);
+  }, [setSidePanelContent]);
 };
 
 const useResetSidePanelOnUnmount = (): void => {

src/app/base/components/node/NodeLogs/NodeLogs.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from "@canonical/react-components";
-import { Route, useLocation, Link } from "react-router-dom";
+import { Route, useLocation, Link, Routes } from "react-router-dom";
 
 import DownloadMenu from "./DownloadMenu";
 import EventLogs from "./EventLogs";
@@ -52,19 +52,15 @@ const NodeLogs = ({ node, urls }: Props): JSX.Element => {
         />
         <DownloadMenu node={node} />
       </div>
-      <Route
-        exact
-        path={urls.installationOutput(null)}
-        render={() => <InstallationOutput node={node} />}
-      />
-      {[urls.index(null), urls.events(null)].map((path) => (
+      <Routes>
         <Route
-          exact
-          key={path}
-          path={path}
-          render={() => <EventLogs node={node} />}
+          element={<InstallationOutput node={node} />}
+          path={urls.installationOutput(null)}
         />
-      ))}
+        {[urls.index(null), urls.events(null)].map((path) => (
+          <Route element={<EventLogs node={node} />} key={path} path={path} />
+        ))}
+      </Routes>
     </>
   );
 };

src/app/controllers/views/ControllerDetails/ControllerDetails.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
-import { Redirect, Routes, Route } from "react-router-dom";
+import { Navigate, Routes, Route } from "react-router-dom";
 
 import ControllerCommissioning from "./ControllerCommissioning";
 import ControllerConfiguration from "./ControllerConfiguration";
@@ -89,7 +89,10 @@ const ControllerDetails = (): JSX.Element => {
         <Routes>
           <Route
             element={
-              <Redirect to={urls.controllers.controller.summary({ id })} />
+              <Navigate
+                replace
+                to={urls.controllers.controller.summary({ id })}
+              />
             }
             index
           />

src/app/controllers/views/ControllerList/ControllerList.test.tsx

@@ -1,5 +1,5 @@
 import { Provider } from "react-redux";
-import { useLocation } from "react-router";
+import { Routes, useLocation } from "react-router";
 import { MemoryRouter, Route } from "react-router-dom";
 import configureStore from "redux-mock-store";
 
@@ -54,7 +54,9 @@ describe("ControllerList", () => {
           ]}
         >
           <ControllerList />
-          <Route path="*" render={() => <FetchRoute />} />
+          <Routes>
+            <Route element={<FetchRoute />} path="*" />
+          </Routes>
         </MemoryRouter>
       </Provider>
     );

src/app/devices/views/DeviceDetails/DeviceDetails.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
-import { Redirect, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 import DeviceConfiguration from "./DeviceConfiguration";
 import DeviceDetailsHeader from "./DeviceDetailsHeader";
@@ -132,7 +132,7 @@ const DeviceDetails = (): JSX.Element => {
         path={getRelativeRoute(urls.devices.device.configuration(null), base)}
       />
       <Route
-        element={<Redirect to={urls.devices.device.summary({ id })} />}
+        element={<Navigate replace to={urls.devices.device.summary({ id })} />}
         path="/"
       />
     </Routes>

src/app/devices/views/DeviceList/DeviceList.test.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router";
+import { Routes, useLocation } from "react-router";
 import { Route } from "react-router-dom";
 
 import DeviceList from "./DeviceList";
@@ -36,7 +36,9 @@ describe("DeviceList", () => {
     renderWithBrowserRouter(
       <>
         <DeviceList />
-        <Route component={FetchRoute} path="*" />
+        <Routes>
+          <Route element={<FetchRoute />} path="*" />
+        </Routes>
       </>,
       { route: "/machines?q=test+search", state }
     );

src/app/devices/views/DeviceList/DeviceListHeader/DeviceListHeader.test.tsx

@@ -1,5 +1,3 @@
-import { MemoryRouter } from "react-router-dom";
-
 import DeviceListHeader from "./DeviceListHeader";
 
 import { DeviceSidePanelViews } from "@/app/devices/constants";
@@ -64,13 +62,11 @@ describe("DeviceListHeader", () => {
   it("can open the add device form", async () => {
     const setSidePanelContent = vi.fn();
     renderWithBrowserRouter(
-      <MemoryRouter>
-        <DeviceListHeader
-          searchFilter=""
-          setSearchFilter={vi.fn()}
-          setSidePanelContent={setSidePanelContent}
-        />
-      </MemoryRouter>,
+      <DeviceListHeader
+        searchFilter=""
+        setSearchFilter={vi.fn()}
+        setSidePanelContent={setSidePanelContent}
+      />,
       { state }
     );
     await userEvent.click(screen.getByRole("button", { name: "Add device" }));

src/app/intro/components/IntroSection/IntroSection.test.tsx

@@ -1,5 +1,5 @@
 import { createMemoryHistory } from "history";
-import { Router } from "react-router-dom";
+import { HistoryRouter as Router } from "redux-first-history/rr6";
 
 import IntroSection from "./IntroSection";
 

src/app/kvm/components/SettingsBackLink/SettingsBackLink.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { createMemoryHistory } from "history";
-import { Router } from "react-router-dom";
+import { HistoryRouter as Router } from "redux-first-history/rr6";
 
 import SettingsBackLink from "./SettingsBackLink";
 

src/app/kvm/components/SettingsBackLink/SettingsBackLink.tsx

@@ -1,15 +1,14 @@
 import { Icon } from "@canonical/react-components";
-import type { Location } from "history";
 import { Link, useLocation } from "react-router-dom";
 
 type LocationState = {
   from?: string;
 };
 
 const SettingsBackLink = (): JSX.Element | null => {
-  const location = useLocation<Location>();
+  const location = useLocation();
   const state = location.state as LocationState;
-  if (state === undefined || !state.from) {
+  if (!state?.from) {
     return null;
   }
 

src/app/kvm/views/LXDClusterDetails/LXDClusterDetails.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 import {
-  Redirect,
+  Navigate,
   Route,
   Routes,
   useLocation,
@@ -163,7 +163,9 @@ const LXDClusterDetails = (): JSX.Element => {
           path={getRelativeRoute(urls.kvm.lxd.cluster.host.edit(null), base)}
         />
         <Route
-          element={<Redirect to={urls.kvm.lxd.cluster.hosts({ clusterId })} />}
+          element={
+            <Navigate replace to={urls.kvm.lxd.cluster.hosts({ clusterId })} />
+          }
           path={getRelativeRoute(urls.kvm.lxd.cluster.index(null), base)}
         />
         <Route

src/app/kvm/views/LXDClusterDetails/LXDClusterDetailsRedirect/LXDClusterDetailsRedirect.test.tsx

@@ -1,7 +1,7 @@
 import { createMemoryHistory } from "history";
 import { Provider } from "react-redux";
-import { Router } from "react-router";
 import { Route, Routes } from "react-router-dom";
+import { HistoryRouter as Router } from "redux-first-history/rr6";
 import configureStore from "redux-mock-store";
 
 import LXDClusterDetailsRedirect, { Label } from "./LXDClusterDetailsRedirect";

src/app/kvm/views/LXDClusterDetails/LXDClusterDetailsRedirect/LXDClusterDetailsRedirect.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 import ModelNotFound from "@/app/base/components/ModelNotFound";
 import { useGetURLId } from "@/app/base/hooks/urls";
@@ -40,7 +40,10 @@ const LXDClusterDetailsRedirect = ({ clusterId }: Props): JSX.Element => {
     );
   }
   return (
-    <Redirect to={urls.kvm.lxd.cluster.host.edit({ clusterId, hostId })} />
+    <Navigate
+      replace
+      to={urls.kvm.lxd.cluster.host.edit({ clusterId, hostId })}
+    />
   );
 };
 

src/app/kvm/views/LXDClusterDetails/LXDClusterHosts/LXDClusterHostsTable/LXDClusterHostsTable.tsx

@@ -176,7 +176,7 @@ const LXDClusterHostsTable = ({
   searchFilter,
   setSidePanelContent,
 }: Props): JSX.Element => {
-  const location = useLocation<Location>();
+  const location = useLocation();
   const pools = useSelector(poolSelectors.all);
   const podsLoaded = useSelector(podSelectors.loaded);
   const poolsLoaded = useSelector(poolSelectors.loaded);

src/app/kvm/views/LXDSingleDetails/LXDSingleDetails.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import { useSelector } from "react-redux";
 import {
-  Redirect,
+  Navigate,
   Route,
   Routes,
   useLocation,
@@ -123,7 +123,7 @@ const LXDSingleDetails = (): JSX.Element => {
             path={getRelativeRoute(urls.kvm.lxd.single.edit(null), base)}
           />
           <Route
-            element={<Redirect to={urls.kvm.lxd.single.vms({ id })} />}
+            element={<Navigate replace to={urls.kvm.lxd.single.vms({ id })} />}
             path="/"
           />
         </Routes>

src/app/kvm/views/LXDSingleDetails/LXDSingleSettings/LXDSingleSettings.test.tsx

@@ -34,9 +34,7 @@ describe("LXDSingleSettings", () => {
     render(
       <MemoryRouter>
         <Provider store={store}>
-          <MemoryRouter>
-            <LXDSingleSettings id={1} setSidePanelContent={vi.fn()} />
-          </MemoryRouter>
+          <LXDSingleSettings id={1} setSidePanelContent={vi.fn()} />
         </Provider>
       </MemoryRouter>
     );

src/app/kvm/views/VirshDetails/VirshDetails.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { useSelector } from "react-redux";
-import { Redirect, Route, Routes, useNavigate } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 
 import VirshDetailsHeader from "./VirshDetailsHeader";
 import VirshResources from "./VirshResources";
@@ -82,7 +82,9 @@ const VirshDetails = (): JSX.Element => {
             path={getRelativeRoute(urls.kvm.virsh.details.edit(null), base)}
           />
           <Route
-            element={<Redirect to={urls.kvm.virsh.details.resources({ id })} />}
+            element={
+              <Navigate replace to={urls.kvm.virsh.details.resources({ id })} />
+            }
             path="/"
           />
         </Routes>