Update types and dataviews in a4a project

client/a8c-for-agencies/components/items-dashboard/constants.ts

@@ -14,6 +14,5 @@ export const initialDataViewsState: DataViewsState = {
 	perPage: 50,
 	page: 1,
 	search: '',
-	hiddenFields: [],
 	layout: {},
 };

client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx

@@ -103,7 +103,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 				}
 				onSelectionChange={ data.onSelectionChange }
 				onChangeView={ data.setDataViewsState }
-				supportedLayouts={ [ 'table' ] }
+				defaultLayouts={ { table: {} } }
 				actions={ data.actions }
 				isLoading={ isLoading }
 			/>

client/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces.ts

@@ -1,4 +1,4 @@
-import type { View, Field, Action } from '@wordpress/dataviews';
+import type { View, Field, Action, SortDirection } from '@wordpress/dataviews';
 
 export interface ItemsDataViewsType< T > {
 	items: T[] | undefined;
@@ -21,7 +21,7 @@ export interface DataViewsPaginationInfo {
 
 export interface DataViewsSort {
 	field: string;
-	direction: 'asc' | 'desc' | '';
+	direction: SortDirection;
 }
 
 export interface DataViewsFilter {

client/a8c-for-agencies/sections/sites/needs-setup-sites/table.tsx

@@ -5,6 +5,7 @@ import TextPlaceholder from 'calypso/a8c-for-agencies/components/text-placeholde
 import { DataViews } from 'calypso/components/dataviews';
 import SiteSort from '../site-sort';
 import PlanField, { AvailablePlans } from './plan-field';
+import type { Field } from '@wordpress/dataviews';
 
 import './style.scss';
 
@@ -25,10 +26,11 @@ export default function NeedSetupTable( {
 }: Props ) {
 	const translate = useTranslate();
 
-	const fields = [
+	const fields: Field< AvailablePlans >[] = [
 		{
 			id: 'site',
-			header: (
+			// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
+			label: (
 				<SiteSort isSortable={ false } columnKey="site">
 					{ translate( 'Site' ).toUpperCase() }
 				</SiteSort>
@@ -54,24 +56,17 @@ export default function NeedSetupTable( {
 	];
 
 	return (
-		<DataViews
-			data={ isLoading ? [ {} ] : availablePlans }
+		<DataViews< AvailablePlans >
+			data={ isLoading ? [] : availablePlans }
 			paginationInfo={ { totalItems: 1, totalPages: 1 } }
 			fields={ fields }
 			view={ {
-				filters: [],
-				sort: {
-					field: '',
-					direction: 'asc',
-				},
 				type: DATAVIEWS_TABLE,
 				perPage: 1,
 				page: 1,
-				hiddenFields: [],
-				layout: {},
 			} }
 			search={ false }
-			supportedLayouts={ [ 'table' ] }
+			defaultLayouts={ { table: {} } }
 			actions={ [] }
 			isLoading={ false }
 		/>

client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx

@@ -11,6 +11,7 @@ import {
 } from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/types';
 import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD, filtersMap } from './constants';
 import SitesDashboardContext from './sites-dashboard-context';
+import type { Filter } from '@wordpress/dataviews';
 
 interface Props {
 	showOnlyFavoritesInitialState?: boolean;
@@ -27,14 +28,14 @@ interface Props {
 	featurePreview?: ReactNode | null;
 }
 
-const buildFilters = ( { issueTypes }: { issueTypes: string } ) => {
+const buildFilters = ( { issueTypes }: { issueTypes: string } ): Filter[] => {
 	const issueTypesArray = issueTypes?.split( ',' );
 
 	return (
 		issueTypesArray?.map( ( issueType ) => {
 			return {
 				field: 'status',
-				operator: 'in',
+				operator: 'is',
 				value: filtersMap.find( ( filterMap ) => filterMap.filterType === issueType )?.ref || 1,
 			};
 		} ) || []
@@ -82,9 +83,19 @@ export const SitesDashboardProvider = ( {
 		setCurrentLicenseInfo( null );
 	};
 
-	initialDataViewsState.sort.field = DEFAULT_SORT_FIELD;
-	initialDataViewsState.sort.direction = DEFAULT_SORT_DIRECTION;
-	initialDataViewsState.hiddenFields = [ 'status' ];
+	initialDataViewsState.sort = {
+		field: DEFAULT_SORT_FIELD,
+		direction: DEFAULT_SORT_DIRECTION,
+	};
+	initialDataViewsState.fields = [
+		'site',
+		'status',
+		'boost',
+		'backup',
+		'monitor',
+		'scan',
+		'plugins',
+	];
 
 	const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( {
 		...initialDataViewsState,

client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx

@@ -100,8 +100,8 @@ export default function SitesDashboard() {
 
 	const { data, isError, isLoading, refetch } = useFetchDashboardSites( {
 		isPartnerOAuthTokenLoaded: false,
-		searchQuery: dataViewsState.search,
-		currentPage: dataViewsState.page,
+		searchQuery: dataViewsState?.search ?? '',
+		currentPage: dataViewsState.page ?? 1,
 		filter: agencyDashboardFilter,
 		sort: dataViewsState.sort,
 		perPage: dataViewsState.perPage,
@@ -148,11 +148,11 @@ export default function SitesDashboard() {
 		const updatedUrl = updateSitesDashboardUrl( {
 			category: category,
 			setCategory: setCategory,
-			filters: dataViewsState.filters,
+			filters: dataViewsState.filters ?? [],
 			selectedSite: dataViewsState.selectedItem,
 			selectedSiteFeature: selectedSiteFeature,
-			search: dataViewsState.search,
-			currentPage: dataViewsState.page,
+			search: dataViewsState.search ?? '',
+			currentPage: dataViewsState.page ?? 1,
 			sort: dataViewsState.sort,
 			showOnlyFavorites,
 		} );

client/a8c-for-agencies/sections/sites/sites-dashboard/update-sites-dashboard-url.tsx

@@ -19,7 +19,7 @@ const buildQueryString = ( {
 	filters: Filter[];
 	search: string;
 	currentPage: number;
-	sort: DashboardSortInterface;
+	sort?: DashboardSortInterface;
 	showOnlyFavorites?: boolean;
 } ) => {
 	const urlQuery = new URLSearchParams();
@@ -34,8 +34,8 @@ const buildQueryString = ( {
 
 	// ASC is the default sort direction for the URL
 	if (
-		sort.field !== DEFAULT_SORT_FIELD ||
-		( sort.field === DEFAULT_SORT_FIELD && sort.direction !== DEFAULT_SORT_DIRECTION )
+		( sort && sort.field !== DEFAULT_SORT_FIELD ) ||
+		( sort && sort.field === DEFAULT_SORT_FIELD && sort.direction !== DEFAULT_SORT_DIRECTION )
 	) {
 		urlQuery.set( 'sort_field', sort.field );
 		urlQuery.set( 'sort_direction', sort.direction );
@@ -73,7 +73,7 @@ export const updateSitesDashboardUrl = ( {
 	selectedSiteFeature?: string;
 	search: string;
 	currentPage: number;
-	sort: DashboardSortInterface;
+	sort?: DashboardSortInterface;
 	showOnlyFavorites?: boolean;
 } ) => {
 	// We need a category in the URL if we have a selected site

client/a8c-for-agencies/sections/sites/sites-dataviews/index.tsx

@@ -460,7 +460,7 @@ const SitesDataViews = ( {
 					return item.site.value.blog_id.toString();
 				} }
 				onChangeView={ setDataViewsState }
-				supportedLayouts={ [ 'table' ] }
+				defaultLayouts={ { table: {} } }
 				actions={ [] } // Replace with actions when bulk selections are implemented.
 				isLoading={ isLoading }
 			/>

client/data/agency-dashboard/use-fetch-dashboard-sites.ts

@@ -23,7 +23,11 @@ const agencyDashboardFilterToQueryObject = ( filter: AgencyDashboardFilter ) =>
 	};
 };
 
-const agencyDashboardSortToQueryObject = ( sort: DashboardSortInterface ) => {
+const agencyDashboardSortToQueryObject = ( sort?: DashboardSortInterface ) => {
+	if ( ! sort ) {
+		return;
+	}
+
 	return {
 		...( sort?.field && { sort_field: sort.field } ),
 		...( sort?.direction && { sort_direction: sort.direction } ),
@@ -35,7 +39,7 @@ export interface FetchDashboardSitesArgsInterface {
 	searchQuery: string;
 	currentPage: number;
 	filter: AgencyDashboardFilter;
-	sort: DashboardSortInterface;
+	sort?: DashboardSortInterface;
 	perPage?: number;
 	agencyId?: number;
 }

client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dashboard-v2.tsx

@@ -90,19 +90,28 @@ export default function SitesDashboardV2() {
 			filter?.issueTypes?.map( ( issueType ) => {
 				return {
 					field: 'status',
-					operator: 'in',
+					operator: 'is',
 					value: filtersMap.find( ( filterMap ) => filterMap.filterType === issueType )?.ref || 1,
 				};
 			} ) || [],
-		hiddenFields: [ 'status' ],
-		layout: {},
+		fields: [
+			'site',
+			'stats',
+			'boost',
+			'backup',
+			'monitor',
+			'scan',
+			'plugins',
+			'favorite',
+			'actions',
+		],
 		selectedSite: undefined,
 	} );
 
 	const { data, isError, isLoading, refetch } = useFetchDashboardSites( {
 		isPartnerOAuthTokenLoaded,
 		searchQuery: search,
-		currentPage: sitesViewState.page,
+		currentPage: sitesViewState.page ?? 1,
 		filter,
 		sort,
 		perPage: sitesViewState.perPage,
@@ -148,7 +157,7 @@ export default function SitesDashboardV2() {
 		if ( path === '/sites?issue_types=all_issues' ) {
 			setSitesViewState( {
 				...sitesViewState,
-				filters: [ { field: 'status', operator: 'in', value: 1 } ],
+				filters: [ { field: 'status', operator: 'is', value: 1 } ],
 				search: '',
 				page: 1,
 			} );