From 8dcddcef62b8d10dfcd3adb470439212b23b3d5e Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 20 Aug 2024 15:50:02 -0700
Subject: [PATCH] Add dropdown to instance breadcrumb (#2392)

* Add dropdown to instance breadcrumb

* on instance delete success, invalidate instance list before navigating

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
---
 app/components/TopBarPicker.tsx                     | 13 ++++++++++---
 app/pages/project/instances/InstancesPage.tsx       | 12 +++---------
 .../project/instances/instance/InstancePage.tsx     |  5 ++++-
 3 files changed, 17 insertions(+), 13 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"
     />
   )
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 073807b0d..7d7996e84 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -10,12 +10,7 @@ import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import {
-  apiQueryClient,
-  useApiQueryClient,
-  usePrefetchedApiQuery,
-  type Instance,
-} from '@oxide/api'
+import { apiQueryClient, usePrefetchedApiQuery, type Instance } from '@oxide/api'
 import { Instances16Icon, Instances24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
@@ -55,12 +50,11 @@ InstancesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
+const refetchInstances = () => apiQueryClient.invalidateQueries('instanceList')
+
 export function InstancesPage() {
   const { project } = useProjectSelector()
 
-  const queryClient = useApiQueryClient()
-  const refetchInstances = () => queryClient.invalidateQueries('instanceList')
-
   const makeActions = useMakeInstanceActions(
     { project },
     { onSuccess: refetchInstances, onDelete: refetchInstances }
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 95c2b2d19..e79c6aab2 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -94,7 +94,10 @@ export function InstancePage() {
   const makeActions = useMakeInstanceActions(instanceSelector, {
     onSuccess: refreshData,
     // go to project instances list since there's no more instance
-    onDelete: () => navigate(pb.instances(instanceSelector)),
+    onDelete: () => {
+      apiQueryClient.invalidateQueries('instanceList')
+      navigate(pb.instances(instanceSelector))
+    },
   })
 
   const { data: instance } = usePrefetchedApiQuery(