chore: convert more route modules (#2716)

* convert image routes

* convert more routes

* convert more

* convert ip pool forms, vpc, and disk create

* convert image edit things (all claude code)

* fix ip pool edit crumb

* Convert InstancePage and all its tabs (all claude)

* remove extra crumbs

Author: david-crespo

.oxlintrc.json

@@ -35,7 +35,13 @@
     {
       // default exports are needed in the route modules and the config files,
       // but we want to avoid them anywhere else
-      "files": ["app/pages/**/*", "app/layouts/**/*", "app/forms/**/*", "*.config.ts", "*.config.mjs"],
+      "files": [
+        "app/pages/**/*",
+        "app/layouts/**/*",
+        "app/forms/**/*",
+        "*.config.ts",
+        "*.config.mjs"
+      ],
       "rules": {
         "import/no-default-export": "off"
       }

app/components/form/fields/SshKeysField.tsx

@@ -12,7 +12,7 @@ import { usePrefetchedApiQuery } from '@oxide/api'
 import { Key16Icon } from '@oxide/design-system/icons/react'
 
 import type { InstanceCreateInput } from '~/forms/instance-create'
-import { Component as CreateSSHKeySideModalForm } from '~/forms/ssh-key-create'
+import { SSHKeyCreate } from '~/forms/ssh-key-create'
 import { Button } from '~/ui/lib/Button'
 import { Checkbox } from '~/ui/lib/Checkbox'
 import { Divider } from '~/ui/lib/Divider'
@@ -138,7 +138,7 @@ export function SshKeysField({
         </div>
       )}
       {showAddSshKey && (
-        <CreateSSHKeySideModalForm
+        <SSHKeyCreate
           onDismiss={() => setShowAddSshKey(false)}
           message={
             <Message

app/forms/disk-create.tsx

@@ -8,7 +8,6 @@
 import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
-import { useNavigate, type NavigateFunction } from 'react-router'
 
 import {
   useApiMutation,
@@ -59,11 +58,7 @@ type CreateSideModalFormProps = {
    * the RQ `onSuccess` defined for the mutation.
    */
   onSubmit?: (diskCreate: DiskCreate) => void
-  /**
-   * Passing navigate is a bit of a hack to be able to do a nav from the routes
-   * file. The callers that don't need the arg can ignore it.
-   */
-  onDismiss: (navigate: NavigateFunction) => void
+  onDismiss: () => void
   onSuccess?: (disk: Disk) => void
   unavailableDiskNames?: string[]
 }
@@ -75,14 +70,13 @@ export function CreateDiskSideModalForm({
   unavailableDiskNames = [],
 }: CreateSideModalFormProps) {
   const queryClient = useApiQueryClient()
-  const navigate = useNavigate()
 
   const createDisk = useApiMutation('diskCreate', {
     onSuccess(data) {
       queryClient.invalidateQueries('diskList')
       addToast(<>Disk <HL>{data.name}</HL> created</>) // prettier-ignore
       onSuccess?.(data)
-      onDismiss(navigate)
+      onDismiss()
     },
   })
 
@@ -123,7 +117,7 @@ export function CreateDiskSideModalForm({
       form={form}
       formType="create"
       resourceName="disk"
-      onDismiss={() => onDismiss(navigate)}
+      onDismiss={onDismiss}
       onSubmit={({ size, ...rest }) => {
         const body = { size: size * GiB, ...rest }
         if (onSubmit) {

app/forms/image-edit.tsx

@@ -6,64 +6,21 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router'
+import { useNavigate } from 'react-router'
 
-import { apiQueryClient, usePrefetchedApiQuery, type Image } from '@oxide/api'
+import { type Image } from '@oxide/api'
 import { Images16Icon } from '@oxide/design-system/icons/react'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import {
-  getProjectImageSelector,
-  getSiloImageSelector,
-  useProjectImageSelector,
-  useSiloImageSelector,
-} from '~/hooks/use-params'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
-import { pb } from '~/util/path-builder'
 import { capitalize } from '~/util/str'
 import { bytesToGiB } from '~/util/units'
 
-export const ProjectImageEdit = {
-  loader: async ({ params }: LoaderFunctionArgs) => {
-    const { project, image } = getProjectImageSelector(params)
-    await apiQueryClient.prefetchQuery('imageView', { path: { image }, query: { project } })
-    return null
-  },
-  Component: EditProjectImageSideModalForm,
-}
-
-export const SiloImageEdit = {
-  loader: async ({ params }: LoaderFunctionArgs) => {
-    const { image } = getSiloImageSelector(params)
-    await apiQueryClient.prefetchQuery('imageView', { path: { image } })
-    return null
-  },
-  Component: EditSiloImageSideModalForm,
-}
-
-function EditProjectImageSideModalForm() {
-  const { project, image } = useProjectImageSelector()
-  const { data } = usePrefetchedApiQuery('imageView', {
-    path: { image },
-    query: { project },
-  })
-
-  const dismissLink = pb.projectImages({ project })
-  return <EditImageSideModalForm image={data} dismissLink={dismissLink} type="Project" />
-}
-
-function EditSiloImageSideModalForm() {
-  const { image } = useSiloImageSelector()
-  const { data } = usePrefetchedApiQuery('imageView', { path: { image } })
-
-  return <EditImageSideModalForm image={data} dismissLink={pb.siloImages()} type="Silo" />
-}
-
-function EditImageSideModalForm({
+export function EditImageSideModalForm({
   image,
   dismissLink,
   type,

app/forms/image-from-snapshot.tsx

@@ -22,6 +22,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -38,13 +39,15 @@ const defaultValues: Omit<ImageCreate, 'source'> = {
 const snapshotView = ({ project, snapshot }: PP.Snapshot) =>
   apiq('snapshotView', { path: { snapshot }, query: { project } })
 
-CreateImageFromSnapshotSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, snapshot } = getProjectSnapshotSelector(params)
   await queryClient.prefetchQuery(snapshotView({ project, snapshot }))
   return null
 }
 
-export function CreateImageFromSnapshotSideModalForm() {
+export const handle = titleCrumb('Create image from snapshot')
+
+export default function CreateImageFromSnapshotSideModalForm() {
   const { snapshot, project } = useProjectSnapshotSelector()
   const { data } = usePrefetchedQuery(snapshotView({ project, snapshot }))
   const navigate = useNavigate()

app/forms/image-upload.tsx

@@ -35,6 +35,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
@@ -175,11 +176,12 @@ const CHUNK_SIZE_BYTES = 512 * KiB
 // TODO: make sure cleanup, cancelEverything, and resetMainFlow are called in
 // the right places
 
-Component.displayName = 'ImageCreate'
+export const handle = titleCrumb('Upload image')
+
 /**
  * Upload an image. Opens a second modal to show upload progress.
  */
-export function Component() {
+export default function ImageCreate() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()

app/forms/ip-pool-create.tsx

@@ -14,6 +14,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
@@ -23,7 +24,9 @@ const defaultValues: IpPoolCreate = {
   description: '',
 }
 
-export function CreateIpPoolSideModalForm() {
+export const handle = titleCrumb('New IP pool')
+
+export default function CreateIpPoolSideModalForm() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
 

app/forms/ip-pool-edit.tsx

@@ -19,20 +19,22 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
 import { IpPoolVisibilityMessage } from './ip-pool-create'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
   await apiQueryClient.prefetchQuery('ipPoolView', { path: { pool } })
   return null
 }
 
-Component.displayName = 'EditIpPoolSideModalForm'
-export function Component() {
+export const handle = makeCrumb('Edit IP pool')
+
+export default function EditIpPoolSideModalForm() {
   const queryClient = useApiQueryClient()
   const navigate = useNavigate()
   const poolSelector = useIpPoolSelector()

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

@@ -12,6 +12,7 @@ import { useApiMutation, useApiQueryClient, type IpRange } from '@oxide/api'
 
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
@@ -59,8 +60,9 @@ function resolver(values: IpRange) {
   return Object.keys(errors).length > 0 ? { values: {}, errors } : { values, errors: {} }
 }
 
-Component.displayName = 'IpPoolAddRange'
-export function Component() {
+export const handle = titleCrumb('Add Range')
+
+export default function IpPoolAddRange() {
   const { pool } = useIpPoolSelector()
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()

app/forms/project-create.tsx

@@ -14,6 +14,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
@@ -22,8 +23,9 @@ const defaultValues: ProjectCreate = {
   description: '',
 }
 
-Component.displayName = 'ProjectCreateSideModalForm'
-export function Component() {
+export const handle = titleCrumb('New project')
+
+export default function ProjectCreateSideModalForm() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()