Add subscribers-dataviews flag and component.

client/my-sites/subscribers/components/subscriber-data-views/index.ts

@@ -0,0 +1 @@
+export { default as SubscriberDataViews } from './subscriber-data-views';

client/my-sites/subscribers/components/subscriber-data-views/style.scss

@@ -0,0 +1,5 @@
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/dataviews/build-style/style.css';
+@import 'calypso/assets/stylesheets/shared/mixins/hide-content-accessibly';

client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx

@@ -0,0 +1,167 @@
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
+import TimeSince from 'calypso/components/time-since';
+import { EmptyListView } from 'calypso/my-sites/subscribers/components/empty-list-view';
+import { SubscriberLaunchpad } from 'calypso/my-sites/subscribers/components/subscriber-launchpad';
+import { useSubscribersPage } from 'calypso/my-sites/subscribers/components/subscribers-page/subscribers-page-context';
+import { Subscriber } from 'calypso/my-sites/subscribers/types';
+import { useSelector } from 'calypso/state';
+import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
+import { isSimpleSite } from 'calypso/state/sites/selectors';
+import type { View, Field, Action } from '@wordpress/dataviews';
+import './style.scss';
+
+type SubscriberDataViewsProps = {
+	siteId: number | null;
+	onClickView: ( subscriber: Subscriber ) => void;
+	onClickUnsubscribe: ( subscriber: Subscriber ) => void;
+	onGiftSubscription: ( subscriber: Subscriber ) => void;
+};
+
+const SubscriberDataViews = ( {
+	siteId,
+	onClickView,
+	onClickUnsubscribe,
+}: SubscriberDataViewsProps ) => {
+	const translate = useTranslate();
+	const {
+		grandTotal,
+		page,
+		pageChangeCallback,
+		searchTerm,
+		isLoading,
+		subscribers,
+		pages,
+		isOwnerSubscribed,
+		perPage,
+		setPerPage,
+	} = useSubscribersPage();
+
+	const isSimple = useSelector( isSimpleSite );
+	const isAtomic = useSelector( ( state ) => isAtomicSite( state, siteId ) );
+	const EmptyComponent = isSimple || isAtomic ? SubscriberLaunchpad : EmptyListView;
+	const shouldShowLaunchpad =
+		! isLoading && ! searchTerm && ( ! grandTotal || ( grandTotal === 1 && isOwnerSubscribed ) );
+
+	const fields = useMemo< Field< Subscriber >[] >(
+		() => [
+			{
+				id: 'name',
+				label: translate( 'Name' ),
+				getValue: ( { item }: { item: Subscriber } ) => item.display_name,
+				render: ( { item }: { item: Subscriber } ) => (
+					<button onClick={ () => onClickView( item ) }>
+						{ item.display_name || item.email_address }
+					</button>
+				),
+				enableHiding: false,
+				enableSorting: true,
+			},
+			{
+				id: 'subscription_type',
+				label: translate( 'Subscription type' ),
+				getValue: ( { item }: { item: Subscriber } ) =>
+					item.user_id === 0
+						? translate( 'Email subscriber' )
+						: translate( 'WordPress.com follower' ),
+				render: ( { item }: { item: Subscriber } ) =>
+					item.user_id === 0
+						? translate( 'Email subscriber' )
+						: translate( 'WordPress.com follower' ),
+				enableHiding: false,
+				enableSorting: true,
+			},
+			{
+				id: 'date_subscribed',
+				label: translate( 'Since' ),
+				getValue: ( { item }: { item: Subscriber } ) => item.date_subscribed,
+				render: ( { item }: { item: Subscriber } ) => <TimeSince date={ item.date_subscribed } />,
+				enableHiding: false,
+				enableSorting: true,
+			},
+		],
+		[ translate, onClickView ]
+	);
+
+	const actions = useMemo< Action< Subscriber >[] >(
+		() => [
+			{
+				id: 'view',
+				label: translate( 'View' ),
+				callback: ( items: Subscriber[] ) => onClickView( items[ 0 ] ),
+				isPrimary: true,
+			},
+			{
+				id: 'remove',
+				label: translate( 'Remove' ),
+				callback: ( items: Subscriber[] ) => onClickUnsubscribe( items[ 0 ] ),
+			},
+		],
+		[ translate, onClickView, onClickUnsubscribe ]
+	);
+
+	const currentView = useMemo< View >(
+		() => ( {
+			type: 'table',
+			layout: {},
+			search: searchTerm,
+			page,
+			perPage,
+			sort: { field: 'date_subscribed', direction: 'desc' },
+		} ),
+		[ searchTerm, page, perPage ]
+	);
+
+	const handleViewChange = ( newView: View ) => {
+		if ( typeof newView.page === 'number' && newView.page !== page ) {
+			pageChangeCallback( newView.page );
+		}
+
+		if ( typeof newView.perPage === 'number' && newView.perPage !== perPage ) {
+			setPerPage( newView.perPage );
+			pageChangeCallback( 1 );
+		}
+	};
+
+	const { data, paginationInfo } = useMemo( () => {
+		const result = filterSortAndPaginate< Subscriber >(
+			subscribers,
+			{
+				...currentView,
+				page: 1,
+				perPage: subscribers.length,
+			},
+			fields
+		);
+
+		return {
+			data: result.data,
+			paginationInfo: {
+				totalItems: grandTotal,
+				totalPages: pages ?? 0,
+			},
+		};
+	}, [ subscribers, currentView, fields, grandTotal, pages ] );
+
+	return (
+		<section className="subscriber-data-views">
+			<DataViews< Subscriber >
+				data={ data }
+				fields={ fields }
+				view={ currentView }
+				onChangeView={ handleViewChange }
+				isLoading={ isLoading }
+				paginationInfo={ paginationInfo }
+				getItemId={ ( item: Subscriber ) => item.subscription_id.toString() }
+				defaultLayouts={ { table: {} } }
+				actions={ actions }
+				search
+				searchLabel={ translate( 'Search by name, username or email…' ) }
+			/>
+			{ shouldShowLaunchpad && <EmptyComponent /> }
+		</section>
+	);
+};
+
+export default SubscriberDataViews;

