tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Jacob Fletcher
2025-09-24 16:31:57 -04:00
committed by GitHub
parent ae7b75aca9
commit 104a5fcfee
6 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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',

13
test/plugin-form-builder/collections/Users.ts
View File

@@ -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',
},
],
},
],
}

4
test/plugin-form-builder/config.ts
View File

@@ -54,6 +54,7 @@ export default buildConfigWithDefaults({
data: {
email: devUser.email,
password: devUser.password,
roles: ['admin'],
},
})
@@ -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') {

38
test/plugin-form-builder/e2e.spec.ts
View File

@@ -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(

22
test/plugin-form-builder/payload-types.ts
View File

@@ -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