Increase list page size to 50 (#2798)

increase default page size to 50

Author: david-crespo

app/api/hooks.ts

@@ -119,7 +119,7 @@ export const getApiQueryOptions =
 
 // Managed here instead of at the display layer so it can be built into the
 // query options and shared between loader prefetch and QueryTable
-export const PAGE_SIZE = 25
+export const PAGE_SIZE = 50
 
 /**
  * This primarily exists so we can have an object that encapsulates everything

app/api/index.ts

@@ -19,6 +19,6 @@ export * from './__generated__/Api'
 
 export type { ApiTypes }
 
-export { ensurePrefetched, PAGE_SIZE, type PaginatedQuery, type ResultsPage } from './hooks'
+export { ensurePrefetched, type PaginatedQuery, type ResultsPage } from './hooks'
 export type { ApiError } from './errors'
 export { navToLogin } from './nav-to-login'

mock-api/snapshot.ts

@@ -16,7 +16,7 @@ import { disks } from './disk'
 import type { Json } from './json-type'
 import { project } from './project'
 
-const generatedSnapshots: Json<Snapshot>[] = Array.from({ length: 80 }, (_, i) =>
+const generatedSnapshots: Json<Snapshot>[] = Array.from({ length: 160 }, (_, i) =>
   generateSnapshot(i)
 )
 

test/e2e/pagination.e2e.ts

@@ -7,6 +7,8 @@
  */
 import { expect, test, type Page } from '@playwright/test'
 
+import { PAGE_SIZE } from '~/api/hooks'
+
 import { expectScrollTop, scrollTo } from './utils'
 
 // expectRowVisible is too have for all this
@@ -26,8 +28,8 @@ test('pagination', async ({ page }) => {
   await expect(prevButton).toBeDisabled() // we're on the first page
 
   await expectCell(page, 'snapshot-1')
-  await expectCell(page, 'disk-1-snapshot-25')
-  await expect(rows).toHaveCount(25)
+  await expectCell(page, `disk-1-snapshot-${PAGE_SIZE}`)
+  await expect(rows).toHaveCount(PAGE_SIZE)
 
   await scrollTo(page, 100)
 
@@ -40,28 +42,28 @@ test('pagination', async ({ page }) => {
   await expect(spinner).toBeHidden()
   await expectScrollTop(page, 0) // scroll resets to top on page change
 
-  await expectCell(page, 'disk-1-snapshot-26')
-  await expectCell(page, 'disk-1-snapshot-50')
-  await expect(rows).toHaveCount(25)
+  await expectCell(page, `disk-1-snapshot-${PAGE_SIZE + 1}`)
+  await expectCell(page, `disk-1-snapshot-${2 * PAGE_SIZE}`)
+  await expect(rows).toHaveCount(PAGE_SIZE)
 
   await nextButton.click()
-  await expectCell(page, 'disk-1-snapshot-51')
-  await expectCell(page, 'disk-1-snapshot-75')
-  await expect(rows).toHaveCount(25)
+  await expectCell(page, `disk-1-snapshot-${2 * PAGE_SIZE + 1}`)
+  await expectCell(page, `disk-1-snapshot-${3 * PAGE_SIZE}`)
+  await expect(rows).toHaveCount(PAGE_SIZE)
 
   await nextButton.click()
-  await expectCell(page, 'disk-1-snapshot-76')
-  await expectCell(page, 'disk-1-snapshot-86')
-  await expect(rows).toHaveCount(12)
+  await expectCell(page, `disk-1-snapshot-${3 * PAGE_SIZE + 1}`)
+  await expectCell(page, 'disk-1-snapshot-167')
+  await expect(rows).toHaveCount(17)
   await expect(nextButton).toBeDisabled() // no more pages
 
   await scrollTo(page, 250)
 
   await prevButton.click()
   await expect(spinner).toBeHidden({ timeout: 10 }) // no spinner, cached page
-  await expect(rows).toHaveCount(25)
-  await expectCell(page, 'disk-1-snapshot-51')
-  await expectCell(page, 'disk-1-snapshot-75')
+  await expect(rows).toHaveCount(PAGE_SIZE)
+  await expectCell(page, `disk-1-snapshot-${2 * PAGE_SIZE + 1}`)
+  await expectCell(page, `disk-1-snapshot-${3 * PAGE_SIZE}`)
   await expectScrollTop(page, 0) // scroll resets to top on prev too
 
   await nextButton.click()

test/e2e/snapshots.e2e.ts

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { expect, expectRowVisible, expectVisible, test } from './utils'
+import { clickRowAction, expect, expectRowVisible, expectVisible, test } from './utils'
 
 test('Click through snapshots', async ({ page }) => {
   await page.goto('/projects/mock-project')
@@ -85,13 +85,11 @@ test('Error on delete snapshot', async ({ page }) => {
 test('Create image from snapshot', async ({ page }) => {
   await page.goto('/projects/mock-project/snapshots')
 
-  const row = page.getByRole('row', { name: 'snapshot-4' })
-  await row.getByRole('button', { name: 'Row actions' }).click()
-  await page.getByRole('menuitem', { name: 'Create image' }).click()
+  await clickRowAction(page, 'disk-1-snapshot-8', 'Create image')
 
   await expectVisible(page, ['role=dialog[name="Create image from snapshot"]'])
 
-  await page.fill('role=textbox[name="Name"]', 'image-from-snapshot-4')
+  await page.fill('role=textbox[name="Name"]', 'image-from-snapshot-8')
   await page.fill('role=textbox[name="Description"]', 'image description')
   await page.fill('role=textbox[name="OS"]', 'Ubuntu')
   await page.fill('role=textbox[name="Version"]', '20.02')
@@ -102,17 +100,15 @@ test('Create image from snapshot', async ({ page }) => {
 
   await page.click('role=link[name*="Images"]')
   await expectRowVisible(page.getByRole('table'), {
-    name: 'image-from-snapshot-4',
+    name: 'image-from-snapshot-8',
     description: 'image description',
   })
 })
 
 test('Create image from snapshot, name taken', async ({ page }) => {
   await page.goto('/projects/mock-project/snapshots')
 
-  const row = page.getByRole('row', { name: 'snapshot-4' })
-  await row.getByRole('button', { name: 'Row actions' }).click()
-  await page.getByRole('menuitem', { name: 'Create image' }).click()
+  await clickRowAction(page, 'disk-1-snapshot-8', 'Create image')
 
   await expectVisible(page, ['role=dialog[name="Create image from snapshot"]'])