More table conversions (#2115)

* Convert tables for Projects, Images, Instances

* convert NetworkingTab

* convert Storage tab

* convert Snapshots page

* Convert VPC page

* convert VPC Subnet tab

* convert SSH Keys page

* convert Silo Images page

* convert Disks tab

* convert Racks tab, though not sure we're using it

* convert Sleds tab

* convert Sled Instances tab

* convert IpPool page; unresolved tsc issue

* convert SiloIDPs tab, but link not quite right yet

* convert Silos page

* small refactor

* use proper LinkCell component for Identity Providers

* Refactor Silo Identity Providers

* Add DefaultPoolCell

* Update type definitions for column helper

* re-name QUeryTable2 and update imports

* Make Floating IP table's name column just render the name, instead of a link

* refactor

* Convert argument in cell accessor from props to info

* Tests passing; remove unused functions

* Remove Cell type

* Remove Cell type from BooleanCell

* Remove LabelCell

* clean up header / id, start extracting static cols

* Extract more staticCols

* clean up some id / header duplication

* memoization of VPC page cols

* consistent naming

* Memoize ImagesPage

* More momoization and moving things around

* move instance networking cols out

* pull out or memoize some more columns

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/pages/ProjectsPage.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
 import { Link, Outlet, useNavigate } from 'react-router-dom'
 
@@ -19,8 +20,8 @@ import { Folder24Icon } from '@oxide/design-system/icons/react'
 
 import { confirmDelete } from '~/stores/confirm-delete'
 import { DateCell } from '~/table/cells/DateCell'
-import { linkCell } from '~/table/cells/LinkCell'
-import type { MenuAction } from '~/table/columns/action-col'
+import { makeLinkCell } from '~/table/cells/LinkCell'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -45,11 +46,23 @@ ProjectsPage.loader = async () => {
   return null
 }
 
+const colHelper = createColumnHelper<Project>()
+const staticCols = [
+  colHelper.accessor('name', {
+    cell: makeLinkCell((project) => pb.instances({ project })),
+  }),
+  colHelper.accessor('description', {}),
+  colHelper.accessor('timeCreated', {
+    header: 'created',
+    cell: (info) => <DateCell value={info.getValue()} />,
+  }),
+]
+
 export function ProjectsPage() {
   const navigate = useNavigate()
 
   const queryClient = useApiQueryClient()
-  const { Table, Column } = useQueryTable('projectList', {})
+  const { Table } = useQueryTable('projectList', {})
   const { data: projects } = usePrefetchedApiQuery('projectList', {
     query: { limit: 25 }, // limit to match QueryTable
   })
@@ -105,6 +118,7 @@ export function ProjectsPage() {
     )
   )
 
+  const columns = useColsWithActions(staticCols, makeActions)
   return (
     <>
       <PageHeader>
@@ -115,11 +129,7 @@ export function ProjectsPage() {
           New Project
         </Link>
       </TableActions>
-      <Table emptyState={<EmptyState />} makeActions={makeActions}>
-        <Column accessor="name" cell={linkCell((project) => pb.instances({ project }))} />
-        <Column accessor="description" />
-        <Column accessor="timeCreated" header="Created" cell={DateCell} />
-      </Table>
+      <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
     </>
   )

app/pages/SiloAccessPage.tsx

@@ -114,12 +114,12 @@ export function SiloAccessPage() {
       colHelper.accessor('name', { header: 'Name' }),
       colHelper.accessor('identityType', {
         header: 'Type',
-        cell: (props) => identityTypeLabel[props.getValue()],
+        cell: (info) => identityTypeLabel[info.getValue()],
       }),
       colHelper.accessor('siloRole', {
         header: 'Role',
-        cell: (props) => {
-          const role = props.getValue()
+        cell: (info) => {
+          const role = info.getValue()
           return role ? <Badge color={roleColor[role]}>silo.{role}</Badge> : null
         },
       }),

app/pages/project/access/ProjectAccessPage.tsx

@@ -128,7 +128,7 @@ export function ProjectAccessPage() {
       colHelper.accessor('name', { header: 'Name' }),
       colHelper.accessor('identityType', {
         header: 'Type',
-        cell: (props) => identityTypeLabel[props.getValue()],
+        cell: (info) => identityTypeLabel[info.getValue()],
       }),
       colHelper.accessor('roleBadges', {
         header: () => (
@@ -140,9 +140,9 @@ export function ProjectAccessPage() {
             </TipIcon>
           </span>
         ),
-        cell: (props) => (
+        cell: (info) => (
           <ListPlusCell tooltipTitle="Other roles">
-            {props.getValue().map(({ roleName, roleSource }) => (
+            {info.getValue().map(({ roleName, roleSource }) => (
               <Badge key={roleSource} color={roleColor[roleName]}>
                 {roleSource}.{roleName}
               </Badge>

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 { useQueryTable } from '~/table/QueryTable2'
+import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -80,17 +80,17 @@ const staticCols = [
     (disk) => ('instance' in disk.state ? disk.state.instance : undefined),
     {
       header: 'Attached to',
-      cell: (props) => <InstanceLinkCell instanceId={props.getValue()} />,
+      cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
     }
   ),
-  colHelper.accessor('size', { cell: (props) => <SizeCell value={props.getValue()} /> }),
+  colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
   colHelper.accessor('state.state', {
     header: 'Status',
-    cell: (props) => <DiskStatusBadge status={props.getValue()} />,
+    cell: (info) => <DiskStatusBadge status={info.getValue()} />,
   }),
   colHelper.accessor('timeCreated', {
     header: 'Created',
-    cell: (props) => <DateCell value={props.getValue()} />,
+    cell: (info) => <DateCell value={info.getValue()} />,
   }),
 ]
 
@@ -172,7 +172,7 @@ export function DisksPage() {
           New Disk
         </Link>
       </TableActions>
-      <Table emptyState={<EmptyState />} columns={columns} />
+      <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
     </>
   )

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

@@ -27,9 +27,8 @@ import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 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 { useQueryTable } from '~/table/QueryTable2'
+import { useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
@@ -62,6 +61,17 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
+const colHelper = createColumnHelper<FloatingIp>()
+const staticCols = [
+  colHelper.accessor('name', {}),
+  colHelper.accessor('description', {}),
+  colHelper.accessor('ip', {}),
+  colHelper.accessor('instanceId', {
+    cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
+    header: 'Attached to instance',
+  }),
+]
+
 export function FloatingIpsPage() {
   const [floatingIpToModify, setFloatingIpToModify] = useState<FloatingIp | null>(null)
   const queryClient = useApiQueryClient()
@@ -88,20 +98,6 @@ export function FloatingIpsPage() {
     },
   })
 
-  const colHelper = createColumnHelper<FloatingIp>()
-
-  const staticCols = [
-    colHelper.accessor('name', {
-      cell: makeLinkCell((name) => pb.floatingIp({ floatingIp: name, project })),
-    }),
-    colHelper.accessor('description', {}),
-    colHelper.accessor('ip', {}),
-    colHelper.accessor('instanceId', {
-      cell: (props) => <InstanceLinkCell instanceId={props.getValue()} />,
-      header: 'Attached to instance',
-    }),
-  ]
-
   const makeActions = useCallback(
     (floatingIp: FloatingIp): MenuAction[] => {
       const instanceName = floatingIp.instanceId
@@ -199,7 +195,7 @@ export function FloatingIpsPage() {
           New Floating IP
         </TableControlsLink>
       </TableControls>
-      <Table emptyState={<EmptyState />} columns={columns} />
+      <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
       {floatingIpToModify && (
         <AttachFloatingIpModal

app/pages/project/images/ImagesPage.tsx

@@ -5,7 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useCallback, useState } from 'react'
+import { createColumnHelper } from '@tanstack/react-table'
+import { useCallback, useMemo, useState } from 'react'
 import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
@@ -14,9 +15,9 @@ import { Images24Icon } from '@oxide/design-system/icons/react'
 import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { DateCell } from '~/table/cells/DateCell'
-import { linkCell } from '~/table/cells/LinkCell'
+import { makeLinkCell } from '~/table/cells/LinkCell'
 import { SizeCell } from '~/table/cells/SizeCell'
-import type { MenuAction } from '~/table/columns/action-col'
+import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -36,6 +37,8 @@ const EmptyState = () => (
   />
 )
 
+const columnHelper = createColumnHelper<Image>()
+
 ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await apiQueryClient.prefetchQuery('imageList', {
@@ -46,7 +49,7 @@ ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
 
 export function ImagesPage() {
   const projectSelector = useProjectSelector()
-  const { Table, Column } = useQueryTable('imageList', { query: projectSelector })
+  const { Table } = useQueryTable('imageList', { query: projectSelector })
   const queryClient = useApiQueryClient()
   const addToast = useToast()
 
@@ -80,6 +83,24 @@ export function ImagesPage() {
     [deleteImage, projectSelector]
   )
 
+  const columns = useMemo(() => {
+    return [
+      columnHelper.accessor('name', {
+        cell: makeLinkCell((image) => pb.projectImageEdit({ ...projectSelector, image })),
+      }),
+      columnHelper.accessor('description', {}),
+      columnHelper.accessor('size', {
+        header: 'size',
+        cell: (info) => <SizeCell value={info.getValue()} />,
+      }),
+      columnHelper.accessor('timeCreated', {
+        header: 'created',
+        cell: (info) => <DateCell value={info.getValue()} />,
+      }),
+      getActionsCol(makeActions),
+    ]
+  }, [projectSelector, makeActions])
+
   return (
     <>
       <PageHeader>
@@ -93,15 +114,7 @@ export function ImagesPage() {
           Upload image
         </Link>
       </TableActions>
-      <Table emptyState={<EmptyState />} makeActions={makeActions}>
-        <Column
-          accessor="name"
-          cell={linkCell((image) => pb.projectImageEdit({ ...projectSelector, image }))}
-        />
-        <Column accessor="description" />
-        <Column accessor="size" cell={SizeCell} />
-        <Column accessor="timeCreated" header="Created" cell={DateCell} />
-      </Table>
+      <Table columns={columns} emptyState={<EmptyState />} />
       {promoteImageName && (
         <PromoteImageModal
           onDismiss={() => setPromoteImageName(null)}

app/pages/project/instances/InstancesPage.tsx

@@ -5,17 +5,24 @@
  *
  * Copyright Oxide Computer Company
  */
+import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import { apiQueryClient, useApiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
+import {
+  apiQueryClient,
+  useApiQueryClient,
+  usePrefetchedApiQuery,
+  type Instance,
+} from '@oxide/api'
 import { Instances24Icon, Refresh16Icon } from '@oxide/design-system/icons/react'
 
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
 import { DateCell } from '~/table/cells/DateCell'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell'
-import { linkCell } from '~/table/cells/LinkCell'
+import { makeLinkCell } from '~/table/cells/LinkCell'
+import { getActionsCol } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button, buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -35,6 +42,8 @@ const EmptyState = () => (
   />
 )
 
+const colHelper = createColumnHelper<Instance>()
+
 InstancesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   await apiQueryClient.prefetchQuery('instanceList', {
     query: { ...getProjectSelector(params), limit: 25 },
@@ -75,12 +84,41 @@ export function InstancesPage() {
     )
   )
 
-  const { Table, Column } = useQueryTable(
+  const { Table } = useQueryTable(
     'instanceList',
     { query: projectSelector },
     { placeholderData: (x) => x }
   )
 
+  const columns = useMemo(
+    () => [
+      colHelper.accessor('name', {
+        cell: makeLinkCell((instance) => pb.instancePage({ ...projectSelector, instance })),
+      }),
+      colHelper.accessor((i) => ({ ncpus: i.ncpus, memory: i.memory }), {
+        header: 'CPU, RAM',
+        cell: (info) => <InstanceResourceCell value={info.getValue()} />,
+      }),
+      colHelper.accessor(
+        (i) => ({
+          runState: i.runState,
+          timeRunStateUpdated: i.timeRunStateUpdated,
+        }),
+        {
+          header: 'status',
+          cell: (info) => <InstanceStatusCell value={info.getValue()} />,
+        }
+      ),
+      colHelper.accessor('hostname', {}),
+      colHelper.accessor('timeCreated', {
+        header: 'created',
+        cell: (info) => <DateCell value={info.getValue()} />,
+      }),
+      getActionsCol(makeActions),
+    ],
+    [projectSelector, makeActions]
+  )
+
   if (!instances) return null
 
   return (
@@ -101,28 +139,7 @@ export function InstancesPage() {
           New Instance
         </Link>
       </TableActions>
-      <Table makeActions={makeActions} emptyState={<EmptyState />}>
-        <Column
-          accessor="name"
-          cell={linkCell((instance) => pb.instancePage({ ...projectSelector, instance }))}
-        />
-        <Column
-          id="resources"
-          header="CPU, RAM"
-          accessor={(i) => ({ ncpus: i.ncpus, memory: i.memory })}
-          cell={InstanceResourceCell}
-        />
-        <Column
-          id="status"
-          accessor={(i) => ({
-            runState: i.runState,
-            timeRunStateUpdated: i.timeRunStateUpdated,
-          })}
-          cell={InstanceStatusCell}
-        />
-        <Column accessor="hostname" />
-        <Column accessor="timeCreated" header="created" cell={DateCell} />
-      </Table>
+      <Table columns={columns} emptyState={<EmptyState />} />
     </>
   )
 }