From 7dda6db94a6078eb1ae7d2697dd0a06cd903d02f Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 21 Nov 2023 12:09:21 +0200
Subject: [PATCH] Dataviews: Ensure items and fields are using a unique id

---
 packages/edit-site/src/components/dataviews/README.md         | 1 +
 packages/edit-site/src/components/dataviews/dataviews.js      | 2 ++
 packages/edit-site/src/components/dataviews/view-grid.js      | 4 ++--
 packages/edit-site/src/components/dataviews/view-list.js      | 4 +++-
 packages/edit-site/src/components/page-pages/index.js         | 1 +
 .../src/components/page-templates/dataviews-templates.js      | 1 +
 6 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
index 5e01c17dcd940..9c6725a39ead2 100644
--- a/packages/edit-site/src/components/dataviews/README.md
+++ b/packages/edit-site/src/components/dataviews/README.md
@@ -5,6 +5,7 @@ This file documents the DataViews UI component, which provides an API to render
 ```js
 <DataViews
 	data={ pages }
+	getItemId={ ( item ) => item.id }
 	isLoading={ isLoadingPages }
 	view={ view }
 	onChangeView={ onChangeView }
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index e2e392f8fd95b..682060203de7c 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -41,6 +41,7 @@ export default function DataViews( {
 	searchLabel = undefined,
 	actions,
 	data,
+	getItemId,
 	isLoading = false,
 	paginationInfo,
 	supportedLayouts,
@@ -86,6 +87,7 @@ export default function DataViews( {
 					paginationInfo={ paginationInfo }
 					actions={ actions }
 					data={ data }
+					getItemId={ getItemId }
 					isLoading={ isLoading }
 				/>
 				<Pagination
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index d319a25579f1a..b9d4bd78d96d6 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -14,7 +14,7 @@ import {
  */
 import ItemActions from './item-actions';
 
-export function ViewGrid( { data, fields, view, actions } ) {
+export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -27,7 +27,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 		<Grid gap={ 8 } columns={ 2 } alignment="top">
 			{ data.map( ( item, index ) => {
 				return (
-					<VStack key={ index }>
+					<VStack key={ getItemId?.( item ) || index }>
 						<div className="dataviews-view-grid__media">
 							{ mediaField?.render( { item, view } ) || (
 								<Placeholder
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 07190663de02b..0939297e374df 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -249,6 +249,7 @@ function ViewList( {
 	fields,
 	actions,
 	data,
+	getItemId,
 	isLoading = false,
 	paginationInfo,
 } ) {
@@ -370,6 +371,7 @@ function ViewList( {
 			},
 			columnVisibility: columnVisibility ?? EMPTY_OBJECT,
 		},
+		getRowId: getItemId,
 		onSortingChange: ( sortingUpdater ) => {
 			onChangeView( ( currentView ) => {
 				const sort =
@@ -488,7 +490,7 @@ function ViewList( {
 							<tr key={ row.id }>
 								{ row.getVisibleCells().map( ( cell ) => (
 									<td
-										key={ cell.id }
+										key={ cell.column.id }
 										style={ {
 											width:
 												cell.column.columnDef.width ||
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index ea29d29335e27..b933f1d82500e 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -316,6 +316,7 @@ export default function PagePages() {
 					fields={ fields }
 					actions={ actions }
 					data={ pages || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.id }
 					isLoading={ isLoadingPages || isLoadingAuthors }
 					view={ view }
 					onChangeView={ onChangeView }
diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
index ce4927895b29b..39a9d1b60abad 100644
--- a/packages/edit-site/src/components/page-templates/dataviews-templates.js
+++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -214,6 +214,7 @@ export default function DataviewsTemplates() {
 				fields={ fields }
 				actions={ actions }
 				data={ shownTemplates }
+				getItemId={ ( item ) => item.id }
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }