Merge branch 'develop' into enhancement/8418-remove-KMW-VRTs.

.eslintrc.json

@@ -169,6 +169,17 @@
           "off"
         ]
       }
+    },
+    {
+      "files": [
+        "webpack/*",
+        "**/__factories__/*",
+        "*.stories.js",
+        "*.test.js"
+      ],
+      "rules": {
+        "sitekit/no-direct-date": "off"
+      }
     }
   ],
   "plugins": [

assets/js/components/GoogleChart/index.js

@@ -234,6 +234,8 @@ export default function GoogleChart( props ) {
 
 	// Only use markers if the date is within the current date range.
 	const dateMarkersInRange = dateMarkers.filter( ( dateMarker ) => {
+		// Valid use of `new Date()` with an argument.
+		// eslint-disable-next-line sitekit/no-direct-date
 		return isDateWithinRange( new Date( dateMarker.date ) );
 	} );
 
@@ -260,6 +262,8 @@ export default function GoogleChart( props ) {
 
 		// Add the dotted line and tooltip for each date marker.
 		dateMarkersInRange.forEach( ( dateMarker, index ) => {
+			// Valid use of `new Date()` with an argument.
+			// eslint-disable-next-line sitekit/no-direct-date
 			const dateFromMarker = new Date( dateMarker.date );
 
 			const chartLine = document.getElementById(

assets/js/components/Header.test.js

@@ -23,6 +23,7 @@ import {
 	provideModules,
 	provideUserAuthentication,
 	provideUserInfo,
+	waitForTimeouts,
 } from '../../../tests/js/test-utils';
 import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../googlesitekit/constants';
 import { CORE_USER } from '../googlesitekit/datastore/user/constants';
@@ -82,5 +83,7 @@ describe( 'Header', () => {
 		expect( container.firstChild ).toHaveClass(
 			'googlesitekit-header--has-subheader'
 		);
+
+		await act( () => waitForTimeouts( 30 ) );
 	} );
 } );

assets/js/components/KeyMetrics/MetricsSelectionPanel/Footer.js

@@ -41,6 +41,7 @@ import {
 	KEY_METRICS_SELECTION_FORM,
 	MIN_SELECTED_METRICS_COUNT,
 	MAX_SELECTED_METRICS_COUNT,
+	MAX_SELECTED_METRICS_COUNT_WITH_CONVERSION_EVENTS,
 } from '../constants';
 import {
 	EDIT_SCOPE,
@@ -52,6 +53,7 @@ import { ERROR_CODE_MISSING_REQUIRED_SCOPE } from '../../../util/errors';
 import useViewContext from '../../../hooks/useViewContext';
 import { trackEvent } from '../../../util';
 import { SelectionPanelFooter } from '../../SelectionPanel';
+import { useFeature } from '../../../hooks/useFeature';
 
 export default function Footer( {
 	isOpen,
@@ -60,6 +62,7 @@ export default function Footer( {
 	onNavigationToOAuthURL = () => {},
 } ) {
 	const viewContext = useViewContext();
+	const isConversionReportingEnabled = useFeature( 'conversionReporting' );
 
 	const selectedMetrics = useSelect( ( select ) =>
 		select( CORE_FORMS ).getValue(
@@ -195,6 +198,9 @@ export default function Footer( {
 	}, [ trackingCategory ] );
 
 	const selectedMetricsCount = selectedMetrics?.length || 0;
+	const maxSelectedMetricsLimit = isConversionReportingEnabled
+		? MAX_SELECTED_METRICS_COUNT_WITH_CONVERSION_EVENTS
+		: MAX_SELECTED_METRICS_COUNT;
 	let metricsLimitError;
 	if ( selectedMetricsCount < MIN_SELECTED_METRICS_COUNT ) {
 		metricsLimitError = sprintf(
@@ -206,15 +212,15 @@ export default function Footer( {
 			MIN_SELECTED_METRICS_COUNT,
 			selectedMetricsCount
 		);
-	} else if ( selectedMetricsCount > MAX_SELECTED_METRICS_COUNT ) {
+	} else if ( selectedMetricsCount > maxSelectedMetricsLimit ) {
 		metricsLimitError = sprintf(
 			/* translators: 1: Maximum number of metrics that can be selected. 2: Number of selected metrics. */
 			__(
 				'Select up to %1$d metrics (%2$d selected)',
 				'google-site-kit'
 			),
 
-			MAX_SELECTED_METRICS_COUNT,
+			maxSelectedMetricsLimit,
 			selectedMetricsCount
 		);
 	}
@@ -227,7 +233,7 @@ export default function Footer( {
 			saveError={ saveError }
 			itemLimitError={ metricsLimitError }
 			minSelectedItemCount={ MIN_SELECTED_METRICS_COUNT }
-			maxSelectedItemCount={ MAX_SELECTED_METRICS_COUNT }
+			maxSelectedItemCount={ maxSelectedMetricsLimit }
 			isBusy={ isSavingSettings || isNavigatingToOAuthURL }
 			onSaveSuccess={ onSaveSuccess }
 			onCancel={ onCancel }

assets/js/components/KeyMetrics/MetricsSelectionPanel/index.test.js

@@ -46,6 +46,10 @@ import {
 	KM_ANALYTICS_TOP_RECENT_TRENDING_PAGES,
 	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+	KM_ANALYTICS_POPULAR_AUTHORS,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_CITIES,
+	KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
 } from '../../../googlesitekit/datastore/user/constants';
 import { KEY_METRICS_SELECTION_PANEL_OPENED_KEY } from '../constants';
 import { VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY } from '../../../googlesitekit/constants';
@@ -332,6 +336,62 @@ describe( 'MetricsSelectionPanel', () => {
 			).not.toBeDisabled();
 		} );
 
+		it( 'should not disable unchecked metrics when conversionReporting feature flag is enabled and eight metrics are checked', async () => {
+			const metrics = [
+				KM_ANALYTICS_RETURNING_VISITORS,
+				KM_ANALYTICS_NEW_VISITORS,
+				KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+				KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+				KM_ANALYTICS_POPULAR_AUTHORS,
+				KM_ANALYTICS_POPULAR_PRODUCTS,
+				KM_ANALYTICS_TOP_CITIES,
+				KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
+				KM_ANALYTICS_POPULAR_CONTENT,
+			];
+
+			provideModules( registry, [
+				{
+					slug: 'analytics-4',
+					active: true,
+					connected: true,
+				},
+			] );
+
+			provideKeyMetricsWidgetRegistrations(
+				registry,
+				metrics.reduce(
+					( acc, widget ) => ( {
+						...acc,
+						[ widget ]: {
+							modules: [ 'analytics-4' ],
+						},
+					} ),
+					{}
+				)
+			);
+
+			// Set the first four metrics as selected.
+			provideKeyMetrics( registry, {
+				widgetSlugs: metrics.slice( 0, 8 ),
+			} );
+
+			const { getByRole, waitForRegistry } = render(
+				<MetricsSelectionPanel />,
+				{
+					registry,
+				}
+			);
+
+			await waitForRegistry();
+
+			// Verify that the fifth metric is disabled.
+			expect(
+				getByRole( 'checkbox', {
+					name: /Most popular content/i,
+				} )
+			).not.toBeDisabled();
+		} );
+
 		it( 'should disable metrics that depend on a disconnected analytics-4 module', async () => {
 			provideKeyMetrics( registry );
 
@@ -439,6 +499,14 @@ describe( 'MetricsSelectionPanel', () => {
 		it( 'should not list metrics dependent on modules that a view-only user does not have access to', async () => {
 			provideUserAuthentication( registry, { authenticated: false } );
 
+			await registry
+				.dispatch( CORE_USER )
+				.receiveIsUserInputCompleted( false );
+			await registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+				widgetSlugs: [],
+				includeConversionTailoredMetrics: false,
+			} );
+
 			provideKeyMetrics( registry );
 
 			provideModules( registry, [

assets/js/components/KeyMetrics/constants.js

@@ -23,3 +23,4 @@ export const KEY_METRICS_SELECTION_FORM = 'key-metrics-selection-form';
 export const KEY_METRICS_SELECTED = 'key-metrics-selected';
 export const MIN_SELECTED_METRICS_COUNT = 2;
 export const MAX_SELECTED_METRICS_COUNT = 4;
+export const MAX_SELECTED_METRICS_COUNT_WITH_CONVERSION_EVENTS = 8;

assets/js/components/notifications/BannerNotification/index.js

@@ -218,6 +218,8 @@ export default function BannerNotification( props ) {
 		const { value: dismissed } = await getItem( cacheKeyDismissed );
 
 		if ( dismissed ) {
+			// Valid use of `new Date()` with an argument.
+			// eslint-disable-next-line sitekit/no-direct-date
 			const expiration = new Date( dismissed );
 
 			expiration.setSeconds(

assets/js/components/notifications/GoogleTagIDMismatchNotification.stories.js

@@ -144,8 +144,15 @@ export default {
 				const newAnalyticsPropertyID = '1122334455';
 				const accountSummaries = [
 					{
+						account: 'accounts/123456',
+						name: 'accountSummaries/987654321',
+						propertySummaries: [
+							{
+								property: `properties/${ newAnalyticsPropertyID }`,
+								_id: newAnalyticsPropertyID,
+							},
+						],
 						_id: '123456',
-						propertySummaries: [ { _id: newAnalyticsPropertyID } ],
 					},
 				];
 
@@ -168,7 +175,10 @@ export default {
 				};
 				registry
 					.dispatch( MODULES_ANALYTICS_4 )
-					.receiveGetAccountSummaries( accountSummaries );
+					.receiveGetAccountSummaries( {
+						accountSummaries,
+						nextPageToken: null,
+					} );
 				registry
 					.dispatch( MODULES_ANALYTICS_4 )
 					.receiveGetWebDataStreamsBatch( datastreams, {

assets/js/components/notifications/Notifications.js

@@ -43,7 +43,7 @@ export default function Notifications( { areaSlug } ) {
 	}
 
 	const { id, Component: ActiveNotification } = queuedNotifications[ 0 ];
-	const props = { id, ...getNotificationComponentProps( id ) };
+	const props = { ...getNotificationComponentProps( id ) };
 
 	return <ActiveNotification { ...props } />;
 }

assets/js/components/notifications/SubtleNotifications.js

@@ -16,43 +16,12 @@
  * limitations under the License.
  */
 
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import { useFeature } from '../../hooks/useFeature';
-import AudienceSegmentationSetupSuccessSubtleNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
-import { RRMSetupSuccessSubtleNotification } from '../../modules/reader-revenue-manager/components/dashboard';
-import useViewContext from '../../hooks/useViewContext';
 import Notifications from './Notifications';
 import { NOTIFICATION_AREAS } from '../../googlesitekit/notifications/datastore/constants';
 
 export default function SubtleNotifications() {
-	const viewContext = useViewContext();
-	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
-	const rrmModuleEnabled = useFeature( 'rrmModule' );
-
-	// Each notification component rendered here has its own logic to determine
-	// whether it should be displayed; in most cases none of these components
-	// will be displayed, but it's also (currently) possible for multiple
-	// notifications to be displayed if they each meet their criteria and haven't
-	// been dismissed by the user.
-	//
-	// Because these notifications are subtle and small, this is acceptable UX.
-	return (
-		<Fragment>
-			{ audienceSegmentationEnabled && (
-				<AudienceSegmentationSetupSuccessSubtleNotification />
-			) }
-			{ rrmModuleEnabled && <RRMSetupSuccessSubtleNotification /> }
-			<Notifications
-				viewContext={ viewContext }
-				areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV }
-			/>
-		</Fragment>
-	);
+	return <Notifications areaSlug={ NOTIFICATION_AREAS.BANNERS_BELOW_NAV } />;
 }

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>