Merge branch 'report-builder-prototype-i2' into report-builder-prototype

Author: madebynoam

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

@@ -0,0 +1,57 @@
+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';
+
+export type SelectSiteButtonProps = {
+	onSiteSelect: ( siteId: number, siteDomain: string ) => void;
+	buttonLabel?: string;
+	modalTitle?: string;
+	modalSubtitle?: string;
+	trackingEvent?: string;
+	className?: string;
+};
+
+const SelectSiteButton = ( {
+	onSiteSelect,
+	buttonLabel,
+	modalTitle,
+	modalSubtitle,
+	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={ 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,65 @@
+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';
+
+type SelectSiteModalProps = {
+	onClose: () => void;
+	onSiteSelect: ( siteId: number, siteDomain: string ) => void;
+	title?: string;
+	subtitle?: string;
+};
+
+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/lib/constants.ts

@@ -57,6 +57,8 @@ export const A4A_WOOPAYMENTS_OVERVIEW_LINK = `${ A4A_WOOPAYMENTS_LINK }/overview
 export const A4A_REPORTS_LINK = '/reports';
 export const A4A_REPORTS_OVERVIEW_LINK = `${ A4A_REPORTS_LINK }/overview`;
 export const A4A_REPORTS_DASHBOARD_LINK = `${ A4A_REPORTS_LINK }/dashboard`;
+export const A4A_REPORTS_BUILD_LINK = `${ A4A_REPORTS_LINK }/build`;
+export const A4A_REPORTS_EXAMPLE_LINK = `${ A4A_REPORTS_LINK }/example`;
 
 // Client
 export const A4A_CLIENT_LANDING_LINK = '/client/landing';