Merge main and resolve conflicts

.eslintrc.cjs

@@ -70,6 +70,8 @@ module.exports = {
     'import/no-default-export': 'error',
     'import/no-unresolved': 'off', // plugin doesn't know anything
     'jsx-a11y/label-has-associated-control': [2, { controlComponents: ['button'] }],
+    // only worry about console.log
+    'no-console': ['error', { allow: ['warn', 'error', 'info', 'table'] }],
     'no-param-reassign': 'error',
     'no-restricted-imports': [
       'error',
@@ -112,11 +114,18 @@ module.exports = {
     },
     {
       files: ['*.e2e.ts'],
-      extends: ['plugin:playwright/playwright-test'],
+      extends: ['plugin:playwright/recommended'],
       rules: {
         'playwright/expect-expect': [
           'warn',
-          { assertFunctionNames: ['expectVisible', 'expectRowVisible', 'expectOptions'] },
+          {
+            assertFunctionNames: [
+              'expectVisible',
+              'expectRowVisible',
+              'expectOptions',
+              'expectRowMenuStaysOpen',
+            ],
+          },
         ],
         'playwright/no-force-option': 'off',
       },

.oxlintrc.json

@@ -3,6 +3,8 @@
   "plugins": ["react", "react-hooks", "unicorn", "typescript", "oxc"],
   "rules": {
     "react-hooks/exhaustive-deps": "error",
+    // only worry about console.log
+    "no-console": ["error", { "allow": ["warn", "error", "info", "table"] }],
     // turning this off because it's more sensitive than eslint currently
     // "react-hooks/rules-of-hooks": "error",
     "no-unused-vars": [
@@ -13,5 +15,6 @@
         "caughtErrorsIgnorePattern": "^_"
       }
     ]
-  }
+  },
+  "ignorePatterns": ["dist/", "node_modules/"]
 }

app/api/hooks.ts

@@ -346,7 +346,7 @@ export const wrapQueryClient = <A extends ApiClient>(api: A, queryClient: QueryC
               // directly without further processing
               throw data
             }
-            console.log(options.explanation)
+            console.info(options.explanation)
             return { type: 'error' as const, data }
           }),
       ...options,

app/api/window.ts

@@ -34,7 +34,7 @@ function handleResult<T>(result: ApiResult<T>): T {
 }
 
 function logHeading(s: string) {
-  console.log(`%c${s}`, 'font-size: 16px; font-weight: bold;')
+  console.info(`%c${s}`, 'font-size: 16px; font-weight: bold;')
 }
 
 if (typeof window !== 'undefined') {

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/RoundedSector.tsx

@@ -5,10 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useReducedMotion } from 'motion/react'
 import { useEffect, useMemo, useState } from 'react'
 
-import { useReducedMotion } from '~/hooks/use-reduce-motion'
-
 export function RoundedSector({
   angle,
   size,

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/ToastStack.tsx

@@ -5,45 +5,39 @@
  *
  * Copyright Oxide Computer Company
  */
-import { animated, useTransition } from '@react-spring/web'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
 
 import { removeToast, useToastStore } from '~/stores/toast'
 import { Toast } from '~/ui/lib/Toast'
 
 export function ToastStack() {
   const toasts = useToastStore((state) => state.toasts)
 
-  const transition = useTransition(toasts, {
-    keys: (toast) => toast.id,
-    from: { opacity: 0, y: 10, scale: 95 },
-    enter: { opacity: 1, y: 0, scale: 100 },
-    leave: { opacity: 0, y: 10, scale: 95 },
-    config: { duration: 100 },
-  })
-
   return (
     <div
       className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2"
       data-testid="Toasts"
     >
-      {transition((style, item) => (
-        <animated.div
-          style={{
-            opacity: style.opacity,
-            y: style.y,
-            transform: style.scale.to((val) => `scale(${val}%, ${val}%)`),
-          }}
-        >
-          <Toast
-            key={item.id}
-            {...item.options}
-            onClose={() => {
-              removeToast(item.id)
-              item.options.onClose?.()
-            }}
-          />
-        </animated.div>
-      ))}
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <m.div
+            key={toast.id}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
+            transition={{ type: 'spring', duration: 0.2, bounce: 0 }}
+          >
+            <Toast
+              {...toast.options}
+              onClose={() => {
+                removeToast(toast.id)
+                toast.options.onClose?.()
+              }}
+            />
+          </m.div>
+        ))}
+      </AnimatePresence>
     </div>
   )
 }

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 { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
 import {
   apiq,

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,
@@ -515,7 +515,7 @@ export function Component() {
           .catch((e) => {
             // eat a 404 since that's what we want. anything else should still blow up
             if (e.statusCode === 404) {
-              console.log(
+              console.info(
                 '/v1/images 404 is expected. It means the image name is not taken.'
               )
               return null

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'