fix(ui): unable to use browser back navigation after visiting list view (#11172)

packages/ui/src/providers/ListQuery/index.tsx

@@ -153,6 +153,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   )
 
   // If `defaultLimit` or `defaultSort` are updated externally, update the query
+  // I.e. when HMR runs, these properties may be different
   useEffect(() => {
     if (modifySearchParams) {
       let shouldUpdateQueryString = false
@@ -173,7 +174,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
       if (shouldUpdateQueryString) {
         setCurrentQuery(newQuery)
         // Do not use router.replace here to avoid re-rendering on initial load
-        window.history.pushState(null, '', `?${qs.stringify(newQuery)}`)
+        window.history.replaceState(null, '', `?${qs.stringify(newQuery)}`)
       }
     }
   }, [defaultSort, defaultLimit, router, modifySearchParams])

test/admin/e2e/general/e2e.spec.ts

@@ -227,7 +227,6 @@ describe('General', () => {
     describe('document meta', () => {
       test('should render custom meta title from collection config', async () => {
         await page.goto(customViewsURL.list)
-        await page.waitForURL(customViewsURL.list)
         const pattern = new RegExp(`^${customCollectionMetaTitle}`)
         await expect(page.title()).resolves.toMatch(pattern)
       })
@@ -242,7 +241,6 @@ describe('General', () => {
         await navigateToDoc(page, customViewsURL)
         const versionsURL = `${page.url()}/versions`
         await page.goto(versionsURL)
-        await page.waitForURL(versionsURL)
         const pattern = new RegExp(`^${customVersionsTabMetaTitle}`)
         await expect(page.title()).resolves.toMatch(pattern)
       })
@@ -251,7 +249,6 @@ describe('General', () => {
         await navigateToDoc(page, customViewsURL)
         const customTabURL = `${page.url()}/custom-tab-view`
         await page.goto(customTabURL)
-        await page.waitForURL(customTabURL)
         const pattern = new RegExp(`^${customViewMetaTitle}`)
         await expect(page.title()).resolves.toMatch(pattern)
       })
@@ -260,7 +257,6 @@ describe('General', () => {
         await navigateToDoc(page, customViewsURL)
         const customTabURL = `${page.url()}${customTabViewPath}`
         await page.goto(customTabURL)
-        await page.waitForURL(customTabURL)
         const pattern = new RegExp(`^${customCollectionMetaTitle}`)
         await expect(page.title()).resolves.toMatch(pattern)
       })
@@ -270,10 +266,8 @@ describe('General', () => {
   describe('theme', () => {
     test('should render light theme by default', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
       await page.goto(`${postsUrl.admin}/account`)
-      await page.waitForURL(`${postsUrl.admin}/account`)
       await expect(page.locator('#field-theme-auto')).toBeChecked()
       await expect(page.locator('#field-theme-light')).not.toBeChecked()
       await expect(page.locator('#field-theme-dark')).not.toBeChecked()
@@ -281,7 +275,6 @@ describe('General', () => {
 
     test('should explicitly change to light theme', async () => {
       await page.goto(`${postsUrl.admin}/account`)
-      await page.waitForURL(`${postsUrl.admin}/account`)
       await page.locator('label[for="field-theme-light"]').click()
       await expect(page.locator('#field-theme-auto')).not.toBeChecked()
       await expect(page.locator('#field-theme-light')).toBeChecked()
@@ -294,7 +287,6 @@ describe('General', () => {
 
       // go back to auto theme
       await page.goto(`${postsUrl.admin}/account`)
-      await page.waitForURL(`${postsUrl.admin}/account`)
       await page.locator('label[for="field-theme-auto"]').click()
       await expect(page.locator('#field-theme-auto')).toBeChecked()
       await expect(page.locator('#field-theme-light')).not.toBeChecked()
@@ -304,7 +296,6 @@ describe('General', () => {
 
     test('should explicitly change to dark theme', async () => {
       await page.goto(`${postsUrl.admin}/account`)
-      await page.waitForURL(`${postsUrl.admin}/account`)
       await page.locator('label[for="field-theme-dark"]').click()
       await expect(page.locator('#field-theme-auto')).not.toBeChecked()
       await expect(page.locator('#field-theme-light')).not.toBeChecked()
@@ -317,7 +308,6 @@ describe('General', () => {
 
       // go back to auto theme
       await page.goto(`${postsUrl.admin}/account`)
-      await page.waitForURL(`${postsUrl.admin}/account`)
       await page.locator('label[for="field-theme-auto"]').click()
       await expect(page.locator('#field-theme-auto')).toBeChecked()
       await expect(page.locator('#field-theme-light')).not.toBeChecked()
@@ -351,7 +341,6 @@ describe('General', () => {
   describe('navigation', () => {
     test('nav — should navigate to collection', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await openNav(page)
       const anchor = page.locator(`#nav-${postsCollectionSlug}`)
       const anchorHref = await anchor.getAttribute('href')
@@ -361,7 +350,6 @@ describe('General', () => {
 
     test('nav — should navigate to a global', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await openNav(page)
       const anchor = page.locator(`#nav-global-${globalSlug}`)
       const anchorHref = await anchor.getAttribute('href')
@@ -371,7 +359,6 @@ describe('General', () => {
 
     test('dashboard — should navigate to collection', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       const anchor = page.locator(`#card-${postsCollectionSlug} a.card__click`)
       const anchorHref = await anchor.getAttribute('href')
       await anchor.click()
@@ -380,7 +367,6 @@ describe('General', () => {
 
     test('nav — should collapse and expand collection groups', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await openNav(page)
       const navGroup = page.locator('#nav-group-One .nav-group__toggle')
       await expect(navGroup).toContainText('One')
@@ -407,7 +393,6 @@ describe('General', () => {
 
     test('nav — should save group collapse preferences', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await openNav(page)
       await page.locator('#nav-group-One .nav-group__toggle').click()
       const link = page.locator('#nav-group-one-collection-ones')
@@ -430,25 +415,33 @@ describe('General', () => {
       await expect(collectionBreadcrumb).toHaveText(slugPluralLabel)
       expect(page.url()).toContain(postsUrl.list)
     })
+
+    test('should replace history when adding query params to the URL and not push a new entry', async () => {
+      await page.goto(postsUrl.admin)
+      await page.locator('.dashboard__card-list .card').first().click()
+      // wait for the search params to get injected into the URL
+      const escapedAdminURL = postsUrl.admin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const pattern = new RegExp(`${escapedAdminURL}/collections/[^?]+\\?limit=[^&]+`)
+      await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toMatch(pattern)
+      await page.goBack()
+      await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toMatch(postsUrl.admin)
+    })
   })
 
   describe('hidden entities', () => {
     test('nav — should not show hidden collections and globals', async () => {
       await page.goto(postsUrl.admin)
-      // nav menu
       await expect(page.locator('#nav-hidden-collection')).toBeHidden()
       await expect(page.locator('#nav-hidden-global')).toBeHidden()
     })
 
     test('dashboard — should not show hidden collections and globals', async () => {
       await page.goto(postsUrl.admin)
-      // dashboard
       await expect(page.locator('#card-hidden-collection')).toBeHidden()
       await expect(page.locator('#card-hidden-global')).toBeHidden()
     })
 
     test('routing — should 404 on hidden collections and globals', async () => {
-      // routing
       await page.goto(postsUrl.collection('hidden-collection'))
       await expect(page.locator('.not-found')).toContainText('Nothing found')
       await page.goto(postsUrl.global('hidden-global'))
@@ -457,20 +450,17 @@ describe('General', () => {
 
     test('nav — should not show group: false collections and globals', async () => {
       await page.goto(notInViewUrl.admin)
-      // nav menu
       await expect(page.locator('#nav-not-in-view-collection')).toBeHidden()
       await expect(page.locator('#nav-global-not-in-view-global')).toBeHidden()
     })
 
     test('dashboard — should not show group: false collections and globals', async () => {
       await page.goto(notInViewUrl.admin)
-      // dashboard
       await expect(page.locator('#card-not-in-view-collection')).toBeHidden()
       await expect(page.locator('#card-not-in-view-global')).toBeHidden()
     })
 
     test('routing — should not 404 on group: false collections and globals', async () => {
-      // routing
       await page.goto(notInViewUrl.collection('not-in-view-collection'))
       await expect(page.locator('.list-header h1')).toContainText('Not In View Collections')
       await page.goto(notInViewUrl.global('not-in-view-global'))
@@ -481,7 +471,6 @@ describe('General', () => {
   describe('custom CSS', () => {
     test('should see custom css in admin UI', async () => {
       await page.goto(postsUrl.admin)
-      await page.waitForURL(postsUrl.admin)
       await openNav(page)
       const navControls = page.locator('#custom-css')
       await expect(navControls).toHaveCSS('font-family', 'monospace')
@@ -507,7 +496,6 @@ describe('General', () => {
   describe('custom root views', () => {
     test('should render custom view', async () => {
       await page.goto(`${serverURL}${adminRoutes.routes.admin}${customViewPath}`)
-      await page.waitForURL(`**${adminRoutes.routes.admin}${customViewPath}`)
       await expect(page.locator('h1#custom-view-title')).toContainText(customViewTitle)
     })
 
@@ -521,7 +509,6 @@ describe('General', () => {
 
     test('should render public custom view', async () => {
       await page.goto(`${serverURL}${adminRoutes.routes.admin}${publicCustomViewPath}`)
-      await page.waitForURL(`**${adminRoutes.routes.admin}${publicCustomViewPath}`)
       await expect(page.locator('h1#custom-view-title')).toContainText(customViewTitle)
     })
 
@@ -539,7 +526,6 @@ describe('General', () => {
       await saveDocAndAssert(page)
 
       await page.goto(`${serverURL}${adminRoutes.routes.admin}${protectedCustomNestedViewPath}`)
-      await page.waitForURL(`**${adminRoutes.routes.admin}${protectedCustomNestedViewPath}`)
       await expect(page.locator('h1#custom-view-title')).toContainText(customNestedViewTitle)
     })
   })