web: update to react router 6

Signed-off-by: Nick Santos <nick.santos@docker.com>

Author: nicks

web/package.json

@@ -17,8 +17,8 @@
     "react-from-dom": "^0.6.0",
     "react-modal": "^3.14.4",
     "react-outline-manager": "^1.2.2",
-    "react-router": "^5.1.0",
-    "react-router-dom": "^5.1.0",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1",
     "react-split-pane": "^0.1.92",
     "react-storage-hooks": "^4.0.1",
     "react-table": "^7.7.0",
@@ -67,7 +67,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-modal": "^3.13.1",
-    "@types/react-router-dom": "^5.3.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.8",
     "@types/react-test-renderer": "^16.9.0",
     "@types/react-timeago": "^4.1.0",

web/src/HUD.test.tsx

@@ -1,7 +1,7 @@
-import { createMemoryHistory } from "history"
-import React from "react"
+import React, { Component } from "react"
 import { findRenderedComponentWithType } from "react-dom/test-utils"
 import ReactModal from "react-modal"
+import { useNavigate, useLocation } from "react-router-dom"
 import { MemoryRouter } from "react-router"
 import HUD, { mergeAppUpdate } from "./HUD"
 import LogStore from "./LogStore"
@@ -21,22 +21,36 @@ import { SocketState } from "./types"
 // be set as the app root so that accessibility features are set correctly
 ReactModal.setAppElement(document.body)
 
-const fakeHistory = createMemoryHistory()
 const interfaceVersion = { isNewDefault: () => false, toggleDefault: () => {} }
