fix(ui): use consistent row ids when duplicating array and block rows

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/ui/src/forms/Form/fieldReducer.ts

@@ -134,43 +134,45 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
     case 'DUPLICATE_ROW': {
       const { path, rowIndex } = action
       const { remainingFields, rows } = separateRows(path, state)
-      const rowsMetadata = [...(state[path].rows || [])]
+      const rowsWithDuplicate = [...(state[path].rows || [])]
 
-      const duplicateRowMetadata = deepCopyObjectSimpleWithoutReactComponents(
-        rowsMetadata[rowIndex],
-      )
+      const newRow = deepCopyObjectSimpleWithoutReactComponents(rowsWithDuplicate[rowIndex])
+
+      const newRowID = new ObjectId().toHexString()
 
-      if (duplicateRowMetadata.id) {
-        duplicateRowMetadata.id = new ObjectId().toHexString()
+      if (newRow.id) {
+        newRow.id = newRowID
       }
 
-      if (rowsMetadata[rowIndex]?.customComponents?.RowLabel) {
-        duplicateRowMetadata.customComponents = {
-          RowLabel: rowsMetadata[rowIndex].customComponents.RowLabel,
+      if (rowsWithDuplicate[rowIndex]?.customComponents?.RowLabel) {
+        newRow.customComponents = {
+          RowLabel: rowsWithDuplicate[rowIndex].customComponents.RowLabel,
         }
       }
 
       const duplicateRowState = deepCopyObjectSimpleWithoutReactComponents(rows[rowIndex])
 
       if (duplicateRowState.id) {
-        duplicateRowState.id.value = new ObjectId().toHexString()
-        duplicateRowState.id.initialValue = new ObjectId().toHexString()
+        duplicateRowState.id.value = newRowID
+        duplicateRowState.id.initialValue = newRowID
       }
 
       for (const key of Object.keys(duplicateRowState).filter((key) => key.endsWith('.id'))) {
         const idState = duplicateRowState[key]
 
+        const newNestedFieldID = new ObjectId().toHexString()
+
         if (idState && typeof idState.value === 'string' && ObjectId.isValid(idState.value)) {
-          duplicateRowState[key].value = new ObjectId().toHexString()
-          duplicateRowState[key].initialValue = new ObjectId().toHexString()
+          duplicateRowState[key].value = newNestedFieldID
+          duplicateRowState[key].initialValue = newNestedFieldID
         }
       }
 
       // If there are subfields
       if (Object.keys(duplicateRowState).length > 0) {
         // Add new object containing subfield names to unflattenedRows array
         rows.splice(rowIndex + 1, 0, duplicateRowState)
-        rowsMetadata.splice(rowIndex + 1, 0, duplicateRowMetadata)
+        rowsWithDuplicate.splice(rowIndex + 1, 0, newRow)
       }
 
       const newState = {
@@ -179,7 +181,7 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
         [path]: {
           ...state[path],
           disableFormData: true,
-          rows: rowsMetadata,
+          rows: rowsWithDuplicate,
           value: rows.length,
         },
       }

test/_community/collections/Posts/index.ts

@@ -1,7 +1,5 @@
 import type { CollectionConfig } from 'payload'
 
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
-
 export const postsSlug = 'posts'
 
 export const PostsCollection: CollectionConfig = {
@@ -15,11 +13,14 @@ export const PostsCollection: CollectionConfig = {
       type: 'text',
     },
     {
-      name: 'content',
-      type: 'richText',
-      editor: lexicalEditor({
-        features: ({ defaultFeatures }) => [...defaultFeatures],
-      }),
+      name: 'array',
+      type: 'array',
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+        },
+      ],
     },
   ],
 }

test/_community/payload-types.ts

@@ -126,21 +126,12 @@ export interface UserAuthOperations {
 export interface Post {
   id: string;
   title?: string | null;
-  content?: {
-    root: {
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  } | null;
+  array?:
+    | {
+        title?: string | null;
+        id?: string | null;
+      }[]
+    | null;
   updatedAt: string;
   createdAt: string;
 }
@@ -279,7 +270,12 @@ export interface PayloadMigration {
  */
 export interface PostsSelect<T extends boolean = true> {
   title?: T;
-  content?: T;
+  array?:
+    | T
+    | {
+        title?: T;
+        id?: T;
+      };
   updatedAt?: T;
   createdAt?: T;
 }

test/fields/collections/Blocks/e2e.spec.ts

@@ -2,8 +2,14 @@ import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
 import { copyPasteField } from 'helpers/e2e/copyPasteField.js'
-import { addArrayRowBelow, duplicateArrayRow } from 'helpers/e2e/fields/array/index.js'
-import { addBlock, openBlocksDrawer, reorderBlocks } from 'helpers/e2e/fields/blocks/index.js'
+import { duplicateArrayRow } from 'helpers/e2e/fields/array/index.js'
+import {
+  addBlock,
+  addBlockBelow,
+  duplicateBlock,
+  openBlocksDrawer,
+  reorderBlocks,
+} from 'helpers/e2e/fields/blocks/index.js'
 import { scrollEntirePage } from 'helpers/e2e/scrollEntirePage.js'
 import { toggleBlockOrArrayRow } from 'helpers/e2e/toggleCollapsible.js'
 import path from 'path'
@@ -127,22 +133,13 @@ describe('Block fields', () => {
   test('should open blocks drawer from block row and add below', async () => {
     await page.goto(url.create)
 
-    await addArrayRowBelow(page, { fieldName: 'blocks' })
-
-    const blocksDrawer = page.locator('[id^=drawer_1_blocks-drawer-]')
-    await expect(blocksDrawer).toBeVisible()
-
-    // select the first block in the drawer
-    const firstBlockSelector = blocksDrawer
-      .locator('.blocks-drawer__blocks .blocks-drawer__block')
-      .first()
-
-    await expect(firstBlockSelector).toContainText('Content')
-    await firstBlockSelector.click()
+    await addBlockBelow(page, { fieldName: 'blocks', blockToSelect: 'Content' })
 
     // ensure the block was inserted beneath the first in the rows
     const addedRow = page.locator('#field-blocks #blocks-row-1')
+
     await expect(addedRow).toBeVisible()
+
     await expect(addedRow.locator('.blocks-field__block-header')).toHaveText(
       'Custom Block Label: Content 02',
     ) // went from `Number` to `Content`
@@ -151,19 +148,17 @@ describe('Block fields', () => {
   test('should duplicate block', async () => {
     await page.goto(url.create)
 
-    await duplicateArrayRow(page, { fieldName: 'blocks' })
+    const { rowCount } = await duplicateBlock(page, { fieldName: 'blocks' })
 
-    const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
-    expect(await blocks.count()).toEqual(5)
+    expect(rowCount).toEqual(5)
   })
 
   test('should save when duplicating subblocks', async () => {
     await page.goto(url.create)
 
-    await duplicateArrayRow(page, { fieldName: 'blocks', rowIndex: 2 })
+    const { rowCount } = await duplicateBlock(page, { fieldName: 'blocks', rowIndex: 2 })
 
-    const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
-    expect(await blocks.count()).toEqual(5)
+    expect(rowCount).toEqual(5)
 
     await page.click('#action-save')
     await expect(page.locator('.payload-toast-container')).toContainText('successfully')