From db98e442c30ac8866384d7404859955dd49eecbc Mon Sep 17 00:00:00 2001 From: Antonin Bas Date: Mon, 25 Nov 2024 11:19:22 -0800 Subject: [PATCH] Finish upgrading to react-router v7 See https://reactrouter.com/upgrading/v6 Signed-off-by: Antonin Bas --- client/web/antrea-ui/package.json | 2 +- client/web/antrea-ui/src/App.test.tsx | 2 +- client/web/antrea-ui/src/App.tsx | 2 +- client/web/antrea-ui/src/components/nav.tsx | 2 +- client/web/antrea-ui/src/index.tsx | 6 ++---- client/web/antrea-ui/src/routes/settings.test.tsx | 2 +- client/web/antrea-ui/src/routes/traceflow.test.tsx | 6 +++--- client/web/antrea-ui/src/routes/traceflow.tsx | 2 +- client/web/antrea-ui/src/routes/traceflowresult.tsx | 2 +- client/web/antrea-ui/yarn.lock | 9 +-------- 10 files changed, 13 insertions(+), 22 deletions(-) diff --git a/client/web/antrea-ui/package.json b/client/web/antrea-ui/package.json index 13eaf72e..991d85de 100644 --- a/client/web/antrea-ui/package.json +++ b/client/web/antrea-ui/package.json @@ -25,7 +25,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.53.2", "react-redux": "^9.1.2", - "react-router-dom": "^7.0.1", + "react-router": "^7.0.1", "typescript": "^5.7.2", "vite": "^5.4.11", "vitest": "^2.1.5", diff --git a/client/web/antrea-ui/src/App.test.tsx b/client/web/antrea-ui/src/App.test.tsx index 327dcfeb..cfad93ba 100644 --- a/client/web/antrea-ui/src/App.test.tsx +++ b/client/web/antrea-ui/src/App.test.tsx @@ -17,7 +17,7 @@ import React, { ReactElement, useContext } from 'react'; import { act, render, screen, waitFor, RenderOptions } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import { Provider } from 'react-redux'; import App, { LoginWall, WaitForSettings } from './App'; import { setupStore, AppStore, setToken, store } from './store'; diff --git a/client/web/antrea-ui/src/App.tsx b/client/web/antrea-ui/src/App.tsx index 15db0074..e5008bed 100644 --- a/client/web/antrea-ui/src/App.tsx +++ b/client/web/antrea-ui/src/App.tsx @@ -17,7 +17,7 @@ import React, { useEffect, useState, useContext } from 'react'; import logo from './logo.svg'; import './App.css'; -import { Outlet, Link, useSearchParams } from "react-router-dom"; +import { Outlet, Link, useSearchParams } from "react-router"; import NavTab from './components/nav'; import Login from './components/login'; import { useLogout } from './components/logout'; diff --git a/client/web/antrea-ui/src/components/nav.tsx b/client/web/antrea-ui/src/components/nav.tsx index d74d9623..bfdf8398 100644 --- a/client/web/antrea-ui/src/components/nav.tsx +++ b/client/web/antrea-ui/src/components/nav.tsx @@ -15,7 +15,7 @@ */ import { useState } from 'react'; -import { Link } from "react-router-dom"; +import { Link } from "react-router"; import { CdsNavigation, CdsNavigationStart, CdsNavigationItem } from "@cds/react/navigation"; import { CdsIcon } from '@cds/react/icon'; import { diff --git a/client/web/antrea-ui/src/index.tsx b/client/web/antrea-ui/src/index.tsx index 95556886..51129f49 100644 --- a/client/web/antrea-ui/src/index.tsx +++ b/client/web/antrea-ui/src/index.tsx @@ -16,6 +16,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { createBrowserRouter } from 'react-router'; +import { RouterProvider } from 'react-router/dom'; import './index.css'; import App from './App'; import Summary from './routes/summary'; @@ -23,10 +25,6 @@ import Traceflow from './routes/traceflow'; import TraceflowResult from './routes/traceflowresult'; import Settings from './routes/settings'; import reportWebVitals from './reportWebVitals'; -import { - createBrowserRouter, - RouterProvider, -} from "react-router-dom"; const router = createBrowserRouter([ { diff --git a/client/web/antrea-ui/src/routes/settings.test.tsx b/client/web/antrea-ui/src/routes/settings.test.tsx index 2e492bc0..86316b6d 100644 --- a/client/web/antrea-ui/src/routes/settings.test.tsx +++ b/client/web/antrea-ui/src/routes/settings.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import Settings from './settings'; import { accountAPI } from '../api/account'; import { APIError } from '../api/common'; diff --git a/client/web/antrea-ui/src/routes/traceflow.test.tsx b/client/web/antrea-ui/src/routes/traceflow.test.tsx index 4776952b..a47196be 100644 --- a/client/web/antrea-ui/src/routes/traceflow.test.tsx +++ b/client/web/antrea-ui/src/routes/traceflow.test.tsx @@ -17,7 +17,7 @@ import { useLayoutEffect, useRef} from 'react'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router'; import Traceflow from './traceflow'; import { traceflowAPI, TraceflowSpec, TraceflowStatus } from '../api/traceflow'; @@ -42,8 +42,8 @@ const mockedTraceflowAPI = vi.mocked(traceflowAPI, true); const mockNavigate = vi.fn(); -vi.mock("react-router-dom", async () => { - const actual = await vi.importActual("react-router-dom"); +vi.mock("react-router", async () => { + const actual = await vi.importActual("react-router"); return { ...actual, useNavigate: () => mockNavigate, diff --git a/client/web/antrea-ui/src/routes/traceflow.tsx b/client/web/antrea-ui/src/routes/traceflow.tsx index f0b3a29f..d03ac1a5 100644 --- a/client/web/antrea-ui/src/routes/traceflow.tsx +++ b/client/web/antrea-ui/src/routes/traceflow.tsx @@ -15,7 +15,7 @@ */ import { useState, useEffect, useRef} from 'react'; -import { useNavigate, Outlet } from "react-router-dom"; +import { useNavigate, Outlet } from "react-router"; import { useForm, SubmitHandler } from "react-hook-form"; import { CdsAlertGroup, CdsAlert } from "@cds/react/alert"; import { CdsButton } from '@cds/react/button'; diff --git a/client/web/antrea-ui/src/routes/traceflowresult.tsx b/client/web/antrea-ui/src/routes/traceflowresult.tsx index b81c2933..53eddf17 100644 --- a/client/web/antrea-ui/src/routes/traceflowresult.tsx +++ b/client/web/antrea-ui/src/routes/traceflowresult.tsx @@ -15,7 +15,7 @@ */ import { useEffect, useRef} from 'react'; -import { useLocation } from "react-router-dom"; +import { useLocation } from "react-router"; import { TraceflowSpec, TraceflowStatus, TraceflowNodeResult, TraceflowObservation } from '../api/traceflow'; // eslint-disable-next-line import * as d3 from 'd3'; diff --git a/client/web/antrea-ui/yarn.lock b/client/web/antrea-ui/yarn.lock index 09620544..241af744 100644 --- a/client/web/antrea-ui/yarn.lock +++ b/client/web/antrea-ui/yarn.lock @@ -3852,14 +3852,7 @@ react-refresh@^0.14.2: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9" integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== -react-router-dom@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.0.1.tgz#b1438100800313e1b4c48da0c5fdb498f81c7f96" - integrity sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng== - dependencies: - react-router "7.0.1" - -react-router@7.0.1: +react-router@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.1.tgz#a171e35a5c6463f76b23353c4ce57b53c8b7b1b9" integrity sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==