Merge pull request #6817 from google/enhance/#6744-analytics-settings…

…-edit-view Enhance/#6744 - Update Analytics SettingsEdit and SettingsView
google · Apr 11, 2023 · ce3938d · ce3938d
2 parents 57d8a8f + facf56e
commit ce3938d
Show file tree

Hide file tree

Showing 34 changed files with 423 additions and 82 deletions.
diff --git a/assets/js/modules/analytics/components/common/EnableUniversalAnalytics.js b/assets/js/modules/analytics/components/common/EnableUniversalAnalytics.js
@@ -20,25 +20,37 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useMount } from 'react-use';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { Fragment, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Fragment,
+	useCallback,
+	createInterpolateElement,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { Switch } from 'googlesitekit-components';
 import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
+import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
 import { MODULES_ANALYTICS, FORM_SETUP } from '../../datastore/constants';
+import { TYPE_INFO } from '../../../../components/SettingsNotice';
 import ProfileSelect from './ProfileSelect';
 import PropertySelect from './PropertySelect';
+import SettingsNotice from '../../../../components/SettingsNotice/SettingsNotice';
+import WarningIcon from '../../../../../../assets/svg/icons/warning-icon.svg';
 const { useSelect, useDispatch } = Data;
 
-export default function EnableUniversalAnalytics( { children } ) {
+export default function EnableUniversalAnalytics( {
+	children,
+	hasModuleAccess = true,
+} ) {
 	const accountID = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS ).getAccountID()
 	);
@@ -49,24 +61,52 @@ export default function EnableUniversalAnalytics( { children } ) {
 
 		return select( MODULES_ANALYTICS ).getProperties( accountID ) || [];
 	} );
-
-	const { setValues } = useDispatch( CORE_FORMS );
-
+	const propertyID = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS ).getPropertyID()
+	);
 	const isUAEnabled = useSelect( ( select ) =>
 		select( CORE_FORMS ).getValue( FORM_SETUP, 'enableUA' )
 	);
