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

feat: allow group fields to have an optional name (#12318)

Browse Source 
Adds the ability to completely omit `name` from group fields now so that
they're entirely presentational.

New config:
```ts
import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'posts',
  fields: [
    {
      label: 'Page header',
      type: 'group', // required
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
        },
      ],
    },
  ],
}
```

will create
<img width="332" alt="image"
src="https://github.com/user-attachments/assets/10b4315e-92d6-439e-82dd-7c815a844035"
/>


but the data response will still be

```
{
    "createdAt": "2025-05-05T13:42:20.326Z",
    "updatedAt": "2025-05-05T13:42:20.326Z",
    "title": "example post",
    "id": "6818c03ce92b7f92be1540f0"

}
```

Checklist:
- [x] Added int tests
- [x] Modify mongo, drizzle and graphql packages
- [x] Add type tests
- [x] Add e2e tests
This commit is contained in:
Paul
2025-05-14 16:45:34 -07:00
committed by GitHub
parent d63c8baea5
commit e258cd73ef
37 changed files with 955 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
test/fields/collections/Group/e2e.spec.ts Normal file
View File

@@ -0,0 +1,123 @@
import type { Page } from '@playwright/test'
import { expect, test } from '@playwright/test'
import { addListFilter } from 'helpers/e2e/addListFilter.js'
import path from 'path'
import { wait } from 'payload/shared'
import { fileURLToPath } from 'url'
import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
import type { Config } from '../../payload-types.js'
import {
ensureCompilationIsDone,
initPageConsoleErrorCatch,
saveDocAndAssert,
} from '../../../helpers.js'
import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
import { assertToastErrors } from '../../../helpers/assertToastErrors.js'
import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
import { RESTClient } from '../../../helpers/rest.js'
import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
import { groupFieldsSlug } from '../../slugs.js'
import { namedGroupDoc } from './shared.js'
const filename = fileURLToPath(import.meta.url)
const currentFolder = path.dirname(filename)
const dirname = path.resolve(currentFolder, '../../')
const { beforeAll, beforeEach, describe } = test
let payload: PayloadTestSDK<Config>
let client: RESTClient
let page: Page
let serverURL: string
// If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
let url: AdminUrlUtil
describe('Group', () => {
beforeAll(async ({ browser }, testInfo) => {
testInfo.setTimeout(TEST_TIMEOUT_LONG)
process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
;({ payload, serverURL } = await initPayloadE2ENoConfig<Config>({
dirname,
// prebuild,
}))
url = new AdminUrlUtil(serverURL, groupFieldsSlug)
const context = await browser.newContext()
page = await context.newPage()
initPageConsoleErrorCatch(page)
await ensureCompilationIsDone({ page, serverURL })
})
beforeEach(async () => {
await reInitializeDB({
serverURL,
snapshotKey: 'fieldsTest',
uploadsDir: path.resolve(dirname, './collections/Upload/uploads'),
})
if (client) {
await client.logout()
}
client = new RESTClient({ defaultSlug: 'users', serverURL })
await client.login()
await ensureCompilationIsDone({ page, serverURL })
})
describe('Named', () => {
test('should display field in list view', async () => {
await page.goto(url.list)
const textCell = page.locator('.row-1 .cell-group')
await expect(textCell).toContainText(JSON.stringify(namedGroupDoc.group?.text), {
useInnerText: true,
})
})
})
describe('Unnamed', () => {
test('should display field in list view', async () => {
await page.goto(url.list)
const textCell = page.locator('.row-1 .cell-insideUnnamedGroup')
await expect(textCell).toContainText(namedGroupDoc?.insideUnnamedGroup ?? '', {
useInnerText: true,
})
})
test('should display field in list view deeply nested', async () => {
await page.goto(url.list)
const textCell = page.locator('.row-1 .cell-deeplyNestedGroup')
await expect(textCell).toContainText(JSON.stringify(namedGroupDoc.deeplyNestedGroup), {
useInnerText: true,
})
})
test('should display field visually within nested groups', async () => {
await page.goto(url.create)
// Makes sure the fields are rendered
await page.mouse.wheel(0, 2000)
const unnamedGroupSelector = `.field-type.group-field #field-insideUnnamedGroup`
const unnamedGroupField = page.locator(unnamedGroupSelector)
await expect(unnamedGroupField).toBeVisible()
// Makes sure the fields are rendered
await page.mouse.wheel(0, 2000)
// A bit repetitive but this selector should fail if the group is not nested
const unnamedNestedGroupSelector = `.field-type.group-field .field-type.group-field .field-type.group-field .field-type.group-field .field-type.group-field #field-deeplyNestedGroup__insideNestedUnnamedGroup`
const unnamedNestedGroupField = page.locator(unnamedNestedGroupSelector)
await expect(unnamedNestedGroupField).toBeVisible()
})
})
})

48
test/fields/collections/Group/index.ts
View File

@@ -8,6 +8,9 @@ export const groupDefaultChild = 'child takes priority'
const GroupFields: CollectionConfig = {
slug: groupFieldsSlug,
versions: true,
admin: {
defaultColumns: ['id', 'group', 'insideUnnamedGroup', 'deeplyNestedGroup'],
},
fields: [
{
label: 'Group Field',
@@ -301,6 +304,51 @@ const GroupFields: CollectionConfig = {
},
],
},
{
type: 'group',
label: 'Unnamed group',
fields: [
{
type: 'text',
name: 'insideUnnamedGroup',
},
],
},
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
name: 'deeplyNestedGroup',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'text',
name: 'insideNestedUnnamedGroup',
},
],
},
],
},
],
},
],
},
],
},
],
}

