feat(plugin-form-builder): allow creating form submissions from the admin panel (#11222)

Fixes #10952.

The form builder plugin does not currently allow creating form
submissions from within the admin panel. This is because the fields of
the form submissions collection have `admin.readOnly` set, ultimately
disabling them during the create operation.

Instead of doing this, the user's permissions should dictate whether
these fields are read-only using access control. For example, based on
role:

```ts
import { buildConfig } from 'payload'
import { formBuilderPlugin } from '@payloadcms/plugin-form-builder'

export default buildConfig({
  // ...
  plugins: [
    formBuilderPlugin({
      formSubmissionOverrides: {
        access: {
          update: ({ req }) => Boolean(req.user?.roles?.includes('admin')),
        },
      },
    }),
  ],
})
```     

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211454879207842

Author: jacobsfletch

packages/plugin-form-builder/src/collections/FormSubmissions/fields/defaultPaymentFields.ts

@@ -3,9 +3,6 @@ import type { Field } from 'payload'
 export const defaultPaymentFields: Field = {
   name: 'payment',
   type: 'group',
-  admin: {
-    readOnly: true,
-  },
   fields: [
     {
       name: 'field',

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

@@ -18,9 +18,6 @@ export const generateSubmissionCollection = (
     {
       name: 'form',
       type: 'relationship',
-      admin: {
-        readOnly: true,
-      },
       relationTo: formSlug,
       required: true,
       // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
@@ -50,9 +47,6 @@ export const generateSubmissionCollection = (
     {
       name: 'submissionData',
       type: 'array',
-      admin: {
-        readOnly: true,
-      },
       fields: [
         {
           name: 'field',

test/plugin-form-builder/collections/Users.ts

@@ -10,7 +10,16 @@ export const Users: CollectionConfig = {
     read: () => true,
   },
   fields: [
-    // Email added by default
-    // Add more fields as needed
+    {
+      name: 'roles',
+      type: 'select',
+      hasMany: true,
+      options: [
+        {
+          label: 'Admin',
+          value: 'admin',
+        },
+      ],
+    },
   ],
 }

test/plugin-form-builder/config.ts

@@ -54,16 +54,17 @@ export default buildConfigWithDefaults({
       data: {
         email: devUser.email,
         password: devUser.password,
+        roles: ['admin'],
       },
     })
 
     await seed(payload)
   },
-  //email: nodemailerAdapter(),
+  // email: nodemailerAdapter(),
   plugins: [
     formBuilderPlugin({
       // handlePayment: handleFormPayments,
-      //defaultToEmail: 'devs@payloadcms.com',
+      // defaultToEmail: 'devs@payloadcms.com',
       fields: {
         colorField,
         payment: true,
@@ -123,6 +124,9 @@ export default buildConfigWithDefaults({
         },
       },
       formSubmissionOverrides: {
+        access: {
+          update: ({ req }) => Boolean(req.user?.roles?.includes('admin')),
+        },
         fields: ({ defaultFields }) => {
           const modifiedFields: Field[] = defaultFields.map((field) => {
             if ('name' in field && field.type === 'group' && field.name === 'payment') {

test/plugin-form-builder/e2e.spec.ts

@@ -7,7 +7,7 @@ import { fileURLToPath } from 'url'
 import type { PayloadTestSDK } from '../helpers/sdk/index.js'
 import type { Config } from './payload-types.js'
 
-import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js'
+import { ensureCompilationIsDone, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js'
@@ -42,10 +42,6 @@ test.describe('Form Builder Plugin', () => {
     test('has contact form', async () => {
       await page.goto(formsUrl.list)
 
-      await expect(() => expect(page.url()).toContain('forms')).toPass({
-        timeout: POLL_TOPASS_TIMEOUT,
-      })
-
       const titleCell = page.locator('.row-2 .cell-title a')
       await expect(titleCell).toHaveText('Contact Form')
       const href = await titleCell.getAttribute('href')
@@ -88,10 +84,6 @@ test.describe('Form Builder Plugin', () => {
     test('has form submissions', async () => {
       await page.goto(submissionsUrl.list)
 
-      await expect(() => expect(page.url()).toContain('form-submissions')).toPass({
-        timeout: POLL_TOPASS_TIMEOUT,
-      })
-
       const firstSubmissionCell = page.locator('.table .cell-id a').last()
       const href = await firstSubmissionCell.getAttribute('href')
 
@@ -135,14 +127,30 @@ test.describe('Form Builder Plugin', () => {
 
       await page.goto(submissionsUrl.edit(createdSubmission.id))
 
-      await expect(() => expect(page.url()).toContain(createdSubmission.id)).toPass({
-        timeout: POLL_TOPASS_TIMEOUT,
-      })
-
       await expect(page.locator('#field-submissionData__0__value')).toHaveValue('New tester')
       await expect(page.locator('#field-submissionData__1__value')).toHaveValue('new@example.com')
     })
 
+    test('can create form submission from the admin panel', async () => {
+      await page.goto(submissionsUrl.create)
+      await page.locator('#field-form').click({ delay: 100 })
+      const options = page.locator('.rs__option')
+      await options.locator('text=Contact Form').click()
+
+      await expect(page.locator('#field-form').locator('.rs__value-container')).toContainText(
+        'Contact Form',
+      )
+
+      await page.locator('#field-submissionData button.array-field__add-row').click()
+      await page.locator('#field-submissionData__0__field').fill('name')
+      await page.locator('#field-submissionData__0__value').fill('Test Submission')
+      await saveDocAndAssert(page)
+
+      // Check that the fields are still editable, as this user is an admin
+      await expect(page.locator('#field-submissionData__0__field')).toBeEditable()
+      await expect(page.locator('#field-submissionData__0__value')).toBeEditable()
+    })
+
     test('can create form submission - with date field', async () => {
       const { docs } = await payload.find({
         collection: 'forms',
@@ -176,10 +184,6 @@ test.describe('Form Builder Plugin', () => {
 
       await page.goto(submissionsUrl.edit(createdSubmission.id))
 
-      await expect(() => expect(page.url()).toContain(createdSubmission.id)).toPass({
-        timeout: POLL_TOPASS_TIMEOUT,
-      })
-
       await expect(page.locator('#field-submissionData__0__value')).toHaveValue('New tester')
       await expect(page.locator('#field-submissionData__1__value')).toHaveValue('new@example.com')
       await expect(page.locator('#field-submissionData__2__value')).toHaveValue(

test/plugin-form-builder/payload-types.ts

@@ -171,7 +171,7 @@ export interface Form {
               root: {
                 type: string;
                 children: {
-                  type: string;
+                  type: any;
                   version: number;
                   [k: string]: unknown;
                 }[];
@@ -295,7 +295,7 @@ export interface Form {
     root: {
       type: string;
       children: {
-        type: string;
+        type: any;
         version: number;
         [k: string]: unknown;
       }[];
@@ -332,7 +332,7 @@ export interface Form {
           root: {
             type: string;
             children: {
-              type: string;
+              type: any;
               version: number;
               [k: string]: unknown;
             }[];
@@ -356,6 +356,7 @@ export interface Form {
  */
 export interface User {
   id: string;
+  roles?: 'admin'[] | null;
   updatedAt: string;
   createdAt: string;
   email: string;
@@ -365,6 +366,13 @@ export interface User {
   hash?: string | null;
   loginAttempts?: number | null;
   lockUntil?: string | null;
+  sessions?:
+    | {
+        id: string;
+        createdAt?: string | null;
+        expiresAt: string;
+      }[]
+    | null;
   password?: string | null;
 }
 /**
@@ -481,6 +489,7 @@ export interface PagesSelect<T extends boolean = true> {
  * via the `definition` "users_select".
  */
 export interface UsersSelect<T extends boolean = true> {
+  roles?: T;
   updatedAt?: T;
   createdAt?: T;
   email?: T;
@@ -490,6 +499,13 @@ export interface UsersSelect<T extends boolean = true> {
   hash?: T;
   loginAttempts?: T;
   lockUntil?: T;
+  sessions?:
+    | T
+    | {
+        id?: T;
+        createdAt?: T;
+        expiresAt?: T;
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema