Merge in branch develop.

.github/workflows/e2e-tests.yml

@@ -80,12 +80,15 @@ jobs:
       matrix:
         amp_version: ['']
         wp_version: ['latest', 'nightly']
+        ca_cert_refresh: ['']
         include:
           - amp_version: '1.5.5'
             wp_version: '5.2.21'
+            ca_cert_refresh: true
     env:
       AMP_VERSION: ${{ matrix.amp_version }}
       WP_VERSION: ${{ matrix.wp_version }}
+      CA_CERT_REFRESH: ${{ matrix.ca_cert_refresh }}
     runs-on: ubuntu-latest
     timeout-minutes: 30
     if: github.event_name == 'push' || github.event.pull_request.draft == false

assets/js/components/DetailsPermaLinks.js

@@ -49,6 +49,7 @@ export default function DetailsPermaLinks( { title, path, serviceURL } ) {
 	return (
 		<Fragment>
 			<Link
+				className="googlesitekit-font-weight-medium"
 				href={ serviceURL || detailsURL }
 				external={ !! serviceURL }
 				hideExternalIndicator

assets/js/components/KeyMetrics/ChipTabGroup/Chip.js

@@ -34,6 +34,7 @@ export default function Chip( {
 	label,
 	isActive,
 	onClick,
+	hasNewBadge = false,
 	selectedCount = 0,
 } ) {
 	return (
@@ -56,6 +57,9 @@ export default function Chip( {
 			onClick={ () => onClick( slug ) }
 		>
 			{ label }
+			{ hasNewBadge && (
+				<span className="googlesitekit-chip-tab-group__chip-item-new-dot" />
+			) }
 		</Button>
 	);
 }
@@ -64,6 +68,7 @@ Chip.propTypes = {
 	slug: propTypes.string.isRequired,
 	label: propTypes.string.isRequired,
 	isActive: propTypes.bool,
+	hasNewBadge: propTypes.bool,
 	selectedCount: propTypes.number,
 	onClick: propTypes.func.isRequired,
 };

assets/js/components/KeyMetrics/ChipTabGroup/index.js

@@ -47,8 +47,13 @@ import MetricItem from '../MetricsSelectionPanel/MetricItem';
 import NoSelectedItemsSVG from '../../../../svg/graphics/key-metrics-no-selected-items.svg';
 import { BREAKPOINT_SMALL, useBreakpoint } from '../../../hooks/useBreakpoint';
 import CheckMark from '../../../../svg/icons/check-2.svg';
-import { MODULES_ANALYTICS_4 } from '../../../modules/analytics-4/datastore/constants';
+import {
+	CONVERSION_REPORTING_LEAD_EVENTS,
+	MODULES_ANALYTICS_4,
+} from '../../../modules/analytics-4/datastore/constants';
 import { CORE_UI } from '../../../googlesitekit/datastore/ui/constants';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
 
 const currentSelectionGroup = {
 	SLUG: KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG,
@@ -88,16 +93,53 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 			) || []
 	);
 
-	const detectedEvents = useSelect( ( select ) =>
-		select( MODULES_ANALYTICS_4 ).getDetectedEvents()
+	const currentlyActiveEvents = useSelect( ( select ) => {
+		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
+
+		if ( userPickedMetrics?.length ) {
+			// It is safe to access the selector without checking if GA4 is connected,
+			// since this selector does not make request to the module endpoint.
+			const keyMetricsConversionEventWidgets =
+				select(
+					MODULES_ANALYTICS_4
+				).getKeyMetricsConversionEventWidgets();
+
+			return Object.keys( keyMetricsConversionEventWidgets ).filter(
+				( event ) =>
+					userPickedMetrics.some( ( metric ) =>
+						keyMetricsConversionEventWidgets[ event ].includes(
+							metric
+						)
+					)
+			);
+		}
+
+		const userInputSettings = select( CORE_USER ).getUserInputSettings();
+		return userInputSettings?.includeConversionEvents?.values;
+	} );
+	const isGA4Connected = useSelect( ( select ) =>
+		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
+	const detectedEvents = useSelect( ( select ) => {
+		if ( ! isGA4Connected ) {
+			return [];
+		}
+
+		return select( MODULES_ANALYTICS_4 ).getDetectedEvents();
+	} );
 	const hasGeneratingLeadsGroup = [
 		'submit_lead_form',
 		'contact',
 		'generate_lead',
-	].filter( ( item ) => detectedEvents?.includes( item ) );
+	].filter(
+		( item ) =>
+			detectedEvents?.includes( item ) ||
+			currentlyActiveEvents?.includes( item )
+	);
 	const hasSellingProductsGroup = [ 'add_to_cart', 'purchase' ].filter(
-		( item ) => detectedEvents?.includes( item )
+		( item ) =>
+			detectedEvents?.includes( item ) ||
+			currentlyActiveEvents?.includes( item )
 	);
 
 	const keyMetricsGroups = useMemo(
@@ -120,10 +162,47 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 		[ keyMetricsGroups ]
 	);
 
+	const newBadgeEvents = useSelect( ( select ) => {
+		if ( ! isGA4Connected ) {
+			return [];
+		}
+
+		const badgeEvents = select( MODULES_ANALYTICS_4 ).getNewBadgeEvents();
+
+		if ( detectedEvents?.length && badgeEvents?.length ) {
+			const detectedLeadEvents = detectedEvents.filter( ( event ) =>
+				CONVERSION_REPORTING_LEAD_EVENTS.includes( event )
+			);
+			const newLeadEvents = badgeEvents.filter( ( event ) =>
+				CONVERSION_REPORTING_LEAD_EVENTS.includes( event )
+			);
+			const newNonLeadEvents = badgeEvents.filter(
+				( event ) =>
+					! CONVERSION_REPORTING_LEAD_EVENTS.includes( event )
+			);
+
+			if ( detectedLeadEvents?.length > 1 && newLeadEvents.length > 0 ) {
+				return newNonLeadEvents;
+			}
+		}
+
+		return badgeEvents;
+	} );
+	const conversionReportingEventWidgets = useSelect( ( select ) => {
+		if ( ! isGA4Connected ) {
+			return [];
+		}
+
+		return select(
+			MODULES_ANALYTICS_4
+		).getKeyMetricsConversionEventWidgets();
+	} );
+
 	// Currently selected group does not include total selected number, so it will
 	// always be 0.
 	const selectedCounts = { [ KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG ]: 0 };
 	const activeMetricItems = {};
+	const newlyDetectedMetrics = {};
 
 	for ( const metricItemSlug in allMetricItems ) {
 		const metricGroup = allMetricItems[ metricItemSlug ].group;
@@ -153,6 +232,23 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 			).length;
 			selectedCounts[ metricGroup ] = selectedCount;
 		}
+
+		// Check if metric is conversion event related and if new badge should be included.
+		if ( newBadgeEvents?.length ) {
+			const isNewlyDetectedKeyMetrics = newBadgeEvents.some(
+				( conversionEvent ) =>
+					conversionReportingEventWidgets[ conversionEvent ].includes(
+						metricItemSlug
+					)
+			);
+
+			if ( isNewlyDetectedKeyMetrics ) {
+				newlyDetectedMetrics[ metricGroup ] = [
+					...( newlyDetectedMetrics[ metricGroup ] ?? [] ),
+					metricItemSlug,
+				];
+			}
+		}
 	}
 
 	const { setValues } = useDispatch( CORE_FORMS );
@@ -190,12 +286,24 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 		select( CORE_UI ).getValue( KEY_METRICS_SELECTION_PANEL_OPENED_KEY )
 	);
 	const isSelectionPanelOpenPrevious = usePrevious( isSelectionPanelOpen );
+	const newlyDetectedMetricsKeys = Object.keys( newlyDetectedMetrics );
 
 	useEffect( () => {
 		// Ensure that current selection group is always active when selection panel re-opens.
 		if ( ! isSelectionPanelOpenPrevious && isSelectionPanelOpen ) {
-			setIsActive( KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG );
-			setActiveGroupIndex( 0 );
+			if ( newlyDetectedMetricsKeys.length && isMobileBreakpoint ) {
+				const firstNewlyDetectedGroup = allGroups.find(
+					( group ) => group.SLUG === newlyDetectedMetricsKeys[ 0 ]
+				);
+
+				setActiveGroupIndex(
+					allGroups.indexOf( firstNewlyDetectedGroup )
+				);
+				setIsActive( firstNewlyDetectedGroup.SLUG );
+			} else {
+				setActiveGroupIndex( 0 );
+				setIsActive( KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG );
+			}
 		}
 
 		if ( isSelectionPanelOpenPrevious && ! isSelectionPanelOpen ) {
@@ -206,6 +314,9 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 		isSelectionPanelOpen,
 		isSelectionPanelOpenPrevious,
 		unstagedSelection,
+		allGroups,
+		isMobileBreakpoint,
+		newlyDetectedMetricsKeys,
 		resetUnstagedSelection,
 	] );
 
@@ -230,6 +341,9 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 									key={ group.SLUG }
 									slug={ group.SLUG }
 									label={ group.LABEL }
+									hasNewBadge={
+										!! newlyDetectedMetrics?.[ group.SLUG ]
+									}
 									isActive={ group.SLUG === isActive }
 									onClick={ onChipChange }
 									selectedCount={
@@ -259,20 +373,30 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 										({ selectedCounts[ group.SLUG ] })
 									</span>
 								) }
+								{ !! newlyDetectedMetrics?.[ group.SLUG ] && (
+									<span className="googlesitekit-chip-tab-group__chip-item-new-dot" />
+								) }
 							</Tab>
 						) ) }
 					</TabBar>
 				) }
 			</div>
 			<div className="googlesitekit-chip-tab-group__tab-item">
