Merge remote-tracking branch 'origin/develop' into enhancement/9344-a…

…crsubtlenotification-component.

assets/js/components/KeyMetrics/MetricTileNumeric.stories.js

@@ -71,6 +71,48 @@ ZeroChange.scenario = {
 	delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	title: 'New Visitors',
+	metricValue: 0,
+	subText: 'of 0 total visitors',
+	currentValue: 0,
+	previousValue: 0,
+};
+// Since the "Zero" state is similar for all "numeric" KMW tiles, this should be
+// the sole scenario and should not be added to any other "numeric" type KMW components.
+ZeroData.scenario = {
+	label: 'KeyMetrics/MetricTileNumeric/ZeroData',
+	delay: 250,
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+	title: 'New Visitors',
+	metricValue: 0,
+	subText: 'of 0 total visitors',
+	currentValue: 0,
+	previousValue: 0,
+	loading: true,
+};
+// Since the "Loading" state is the same for all KMW tiles, this is the sole scenario
+// and should not be added to any other generic `MetricTile___` or KMW component.
+Loading.scenario = {
+	label: 'KeyMetrics/MetricTileNumeric/Loading',
+};
+Loading.decorators = [
+	( Story ) => {
+		// Ensure the animation is paused for VRT tests to correctly capture the loading state.
+		return (
+			<div className="googlesitekit-vrt-animation-paused">
+				<Story />
+			</div>
+		);
+	},
+];
+
 export default {
 	title: 'Key Metrics/WidgetTiles/MetricTileNumeric',
 	component: MetricTileNumeric,

assets/js/components/KeyMetrics/MetricTileTable.stories.js

@@ -104,6 +104,8 @@ ZeroData.args = {
 		return <div>No data available</div>;
 	},
 };
