fix(next): ensure query preset from url is applied (#15323)

Previously, if you visited the list view from a URL that contains the
`preset` param (e.g.
`http://localhost:3000/admin/collections/pages?preset=69728460f29c932fb002feb9`),
the preset would not be applied.

This PR is ensured the preset is applied and adds an e2e test to verify
this functionality

Author: AlessioGr

packages/next/src/views/List/index.tsx

@@ -110,6 +110,9 @@ export const renderListView = async (
     },
     visibleEntities,
   } = initPageResult
+  const {
+    routes: { admin: adminRoute },
+  } = config
 
   if (
     !collectionConfig ||
@@ -140,7 +143,44 @@ export const renderListView = async (
     },
   })
 
-  query.preset = collectionPreferences?.preset
+  let queryPreset: QueryPreset | undefined
+  let queryPresetPermissions: SanitizedCollectionPermission | undefined
+
+  if (collectionPreferences?.preset) {
+    try {
+      queryPreset = (await payload.findByID({
+        id: collectionPreferences?.preset,
+        collection: 'payload-query-presets',
+        depth: 0,
+        overrideAccess: false,
+        user,
+      })) as QueryPreset
+
+      if (queryPreset) {
+        queryPresetPermissions = (
+          await getDocumentPermissions({
+            id: queryPreset.id,
+            collectionConfig: req.payload.collections['payload-query-presets'].config,
+            data: queryPreset,
+            req,
+          })
+        )?.docPermissions
+      }
+    } catch (err) {
+      req.payload.logger.error(`Error fetching query preset or preset permissions: ${err}`)
+    }
+  }
+
+  query.preset = queryPreset?.id
+  if (queryPreset?.where && !query.where) {
+    query.where = queryPreset.where
+  }
+  query.groupBy = query.groupBy ?? queryPreset?.groupBy ?? collectionPreferences?.groupBy
+
+  const columnPreference = query.columns
+    ? transformColumnsToPreferences(query.columns)
+    : (queryPreset?.columns ?? collectionPreferences?.columns)
+  query.columns = transformColumnsToSearchParams(columnPreference)
 
   query.page = isNumber(query?.page) ? Number(query.page) : 0
 
@@ -150,14 +190,6 @@ export const renderListView = async (
     collectionPreferences?.sort ||
     (typeof collectionConfig.defaultSort === 'string' ? collectionConfig.defaultSort : undefined)
 
-  query.groupBy = collectionPreferences?.groupBy
-
-  query.columns = transformColumnsToSearchParams(collectionPreferences?.columns || [])
-
-  const {
-    routes: { admin: adminRoute },
-  } = config
-
   const baseFilterConstraint = await (
     collectionConfig.admin?.baseFilter ?? collectionConfig.admin?.baseListFilter
   )?.({
@@ -167,9 +199,6 @@ export const renderListView = async (
     sort: query.sort,
   })
 
-  let queryPreset: QueryPreset | undefined
-  let queryPresetPermissions: SanitizedCollectionPermission | undefined
-
   let whereWithMergedSearch = mergeListSearchAndWhere({
     collectionConfig,
     search: typeof query?.search === 'string' ? query.search : undefined,
@@ -189,29 +218,6 @@ export const renderListView = async (
     }
   }
 
-  if (collectionPreferences?.preset) {
-    try {
-      queryPreset = (await payload.findByID({
-        id: collectionPreferences?.preset,
-        collection: 'payload-query-presets',
-        depth: 0,
-        overrideAccess: false,
-        user,
-      })) as QueryPreset
-
-      if (queryPreset) {
-        queryPresetPermissions = await getDocumentPermissions({
-          id: queryPreset.id,
-          collectionConfig: config.collections.find((c) => c.slug === 'payload-query-presets'),
-          data: queryPreset,
-          req,
-        })?.then(({ docPermissions }) => docPermissions)
-      }
-    } catch (err) {
-      req.payload.logger.error(`Error fetching query preset or preset permissions: ${err}`)
-    }
-  }
-
   let Table: React.ReactNode | React.ReactNode[] = null
   let columnState: Column[] = []
   let data: PaginatedDocs = {
@@ -234,7 +240,7 @@ export const renderListView = async (
     clientConfig,
     collectionConfig: clientCollectionConfig,
     collectionSlug,
-    columns: collectionPreferences?.columns,
+    columns: columnPreference,
     i18n,
     permissions,
   })

test/helpers/e2e/groupBy/addGroupBy.ts

@@ -16,8 +16,8 @@ export const addGroupBy = async (
   await field.locator('.rs__option', { hasText: exactText(fieldLabel) })?.click()
   await expect(field.locator('.react-select--single-value')).toHaveText(fieldLabel)
 
-  await expect(page).toHaveURL(new RegExp(`&groupBy=${fieldPath}`))
+  await expect(page).toHaveURL(new RegExp(`[&?]groupBy=${fieldPath}`))
   await expect(page.locator('body')).not.toContainText('Loading')
 
-  return { groupByContainer, field }
+  return { field, groupByContainer }
 }

test/query-presets/e2e.spec.ts

@@ -709,4 +709,30 @@ describe('Query Presets', () => {
     // Verify reset button is hidden again after reset
     await expect(page.locator('#reset-preset')).toBeHidden()
   })
+
+  test('should apply preset from URL query param', async ({ page }) => {
+    // Navigate directly to the list view with a preset query param
+    await page.goto(`${pagesUrl.list}?preset=${seededData.everyone.id}`)
+
+    // Verify the where query is in the URL
+    await assertURLParams({
+      page,
+      columns: seededData.everyone.columns,
+      where: seededData.everyone.where,
+      preset: seededData.everyone.id,
+    })
+
+    // Verify the preset is selected in the preset selector
+    await expect(
+      page.locator('button#select-preset', {
+        hasText: exactText(seededData.everyone.title),
+      }),
+    ).toBeVisible()
+
+    // Verify the actual results are filtered correctly
+    // The seeded preset filters for text: { equals: 'example page' }
+    const tableRows = page.locator('.collection-list .table tbody tr')
+    await expect(tableRows).toHaveCount(1)
+    await expect(tableRows.first()).toContainText('example page')
+  })
 })