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 <[email protected]>

Author: charliepark

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"
     />
   )

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 }

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(