+// Since the "Zero" state is similar for all "tabular" KMW tiles, this should be
+// the sole scenario and should not be added to any other "table" type KMW components.
 ZeroData.scenario = {
 	label: 'KeyMetrics/MetricTileTable/ZeroData',
 	delay: 250,

assets/js/components/KeyMetrics/MetricTileText.stories.js

@@ -71,6 +71,22 @@ ZeroChange.scenario = {
 	delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	title: 'Most engaged traffic source',
+	metricValue: '-',
+	subText: '0% of engaged sessions',
+	currentValue: 0,
+	previousValue: 0,
+};
+// Since the "Zero" state is similar for all "textual" KMW tiles, this should be
+// the sole scenario and should not be added to any other "text" type KMW components.
+ZeroData.scenario = {
+	label: 'KeyMetrics/MetricTileText/ZeroData',
+	delay: 250,
+};
+
 export const Loading = Template.bind( {} );
 Loading.storyName = 'Loading';
 Loading.args = {

assets/js/components/setup/ModuleSetup.js

@@ -50,6 +50,7 @@ export default function ModuleSetup( { moduleSlug } ) {
 	);
 
 	const registry = useRegistry();
+
 	/**
 	 * When module setup done, we redirect the user to Site Kit dashboard.
 	 *
@@ -85,6 +86,12 @@ export default function ModuleSetup( { moduleSlug } ) {
 		[ registry, navigateTo, moduleSlug ]
 	);
 
+	const onCompleteSetup = module?.onCompleteSetup;
+	const onCompleteSetupCallback = useCallback(
+		() => onCompleteSetup( registry, finishSetup ),
+		[ onCompleteSetup, registry, finishSetup ]
+	);
+
 	const onCancelButtonClick = useCallback( async () => {
 		await trackEvent( 'moduleSetup', 'cancel_module_setup', moduleSlug );
 	}, [ moduleSlug ] );
@@ -129,6 +136,11 @@ export default function ModuleSetup( { moduleSlug } ) {
 								<ModuleSetupFooter
 									module={ module }
 									onCancel={ onCancelButtonClick }
+									onComplete={
+										typeof onCompleteSetup === 'function'
+											? onCompleteSetupCallback
+											: undefined
+									}
 								/>
 							</section>
 						</Cell>

assets/js/components/setup/ModuleSetupFooter.js

@@ -20,11 +20,13 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -33,24 +35,45 @@ import { useSelect } from 'googlesitekit-data';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { Cell, Grid, Row } from '../../material-components';
 import Link from '../Link';
+import { SpinnerButton } from 'googlesitekit-components';
+import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+
+export default function ModuleSetupFooter( { module, onCancel, onComplete } ) {
+	const [ isSaving, setIsSaving ] = useState( false );
 
-export default function ModuleSetupFooter( { module, onCancel } ) {
 	const settingsPageURL = useSelect( ( select ) =>
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' )
 	);
 	const isSetupBlocked = useSelect( ( select ) =>
 		select( module?.storeName )?.isSetupBlocked?.()
 	);
 
+	const canSubmitChanges = useSelect( ( select ) =>
+		select( CORE_MODULES ).canSubmitChanges( module?.slug )
+	);
+
+	const onCompleteSubmit = useCallback( async () => {
+		setIsSaving( true );
+
+		await onComplete();
+
+		setIsSaving( false );
+	}, [ setIsSaving, onComplete ] );
+
 	if ( ! module ) {
 		return null;
 	}
 
 	return (
-		<div className="googlesitekit-setup__footer">
+		<div
+			className={ classnames(
+				'googlesitekit-setup__footer',
+				`googlesitekit-setup__footer--${ module?.slug }`
+			) }
+		>
 			<Grid>
 				<Row>
-					<Cell smSize={ 2 } mdSize={ 4 } lgSize={ 6 }>
+					<Cell alignMiddle smSize={ 2 } mdSize={ 4 } lgSize={ 6 }>
 						<Link
 							id={ `setup-${ module.slug }-cancel` }
 							href={ settingsPageURL }
@@ -61,6 +84,18 @@ export default function ModuleSetupFooter( { module, onCancel } ) {
 								: __( 'Cancel', 'google-site-kit' ) }
 						</Link>
 					</Cell>
+					{ onComplete && (
+						<Cell alignRight smSize={ 2 } mdSize={ 4 } lgSize={ 6 }>
+							<SpinnerButton
+								id={ `setup-${ module.slug }-complete` }
+								onClick={ onCompleteSubmit }
+								disabled={ ! canSubmitChanges || isSaving }
+								isSaving={ isSaving }
+							>
+								{ __( 'Complete Setup', 'google-site-kit' ) }
+							</SpinnerButton>
+						</Cell>
+					) }
 				</Row>
 			</Grid>
 		</div>
@@ -73,4 +108,5 @@ ModuleSetupFooter.propTypes = {
 		storeName: PropTypes.string.isRequired,
 	} ).isRequired,
 	onCancel: PropTypes.func.isRequired,
+	onComplete: PropTypes.func,
 };

assets/js/googlesitekit/modules/datastore/modules.js

@@ -80,6 +80,7 @@ const moduleDefaults = {
 	SettingsViewComponent: null,
 	SettingsSetupIncompleteComponent: DefaultSettingsSetupIncomplete,
 	SetupComponent: null,
+	onCompleteSetup: undefined,
 	checkRequirements: () => true,
 	DashboardMainEffectComponent: null,
 	DashboardEntityEffectComponent: null,
@@ -342,6 +343,7 @@ const baseActions = {
 	 * @param {WPComponent}    [settings.SettingsViewComponent]            Optional. React component to render the settings view panel. Default none.
 	 * @param {WPComponent}    [settings.SettingsSetupIncompleteComponent] Optional. React component to render the incomplete settings panel. Default none.
 	 * @param {WPComponent}    [settings.SetupComponent]                   Optional. React component to render the setup panel. Default none.
+	 * @param {Function}       [settings.onCompleteSetup]                  Optional. Function to use as a complete CTA callback. Default `undefined`.
 	 * @param {Function}       [settings.checkRequirements]                Optional. Function to check requirements for the module. Throws a WP error object for error or returns on success.
 	 * @param {WPComponent}    [settings.DashboardMainEffectComponent]     Optional. React component to render the effects on main dashboard. Default none.
 	 * @param {WPComponent}    [settings.DashboardEntityEffectComponent]   Optional. React component to render the effects on entity dashboard. Default none.
@@ -365,6 +367,7 @@ const baseActions = {
 				SetupComponent,
 				SettingsSetupIncompleteComponent,
 				checkRequirements,
+				onCompleteSetup,
 				DashboardMainEffectComponent,
 				DashboardEntityEffectComponent,
 			} = {}
@@ -380,6 +383,7 @@ const baseActions = {
 				SettingsEditComponent,
 				SettingsViewComponent,
 				SetupComponent,
+				onCompleteSetup,
 				SettingsSetupIncompleteComponent,
 				checkRequirements,
 				DashboardMainEffectComponent,

assets/js/googlesitekit/widgets/register-defaults.js

@@ -48,6 +48,7 @@ import {
 } from '../../modules/analytics-4/components/audience-segmentation/dashboard';
 import { isFeatureEnabled } from '../../features';
 import { BREAKPOINT_SMALL } from '../../hooks/useBreakpoint';
+import WidgetNull from './components/WidgetNull';
 
 const { ...ADDITIONAL_WIDGET_CONTEXTS } = WIDGET_CONTEXTS;
 
@@ -473,7 +474,7 @@ export function registerDefaults( widgetsAPI ) {
 		widgetsAPI.registerWidget(
 			'keyMetricsEventDetectionCalloutNotification',
 			{
-				Component: null,
+				Component: WidgetNull,
 				width: [ widgetsAPI.WIDGET_WIDTHS.FULL ],
 				priority: 0,
 				modules: [ 'analytics-4' ],

assets/js/modules/adsense/components/widgets/TopEarningContentWidget.stories.js

@@ -163,10 +163,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/TopEarningContentWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -192,10 +188,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/PopularContent/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -221,10 +213,6 @@ InsufficientPermissions.args = {
 		] );
 	},
 };
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/PopularContent/InsufficientPermissions',
-	delay: 250,
-};
 
 export const AdSenseNotLinked = Template.bind( {} );
 AdSenseNotLinked.storyName = 'AdSense Not Linked';

assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.stories.js

@@ -91,9 +91,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/EngagedTrafficSourceWidget/ZeroData',
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -119,6 +116,8 @@ Error.args = {
 		] );
 	},
 };
+// Since the "Error" state is the same for all KMW tiles, this is the sole scenario
+// and should not be added to any other generic `MetricTile___` or KMW component.
 Error.scenario = {
 	label: 'KeyMetrics/EngagedTrafficSource/Error',
 	delay: 250,
@@ -148,6 +147,9 @@ InsufficientPermissions.args = {
 		] );
 	},
 };
+// Since the "Insufficient Permissions Error" state is the same for all KMW tiles,
+// this is the sole scenario and should not be added to any other generic
+// `MetricTile___` or KMW component.
 InsufficientPermissions.scenario = {
 	label: 'KeyMetrics/EngagedTrafficSource/InsufficientPermissions',
 	delay: 250,

assets/js/modules/analytics-4/components/widgets/LeastEngagingPagesWidget.stories.js

@@ -280,10 +280,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -309,10 +305,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -339,11 +331,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/LeastEngagingPagesWidget',
 	decorators: [

assets/js/modules/analytics-4/components/widgets/MostEngagingPagesWidget.stories.js

@@ -298,10 +298,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -327,10 +323,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -357,11 +349,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/MostEngagingPagesWidget',
 	decorators: [