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:
@@ -74,6 +74,7 @@ export const testEslintConfig = [
|
||||
'expectNoResultsAndCreateFolderButton',
|
||||
'createFolder',
|
||||
'createFolderFromDoc',
|
||||
'assertURLParams',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 () => {
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user