feat(plugin-form-builder)!: update form builder plugin field override…

…s 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,6 +11,74 @@ export const generateSubmissionCollection = (
 ): CollectionConfig => {
   const formSlug = formConfig?.formOverrides?.slug || 'forms'
 
+  const defaultFields: Field[] = [
+    {
+      name: 'form',
+      type: 'relationship',
+      admin: {
+        readOnly: true,
+      },
+      relationTo: formSlug,
+      required: true,
+      validate: async (value, { req: { payload }, req }) => {
+        /* Don't run in the client side */
+        if (!payload) return true
+
+        if (payload) {
+          let _existingForm
+
+          try {
+            _existingForm = await payload.findByID({
+              id: value,
+              collection: formSlug,
+              req,
+            })
+
+            return true
+          } catch (error) {
+            return 'Cannot create this submission because this form does not exist.'
+          }
+        }
+      },
+    },
+    {
+      name: 'submissionData',
+      type: 'array',
+      admin: {
+        readOnly: true,
+      },
+      fields: [
+        {
+          name: 'field',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'value',
+          type: 'text',
+          required: true,
+          validate: (value: unknown) => {
+            // TODO:
+            // create a validation function that dynamically
+            // relies on the field type and its options as configured.
+
+            // How to access sibling data from this field?
+            // Need the `name` of the field in order to validate it.
+
+            // Might not be possible to use this validation function.
+            // Instead, might need to do all validation in a `beforeValidate` collection hook.
+
+            if (typeof value !== 'undefined') {
+              return true
+            }
+
+            return 'This field is required.'
+          },
+        },
+      ],
+    },
+  ]
+
   const newConfig: CollectionConfig = {
     ...(formConfig?.formSubmissionOverrides || {}),
     slug: formConfig?.formSubmissionOverrides?.slug || 'form-submissions',
@@ -24,74 +92,11 @@ export const generateSubmissionCollection = (
       ...(formConfig?.formSubmissionOverrides?.admin || {}),
       enableRichTextRelationship: false,
     },
-    fields: [
-      {
-        name: 'form',
-        type: 'relationship',
-        admin: {
-          readOnly: true,
-        },
-        relationTo: formSlug,
-        required: true,
-        validate: async (value, { req: { payload }, req }) => {
-          /* Don't run in the client side */
-          if (!payload) return true
-
-          if (payload) {
-            let _existingForm
-
-            try {
-              _existingForm = await payload.findByID({
-                id: value,
-                collection: formSlug,
-                req,
-              })
-
-              return true
-            } catch (error) {
-              return 'Cannot create this submission because this form does not exist.'
-            }
-          }
-        },
-      },
-      {
-        name: 'submissionData',
-        type: 'array',
-        admin: {
-          readOnly: true,
-        },
-        fields: [
-          {
-            name: 'field',
-            type: 'text',
-            required: true,
-          },
-          {
-            name: 'value',
-            type: 'text',
-            required: true,
-            validate: (value: unknown) => {
-              // TODO:
-              // create a validation function that dynamically
-              // relies on the field type and its options as configured.
-
-              // How to access sibling data from this field?
-              // Need the `name` of the field in order to validate it.
-
-              // Might not be possible to use this validation function.
-              // Instead, might need to do all validation in a `beforeValidate` collection hook.
-
-              if (typeof value !== 'undefined') {
-                return true
-              }
-
-              return 'This field is required.'
-            },
-          },
-        ],
-      },
-      ...(formConfig?.formSubmissionOverrides?.fields || []),
-    ],
+    fields:
+      formConfig?.formSubmissionOverrides?.fields &&
+      typeof formConfig?.formSubmissionOverrides?.fields === 'function'
+        ? formConfig?.formSubmissionOverrides?.fields({ defaultFields })
+        : defaultFields,
     hooks: {
       ...(formConfig?.formSubmissionOverrides?.hooks || {}),
       beforeChange: [