React Router 7 (#2628)

* bump package version

* convert all the imports, everything works but the scroll restore test

* make scroll restore test pass

* upgrade vite and vitest

* use 7.1.1 stable

* fix package-lock.json

Author: david-crespo

app/components/ErrorBoundary.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { ErrorBoundary as BaseErrorBoundary } from 'react-error-boundary'
-import { useRouteError } from 'react-router-dom'
+import { useRouteError } from 'react-router'
 
 import { type ApiError } from '~/api/errors'
 

app/components/ErrorPage.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import type { ReactNode } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { Error12Icon, PrevArrow12Icon } from '@oxide/design-system/icons/react'
 

app/components/QueryParamTabs.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router'
 
 import { Tabs, type TabsRootProps } from '~/ui/lib/Tabs'
 

app/components/RouteTabs.tsx

@@ -7,7 +7,7 @@
  */
 import cn from 'classnames'
 import type { ReactNode } from 'react'
-import { Link, Outlet } from 'react-router-dom'
+import { Link, Outlet } from 'react-router'
 
 import { useIsActivePath } from '~/hooks/use-is-active-path'
 import { KEYS } from '~/ui/util/keys'

app/components/Sidebar.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { NavLink, useLocation } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router'
 
 import { Action16Icon, Document16Icon } from '@oxide/design-system/icons/react'
 

app/components/TopBar.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
 import {

app/components/form/FullPageForm.tsx

@@ -7,7 +7,7 @@
  */
 import { cloneElement, useEffect, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
-import { useBlocker, type Blocker } from 'react-router-dom'
+import { useBlocker, type Blocker } from 'react-router'
 
 import type { ApiError } from '@oxide/api'
 

app/components/form/SideModalForm.tsx

@@ -8,7 +8,7 @@
 
 import { useEffect, useId, useState, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
-import { NavigationType, useNavigationType } from 'react-router-dom'
+import { NavigationType, useNavigationType } from 'react-router'
 
 import type { ApiError } from '@oxide/api'
 

app/forms/disk-create.tsx

@@ -8,7 +8,7 @@
 import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
-import { useNavigate, type NavigateFunction } from 'react-router-dom'
+import { useNavigate, type NavigateFunction } from 'react-router'
 
 import {
   useApiMutation,

app/forms/firewall-rules-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, useParams, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, useParams, type LoaderFunctionArgs } from 'react-router'
 
 import {
   apiQueryClient,