client/my-sites/subscribers/main.tsx

@@ -1,3 +1,4 @@
+import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { Button, Gridicon } from '@automattic/components';
 import { HelpCenter, Subscriber as SubscriberDataStore } from '@automattic/data-stores';
@@ -15,6 +16,7 @@ import NavigationHeader from 'calypso/components/navigation-header';
 import SubscriberValidationGate from 'calypso/components/subscribers-validation-gate';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
 import GiftSubscriptionModal from 'calypso/my-sites/subscribers/components/gift-modal/gift-modal';
+import { SubscriberDataViews } from 'calypso/my-sites/subscribers/components/subscriber-data-views';
 import { SubscriberListContainer } from 'calypso/my-sites/subscribers/components/subscriber-list-container';
 import {
 	SubscribersPageProvider,
@@ -201,12 +203,23 @@ const SubscribersPage = ( {
 					disableCta={ isUnverified || isStagingSite }
 				/>
 				<SubscriberValidationGate siteId={ siteId }>
-					<SubscriberListContainer
-						siteId={ siteId }
-						onClickView={ onClickView }
-						onGiftSubscription={ onGiftSubscription }
-						onClickUnsubscribe={ onClickUnsubscribe }
-					/>
+					{ isEnabled( 'subscribers-dataviews' ) ? (
+						// Your new dataviews component
+						<SubscriberDataViews
+							siteId={ siteId }
+							onClickView={ onClickView }
+							onGiftSubscription={ onGiftSubscription }
+							onClickUnsubscribe={ onClickUnsubscribe }
+						/>
+					) : (
+						// Existing subscriber list
+						<SubscriberListContainer
+							siteId={ siteId }
+							onClickView={ onClickView }
+							onGiftSubscription={ onGiftSubscription }
+							onClickUnsubscribe={ onClickUnsubscribe }
+						/>
+					) }
 
 					<UnsubscribeModal
 						subscriber={ currentSubscriber }