Merge pull request #3331 from google/enhancement/3247-Prepare-split-A…

…nalytics-form-UI

Prepare Analytics setup form UI for split into four sub-variants (depending GA4 support and available properties)

assets/js/modules/analytics/components/setup/SetupForm.js

@@ -32,31 +32,30 @@ import { __ } from '@wordpress/i18n';
  */
 import Data from 'googlesitekit-data';
 import Button from '../../../../components/Button';
-import { STORE_NAME, PROFILE_CREATE, FORM_SETUP, EDIT_SCOPE } from '../../datastore/constants';
+import {
+	SETUP_FLOW_MODE_LEGACY,
+	SETUP_FLOW_MODE_UA,
+	SETUP_FLOW_MODE_GA4,
+	SETUP_FLOW_MODE_GA4_TRANSITIONAL,
+	STORE_NAME,
+	FORM_SETUP,
+	EDIT_SCOPE,
+} from '../../datastore/constants';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
-import {
-	AccountSelect,
-	ExistingGTMPropertyNotice,
-	ExistingTagNotice,
-	ProfileSelect,
-	PropertySelect,
-	ProfileNameTextField,
-} from '../common';
-import StoreErrorNotices from '../../../../components/StoreErrorNotices';
-import GA4Notice from '../common/GA4Notice';
 import { trackEvent } from '../../../../util';
 import { isPermissionScopeError } from '../../../../util/errors';