6
test/fields/collections/Group/shared.ts
View File

@@ -1,6 +1,6 @@
import type { GroupField } from '../../payload-types.js'
export const groupDoc: Partial<GroupField> = {
export const namedGroupDoc: Partial<GroupField> = {
group: {
text: 'some text within a group',
subGroup: {
@@ -12,4 +12,8 @@ export const groupDoc: Partial<GroupField> = {
],
},
},
insideUnnamedGroup: 'text in unnamed group',
deeplyNestedGroup: {
insideNestedUnnamedGroup: 'text in nested unnamed group',
},
}

53
test/fields/int.spec.ts
View File

@@ -15,7 +15,7 @@ import { arrayDefaultValue } from './collections/Array/index.js'
import { blocksDoc } from './collections/Blocks/shared.js'
import { dateDoc } from './collections/Date/shared.js'
import { groupDefaultChild, groupDefaultValue } from './collections/Group/index.js'
import { groupDoc } from './collections/Group/shared.js'
import { namedGroupDoc } from './collections/Group/shared.js'
import { defaultNumber } from './collections/Number/index.js'
import { numberDoc } from './collections/Number/shared.js'
import { pointDoc } from './collections/Point/shared.js'
@@ -1614,7 +1614,7 @@ describe('Fields', () => {
it('should create with ids and nested ids', async () => {
const docWithIDs = (await payload.create({
collection: groupFieldsSlug,
data: groupDoc,
data: namedGroupDoc,
})) as Partial<GroupField>
expect(docWithIDs.group.subGroup.arrayWithinGroup[0].id).toBeDefined()
})
@@ -1913,6 +1913,53 @@ describe('Fields', () => {
})
})
it('should work with unnamed group', async () => {
const groupDoc = await payload.create({
collection: groupFieldsSlug,
data: {
insideUnnamedGroup: 'Hello world',
deeplyNestedGroup: { insideNestedUnnamedGroup: 'Secondfield' },
},
})
expect(groupDoc).toMatchObject({
id: expect.anything(),
insideUnnamedGroup: 'Hello world',
deeplyNestedGroup: {
insideNestedUnnamedGroup: 'Secondfield',
},
})
})
it('should work with unnamed group - graphql', async () => {
const mutation = `mutation {
createGroupField(
data: {
insideUnnamedGroup: "Hello world",
deeplyNestedGroup: { insideNestedUnnamedGroup: "Secondfield" },
group: {text: "hello"}
}
) {
insideUnnamedGroup
deeplyNestedGroup {
insideNestedUnnamedGroup
}
}
}`
const groupDoc = await restClient.GRAPHQL_POST({
body: JSON.stringify({ query: mutation }),
})
const data = (await groupDoc.json()).data.createGroupField
expect(data).toMatchObject({
insideUnnamedGroup: 'Hello world',
deeplyNestedGroup: {
insideNestedUnnamedGroup: 'Secondfield',
},
})
})
it('should query a subfield within a localized group', async () => {
const text = 'find this'
const hit = await payload.create({
@@ -2357,7 +2404,7 @@ describe('Fields', () => {
it('should return empty object for groups when no data present', async () => {
const doc = await payload.create({
collection: groupFieldsSlug,
data: groupDoc,
data: namedGroupDoc,
})
expect(doc.potentiallyEmptyGroup).toBeDefined()

10
test/fields/payload-types.ts
View File

@@ -1080,6 +1080,10 @@ export interface GroupField {
}[]
| null;
};
insideUnnamedGroup?: string | null;
deeplyNestedGroup?: {
insideNestedUnnamedGroup?: string | null;
};
updatedAt: string;
createdAt: string;
}
@@ -2676,6 +2680,12 @@ export interface GroupFieldsSelect<T extends boolean = true> {
| {
email?: T;
};
insideUnnamedGroup?: T;
deeplyNestedGroup?:
| T
| {
insideNestedUnnamedGroup?: T;
};
updatedAt?: T;
createdAt?: T;
}

4
test/fields/seed.ts
View File

@@ -16,7 +16,7 @@ import { conditionalLogicDoc } from './collections/ConditionalLogic/shared.js'
import { customRowID, customTabID, nonStandardID } from './collections/CustomID/shared.js'
import { dateDoc } from './collections/Date/shared.js'
import { anotherEmailDoc, emailDoc } from './collections/Email/shared.js'
import { groupDoc } from './collections/Group/shared.js'
import { namedGroupDoc } from './collections/Group/shared.js'
import { jsonDoc } from './collections/JSON/shared.js'
import { numberDoc } from './collections/Number/shared.js'
import { pointDoc } from './collections/Point/shared.js'
@@ -223,7 +223,7 @@ export const seed = async (_payload: Payload) => {
await _payload.create({
collection: groupFieldsSlug,
data: groupDoc,
data: namedGroupDoc,
depth: 0,
overrideAccess: true,
})

20
test/types/config.ts
View File

@@ -38,6 +38,26 @@ export default buildConfigWithDefaults({
},
],
},
{
type: 'group',
label: 'Unnamed Group',
fields: [
{
type: 'text',
name: 'insideUnnamedGroup',
},
],
},
{
type: 'group',
name: 'namedGroup',
fields: [
{
type: 'text',
name: 'insideNamedGroup',
},
],
},
{
name: 'radioField',
type: 'radio',

10
test/types/payload-types.ts
View File

@@ -144,6 +144,10 @@ export interface Post {
text?: string | null;
title?: string | null;
selectField: MySelectOptions;
insideUnnamedGroup?: string | null;
namedGroup?: {
insideNamedGroup?: string | null;
};
radioField: MyRadioOptions;
updatedAt: string;
createdAt: string;
@@ -264,6 +268,12 @@ export interface PostsSelect<T extends boolean = true> {
text?: T;
title?: T;
selectField?: T;
insideUnnamedGroup?: T;
namedGroup?:
| T
| {
insideNamedGroup?: T;
};
radioField?: T;
updatedAt?: T;
createdAt?: T;

13
test/types/types.spec.ts
View File

@@ -145,4 +145,17 @@ describe('Types testing', () => {
expect(asType<Post['radioField']>()).type.toBe<MyRadioOptions>()
})
})
describe('fields', () => {
describe('Group', () => {
test('correctly ignores unnamed group', () => {
expect<Post>().type.toHaveProperty('insideUnnamedGroup')
})
test('generates nested group name', () => {
expect<Post>().type.toHaveProperty('namedGroup')
expect<NonNullable<Post['namedGroup']>>().type.toHaveProperty('insideNamedGroup')
})
})
})
})