cleanup: use RR route module exports to clean up routes.tsx (#2545)

* clean up route file by using RR route module exports

* convert more modules

* Bot commit: format with prettier

* dummy commit to run CI

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: david-crespo

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 { CreateSSHKeySideModalForm } from '~/forms/ssh-key-create'
+import { Component as CreateSSHKeySideModalForm } from '~/forms/ssh-key-create'
 import { Button } from '~/ui/lib/Button'
 import { Checkbox } from '~/ui/lib/Checkbox'
 import { Divider } from '~/ui/lib/Divider'

app/forms/image-edit.tsx

@@ -29,13 +29,25 @@ import { pb } from '~/util/path-builder'
 import { capitalize } from '~/util/str'
 import { bytesToGiB } from '~/util/units'
 
-EditProjectImageSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
-  const { project, image } = getProjectImageSelector(params)
-  await apiQueryClient.prefetchQuery('imageView', { path: { image }, query: { project } })
-  return null
+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 function 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 },
@@ -46,20 +58,14 @@ export function EditProjectImageSideModalForm() {
   return <EditImageSideModalForm image={data} dismissLink={dismissLink} type="Project" />
 }
 
-EditSiloImageSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
-  const { image } = getSiloImageSelector(params)
-  await apiQueryClient.prefetchQuery('imageView', { path: { image } })
-  return null
-}
-
-export function EditSiloImageSideModalForm() {
+function EditSiloImageSideModalForm() {
   const { image } = useSiloImageSelector()
   const { data } = usePrefetchedApiQuery('imageView', { path: { image } })
 
   return <EditImageSideModalForm image={data} dismissLink={pb.siloImages()} type="Silo" />
 }
 
-export function EditImageSideModalForm({
+function EditImageSideModalForm({
   image,
   dismissLink,
   type,

app/forms/image-upload.tsx

@@ -177,10 +177,11 @@ const CHUNK_SIZE_BYTES = 512 * KiB
 // TODO: make sure cleanup, cancelEverything, and resetMainFlow are called in
 // the right places
 
+Component.displayName = 'ImageCreate'
 /**
  * Upload an image. Opens a second modal to show upload progress.
  */
-export function CreateImageSideModalForm() {
+export function Component() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()

app/forms/ip-pool-edit.tsx

@@ -25,13 +25,14 @@ import { pb } from '~/util/path-builder'
 
 import { IpPoolVisibilityMessage } from './ip-pool-create'
 
-EditIpPoolSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
   await apiQueryClient.prefetchQuery('ipPoolView', { path: { pool } })
   return null
 }
 
-export function EditIpPoolSideModalForm() {
+Component.displayName = 'EditIpPoolSideModalForm'
+export function Component() {
   const queryClient = useApiQueryClient()
   const navigate = useNavigate()
   const poolSelector = useIpPoolSelector()

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

@@ -59,7 +59,8 @@ function resolver(values: IpRange) {
   return Object.keys(errors).length > 0 ? { values: {}, errors } : { values, errors: {} }
 }
 
-export function IpPoolAddRangeSideModalForm() {
+Component.displayName = 'IpPoolAddRange'
+export function Component() {
   const { pool } = useIpPoolSelector()
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()

app/forms/project-create.tsx

@@ -22,7 +22,8 @@ const defaultValues: ProjectCreate = {
   description: '',
 }
 
-export function CreateProjectSideModalForm() {
+Component.displayName = 'ProjectCreateSideModalForm'
+export function Component() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
 

app/forms/snapshot-create.tsx

@@ -42,7 +42,8 @@ const defaultValues: SnapshotCreate = {
   name: '',
 }
 
-export function CreateSnapshotSideModalForm() {
+Component.displayName = 'SnapshotCreate'
+export function Component() {
   const queryClient = useApiQueryClient()
   const projectSelector = useProjectSelector()
   const navigate = useNavigate()

app/forms/ssh-key-create.tsx

@@ -29,7 +29,8 @@ type Props = {
   message?: React.ReactNode
 }
 
-export function CreateSSHKeySideModalForm({ onDismiss, message }: Props) {
+Component.displayName = 'SSHKeyCreate'
+export function Component({ onDismiss, message }: Props) {
   const queryClient = useApiQueryClient()
   const navigate = useNavigate()
 

app/forms/vpc-router-create.tsx

@@ -23,7 +23,8 @@ const defaultValues: VpcRouterCreate = {
   description: '',
 }
 
-export function CreateRouterSideModalForm() {
+Component.displayName = 'RouterCreate'
+export function Component() {
   const queryClient = useApiQueryClient()
   const vpcSelector = useVpcSelector()
   const navigate = useNavigate()

app/hooks/use-crumbs.ts

@@ -34,7 +34,8 @@ type MatchWithCrumb = UIMatch<unknown, Crumb>
 type MakeStr = string | ((p: Params) => string)
 
 /** Helper to make crumb definitions less verbose */
-export const makeCrumb = (crumb: MakeStr, path?: MakeStr) => ({ crumb, path })
+export const makeCrumb = (crumb: MakeStr, path?: MakeStr): Crumb => ({ crumb, path })
+export const titleCrumb = (crumb: string): Crumb => ({ crumb, titleOnly: true })
 
 function hasCrumb(m: UIMatch): m is MatchWithCrumb {
   return !!(m.handle && typeof m.handle === 'object' && 'crumb' in m.handle)