Merge pull request #12619 from google/enhancement/12507-pdf-generation-button-and-sidesheet

Implement PDF Generation side sheet.

Author: aaemnnosttv

assets/js/components/DashboardMainApp.js

@@ -52,6 +52,8 @@ import CurrentSurveyPortal from './surveys/CurrentSurveyPortal';
 import MetricsSelectionPanel from './KeyMetrics/MetricsSelectionPanel';
 import UserSettingsSelectionPanel from './email-reporting/UserSettingsSelectionPanel';
 import PUESurveyTriggers from './email-reporting/PUESurveyTriggers';
+import PDFDownloadButton from './pdf-generation/PDFDownloadButton';
+import PDFSectionsSelectionPanel from './pdf-generation/PDFSectionsSelectionPanel';
 import WelcomeModal from './WelcomeModal';
 import SiteGoalsIntroModalBanner from '@/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner';
 import { useFeature } from '@/js/hooks/useFeature';
@@ -190,7 +192,7 @@ export default function DashboardMainApp() {
 	} );
 
 	const widgetContextOptions = {
-		modules: viewableModules ? viewableModules : undefined,
+		modules: viewableModules,
 	};
 
 	const isKeyMetricsActive = useSelect( ( select ) =>
@@ -260,6 +262,7 @@ export default function DashboardMainApp() {
 
 	const emailReportingEnabled = useFeature( 'proactiveUserEngagement' );
 	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
+	const pdfGenerationEnabled = useFeature( 'pdfGeneration' );
 	const showWelcomeModal = useSelect( ( select ) => {
 		if ( ! setupFlowRefreshEnabled ) {
 			return false;
@@ -297,10 +300,14 @@ export default function DashboardMainApp() {
 
 	useMonitorInternetConnection();
 
-	const isWelcomeTourActive = useSelect( ( select ) => {
+	const showSetupOverlays = useSelect( ( select ) => {
+		if ( hideSetupCTAs ) {
+			return false;
+		}
+
 		const currentTour = select( CORE_USER ).getCurrentTour();
 
-		return [
+		return ! [
 			WELCOME_TOUR.WITHOUT_ANALYTICS,
 			WELCOME_TOUR.WITH_ANALYTICS,
 		].includes( currentTour?.slug );
@@ -318,6 +325,7 @@ export default function DashboardMainApp() {
 			<Header showNavigation>
 				<EntitySearchInput />
 				<DateRangeSelector />
+				{ pdfGenerationEnabled && <PDFDownloadButton /> }
 				{ ! viewOnlyDashboard && <DashboardSharingSettingsButton /> }
 				<HelpMenu showFeatureTour />
 			</Header>
@@ -337,7 +345,7 @@ export default function DashboardMainApp() {
 					/>
 				) }
 
-				{ ! isWelcomeTourActive && ! hideSetupCTAs && (
+				{ showSetupOverlays && (
 					<Notifications
 						areaSlug={ NOTIFICATION_AREAS.OVERLAYS }
 						groupID={ NOTIFICATION_GROUPS.SETUP_CTAS }
@@ -407,6 +415,8 @@ export default function DashboardMainApp() {
 
 			{ showKeyMetricsSelectionPanel && <MetricsSelectionPanel /> }
 
+			{ pdfGenerationEnabled && <PDFSectionsSelectionPanel /> }
+
 			{ emailReportingEnabled && (
 				<Fragment>
 					<UserSettingsSelectionPanel />

assets/js/components/pdf-generation/PDFDownloadButton.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * PDFDownloadButton tests.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import {
+	createTestRegistry,
+	fireEvent,
+	render,
+} from '../../../../tests/js/test-utils';
+import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
+import { PDF_DOWNLOAD_PANEL_OPENED_KEY } from '@/js/components/pdf-generation/constants';
+import PDFDownloadButton from './PDFDownloadButton';
+
+describe( 'PDFDownloadButton', () => {
+	let registry: ReturnType< typeof createTestRegistry >;
+
+	beforeEach( () => {
+		registry = createTestRegistry();
+	} );
+
+	it( 'renders the button with the accessible label', () => {
+		const { getByLabelText } = render( <PDFDownloadButton />, {
+			registry,
+		} );
+
+		expect( getByLabelText( 'Download PDF report' ) ).toBeInTheDocument();
+	} );
+
+	it( 'toggles PDF_DOWNLOAD_PANEL_OPENED_KEY on click', () => {
+		const { getByLabelText } = render( <PDFDownloadButton />, {
+			registry,
+		} );
+
+		expect(
+			registry.select( CORE_UI ).getValue( PDF_DOWNLOAD_PANEL_OPENED_KEY )
+		).toBeUndefined();
+
+		fireEvent.click( getByLabelText( 'Download PDF report' ) );
+
+		expect(
+			registry.select( CORE_UI ).getValue( PDF_DOWNLOAD_PANEL_OPENED_KEY )
+		).toBe( true );
+
+		fireEvent.click( getByLabelText( 'Download PDF report' ) );
+
+		expect(
+			registry.select( CORE_UI ).getValue( PDF_DOWNLOAD_PANEL_OPENED_KEY )
+		).toBe( false );
+	} );
+} );

assets/js/components/pdf-generation/PDFDownloadButton.tsx

@@ -0,0 +1,65 @@
+/**
+ * PDFDownloadButton component.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { FC } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect, useDispatch, type Select } from 'googlesitekit-data';
+import { Button } from 'googlesitekit-components';
+import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
+import { PDF_DOWNLOAD_PANEL_OPENED_KEY } from '@/js/components/pdf-generation/constants';
+import DownloadIcon from '@/svg/icons/download.svg';
+
+const PDFDownloadButton: FC = () => {
+	const isOpen = useSelect(
+		( select: Select ) =>
+			select( CORE_UI ).getValue( PDF_DOWNLOAD_PANEL_OPENED_KEY ),
+		[]
+	);
+
+	const { setValue } = useDispatch( CORE_UI );
+
+	const togglePanel = useCallback( () => {
+		setValue( PDF_DOWNLOAD_PANEL_OPENED_KEY, ! isOpen );
+	}, [ isOpen, setValue ] );
+
+	return (
+		<Button
+			aria-label={ __( 'Download PDF report', 'google-site-kit' ) }
+			// @ts-expect-error - The `Button` component is not typed yet.
+			className="googlesitekit-pdf-download__button googlesitekit-header__dropdown googlesitekit-border-radius-round googlesitekit-button-icon"
+			onClick={ togglePanel }
+			icon={ <DownloadIcon width={ 20 } height={ 20 } /> }
+			tooltipEnterDelayInMS={ 500 }
+			tertiary
+		/>
+	);
+};
+
+export default PDFDownloadButton;

assets/js/components/pdf-generation/PDFSectionsSelectionPanel/Footer.tsx

@@ -0,0 +1,78 @@
+/**
+ * PDF Sections Selection Panel Footer.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { FC } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect, useDispatch, type Select } from 'googlesitekit-data';
+import { Button } from 'googlesitekit-components';
+import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
+import { PDF_GENERATING_KEY } from '@/js/components/pdf-generation/constants';
+
+interface FooterProps {
+	closePanel: () => void;
+	hasSelection: boolean;
+}
+
+const Footer: FC< FooterProps > = ( { closePanel, hasSelection } ) => {
+	const isGenerating = useSelect(
+		( select: Select ) => select( CORE_UI ).getValue( PDF_GENERATING_KEY ),
+		[]
+	);
+
+	const { setValue } = useDispatch( CORE_UI );
+
+	const onDownloadClick = useCallback( () => {
+		// Temporary stub: toggle the "generating" flag so the notice renders.
+		// To be replaced by the real orchestrator handoff in #12537.
+		setValue( PDF_GENERATING_KEY, true );
+	}, [ setValue ] );
+
+	return (
+		<footer className="googlesitekit-selection-panel-footer googlesitekit-pdf-download-panel__footer">
+			<div className="googlesitekit-selection-panel-footer__content">
+				<div className="googlesitekit-selection-panel-footer__actions">
+					{ /* @ts-expect-error - The `Button` component is not typed yet. */ }
+					<Button onClick={ closePanel } tertiary>
+						{ __( 'Cancel', 'google-site-kit' ) }
+					</Button>
+					{ /* @ts-expect-error - The `Button` component is not typed yet. */ }
+					<Button
+						onClick={ onDownloadClick }
+						disabled={ ! hasSelection || !! isGenerating }
+					>
+						{ __( 'Download report', 'google-site-kit' ) }
+					</Button>
+				</div>
+			</div>
+		</footer>
+	);
+};
+
+export default Footer;

assets/js/components/pdf-generation/PDFSectionsSelectionPanel/Header.tsx

@@ -0,0 +1,63 @@
+/**
+ * PDF Sections Selection Panel Header.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { FC } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { SelectionPanelHeader } from '@/js/components/SelectionPanel';
+import P from '@/js/components/Typography/P';
+
+interface HeaderProps {
+	closePanel: () => void;
+}
+
+const Header: FC< HeaderProps > = ( { closePanel } ) => {
+	return (
+		<SelectionPanelHeader
+			title={ __( 'Download your Site Kit report', 'google-site-kit' ) }
+			onCloseClick={ closePanel }
+		>
+			{ /* @ts-expect-error - The `P` component's `size` prop has a default for non-mobile devices and is not currently inferred as optional. */ }
+			<P>
+				{ __(
+					'Generate a PDF featuring the current metrics from your dashboard. The report reflects the same date range selected in your dashboard, excluding data from the current day to ensure accuracy.',
+					'google-site-kit'
+				) }
+			</P>
+			{ /* @ts-expect-error - The `P` component's `size` prop has a default for non-mobile devices and is not currently inferred as optional. */ }
+			<P>
+				{ __(
+					'Select the topics you would like to include in your report:',
+					'google-site-kit'
+				) }
+			</P>
+		</SelectionPanelHeader>
+	);
+};
+
+export default Header;