From 096d33718d28cb5207027f6737982b29a0ced90d Mon Sep 17 00:00:00 2001 From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Date: Tue, 12 Sep 2023 11:43:45 -0400 Subject: [PATCH] fix: fields with relationTo[] correctly load returned data from form submission (#3317) --- .../elements/DocumentDrawer/DrawerContent.tsx | 2 +- .../components/elements/Status/index.tsx | 4 +- .../addFieldStatePromise.ts | 22 +++++++-- src/admin/components/views/Account/index.tsx | 2 +- test/fields-relationship/e2e.spec.ts | 47 +++++++++++++++---- 5 files changed, 61 insertions(+), 16 deletions(-) diff --git a/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx b/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx index a0251517df..0fa453e1ed 100644 --- a/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx +++ b/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx @@ -90,7 +90,7 @@ const Content: React.FC = ({ const isEditing = Boolean(id); const apiURL = id ? `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}` : null; - const action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`; + const action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&fallback-locale=null`; const hasSavePermission = (isEditing && docPermissions?.update?.permission) || (!isEditing && (docPermissions as CollectionPermission)?.create?.permission); const isLoading = !internalState || !docPermissions || isLoadingDocument; diff --git a/src/admin/components/elements/Status/index.tsx b/src/admin/components/elements/Status/index.tsx index 94b0b6800c..40ffd3e0d2 100644 --- a/src/admin/components/elements/Status/index.tsx +++ b/src/admin/components/elements/Status/index.tsx @@ -66,11 +66,11 @@ const Status: React.FC = () => { } if (collection) { - url = `${serverURL}${api}/${collection.slug}/${id}?depth=0&locale=${locale}&fallback-locale=null`; + url = `${serverURL}${api}/${collection.slug}/${id}?locale=${locale}&fallback-locale=null`; method = 'patch'; } if (global) { - url = `${serverURL}${api}/globals/${global.slug}?depth=0&locale=${locale}&fallback-locale=null`; + url = `${serverURL}${api}/globals/${global.slug}?locale=${locale}&fallback-locale=null`; method = 'post'; } diff --git a/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts b/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts index 0cebc33d5e..069ffcf89b 100644 --- a/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts +++ b/src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts @@ -248,6 +248,12 @@ export const addFieldStatePromise = async ({ case 'relationship': { if (field.hasMany) { const relationshipValue = Array.isArray(valueWithDefault) ? valueWithDefault.map((relationship) => { + if (Array.isArray(field.relationTo)) { + return { + relationTo: relationship.relationTo, + value: typeof relationship.value === 'string' ? relationship.value : relationship.value?.id, + }; + } if (typeof relationship === 'object' && relationship !== null) { return relationship.id; } @@ -256,16 +262,24 @@ export const addFieldStatePromise = async ({ fieldState.value = relationshipValue; fieldState.initialValue = relationshipValue; - - state[`${path}${field.name}`] = fieldState; + } else if (Array.isArray(field.relationTo)) { + if (valueWithDefault && typeof valueWithDefault === 'object' && 'relationTo' in valueWithDefault && 'value' in valueWithDefault) { + const value = typeof valueWithDefault?.value === 'object' && 'id' in valueWithDefault.value ? valueWithDefault.value.id : valueWithDefault.value; + const relationshipValue = { + relationTo: valueWithDefault?.relationTo, + value, + }; + fieldState.value = relationshipValue; + fieldState.initialValue = relationshipValue; + } } else { const relationshipValue = valueWithDefault && typeof valueWithDefault === 'object' && 'id' in valueWithDefault ? valueWithDefault.id : valueWithDefault; fieldState.value = relationshipValue; fieldState.initialValue = relationshipValue; - - state[`${path}${field.name}`] = fieldState; } + state[`${path}${field.name}`] = fieldState; + break; } diff --git a/src/admin/components/views/Account/index.tsx b/src/admin/components/views/Account/index.tsx index 77c40746ff..6df80eb833 100644 --- a/src/admin/components/views/Account/index.tsx +++ b/src/admin/components/views/Account/index.tsx @@ -59,7 +59,7 @@ const AccountView: React.FC = () => { const dataToRender = locationState?.data || data; const apiURL = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`; - const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}&depth=0`; + const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`; const onSave = React.useCallback(async (json: any) => { getDocPermissions(); diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts index ab5db7d1f1..22bd0a38a0 100644 --- a/test/fields-relationship/e2e.spec.ts +++ b/test/fields-relationship/e2e.spec.ts @@ -123,6 +123,34 @@ describe('fields - relationship', () => { await expect(field).toContainText(relationOneDoc.id); await saveDocAndAssert(page); + await wait(200); + await expect(field).toContainText(relationOneDoc.id); + }); + + test('should create relations to multiple collections', async () => { + await page.goto(url.create); + + const field = page.locator('#field-relationshipMultiple'); + const value = page.locator('#field-relationshipMultiple .relationship--single-value__text'); + + await field.click({ delay: 100 }); + + const options = page.locator('.rs__option'); + + await expect(options).toHaveCount(3); // 3 docs + + // Add one relationship + await options.locator(`text=${relationOneDoc.id}`).click(); + await expect(value).toContainText(relationOneDoc.id); + + // Add relationship of different collection + await field.click({ delay: 100 }); + await options.locator(`text=${relationTwoDoc.id}`).click(); + await expect(value).toContainText(relationTwoDoc.id); + + await saveDocAndAssert(page); + await wait(200); + await expect(value).toContainText(relationTwoDoc.id); }); test('should create hasMany relationship', async () => { @@ -152,30 +180,33 @@ describe('fields - relationship', () => { await expect(page.locator('.rs__menu')).toHaveText('No options'); await saveDocAndAssert(page); + await wait(200); + await expect(values).toHaveText([relationOneDoc.id, anotherRelationOneDoc.id]); }); - test('should create relations to multiple collections', async () => { + test('should create many relations to multiple collections', async () => { await page.goto(url.create); - const field = page.locator('#field-relationshipMultiple'); - const value = page.locator('#field-relationshipMultiple .relationship--single-value__text'); - + const field = page.locator('#field-relationshipHasManyMultiple'); await field.click({ delay: 100 }); const options = page.locator('.rs__option'); + await expect(options).toHaveCount(3); - await expect(options).toHaveCount(3); // 3 docs + const values = page.locator('#field-relationshipHasManyMultiple .relationship--multi-value-label__text'); // Add one relationship await options.locator(`text=${relationOneDoc.id}`).click(); - await expect(value).toContainText(relationOneDoc.id); + await expect(values).toHaveText([relationOneDoc.id]); - // Add relationship of different collection + // Add second relationship await field.click({ delay: 100 }); await options.locator(`text=${relationTwoDoc.id}`).click(); - await expect(value).toContainText(relationTwoDoc.id); + await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id]); await saveDocAndAssert(page); + await wait(200); + await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id]); }); test('should duplicate document with relationships', async () => {