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

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,7 +1,6 @@
 import { lazy } from "react";
 
-import { Redirect } from "react-router-dom";
-import { Route, Routes as ReactRouterRoutes } from "react-router-dom-v5-compat";
+import { Navigate, Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
 import ErrorBoundary from "@/app/base/components/ErrorBoundary";
 import urls from "@/app/base/urls";
@@ -41,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>
@@ -75,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/AppSideNavItem/AppSideNavItem.tsx

@@ -2,7 +2,7 @@ import type { MouseEvent, ReactNode } from "react";
 
 import { Navigation } from "@canonical/maas-react-components";
 import classNames from "classnames";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import type { SideNavigationProps } from "../AppSideNavigation";
 import type { NavItem } from "../types";

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

@@ -1,7 +1,7 @@
 import { createMemoryHistory } from "history";
 import { Provider } from "react-redux";
-import { BrowserRouter, Router } from "react-router-dom";
-import { CompatRouter, Route, Routes } from "react-router-dom-v5-compat";
+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";
@@ -21,8 +21,8 @@ import {
 } from "@/testing/utils";
 
 const mockUseNavigate = vi.fn();
-vi.mock("react-router-dom-v5-compat", async () => {
-  const actual: object = await vi.importActual("react-router-dom-v5-compat");
+vi.mock("react-router-dom", async () => {
+  const actual: object = await vi.importActual("react-router-dom");
   return {
     ...actual,
     useNavigate: () => mockUseNavigate,
@@ -102,9 +102,7 @@ describe("GlobalSideNav", () => {
     render(
       <Provider store={store}>
         <BrowserRouter>
-          <CompatRouter>
-            <AppSideNavigation />
-          </CompatRouter>
+          <AppSideNavigation />
         </BrowserRouter>
       </Provider>
     );
@@ -339,11 +337,9 @@ describe("GlobalSideNav", () => {
     render(
       <Provider store={store}>
         <Router history={history}>
-          <CompatRouter>
-            <Routes>
-              <Route element={<AppSideNavigation />} path="*" />
-            </Routes>
-          </CompatRouter>
+          <Routes>
+            <Route element={<AppSideNavigation />} path="*" />
+          </Routes>
         </Router>
       </Provider>
     );

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

@@ -2,7 +2,7 @@ import { useEffect, useMemo } from "react";
 
 import { Navigation, NavigationBar } from "@canonical/maas-react-components";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate, useLocation, useMatch } from "react-router-dom-v5-compat";
+import { useNavigate, useLocation, useMatch } from "react-router-dom";
 import { useStorageState } from "react-storage-hooks";
 
 import AppSideNavItems from "./AppSideNavItems";

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

@@ -1,5 +1,5 @@
 import { Navigation } from "@canonical/maas-react-components";
-import { Link, useLocation } from "react-router-dom-v5-compat";
+import { Link, useLocation } from "react-router-dom";
 
 import { isSelected } from "../utils";
 

src/app/base/components/AppSideNavigation/utils.ts

@@ -1,4 +1,4 @@
-import { matchPath } from "react-router-dom-v5-compat";
+import { matchPath } from "react-router-dom";
 
 import type { NavItem } from "./types";
 

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/ControllerLink/ControllerLink.test.tsx

@@ -1,6 +1,5 @@
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
-import { CompatRouter } from "react-router-dom-v5-compat";
 import configureStore from "redux-mock-store";
 
 import ControllerLink, { Labels } from "./ControllerLink";
@@ -19,9 +18,7 @@ it("handles when controllers are loading", () => {
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <ControllerLink systemId="abc123" />
-        </CompatRouter>
+        <ControllerLink systemId="abc123" />
       </MemoryRouter>
     </Provider>
   );
@@ -37,9 +34,7 @@ it("handles when a controller does not exist", () => {
   const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <ControllerLink systemId="abc123" />
-        </CompatRouter>
+        <ControllerLink systemId="abc123" />
       </MemoryRouter>
     </Provider>
   );
@@ -62,9 +57,7 @@ it("renders a link if controllers have loaded and it exists", () => {
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <ControllerLink systemId={controller.system_id} />
-        </CompatRouter>
+        <ControllerLink systemId={controller.system_id} />
       </MemoryRouter>
     </Provider>
   );

src/app/base/components/ControllerLink/ControllerLink.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { useFetchActions } from "@/app/base/hooks";
 import urls from "@/app/base/urls";

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

@@ -1,6 +1,5 @@
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
-import { CompatRouter } from "react-router-dom-v5-compat";
 import configureStore from "redux-mock-store";
 
 import DHCPTable, { TestIds } from "./DHCPTable";
@@ -51,12 +50,10 @@ describe("DHCPTable", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machine/abc123", key: "testKey" }]}
         >
-          <CompatRouter>
-            <DHCPTable
-              modelName={MachineMeta.MODEL}
-              node={state.machine.items[0]}
-            />
-          </CompatRouter>
+          <DHCPTable
+            modelName={MachineMeta.MODEL}
+            node={state.machine.items[0]}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -79,12 +76,10 @@ describe("DHCPTable", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machine/abc123", key: "testKey" }]}
         >
-          <CompatRouter>
-            <DHCPTable
-              modelName={MachineMeta.MODEL}
-              node={state.machine.items[0]}
-            />
-          </CompatRouter>
+          <DHCPTable
+            modelName={MachineMeta.MODEL}
+            node={state.machine.items[0]}
+          />
         </MemoryRouter>
       </Provider>
     );
@@ -108,9 +103,7 @@ describe("DHCPTable", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machine/abc123", key: "testKey" }]}
         >
-          <CompatRouter>
-            <DHCPTable modelName={MachineMeta.MODEL} subnets={subnets} />
-          </CompatRouter>
+          <DHCPTable modelName={MachineMeta.MODEL} subnets={subnets} />
         </MemoryRouter>
       </Provider>
     );
@@ -139,12 +132,10 @@ describe("DHCPTable", () => {
         <MemoryRouter
           initialEntries={[{ pathname: "/machine/abc123", key: "testKey" }]}
         >
-          <CompatRouter>
-            <DHCPTable
-              modelName={MachineMeta.MODEL}
-              node={state.machine.items[0]}
-            />
-          </CompatRouter>
+          <DHCPTable
+            modelName={MachineMeta.MODEL}
+            node={state.machine.items[0]}
+          />
         </MemoryRouter>
       </Provider>
     );

src/app/base/components/DHCPTable/DHCPTable.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { ExternalLink } from "@canonical/maas-react-components";
 import { List, MainTable } from "@canonical/react-components";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import TitledSection from "../TitledSection";
 

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

@@ -1,6 +1,5 @@
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
-import { CompatRouter } from "react-router-dom-v5-compat";
 import configureStore from "redux-mock-store";
 
 import DeviceLink, { Labels } from "./DeviceLink";
@@ -19,9 +18,7 @@ it("handles when devices are loading", () => {
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <DeviceLink systemId="abc123" />
-        </CompatRouter>
+        <DeviceLink systemId="abc123" />
       </MemoryRouter>
     </Provider>
   );
@@ -37,9 +34,7 @@ it("handles when a device does not exist", () => {
   const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <DeviceLink systemId="abc123" />
-        </CompatRouter>
+        <DeviceLink systemId="abc123" />
       </MemoryRouter>
     </Provider>
   );
@@ -56,9 +51,7 @@ it("renders a link if devices have loaded and it exists", () => {
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <CompatRouter>
-          <DeviceLink systemId={device.system_id} />
-        </CompatRouter>
+        <DeviceLink systemId={device.system_id} />
       </MemoryRouter>
     </Provider>
   );

src/app/base/components/DeviceLink/DeviceLink.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { useFetchActions } from "@/app/base/hooks";
 import urls from "@/app/base/urls";