WIP (DO NOT MERGE): A4A Report builder prototype

client/a8c-for-agencies/components/select-site-button/button.tsx

@@ -0,0 +1,60 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import { useCallback, useState } from 'react';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import SelectSiteModal from './modal';
+import type { ReactNode } from 'react';
+
+export type SelectSiteButtonProps = {
+	onSiteSelect: ( siteId: number, siteDomain: string ) => void;
+	buttonLabel?: string;
+	modalTitle?: string;
+	modalSubtitle?: string;
+	helpText?: ReactNode;
+	trackingEvent?: string;
+	className?: string;
+};
+
+const SelectSiteButton = ( {
+	onSiteSelect,
+	buttonLabel,
+	modalTitle,
+	modalSubtitle,
+	helpText,
+	trackingEvent = 'calypso_select_site_button_click',
+	className,
+}: SelectSiteButtonProps ) => {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const handleOpenModal = useCallback( () => {
+		setIsOpen( true );
+		dispatch( recordTracksEvent( trackingEvent ) );
+	}, [ dispatch, trackingEvent ] );
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				onClick={ handleOpenModal }
+				className={ className }
+			>
+				{ buttonLabel || translate( 'Select a site' ) }
+			</Button>
+
+			{ isOpen && (
+				<SelectSiteModal
+					onClose={ () => setIsOpen( false ) }
+					onSiteSelect={ onSiteSelect }
+					title={ modalTitle }
+					subtitle={ helpText || modalSubtitle }
+				/>
+			) }
+		</>
+	);
+};
+
+export default SelectSiteButton;

client/a8c-for-agencies/components/select-site-button/index.tsx

@@ -0,0 +1,4 @@
+import './style.scss';
+
+export { default } from './button';
+export type { SelectSiteButtonProps } from './button';

