From abdde7a6c5ce7f58e3c924b6d3e3ca25005ccd88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:33:59 +0100
Subject: [PATCH] DataViews: fix storybook (#58842)

---
 packages/dataviews/src/stories/index.story.js | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
index e0bea0c92c2b21..e7fbfbbe554b01 100644
--- a/packages/dataviews/src/stories/index.story.js
+++ b/packages/dataviews/src/stories/index.story.js
@@ -6,9 +6,9 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DataViews, LAYOUT_GRID, LAYOUT_TABLE } from '../index';
-
+import { DataViews } from '../index';
 import { DEFAULT_VIEW, actions, data } from './fixtures';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
 
 const meta = {
 	title: 'DataViews (Experimental)/DataViews',
@@ -17,7 +17,9 @@ const meta = {
 export default meta;
 
 const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'image',
 		primaryField: 'title',
@@ -100,23 +102,19 @@ export const Default = ( props ) => {
 		};
 	}, [ view ] );
 	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				newView = {
+					...newView,
 					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
+						...defaultConfigPerViewType[ newView.type ],
 					},
 				};
 			}
 
-			setView( updatedView );
+			setView( newView );
 		},
-		[ view, setView ]
+		[ view.type, setView ]
 	);
 	return (
 		<DataViews
@@ -131,7 +129,5 @@ export const Default = ( props ) => {
 };
 Default.args = {
 	actions,
-	getItemId: ( item ) => item.id,
-	isLoading: false,
 	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
 };