Bulk Plugin Management: Use list view for small viewports (#98551)

* Bulk Plugin Management: Use list view for small viewports

This also removes one property for a type

This is the initial implementation to be updated

* Remove media wrapper in list view

* Use domain as primary field for list view

* Update styles to small viewports

client/my-sites/plugins/plugin-activate-toggle/style.scss

@@ -49,13 +49,18 @@
 }
 
 .plugin-row-formatter__toggle {
-	.plugin-autoupdate-toggle {
+	.components-flex.components-h-stack {
+		flex-direction: row-reverse;
 		.plugin-action__label {
-			@include break-xlarge() {
+			@include break-large() {
 				// We don't want to use display: none here, because it will hide the popover icon
 				// that might contain useful details about why the action is disabled.
 				font-size: 0;
 			}
+		}
+	}
+	.plugin-autoupdate-toggle {
+		.plugin-action__label {
 			.plugin-action__disabled-info {
 				color: var(--studio-gray-40);
 			}

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,19 +164,41 @@ 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,
+		layout: {
+			primaryField: 'domain',
+		},
 	} ) );
 
 	const sitesWithSecondarySites = useSelector( ( state ) =>
 		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

@@ -153,13 +153,31 @@
 		td:first-child .dataviews-view-table__cell-content-wrapper > span {
 			flex-grow: 1;
 
-			.plugin-row-formatter__overlay {
-				display: none;
-			}
 		}
 
 		td:last-child .dataviews-view-table__cell-content-wrapper {
 			justify-content: flex-end;
 		}
 	}
+
+	.plugin-row-formatter__overlay {
+		display: none;
+	}
+
+	.dataviews-view-list {
+		// 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__media-wrapper {
+			background-color: transparent;
+			display: none;
+		}
+		.dataviews-view-list__field-wrapper {
+			width: 100%;
+			.dataviews-view-list__field:last-child {
+				margin-left: auto;
+				order: 0;
+			}
+		}
+	}
 }

client/my-sites/plugins/plugin-management-v2/plugin-row-formatter/index.tsx

@@ -213,7 +213,6 @@ export default function PluginRowFormatter( {
 				<div className="plugin-row-formatter__toggle">
 					<PluginActivateToggle
 						isJetpackCloud
-						hideLabel={ ! isSmallScreen }
 						plugin={ pluginOnSite }
 						site={ selectedSite }
 						disabled={ !! item?.isSelectable }
@@ -225,7 +224,6 @@ export default function PluginRowFormatter( {
 				<div className="plugin-row-formatter__toggle">
 					<PluginAutoupdateToggle
 						plugin={ pluginOnSite }
-						hideLabel
 						site={ selectedSite }
 						wporg={ !! item.wporg }
 						isMarketplaceProduct={ isFromMarketplace }

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 = {