fix(plugin-import-export): hide invalid sortBy options (payloadcms#11676)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->
### What?
This PR aims to prevent runtime 500-level errors when using
`plugin-import-export` by omitting invalid options such as arrays and
blocks from the `SortyBy` component. This PR also omits the `sort` when
it is false-y.

### Why?
To prevent errors and show valid sortable fields to sort by.

### How?
Omitting the sort when it is false-y from the preview, and omitting
invalid `sortBy` options.

Demo (After):


[Pages---Payload.webm](https://github.com/user-attachments/assets/fca07160-8d66-44dc-a19f-0b32a93050f2)

---------

Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: 2 people

packages/plugin-import-export/src/components/FieldsToExport/reduceFields.spec.ts

@@ -0,0 +1,149 @@
+import type { ClientField } from 'payload'
+
+import { describe, expect, it } from 'vitest'
+
+import { reduceFields } from './reduceFields.js'
+
+const values = (result: ReturnType<typeof reduceFields>) => result.map((f) => f.value)
+
+describe('reduceFields', () => {
+  describe('excludeUnsortable', () => {
+    it('should include array and blocks fields by default', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'items', type: 'array', fields: [{ name: 'text', type: 'text' }] },
+        { name: 'layout', type: 'blocks', blocks: [] },
+      ]
+
+      const result = values(reduceFields({ fields }))
+
+      expect(result).toContain('title')
+      expect(result).toContain('items')
+      expect(result).toContain('layout')
+    })
+
+    it('should exclude array fields when excludeUnsortable is true', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'items', type: 'array', fields: [{ name: 'text', type: 'text' }] },
+      ]
+
+      const result = values(reduceFields({ excludeUnsortable: true, fields }))
+
+      expect(result).toContain('title')
+      expect(result).not.toContain('items')
+    })
+
+    it('should exclude blocks fields when excludeUnsortable is true', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'layout', type: 'blocks', blocks: [] },
+      ]
+
+      const result = values(reduceFields({ excludeUnsortable: true, fields }))
+
+      expect(result).toContain('title')
+      expect(result).not.toContain('layout')
+    })
+  })
+
+  describe('disabledFields', () => {
+    it('should include all fields when disabledFields is empty', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'slug', type: 'text' },
+      ]
+
+      const result = values(reduceFields({ disabledFields: [], fields }))
+
+      expect(result).toContain('title')
+      expect(result).toContain('slug')
+    })
+
+    it('should exclude a field whose path is in disabledFields', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'slug', type: 'text' },
+      ]
+
+      const result = values(reduceFields({ disabledFields: ['slug'], fields }))
+
+      expect(result).toContain('title')
+      expect(result).not.toContain('slug')
+    })
+
+    it('should exclude nested fields whose paths start with a disabled parent path', () => {
+      const fields: ClientField[] = [
+        {
+          name: 'meta',
+          type: 'group',
+          fields: [
+            { name: 'title', type: 'text' },
+            { name: 'description', type: 'text' },
+          ],
+        },
+      ]
+
+      const result = values(reduceFields({ disabledFields: ['meta.description'], fields }))
+
+      expect(result).toContain('meta.title')
+      expect(result).not.toContain('meta.description')
+    })
+  })
+
+  describe('combined excludeUnsortable and disabledFields', () => {
+    it('should apply both filters simultaneously', () => {
+      const fields: ClientField[] = [
+        { name: 'title', type: 'text' },
+        { name: 'slug', type: 'text' },
+        { name: 'items', type: 'array', fields: [{ name: 'text', type: 'text' }] },
+      ]
+
+      const result = values(
+        reduceFields({ disabledFields: ['slug'], excludeUnsortable: true, fields }),
+      )
+
+      expect(result).toContain('title')
+      expect(result).not.toContain('slug')
+      expect(result).not.toContain('items')
+    })
+  })
+
+  describe('recursive propagation through group sub-fields', () => {
+    it('should propagate excludeUnsortable into group sub-fields', () => {
+      const fields: ClientField[] = [
+        {
+          name: 'meta',
+          type: 'group',
+          fields: [
+            { name: 'title', type: 'text' },
+            { name: 'tags', type: 'array', fields: [{ name: 'tag', type: 'text' }] },
+          ],
+        },
+      ]
+
+      const result = values(reduceFields({ excludeUnsortable: true, fields }))
+
+      expect(result).toContain('meta.title')
+      expect(result).not.toContain('meta.tags')
+    })
+
+    it('should propagate disabledFields into group sub-fields', () => {
+      const fields: ClientField[] = [
+        {
+          name: 'meta',
+          type: 'group',
+          fields: [
+            { name: 'title', type: 'text' },
+            { name: 'description', type: 'text' },
+          ],
+        },
+      ]
+
+      const result = values(reduceFields({ disabledFields: ['meta.description'], fields }))
+
+      expect(result).toContain('meta.title')
+      expect(result).not.toContain('meta.description')
+    })
+  })
+})

packages/plugin-import-export/src/components/FieldsToExport/reduceFields.tsx

@@ -44,11 +44,13 @@ const combineLabel = ({
 
 export const reduceFields = ({
   disabledFields = [],
+  excludeUnsortable = false,
   fields,
   labelPrefix = null,
   path = '',
 }: {
   disabledFields?: string[]
+  excludeUnsortable?: boolean
   fields: ClientField[]
   labelPrefix?: React.ReactNode
   path?: string
@@ -59,16 +61,19 @@ export const reduceFields = ({
 
   return fields.reduce<{ id: string; label: React.ReactNode; value: string }[]>(
     (fieldsToUse, field) => {
+      const isArrayOrBlocks = field.type === 'array' || field.type === 'blocks'
+
       // escape for a variety of reasons, include ui fields as they have `name`.
-      if (field.type === 'ui') {
+      if (field.type === 'ui' || (excludeUnsortable && isArrayOrBlocks)) {
         return fieldsToUse
       }
 
-      if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+      if (!isArrayOrBlocks && fieldHasSubFields(field)) {
         return [
           ...fieldsToUse,
           ...reduceFields({
             disabledFields,
+            excludeUnsortable,
             fields: field.fields,
             labelPrefix: combineLabel({ field, prefix: labelPrefix }),
             path: createNestedClientFieldPath(path, field),
@@ -90,6 +95,7 @@ export const reduceFields = ({
                   ...tabFields,
                   ...reduceFields({
                     disabledFields,
+                    excludeUnsortable,
                     fields: tab.fields,
                     labelPrefix: isNamedTab
                       ? combineLabel({

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

@@ -45,7 +45,7 @@ export const SortBy: SelectFieldClientComponent = (props) => {
 
   const collectionConfig = getEntityConfig({ collectionSlug: collectionSlug ?? collection })
   const fieldOptions = useMemo(
-    () => reduceFields({ fields: collectionConfig?.fields }),
+    () => reduceFields({ excludeUnsortable: true, fields: collectionConfig?.fields }),
     [collectionConfig?.fields],
   )