Skip to content

Increase list page size to 50 #2798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
david-crespo merged 1 commit into from
Apr 9, 2025
Merged

Increase list page size to 50 #2798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/api/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion app/api/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
2 changes: 1 addition & 1 deletion mock-api/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
)

Expand Down
30 changes: 16 additions & 14 deletions test/e2e/pagination.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)

Expand All @@ -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()
Expand Down
14 changes: 5 additions & 9 deletions test/e2e/snapshots.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Copy link
Contributor

@charliepark charliepark Apr 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love this util

Copy link
Collaborator Author

@david-crespo david-crespo Apr 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to change from snapshot-4 because it doesn’t do an exact match and it was picking snapshot-40 etc


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')
Expand All @@ -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"]'])

Expand Down
Loading