feat(plugin-form-builder)!: update form builder plugin field overrides to use a function instead (#6497)

## Description

Changes the `fields` override for form builder plugin to use a function
instead so that we can actually override existing fields which currently
will not work.

```ts
//before
fields: [
  {
    name: 'custom',
    type: 'text',
  }
]

// current
fields: ({ defaultFields }) => {
  return [
    ...defaultFields,
    {
      name: 'custom',
      type: 'text',
    },
  ]
}
```

## Type of change

- [x] Breaking change (fix or feature that would cause existing
functionality to not work as expected)

packages/plugin-form-builder/src/collections/FormSubmissions/index.ts

@@ -1,4 +1,4 @@
-import type { CollectionConfig } from 'payload/types'
+import type { CollectionConfig, Field } from 'payload/types'
 
 import type { FormBuilderPluginConfig } from '../../types.js'
 
@@ -11,20 +11,7 @@ export const generateSubmissionCollection = (
 ): CollectionConfig => {
   const formSlug = formConfig?.formOverrides?.slug || 'forms'
 
-  const newConfig: CollectionConfig = {
-    ...(formConfig?.formSubmissionOverrides || {}),
-    slug: formConfig?.formSubmissionOverrides?.slug || 'form-submissions',
-    access: {
-      create: () => true,
-      read: ({ req: { user } }) => !!user, // logged-in users,
-      update: () => false,
-      ...(formConfig?.formSubmissionOverrides?.access || {}),
-    },
-    admin: {
-      ...(formConfig?.formSubmissionOverrides?.admin || {}),
-      enableRichTextRelationship: false,
-    },
-    fields: [
+  const defaultFields: Field[] = [
     {
       name: 'form',
       type: 'relationship',
@@ -90,8 +77,26 @@ export const generateSubmissionCollection = (
         },
       ],
     },
-      ...(formConfig?.formSubmissionOverrides?.fields || []),
-    ],
+  ]
+
+  const newConfig: CollectionConfig = {
+    ...(formConfig?.formSubmissionOverrides || {}),
+    slug: formConfig?.formSubmissionOverrides?.slug || 'form-submissions',
+    access: {
+      create: () => true,
+      read: ({ req: { user } }) => !!user, // logged-in users,
+      update: () => false,
+      ...(formConfig?.formSubmissionOverrides?.access || {}),
+    },
+    admin: {
+      ...(formConfig?.formSubmissionOverrides?.admin || {}),
+      enableRichTextRelationship: false,
+    },
+    fields:
+      formConfig?.formSubmissionOverrides?.fields &&
+      typeof formConfig?.formSubmissionOverrides?.fields === 'function'
+        ? formConfig?.formSubmissionOverrides?.fields({ defaultFields })
+        : defaultFields,
     hooks: {
       ...(formConfig?.formSubmissionOverrides?.hooks || {}),
       beforeChange: [

packages/plugin-form-builder/src/collections/Forms/index.ts

@@ -64,19 +64,7 @@ export const generateFormCollection = (formConfig: FormBuilderPluginConfig): Col
     }
   }
 
-  const config: CollectionConfig = {
-    ...(formConfig?.formOverrides || {}),
-    slug: formConfig?.formOverrides?.slug || 'forms',
-    access: {
-      read: () => true,
-      ...(formConfig?.formOverrides?.access || {}),
-    },
-    admin: {
-      enableRichTextRelationship: false,
-      useAsTitle: 'title',
-      ...(formConfig?.formOverrides?.admin || {}),
-    },
-    fields: [
+  const defaultFields: Field[] = [
     {
       name: 'title',
       type: 'text',
@@ -227,8 +215,24 @@ export const generateFormCollection = (formConfig: FormBuilderPluginConfig): Col
         },
       ],
     },
-      ...(formConfig?.formOverrides?.fields || []),
-    ],
+  ]
+
+  const config: CollectionConfig = {
+    ...(formConfig?.formOverrides || {}),
+    slug: formConfig?.formOverrides?.slug || 'forms',
+    access: {
+      read: () => true,
+      ...(formConfig?.formOverrides?.access || {}),
+    },
+    admin: {
+      enableRichTextRelationship: false,
+      useAsTitle: 'title',
+      ...(formConfig?.formOverrides?.admin || {}),
+    },
+    fields:
+      formConfig?.formOverrides.fields && typeof formConfig?.formOverrides.fields === 'function'
+        ? formConfig?.formOverrides.fields({ defaultFields })
+        : defaultFields,
   }
 
   return config

packages/plugin-form-builder/src/index.ts

@@ -30,20 +30,6 @@ export const formBuilderPlugin =
 
     return {
       ...config,
-      // admin: {
-      //   ...config.admin,
-      //   webpack: (webpackConfig) => ({
-      //     ...webpackConfig,
-      //     resolve: {
-      //       ...webpackConfig.resolve,
-      //       alias: {
-      //         ...webpackConfig.resolve.alias,
-      //         [path.resolve(__dirname, 'collections/FormSubmissions/hooks/sendEmail.ts')]: path.resolve(__dirname, 'mocks/serverModule.js'),
-      //         [path.resolve(__dirname, 'collections/FormSubmissions/hooks/createCharge.ts')]: path.resolve(__dirname, 'mocks/serverModule.js'),
-      //       },
-      //     },
-      //   })
-      // },
       collections: [
         ...(config?.collections || []),
         generateFormCollection(formConfig),

packages/plugin-form-builder/src/types.ts

@@ -39,12 +39,13 @@ export interface FieldsConfig {
 
 export type BeforeEmail = (emails: FormattedEmail[]) => FormattedEmail[] | Promise<FormattedEmail[]>
 export type HandlePayment = (data: any) => void
+export type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]
 
 export type FormBuilderPluginConfig = {
   beforeEmail?: BeforeEmail
   fields?: FieldsConfig
-  formOverrides?: Partial<CollectionConfig>
-  formSubmissionOverrides?: Partial<CollectionConfig>
+  formOverrides?: Partial<Omit<CollectionConfig, 'fields'>> & { fields: FieldsOverride }
+  formSubmissionOverrides?: Partial<Omit<CollectionConfig, 'fields'>> & { fields: FieldsOverride }
   handlePayment?: HandlePayment
   redirectRelationships?: string[]
 }

test/plugin-form-builder/config.ts

@@ -73,12 +73,26 @@ export default buildConfigWithDefaults({
         //   singular: 'Contact Form',
         //   plural: 'Contact Forms'
         // },
-        fields: [
+        fields: ({ defaultFields }) => {
+          return [
+            ...defaultFields,
             {
               name: 'custom',
               type: 'text',
             },
-        ],
+          ]
+        },
+      },
+      formSubmissionOverrides: {
+        fields: ({ defaultFields }) => {
+          return [
+            ...defaultFields,
+            {
+              name: 'custom',
+              type: 'text',
+            },
+          ]
+        },
       },
       redirectRelationships: ['pages'],
     }),