Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core): handle fieldset members in FormInput #7045

Merged
merged 4 commits into from
Jul 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions dev/test-studio/schema/debug/objectsDebug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,28 @@ const animals = defineField({
of: [animal],
})

const fieldsetArray = defineField({
type: 'array',
name: 'fieldsetArray',
title: 'Fieldset array',

fieldset: 'fieldset',

of: [
{
type: 'object',
name: 'myObject',
fields: [
{
name: 'string',
type: 'string',
title: 'String',
},
],
},
],
})

const arrayOfImages = defineField({
type: 'array',
name: 'arrayOfImages',
Expand Down Expand Up @@ -353,6 +375,14 @@ const arrayOfMixedTypes = defineField({
export const objectsDebug = defineType({
type: 'document',
name: 'objectsDebug',

fieldsets: [
{
name: 'fieldset',
title: 'Fieldset',
},
],

fields: [
{
name: 'title',
Expand All @@ -361,6 +391,7 @@ export const objectsDebug = defineType({
animals,
arrayOfMixedTypes,
body,
fieldsetArray,
objectWithArray,
arrayOfAnonymousObjects,
arrayOfImages,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,19 @@ const DOCUMENT_VALUE: SanityDocument = {
title: 'My object 3',
},
],

myFieldsetArray: [
{
_type: 'myObject',
_key: 'key-1',
title: 'My object 1',
},
{
_type: 'myObject',
_key: 'key-2',
title: 'My object 2',
},
],
}

test.describe('Tree editing', () => {
Expand All @@ -38,8 +51,10 @@ test.describe('Tree editing', () => {
}) => {
await mount(<TreeEditingStory />)

const field = page.getByTestId('field-myArrayOfObjects')

// Add an item
await page.getByTestId('add-single-object-button').click()
await field.getByTestId('add-single-object-button').click()

// Wait for the dialog to be visible
await expect(page.getByTestId('tree-editing-dialog')).toBeVisible()
Expand All @@ -57,8 +72,10 @@ test.describe('Tree editing', () => {
}) => {
await mount(<TreeEditingStory legacyEditing />)

const field = page.getByTestId('field-myArrayOfObjects')

// Add an item
await page.getByTestId('add-single-object-button').click()
await field.getByTestId('add-single-object-button').click()

// Test that the legacy dialog is visible and the tree editing dialog is not
await expect(page.getByTestId('tree-editing-dialog')).not.toBeVisible()
Expand Down Expand Up @@ -169,6 +186,21 @@ test.describe('Tree editing', () => {
await expect(stringInput).toHaveValue('My object 2')
})

test('should open dialog with correct form view based on the openPath when the array is in a fieldset', async ({
mount,
page,
}) => {
await mount(
<TreeEditingStory value={DOCUMENT_VALUE} openPath={['myFieldsetArray', {_key: 'key-2'}]} />,
)

const dialog = page.getByTestId('tree-editing-dialog')
await expect(dialog).toBeVisible()

const stringInput = dialog.getByTestId('string-input')
await expect(stringInput).toHaveValue('My object 2')
})

test('should not open dialog when the openPath does not match any item', async ({
mount,
page,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,44 @@ function getSchemaTypes(opts: GetSchemaTypesOpts) {
type: 'document',
name: 'test',
title: 'Test',

fieldsets: [
{
name: 'fieldset',
},
],

fields: [
defineField({
type: 'array',
name: 'myArrayOfObjects',
title: 'My array of objects',

options: {
treeEditing: treeEditingEnabled,
},

of: [
{
type: 'object',
name: 'myObject',
fields: [
{
type: 'string',
name: 'title',
title: 'Title',
},
],
},
],
}),

defineField({
type: 'array',
name: 'myFieldsetArray',
title: 'My fieldset array',
fieldset: 'fieldset',

of: [
{
type: 'object',
Expand Down
12 changes: 10 additions & 2 deletions packages/sanity/src/core/form/components/FormInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -249,11 +249,19 @@ const FormInputInner = memo(function FormInputInner(

if (isObjectInputProps(props)) {
const childPath = trimLeft(props.path, absolutePath)

const fieldMember = props.members.find(
(member): member is FieldMember => member.kind == 'field' && childPath[0] === member.name,
)

if (!fieldMember) {
const fieldSetMember = props.members
.filter((member) => member.kind === 'fieldSet')
.flatMap((member) => (member.kind === 'fieldSet' && member.fieldSet?.members) || [])
.find((m): m is FieldMember => m.kind === 'field' && m.name === childPath[0])

const member = fieldMember || fieldSetMember

if (!member) {
const fieldName =
typeof childPath[0] === 'string' ? childPath[0] : JSON.stringify(childPath[0])

Expand All @@ -262,7 +270,7 @@ const FormInputInner = memo(function FormInputInner(

return (
<MemberField
member={fieldMember}
member={member}
renderAnnotation={renderAnnotation}
renderBlock={renderBlock}
renderInput={renderInput}
Expand Down
Loading