DataViews: Fix reordering fields in list and grid layouts (#67777)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: oandregal <[email protected]>

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -214,21 +214,18 @@ export default function ViewGrid< Item >( {
 		( field ) => field.id === view?.descriptionField
 	);
 	const otherFields = view.fields ?? [];
-	const { regularFields, badgeFields } = fields.reduce(
-		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
-			if (
-				! otherFields.includes( field.id ) ||
-				[
-					view?.mediaField,
-					view?.titleField,
-					view?.descriptionField,
-				].includes( field.id )
-			) {
+	const { regularFields, badgeFields } = otherFields.reduce(
+		(
+			accumulator: Record< string, NormalizedField< Item >[] >,
+			fieldId
+		) => {
+			const field = fields.find( ( f ) => f.id === fieldId );
+			if ( ! field ) {
 				return accumulator;
 			}
 			// If the field is a badge field, add it to the badgeFields array
 			// otherwise add it to the rest visibleFields array.
-			const key = view.layout?.badgeFields?.includes( field.id )
+			const key = view.layout?.badgeFields?.includes( fieldId )
 				? 'badgeFields'
 				: 'regularFields';
 			accumulator[ key ].push( field );

packages/dataviews/src/dataviews-layouts/list/index.tsx

@@ -325,6 +325,10 @@ function ListItem< Item >( {
 	);
 }
 
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
 export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const {
 		actions,
@@ -346,15 +350,9 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const descriptionField = fields.find(
 		( field ) => field.id === view.descriptionField
 	);
-	const otherFields = fields.filter(
-		( field ) =>
-			( view.fields ?? [] ).includes( field.id ) &&
-			! [
-				view.titleField,
-				view.mediaField,
-				view.descriptionField,
-			].includes( field.id )
-	);
+	const otherFields = ( view?.fields ?? [] )
+		.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )
+		.filter( isDefined );
 
 	const onSelect = ( item: Item ) =>
 		onChangeSelection( [ getItemId( item ) ] );