client/a8c-for-agencies/components/select-site-button/modal.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import A4AModal from 'calypso/a8c-for-agencies/components/a4a-modal';
+import { A4A_SITES_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import SelectSiteTable, { type SiteItem } from './site-table';
+import type { ReactNode } from 'react';
+
+type SelectSiteModalProps = {
+	onClose: () => void;
+	onSiteSelect: ( siteId: number, siteDomain: string ) => void;
+	title?: string;
+	subtitle?: ReactNode;
+};
+
+const SelectSiteModal = ( { onClose, onSiteSelect, title, subtitle }: SelectSiteModalProps ) => {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const [ selectedSite, setSelectedSite ] = useState< SiteItem | null >( null );
+
+	const handleSelectSite = () => {
+		if ( selectedSite ) {
+			onSiteSelect( selectedSite.id, selectedSite.site );
+			onClose();
+		}
+	};
+
+	return (
+		<A4AModal
+			title={ title || translate( 'Select a site' ) }
+			subtile={
+				subtitle ||
+				translate(
+					"If you don't see the site in the list, connect it first via the {{a}}Sites Dashboard{{/a}}.",
+					{
+						components: {
+							a: (
+								<a
+									href={ A4A_SITES_LINK }
+									onClick={ () =>
+										dispatch(
+											recordTracksEvent( 'calypso_select_site_modal_sites_dashboard_click' )
+										)
+									}
+								/>
+							),
+						},
+					}
+				)
+			}
+			onClose={ onClose }
+			extraActions={
+				<Button variant="primary" onClick={ handleSelectSite } disabled={ ! selectedSite }>
+					{ translate( 'Select site' ) }
+				</Button>
+			}
+		>
+			<SelectSiteTable setSelectedSite={ setSelectedSite } selectedSite={ selectedSite } />
+		</A4AModal>
+	);
+};
+
+export default SelectSiteModal;

client/a8c-for-agencies/components/select-site-button/site-table.tsx

@@ -0,0 +1,91 @@
+import { filterSortAndPaginate } from '@wordpress/dataviews';
+import { useTranslate } from 'i18n-calypso';
+import { useCallback, useMemo, useState } from 'react';
+import A4ATablePlaceholder from 'calypso/a8c-for-agencies/components/a4a-table-placeholder';
+import { initialDataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
+import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews';
+import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
+import {
+	useFetchAllManagedSites,
+	type SiteItem,
+} from 'calypso/a8c-for-agencies/sections/migrations/hooks/use-fetch-all-managed-sites';
+import FormRadio from 'calypso/components/forms/form-radio';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+
+type SelectSiteTableProps = {
+	selectedSite: SiteItem | null;
+	setSelectedSite: ( site: SiteItem | null ) => void;
+};
+
+const SelectSiteTable = ( { selectedSite, setSelectedSite }: SelectSiteTableProps ) => {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const { items, isLoading } = useFetchAllManagedSites();
+
+	const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( {
+		...initialDataViewsState,
+		fields: [ 'site' ],
+	} );
+
+	const onSelectSite = useCallback(
+		( item: SiteItem ) => {
+			setSelectedSite( item );
+			dispatch( recordTracksEvent( 'calypso_select_site_table_select_site_click' ) );
+		},
+		[ dispatch, setSelectedSite ]
+	);
+
+	const fields = useMemo( () => {
+		const siteColumn = {
+			id: 'site',
+			label: translate( 'Site' ),
+			getValue: ( { item }: { item: SiteItem } ) => item.site,
+			render: ( { item }: { item: SiteItem } ) => (
+				<div>
+					<FormRadio
+						htmlFor={ `site-${ item.id }` }
+						id={ `site-${ item.id }` }
+						checked={ selectedSite?.id === item.id }
+						onChange={ () => onSelectSite( item ) }
+						label={ item.site }
+					/>
+				</div>
+			),
+			enableGlobalSearch: true,
+			enableHiding: false,
+			enableSorting: false,
+		};
+
+		return [ siteColumn ];
+	}, [ onSelectSite, selectedSite?.id, translate ] );
+
+	const { data: allSites, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( items as SiteItem[], dataViewsState, fields );
+	}, [ items, dataViewsState, fields ] );
+
+	return (
+		<div className="redesigned-a8c-table show-overflow-overlay search-enabled">
+			{ isLoading ? (
+				<A4ATablePlaceholder />
+			) : (
+				<ItemsDataViews
+					data={ {
+						items: allSites,
+						fields,
+						getItemId: ( item ) => `${ item.id }`,
+						pagination: paginationInfo,
+						enableSearch: true,
+						actions: [],
+						dataViewsState: dataViewsState,
+						setDataViewsState: setDataViewsState,
+						defaultLayouts: { table: {} },
+					} }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default SelectSiteTable;

client/a8c-for-agencies/components/select-site-button/style.scss

@@ -0,0 +1,11 @@
+.redesigned-a8c-table {
+	&.show-overflow-overlay {
+		overflow: visible;
+	}
+
+	&.search-enabled {
+		.dataviews-module__table-header {
+			padding-top: 16px;
+		}
+	}
+}

client/a8c-for-agencies/components/sidebar-menu/hooks/use-main-menu-items.tsx

@@ -11,6 +11,7 @@ import {
 	people,
 	starEmpty,
 	plugins,
+	chartBar,
 } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
@@ -36,16 +37,20 @@ import {
 	A4A_AGENCY_TIER_LINK,
 	A4A_MIGRATIONS_OVERVIEW_LINK,
 	A4A_WOOPAYMENTS_LINK,
+	A4A_REPORTS_LINK,
+	A4A_REPORTS_OVERVIEW_LINK,
+	A4A_REPORTS_DASHBOARD_LINK,
 } from '../lib/constants';
 import { createItem } from '../lib/utils';
+import type { SidebarMenuItem } from '../lib/types';
 
 const useMainMenuItems = ( path: string ) => {
 	const translate = useTranslate();
 
 	const agency = useSelector( getActiveAgency );
 
 	const menuItems = useMemo( () => {
-		let referralItems = [] as any[];
+		let referralItems = [] as SidebarMenuItem[];
 
 		if ( isSectionNameEnabled( 'a8c-for-agencies-referrals' ) ) {
 			referralItems = [
@@ -73,7 +78,22 @@ const useMainMenuItems = ( path: string ) => {
 					},
 					withChevron: true,
 			  }
-			: {};
+			: ( {} as SidebarMenuItem );
+
+		const reportsSubMenuItems: SidebarMenuItem[] = [
+			{
+				icon: home,
+				link: A4A_REPORTS_OVERVIEW_LINK,
+				title: translate( 'Overview' ),
+				trackEventProps: { menu_item: 'Automattic for Agencies / Reports / Overview' },
+			},
+			{
+				icon: category,
+				link: A4A_REPORTS_DASHBOARD_LINK,
+				title: translate( 'Dashboard' ),
+				trackEventProps: { menu_item: 'Automattic for Agencies / Reports / Dashboard' },
+			},
+		];
 
 		return [
 			{
@@ -119,12 +139,13 @@ const useMainMenuItems = ( path: string ) => {
 			migrationMenuItem,
 			{
 				icon: <img src={ wooPaymentsIcon } alt="WooPayments" />,
-				path: '/',
+				path: A4A_WOOPAYMENTS_LINK,
 				link: A4A_WOOPAYMENTS_LINK,
 				title: translate( 'WooPayments' ),
 				trackEventProps: {
 					menu_item: 'Automattic for Agencies / WooPayments',
 				},
+				withChevron: true,
 			},
 			...( isSectionNameEnabled( 'a8c-for-agencies-plugins' )
 				? [
@@ -139,6 +160,22 @@ const useMainMenuItems = ( path: string ) => {
 						},
 				  ]
 				: [] ),
+			{
+				icon: chartBar,
+				path: A4A_REPORTS_LINK,
+				link: A4A_REPORTS_OVERVIEW_LINK,
+				title: (
+					<>
+						{ translate( 'Reports' ) }
+						<span className="sidebar-menu__beta-badge">{ translate( 'Beta' ) }</span>
+					</>
+				),
+				trackEventProps: {
+					menu_item: 'Automattic for Agencies / Reports',
+				},
+				withChevron: true,
+				subMenuItems: reportsSubMenuItems.map( ( item ) => createItem( item, path ) ),
+			},
 			...( config.isEnabled( 'a4a-partner-directory' ) ||
 			config.isEnabled( 'a8c-for-agencies-agency-tier' )
 				? [
@@ -194,7 +231,8 @@ const useMainMenuItems = ( path: string ) => {
 				: [] ),
 		]
 			.map( ( item ) => createItem( item, path ) )
-			.filter( ( item ) => isPathAllowed( item.link, agency ) );
+			.filter( ( item ) => isPathAllowed( item.link, agency ) )
+			.filter( Boolean ) as SidebarMenuItem[];
 	}, [ agency, path, translate ] );
 	return menuItems;
 };

client/a8c-for-agencies/components/sidebar-menu/hooks/use-reports-menu-items.tsx

@@ -0,0 +1,50 @@
+import { category, home } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
+import {
+	A4A_REPORTS_LINK,
+	A4A_REPORTS_DASHBOARD_LINK,
+	A4A_REPORTS_OVERVIEW_LINK,
+} from '../lib/constants';
+import { createItem } from '../lib/utils';
+
+const useReportsMenuItems = ( path: string ) => {
+	const translate = useTranslate();
+
+	const menuItems = useMemo( () => {
+		return [
+			createItem(
+				{
+					icon: home,
+					path: A4A_REPORTS_LINK,
+					link: A4A_REPORTS_OVERVIEW_LINK,
+					title: translate( 'Overview' ),
+					trackEventProps: {
+						menu_item: 'Automattic for Agencies / Reports / Overview',
+					},
+				},
+				path
+			),
+			createItem(
+				{
+					icon: category,
+					path: A4A_REPORTS_LINK,
+					link: A4A_REPORTS_DASHBOARD_LINK,
+					title: translate( 'Dashboard' ),
+					trackEventProps: {
+						menu_item: 'Automattic for Agencies / Reports / Dashboard',
+					},
+				},
+				path
+			),
+		]
+			.map( ( item ) => createItem( item, path ) )
+			.map( ( item ) => ( {
+				...item,
+				isSelected: item.link === path,
+			} ) );
+	}, [ path, translate ] );
+	return menuItems;
+};
+
+export default useReportsMenuItems;