a hard one: IpPoolPage, have to handle rows with no ID field

Author: david-crespo

app/pages/system/networking/IpPoolPage.tsx

@@ -12,12 +12,16 @@ import { useForm } from 'react-hook-form'
 import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
+  apiq,
   apiQueryClient,
+  getListQFn,
   parseIpUtilization,
+  queryClient,
   useApiMutation,
   useApiQuery,
   useApiQueryClient,
   usePrefetchedApiQuery,
+  usePrefetchedQuery,
   type IpPoolRange,
   type IpPoolSiloLink,
 } from '@oxide/api'
@@ -38,7 +42,7 @@ import { SkeletonCell } from '~/table/cells/EmptyCell'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { useQueryTable } from '~/table/QueryTable2'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -51,14 +55,16 @@ import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
-const query = { limit: PAGE_SIZE }
+const ipPoolView = (pool: string) => apiq('ipPoolView', { path: { pool } })
+const ipPoolSiloList = (pool: string) => getListQFn('ipPoolSiloList', { path: { pool } })
+const ipPoolRangeList = (pool: string) => getListQFn('ipPoolRangeList', { path: { pool } })
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
   await Promise.all([
-    apiQueryClient.prefetchQuery('ipPoolView', { path: { pool } }),
-    apiQueryClient.prefetchQuery('ipPoolSiloList', { path: { pool }, query }),
-    apiQueryClient.prefetchQuery('ipPoolRangeList', { path: { pool }, query }),
+    queryClient.prefetchQuery(ipPoolView(pool)),
+    queryClient.prefetchQuery(ipPoolSiloList(pool).optionsFn()),
+    queryClient.prefetchQuery(ipPoolRangeList(pool).optionsFn()),
     apiQueryClient.prefetchQuery('ipPoolUtilizationView', { path: { pool } }),
 
     // fetch silos and preload into RQ cache so fetches by ID in SiloNameFromId
@@ -76,11 +82,10 @@ export async function loader({ params }: LoaderFunctionArgs) {
 Component.displayName = 'IpPoolPage'
 export function Component() {
   const poolSelector = useIpPoolSelector()
-  const { data: pool } = usePrefetchedApiQuery('ipPoolView', { path: poolSelector })
-  const { data: ranges } = usePrefetchedApiQuery('ipPoolRangeList', {
-    path: poolSelector,
-    query,
-  })
+  const { data: pool } = usePrefetchedQuery(ipPoolView(poolSelector.pool))
+  const { data: ranges } = usePrefetchedQuery(
+    ipPoolRangeList(poolSelector.pool).optionsFn()
+  )
   const navigate = useNavigate()
   const { mutateAsync: deletePool } = useApiMutation('ipPoolDelete', {
     onSuccess(_data, variables) {
@@ -190,7 +195,6 @@ const ipRangesStaticCols = [
 
 function IpRangesTable() {
   const { pool } = useIpPoolSelector()
-  const { Table } = useQueryTable('ipPoolRangeList', { path: { pool } })
   const queryClient = useApiQueryClient()
 
   const { mutateAsync: removeRange } = useApiMutation('ipPoolRangeRemove', {
@@ -239,13 +243,14 @@ function IpRangesTable() {
     [pool, removeRange]
   )
   const columns = useColsWithActions(ipRangesStaticCols, makeRangeActions)
+  const { table } = useQueryTable({ query: ipPoolRangeList(pool), columns, emptyState })
 
   return (
     <>
       <div className="mb-3 flex justify-end">
         <CreateLink to={pb.ipPoolRangeAdd({ pool })}>Add range</CreateLink>
       </div>
-      <Table columns={columns} emptyState={emptyState} />
+      {table}
     </>
   )
 }
@@ -283,7 +288,6 @@ const silosStaticCols = [
 function LinkedSilosTable() {
   const poolSelector = useIpPoolSelector()
   const queryClient = useApiQueryClient()
-  const { Table } = useQueryTable('ipPoolSiloList', { path: poolSelector })
 
   const { mutateAsync: unlinkSilo } = useApiMutation('ipPoolSiloUnlink', {
     onSuccess() {
@@ -335,12 +339,19 @@ function LinkedSilosTable() {
   )
 
   const columns = useColsWithActions(silosStaticCols, makeActions)
+  const { table } = useQueryTable({
+    query: ipPoolSiloList(poolSelector.pool),
+    columns,
+    emptyState,
+    getId: (link) => link.siloId,
+  })
+
   return (
     <>
       <div className="mb-3 flex justify-end">
         <CreateButton onClick={() => setShowLinkModal(true)}>Link silo</CreateButton>
       </div>
-      <Table columns={columns} emptyState={emptyState} />
+      {table}
       {showLinkModal && <LinkSiloModal onDismiss={() => setShowLinkModal(false)} />}
     </>
   )

app/table/QueryTable2.tsx

@@ -25,7 +25,18 @@ type QueryTableProps<TItem> = {
   // React Table does the same in the type of `columns` on `useReactTable`
   // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   columns: ColumnDef<TItem, any>[]
-}
+  // Require getId if and only if TItem does not have an id field. Something
+  // to keep in mind for the future: if instead we used the `select` transform
+  // function on the query to add an ID to every row, we could just require TItem
+  // to extend `{ id: string }`, and we wouldn't need this `getId` function. The
+  // difficulty I ran into was propagating the result of `select` through the API
+  // query options helpers. But I think it can be done.
+} & (TItem extends { id: string }
+  ? { getId?: never }
+  : {
+      /** Needed if and only if `TItem` has no `id` field */
+      getId: (row: TItem) => string
+    })
 
 /**
  * Reset scroll to top when clicking * next/prev to change page but not,
@@ -45,11 +56,12 @@ function useScrollReset(triggerDep: string | undefined) {
 }
 
 // require ID only so we can use it in getRowId
-export function useQueryTable<TItem extends { id: string }>({
+export function useQueryTable<TItem>({
   query,
   rowHeight = 'small',
   emptyState,
   columns,
+  getId,
 }: QueryTableProps<TItem>) {
   const { currentPage, goToNextPage, goToPrevPage, hasPrev } = usePagination()
   const queryOptions = query.optionsFn(currentPage)
@@ -59,15 +71,21 @@ export function useQueryTable<TItem extends { id: string }>({
   const { data, isPlaceholderData } = queryResult
   const tableData = useMemo(() => data?.items || [], [data])
 
+  const getRowId = getId
+    ? getId
+    : // @ts-expect-error we know from the types that getId is only defined when there is no ID
+      (row: TItem) => row.id as string
+
   // trigger by first item ID and not, e.g., currentPage because currentPage
   // changes as soon as you click Next, while the item ID doesn't change until
   // the page actually changes.
-  const requestScrollReset = useScrollReset(tableData.at(0)?.id)
+  const first = tableData.at(0)
+  const requestScrollReset = useScrollReset(first ? getRowId(first) : undefined)
 
   const table = useReactTable({
     columns,
     data: tableData,
-    getRowId: (row) => row.id,
+    getRowId,
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
   })