Wrap all the makeActions functions in useCallback (#2112)

wrap all the makeActions functions in useCallback

app/pages/ProjectsPage.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Link, Outlet, useNavigate } from 'react-router-dom'
 
 import {
@@ -62,28 +62,31 @@ export function ProjectsPage() {
     },
   })
 
-  const makeActions = (project: Project): MenuAction[] => [
-    {
-      label: 'Edit',
-      onActivate: () => {
-        // the edit view has its own loader, but we can make the modal open
-        // instantaneously by preloading the fetch result
-        apiQueryClient.setQueryData(
-          'projectView',
-          { path: { project: project.name } },
-          project
-        )
-        navigate(pb.projectEdit({ project: project.name }))
+  const makeActions = useCallback(
+    (project: Project): MenuAction[] => [
+      {
+        label: 'Edit',
+        onActivate: () => {
+          // the edit view has its own loader, but we can make the modal open
+          // instantaneously by preloading the fetch result
+          apiQueryClient.setQueryData(
+            'projectView',
+            { path: { project: project.name } },
+            project
+          )
+          navigate(pb.projectEdit({ project: project.name }))
+        },
       },
-    },
-    {
-      label: 'Delete',
-      onActivate: confirmDelete({
-        doDelete: () => deleteProject.mutateAsync({ path: { project: project.name } }),
-        label: project.name,
-      }),
-    },
-  ]
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () => deleteProject.mutateAsync({ path: { project: project.name } }),
+          label: project.name,
+        }),
+      },
+    ],
+    [deleteProject, navigate]
+  )
 
   useQuickActions(
     useMemo(

app/pages/project/disks/DisksPage.tsx

@@ -26,7 +26,7 @@ import { DateCell } from '~/table/cells/DateCell'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { SizeCell } from '~/table/cells/SizeCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
-import { useQueryTable2 } from '~/table/QueryTable2'
+import { useQueryTable } from '~/table/QueryTable2'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -97,7 +97,7 @@ const staticCols = [
 export function DisksPage() {
   const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()
-  const { Table } = useQueryTable2('diskList', { query: { project } })
+  const { Table } = useQueryTable('diskList', { query: { project } })
   const addToast = useToast()
 
   const deleteDisk = useApiMutation('diskDelete', {

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -29,7 +29,7 @@ import { addToast } from '~/stores/toast'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
-import { useQueryTable2 } from '~/table/QueryTable2'
+import { useQueryTable } from '~/table/QueryTable2'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
@@ -180,7 +180,7 @@ export function FloatingIpsPage() {
     [deleteFloatingIp, floatingIpDetach, navigate, project, instances]
   )
 
-  const { Table } = useQueryTable2('floatingIpList', { query: { project } })
+  const { Table } = useQueryTable('floatingIpList', { query: { project } })
 
   const columns = useColsWithActions(staticCols, makeActions)
 

app/pages/project/images/ImagesPage.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
@@ -59,20 +59,26 @@ export function ImagesPage() {
     },
   })
 
-  const makeActions = (image: Image): MenuAction[] => [
-    {
-      label: 'Promote',
-      onActivate: () => setPromoteImageName(image.name),
-    },
-    {
-      label: 'Delete',
-      onActivate: confirmDelete({
-        doDelete: () =>
-          deleteImage.mutateAsync({ path: { image: image.name }, query: projectSelector }),
-        label: image.name,
-      }),
-    },
-  ]
+  const makeActions = useCallback(
+    (image: Image): MenuAction[] => [
+      {
+        label: 'Promote',
+        onActivate: () => setPromoteImageName(image.name),
+      },
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () =>
+            deleteImage.mutateAsync({
+              path: { image: image.name },
+              query: projectSelector,
+            }),
+          label: image.name,
+        }),
+      },
+    ],
+    [deleteImage, projectSelector]
+  )
 
   return (
     <>

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -122,48 +122,55 @@ export function NetworkingTab() {
   })
   const canUpdateNic = instanceCan.updateNic(instance)
 
-  const makeActions = (nic: InstanceNetworkInterface): MenuAction[] => [
-    {
-      label: 'Make primary',
-      onActivate() {
-        editNic.mutate({
-          path: { interface: nic.name },
-          query: instanceSelector,
-          body: { ...nic, primary: true },
-        })
+  const makeActions = useCallback(
+    (nic: InstanceNetworkInterface): MenuAction[] => [
+      {
+        label: 'Make primary',
+        onActivate() {
+          editNic.mutate({
+            path: { interface: nic.name },
+            query: instanceSelector,
+            body: { ...nic, primary: true },
+          })
+        },
+        disabled: nic.primary
+          ? 'This network interface is already set as primary'
+          : !canUpdateNic && (
+              <>
+                The instance must be {updateNicStates} to change its primary network
+                interface
+              </>
+            ),
       },
-      disabled: nic.primary
-        ? 'This network interface is already set as primary'
-        : !canUpdateNic && (
-            <>
-              The instance must be {updateNicStates} to change its primary network interface
-            </>
-          ),
-    },
-    {
-      label: 'Edit',
-      onActivate() {
-        setEditing(nic)
+      {
+        label: 'Edit',
+        onActivate() {
+          setEditing(nic)
+        },
+        disabled: !canUpdateNic && (
+          <>
+            The instance must be {updateNicStates} before editing a network interface&apos;s
+            settings
+          </>
+        ),
       },
-      disabled: !canUpdateNic && (
-        <>
-          The instance must be {updateNicStates} before editing a network interface&apos;s
-          settings
-        </>
-      ),
-    },
-    {
-      label: 'Delete',
-      onActivate: confirmDelete({
-        doDelete: () =>
-          deleteNic.mutateAsync({ path: { interface: nic.name }, query: instanceSelector }),
-        label: nic.name,
-      }),
-      disabled: !canUpdateNic && (
-        <>The instance must be {updateNicStates} to delete a network interface</>
-      ),
-    },
-  ]
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () =>
+            deleteNic.mutateAsync({
+              path: { interface: nic.name },
+              query: instanceSelector,
+            }),
+          label: nic.name,
+        }),
+        disabled: !canUpdateNic && (
+          <>The instance must be {updateNicStates} to delete a network interface</>
+        ),
+      },
+    ],
+    [canUpdateNic, deleteNic, editNic, instanceSelector]
+  )
 
   const emptyState = (
     <EmptyMessage

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useCallback } from 'react'
 import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -81,8 +82,8 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
 
 export function SnapshotsPage() {
   const queryClient = useApiQueryClient()
-  const projectSelector = useProjectSelector()
-  const { Table, Column } = useQueryTable('snapshotList', { query: projectSelector })
+  const { project } = useProjectSelector()
+  const { Table, Column } = useQueryTable('snapshotList', { query: { project } })
   const navigate = useNavigate()
 
   const deleteSnapshot = useApiMutation('snapshotDelete', {
@@ -91,33 +92,35 @@ export function SnapshotsPage() {
     },
   })
 
-  const makeActions = (snapshot: Snapshot): MenuAction[] => [
-    {
-      label: 'Create image',
-      onActivate() {
-        navigate(pb.snapshotImagesNew({ ...projectSelector, snapshot: snapshot.name }))
+  const makeActions = useCallback(
+    (snapshot: Snapshot): MenuAction[] => [
+      {
+        label: 'Create image',
+        onActivate() {
+          navigate(pb.snapshotImagesNew({ project, snapshot: snapshot.name }))
+        },
       },
-    },
-    {
-      label: 'Delete',
-      onActivate: confirmDelete({
-        doDelete: () =>
-          deleteSnapshot.mutateAsync({
-            path: { snapshot: snapshot.name },
-            query: projectSelector,
-          }),
-        label: snapshot.name,
-      }),
-    },
-  ]
-
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () =>
+            deleteSnapshot.mutateAsync({
+              path: { snapshot: snapshot.name },
+              query: { project },
+            }),
+          label: snapshot.name,
+        }),
+      },
+    ],
+    [deleteSnapshot, navigate, project]
+  )
   return (
     <>
       <PageHeader>
         <PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to={pb.snapshotsNew(projectSelector)} className={buttonStyle({ size: 'sm' })}>
+        <Link to={pb.snapshotsNew({ project })} className={buttonStyle({ size: 'sm' })}>
           New Snapshot
         </Link>
       </TableActions>

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { useApiMutation, useApiQueryClient, type VpcSubnet } from '@oxide/api'
 
@@ -34,20 +34,23 @@ export const VpcSubnetsTab = () => {
     },
   })
 
-  const makeActions = (subnet: VpcSubnet): MenuAction[] => [
-    {
-      label: 'Edit',
-      onActivate: () => setEditing(subnet),
-    },
-    // TODO: only show if you have permission to do this
-    {
-      label: 'Delete',
-      onActivate: confirmDelete({
-        doDelete: () => deleteSubnet.mutateAsync({ path: { subnet: subnet.id } }),
-        label: subnet.name,
-      }),
-    },
-  ]
+  const makeActions = useCallback(
+    (subnet: VpcSubnet): MenuAction[] => [
+      {
+        label: 'Edit',
+        onActivate: () => setEditing(subnet),
+      },
+      // TODO: only show if you have permission to do this
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () => deleteSubnet.mutateAsync({ path: { subnet: subnet.id } }),
+          label: subnet.name,
+        }),
+      },
+    ],
+    [deleteSubnet]
+  )
 
   const emptyState = (
     <EmptyMessage