MSD: add view persistence to deployments DataViews

client/dashboard/sites/deployments-list/dataviews/fields.tsx

@@ -19,11 +19,13 @@ import type { DeploymentRunWithDeploymentInfo } from '@automattic/api-core';
 import type { Field } from '@wordpress/dataviews';
 
 interface FilterOptions {
+	repositoryFilter?: string;
 	repositoryOptions: { value: string; label: string }[];
 	userNameOptions: { value: string; label: string }[];
 }
 
-export function useDeploymentFields( {
+export function useFields( {
+	repositoryFilter,
 	repositoryOptions = [],
 	userNameOptions = [],
 }: FilterOptions ): Field< DeploymentRunWithDeploymentInfo >[] {
@@ -32,13 +34,14 @@ export function useDeploymentFields( {
 	return useMemo(
 		() => [
 			{
-				id: 'repository_name',
+				id: 'repository',
 				label: __( 'Repository' ),
 				enableHiding: false,
 				enableGlobalSearch: true,
 				elements: repositoryOptions,
 				filterBy: {
 					operators: [ 'isAny' ],
+					...( repositoryFilter && { isPrimary: true } ),
 				},
 				getValue: ( { item } ) => item.repository_name,
 				render: ( { item } ) => {

client/dashboard/sites/deployments-list/dataviews/index.tsx

@@ -0,0 +1,2 @@
+export * from './fields';
+export * from './views';

client/dashboard/sites/deployments-list/dataviews/views.ts

@@ -1,21 +1,20 @@
-import type { SortDirection, View } from '@wordpress/dataviews';
+import type { SortDirection, SupportedLayouts, View } from '@wordpress/dataviews';
 
 export const DEFAULT_VIEW: View = {
 	type: 'table',
-	perPage: 25,
-	page: 1,
+	perPage: 20,
 	sort: {
 		field: 'created_on',
 		direction: 'desc' as SortDirection,
 	},
-	search: '',
-	filters: [],
-	fields: [ 'repository_name', 'commit', 'status', 'created_on' ],
-	layout: {},
+	fields: [ 'repository', 'commit', 'status', 'created_on' ],
+	layout: {
+		density: 'balanced',
+	},
 };
 
-export const DEFAULT_LAYOUTS = {
+export const DEFAULT_LAYOUTS: SupportedLayouts = {
 	table: {
-		titleField: 'repository_name',
+		titleField: 'repository',
 	},
 };

client/dashboard/sites/deployments-list/index.tsx

@@ -4,13 +4,13 @@ import {
 	codeDeploymentRunsQuery,
 } from '@automattic/api-queries';
 import { useSuspenseQuery, useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
 import { Button, Modal } from '@wordpress/components';
-import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { filterSortAndPaginate } from '@wordpress/dataviews';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, seen } from '@wordpress/icons';
 import { useState, useMemo } from 'react';
+import { DataViews, usePersistentView } from '../../app/dataviews';
 import {
 	siteRoute,
 	siteSettingsRepositoriesRoute,
@@ -21,40 +21,27 @@ import InlineSupportLink from '../../components/inline-support-link';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
 import RouterLinkButton from '../../components/router-link-button';
-import { useDeploymentFields } from './dataviews/fields';
-import { DEFAULT_VIEW, DEFAULT_LAYOUTS } from './dataviews/views';
+import { DEFAULT_VIEW, DEFAULT_LAYOUTS, useFields } from './dataviews';
 import { DeploymentLogsModalContent } from './deployment-logs/deployment-logs-modal-content';
 import { TriggerDeploymentModalForm } from './trigger-deployment-modal-form';
 import type {
 	DeploymentRun,
 	DeploymentRunWithDeploymentInfo,
 	CodeDeploymentData,
 } from '@automattic/api-core';
-import type { View } from '@wordpress/dataviews';
 
 function DeploymentsList() {
 	const { siteSlug } = siteRoute.useParams();
-	const navigate = useNavigate( { from: siteDeploymentsListRoute.fullPath } );
 	const currentSearchParams = siteDeploymentsListRoute.useSearch();
 	const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
 	const queryClient = useQueryClient();
 	const [ isModalTriggerDeploymentOpen, setIsModalTriggerDeploymentOpen ] = useState( false );
 	const closeModalTriggerDeployment = () => setIsModalTriggerDeploymentOpen( false );
-	const [ view, setView ] = useState< View >( () => {
-		const repositoryFilter = currentSearchParams?.repository;
-
-		return repositoryFilter
-			? {
-					...DEFAULT_VIEW,
-					filters: [
-						{
-							field: 'repository_name',
-							operator: 'isAny',
-							value: [ repositoryFilter ],
-						},
-					],
-			  }
-			: DEFAULT_VIEW;
+	const { view, updateView, resetView } = usePersistentView( {
+		slug: 'site-deployments',
+		defaultView: DEFAULT_VIEW,
+		queryParams: currentSearchParams,
+		queryParamFilterFields: [ 'repository' ],
 	} );
 	const { data: deployments = [], isLoading: isLoadingDeployments } = useQuery(
 		codeDeploymentsQuery( site.ID )
@@ -124,7 +111,8 @@ function DeploymentsList() {
 			} ) );
 	}, [ deploymentRuns ] );
 
-	const fields = useDeploymentFields( {
+	const fields = useFields( {
+		repositoryFilter: currentSearchParams?.repository,
 		repositoryOptions,
 		userNameOptions,
 	} );
@@ -135,21 +123,6 @@ function DeploymentsList() {
 		fields
 	);
 
-	const handleViewChange = ( nextView: View ) => {
-		const repositoryFilter = nextView.filters?.find(
-			( filter ) => filter.field === 'repository_name'
-		)?.value?.[ 0 ];
-
-		navigate( {
-			search: {
-				...currentSearchParams,
-				repository: repositoryFilter || undefined,
-			},
-		} );
-
-		setView( nextView );
-	};
-
 	const handleDeploymentTriggered = () => {
 		queryClient.invalidateQueries( {
 			queryKey: codeDeploymentsQuery( site.ID ).queryKey,
@@ -226,7 +199,8 @@ function DeploymentsList() {
 					data={ filteredData }
 					fields={ fields }
 					view={ view }
-					onChangeView={ handleViewChange }
+					onChangeView={ updateView }
+					onResetView={ resetView }
 					isLoading={ isLoading }
 					defaultLayouts={ DEFAULT_LAYOUTS }
 					paginationInfo={ paginationInfo }