-				{ Object.keys( activeMetricItems ).map( ( slug ) => (
-					<MetricItem
-						key={ slug }
-						slug={ slug }
-						savedItemSlugs={ savedItemSlugs }
-						{ ...activeMetricItems[ slug ] }
-					/>
-				) ) }
+				{ Object.keys( activeMetricItems ).map( ( slug ) => {
+					const metricGroup = activeMetricItems[ slug ].group;
+					const isNewlyDetected =
+						newlyDetectedMetrics?.[ metricGroup ]?.includes( slug );
+
+					return (
+						<MetricItem
+							key={ slug }
+							slug={ slug }
+							savedItemSlugs={ savedItemSlugs }
+							isNewlyDetected={ isNewlyDetected }
+							{ ...activeMetricItems[ slug ] }
+						/>
+					);
+				} ) }
 				{ ! Object.keys( activeMetricItems ).length && (
 					<div className="googlesitekit-chip-tab-group__graphic">
 						<NoSelectedItemsSVG height={ 250 } />

assets/js/components/KeyMetrics/ChipTabGroup/index.stories.js

@@ -43,7 +43,7 @@ import {
 import {
 	CORE_USER,
 	KM_ANALYTICS_NEW_VISITORS,
-	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_LEADS,
 	KM_ANALYTICS_VISIT_LENGTH,
 	KM_ANALYTICS_VISITS_PER_VISITOR,
 } from '../../../googlesitekit/datastore/user/constants';
@@ -132,6 +132,14 @@ WithError.args = {
 			[ KEY_METRICS_SELECTED ]: savedKeyMetrics,
 			[ EFFECTIVE_SELECTION ]: selectedMetrics,
 		} );
+
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveConversionReportingInlineData( {
+				newEvents: [],
+				lostEvents: [],
+				newBadgeEvents: [],
+			} );
 	},
 	features: [ 'conversionReporting' ],
 };
