crumbs for silo page tabs

Author: david-crespo

app/pages/system/silos/SiloFleetRolesTab.tsx

@@ -10,6 +10,7 @@ import { usePrefetchedApiQuery } from '@oxide/api'
 import { Cloud24Icon, NextArrow12Icon } from '@oxide/design-system/icons/react'
 import { Badge } from '@oxide/design-system/ui'
 
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { useSiloSelector } from '~/hooks/use-params'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { TableEmptyBox } from '~/ui/lib/Table'
@@ -51,3 +52,5 @@ export default function SiloFleetRolesTab() {
     </>
   )
 }
+
+export const handle = makeCrumb('Fleet Roles')

app/pages/system/silos/SiloIdpsTab.tsx

@@ -13,6 +13,7 @@ import { Cloud24Icon } from '@oxide/design-system/icons/react'
 import { Badge } from '@oxide/design-system/ui'
 
 import { getListQFn, queryClient, type IdentityProvider } from '~/api'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { Columns } from '~/table/columns/common'
@@ -74,3 +75,7 @@ export default function SiloIdpsTab() {
     </>
   )
 }
+
+export const handle = makeCrumb('Identity Providers', (params) =>
+  pb.siloIdps(getSiloSelector(params))
+)

app/pages/system/silos/SiloIpPoolsTab.tsx

@@ -23,6 +23,7 @@ import { Networking24Icon } from '@oxide/design-system/icons/react'
 
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { addToast } from '~/stores/toast'
@@ -198,6 +199,8 @@ export default function SiloIpPoolsTab() {
   )
 }
 
+export const handle = makeCrumb('IP Pools')
+
 type LinkPoolFormValues = {
   pool: string | undefined
 }

app/pages/system/silos/SiloQuotasTab.tsx

@@ -20,6 +20,7 @@ import {
 } from '~/api'
 import { NumberField } from '~/components/form/fields/NumberField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Button } from '~/ui/lib/Button'
@@ -97,6 +98,8 @@ export default function SiloQuotasTab() {
   )
 }
 
+export const handle = makeCrumb('Quotas')
+
 function EditQuotasForm({ onDismiss }: { onDismiss: () => void }) {
   const { silo } = useSiloSelector()
   const { data: utilization } = usePrefetchedQuery(

app/pages/system/silos/SiloScimTab.tsx

@@ -19,6 +19,7 @@ import {
   usePrefetchedApiQuery,
   type ScimClientBearerToken,
 } from '~/api'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -174,6 +175,8 @@ export default function SiloScimTab() {
   )
 }
 
+export const handle = makeCrumb('SCIM')
+
 function CreateTokenModal({
   siloSelector,
   onDismiss,

app/routes.tsx

@@ -17,7 +17,7 @@ import {
 import { NotFound } from './components/ErrorPage'
 import { PageSkeleton } from './components/PageSkeleton.tsx'
 import { makeCrumb, type Crumb } from './hooks/use-crumbs'
-import { getInstanceSelector, getVpcSelector } from './hooks/use-params'
+import { getInstanceSelector, getSiloSelector, getVpcSelector } from './hooks/use-params'
 import { pb } from './util/path-builder'
 
 // hack because RR doesn't export the redirect type
@@ -128,6 +128,10 @@ export const routes = createRoutesFromElements(
           <Route
             path=":silo"
             lazy={() => import('./pages/system/silos/SiloPage').then(convert)}
+            handle={makeCrumb(
+              (p) => p.silo!,
+              (p) => pb.silo(getSiloSelector(p))
+            )}
           >
             {/* Nesting keeps IdPs tab contents rendered when side modals are open*/}
             <Route index element={<Navigate to="idps" replace />} />

app/util/__snapshots__/path-builder.spec.ts.snap

@@ -514,6 +514,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Identity Providers",
+      "path": "/system/silos/s/idps",
+    },
   ],
   "serialConsole (/projects/p/instances/i/serial-console)": [
     {
@@ -546,6 +550,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Identity Providers",
+      "path": "/system/silos/s/idps",
+    },
   ],
   "siloAccess (/access)": [
     {
@@ -562,6 +570,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Fleet Roles",
+      "path": "/system/silos/s/fleet-roles",
+    },
   ],
   "siloIdps (/system/silos/s/idps)": [
     {
@@ -572,6 +584,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Identity Providers",
+      "path": "/system/silos/s/idps",
+    },
   ],
   "siloIdpsNew (/system/silos/s/idps-new)": [
     {
@@ -582,6 +598,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Identity Providers",
+      "path": "/system/silos/s/idps",
+    },
   ],
   "siloImageEdit (/images/im/edit)": [
     {
@@ -604,6 +624,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "IP Pools",
+      "path": "/system/silos/s/ip-pools",
+    },
   ],
   "siloQuotas (/system/silos/s/quotas)": [
     {
@@ -614,6 +638,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "Quotas",
+      "path": "/system/silos/s/quotas",
+    },
   ],
   "siloScim (/system/silos/s/scim)": [
     {
@@ -624,6 +652,10 @@ exports[`breadcrumbs 2`] = `
       "label": "s",
       "path": "/system/silos/s",
     },
+    {
+      "label": "SCIM",
+      "path": "/system/silos/s/scim",
+    },
   ],
   "siloUtilization (/utilization)": [
     {