+	const module = useSelect( ( select ) =>
+		select( CORE_MODULES ).getModule( 'analytics' )
+	);
+
+	const { setValues } = useDispatch( CORE_FORMS );
+	const { resetPropertyAndProfileIDs, revertPropertyAndProfileIDs } =
+		useDispatch( MODULES_ANALYTICS );
 
 	const onChange = useCallback( () => {
+		if ( isUAEnabled ) {
+			resetPropertyAndProfileIDs();
+		} else {
+			revertPropertyAndProfileIDs();
+		}
+
 		setValues( FORM_SETUP, { enableUA: ! isUAEnabled } );
-	}, [ setValues, isUAEnabled ] );
+	}, [
+		isUAEnabled,
+		setValues,
+		resetPropertyAndProfileIDs,
+		revertPropertyAndProfileIDs,
+	] );
+
+	const formattedOwnerName = module?.owner?.login
+		? `<strong>${ module.owner.login }</strong>`
+		: __( 'Another admin', 'google-site-kit' );
+
+	useMount( () => {
+		if ( propertyID ) {
+			setValues( FORM_SETUP, { enableUA: true } );
+		}
+	} );
 
 	if ( properties.length === 0 ) {
 		return null;
 	}
 
 	return (
 		<Fragment>
-			<div className="googlesitekit-analytics-usesnippet">
+			<div className="googlesitekit-analytics-enable">
 				<Switch
 					label={ __(
 						'Enable Universal Analytics',
@@ -86,12 +126,33 @@ export default function EnableUniversalAnalytics( { children } ) {
 			{ isUAEnabled && (
 				<Fragment>
 					<div className="googlesitekit-setup-module__inputs">
-						<PropertySelect />
-						<ProfileSelect />
+						<PropertySelect hasModuleAccess={ hasModuleAccess } />
+						<ProfileSelect hasModuleAccess={ hasModuleAccess } />
 					</div>
 
 					{ /* Renders the SetupUseSnippetSwitch or SettingsUseSnippetSwitch */ }
 					{ children }
+
+					{ hasModuleAccess === false && (
+						<SettingsNotice
+							type={ TYPE_INFO }
+							Icon={ WarningIcon }
+							notice={ createInterpolateElement(
+								sprintf(
+									/* translators: 1: module owner's name, 2: module name */
+									__(
+										'%1$s configured %2$s and you don’t have access to its configured property. Contact them to share access or change the configured property.',
+										'google-site-kit'
+									),
+									formattedOwnerName,
+									module?.name
+								),
+								{
+									strong: <strong />,
+								}
+							) }
+						/>
+					) }
 				</Fragment>
 			) }
 		</Fragment>
@@ -100,4 +161,5 @@ export default function EnableUniversalAnalytics( { children } ) {
 
 EnableUniversalAnalytics.propTypes = {
 	children: PropTypes.node.isRequired,
+	hasModuleAccess: PropTypes.bool,
 };
diff --git a/assets/js/modules/analytics/components/settings/GA4SettingsControls.js b/assets/js/modules/analytics/components/settings/GA4SettingsControls.js
@@ -36,20 +36,23 @@ import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants'
 import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
 import { FORM_SETUP, MODULES_ANALYTICS } from '../../datastore/constants';
 import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
-import { GA4ActivateSwitch } from '../common';
+import { AccountSelect, GA4ActivateSwitch } from '../common';
 import {
 	PropertySelect,
 	WebDataStreamSelect,
 } from '../../../analytics-4/components/common';
 import SettingsUseSnippetSwitch from '../../../analytics-4/components/settings/SettingsUseSnippetSwitch';
 import JoyrideTooltip from '../../../../components/JoyrideTooltip';
 import GA4SettingsNotice from './GA4SettingsNotice';
+import { useFeature } from '../../../../hooks/useFeature';
 import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
 const { useSelect, useDispatch } = Data;
 
 export default function GA4SettingsControls( props ) {
 	const { hasAnalyticsAccess, hasAnalytics4Access } = props;
 
+	const ga4ReportingEnabled = useFeature( 'ga4Reporting' );
+
 	const { setValues } = useDispatch( CORE_FORMS );
 	const { matchAndSelectProperty } = useDispatch( MODULES_ANALYTICS_4 );
 
@@ -96,6 +99,9 @@ export default function GA4SettingsControls( props ) {
 			</h4>
 
 			<div className="googlesitekit-setup-module__inputs">
+				{ ga4ReportingEnabled && (
+					<AccountSelect hasModuleAccess={ hasModuleAccess } />
+				) }
 				<PropertySelect
 					hasModuleAccess={ hasModuleAccess }
 					isDisabled={ isDisabled }

diff --git a/assets/js/modules/analytics/components/settings/GA4SettingsView.js b/assets/js/modules/analytics/components/settings/GA4SettingsView.js
@@ -35,9 +35,11 @@ import {
 import Link from '../../../../components/Link';
 import VisuallyHidden from '../../../../components/VisuallyHidden';
 import { escapeURI } from '../../../../util/escape-uri';
+import { useFeature } from '../../../../hooks/useFeature';
 const { useSelect } = Data;
 
 export default function GA4SettingsView() {
+	const ga4ReportingEnabled = useFeature( 'ga4Reporting' );
 	const ga4PropertyID = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS_4 ).getPropertyID()
 	);
@@ -66,6 +68,16 @@ export default function GA4SettingsView() {
 	return (
 		<Fragment>
 			<div className="googlesitekit-settings-module__meta-items">
+				{ ga4ReportingEnabled && (
+					<div className="googlesitekit-settings-module__meta-item">
+						<h5 className="googlesitekit-settings-module__meta-item-type">
+							{ __( 'Account', 'google-site-kit' ) }
+						</h5>
+						<p className="googlesitekit-settings-module__meta-item-data">
+							<DisplaySetting value={ accountID } />
+						</p>
+					</div>
+				) }
 				<div className="googlesitekit-settings-module__meta-item">
 					<h5 className="googlesitekit-settings-module__meta-item-type">
 						{ __(

diff --git a/assets/js/modules/analytics/components/settings/SettingsForm.js b/assets/js/modules/analytics/components/settings/SettingsForm.js
@@ -30,20 +30,23 @@ import { ProgressBar } from 'googlesitekit-components';
 import {
 	AdsConversionIDTextField,
 	AnonymizeIPSwitch,
+	EnableUniversalAnalytics,
 	ExistingGTMPropertyNotice,
 	TrackingExclusionSwitches,
 } from '../common';
 import StoreErrorNotices from '../../../../components/StoreErrorNotices';
-import { MODULES_ANALYTICS } from '../../datastore/constants';
+import { FORM_SETUP, MODULES_ANALYTICS } from '../../datastore/constants';
 import { MODULES_TAGMANAGER } from '../../../tagmanager/datastore/constants';
 import SettingsUACutoffWarning from './SettingsUACutoffWarning';
 import SettingsControls from './SettingsControls';
 import GA4SettingsControls from './GA4SettingsControls';
 import EntityOwnershipChangeNotice from '../../../../components/settings/EntityOwnershipChangeNotice';
-import { isValidAccountID } from '../../util';
+import { isValidAccountID, isValidPropertyID } from '../../util';
 import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
 import GA4DashboardViewToggle from './GA4DashboardViewToggle';
 import { useFeature } from '../../../../hooks/useFeature';
+import SettingsUseSnippetSwitch from './SettingsUseSnippetSwitch';
+import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
 const { useSelect } = Data;
 
 export default function SettingsForm( {
@@ -54,6 +57,13 @@ export default function SettingsForm( {
 	const isGA4Connected = useSelect( ( select ) =>
 		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
+	const propertyID = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS ).getPropertyID()
+	);
+	const isUAConnected = isValidPropertyID( propertyID );
+	const isUAEnabled = useSelect( ( select ) =>
+		select( CORE_FORMS ).getValue( FORM_SETUP, 'enableUA' )
+	);
 
 	const accountID = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS ).getAccountID()
@@ -74,13 +84,20 @@ export default function SettingsForm( {
 			isTagManagerAvailable &&
 			select( MODULES_TAGMANAGER ).getSingleAnalyticsPropertyID()
 	);
-	const showTrackingExclusion =
-		useAnalyticsSnippet ||
-		( useTagManagerSnippet && analyticsSinglePropertyID );
-
 	const gtmContainersResolved = useSelect( ( select ) =>
 		select( MODULES_ANALYTICS ).hasFinishedLoadingGTMContainers()
 	);
+	const properties = useSelect( ( select ) => {
+		if ( ! accountID ) {
+			return [];
+		}
+
+		return select( MODULES_ANALYTICS ).getProperties( accountID ) || [];
+	} );
+
+	const showTrackingExclusion =
+		useAnalyticsSnippet ||
+		( useTagManagerSnippet && analyticsSinglePropertyID );
 
 	if ( ! gtmContainersResolved ) {
 		return <ProgressBar />;
@@ -97,7 +114,7 @@ export default function SettingsForm( {
 				gtmAnalyticsPropertyID={ analyticsSinglePropertyID }
 			/>
 
-			{ ga4ReportingEnabled && (
+			{ ga4ReportingEnabled && isUAConnected && isUAEnabled && (
 				<div className="googlesitekit-settings-module__fields-group googlesitekit-settings-module__fields-group--no-border">
 					<h4 className="googlesitekit-settings-module__fields-group-title">
 						{ __( 'Dashboard view', 'google-site-kit' ) }
@@ -110,13 +127,28 @@ export default function SettingsForm( {
 				</div>
 			) }
 
-			<SettingsControls hasModuleAccess={ hasAnalyticsAccess } />
+			{ ! ga4ReportingEnabled && (
+				<SettingsControls hasModuleAccess={ hasAnalyticsAccess } />
+			) }
 
 			<GA4SettingsControls
 				hasAnalyticsAccess={ hasAnalyticsAccess }
 				hasAnalytics4Access={ hasAnalytics4Access }
 			/>
 
+			{ ga4ReportingEnabled && properties.length > 0 && (
+				<div className="googlesitekit-settings-module__fields-group">
+					<h4 className="googlesitekit-settings-module__fields-group-title">
+						{ __( 'Universal Analytics', 'google-site-kit' ) }
+					</h4>
+					<EnableUniversalAnalytics
+						hasModuleAccess={ hasAnalyticsAccess }
+					>
+						<SettingsUseSnippetSwitch />
+					</EnableUniversalAnalytics>
+				</div>
+			) }
+
 			{ isValidAccountID( accountID ) && (
 				<Fragment>
 					<AnonymizeIPSwitch />

diff --git a/assets/js/modules/analytics/components/settings/SettingsForm.stories.js b/assets/js/modules/analytics/components/settings/SettingsForm.stories.js
@@ -23,6 +23,7 @@ import SettingsForm from './SettingsForm';
 import { Cell, Grid, Row } from '../../../../material-components';
 import {
 	DASHBOARD_VIEW_GA4,
+	FORM_SETUP,
 	MODULES_ANALYTICS,
 } from '../../datastore/constants';
 import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
@@ -35,6 +36,7 @@ import {
 import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import * as fixtures from '../../datastore/__fixtures__';
 import * as ga4Fixtures from '../../../analytics-4/datastore/__fixtures__';
+import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
 
 const account = fixtures.accountsPropertiesProfiles.accounts[ 0 ];
 const properties = [
@@ -76,6 +78,31 @@ WithGA4andUASnippet.scenario = {
 	delay: 250,
 };
 
+export const WithoutUAToggleGA4Enabled = Template.bind( null );
+WithoutUAToggleGA4Enabled.storyName = 'Settings w/o UA toggle, GA4 enabled';
+WithoutUAToggleGA4Enabled.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			registry
+				.dispatch( MODULES_ANALYTICS )
+				.receiveGetProperties( [], { accountID } );
+		};
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+WithoutUAToggleGA4Enabled.scenario = {
+	label: 'Modules/Analytics/Settings/SettingsEdit/WithoutUAToggleGA4Enabled',
+	delay: 250,
+};
+WithoutUAToggleGA4Enabled.parameters = {
+	features: [ 'ga4Reporting' ],
+};
+
 export const WithoutUAAndGA4AccessGA4NotConnected = Template.bind( null );
 WithoutUAAndGA4AccessGA4NotConnected.storyName =
 	'Settings w/o UA access, GA4 not connected';
@@ -316,6 +343,16 @@ WithDashboardViewToggle.decorators = [
 			registry
 				.dispatch( MODULES_ANALYTICS )
 				.setDashboardView( DASHBOARD_VIEW_GA4 );
+
+			registry.dispatch( MODULES_ANALYTICS ).selectProperty(
+				properties[ 0 ].id,
+				// eslint-disable-next-line sitekit/acronym-case
+				properties[ 0 ].internalWebPropertyId
+			);
+
+			registry
+				.dispatch( CORE_FORMS )
+				.setValues( FORM_SETUP, { enableUA: true } );
 		};
 
 		return (
@@ -351,6 +388,16 @@ WithDashboardViewLabel.decorators = [
 					connected: false,
 				},
 			] );
+
+			registry.dispatch( MODULES_ANALYTICS ).selectProperty(
+				properties[ 0 ].id,
+				// eslint-disable-next-line sitekit/acronym-case
+				properties[ 0 ].internalWebPropertyId
+			);
+
+			registry
+				.dispatch( CORE_FORMS )
+				.setValues( FORM_SETUP, { enableUA: true } );
 		};
 
 		return (