fix(plugin-import-export): automatically inherit locale and limit from URL queries (#15812)

This fixes the behaviour so that we automatically inherit the locale and
limit from the URL queries, most commonly from users filtering in the
list view and then exporting directly. Other fields can already inherit
so these were the two remaining ones not doing that.

Author: paulpopus

packages/plugin-import-export/src/components/LimitField/index.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import type { NumberFieldClientComponent } from 'payload'
+
+import { NumberField, useDocumentInfo, useField, useListQuery } from '@payloadcms/ui'
+import React, { useEffect, useRef } from 'react'
+
+export const LimitField: NumberFieldClientComponent = (props) => {
+  const { id } = useDocumentInfo()
+  const { setValue, value } = useField<number>()
+  const { query } = useListQuery()
+
+  const didInitRef = useRef(false)
+
+  useEffect(() => {
+    if (didInitRef.current) {
+      return
+    }
+    if (id) {
+      didInitRef.current = true
+      return
+    }
+    if (typeof value === 'number') {
+      didInitRef.current = true
+      return
+    }
+
+    const queryLimit = query?.limit
+    if (typeof queryLimit === 'number' && queryLimit > 0) {
+      setValue(queryLimit)
+    }
+
+    didInitRef.current = true
+  }, [id, query?.limit, value, setValue])
+
+  return <NumberField field={props.field} path={props.path} />
+}

packages/plugin-import-export/src/components/LocaleField/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { SelectFieldClientComponent } from 'payload'
+
+import { SelectField, useDocumentInfo, useField, useLocale } from '@payloadcms/ui'
+import React, { useEffect, useRef } from 'react'
+
+export const LocaleField: SelectFieldClientComponent = (props) => {
+  const { id } = useDocumentInfo()
+  const { setValue, value } = useField<string>()
+  const locale = useLocale()
+
+  const didInitRef = useRef(false)
+
+  useEffect(() => {
+    if (didInitRef.current) {
+      return
+    }
+    if (id) {
+      didInitRef.current = true
+      return
+    }
+    if (typeof value === 'string' && value !== 'all') {
+      didInitRef.current = true
+      return
+    }
+
+    if (locale?.code) {
+      setValue(locale.code)
+    }
+
+    didInitRef.current = true
+  }, [id, locale?.code, value, setValue])
+
+  return <SelectField field={props.field} path={props.path} />
+}

packages/plugin-import-export/src/export/getFields.ts

@@ -27,6 +27,9 @@ export const getFields = (options: GetFieldsOptions): Field[] => {
       name: 'locale',
       type: 'select',
       admin: {
+        components: {
+          Field: '@payloadcms/plugin-import-export/rsc#LocaleField',
+        },
         width: '25%',
       },
       defaultValue: 'all',
@@ -87,6 +90,9 @@ export const getFields = (options: GetFieldsOptions): Field[] => {
               name: 'limit',
               type: 'number',
               admin: {
+                components: {
+                  Field: '@payloadcms/plugin-import-export/rsc#LimitField',
+                },
                 placeholder: 'No limit',
                 step: 100,
                 width: '33.3333%',

packages/plugin-import-export/src/exports/rsc.ts

@@ -8,6 +8,8 @@ export { ImportExportProvider } from '../components/ImportExportProvider/index.j
 export { ImportListMenuItem } from '../components/ImportListMenuItem/index.js'
 export { ImportPreview } from '../components/ImportPreview/index.js'
 export { ImportSaveButton } from '../components/ImportSaveButton/index.js'
+export { LimitField } from '../components/LimitField/index.js'
+export { LocaleField } from '../components/LocaleField/index.js'
 export { Page } from '../components/Page/index.js'
 export { SelectionToUseField } from '../components/SelectionToUseField/index.js'
 export { SortBy } from '../components/SortBy/index.js'

test/plugin-import-export/e2e.spec.ts

@@ -130,6 +130,68 @@ test.describe('Import Export Plugin', () => {
       }).toPass({ timeout: POLL_TOPASS_TIMEOUT })
     })
 
+    test('should inherit limit from list view URL', async () => {
+      await page.goto(postsURL.list)
+      await expect(page.locator('.collection-list')).toBeVisible()
+
+      // Change per-page to 25
+      const perPageButton = page.locator('.per-page .popup-button')
+      await expect(perPageButton).toBeVisible()
+      await perPageButton.click()
+
+      const perPage25 = page.locator('.popup__content button.per-page__button', { hasText: '25' })
+      await expect(perPage25).toBeVisible()
+      await perPage25.click()
+
+      // Wait for URL to contain limit=25
+      await expect(() => {
+        expect(page.url()).toContain('limit=25')
+      }).toPass({ timeout: POLL_TOPASS_TIMEOUT })
+
+      // Open export from list menu
+      const listMenuButton = page.locator('#list-menu')
+      await expect(listMenuButton).toBeVisible()
+      await listMenuButton.click()
+
+      const createExportButton = page.locator('.popup__scroll-container button', {
+        hasText: 'Export Posts',
+      })
+      await expect(createExportButton).toBeVisible()
+      await createExportButton.click()
+
+      await expect(async () => {
+        await expect(page.locator('.export-preview')).toBeVisible()
+      }).toPass({ timeout: POLL_TOPASS_TIMEOUT })
+
+      // Verify limit field inherited the value from URL
+      const limitField = page.locator('input[name="limit"]')
+      await expect(limitField).toHaveValue('25')
+    })
+
+    test('should inherit locale from list view URL', async () => {
+      await page.goto(`${postsURL.list}?locale=es`)
+      await expect(page.locator('.collection-list')).toBeVisible()
+
+      // Open export from list menu
+      const listMenuButton = page.locator('#list-menu')
+      await expect(listMenuButton).toBeVisible()
+      await listMenuButton.click()
+
+      const createExportButton = page.locator('.popup__scroll-container button', {
+        hasText: 'Export Posts',
+      })
+      await expect(createExportButton).toBeVisible()
+      await createExportButton.click()
+
+      await expect(async () => {
+        await expect(page.locator('.export-preview')).toBeVisible()
+      }).toPass({ timeout: POLL_TOPASS_TIMEOUT })
+
+      // Verify locale field inherited the value from URL
+      const localeField = page.locator('#field-locale')
+      await expect(localeField.locator('.rs__single-value')).toHaveText('Spanish')
+    })
+
     test('should download directly in the browser', async () => {
       await page.goto(exportsURL.create)
       await expect(page.locator('.collection-edit')).toBeVisible()
@@ -1096,6 +1158,10 @@ test.describe('Import Export Plugin', () => {
         await expect(page.locator('.export-preview')).toBeVisible()
       }).toPass({ timeout: POLL_TOPASS_TIMEOUT })
 
+      // Clear any inherited limit so all records are exported
+      const limitField = page.locator('input[name="limit"]')
+      await limitField.clear()
+
       const downloadButton = page.locator('.doc-controls__controls button', {
         hasText: 'Download',
       })