Submit Tracks events on filter updates in sites dashboard

client/sites/components/sites-dataviews/index.tsx

@@ -1,9 +1,10 @@
 import { SiteExcerptData } from '@automattic/sites';
 import { DataViews, Field } from '@wordpress/dataviews';
 import { useI18n } from '@wordpress/react-i18n';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import JetpackLogo from 'calypso/components/jetpack-logo';
 import TimeSince from 'calypso/components/time-since';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { SitePlan } from 'calypso/sites-dashboard/components/sites-site-plan';
 import { useSelector } from 'calypso/state';
 import { getCurrentUserId } from 'calypso/state/current-user/selectors';
@@ -12,7 +13,7 @@ import SiteField from './dataviews-fields/site-field';
 import SiteIcon from './site-icon';
 import { SiteStats } from './sites-site-stats';
 import { SiteStatus } from './sites-site-status';
-import type { View } from '@wordpress/dataviews';
+import type { Filter, View } from '@wordpress/dataviews';
 
 import './style.scss';
 import './dataview-style.scss';
@@ -30,6 +31,19 @@ type Props = {
 	) => void;
 };
 
+type FieldId =
+	| 'icon'
+	| 'last-interacted'
+	| 'last-publish'
+	| 'plan'
+	| 'site-title'
+	| 'stats'
+	| 'status';
+
+type DotcomSitesField = Field< SiteExcerptData > & {
+	id: FieldId;
+};
+
 export function useSiteStatusGroups() {
 	const { __ } = useI18n();
 
@@ -88,7 +102,7 @@ const DotcomSitesDataViews = ( {
 	const siteStatusGroups = useSiteStatusGroups();
 
 	// Generate DataViews table field-columns
-	const fields = useMemo< Field< SiteExcerptData >[] >(
+	const fields = useMemo< DotcomSitesField[] >(
 		() => [
 			{
 				id: 'icon',
@@ -173,12 +187,63 @@ const DotcomSitesDataViews = ( {
 		viewType: dataViewsState.type,
 	} );
 
+	const getTracksEventDataForFilter = (
+		fieldId: FieldId,
+		value: any
+	): [ name: string, value: string ] | null => {
+		if ( value === undefined ) {
+			return null;
+		}
+
+		switch ( fieldId ) {
+			case 'status': {
+				const statusGroup = siteStatusGroups.find( ( group ) => group.value === value );
+				return [ 'calypso_sites_dashboard_filter_status', statusGroup?.slug ?? '' ];
+			}
+
+			case 'icon':
+			case 'last-interacted':
+			case 'last-publish':
+			case 'plan':
+			case 'site-title':
+			case 'stats':
+				return null;
+
+			default: {
+				// Ensures that the switch statement is exhaustive
+				const exhaustiveCheck: never = fieldId;
+				return exhaustiveCheck;
+			}
+		}
+	};
+
+	const previousViewFilters = useRef< Record< string, string > >( {} );
+
+	const submitTracksEventForFilters = ( filters: Filter[] ) => {
+		const filterTracksEvents = filters
+			.map( ( filter ) => getTracksEventDataForFilter( filter.field as FieldId, filter.value ) )
+			.filter( ( filter ) => filter !== null );
+
+		filterTracksEvents.forEach( ( [ name, value ] ) => {
+			if ( previousViewFilters.current[ name ] !== value ) {
+				recordTracksEvent( name, {
+					value: value,
+				} );
+			}
+		} );
+
+		previousViewFilters.current = Object.fromEntries( filterTracksEvents );
+	};
+
 	return (
 		<div className="sites-dataviews">
 			<DataViews
 				data={ sites }
 				fields={ fields }
-				onChangeView={ ( newView ) => setDataViewsState( () => newView ) }
+				onChangeView={ ( newView ) => {
+					submitTracksEventForFilters( newView.filters ?? [] );
+					setDataViewsState( () => newView );
+				} }
 				view={ dataViewsState }
 				actions={ actions }
 				search