From 6d2fdf74a20431d2146d6d89e171852dfcd2180b Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 20 Aug 2024 14:58:37 -0700
Subject: [PATCH] Add dropdown to instance breadcrumb

---
 app/components/TopBarPicker.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index f6d1ffd6b..d08041a6f 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -326,14 +326,21 @@ export function ProjectPicker({ project }: { project?: Project }) {
 export function InstancePicker() {
   // picker only shows up when an instance is in scope
   const instanceSelector = useInstanceSelector()
-  const { instance } = instanceSelector
-
+  const { project, instance } = instanceSelector
+  const { data: instances } = useApiQuery('instanceList', {
+    query: { project, limit: PAGE_SIZE },
+  })
+  const items = (instances?.items || []).map(({ name }) => ({
+    label: name,
+    to: pb.instance({ project, instance: name }),
+  }))
   return (
     <TopBarPicker
       aria-label="Switch instance"
       category="Instance"
       current={instance}
-      to={pb.instanceStorage(instanceSelector)}
+      to={pb.instance({ project, instance })}
+      items={items}
       noItemsText="No instances found"
     />
   )