Merge branch 'develop' of github.com:google/site-kit-wp into enhance/#…

…6738-create-setup-form-ga4.

assets/js/components/NewBadge.js

@@ -48,6 +48,8 @@ function NewBadge( { tooltipTitle, learnMoreLink, forceOpen } ) {
 				</Fragment>
 			}
 			placement="top"
+			enterTouchDelay={ 0 }
+			leaveTouchDelay={ 5000 }
 			interactive
 			open={ forceOpen }
 		>

assets/js/components/notifications/ZeroDataStateNotifications/index.js

@@ -28,6 +28,7 @@ import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
 import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
 import useViewOnly from '../../../hooks/useViewOnly';
+import { MODULES_ANALYTICS_4 } from '../../../modules/analytics-4/datastore/constants';
 import { MODULES_ANALYTICS } from '../../../modules/analytics/datastore/constants';
 import { MODULES_SEARCH_CONSOLE } from '../../../modules/search-console/datastore/constants';
 import GatheringDataNotification from './GatheringDataNotification';
@@ -36,9 +37,18 @@ const { useSelect, useInViewSelect } = Data;
 
 export default function ZeroDataStateNotifications() {
 	const viewOnly = useViewOnly();
+	const isGA4DashboardView = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS ).isGA4DashboardView()
+	);
 	const isAnalyticsConnected = useSelect( ( select ) =>
-		select( CORE_MODULES ).isModuleConnected( 'analytics' )
+		select( CORE_MODULES ).isModuleConnected(
+			isGA4DashboardView ? 'analytics-4' : 'analytics'
+		)
 	);
+	const analyticsDataStore = isGA4DashboardView
+		? MODULES_ANALYTICS_4
+		: MODULES_ANALYTICS;
+
 	const canViewSharedAnalytics = useSelect( ( select ) => {
 		if ( ! viewOnly ) {
 			return true;
@@ -83,10 +93,11 @@ export default function ZeroDataStateNotifications() {
 	} );
 
 	const analyticsGatheringData = useInViewSelect( ( select ) =>
+		isGA4DashboardView !== undefined &&
 		isAnalyticsConnected &&
 		canViewSharedAnalytics &&
 		false === showRecoverableAnalytics
-			? select( MODULES_ANALYTICS ).isGatheringData()
+			? select( analyticsDataStore ).isGatheringData()
 			: false
 	);
 	const searchConsoleGatheringData = useInViewSelect(
@@ -96,10 +107,11 @@ export default function ZeroDataStateNotifications() {
 			select( MODULES_SEARCH_CONSOLE ).isGatheringData()
 	);
 	const analyticsHasZeroData = useInViewSelect( ( select ) =>
+		isGA4DashboardView !== undefined &&
 		isAnalyticsConnected &&
 		canViewSharedAnalytics &&
 		false === showRecoverableAnalytics
-			? select( MODULES_ANALYTICS ).hasZeroData()
+			? select( analyticsDataStore ).hasZeroData()
 			: false
 	);
 	const searchConsoleHasZeroData = useInViewSelect(
@@ -115,6 +127,7 @@ export default function ZeroDataStateNotifications() {
 	// notification loads and then replaces the first one.
 	// See: https://github.com/google/site-kit-wp/issues/5008
 	if (
+		isGA4DashboardView === undefined ||
 		analyticsGatheringData === undefined ||
 		searchConsoleGatheringData === undefined ||
 		analyticsHasZeroData === undefined ||

assets/js/googlesitekit/datastore/user/date-range.js

@@ -199,7 +199,9 @@ export const selectors = {
 	 * @return {string} The current reference date as YYYY-MM-DD.
 	 */
 	getReferenceDate( state ) {
-		return state.referenceDate;
+		return (
+			global._googlesitekitBaseData?.referenceDate ?? state.referenceDate
+		);
 	},
 };
 

assets/js/googlesitekit/datastore/user/date-range.test.js

@@ -308,6 +308,16 @@ describe( 'core/user date-range', () => {
 					registry.select( CORE_USER ).getReferenceDate()
 				).toEqual( getDateString( new Date() ) );
 			} );
+
+			it( 'should return the reference date defined in global base data when available', () => {
+				global._googlesitekitBaseData = {
+					referenceDate: '2023-09-01',
+				};
+
+				expect(
+					registry.select( CORE_USER ).getReferenceDate()
+				).toEqual( '2023-09-01' );
+			} );
 		} );
 	} );
 } );

assets/js/modules/analytics-4/constants.js

@@ -24,3 +24,8 @@ export const ACTIVATION_ACKNOWLEDGEMENT_TOOLTIP_STATE_KEY =
 	'activation-acknowledgement-tooltip-state';
 
 export const GA4_ACTIVATION_BANNER_STATE_KEY = 'ga4-activation-banner-state';
+
+export const REPORT_ARGS_SELECTED_METRIC_KEY = '_r.explorerCard..selmet';
+export const REPORT_ARGS_SELECTED_DIMENSION_KEY = '_r.explorerCard..seldim';
+export const REPORT_ARGS_DATA_FILTERS_KEY = '_r..dataFilters';
+export const REPORT_ARGS_NAV_KEY = '_r..nav';

assets/js/modules/analytics-4/datastore/index.js

