Add picker to Sled page topbar (#2493)

Author: charliepark

app/components/TopBarPicker.tsx

@@ -19,6 +19,7 @@ import {
   useInstanceSelector,
   useIpPoolSelector,
   useSiloSelector,
+  useSledParams,
   useVpcRouterSelector,
   useVpcSelector,
 } from '~/hooks/use-params'
@@ -343,3 +344,25 @@ export function InstancePicker() {
     />
   )
 }
+
+export function SledPicker() {
+  // picker only shows up when a sled is in scope
+  const { sledId } = useSledParams()
+  const { data: sleds } = useApiQuery('sledList', {
+    query: { limit: PAGE_SIZE },
+  })
+  const items = (sleds?.items || []).map(({ id }) => ({
+    label: id,
+    to: pb.sled({ sledId: id }),
+  }))
+  return (
+    <TopBarPicker
+      aria-label="Switch sled"
+      category="Sled"
+      current={sledId}
+      to={pb.sled({ sledId })}
+      items={items}
+      noItemsText="No sleds found"
+    />
+  )
+}

app/layouts/SystemLayout.tsx

@@ -19,7 +19,12 @@ import {
 import { trigger404 } from '~/components/ErrorBoundary'
 import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
 import { TopBar } from '~/components/TopBar'
-import { IpPoolPicker, SiloPicker, SiloSystemPicker } from '~/components/TopBarPicker'
+import {
+  IpPoolPicker,
+  SiloPicker,
+  SiloSystemPicker,
+  SledPicker,
+} from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
@@ -55,7 +60,7 @@ export function SystemLayout() {
   // 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
   // this is a one-liner. Switch to that approach at the first sign of trouble.
-  const { silo, pool } = useParams()
+  const { silo, pool, sledId } = useParams()
   const navigate = useNavigate()
   const { pathname } = useLocation()
 
@@ -92,6 +97,7 @@ export function SystemLayout() {
         <SiloSystemPicker value="system" />
         {silo && <SiloPicker />}
         {pool && <IpPoolPicker />}
+        {sledId && <SledPicker />}
       </TopBar>
       <Sidebar>
         <Sidebar.Nav>