Merge branch 'main' into feature/exp-memorable-quotes.

.eslintrc.staged.json

@@ -0,0 +1,4 @@
+{
+	"extends": [ "./.eslintrc.json" ],
+	"rules": {}
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -32,6 +32,7 @@ _Do not alter or remove anything below. The following sections will be managed b
 - [ ] Ensure CI checks pass.
 - [ ] Check Storybook where applicable.
 - [ ] Ensure there is a QA Brief.
+- [ ] Ensure there are no unexpected significant changes to file sizes.
 
 ## Merge Reviewer Checklist
 

.github/workflows/e2e-tests.yml

@@ -135,5 +135,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: e2e-screenshots
-          path: tests/e2e/screenshots
+          name: e2e-debugging-run[${{ github.run_attempt }}]-wp[${{ matrix.wp_version }}]-amp[${{ matrix.amp_version }}]
+          path: |
+            ~/.npm/_logs/
+            tests/e2e/screenshots/

.github/workflows/php-lint-tests.yml

@@ -77,7 +77,7 @@ jobs:
       fail-fast: false
       matrix:
         composer_php_version: ['']
-        php_version: ['7.4', '8.0']
+        php_version: ['7.4', '8.1']
         wp_multisite: ['']
         wp_version: ['latest']
         include:

.github/workflows/visual-regression.yml

@@ -6,7 +6,7 @@ on:
       - main
       - develop
       - 'feature/**'
-    # Only run if CSS/JS/MD-related files changed.
+    # Only run if CSS/JS related files changed.
     paths:
       - '.github/workflows/visual-regression.yml'
       - 'assets/**'

.storybook/main.js

@@ -41,5 +41,4 @@ module.exports = {
 
 		return head;
 	},
-	staticDirs: [ '../dist' ],
 };

assets/js/components/DashboardMainApp.js

@@ -46,6 +46,7 @@ import {
 	AudienceSegmentationSetupCTAWidget,
 	AudienceSelectionPanel,
 } from '../modules/analytics-4/components/audience-segmentation/dashboard';
+import ReaderRevenueManagerSetupCTABanner from '../modules/reader-revenue-manager/components/dashboard/ReaderRevenueManagerSetupCTABanner';
 import EntitySearchInput from './EntitySearchInput';
 import DateRangeSelector from './DateRangeSelector';
 import HelpMenu from './help/HelpMenu';
@@ -80,6 +81,7 @@ import { getContextScrollTop } from '../util/scroll';
 
 export default function DashboardMainApp() {
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
+	const readerRevenueManagerEnabled = useFeature( 'rrmModule' );
 
 	const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );
 
@@ -230,6 +232,14 @@ export default function DashboardMainApp() {
 				</Fragment>
 			) }
 
