Merge pull request #6241 from google/enhance/5886-settings-header-status

Enhance/5886 - Update Analytics settings header
google · Dec 2, 2022 · 74ca163 · 74ca163
2 parents f5160c8 + 2ed5588
commit 74ca163
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/assets/js/components/settings/SettingsActiveModule/Header.js b/assets/js/components/settings/SettingsActiveModule/Header.js
@@ -50,7 +50,11 @@ import Badge from '../../Badge';
 import { trackEvent } from '../../../util';
 import useViewContext from '../../../hooks/useViewContext';
 import { CORE_FORMS } from '../../../googlesitekit/datastore/forms/constants';
-import { FORM_SETUP } from '../../../modules/analytics/datastore/constants';
+import {
+	FORM_SETUP,
+	MODULES_ANALYTICS,
+} from '../../../modules/analytics/datastore/constants';
+import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
 const { useSelect, useDispatch } = Data;
 
 export default function Header( { slug } ) {
@@ -77,6 +81,22 @@ export default function Header( { slug } ) {
 		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
 
+	const loggedInUserID = useSelect( ( select ) =>
+		select( CORE_USER ).getID()
+	);
+	const hasAnalyticsAccess = useSelect( ( select ) => {
+		if ( ! ( slug === 'analytics' && module?.connected ) ) {
+			return false;
+		}
+
+		const moduleOwnerID = select( MODULES_ANALYTICS ).getOwnerID();
+
+		if ( moduleOwnerID === loggedInUserID ) {
+			return true;
+		}
+		return select( CORE_MODULES ).hasModuleAccess( 'analytics' );
+	} );
+
 	const { setValues } = useDispatch( CORE_FORMS );
 
 	const openHeader = useCallback( () => {
@@ -237,6 +257,7 @@ export default function Header( { slug } ) {
 
 						{ connected &&
 							slug === 'analytics' &&
+							hasAnalyticsAccess &&
 							! isGA4Connected && (
 								<Fragment>
 									<Button
@@ -251,6 +272,19 @@ export default function Header( { slug } ) {
 								</Fragment>
 							) }
 
+						{ connected &&
+							slug === 'analytics' &&
+							! hasAnalyticsAccess &&
+							! isGA4Connected && (
+								<p className="googlesitekit-settings-module__status">
+									{ __(
+										'Google Analytics 4 is not connected',
+										'google-site-kit'
+									) }
+									<span className="googlesitekit-settings-module__status-icon googlesitekit-settings-module__status-icon--not-connected" />
+								</p>
+							) }
+
 						{ ! connected && (
 							<Fragment>
 								<Button

diff --git a/assets/js/components/settings/SettingsActiveModule/Header.test.js b/assets/js/components/settings/SettingsActiveModule/Header.test.js
@@ -37,6 +37,8 @@ import {
 	provideModules,
 	fireEvent,
 } from '../../../../../tests/js/test-utils';
+import { MODULES_ANALYTICS } from '../../../modules/analytics/datastore/constants';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
 
 describe( 'Header', () => {
 	const history = createHashHistory();
@@ -85,6 +87,7 @@ describe( 'Header', () => {
 				connected: false,
 			},
 		] );
+		registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( {} );
 	} );
 
 	it( 'should render "Connected" for a connected module', () => {
@@ -115,6 +118,44 @@ describe( 'Header', () => {
 		expect( button ).toHaveTextContent( 'Connect Google Analytics 4' );
 	} );
 
+	it( 'should not render the button to connect GA4 if Analytics is connected without access to it but GA4 is not', () => {
+		registry
+			.dispatch( MODULES_ANALYTICS )
+			.receiveGetSettings( { ownerID: 100 } );
+		registry
+			.dispatch( CORE_MODULES )
+			.receiveCheckModuleAccess(
+				{ access: false },
+				{ slug: 'analytics' }
+			);
+		const { container } = render( <Header slug="analytics" />, {
+			registry,
+		} );
+
+		expect(
+			container.querySelector( '.googlesitekit-settings-module__status' )
+		).toHaveTextContent( 'Google Analytics 4 is not connected' );
+	} );
+
+	it( 'should render a GA4 not connected status if Analytics is connected without access to it but GA4 is not', () => {
+		registry
+			.dispatch( MODULES_ANALYTICS )
+			.receiveGetSettings( { ownerID: 100 } );
+		registry
+			.dispatch( CORE_MODULES )
+			.receiveCheckModuleAccess(
+				{ access: false },
+				{ slug: 'analytics' }
+			);
+		const { queryByRole } = render( <Header slug="analytics" />, {
+			registry,
+		} );
+
+		expect(
+			queryByRole( 'button', { name: /connect google analytics 4/i } )
+		).not.toBeInTheDocument();
+	} );
+
 	it( 'should open the tab when ENTER key is pressed', () => {
 		history.push( '/connected-services' );
 

diff --git a/assets/js/components/settings/SettingsActiveModule/index.test.js b/assets/js/components/settings/SettingsActiveModule/index.test.js
@@ -34,6 +34,7 @@ import {
 	act,
 } from '../../../../../tests/js/test-utils';
 import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
+import { MODULES_ANALYTICS } from '../../../modules/analytics/datastore/constants';
 
 describe( 'SettingsModule', () => {
 	const SettingsModuleWithWrapper = ( { slug = 'analytics' } ) => (
@@ -93,6 +94,7 @@ describe( 'SettingsModule', () => {
 				),
 			},
 		] );
+		registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( {} );
 	} );
 
 	it( 'should display SettingsViewComponent when on module view route', () => {