fix(ui): properly sync search params to user preferences (#13200)

Some search params within the list view do not properly sync to user
preferences, and visa versa.

For example, when selecting a query preset, the `?preset=123` param is
injected into the URL and saved to preferences, but when reloading the
page without the param, that preset is not reactivated as expected.

### Problem 

The reason this wasn't working before is that omitting this param would
also reset prefs. It was designed this way in order to support
client-side resets, e.g. clicking the query presets "x" button.

This pattern would never work, however, because this means that every
time the user navigates to the list view directly, their preference is
cleared, as no param would exist in the query.

Note: this is not an issue with _all_ params, as not all are handled in
the same way.

### Solution

The fix is to use empty values instead, e.g. `?preset=`. When the server
receives this, it knows to clear the pref. If it doesn't exist at all,
it knows to load from prefs. And if it has a value, it saves to prefs.
On the client, we sanitize those empty values back out so they don't
appear in the URL in the end.

This PR also refactors much of the list query context and its respective
provider to be significantly more predictable and easier to work with,
namely:

- The `ListQuery` type now fully aligns with what Payload APIs expect,
e.g. `page` is a number, not a string
- The provider now receives a single `query` prop which matches the
underlying context 1:1
- Propagating the query from the server to the URL is significantly more
predictable
- Any new props that may be supported in the future will automatically
work
- No more reconciling `columns` and `listPreferences.columns`, its just
`query.columns`

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210827129744922
This commit is contained in:
Jacob Fletcher
2025-07-18 09:29:26 -04:00
committed by GitHub
parent 46d8a26b0d
commit d7a3faa4e9
22 changed files with 370 additions and 215 deletions

View File

@@ -74,6 +74,7 @@ export const testEslintConfig = [
'expectNoResultsAndCreateFolderButton',
'createFolder',
'createFolderFromDoc',
'assertURLParams',
],
},
],

View File

@@ -549,6 +549,14 @@ export interface BlockField {
}
)[]
| null;
readOnly?:
| {
title?: string | null;
id?: string | null;
blockName?: string | null;
blockType: 'readOnlyBlock';
}[]
| null;
updatedAt: string;
createdAt: string;
}
@@ -2222,6 +2230,17 @@ export interface BlockFieldsSelect<T extends boolean = true> {
blockName?: T;
};
};
readOnly?:
| T
| {
readOnlyBlock?:
| T
| {
title?: T;
id?: T;
blockName?: T;
};
};
updatedAt?: T;
createdAt?: T;
}

View File

@@ -4,6 +4,7 @@ import { expect, test } from '@playwright/test'
import { devUser } from 'credentials.js'
import { openListColumns } from 'helpers/e2e/openListColumns.js'
import { toggleColumn } from 'helpers/e2e/toggleColumn.js'
import { openNav } from 'helpers/e2e/toggleNav.js'
import * as path from 'path'
import { fileURLToPath } from 'url'
@@ -152,23 +153,38 @@ describe('Query Presets', () => {
test('should select preset and apply filters', async () => {
await page.goto(pagesUrl.list)
await selectPreset({ page, presetTitle: seededData.everyone.title })
await assertURLParams({
page,
columns: seededData.everyone.columns,
where: seededData.everyone.where,
presetID: everyoneID,
preset: everyoneID,
})
expect(true).toBe(true)
})
test('should clear selected preset and reset filters', async () => {
await page.goto(pagesUrl.list)
await selectPreset({ page, presetTitle: seededData.everyone.title })
await clearSelectedPreset({ page })
expect(true).toBe(true)
// ensure that the preset was cleared from preferences by navigating without the `?preset=` param
// e.g. do not do `page.reload()`
await page.goto(pagesUrl.list)
// poll url to ensure that `?preset=` param is not present
// this is first set to an empty string to clear from the user's preferences
// it is then removed entirely after it is processed on the server
const regex = /preset=/
await page.waitForURL((url) => !regex.test(url.search), { timeout: TEST_TIMEOUT_LONG })
await expect(
page.locator('button#select-preset', {
hasText: exactText('Select Preset'),
}),
).toBeVisible()
})
test('should delete a preset, clear selection, and reset changes', async () => {
@@ -205,18 +221,29 @@ describe('Query Presets', () => {
test('should save last used preset to preferences and load on initial render', async () => {
await page.goto(pagesUrl.list)
await selectPreset({ page, presetTitle: seededData.everyone.title })
await page.reload()
await page.goto(pagesUrl.list)
await assertURLParams({
page,
columns: seededData.everyone.columns,
where: seededData.everyone.where,
// presetID: everyoneID,
preset: everyoneID,
})
expect(true).toBe(true)
// for good measure, also soft navigate away and back
await page.goto(pagesUrl.admin)
await openNav(page)
await page.click(`a[href="/admin/collections/${pagesSlug}"]`)
await assertURLParams({
page,
columns: seededData.everyone.columns,
where: seededData.everyone.where,
preset: everyoneID,
})
})
test('should only show "edit" and "delete" controls when there is an active preset', async () => {

View File

@@ -10,12 +10,12 @@ export async function assertURLParams({
page,
columns,
where,
presetID,
preset,
}: {
columns?: ColumnPreference[]
page: Page
presetID?: string | undefined
where: Where
preset?: string | undefined
where?: Where
}) {
if (where) {
// TODO: can't get columns to encode correctly
@@ -32,8 +32,8 @@ export async function assertURLParams({
await page.waitForURL(columnsRegex)
}
if (presetID) {
const presetRegex = new RegExp(`preset=${presetID}`)
if (preset) {
const presetRegex = new RegExp(`preset=${preset}`)
await page.waitForURL(presetRegex)
}
}

View File

@@ -154,6 +154,13 @@ export interface User {
hash?: string | null;
loginAttempts?: number | null;
lockUntil?: string | null;
sessions?:
| {
id: string;
createdAt?: string | null;
expiresAt: string;
}[]
| null;
password?: string | null;
}
/**
@@ -301,6 +308,13 @@ export interface UsersSelect<T extends boolean = true> {
hash?: T;
loginAttempts?: T;
lockUntil?: T;
sessions?:
| T
| {
id?: T;
createdAt?: T;
expiresAt?: T;
};
}
/**
* This interface was referenced by `Config`'s JSON-Schema