tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): retains search params when navigating back (#9576)

Browse Source 
Closes #9132. When query params are present in the URL, such as after
searching or filtering in the list view, they are not being retained
after navigating back to that view via `history.back()` (i.e. the back
button). This makes it difficult to quickly navigate in and out of
documents from the list view when an underlying search exists. This was
because the `SearchParamsProvider` is stale when the new view renders,
which then replaces the URL with these stale params. The fix here is to
_not_ use the `SearchParamsProvider` at all, and instead use
`next/navigation` directly. Ultimately, this provider should likely be
marked deprecated and then removed in the next major release for this
very reason.
This commit is contained in:
Jacob Fletcher
2024-11-27 14:49:53 -05:00
committed by GitHub
parent 303227363b
commit 3961223cc1
4 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
test/admin/e2e/2/e2e.spec.ts
View File

@@ -26,6 +26,7 @@ const description = 'Description'
let payload: PayloadTestSDK<Config>
import { goToFirstCell, navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
import { toggleColumn } from 'helpers/e2e/toggleColumn.js'
import path from 'path'
import { wait } from 'payload/shared'
@@ -174,6 +175,17 @@ describe('admin2', () => {
await expect(page.locator(tableRowLocator)).toHaveCount(1)
})
test('search should persist through browser back button', async () => {
const url = `${postsUrl.list}?limit=10&page=1&search=post1`
await page.goto(url)
await page.waitForURL(url)
await expect(page.locator('#search-filter-input')).toHaveValue('post1')
await goToFirstCell(page, postsUrl)
await page.goBack()
await wait(1000) // wait one second to ensure that the new view does not accidentally reset the search
await page.waitForURL(url)
})
test('search should not persist between navigation', async () => {
const url = `${postsUrl.list}?limit=10&page=1&search=test`
await page.goto(url)

12
test/helpers/e2e/navigateToDoc.ts
View File

@@ -1,12 +1,16 @@
import type { Page } from '@playwright/test'
import type { AdminUrlUtil } from 'helpers/adminUrlUtil.js'
export const navigateToDoc = async (page: Page, urlUtil: AdminUrlUtil) => {
await page.goto(urlUtil.list)
const regex = new RegExp(`^${urlUtil.list}(?:\\?.*)?$`)
await page.waitForURL(regex)
export const goToFirstCell = async (page: Page, urlUtil: AdminUrlUtil) => {
const cellLink = page.locator(`tbody tr:first-child td a`).first()
const linkURL = await cellLink.getAttribute('href')
await page.goto(`${urlUtil.serverURL}${linkURL}`)
await page.waitForURL(`**${linkURL}`)
}
export const navigateToDoc = async (page: Page, urlUtil: AdminUrlUtil) => {
await page.goto(urlUtil.list)
const regex = new RegExp(`^${urlUtil.list}(?:\\?.*)?$`)
await page.waitForURL(regex)
await goToFirstCell(page, urlUtil)
}