Dataviews: Ensure items and fields are using a unique id (#56366)

WordPress · Nov 21, 2023 · ffa9ff7 · ffa9ff7
1 parent fe958de
commit ffa9ff7
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -214,6 +214,7 @@ export default function DataviewsTemplates() {
 				fields={ fields }
 				actions={ actions }
 				data={ shownTemplates }
+				getItemId={ ( item ) => item.id }
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }