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,

app/forms/firewall-rules-edit.tsx

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

app/forms/floating-ip-create.tsx

@@ -8,7 +8,7 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import {
   useApiMutation,

app/forms/floating-ip-edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiq, queryClient, useApiMutation, usePrefetchedApiQuery } from '@oxide/api'
 

app/forms/idp/create.tsx

@@ -7,7 +7,7 @@
  */
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 

app/forms/idp/edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Access16Icon } from '@oxide/design-system/icons/react'

app/forms/image-edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiQueryClient, usePrefetchedApiQuery, type Image } from '@oxide/api'
 import { Images16Icon } from '@oxide/design-system/icons/react'

app/forms/image-from-snapshot.tsx

@@ -7,7 +7,7 @@
  */
 import { filesize } from 'filesize'
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import {
   apiq,

app/forms/image-upload.tsx

@@ -12,7 +12,7 @@ import pMap from 'p-map'
 import pRetry from 'p-retry'
 import { useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import {
   useApiMutation,

app/forms/instance-create.tsx

@@ -8,7 +8,7 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import { useEffect, useMemo, useState } from 'react'
 import { useController, useForm, useWatch, type Control } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 import type { SetRequired } from 'type-fest'
 
 import {

app/forms/ip-pool-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type IpPoolCreate } from '@oxide/api'
 

app/forms/ip-pool-edit.tsx

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

app/forms/ip-pool-range-add.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm, type FieldErrors } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type IpRange } from '@oxide/api'
 

app/forms/project-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type ProjectCreate } from '@oxide/api'
 

app/forms/project-edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api'
 

app/forms/silo-create.tsx

@@ -7,7 +7,7 @@
  */
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type SiloCreate } from '@oxide/api'
 

app/forms/snapshot-create.tsx

@@ -7,7 +7,7 @@
  */
 import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import {
   diskCan,

app/forms/ssh-key-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type SshKeyCreate } from '@oxide/api'
 

app/forms/ssh-key-edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Key16Icon } from '@oxide/design-system/icons/react'

app/forms/subnet-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type VpcSubnetCreate } from '@oxide/api'
 

app/forms/subnet-edit.tsx

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

app/forms/vpc-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type VpcCreate } from '@oxide/api'
 

app/forms/vpc-edit.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api'
 

app/forms/vpc-router-create.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { useApiMutation, useApiQueryClient, type VpcRouterCreate } from '@oxide/api'
 

app/forms/vpc-router-edit.tsx

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

app/forms/vpc-router-route-create.tsx

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

app/forms/vpc-router-route-edit.tsx

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

app/hooks/use-crumbs.ts

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMatches, type Params, type UIMatch } from 'react-router-dom'
+import { useMatches, type Params, type UIMatch } from 'react-router'
 
 import { invariant } from '~/util/invariant'
 

app/hooks/use-is-active-path.ts

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useLocation, useResolvedPath } from 'react-router-dom'
+import { useLocation, useResolvedPath } from 'react-router'
 
 interface ActivePathOptions {
   to: string
@@ -16,7 +16,7 @@ interface ActivePathOptions {
  *
  * This implementation is based on logic from React Router's NavLink component.
  *
- * @see https://github.com/remix-run/react-router/blob/67f16e73603765158c63a27afb70d3a4b3e823d3/packages/react-router-dom/index.tsx#L448-L467
+ * @see https://github.com/remix-run/react-router/blob/67f16e73603765158c63a27afb70d3a4b3e823d3/packages/react-router/index.tsx#L448-L467
  *
  * @param to The path to check
  * @param options.end Ensure this path isn't matched as "active" when its descendant paths are matched.

app/hooks/use-params.ts

@@ -7,7 +7,7 @@
  */
 import { hashKey } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { useParams, type Params } from 'react-router-dom'
+import { useParams, type Params } from 'react-router'
 
 import { invariant } from '~/util/invariant'
 

app/hooks/use-quick-actions.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useEffect, useMemo } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router'
 import { create } from 'zustand'
 
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'

app/hooks/use-scroll-restoration.ts

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useEffect } from 'react'
-import { useLocation, useNavigation } from 'react-router-dom'
+import { useLocation, useNavigation } from 'react-router'
 
 function getScrollPosition(key: string) {
   const pos = window.sessionStorage.getItem(key)

app/layouts/AuthLayout.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { OxideLogo } from '~/components/OxideLogo'
 

app/layouts/AuthenticatedLayout.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { apiQueryClient, useApiQueryErrorsAllowed, usePrefetchedApiQuery } from '@oxide/api'