@@ -27,6 +27,7 @@ import containers from './containers';
 import conversionEvents from './conversion-events';
 import properties from './properties';
 import report from './report';
+import service from './service';
 import tags from './tags';
 import webdatastreams from './webdatastreams';
 import { createSnapshotStore } from '../../../googlesitekit/data/create-snapshot-store';
@@ -39,6 +40,7 @@ const store = Data.combineStores(
 	createSnapshotStore( MODULES_ANALYTICS_4 ),
 	properties,
 	report,
+	service,
 	tags,
 	webdatastreams
 );

assets/js/modules/analytics-4/datastore/properties.js

@@ -477,13 +477,11 @@ const baseActions = {
 		}
 
 		if ( ! measurementID ) {
-			registry
-				.dispatch( MODULES_ANALYTICS_4 )
-				.setGoogleTagAccountID( '' );
-			registry
-				.dispatch( MODULES_ANALYTICS_4 )
-				.setGoogleTagContainerID( '' );
-			registry.dispatch( MODULES_ANALYTICS_4 ).setGoogleTagID( '' );
+			registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {
+				googleTagAccountID: '',
+				googleTagContainerID: '',
+				googleTagID: '',
+			} );
 			return;
 		}
 
@@ -499,13 +497,17 @@ const baseActions = {
 		const { googleTagAccountID, googleTagContainerID, googleTagID } =
 			response;
 
-		registry
-			.dispatch( MODULES_ANALYTICS_4 )
-			.setGoogleTagAccountID( googleTagAccountID );
-		registry
-			.dispatch( MODULES_ANALYTICS_4 )
-			.setGoogleTagContainerID( googleTagContainerID );
-		registry.dispatch( MODULES_ANALYTICS_4 ).setGoogleTagID( googleTagID );
+		// Note that when plain actions are dispatched in a function where an await has occurred (this can be a regular async function that has awaited, or a generator function
+		// action that yields to an async action), they are handled asynchronously when they would normally be synchronous. This means that following the usual pattern of dispatching
+		// individual setter actions for the `googleTagAccountID`, `googleTagContainerID` and `googleTagID` settings each resulted in a rerender of the
+		// GoogleTagIDMismatchNotification component, thus resulting in an erroneous call to the GET:container-destinations endpoint with mismatched settings. To mitigate this, we
+		// dispatch a single action here to set all these settings at once. The same applies to the `setSettings()` call above.
+		// See issue https://github.com/google/site-kit-wp/issues/6784 and the PR https://github.com/google/site-kit-wp/pull/6814.
+		registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {
+			googleTagAccountID,
+			googleTagContainerID,
+			googleTagID,
+		} );
 	},
 
 	/**

assets/js/modules/analytics-4/datastore/service.js

@@ -0,0 +1,113 @@
+/**
+ * `modules/analytics-4` data store: service.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import invariant from 'invariant';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { MODULES_ANALYTICS } from '../../analytics/datastore/constants';
+import { MODULES_ANALYTICS_4 } from './constants';
+import { REPORT_ARGS_NAV_KEY } from '../constants';
+import { generateDateRangeArgs } from '../../analytics/util/report-date-range-args';
+import { escapeURI } from '../../../util/escape-uri';
+import {
+	generateReportDetailArgs,
+	generateReportFilterArgs,
+} from '../utils/report-args';
+const { createRegistrySelector } = Data;
+
+export const selectors = {
+	/**
+	 * Gets a URL for a specific Analytics 4 reporting view on the service.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state        Data store's state.
+	 * @param {string} type         Report type.
+	 * @param {Object} [reportArgs] Report-specific arguments for targeting a specific sub-view.
+	 * @return {(string|undefined)} The service URL.
+	 */
+	getServiceReportURL: createRegistrySelector(
+		( select ) =>
+			( state, type, reportArgs = {} ) => {
+				invariant(
+					type,
+					'type is required to get a service report URL.'
+				);
+
+				const propertyID =
+					select( MODULES_ANALYTICS_4 ).getPropertyID();
+
+				if ( ! propertyID ) {
+					return undefined;
+				}
+
+				const {
+					dates,
+					details = {},
+					filters = {},
+					otherArgs = {},
+				} = reportArgs;
+
+				const embeddedParams = {
+					[ REPORT_ARGS_NAV_KEY ]: 'maui',
+					...( dates ? generateDateRangeArgs( dates ) : {} ),
+					...generateReportDetailArgs( details ),
+					...generateReportFilterArgs( filters ),
+				};
+
+				// Here we turn embeddedParams into a query string without any URI encoding, as the
+				// result will be encoded by addQueryArgs, and we don't want to double-encode it.
+				const params = Object.entries( embeddedParams )
+					.map( ( [ key, value ] ) => `${ key }=${ value }` )
+					.join( '&' );
+
+				const path = addQueryArgs(
+					escapeURI`/p${ propertyID }/reports/explorer`,
+					{
+						params,
+						r: type,
+						...otherArgs,
+					}
+				);
+
+				return select( MODULES_ANALYTICS ).getServiceURL( {
+					query: {
+						pli: 1,
+					},
+					path,
+				} );
+			}
+	),
+};
+
+const store = {
+	selectors,
+};
+
+export default store;