fix: folder creation errors when collection uses translation function labels (#15216)

### What

Fixes the "Functions cannot be passed directly to Client Components"
error that occurs when clicking the create folder button if any
collection has translation function labels (e.g., `singular: ({ t }) =>
t('authentication:account')`).

### Why

The `folderType` select field was passing options through `clientProps`,
which gets directly serialized when sent to the client component.

When collection labels used translation functions, these functions were
included in the serialized data, causing React to throw an error since
functions can't be serialized across the server/client boundary.

### How

Moved the `folderType` field options from `clientProps` to the field
definition itself (`field.options`), and updated `FolderTypeField` to
read options from the field config.

Fixes #15199

Author: PatrikKozak

packages/payload/src/folders/createFolderCollection.ts

@@ -86,9 +86,6 @@ export const createFolderCollection = ({
               admin: {
                 components: {
                   Field: {
-                    clientProps: {
-                      options: collectionOptions,
-                    },
                     path: '@payloadcms/ui#FolderTypeField',
                   },
                 },

packages/ui/src/elements/FolderView/FolderTypeField/index.tsx

@@ -11,10 +11,7 @@ import { useField } from '../../../forms/useField/index.js'
 import { useFolder } from '../../../providers/Folders/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 
-export const FolderTypeField = ({
-  options: allSelectOptions,
-  ...props
-}: { options: Option[] } & SelectFieldClientProps) => {
+export const FolderTypeField = (props: SelectFieldClientProps) => {
   const {
     field,
     field: {
@@ -28,6 +25,7 @@ export const FolderTypeField = ({
       hasMany = false,
       label,
       localized,
+      options: allSelectOptions = [],
       required,
     },
     onChange: onChangeFromProps,

test/folders/collections/TranslatedLabels/index.ts

@@ -0,0 +1,19 @@
+import type { CollectionConfig } from 'payload'
+
+export const TranslatedLabels: CollectionConfig = {
+  slug: 'translated-labels',
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+  ],
+  folders: true,
+  labels: {
+    plural: ({ t }) => t('general:documents'),
+    singular: ({ t }) => t('general:document'),
+  },
+}

test/folders/config.ts

@@ -9,6 +9,7 @@ import { Drafts } from './collections/Drafts/index.js'
 import { Media } from './collections/Media/index.js'
 import { OmittedFromBrowseBy } from './collections/OmittedFromBrowseBy/index.js'
 import { Posts } from './collections/Posts/index.js'
+import { TranslatedLabels } from './collections/TranslatedLabels/index.js'
 // import { seed } from './seed/index.js'
 
 export default buildConfigWithDefaults({
@@ -29,7 +30,7 @@ export default buildConfigWithDefaults({
       },
     ],
   },
-  collections: [Posts, Media, Drafts, Autosave, OmittedFromBrowseBy],
+  collections: [Posts, Media, Drafts, Autosave, OmittedFromBrowseBy, TranslatedLabels],
   globals: [
     {
       slug: 'global',

test/folders/e2e.spec.ts

@@ -99,6 +99,31 @@ test.describe('Folders', () => {
       await folderPill.click()
       await createFolderFromDoc({ folderName: 'New Folder From Doc', page })
     })
+
+    test('should create folder with collection that has translation function labels', async () => {
+      await page.goto(formatAdminURL({ adminRoute, path: '/browse-by-folder', serverURL }))
+
+      const createButton = page
+        .locator('.list-header__title-and-actions .create-new-doc-in-folder__button')
+        .filter({ hasText: 'Create folder' })
+      await expect(createButton).toBeVisible()
+      await createButton.click()
+
+      // The folder drawer should open successfully without React serialization errors
+      const drawer = page.locator('dialog .collection-edit--payload-folders')
+      await expect(drawer).toBeVisible()
+
+      const selectLocator = drawer.locator('#field-folderType')
+      await expect(selectLocator).toBeVisible()
+
+      // Should be able to open the select menu without errors
+      await openSelectMenu({ selectLocator })
+
+      const translatedLabelsOption = page.locator('.rs__option', {
+        hasText: 'Documents',
+      })
+      await expect(translatedLabelsOption).toBeVisible()
+    })
   })
 
   test.describe('Folder view actions', () => {

test/folders/payload-types.ts

@@ -72,6 +72,7 @@ export interface Config {
     drafts: Draft;
     autosave: Autosave;
     'omitted-from-browse-by': OmittedFromBrowseBy;
+    'translated-labels': TranslatedLabel;
     'payload-kv': PayloadKv;
     users: User;
     'payload-folders': FolderInterface;
@@ -81,7 +82,14 @@ export interface Config {
   };
   collectionsJoins: {
     'payload-folders': {
-      documentsAndFolders: 'payload-folders' | 'posts' | 'media' | 'drafts' | 'autosave' | 'omitted-from-browse-by';
+      documentsAndFolders:
+        | 'payload-folders'
+        | 'posts'
+        | 'media'
+        | 'drafts'
+        | 'autosave'
+        | 'omitted-from-browse-by'
+        | 'translated-labels';
     };
   };
   collectionsSelect: {
@@ -90,6 +98,7 @@ export interface Config {
     drafts: DraftsSelect<false> | DraftsSelect<true>;
     autosave: AutosaveSelect<false> | AutosaveSelect<true>;
     'omitted-from-browse-by': OmittedFromBrowseBySelect<false> | OmittedFromBrowseBySelect<true>;
+    'translated-labels': TranslatedLabelsSelect<false> | TranslatedLabelsSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-folders': PayloadFoldersSelect<false> | PayloadFoldersSelect<true>;
@@ -202,11 +211,15 @@ export interface FolderInterface {
           relationTo?: 'omitted-from-browse-by';
           value: string | OmittedFromBrowseBy;
         }
+      | {
+          relationTo?: 'translated-labels';
+          value: string | TranslatedLabel;
+        }
     )[];
     hasNextPage?: boolean;
     totalDocs?: number;
   };
-  folderType?: ('posts' | 'media' | 'drafts' | 'autosave' | 'omitted-from-browse-by')[] | null;
+  folderType?: ('posts' | 'media' | 'drafts' | 'autosave' | 'omitted-from-browse-by' | 'translated-labels')[] | null;
   folderSlug?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -246,6 +259,17 @@ export interface OmittedFromBrowseBy {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "translated-labels".
+ */
+export interface TranslatedLabel {
+  id: string;
+  title?: string | null;
+  folder?: (string | null) | FolderInterface;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv".
@@ -314,6 +338,10 @@ export interface PayloadLockedDocument {
         relationTo: 'omitted-from-browse-by';
         value: string | OmittedFromBrowseBy;
       } | null)
+    | ({
+        relationTo: 'translated-labels';
+        value: string | TranslatedLabel;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -428,6 +456,16 @@ export interface OmittedFromBrowseBySelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "translated-labels_select".
+ */
+export interface TranslatedLabelsSelect<T extends boolean = true> {
+  title?: T;
+  folder?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv_select".
@@ -533,6 +571,6 @@ export interface Auth {
 
 
 declare module 'payload' {
-  // @ts-ignore
+  // @ts-ignore 
   export interface GeneratedTypes extends Config {}
-}
+}