DataViews: Add apiVersion in view config

packages/dataviews/src/components/dataviews/index.tsx

@@ -25,6 +25,7 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
+import { migrateViewConfig } from '../../migrations';
 
 type ItemWithId = { id: string };
 
@@ -89,22 +90,23 @@ export default function DataViews< Item >( {
 			onChangeSelection( newValue );
 		}
 	}
+	const _view = useMemo( () => migrateViewConfig( view ), [ view ] );
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 	const _selection = useMemo( () => {
 		return selection.filter( ( id ) =>
 			data.some( ( item ) => getItemId( item ) === id )
 		);
 	}, [ selection, data, getItemId ] );
 
-	const filters = useFilters( _fields, view );
+	const filters = useFilters( _fields, _view );
 	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
 		( filters || [] ).some( ( filter ) => filter.isPrimary )
 	);
 
 	return (
 		<DataViewsContext.Provider
 			value={ {
-				view,
+				view: _view,
 				onChangeView,
 				fields: _fields,
 				actions,
@@ -135,7 +137,7 @@ export default function DataViews< Item >( {
 						{ search && <DataViewsSearch label={ searchLabel } /> }
 						<FiltersToggle
 							filters={ filters }
-							view={ view }
+							view={ _view }
 							onChangeView={ onChangeView }
 							setOpenedFilter={ setOpenedFilter }
 							setIsShowingFilter={ setIsShowingFilter }

packages/dataviews/src/filter-and-sort-data-view.ts

@@ -16,6 +16,7 @@ import {
 } from './constants';
 import { normalizeFields } from './normalize-fields';
 import type { Field, View } from './types';
+import { migrateViewConfig } from './migrations';
 
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
@@ -46,11 +47,13 @@ export function filterSortAndPaginate< Item >(
 			paginationInfo: { totalItems: 0, totalPages: 0 },
 		};
 	}
+
+	const _view = migrateViewConfig( view );
 	const _fields = normalizeFields( fields );
 	let filteredData = [ ...data ];
 	// Handle global search.
-	if ( view.search ) {
-		const normalizedSearch = normalizeSearchInput( view.search );
+	if ( _view.search ) {
+		const normalizedSearch = normalizeSearchInput( _view.search );
 		filteredData = filteredData.filter( ( item ) => {
 			return _fields
 				.filter( ( field ) => field.enableGlobalSearch )
@@ -61,8 +64,8 @@ export function filterSortAndPaginate< Item >(
 		} );
 	}
 
-	if ( view.filters && view.filters?.length > 0 ) {
-		view.filters.forEach( ( filter ) => {
+	if ( _view.filters && _view.filters?.length > 0 ) {
+		_view.filters.forEach( ( filter ) => {
 			const field = _fields.find(
 				( _field ) => _field.id === filter.field
 			);
@@ -133,26 +136,30 @@ export function filterSortAndPaginate< Item >(
 	}
 
 	// Handle sorting.
-	if ( view.sort ) {
-		const fieldId = view.sort.field;
+	if ( _view.sort ) {
+		const fieldId = _view.sort.field;
 		const fieldToSort = _fields.find( ( field ) => {
 			return field.id === fieldId;
 		} );
 		if ( fieldToSort ) {
 			filteredData.sort( ( a, b ) => {
-				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
+				return fieldToSort.sort(
+					a,
+					b,
+					_view.sort?.direction ?? 'desc'
+				);
 			} );
 		}
 	}
 
 	// Handle pagination.
 	let totalItems = filteredData.length;
 	let totalPages = 1;
-	if ( view.page !== undefined && view.perPage !== undefined ) {
-		const start = ( view.page - 1 ) * view.perPage;
+	if ( _view.page !== undefined && _view.perPage !== undefined ) {
+		const start = ( _view.page - 1 ) * _view.perPage;
 		totalItems = filteredData?.length || 0;
-		totalPages = Math.ceil( totalItems / view.perPage );
-		filteredData = filteredData?.slice( start, start + view.perPage );
+		totalPages = Math.ceil( totalItems / _view.perPage );
+		filteredData = filteredData?.slice( start, start + _view.perPage );
 	}
 
 	return {

packages/dataviews/src/migrations.ts

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const VIEW_CONFIG_API_VERSION = 1;
+
+export function migrateViewConfig( view: View ) {
+	return view;
+}

packages/dataviews/src/types.ts

@@ -248,6 +248,11 @@ export interface NormalizedFilter {
 }
 
 interface ViewBase {
+	/**
+	 * The version of the API.
+	 */
+	apiVersion?: number;
+
 	/**
 	 * The layout of the view.
 	 */