Bulk Plugin Management: Use list view for small viewports

client/my-sites/plugins/plugin-management-v2/plugin-details-v2/sites-with-installed-plugin-list.tsx

@@ -1,7 +1,12 @@
+import { isDesktop, subscribeIsDesktop } from '@automattic/viewport';
 import { filterSortAndPaginate } from '@wordpress/dataviews';
 import { useTranslate } from 'i18n-calypso';
-import { useMemo, useState, useCallback } from 'react';
-import { initialDataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import {
+	DATAVIEWS_LIST,
+	DATAVIEWS_TABLE,
+	initialDataViewsState,
+} from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
 import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
 import { DataViews } from 'calypso/components/dataviews';
@@ -31,8 +36,10 @@ interface Props {
 export default function SitesWithInstalledPluginsList( { sites, plugin, isWpCom }: Props ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
+	const isDesktopView = isDesktop();
+	const shouldUseListView = ! isDesktopView;
 
-	const compareBooleans =
+	const compareBooleans = useCallback(
 		( fieldName: keyof PluginSite ) => ( a: SiteDetails, b: SiteDetails, direction: string ) => {
 			const aValue = plugin.sites[ a.ID ][ fieldName ];
 			const bValue = plugin.sites[ b.ID ][ fieldName ];
@@ -43,7 +50,9 @@ export default function SitesWithInstalledPluginsList( { sites, plugin, isWpCom
 				return aValue ? 1 : -1;
 			}
 			return aValue ? -1 : 1;
-		};
+		},
+		[ plugin ]
+	);
 
 	const renderActions = useCallback(
 		( site: SiteDetails ) => {
@@ -155,11 +164,12 @@ export default function SitesWithInstalledPluginsList( { sites, plugin, isWpCom
 				enableSorting: false,
 			},
 		],
-		[ translate, plugin, sites.length, dispatch, renderActions ]
+		[ translate, compareBooleans, plugin, sites.length, dispatch, renderActions ]
 	);
 
 	const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( () => ( {
 		...initialDataViewsState,
+		type: shouldUseListView ? DATAVIEWS_LIST : DATAVIEWS_TABLE,
 		fields: [ 'domain', 'activate', 'autoupdate', 'update', 'actions' ],
 		items: sites,
 	} ) );
@@ -168,6 +178,25 @@ export default function SitesWithInstalledPluginsList( { sites, plugin, isWpCom
 		getSitesWithSecondarySites( state, sites )
 	);
 
+	useEffect( () => {
+		// Sets the correct fields when route changes or viewport changes
+		setDataViewsState( ( dVwState ) => ( {
+			...dVwState,
+			type: shouldUseListView ? DATAVIEWS_LIST : DATAVIEWS_TABLE,
+		} ) );
+
+		// Subscribe to viewport changes
+		const unsubscribe = subscribeIsDesktop( ( matches ) => {
+			const shouldUseListView = ! matches;
+			setDataViewsState( ( dVwState ) => ( {
+				...dVwState,
+				type: shouldUseListView ? DATAVIEWS_LIST : DATAVIEWS_TABLE,
+			} ) );
+		} );
+
+		return () => unsubscribe();
+	}, [ plugin.slug, shouldUseListView ] );
+
 	if ( ! sitesWithSecondarySites?.length ) {
 		return null;
 	}

client/my-sites/plugins/plugin-management-v2/plugin-details-v2/style.scss

@@ -162,4 +162,13 @@
 			justify-content: flex-end;
 		}
 	}
+// Hiding this here because in this version the mediaField is not hiddable
+// https://github.com/WordPress/gutenberg/tree/d59faffa3d270dbc7716f653b4cdab6020812658/packages/dataviews#properties-of-layout
+// In future versions, a showMedia property can be used
+	.dataviews-view-list {
+		.dataviews-view-list__media-wrapper {
+			background-color: transparent;
+			display: none;
+		}
+	}
 }

client/my-sites/plugins/plugins-dashboard/index.tsx

@@ -47,6 +47,7 @@ import { PluginActionName, PluginActions, Site } from '../hooks/types';
 import { withShowPluginActionDialog } from '../hooks/use-show-plugin-action-dialog';
 import PluginAvailableOnSitesList from '../plugin-management-v2/plugin-details-v2/plugin-available-on-sites-list';
 import SitesWithInstalledPluginsList from '../plugin-management-v2/plugin-details-v2/sites-with-installed-plugin-list';
+import { PluginComponentProps } from '../plugin-management-v2/types';
 import PluginsListDataViews from '../plugins-list/plugins-list-dataviews';
 import type { SiteDetails } from '@automattic/data-stores';
 import type { Plugin } from 'calypso/state/plugins/installed/types';
@@ -115,8 +116,8 @@ const PluginsDashboard = ( {
 	const productsList = useSelector( ( state ) => getProductsList( state ) );
 	const { data: dotComPlugins }: { data: Plugin[] | undefined } = useWPCOMPluginsList( 'all' );
 	const allPlugins = useSelector( ( state ) =>
-		getPlugins( state, siteIds, 'all' ).map( ( plugin: Plugin ) => {
-			let dotComPluginData: Plugin | undefined;
+		getPlugins( state, siteIds, 'all' ).map( ( plugin: PluginComponentProps ) => {
+			let dotComPluginData: PluginComponentProps | undefined;
 			if ( dotComPlugins ) {
 				dotComPluginData = dotComPlugins.find(
 					( dotComPlugin ) => dotComPlugin.slug === plugin.slug

client/state/plugins/installed/types.ts

@@ -33,7 +33,6 @@ export type Plugin = {
 	wporg?: boolean;
 	status?: Array< number >;
 	allStatuses?: Array< CurrentSiteStatus >;
-	isMarketplaceProduct?: boolean;
 };
 
 export type PluginSite = {