fix(ui): error in version view if document contains localized arrays or blocks (#10893)

Fixes https://github.com/payloadcms/payload/issues/10884

packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx

@@ -32,7 +32,12 @@ export const RenderVersionFieldsToDiff = ({
             const LocaleComponents: React.ReactNode[] = []
             for (const [locale, baseField] of Object.entries(field.fieldByLocale)) {
               LocaleComponents.push(
-                <div className={`${baseClass}__locale`} key={[locale, fieldIndex].join('-')}>
+                <div
+                  className={`${baseClass}__locale`}
+                  data-field-path={baseField.path}
+                  data-locale={locale}
+                  key={[locale, fieldIndex].join('-')}
+                >
                   <div className={`${baseClass}__locale-value`}>{baseField.CustomComponent}</div>
                 </div>,
               )

packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx

@@ -282,15 +282,13 @@ const buildVersionField = ({
     }
   } // At this point, we are dealing with a `row`, etc
   else if ('fields' in field) {
-    if (field.type === 'array') {
-      if (!Array.isArray(versionValue)) {
-        throw new Error('Expected versionValue to be an array')
-      }
+    if (field.type === 'array' && versionValue) {
+      const arrayValue = Array.isArray(versionValue) ? versionValue : []
       baseVersionField.rows = []
 
-      for (let i = 0; i < versionValue.length; i++) {
+      for (let i = 0; i < arrayValue.length; i++) {
         const comparisonRow = comparisonValue?.[i] || {}
-        const versionRow = versionValue?.[i] || {}
+        const versionRow = arrayValue?.[i] || {}
         baseVersionField.rows[i] = buildVersionFields({
           clientSchemaMap,
           comparisonSiblingData: comparisonRow,
@@ -329,13 +327,11 @@ const buildVersionField = ({
   } else if (field.type === 'blocks') {
     baseVersionField.rows = []
 
-    if (!Array.isArray(versionValue)) {
-      throw new Error('Expected versionValue to be an array')
-    }
+    const blocksValue = Array.isArray(versionValue) ? versionValue : []
 
-    for (let i = 0; i < versionValue.length; i++) {
+    for (let i = 0; i < blocksValue.length; i++) {
       const comparisonRow = comparisonValue?.[i] || {}
-      const versionRow = versionValue[i] || {}
+      const versionRow = blocksValue[i] || {}
       const versionBlock = field.blocks.find((block) => block.slug === versionRow.blockType)
 
       let fields = []

test/versions/collections/Diff.ts

@@ -15,6 +15,17 @@ export const Diff: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'arrayLocalized',
+      type: 'array',
+      localized: true,
+      fields: [
+        {
+          name: 'textInArrayLocalized',
+          type: 'text',
+        },
+      ],
+    },
     {
       name: 'blocks',
       type: 'blocks',

test/versions/e2e.spec.ts

@@ -945,6 +945,21 @@ describe('Versions', () => {
       await expect(textInArray.locator('tr').nth(1).locator('td').nth(3)).toHaveText('textInArray2')
     })
 
+    test('correctly renders diff for localized array fields', async () => {
+      await navigateToVersionFieldsDiff()
+
+      const textInArray = page
+        .locator('[data-field-path="arrayLocalized"][data-locale="en"]')
+        .locator('[data-field-path="arrayLocalized.0.textInArrayLocalized"]')
+
+      await expect(textInArray.locator('tr').nth(1).locator('td').nth(1)).toHaveText(
+        'textInArrayLocalized',
+      )
+      await expect(textInArray.locator('tr').nth(1).locator('td').nth(3)).toHaveText(
+        'textInArrayLocalized2',
+      )
+    })
+
     test('correctly renders diff for block fields', async () => {
       await navigateToVersionFieldsDiff()
 

test/versions/payload-types.ts

@@ -224,6 +224,12 @@ export interface Diff {
         id?: string | null;
       }[]
     | null;
+  arrayLocalized?:
+    | {
+        textInArrayLocalized?: string | null;
+        id?: string | null;
+      }[]
+    | null;
   blocks?:
     | {
         textInBlock?: string | null;
@@ -641,6 +647,12 @@ export interface DiffSelect<T extends boolean = true> {
         textInArray?: T;
         id?: T;
       };
+  arrayLocalized?:
+    | T
+    | {
+        textInArrayLocalized?: T;
+        id?: T;
+      };
   blocks?:
     | T
     | {

test/versions/seed.ts

@@ -122,12 +122,18 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
 
   const diffDoc = await _payload.create({
     collection: diffCollectionSlug,
+    locale: 'en',
     data: {
       array: [
         {
           textInArray: 'textInArray',
         },
       ],
+      arrayLocalized: [
+        {
+          textInArrayLocalized: 'textInArrayLocalized',
+        },
+      ],
       blocks: [
         {
           blockType: 'TextBlock',
@@ -164,12 +170,18 @@ export async function seed(_payload: Payload, parallel: boolean = false) {
   const updatedDiffDoc = await _payload.update({
     id: diffDoc.id,
     collection: diffCollectionSlug,
+    locale: 'en',
     data: {
       array: [
         {
           textInArray: 'textInArray2',
         },
       ],
+      arrayLocalized: [
+        {
+          textInArrayLocalized: 'textInArrayLocalized2',
+        },
+      ],
       blocks: [
         {
           blockType: 'TextBlock',