Import PAGE_SIZE constant from QueryTable for all list prefetches (#2160)

david-crespo · web-flow · commit aa75f5770ae1 · 2024-04-17T17:00:09.000-05:00
PAGE_SIZE constant. incredible
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
@@ -17,6 +17,7 @@ import {
 
 import { useInstanceSelector, useIpPoolSelector, useSiloSelector } from '~/hooks'
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
+import { PAGE_SIZE } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { DropdownMenu } from '~/ui/lib/DropdownMenu'
 import { Identicon } from '~/ui/lib/Identicon'
@@ -210,7 +211,7 @@ export function SiloSystemPicker({ value }: { value: 'silo' | 'system' }) {
 export function SiloPicker() {
   // picker only shows up when a silo is in scope
   const { silo: siloName } = useSiloSelector()
-  const { data } = useApiQuery('siloList', { query: { limit: 25 } })
+  const { data } = useApiQuery('siloList', { query: { limit: PAGE_SIZE } })
   const items = (data?.items || []).map((silo) => ({
     label: silo.name,
     to: pb.silo({ silo: silo.name }),
diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
@@ -22,7 +22,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -42,7 +42,7 @@ const EmptyState = () => (
 )
 
 ProjectsPage.loader = async () => {
-  await apiQueryClient.prefetchQuery('projectList', { query: { limit: 25 } })
+  await apiQueryClient.prefetchQuery('projectList', { query: { limit: PAGE_SIZE } })
   return null
 }
 
@@ -61,7 +61,7 @@ export function ProjectsPage() {
   const queryClient = useApiQueryClient()
   const { Table } = useQueryTable('projectList', {})
   const { data: projects } = usePrefetchedApiQuery('projectList', {
-    query: { limit: 25 }, // limit to match QueryTable
+    query: { limit: PAGE_SIZE },
   })
 
   const deleteProject = useApiMutation('projectDelete', {
diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx
@@ -26,7 +26,7 @@ import { addToast } from '~/stores/toast'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -49,7 +49,7 @@ DisksPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('diskList', {
-      query: { project, limit: 25 },
+      query: { project, limit: PAGE_SIZE },
     }),
 
     // fetch instances and preload into RQ cache so fetches by ID in
diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx
@@ -29,7 +29,7 @@ import { addToast } from '~/stores/toast'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
@@ -53,7 +53,7 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('floatingIpList', {
-      query: { project, limit: 25 },
+      query: { project, limit: PAGE_SIZE },
     }),
     apiQueryClient.prefetchQuery('instanceList', {
       query: { project },
diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx
@@ -18,7 +18,7 @@ import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
@@ -42,7 +42,7 @@ const colHelper = createColumnHelper<Image>()
 ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await apiQueryClient.prefetchQuery('imageList', {
-    query: { project, limit: 25 },
+    query: { project, limit: PAGE_SIZE },
   })
   return null
 }
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
@@ -23,7 +23,7 @@ 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 { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Button, buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -46,7 +46,9 @@ const colHelper = createColumnHelper<Instance>()
 
 InstancesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
-  await apiQueryClient.prefetchQuery('instanceList', { query: { project, limit: 25 } })
+  await apiQueryClient.prefetchQuery('instanceList', {
+    query: { project, limit: PAGE_SIZE },
+  })
   return null
 }
 
@@ -59,7 +61,7 @@ export function InstancesPage() {
   const makeActions = useMakeInstanceActions({ project }, { onSuccess: refetchInstances })
 
   const { data: instances } = usePrefetchedApiQuery('instanceList', {
-    query: { project, limit: 25 }, // to have same params as QueryTable
+    query: { project, limit: PAGE_SIZE },
   })
 
   const navigate = useNavigate()
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -28,7 +28,7 @@ import { getInstanceSelector, useInstanceSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 
@@ -39,7 +39,7 @@ StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
   await Promise.all([
     apiQueryClient.prefetchQuery('instanceDiskList', {
       path: { instance },
-      query: { project, limit: 25 }, // querytable
+      query: { project, limit: PAGE_SIZE },
     }),
     // This is covered by the InstancePage loader but there's no downside to
     // being redundant. If it were removed there, we'd still want it here.
diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx
@@ -24,7 +24,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { SkeletonCell } from '~/table/cells/EmptyCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -54,7 +54,7 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('snapshotList', {
-      query: { project, limit: 25 },
+      query: { project, limit: PAGE_SIZE },
     }),
 
     // Fetch disks and preload into RQ cache so fetches by ID in DiskNameFromId
diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -13,6 +13,7 @@ import { Networking24Icon } from '@oxide/design-system/icons/react'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { getVpcSelector, useVpcSelector } from '~/hooks'
 import { EmptyCell } from '~/table/cells/EmptyCell'
+import { PAGE_SIZE } from '~/table/QueryTable'
 import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -29,7 +30,7 @@ VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
       query: { project, vpc },
     }),
     apiQueryClient.prefetchQuery('vpcSubnetList', {
-      query: { project, vpc, limit: 25 },
+      query: { project, vpc, limit: PAGE_SIZE },
     }),
   ])
   return null
diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx
@@ -23,7 +23,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -42,19 +42,21 @@ const EmptyState = () => (
 
 const colHelper = createColumnHelper<Vpc>()
 
-// just as in the vpcList call for the quick actions menu, include limit: 25 to make
+// just as in the vpcList call for the quick actions menu, include limit to make
 // sure it matches the call in the QueryTable
 VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
-  await apiQueryClient.prefetchQuery('vpcList', { query: { project, limit: 25 } })
+  await apiQueryClient.prefetchQuery('vpcList', { query: { project, limit: PAGE_SIZE } })
   return null
 }
 
 export function VpcsPage() {
   const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()
   // to have same params as QueryTable
-  const { data: vpcs } = usePrefetchedApiQuery('vpcList', { query: { project, limit: 25 } })
+  const { data: vpcs } = usePrefetchedApiQuery('vpcList', {
+    query: { project, limit: PAGE_SIZE },
+  })
   const navigate = useNavigate()
 
   const deleteVpc = useApiMutation('vpcDelete', {
diff --git a/app/pages/settings/SSHKeysPage.tsx b/app/pages/settings/SSHKeysPage.tsx
@@ -15,15 +15,17 @@ import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 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'
 import { pb } from '~/util/path-builder'
 
 SSHKeysPage.loader = async () => {
-  await apiQueryClient.prefetchQuery('currentUserSshKeyList', { query: { limit: 25 } })
+  await apiQueryClient.prefetchQuery('currentUserSshKeyList', {
+    query: { limit: PAGE_SIZE },
+  })
   return null
 }
 
diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx
@@ -27,7 +27,7 @@ import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
@@ -46,7 +46,7 @@ const EmptyState = () => (
 
 SiloImagesPage.loader = async () => {
   await apiQueryClient.prefetchQuery('imageList', {
-    query: { limit: 25 },
+    query: { limit: PAGE_SIZE },
   })
   return null
 }
diff --git a/app/pages/system/inventory/DisksTab.tsx b/app/pages/system/inventory/DisksTab.tsx
@@ -10,7 +10,7 @@ import { createColumnHelper } from '@tanstack/react-table'
 import { apiQueryClient, type PhysicalDisk } from '@oxide/api'
 import { Racks24Icon } from '@oxide/design-system/icons/react'
 
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 
@@ -23,7 +23,7 @@ const EmptyState = () => (
 )
 
 DisksTab.loader = async () => {
-  await apiQueryClient.prefetchQuery('physicalDiskList', { query: { limit: 25 } })
+  await apiQueryClient.prefetchQuery('physicalDiskList', { query: { limit: PAGE_SIZE } })
   return null
 }
 
diff --git a/app/pages/system/inventory/InventoryPage.tsx b/app/pages/system/inventory/InventoryPage.tsx
@@ -9,18 +9,17 @@ import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import { Racks24Icon } from '@oxide/design-system/icons/react'
 
 import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { PAGE_SIZE } from '~/table/QueryTable'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { pb } from '~/util/path-builder'
 
 InventoryPage.loader = async () => {
-  await apiQueryClient.prefetchQuery('rackList', {
-    query: { limit: 25 },
-  })
+  await apiQueryClient.prefetchQuery('rackList', { query: { limit: PAGE_SIZE } })
   return null
 }
 
 export function InventoryPage() {
-  const { data: racks } = usePrefetchedApiQuery('rackList', { query: { limit: 25 } })
+  const { data: racks } = usePrefetchedApiQuery('rackList', { query: { limit: PAGE_SIZE } })
   const rack = racks?.items[0]
 
   if (!rack) return null
diff --git a/app/pages/system/inventory/SledsTab.tsx b/app/pages/system/inventory/SledsTab.tsx
@@ -11,7 +11,7 @@ import { apiQueryClient, type Sled } from '@oxide/api'
 import { Racks24Icon } from '@oxide/design-system/icons/react'
 
 import { makeLinkCell } from '~/table/cells/LinkCell'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pb } from '~/util/path-builder'
 
@@ -27,7 +27,7 @@ const EmptyState = () => {
 
 SledsTab.loader = async () => {
   await apiQueryClient.prefetchQuery('sledList', {
-    query: { limit: 25 },
+    query: { limit: PAGE_SIZE },
   })
   return null
 }
diff --git a/app/pages/system/inventory/sled/SledInstancesTab.tsx b/app/pages/system/inventory/sled/SledInstancesTab.tsx
@@ -16,7 +16,7 @@ import { requireSledParams, useSledParams } from '~/hooks'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pick } from '~/util/object'
 
@@ -34,7 +34,7 @@ SledInstancesTab.loader = async ({ params }: LoaderFunctionArgs) => {
   const { sledId } = requireSledParams(params)
   await apiQueryClient.prefetchQuery('sledInstanceList', {
     path: { sledId },
-    query: { limit: 25 },
+    query: { limit: PAGE_SIZE },
   })
   return null
 }
@@ -72,7 +72,7 @@ export function SledInstancesTab() {
   const { sledId } = useSledParams()
   const { Table } = useQueryTable(
     'sledInstanceList',
-    { path: { sledId }, query: { limit: 25 } },
+    { path: { sledId }, query: { limit: PAGE_SIZE } },
     { placeholderData: (x) => x }
   )
 
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
@@ -35,7 +35,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 { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
@@ -48,19 +48,12 @@ import { pb } from '~/util/path-builder'
 
 IpPoolPage.loader = async function ({ params }: LoaderFunctionArgs) {
   const { pool } = getIpPoolSelector(params)
+  const query = { limit: PAGE_SIZE }
   await Promise.all([
     apiQueryClient.prefetchQuery('ipPoolView', { path: { pool } }),
-    apiQueryClient.prefetchQuery('ipPoolSiloList', {
-      path: { pool },
-      query: { limit: 25 }, // match QueryTable
-    }),
-    apiQueryClient.prefetchQuery('ipPoolRangeList', {
-      path: { pool },
-      query: { limit: 25 }, // match QueryTable
-    }),
-    apiQueryClient.prefetchQuery('ipPoolUtilizationView', {
-      path: { pool },
-    }),
+    apiQueryClient.prefetchQuery('ipPoolSiloList', { path: { pool }, query }),
+    apiQueryClient.prefetchQuery('ipPoolRangeList', { path: { pool }, query }),
+    apiQueryClient.prefetchQuery('ipPoolUtilizationView', { path: { pool } }),
 
     // fetch silos and preload into RQ cache so fetches by ID in SiloNameFromId
     // can be mostly instant yet gracefully fall back to fetching individually
diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
@@ -26,7 +26,7 @@ import { SkeletonCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -63,14 +63,16 @@ const staticColumns = [
 ]
 
 IpPoolsPage.loader = async function () {
-  await apiQueryClient.prefetchQuery('ipPoolList', { query: { limit: 25 } })
+  await apiQueryClient.prefetchQuery('ipPoolList', { query: { limit: PAGE_SIZE } })
   return null
 }
 
 export function IpPoolsPage() {
   const navigate = useNavigate()
   const { Table } = useQueryTable('ipPoolList', {})
-  const { data: pools } = usePrefetchedApiQuery('ipPoolList', { query: { limit: 25 } })
+  const { data: pools } = usePrefetchedApiQuery('ipPoolList', {
+    query: { limit: PAGE_SIZE },
+  })
 
   const deletePool = useApiMutation('ipPoolDelete', {
     onSuccess() {
diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
diff --git a/app/pages/system/silos/SilosPage.tsx b/app/pages/system/silos/SilosPage.tsx
diff --git a/app/table/QueryTable.tsx b/app/table/QueryTable.tsx
