DataViews: Preserve filters when switching layouts in templates datav…

…iews (#67744)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

packages/edit-site/src/components/page-templates/index.js

@@ -25,6 +25,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { authorField, descriptionField, previewField } from './fields';
+import { useEvent } from '@wordpress/compose';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -92,11 +93,19 @@ export default function PageTemplates() {
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
+
+	// Sync the layout from the URL to the view state.
+	useEffect( () => {
+		setView( ( currentView ) => ( {
+			...currentView,
+			type: layout ?? DEFAULT_VIEW.type,
+		} ) );
+	}, [ setView, layout ] );
+
+	// Sync the active view from the URL to the view state.
 	useEffect( () => {
-		const usedType = layout ?? DEFAULT_VIEW.type;
 		setView( ( currentView ) => ( {
 			...currentView,
-			type: usedType,
 			filters:
 				activeView !== 'all'
 					? [
@@ -108,7 +117,7 @@ export default function PageTemplates() {
 					  ]
 					: [],
 		} ) );
-	}, [ activeView, layout ] );
+	}, [ setView, activeView ] );
 
 	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
@@ -170,20 +179,16 @@ export default function PageTemplates() {
 		[ postTypeActions, editAction ]
 	);
 
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				history.navigate(
-					addQueryArgs( path, {
-						layout: newView.type,
-					} )
-				);
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView, history, path ]
-	);
+	const onChangeView = useEvent( ( newView ) => {
+		setView( newView );
+		if ( newView.type !== layout ) {
+			history.navigate(
+				addQueryArgs( path, {
+					layout: newView.type,
+				} )
+			);
+		}
+	} );
 
 	return (
 		<Page

test/e2e/specs/site-editor/templates.spec.js

@@ -40,4 +40,27 @@ test.describe( 'Templates', () => {
 			)
 		).toBeVisible();
 	} );
+
+	test( 'Persists filter/search when switching layout', async ( {
+		page,
+		admin,
+	} ) => {
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Templates' } ).click();
+
+		// Search templates
+		await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'Index' );
+
+		// Switch layout
+		await page.getByRole( 'button', { name: 'Layout' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Table' } ).click();
+
+		// Confirm the table is visible
+		await expect( page.getByRole( 'table' ) ).toContainText( 'Index' );
+
+		// The search should still contain the search term
+		await expect(
+			page.getByRole( 'searchbox', { name: 'Search' } )
+		).toHaveValue( 'Index' );
+	} );
 } );