-const emptyHUD = () => {
+
+let InjectHUD = () => {
+  let navigate = useNavigate()
+  let location = useLocation()
   return (
-    <MemoryRouter initialEntries={["/"]}>
-      <HUD history={fakeHistory} interfaceVersion={interfaceVersion} />
-    </MemoryRouter>
+    <HUD
+      navigate={navigate}
+      location={location}
+      interfaceVersion={interfaceVersion}
+    />
   )
 }
 
+class EmptyHUD extends Component {
+  render() {
+    return (
+      <MemoryRouter initialEntries={["/"]}>
+        <InjectHUD />
+      </MemoryRouter>
+    )
+  }
+}
+
 beforeEach(() => {
   Date.now = jest.fn(() => 1482363367071)
 })
 
 it("renders reconnecting bar", async () => {
-  const { rootTree, container } = renderTestComponent<HUD>(emptyHUD())
+  const { rootTree, container } = renderTestComponent(<EmptyHUD />)
   expect(container.textContent).toEqual(expect.stringContaining("Loading"))
 
   const hud = findRenderedComponentWithType(rootTree, HUD)
@@ -54,7 +68,7 @@ it("renders reconnecting bar", async () => {
 })
 
 it("loads logs incrementally", async () => {
-  const { rootTree } = renderTestComponent<HUD>(emptyHUD())
+  const { rootTree } = renderTestComponent(<EmptyHUD />)
   const hud = findRenderedComponentWithType(rootTree, HUD)
 
   let now = new Date().toString()
@@ -101,7 +115,7 @@ it("loads logs incrementally", async () => {
 })
 
 it("renders logs to snapshot", async () => {
-  const { rootTree } = renderTestComponent<HUD>(emptyHUD())
+  const { rootTree } = renderTestComponent(<EmptyHUD />)
   const hud = findRenderedComponentWithType(rootTree, HUD)
 
   let now = new Date().toString()

web/src/HUD.tsx

@@ -1,9 +1,8 @@
 import { StylesProvider } from "@material-ui/core/styles"
-import { History } from "history"
 import React, { Component } from "react"
 import ReactOutlineManager from "react-outline-manager"
-import { useHistory } from "react-router"
-import { Route, RouteComponentProps, Switch } from "react-router-dom"
+import { useLocation, useNavigate, Location } from "react-router-dom"
+import { Route, Routes } from "react-router-dom"
 import AnalyticsNudge from "./AnalyticsNudge"
 import AppController from "./AppController"
 import { tiltfileKeyContext } from "./BrowserStorage"
@@ -37,8 +36,9 @@ import {
 } from "./types"
 
 export type HudProps = {
-  history: History
   interfaceVersion: InterfaceVersion
+  navigate: ReturnType<typeof useNavigate>
+  location: Location
 }
 
 // Snapshot logs are capped to 1MB (max upload size is 4MB; this ensures between the rest of state and JSON overhead
@@ -51,14 +51,16 @@ export default class HUD extends Component<HudProps, HudState> {
   // The root of the HUD view, without the slash.
   private pathBuilder: PathBuilder
   private controller: AppController
-  private history: History
+  private navigate: ReturnType<typeof useNavigate>
+  private location: Location
 
   constructor(props: HudProps) {
     super(props)
 
     this.pathBuilder = new PathBuilder(window.location)
     this.controller = new AppController(this.pathBuilder, this)
-    this.history = props.history
+    this.navigate = props.navigate
+    this.location = props.location
 
     this.state = {
       view: {},
@@ -102,7 +104,7 @@ export default class HUD extends Component<HudProps, HudState> {
   }
 
   setHistoryLocation(path: string) {
-    this.props.history.replace(path)
+    this.props.navigate(path, { replace: true })
   }
 
   path(relPath: string) {
@@ -119,7 +121,7 @@ export default class HUD extends Component<HudProps, HudState> {
     }
     return {
       view: view,
-      path: this.props.history.location.pathname,
+      path: this.props.location.pathname,
       snapshotHighlight: state.snapshotHighlight,
       createdAt: new Date().toISOString(),
     }
@@ -226,27 +228,28 @@ export default class HUD extends Component<HudProps, HudState> {
               <ResourceGroupsContextProvider>
                 <ResourceListOptionsProvider>
                   <ResourceSelectionProvider>
-                    <Switch>
+                    <Routes>
                       <Route
                         path={this.path("/r/:name/overview")}
-                        render={(_props: RouteComponentProps<any>) => (
+                        element={
                           <SidebarContextProvider>
                             <OverviewResourcePane
                               view={this.state.view}
                               isSocketConnected={isSocketConnected}
                             />
                           </SidebarContextProvider>
-                        )}
+                        }
                       />
                       <Route
-                        render={() => (
+                        path="*"
+                        element={
                           <OverviewTablePane
                             view={this.state.view}
                             isSocketConnected={isSocketConnected}
                           />
-                        )}
+                        }
                       />
-                    </Switch>
+                    </Routes>
                   </ResourceSelectionProvider>
                 </ResourceListOptionsProvider>
               </ResourceGroupsContextProvider>
@@ -304,12 +307,18 @@ export default class HUD extends Component<HudProps, HudState> {
 }
 
 export function HUDFromContext(props: React.PropsWithChildren<{}>) {
-  let history = useHistory()
-  let interfaceVersion = useInterfaceVersion()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const interfaceVersion = useInterfaceVersion()
+
   return (
     /* allow Styled Components to override MUI - https://material-ui.com/guides/interoperability/#controlling-priority-3*/
     <StylesProvider injectFirst>
-      <HUD history={history} interfaceVersion={interfaceVersion} />
+      <HUD
+        interfaceVersion={interfaceVersion}
+        navigate={navigate}
+        location={location}
+      />
     </StylesProvider>
   )
 }

web/src/InterfaceVersion.tsx

@@ -1,6 +1,6 @@
 import Cookies from "js-cookie"
 import React, { PropsWithChildren, useContext, useState } from "react"
-import { useHistory } from "react-router"
+import { useNavigate } from "react-router-dom"
 import { usePathBuilder } from "./PathBuilder"
 
 export type InterfaceVersion = {
@@ -19,7 +19,6 @@ export function useInterfaceVersion(): InterfaceVersion {
 
 export function InterfaceVersionProvider(props: PropsWithChildren<{}>) {
   let pathBuilder = usePathBuilder()
-  let history = useHistory()
   let [isNew, setNew] = useState((): boolean => {
     return Cookies.get("tilt-interface-version") !== "legacy"
   })

web/src/OverviewActionBar.stories.tsx

@@ -1,6 +1,5 @@
-import { createMemoryHistory } from "history"
 import React from "react"
-import { Router } from "react-router"
+import { MemoryRouter } from "react-router"
 import { ButtonSet } from "./ApiButton"
 import { FilterLevel, FilterSource, useFilterSet } from "./logfilters"
 import OverviewActionBar from "./OverviewActionBar"
@@ -14,18 +13,17 @@ export default {
     (Story: any, context: any) => {
       let level = context?.args?.level || ""
       let source = context?.args?.source || ""
-      let history = createMemoryHistory()
-      history.location.search = `?level=${level}&source=${source}`
+      let initialEntries = [`/?level=${level}&source=${source}`]
       return (
-        <Router history={history}>
+        <MemoryRouter initialEntries={initialEntries}>
           <TiltSnackbarProvider>
             <StarredResourceMemoryProvider>
               <div style={{ margin: "-1rem", height: "80vh" }}>
                 <Story {...context.args} />
               </div>
             </StarredResourceMemoryProvider>
           </TiltSnackbarProvider>
-        </Router>
+        </MemoryRouter>
       )
     },
   ],