fix(ui): custom block labels stale when reordering blocks (#11367)

When blocks have custom row labels, those row labels become stale when
reordering blocks. After moving a block, for example, the row label will
jump back the original block until form state returns with the proper
rendering order. This is especially evident on slow networks.

Author: jacobsfletch

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

@@ -180,31 +180,52 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
 
     case 'MOVE_ROW': {
       const { moveFromIndex, moveToIndex, path } = action
-      const { remainingFields, rows } = separateRows(path, state)
 
-      // copy the row to move
-      const copyOfMovingRow = rows[moveFromIndex]
-      // delete the row by index
-      rows.splice(moveFromIndex, 1)
-      // insert row copyOfMovingRow back in
-      rows.splice(moveToIndex, 0, copyOfMovingRow)
+      // Handle moving rows on the top-level, i.e. `array.0.text` -> `array.1.text`
+      const { remainingFields, rows: topLevelRows } = separateRows(path, state)
+      const copyOfMovingRow = topLevelRows[moveFromIndex]
+      topLevelRows.splice(moveFromIndex, 1)
+      topLevelRows.splice(moveToIndex, 0, copyOfMovingRow)
 
       // modify array/block internal row state (i.e. collapsed, blockType)
-      const rowStateCopy = [...(state[path]?.rows || [])]
-      const movingRowState = { ...rowStateCopy[moveFromIndex] }
-      rowStateCopy.splice(moveFromIndex, 1)
-      rowStateCopy.splice(moveToIndex, 0, movingRowState)
+      const rowsWithinField = [...(state[path]?.rows || [])]
+      const copyOfMovingRow2 = { ...rowsWithinField[moveFromIndex] }
+      rowsWithinField.splice(moveFromIndex, 1)
+      rowsWithinField.splice(moveToIndex, 0, copyOfMovingRow2)
 
       const newState = {
         ...remainingFields,
-        ...flattenRows(path, rows),
+        ...flattenRows(path, topLevelRows),
         [path]: {
           ...state[path],
           requiresRender: true,
-          rows: rowStateCopy,
+          rows: rowsWithinField,
         },
       }
 
+      // Do the same for custom components, i.e. `array.customComponents.RowLabels[0]` -> `array.customComponents.RowLabels[1]`
+      // Do this _after_ initializing `newState` to avoid adding the `customComponents` key to the state if it doesn't exist
+      if (newState[path]?.customComponents?.RowLabels) {
+        const customComponents = {
+          ...newState[path].customComponents,
+          RowLabels: [...newState[path].customComponents.RowLabels],
+        }
+
+        // Ensure the array grows if necessary
+        if (moveToIndex >= customComponents.RowLabels.length) {
+          customComponents.RowLabels.length = moveToIndex + 1
+        }
+
+        const copyOfMovingLabel = customComponents.RowLabels[moveFromIndex]
+
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        customComponents.RowLabels.splice(moveFromIndex, 1)
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        customComponents.RowLabels.splice(moveToIndex, 0, copyOfMovingLabel)
+
+        newState[path].customComponents = customComponents
+      }
+
       return newState
     }
 

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

@@ -3,6 +3,7 @@ import type { BrowserContext, Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import { addBlock } from 'helpers/e2e/addBlock.js'
 import { openBlocksDrawer } from 'helpers/e2e/openBlocksDrawer.js'
+import { reorderBlocks } from 'helpers/e2e/reorderBlocks.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -289,6 +290,39 @@ describe('Block fields', () => {
   })
 
   describe('row manipulation', () => {
+    test('moving rows should immediately move custom row labels', async () => {
+      await page.goto(url.create)
+
+      // first ensure that the first block has the custom header, and that the second block doesn't
+
+      await expect(
+        page.locator('#field-blocks #blocks-row-0 .blocks-field__block-header'),
+      ).toHaveText('Custom Block Label: Content 01')
+
+      const secondBlockHeader = page.locator(
+        '#field-blocks #blocks-row-1 .blocks-field__block-header',
+      )
+
+      await expect(secondBlockHeader.locator('.blocks-field__block-pill')).toHaveText('Number')
+
+      await expect(secondBlockHeader.locator('input[id="blocks.1.blockName"]')).toHaveValue(
+        'Second block',
+      )
+
+      await reorderBlocks({
+        page,
+        fieldName: 'blocks',
+        fromBlockIndex: 0,
+        toBlockIndex: 1,
+      })
+
+      // Important: do _not_ poll here, use `textContent()` instead of `toHaveText()`
+      // This will prevent Playwright from polling for the change to the DOM
+      expect(
+        await page.locator('#field-blocks #blocks-row-1 .blocks-field__block-header').textContent(),
+      ).toMatch(/^Custom Block Label: Content/)
+    })
+
     describe('react hooks', () => {
       test('should add 2 new block rows', async () => {
         await page.goto(url.create)