@@ -174,7 +182,7 @@ export default {
 					KM_ANALYTICS_VISITS_PER_VISITOR,
 					KM_ANALYTICS_VISIT_LENGTH,
 					KM_ANALYTICS_NEW_VISITORS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_LEADS,
 				];
 
 				provideKeyMetrics( registry, { widgetSlugs: savedKeyMetrics } );
@@ -190,6 +198,14 @@ export default {
 					.dispatch( MODULES_ANALYTICS_4 )
 					.setDetectedEvents( [ 'contact', 'purchase' ] );
 
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.receiveConversionReportingInlineData( {
+						newEvents: [ 'contact' ],
+						lostEvents: [],
+						newBadgeEvents: [ 'contact' ],
+					} );
+
 				// Call story-specific setup.
 				if ( args && args?.setupRegistry ) {
 					args.setupRegistry( registry );

assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js

@@ -135,35 +135,27 @@ function ConfirmSitePurposeChangeModal( {
 		).getUserInputPurposeConversionEvents();
 	} );
 
-	const {
-		saveUserInputSettings,
-		setKeyMetricsSetting,
-		saveKeyMetricsSettings,
-	} = useDispatch( CORE_USER );
+	const { setUserInputSetting, saveUserInputSettings } =
+		useDispatch( CORE_USER );
 
 	const saveChanges = useCallback( async () => {
 		setIsSaving( true );
-		await saveUserInputSettings();
-
-		// Update 'includeConversionTailoredMetrics' key metrics setting with included
-		// conversion events, to mark that their respective metrics should be included in the
+		// Update 'includeConversionEvents' setting with included conversion events,
+		// to mark that their respective metrics should be included in the
 		// list of tailored metrics and persist on the dashboard in case events are lost.
-		setKeyMetricsSetting(
-			'includeConversionTailoredMetrics',
+		setUserInputSetting(
+			'includeConversionEvents',
 			userInputPurposeConversionEvents
 		);
-		saveKeyMetricsSettings( {
-			widgetSlugs: undefined,
-		} );
+		await saveUserInputSettings();
 
 		setIsSaving( false );
 		onClose();
 	}, [
 		saveUserInputSettings,
 		onClose,
 		setIsSaving,
-		setKeyMetricsSetting,
-		saveKeyMetricsSettings,
+		setUserInputSetting,
 		userInputPurposeConversionEvents,
 	] );