+import SetupFormLegacy from './SetupFormLegacy';
+import SetupFormUA from './SetupFormUA';
+import SetupFormGA4 from './SetupFormGA4';
+import SetupFormGA4Transitional from './SetupFormGA4Transitional';
 const { useSelect, useDispatch } = Data;
 
 export default function SetupForm( { finishSetup } ) {
-	const accounts = useSelect( ( select ) => select( STORE_NAME ).getAccounts() ) || [];
-	const hasExistingTag = useSelect( ( select ) => select( STORE_NAME ).hasExistingTag() );
 	const canSubmitChanges = useSelect( ( select ) => select( STORE_NAME ).canSubmitChanges() );
 	const hasEditScope = useSelect( ( select ) => select( CORE_USER ).hasScope( EDIT_SCOPE ) );
 	const autoSubmit = useSelect( ( select ) => select( CORE_FORMS ).getValue( FORM_SETUP, 'autoSubmit' ) );
-	// Needed to conditionally show the profile name field and surrounding container.
-	const profileID = useSelect( ( select ) => select( STORE_NAME ).getProfileID() );
+	const setupFlowMode = useSelect( ( select ) => select( STORE_NAME ).getSetupFlowMode() );
 
 	const { setValues } = useDispatch( CORE_FORMS );
 	const { submitChanges } = useDispatch( STORE_NAME );
@@ -83,31 +82,10 @@ export default function SetupForm( { finishSetup } ) {
 
 	return (
 		<form className="googlesitekit-analytics-setup__form" onSubmit={ submitForm }>
-			<GA4Notice />
-			<StoreErrorNotices moduleSlug="analytics" storeName={ STORE_NAME } />
-			<ExistingTagNotice />
-			{ ! hasExistingTag && <ExistingGTMPropertyNotice /> }
-
-			{ ( !! accounts.length && ! hasExistingTag ) && (
-				<p className="googlesitekit-margin-bottom-0">
-					{ __( 'Please select the account information below. You can change this view later in your settings.', 'google-site-kit' ) }
-				</p>
-			) }
-
-			<div className="googlesitekit-setup-module__inputs">
-				<AccountSelect />
-
-				<PropertySelect />
-
-				<ProfileSelect />
-			</div>
-
-			{ profileID === PROFILE_CREATE && (
-				<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
-					<ProfileNameTextField />
-				</div>
-			) }
-
+			{ setupFlowMode === SETUP_FLOW_MODE_LEGACY && <SetupFormLegacy /> }
+			{ setupFlowMode === SETUP_FLOW_MODE_UA && <SetupFormUA /> }
+			{ setupFlowMode === SETUP_FLOW_MODE_GA4 && <SetupFormGA4 /> }
+			{ setupFlowMode === SETUP_FLOW_MODE_GA4_TRANSITIONAL && <SetupFormGA4Transitional /> }
 			<div className="googlesitekit-setup-module__action">
 				<Button disabled={ ! canSubmitChanges }>
 					{ __( 'Configure Analytics', 'google-site-kit' ) }

assets/js/modules/analytics/components/setup/SetupFormGA4.js

@@ -0,0 +1,38 @@
+/**
+ * Analytics GA4 Setup form.
+ *
+ * Site Kit by Google, Copyright 2021 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AccountSelect } from '../common';
+
+export default function SetupFormGA4() {
+	return (
+		<Fragment>
+			<div className="googlesitekit-setup-module__inputs">
+				<AccountSelect />
+			</div>
+			<div>SetupFormGA4</div>
+		</Fragment>
+	);
+}

assets/js/modules/analytics/components/setup/SetupFormGA4Transitional.js

@@ -0,0 +1,39 @@
+/**
+ * Analytics GA4Transitional Setup form.
+ *
+ * Site Kit by Google, Copyright 2021 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AccountSelect } from '../common';
+
+export default function SetupFormGA4Transitional() {
+	return (
+		<Fragment>
+			<div className="googlesitekit-setup-module__inputs">
+				<AccountSelect />
+			</div>
+			<div>SetupFormGA4Transitional</div>
+		</Fragment>
+	);
+}
+

assets/js/modules/analytics/components/setup/SetupFormLegacy.js

@@ -0,0 +1,78 @@
+/**
+ * Analytics Legacy Setup form.
+ *
+ * Site Kit by Google, Copyright 2021 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import {
+	AccountSelect,
+	ExistingGTMPropertyNotice,
+	ExistingTagNotice,
+	ProfileSelect,
+	PropertySelect,
+	ProfileNameTextField,
+} from '../common';
+import { STORE_NAME, PROFILE_CREATE } from '../../datastore/constants';
+import GA4Notice from '../common/GA4Notice';
+import StoreErrorNotices from '../../../../components/StoreErrorNotices';
+
+const { useSelect } = Data;
+
+export default function SetupFormLegacy() {
+	const accounts = useSelect( ( select ) => select( STORE_NAME ).getAccounts() ) || [];
+	const hasExistingTag = useSelect( ( select ) => select( STORE_NAME ).hasExistingTag() );
+
+	// Needed to conditionally show the profile name field and surrounding container.
+	const profileID = useSelect( ( select ) => select( STORE_NAME ).getProfileID() );
+
+	return (
+		<Fragment>
+			<GA4Notice />
+			<StoreErrorNotices moduleSlug="analytics" storeName={ STORE_NAME } />
+			<ExistingTagNotice />
+			{ ! hasExistingTag && <ExistingGTMPropertyNotice /> }
+
+			{ ( !! accounts.length && ! hasExistingTag ) && (
+				<p className="googlesitekit-margin-bottom-0">
+					{ __( 'Please select the account information below. You can change this view later in your settings.', 'google-site-kit' ) }
+				</p>
+			) }
+
+			<div className="googlesitekit-setup-module__inputs">
+				<AccountSelect />
+
+				<PropertySelect />
+
+				<ProfileSelect />
+			</div>
+
+			{ profileID === PROFILE_CREATE && (
+				<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
+					<ProfileNameTextField />
+				</div>
+			) }
+		</Fragment>
+	);
+}

assets/js/modules/analytics/components/setup/SetupFormUA.js

@@ -0,0 +1,39 @@
+/**
+ * Analytics UA Setup form.
+ *
+ * Site Kit by Google, Copyright 2021 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AccountSelect } from '../common';
+
+export default function SetupFormUA() {
+	return (
+		<Fragment>
+			<div className="googlesitekit-setup-module__inputs">
+				<AccountSelect />
+			</div>
+			<div>SetupFormUA</div>
+		</Fragment>
+	);
+}
+

assets/js/modules/analytics/components/setup/SetupMain.js

@@ -57,6 +57,7 @@ export default function SetupMain( { finishSetup } ) {
 	const hasResolvedAccounts = useSelect( ( select ) => select( STORE_NAME ).hasFinishedResolution( 'getAccounts' ) );
 	const usingProxy = useSelect( ( select ) => select( CORE_SITE ).isUsingProxy() );
 	const isNavigating = useSelect( ( select ) => select( CORE_LOCATION ).isNavigating() );
+	const setupFlowMode = useSelect( ( select ) => select( STORE_NAME ).getSetupFlowMode() );
 
 	const { hasGTMAnalyticsPropertyID, hasGTMAnalyticsPropertyIDPermission } = useSelect( ( select ) => {
 		const gtmPropertyID = select( MODULES_TAGMANAGER ).getSingleAnalyticsPropertyID();
@@ -78,7 +79,7 @@ export default function SetupMain( { finishSetup } ) {
 	let viewComponent;
 	// Here we also check for `hasResolvedAccounts` to prevent showing a different case below
 	// when the component initially loads and has yet to start fetching accounts.
-	if ( isDoingSubmitChanges || ! hasResolvedAccounts || isNavigating ) {
+	if ( isDoingSubmitChanges || ! hasResolvedAccounts || isNavigating || setupFlowMode === undefined ) {
 		viewComponent = <ProgressBar />;
 	} else if ( hasExistingTag && hasExistingTagPermission === false ) {
 		viewComponent = <ExistingTagError />;

assets/js/modules/analytics/components/setup/index.js

@@ -18,3 +18,8 @@
 
 export { default as SetupForm } from './SetupForm';
 export { default as SetupMain } from './SetupMain';
+export { default as SetupFormLegacy } from './SetupFormLegacy';
+export { default as SetupFormUA } from './SetupFormUA';
+export { default as SetupFormGA4 } from './SetupFormGA4';
+export { default as SetupFormGA4Transitional } from './SetupFormGA4Transitional';
+

assets/js/modules/analytics/datastore/setup-flow.js

@@ -28,14 +28,15 @@ import {
 	SETUP_FLOW_MODE_GA4_TRANSITIONAL,
 } from './constants';
 import { MODULES_ANALYTICS_4 } from '../../analytics-4/datastore/constants';
+import { isFeatureEnabled } from '../../../features';
 
 const { createRegistrySelector } = Data;
 
 const baseSelectors = {
 	getSetupFlowMode: createRegistrySelector( ( select ) => () => {
-		// The Google Analytics 4 datastore hasn't been loaded, so we have
+		// The Google Analytics 4 is not enabled, so we have
 		// to use the legacy implementation.
-		if ( ! select( MODULES_ANALYTICS_4 ) ) {
+		if ( ! isFeatureEnabled( 'ga4setup' ) ) {
 			return SETUP_FLOW_MODE_LEGACY;
 		}
 

assets/js/modules/analytics/datastore/setup-flow.test.js

@@ -16,11 +16,6 @@
  * limitations under the License.
  */
 
-/**
- * WordPress dependencies
- */
-import { createRegistry } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
@@ -33,8 +28,8 @@ import {
 	SETUP_FLOW_MODE_GA4_TRANSITIONAL,
 } from './constants';
 import { createTestRegistry, unsubscribeFromAll } from 'tests/js/utils';
-import * as modulesAnalytics from '../';
 import { MODULES_ANALYTICS_4 } from '../../analytics-4/datastore/constants';
+import { enabledFeatures } from '../../../features';
 
 const accountID = 'pub-12345678';
 
@@ -107,6 +102,8 @@ describe( 'modules/analytics setup-flow', () => {
 		registry = createTestRegistry();
 		// Receive empty settings to prevent unexpected fetch by resolver.
 		registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( {} );
+
+		enabledFeatures.add( 'ga4setup' );
 	} );
 
 	afterAll( () => {
@@ -119,14 +116,8 @@ describe( 'modules/analytics setup-flow', () => {
 
 	describe( 'selectors', () => {
 		describe( 'getSetupFlowMode', () => {
-			it( 'returns "legacy" if the modules/analytics-4 store is not available ', async () => {
-				// Create a new registry with only the Analytics Module enabled;
-				// the GA4 datastore won't be loaded at all.
-				registry = createRegistry();
-
-				modulesAnalytics.registerStore( registry );
-				// Receive empty settings to prevent unexpected fetch by resolver.
-				registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( {} );
+			it( 'returns "legacy" if the feature flag ga4setup is disabled ', async () => {
+				enabledFeatures.delete( 'ga4setup' );
 
 				expect( registry.select( MODULES_ANALYTICS ).getSetupFlowMode() ).toBe( SETUP_FLOW_MODE_LEGACY );
 			} );