Merge branch 'develop' into enhancement/9570-skeleton-loader-wp-dashb…

…oard.
google · Jan 2, 2025 · 9b92b2e · 9b92b2e
2 parents 1f97143 + 9f21b5c
commit 9b92b2e
Show file tree

Hide file tree

Showing 107 changed files with 3,089 additions and 747 deletions.
diff --git a/.github/workflows/php-lint-tests.yml b/.github/workflows/php-lint-tests.yml
@@ -105,6 +105,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install SVN
+        run: sudo apt-get update && sudo apt-get install -y subversion
+
       - uses: shivammathur/setup-php@v2
         with:
           extensions: mysqli, runkit7, uopz

diff --git a/assets/js/components/KeyMetrics/ChipTabGroup/Chip.js b/assets/js/components/KeyMetrics/ChipTabGroup/Chip.js
@@ -26,8 +26,18 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { Button } from 'googlesitekit-components';
-import { KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG } from '../constants';
+import {
+	KEY_METRICS_GROUP_CURRENT,
+	KEY_METRICS_GROUP_SUGGESTED,
+} from '../constants';
 import CheckMark from '../../../../svg/icons/check-2.svg';
+import StarFill from '../../../../svg/icons/star-fill.svg';
+import Null from '../../../components/Null';
+
+const icons = {
+	[ KEY_METRICS_GROUP_CURRENT.SLUG ]: CheckMark,
+	[ KEY_METRICS_GROUP_SUGGESTED.SLUG ]: StarFill,
+};
 
 export default function Chip( {
 	slug,
@@ -37,15 +47,19 @@ export default function Chip( {
 	hasNewBadge = false,
 	selectedCount = 0,
 } ) {
+	const Icon = icons[ slug ] || Null;
+
 	return (
 		<Button
 			className={ classnames( 'googlesitekit-chip-tab-group__chip-item', {
 				'googlesitekit-chip-tab-group__chip-item--active': isActive,
 			} ) }
 			icon={
-				slug === KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG ? (
-					<CheckMark width={ 12 } height={ 12 } />
-				) : null
+				<Icon
+					width={ 12 }
+					height={ 12 }
+					className={ `googlesitekit-chip-tab-group__chip-item-svg googlesitekit-chip-tab-group__chip-item-svg__${ slug }` }
+				/>
 			}
 			trailingIcon={
 				selectedCount > 0 ? (

diff --git a/assets/js/components/KeyMetrics/ChipTabGroup/index.js b/assets/js/components/KeyMetrics/ChipTabGroup/index.js
@@ -30,7 +30,8 @@ import { useSelect, useDispatch } from 'googlesitekit-data';
 import { Tab, TabBar } from 'googlesitekit-components';
 import {
 	EFFECTIVE_SELECTION,
-	KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG,
+	KEY_METRICS_GROUP_CURRENT,
+	KEY_METRICS_GROUP_SUGGESTED,
 	KEY_METRICS_GROUP_CONTENT_PERFORMANCE,
 	KEY_METRICS_GROUP_DRIVING_TRAFFIC,
 	KEY_METRICS_GROUP_GENERATING_LEADS,
@@ -47,22 +48,24 @@ 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 StarFill from '../../../../svg/icons/star-fill.svg';
+import Null from '../../../components/Null';
 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';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
 
-const currentSelectionGroup = {
-	SLUG: KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG,
-	LABEL: __( 'Current selection', 'google-site-kit' ),
+const icons = {
+	[ KEY_METRICS_GROUP_CURRENT.SLUG ]: CheckMark,
+	[ KEY_METRICS_GROUP_SUGGESTED.SLUG ]: StarFill,
 };
 
 export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 	const [ isActive, setIsActive ] = useState(
-		KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG
+		KEY_METRICS_GROUP_CURRENT.SLUG
 	);
 	// Used for mobile chip tabs, which leverages the TabBar component for seemless horizontal scroll
 	// but it accepts a numerical index for the active tab.
@@ -92,6 +95,12 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 				UNSTAGED_SELECTION
 			) || []
 	);
+	const isUserInputCompleted = useSelect( ( select ) =>
+		select( CORE_USER ).isUserInputCompleted()
+	);
+	const answerBasedMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getAnswerBasedMetrics()
+	);
 
 	const currentlyActiveEvents = useSelect( ( select ) => {
 		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
@@ -117,6 +126,7 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 		const userInputSettings = select( CORE_USER ).getUserInputSettings();
 		return userInputSettings?.includeConversionEvents?.values;
 	} );
+
 	const isGA4Connected = useSelect( ( select ) =>
 		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
@@ -142,8 +152,8 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 			currentlyActiveEvents?.includes( item )
 	);
 
-	const keyMetricsGroups = useMemo(
-		() => [
+	const keyMetricsGroups = useMemo( () => {
+		return [
 			KEY_METRICS_GROUP_VISITORS,
 			KEY_METRICS_GROUP_DRIVING_TRAFFIC,
 			...( hasGeneratingLeadsGroup?.length
@@ -153,13 +163,20 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 				? [ KEY_METRICS_GROUP_SELLING_PRODUCTS ]
 				: [] ),
 			KEY_METRICS_GROUP_CONTENT_PERFORMANCE,
-		],
-		[ hasGeneratingLeadsGroup, hasSellingProductsGroup ]
-	);
+		];
+	}, [ hasGeneratingLeadsGroup, hasSellingProductsGroup ] );
+
+	const dynamicGroups = useMemo( () => {
+		if ( isUserInputCompleted ) {
+			return [ KEY_METRICS_GROUP_CURRENT, KEY_METRICS_GROUP_SUGGESTED ];
+		}
+
+		return [ KEY_METRICS_GROUP_CURRENT ];
+	}, [ isUserInputCompleted ] );
 
 	const allGroups = useMemo(
-		() => [ currentSelectionGroup, ...keyMetricsGroups ],
-		[ keyMetricsGroups ]
+		() => [ ...dynamicGroups, ...keyMetricsGroups ],
+		[ dynamicGroups, keyMetricsGroups ]
 	);
 
 	const newBadgeEvents = useSelect( ( select ) => {
@@ -200,21 +217,31 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 
 	// 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 selectedCounts = { [ KEY_METRICS_GROUP_CURRENT.SLUG ]: 0 };
 	const activeMetricItems = {};
 	const newlyDetectedMetrics = {};
 
 	for ( const metricItemSlug in allMetricItems ) {
 		const metricGroup = allMetricItems[ metricItemSlug ].group;
 		if (
 			metricGroup === isActive ||
-			( isActive === currentSelectionGroup.SLUG &&
+			( isActive === KEY_METRICS_GROUP_CURRENT.SLUG &&
 				effectiveSelection.includes( metricItemSlug ) )
 		) {
 			activeMetricItems[ metricItemSlug ] =
 				allMetricItems[ metricItemSlug ];
 		}
 
+		if (
+			isActive === KEY_METRICS_GROUP_SUGGESTED.SLUG &&
+			answerBasedMetrics.includes( metricItemSlug )
+		) {
+			if ( answerBasedMetrics.includes( metricItemSlug ) ) {
+				activeMetricItems[ metricItemSlug ] =
+					allMetricItems[ metricItemSlug ];
+			}
+		}
+
 		if ( ! selectedCounts[ metricGroup ] ) {
 			const selectedCount = Object.keys( allMetricItems ).filter(
 				( slug ) => {
@@ -291,6 +318,8 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 	useEffect( () => {
 		// Ensure that current selection group is always active when selection panel re-opens.
 		if ( ! isSelectionPanelOpenPrevious && isSelectionPanelOpen ) {
+			setIsActive( KEY_METRICS_GROUP_CURRENT.SLUG );
+			setActiveGroupIndex( 0 );
 			if ( newlyDetectedMetricsKeys.length && isMobileBreakpoint ) {
 				const firstNewlyDetectedGroup = allGroups.find(
 					( group ) => group.SLUG === newlyDetectedMetricsKeys[ 0 ]
@@ -302,7 +331,7 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 				setIsActive( firstNewlyDetectedGroup.SLUG );
 			} else {
 				setActiveGroupIndex( 0 );
-				setIsActive( KEY_METRICS_CURRENT_SELECTION_GROUP_SLUG );
+				setIsActive( KEY_METRICS_GROUP_CURRENT.SLUG );
 			}
 		}
 
@@ -321,7 +350,7 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 	] );
 
 	const chipItemRows = [
-		[ currentSelectionGroup, ...keyMetricsGroups.slice( 0, 2 ) ],
+		[ ...dynamicGroups, ...keyMetricsGroups.slice( 0, 2 ) ],
 		[ ...keyMetricsGroups.slice( 2 ) ],
 	];
 
@@ -360,24 +389,29 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
 							onChipChange( null, index )
 						}
 					>
-						{ allGroups.map( ( group, index ) => (
-							<Tab key={ index } aria-label={ group.LABEL }>
-								{ index === 0 && (
-									<span className="googlesitekit-chip-tab-group__tab-item-mobile-svg">
-										<CheckMark width={ 12 } height={ 12 } />
-									</span>
-								) }
-								{ group.LABEL }
-								{ selectedCounts[ group.SLUG ] > 0 && (
-									<span className="googlesitekit-chip-tab-group__chip-item-count">
-										({ selectedCounts[ group.SLUG ] })
-									</span>
-								) }
-								{ !! newlyDetectedMetrics?.[ group.SLUG ] && (
-									<span className="googlesitekit-chip-tab-group__chip-item-new-dot" />
-								) }
-							</Tab>
-						) ) }
+						{ allGroups.map( ( group, index ) => {
+							const Icon = icons[ group.SLUG ] || Null;
+							return (
+								<Tab key={ index } aria-label={ group.LABEL }>
+									<Icon
+										width={ 12 }
+										height={ 12 }
+										className={ `googlesitekit-chip-tab-group__chip-item-svg googlesitekit-chip-tab-group__tab-item-mobile-svg googlesitekit-chip-tab-group__chip-item-svg__${ group.SLUG }` }
+									/>
+									{ group.LABEL }
+									{ selectedCounts[ group.SLUG ] > 0 && (
+										<span className="googlesitekit-chip-tab-group__chip-item-count">
+											({ selectedCounts[ group.SLUG ] })
+										</span>
+									) }
+									{ !! newlyDetectedMetrics?.[
+										group.SLUG
+									] && (
+										<span className="googlesitekit-chip-tab-group__chip-item-new-dot" />
+									) }
+								</Tab>
+							);
+						} ) }
 					</TabBar>
 				) }
 			</div>

diff --git a/assets/js/components/KeyMetrics/ChipTabGroup/index.stories.js b/assets/js/components/KeyMetrics/ChipTabGroup/index.stories.js
@@ -28,6 +28,7 @@ import Footer from '../MetricsSelectionPanel/Footer';
 import WithRegistrySetup from '../../../../../tests/js/WithRegistrySetup';
 import {
 	provideKeyMetrics,
+	provideKeyMetricsUserInputSettings,
 	provideModules,
 	provideSiteInfo,
 	provideUserAuthentication,
@@ -109,6 +110,9 @@ function Template() {
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
 Default.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_USER ).receiveIsUserInputCompleted( false );
+	},
 	features: [ 'conversionReporting' ],
 };
 Default.scenario = {
@@ -127,6 +131,7 @@ WithError.args = {
 		];
 
 		provideKeyMetrics( registry, { widgetSlugs: savedKeyMetrics } );
+		registry.dispatch( CORE_USER ).receiveIsUserInputCompleted( false );
 
 		registry.dispatch( CORE_FORMS ).setValues( KEY_METRICS_SELECTION_FORM, {
 			[ KEY_METRICS_SELECTED ]: savedKeyMetrics,
@@ -147,6 +152,24 @@ WithError.scenario = {
 	label: 'Components/KeyMetrics/ChipTabGroup/WithError',
 };
 
+export const WithSuggestedGroup = Template.bind( {} );
+WithSuggestedGroup.storyName = 'With Suggested Group';
+WithSuggestedGroup.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_USER ).receiveIsUserInputCompleted( true );
+		provideKeyMetricsUserInputSettings( registry, {
+			purpose: {
+				values: [ 'sell_products' ],
+				scope: 'site',
+			},
+		} );
+	},
+	features: [ 'conversionReporting' ],
+};
+WithSuggestedGroup.scenario = {
+	label: 'Components/KeyMetrics/ChipTabGroup/WithSuggestedGroup',
+};
+
 export default {
 	title: 'Key Metrics/ChipTabGroup',
 	component: SelectionPanel,

diff --git a/assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js b/assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js
@@ -50,11 +50,14 @@ import {
 import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
 import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { trackEvent } from '../../util';
+import useViewContext from '../../hooks/useViewContext';
 
 function ConfirmSitePurposeChangeModal( {
 	dialogActive = false,
 	handleDialog = null,
 } ) {
+	const viewContext = useViewContext();
 	const [ isSaving, setIsSaving ] = useState( false );
 
 	const includeConversionTailoredMetrics = useSelect( ( select ) => {
@@ -113,13 +116,22 @@ function ConfirmSitePurposeChangeModal( {
 		setUIValues( {
 			[ USER_INPUT_CURRENTLY_EDITING_KEY ]: undefined,
 		} );
+
+		// Handle internal tracking.
+		trackEvent(
+			`${ viewContext }_kmw-settings-tailored-metrics-suggestions`,
+			'cancel_update_metrics_selection',
+			'conversion_reporting'
+		);
+
 		handleDialog();
 	}, [
 		handleDialog,
 		savedPurpose,
 		resetUserInputSettings,
 		setValues,
 		setUIValues,
+		viewContext,
 	] );
 
 	const userInputPurposeConversionEvents = useSelect( ( select ) => {
@@ -150,13 +162,22 @@ function ConfirmSitePurposeChangeModal( {
 		await saveUserInputSettings();
 
 		setIsSaving( false );
+
+		// Handle internal tracking.
+		trackEvent(
+			`${ viewContext }_kmw-settings-tailored-metrics-suggestions`,
+			'confirm_update_metrics_selection',
+			'conversion_reporting'
+		);
+
 		onClose();
 	}, [
 		saveUserInputSettings,
 		onClose,
 		setIsSaving,
 		setUserInputSetting,
 		userInputPurposeConversionEvents,
+		viewContext,
 	] );
 
 	return (