Refresh button on instance detail page (#2159)

* refresh button invalidates all queries, add it to instance detail

* use refreshData on onSuccess on actions too

Author: david-crespo

app/api/hooks.ts

@@ -239,9 +239,11 @@ export const wrapQueryClient = <A extends ApiClient>(api: A, queryClient: QueryC
    * accidentally overspecifying and therefore failing to match the desired
    * query. The params argument can be added back in if we ever have a use case
    * for it.
+   *
+   * Passing no arguments will invalidate all queries.
    */
-  invalidateQueries: <M extends keyof A>(method: M, filters?: InvalidateQueryFilters) =>
-    queryClient.invalidateQueries({ queryKey: [method], ...filters }),
+  invalidateQueries: <M extends keyof A>(method?: M, filters?: InvalidateQueryFilters) =>
+    queryClient.invalidateQueries(method ? { queryKey: [method], ...filters } : undefined),
   setQueryData: <M extends keyof A>(method: M, params: Params<A[M]>, data: Result<A[M]>) =>
     queryClient.setQueryData([method, params], data),
   setQueryDataErrorsAllowed: <M extends keyof A>(

app/components/RefreshButton.tsx

@@ -0,0 +1,19 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { Refresh16Icon } from '@oxide/design-system/icons/react'
+
+import { Button } from '~/ui/lib/Button'
+
+export function RefreshButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button size="icon" variant="ghost" onClick={onClick} aria-label="Refresh data">
+      <Refresh16Icon />
+    </Button>
+  )
+}

app/pages/project/instances/InstancesPage.tsx

@@ -15,16 +15,17 @@ import {
   usePrefetchedApiQuery,
   type Instance,
 } from '@oxide/api'
-import { Instances24Icon, Refresh16Icon } from '@oxide/design-system/icons/react'
+import { Instances24Icon } from '@oxide/design-system/icons/react'
 
+import { RefreshButton } from '~/components/RefreshButton'
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { Button, buttonStyle } from '~/ui/lib/Button'
+import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
@@ -122,14 +123,7 @@ export function InstancesPage() {
         <PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
       </PageHeader>
       <TableActions>
-        <Button
-          size="icon"
-          variant="ghost"
-          onClick={refetchInstances}
-          aria-label="Refresh instances table"
-        >
-          <Refresh16Icon />
-        </Button>
+        <RefreshButton onClick={() => apiQueryClient.invalidateQueries('instanceList')} />
         <Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
           New Instance
         </Link>

app/pages/project/instances/instance/InstancePage.tsx

@@ -12,14 +12,14 @@ import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 import {
   apiQueryClient,
   useApiQuery,
-  useApiQueryClient,
   usePrefetchedApiQuery,
   type InstanceNetworkInterface,
 } from '@oxide/api'
 import { Instances24Icon } from '@oxide/design-system/icons/react'
 
 import { ExternalIps } from '~/components/ExternalIps'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
+import { RefreshButton } from '~/components/RefreshButton'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { InstanceStatusBadge } from '~/components/StatusBadge'
 import { getInstanceSelector, useInstanceSelector, useQuickActions } from '~/hooks'
@@ -37,6 +37,15 @@ function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
   return nic ? nic.vpcId : undefined
 }
 
+// this is meant to cover everything that we fetch in the page
+function refreshData() {
+  apiQueryClient.invalidateQueries('instanceView')
+  apiQueryClient.invalidateQueries('instanceExternalIpList')
+  apiQueryClient.invalidateQueries('instanceNetworkInterfaceList')
+  apiQueryClient.invalidateQueries('instanceDiskList') // storage tab
+  apiQueryClient.invalidateQueries('diskMetricsList') // metrics tab
+}
+
 InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, instance } = getInstanceSelector(params)
   await Promise.all([
@@ -75,11 +84,8 @@ export function InstancePage() {
   const instanceSelector = useInstanceSelector()
 
   const navigate = useNavigate()
-  const queryClient = useApiQueryClient()
   const makeActions = useMakeInstanceActions(instanceSelector, {
-    onSuccess: () => {
-      queryClient.invalidateQueries('instanceView')
-    },
+    onSuccess: refreshData,
     // go to project instances list since there's no more instance
     onDelete: () => navigate(pb.instances(instanceSelector)),
   })
@@ -137,7 +143,10 @@ export function InstancePage() {
     <>
       <PageHeader>
         <PageTitle icon={<Instances24Icon />}>{instance.name}</PageTitle>
-        <MoreActionsMenu label="Instance actions" actions={actions} />
+        <div className="inline-flex gap-2">
+          <RefreshButton onClick={refreshData} />
+          <MoreActionsMenu label="Instance actions" actions={actions} />
+        </div>
       </PageHeader>
       <PropertiesTable.Group className="-mt-8 mb-16">
         <PropertiesTable>