cleanup: use RR route module exports to clean up routes.tsx

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)

app/layouts/SystemLayout.tsx

@@ -34,7 +34,7 @@ import { ContentPane, PageContainer } from './helpers'
  * error. We're being a little cavalier here with the error. If it's something
  * other than a 403, that would be strange and we would want to know.
  */
-SystemLayout.loader = async () => {
+export async function loader() {
   // we don't need to use the ErrorsAllowed version here because we're 404ing
   // immediately on error, so we don't need to pick the result up from the cache
   const isFleetViewer = await apiQueryClient
@@ -49,7 +49,8 @@ SystemLayout.loader = async () => {
   return null
 }
 
-export function SystemLayout() {
+Component.displayName = 'SystemLayout'
+export function Component() {
   // Only show silo picker if we are looking at a particular silo. The more
   // robust way of doing this would be to make a separate layout for the
   // silo-specific routes in the route config, but it's overkill considering

app/pages/ProjectsPage.tsx

@@ -42,7 +42,7 @@ const EmptyState = () => (
   />
 )
 
-ProjectsPage.loader = async () => {
+export async function loader() {
   await apiQueryClient.prefetchQuery('projectList', { query: { limit: PAGE_SIZE } })
   return null
 }
@@ -56,7 +56,8 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-export function ProjectsPage() {
+Component.displayName = 'ProjectsPage'
+export function Component() {
   const navigate = useNavigate()
 
   const queryClient = useApiQueryClient()

app/pages/SiloAccessPage.tsx

@@ -52,7 +52,7 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
   </TableEmptyBox>
 )
 
-SiloAccessPage.loader = async () => {
+export async function loader() {
   await Promise.all([
     apiQueryClient.prefetchQuery('policyView', {}),
     // used to resolve user names
@@ -72,7 +72,8 @@ type UserRow = {
 
 const colHelper = createColumnHelper<UserRow>()
 
-export function SiloAccessPage() {
+Component.displayName = 'SiloAccessPage'
+export function Component() {
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
 

app/pages/SiloUtilizationPage.tsx

@@ -26,15 +26,16 @@ import { bytesToGiB, bytesToTiB } from '~/util/units'
 
 const toListboxItem = (x: { name: string; id: string }) => ({ label: x.name, value: x.id })
 
-SiloUtilizationPage.loader = async () => {
+export async function loader() {
   await Promise.all([
     apiQueryClient.prefetchQuery('projectList', {}),
     apiQueryClient.prefetchQuery('utilizationView', {}),
   ])
   return null
 }
 
-export function SiloUtilizationPage() {
+Component.displayName = 'SiloUtilizationPage'
+export function Component() {
   const { me } = useCurrentUser()
 
   const siloId = me.siloId

app/pages/project/access/ProjectAccessPage.tsx

@@ -59,7 +59,7 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
   </TableEmptyBox>
 )
 
-ProjectAccessPage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('policyView', {}),
@@ -81,7 +81,8 @@ type UserRow = {
 
 const colHelper = createColumnHelper<UserRow>()
 
-export function ProjectAccessPage() {
+Component.displayName = 'ProjectAccessPage'
+export function Component() {
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
   const { project } = useProjectSelector()

app/pages/project/instances/instance/SerialConsolePage.tsx

@@ -44,7 +44,7 @@ const statusMessage: Record<WsState, string> = {
   error: 'error',
 }
 
-SerialConsolePage.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceView', {
     path: { instance },
@@ -57,7 +57,8 @@ function isStarting(i: Instance | undefined) {
   return i?.runState === 'creating' || i?.runState === 'starting'
 }
 
-export function SerialConsolePage() {
+Component.displayName = 'SerialConsolePage'
+export function Component() {
   const instanceSelector = useInstanceSelector()
   const { project, instance } = instanceSelector
 

app/pages/project/instances/instance/tabs/ConnectTab.tsx

@@ -18,7 +18,7 @@ import { cliCmd } from '~/util/cli-cmd'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
-ConnectTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceExternalIpList', {
     path: { instance },
@@ -27,7 +27,8 @@ ConnectTab.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function ConnectTab() {
+Component.displayName = 'ConnectTab'
+export function Component() {
   const { project, instance } = useInstanceSelector()
   const { data: externalIps } = usePrefetchedApiQuery('instanceExternalIpList', {
     path: { instance },

app/pages/project/instances/instance/tabs/MetricsTab.tsx

@@ -150,7 +150,7 @@ function DiskMetric({
 // Considering the data is going to be swapped out as soon as they change the
 // date range, I'm inclined to punt.
 
-MetricsTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await apiQueryClient.prefetchQuery('instanceDiskList', {
     path: { instance },
@@ -159,7 +159,8 @@ MetricsTab.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function MetricsTab() {
+Component.displayName = 'MetricsTab'
+export function Component() {
   const { project, instance } = useInstanceSelector()
   const { data } = usePrefetchedApiQuery('instanceDiskList', {
     path: { instance },

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -83,7 +83,7 @@ const SubnetNameFromId = ({ value }: { value: string }) => {
   return <span className="text-secondary">{subnet.name}</span>
 }
 
-NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('instanceNetworkInterfaceList', {
@@ -177,7 +177,8 @@ const staticIpCols = [
   }),
 ]
 
-export function NetworkingTab() {
+Component.displayName = 'NetworkingTab'
+export function Component() {
   const instanceSelector = useInstanceSelector()
   const { instance: instanceName, project } = instanceSelector
 

app/pages/project/instances/instance/tabs/StorageTab.tsx

@@ -41,7 +41,7 @@ import { links } from '~/util/links'
 
 import { fancifyStates } from './common'
 
-StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   const selector = { path: { instance }, query: { project } }
   await Promise.all([
@@ -75,7 +75,8 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-export function StorageTab() {
+Component.displayName = 'StorageTab'
+export function Component() {
   const [showDiskCreate, setShowDiskCreate] = useState(false)
   const [showDiskAttach, setShowDiskAttach] = useState(false)
 

app/pages/project/vpcs/RouterPage.tsx

@@ -41,7 +41,7 @@ import { TableControls, TableTitle } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
-RouterPage.loader = async function ({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc, router } = getVpcRouterSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('vpcRouterView', {
@@ -80,7 +80,8 @@ const RouterRouteTypeValueBadge = ({
   )
 }
 
-export function RouterPage() {
+Component.displayName = 'RouterPage'
+export function Component() {
   const { project, vpc, router } = useVpcRouterSelector()
   const { data: routerData } = usePrefetchedApiQuery('vpcRouterView', {
     path: { router },

app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx

@@ -26,15 +26,16 @@ import { pb } from '~/util/path-builder'
 
 const colHelper = createColumnHelper<VpcRouter>()
 
-VpcRoutersTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await apiQueryClient.prefetchQuery('vpcRouterList', {
     query: { project, vpc, limit: PAGE_SIZE },
   })
   return null
 }
 
-export function VpcRoutersTab() {
+Component.displayName = 'VpcRoutersTab'
+export function Component() {
   const vpcSelector = useVpcSelector()
   const navigate = useNavigate()
   const { project, vpc } = vpcSelector

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -31,15 +31,16 @@ import { pb } from '~/util/path-builder'
 
 const colHelper = createColumnHelper<VpcSubnet>()
 
-VpcSubnetsTab.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await apiQueryClient.prefetchQuery('vpcSubnetList', {
     query: { project, vpc, limit: PAGE_SIZE },
   })
   return null
 }
 
-export function VpcSubnetsTab() {
+Component.displayName = 'VpcSubnetsTab'
+export function Component() {
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()