+			{ ! viewOnlyDashboard && (
+				<Fragment>
+					{ readerRevenueManagerEnabled && (
+						<ReaderRevenueManagerSetupCTABanner />
+					) }
+				</Fragment>
+			) }
+
 			<OverlayNotificationsRenderer />
 
 			{ isKeyMetricsWidgetHidden !== true && (

assets/js/components/ErrorNotice.js

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { Fragment, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -37,6 +37,7 @@ import ErrorText from './ErrorText';
 
 export default function ErrorNotice( {
 	error,
+	hasButton = false,
 	storeName,
 	message = error.message,
 	noPrefix = false,
@@ -63,7 +64,17 @@ export default function ErrorNotice( {
 		return null;
 	}
 
-	const shouldDisplayRetry = isErrorRetryable( error, selectorData );
+	const shouldDisplayRetry =
+		hasButton && isErrorRetryable( error, selectorData );
+
+	// Append "Try again" messaging if no retry button is present.
+	if ( ! hasButton ) {
+		message = sprintf(
+			/* translators: %s: Error message from Google API. */
+			__( '%s. Please try again.', 'google-site-kit' ),
+			message
+		);
+	}
 
 	return (
 		<Fragment>
@@ -88,6 +99,7 @@ ErrorNotice.propTypes = {
 	error: PropTypes.shape( {
 		message: PropTypes.string,
 	} ),
+	hasButton: PropTypes.bool,
 	storeName: PropTypes.string,
 	message: PropTypes.string,
 	noPrefix: PropTypes.bool,

assets/js/components/ErrorNotice.test.js

@@ -52,7 +52,11 @@ describe( 'ErrorNotice', () => {
 		invalidateResolutionSpy.mockReset();
 	} );
 
-	async function renderErrorNotice( { error, storeName } ) {
+	async function renderErrorNotice( {
+		error,
+		storeName,
+		hasButton = false,
+	} ) {
 		fetchMock.get(
 			new RegExp(
 				'^/google-site-kit/v1/modules/tagmanager/data/accounts'
@@ -74,13 +78,32 @@ describe( 'ErrorNotice', () => {
 			.getError( 'getAccounts', [] );
 
 		return render(
-			<ErrorNotice error={ selectorError } storeName={ storeName } />,
+			<ErrorNotice
+				hasButton={ hasButton }
+				error={ selectorError }
+				storeName={ storeName }
+			/>,
 			{
 				registry,
 			}
 		);
 	}
 
+	it( 'should not render the `Retry` button by default', async () => {
+		const { queryByText } = await renderErrorNotice( {
+			error: {
+				code: 'test-error-code',
+				message: 'Test error message',
+				data: {
+					reason: '',
+				},
+			},
+			storeName: MODULES_TAGMANAGER,
+		} );
+
+		expect( queryByText( /retry/i ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'should not render the `Retry` button if the error reason is `ERROR_REASON_INSUFFICIENT_PERMISSIONS`', async () => {
 		const { queryByText } = await renderErrorNotice( {
 			error: {
@@ -127,7 +150,7 @@ describe( 'ErrorNotice', () => {
 		expect( queryByText( /retry/i ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should render the `Retry` button if the error is retryable', async () => {
+	it( 'should render the `Retry` button if the error is retryable and hasButton is passed', async () => {
 		const { queryByText } = await renderErrorNotice( {
 			error: {
 				code: 'test-error-code',
@@ -137,6 +160,7 @@ describe( 'ErrorNotice', () => {
 				},
 			},
 			storeName: MODULES_TAGMANAGER,
+			hasButton: true,
 		} );
 
 		expect( queryByText( /retry/i ) ).toBeInTheDocument();
@@ -152,6 +176,7 @@ describe( 'ErrorNotice', () => {
 				},
 			},
 			storeName: MODULES_TAGMANAGER,
+			hasButton: true,
 		} );
 
 		expect( queryByText( /retry/i ) ).toBeInTheDocument();

assets/js/components/Header.test.js

@@ -24,7 +24,9 @@ import {
 	provideUserAuthentication,
 	provideUserInfo,
 } from '../../../tests/js/test-utils';
+import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../googlesitekit/constants';
 import { CORE_USER } from '../googlesitekit/datastore/user/constants';
+import { MODULES_ANALYTICS_4 } from '../modules/analytics-4/datastore/constants';
 import Header from './Header';
 import Null from './Null';
 
@@ -37,16 +39,21 @@ describe( 'Header', () => {
 		provideUserInfo( registry );
 		provideUserAuthentication( registry );
 		registry.dispatch( CORE_USER ).receiveConnectURL( 'test-url' );
+		registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( [] );
 	} );
 
 	it( 'renders', () => {
-		render( <Header />, { registry } );
+		render( <Header />, {
+			registry,
+			viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
+		} );
 	} );
 
 	it( 'can render a subheader', async () => {
 		const { waitForRegistry, queryByTestID } = render(
 			<Header subHeader={ <div data-testid="sub" /> } />,
-			{ registry }
+			{ registry, viewContext: VIEW_CONTEXT_MAIN_DASHBOARD }
 		);
 
 		await waitForRegistry();
@@ -59,6 +66,7 @@ describe( 'Header', () => {
 			<Header subHeader={ <Null /> } />,
 			{
 				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 			}
 		);
 

assets/js/components/KeyMetrics/KeyMetricsNewBadge.js

@@ -50,12 +50,14 @@ export default function KeyMetricsNewBadge() {
 		}
 	}, [ initialKeyMetricsSetupCompleted, isKeyMetricsSetupCompleted ] );
 
+	if ( ! isNew ) {
+		return null;
+	}
+
 	return (
-		isNew && (
-			<Badge
-				className="googlesitekit-new-badge"
-				label={ __( 'New', 'google-site-kit' ) }
-			/>
-		)
+		<Badge
+			className="googlesitekit-new-badge"
+			label={ __( 'New', 'google-site-kit' ) }
+		/>
 	);
 }

assets/js/components/KeyMetrics/MetricsSelectionPanel/MetricItems.js

@@ -49,7 +49,8 @@ export default function MetricItems( { savedMetrics } ) {
 		( select ) => ( metric ) =>
 			KEY_METRICS_WIDGETS[ metric ].displayInList(
 				select,
-				isViewOnlyDashboard
+				isViewOnlyDashboard,
+				metric
 			)
 	);
 

assets/js/components/KeyMetrics/key-metrics-widgets.js

@@ -33,6 +33,7 @@ import {
 	KM_ANALYTICS_POPULAR_CONTENT,
 	KM_ANALYTICS_POPULAR_PRODUCTS,
 	KM_ANALYTICS_TOP_CITIES,
+	KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
 	KM_ANALYTICS_TOP_COUNTRIES,
 	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
 	KM_ANALYTICS_PAGES_PER_VISIT,
@@ -50,6 +51,7 @@ import {
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { isFeatureEnabled } from '../../features';
 
 /**
  * Determines whether to show a widget the requires Analytics 4 and AdSense to be linked.
@@ -122,6 +124,38 @@ function shouldDisplayWidgetWithCustomDimensions(
 	);
 }
 
+/**
+ * Determines whether to display a widget that requires conversion reporting events
+ * in the key metrics selection panel.
+ *
+ * This function is attached to the widget object that requires the conversion reporting events and
+ * has the `requiredConversionEventName` property.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Function} select              Data store select function.
+ * @param {boolean}  isViewOnlyDashboard Whether the current dashboard is view only.
+ * @param {string}   slug                Key metric widget slug.
+ * @return {boolean} Whether to display the widget.
+ */
+function shouldDisplayWidgetWithConversionEvent(
+	select,
+	isViewOnlyDashboard,
+	slug
+) {
+	if ( ! isFeatureEnabled( 'conversionReporting' ) ) {
+		return false;
+	}
+
+	return (
+		select( MODULES_ANALYTICS_4 ).hasConversionReportingEvents(
+			// This property is available to the widget object that requires the
+			// conversion reporting events, where the function is attached.
+			this.requiredConversionEventName
+		) || select( CORE_USER ).isKeyMetricActive( slug )
+	);
+}
+
 const KEY_METRICS_WIDGETS = {
 	[ KM_ANALYTICS_ADSENSE_TOP_EARNING_CONTENT ]: {
 		title: __( 'Top earning pages', 'google-site-kit' ),
@@ -330,6 +364,23 @@ const KEY_METRICS_WIDGETS = {
 			'google-site-kit'
 		),
 	},
+	[ KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS ]: {
+		title: __( 'Top cities driving leads', 'google-site-kit' ),
+		description: __(
+			'Cities driving the most contact form submissions',
+			'google-site-kit'
+		),
+		infoTooltip: __(
+			'Cities driving the most contact form submissions',
+			'google-site-kit'
+		),
+		requiredConversionEventName: [
+			'submit_lead_form',
+			'contact',
+			'generate_lead',
+		],
+		displayInList: shouldDisplayWidgetWithConversionEvent,
+	},
 	[ KM_ANALYTICS_TOP_COUNTRIES ]: {
 		title: __( 'Top countries driving traffic', 'google-site-kit' ),
 		description: __(

assets/js/components/ReportError.test.js

@@ -24,7 +24,6 @@ import {
 	provideModuleRegistrations,
 	provideModules,
 	provideUserInfo,
-	unsubscribeFromAll,
 } from '../../../tests/js/utils';
 import {
 	ERROR_CODE_MISSING_REQUIRED_SCOPE,
@@ -92,7 +91,6 @@ describe( 'ReportError', () => {
 
 	afterEach( () => {
 		invalidateResolutionSpy.mockReset();
-		unsubscribeFromAll( registry );
 	} );
 
 	it( 'renders the error message', () => {

assets/js/components/SelectionBox.js

@@ -28,6 +28,7 @@ import classnames from 'classnames';
 import { Checkbox } from 'googlesitekit-components';
 
 export default function SelectionBox( {
+	badge,
 	checked,
 	children,
 	disabled,
@@ -52,12 +53,14 @@ export default function SelectionBox( {
 				value={ value }
 			>
 				{ title }
+				{ badge }
 			</Checkbox>
 		</div>
 	);
 }
 
 SelectionBox.propTypes = {
+	badge: PropTypes.node,
 	checked: PropTypes.bool,
 	children: PropTypes.node,
 	disabled: PropTypes.bool,