Back out "chore: convert last few routes (#2719)"

david-crespo · david-crespo · commit 2152a89cefd0 · 2025-03-03T11:56:58.000-06:00
This backs out commit a3566bd.
diff --git a/app/pages/project/vpcs/VpcPage.tsx b/app/pages/project/vpcs/VpcPage.tsx
@@ -27,12 +27,12 @@ import { VpcDocsPopover } from './VpcsPage'
 const vpcView = ({ project, vpc }: PP.Vpc) =>
   apiq('vpcView', { path: { vpc }, query: { project } })
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
   await queryClient.prefetchQuery(vpcView(getVpcSelector(params)))
   return null
 }
 
-export default function VpcPage() {
+export function VpcPage() {
   const navigate = useNavigate()
   const vpcSelector = useVpcSelector()
   const { project, vpc: vpcName } = vpcSelector
diff --git a/app/pages/project/vpcs/VpcRoutersTab.tsx b/app/pages/project/vpcs/VpcRoutersTab.tsx
@@ -35,15 +35,14 @@ const colHelper = createColumnHelper<VpcRouter>()
 
 const vpcRouterList = (query: PP.Vpc) => getListQFn('vpcRouterList', { query })
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await queryClient.prefetchQuery(vpcRouterList({ project, vpc }).optionsFn())
   return null
 }
 
-export const handle = { crumb: 'Routers' }
-
-export default function VpcRoutersTab() {
+Component.displayName = 'VpcRoutersTab'
+export function Component() {
   const vpcSelector = useVpcSelector()
   const navigate = useNavigate()
   const { project, vpc } = vpcSelector
diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx
@@ -15,7 +15,6 @@ import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/r
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
-import { makeCrumb } from '~/hooks/use-crumbs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
@@ -66,15 +65,13 @@ const colHelper = createColumnHelper<Vpc>()
 
 // just as in the vpcList call for the quick actions menu, include limit to make
 // sure it matches the call in the QueryTable
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await queryClient.prefetchQuery(vpcList(project).optionsFn())
   return null
 }
 
-export const handle = makeCrumb('VPCs', (p) => pb.vpcs(getProjectSelector(p)))
-
-export default function VpcsPage() {
+export function VpcsPage() {
   const { project } = useProjectSelector()
   const navigate = useNavigate()
 
diff --git a/app/pages/system/SiloImageEdit.tsx b/app/pages/system/SiloImageEdit.tsx
diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx
@@ -51,13 +51,11 @@ const EmptyState = () => (
 
 const imageList = getListQFn('imageList', {})
 
-export async function clientLoader() {
+export async function loader() {
   await queryClient.prefetchQuery(imageList.optionsFn())
   return null
 }
 
-export const handle = { crumb: 'Images' }
-
 const colHelper = createColumnHelper<Image>()
 const staticCols = [
   colHelper.accessor('name', {
@@ -68,7 +66,8 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-export default function SiloImagesPage() {
+Component.displayName = 'SiloImagesPage'
+export function Component() {
   const [showModal, setShowModal] = useState(false)
   const [demoteImage, setDemoteImage] = useState<Image | null>(null)
 
diff --git a/app/pages/system/inventory/DisksTab.tsx b/app/pages/system/inventory/DisksTab.tsx
@@ -40,13 +40,11 @@ const EmptyState = () => (
 
 const diskList = getListQFn('physicalDiskList', {})
 
-export async function clientLoader() {
+export async function loader() {
   await queryClient.prefetchQuery(diskList.optionsFn())
   return null
 }
 
-export const handle = { crumb: 'Disks' }
-
 const colHelper = createColumnHelper<PhysicalDisk>()
 const staticCols = [
   colHelper.accessor('id', {}),
@@ -71,7 +69,8 @@ const staticCols = [
   }),
 ]
 
-export default function DisksTab() {
+Component.displayName = 'DisksTab'
+export function Component() {
   const emptyState = <EmptyState />
   const { table } = useQueryTable({ query: diskList, columns: staticCols, emptyState })
   return table
diff --git a/app/pages/system/inventory/InventoryPage.tsx b/app/pages/system/inventory/InventoryPage.tsx
@@ -11,21 +11,18 @@ import { Servers16Icon, Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
-import { makeCrumb } from '~/hooks/use-crumbs'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const rackList = getListQFn('rackList', {})
 
-export async function clientLoader() {
+InventoryPage.loader = async () => {
   await queryClient.prefetchQuery(rackList.optionsFn())
   return null
 }
 
-export const handle = makeCrumb('Inventory', pb.sledInventory())
-
-export default function InventoryPage() {
+export function InventoryPage() {
   const { data: racks } = usePrefetchedQuery(rackList.optionsFn())
   const rack = racks?.items[0]
 
diff --git a/app/pages/system/inventory/SledsTab.tsx b/app/pages/system/inventory/SledsTab.tsx
@@ -30,13 +30,11 @@ const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
 
 const sledList = getListQFn('sledList', {})
 
-export async function clientLoader() {
+export async function loader() {
   await queryClient.prefetchQuery(sledList.optionsFn())
   return null
 }
 
-export const handle = { crumb: 'Sleds' }
-
 const colHelper = createColumnHelper<Sled>()
 const staticCols = [
   colHelper.accessor('id', {
@@ -90,7 +88,8 @@ const staticCols = [
   }),
 ]
 
-export default function SledsTab() {
+Component.displayName = 'SledsTab'
+export function Component() {
   const emptyState = <EmptyMessage icon={<Servers24Icon />} title="No sleds found" />
   const { table } = useQueryTable({ query: sledList, columns: staticCols, emptyState })
   return table
diff --git a/app/pages/system/inventory/sled/SledInstancesTab.tsx b/app/pages/system/inventory/sled/SledInstancesTab.tsx
@@ -33,14 +33,12 @@ const EmptyState = () => {
   )
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await queryClient.prefetchQuery(sledInstanceList(sledId).optionsFn())
   return null
 }
 
-export const handle = { crumb: 'Instances' }
-
 // passing in empty function because we still want the copy ID button
 const makeActions = (): MenuAction[] => []
 
@@ -71,7 +69,8 @@ const staticCols = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-export default function SledInstancesTab() {
+Component.displayName = 'SledInstancesTab'
+export function Component() {
   const { sledId } = useSledParams()
   const columns = useColsWithActions(staticCols, makeActions)
   const { table } = useQueryTable({
diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx
@@ -12,26 +12,21 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { RouteTabs, Tab } from '~/components/RouteTabs'
-import { makeCrumb } from '~/hooks/use-crumbs'
 import { requireSledParams, useSledParams } from '~/hooks/use-params'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
-import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
   await apiQueryClient.prefetchQuery('sledView', {
     path: { sledId },
   })
   return null
 }
-export const handle = makeCrumb(
-  (p) => truncate(p.sledId!, 12, 'middle'),
-  (p) => pb.sled({ sledId: p.sledId! })
-)
 
-export default function SledPage() {
+Component.displayName = 'SledPage'
+export function Component() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })
 
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
@@ -33,7 +33,6 @@ import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
-import { makeCrumb } from '~/hooks/use-crumbs'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
@@ -60,7 +59,7 @@ const ipPoolView = (pool: string) => apiq('ipPoolView', { path: { pool } })
 const ipPoolSiloList = (pool: string) => getListQFn('ipPoolSiloList', { path: { pool } })
 const ipPoolRangeList = (pool: string) => getListQFn('ipPoolRangeList', { path: { pool } })
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
   await Promise.all([
     queryClient.prefetchQuery(ipPoolView(pool)),
@@ -80,9 +79,8 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
   return null
 }
 
-export const handle = makeCrumb((p) => p.pool!)
-
-export default function IpPoolpage() {
+Component.displayName = 'IpPoolPage'
+export function Component() {
   const poolSelector = useIpPoolSelector()
   const { data: pool } = usePrefetchedQuery(ipPoolView(poolSelector.pool))
   const { data: ranges } = usePrefetchedQuery(
diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
@@ -69,14 +69,13 @@ const staticColumns = [
 
 const ipPoolList = () => getListQFn('ipPoolList', {})
 
-export async function clientLoader() {
+export async function loader() {
   await queryClient.prefetchQuery(ipPoolList().optionsFn())
   return null
 }
 
-export const handle = { crumb: 'IP Pools' }
-
-export default function IpPoolsPage() {
+Component.displayName = 'IpPoolsPage'
+export function Component() {
   const navigate = useNavigate()
 
   const { mutateAsync: deletePool } = useApiMutation('ipPoolDelete', {
diff --git a/app/routes.tsx b/app/routes.tsx
diff --git a/test/e2e/breadcrumbs.e2e.ts b/test/e2e/breadcrumbs.e2e.ts
diff --git a/test/e2e/inventory.e2e.ts b/test/e2e/inventory.e2e.ts
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -33,14 +33,12 @@ const EmptyState = () => {`
`33`	`33`	`)`
`34`	`34`	`}`
`35`	`35`
`36`		`-export async function clientLoader({ params }: LoaderFunctionArgs) {`
	`36`	`+export async function loader({ params }: LoaderFunctionArgs) {`
`37`	`37`	`const { sledId } = requireSledParams(params)`
`38`	`38`	`await queryClient.prefetchQuery(sledInstanceList(sledId).optionsFn())`
`39`	`39`	`return null`
`40`	`40`	`}`
`41`	`41`
`42`		`-export const handle = { crumb: 'Instances' }`
`43`		`-`
`44`	`42`	`// passing in empty function because we still want the copy ID button`
`45`	`43`	`const makeActions = (): MenuAction[] => []`
`46`	`44`
`@@ -71,7 +69,8 @@ const staticCols = [`
`71`	`69`	`colHelper.accessor('timeCreated', Columns.timeCreated),`
`72`	`70`	`]`
`73`	`71`
`74`		`-export default function SledInstancesTab() {`
	`72`	`+Component.displayName = 'SledInstancesTab'`
	`73`	`+export function Component() {`
`75`	`74`	`const { sledId } = useSledParams()`
`76`	`75`	`const columns = useColsWithActions(staticCols, makeActions)`
`77`	`76`	`const { table } = useQueryTable({`