From a0919849baf5d95ec734d23e27d4b16fbdb70d17 Mon Sep 17 00:00:00 2001
From: Hussain Thajutheen <hussain.thajutheen@10up.com>
Date: Thu, 1 Dec 2022 23:30:51 +0530
Subject: [PATCH 1/3] Hide connect GA4 CTA and show a text if no access.

---
 .../settings/SettingsActiveModule/Header.js   | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/assets/js/components/settings/SettingsActiveModule/Header.js b/assets/js/components/settings/SettingsActiveModule/Header.js
index fb5388878a1..f1c9dd356ea 100644
--- 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

From 5e6e0ac8cf9f6cf03d2dea0bec333f9e1e9d5065 Mon Sep 17 00:00:00 2001
From: Hussain Thajutheen <hussain.thajutheen@10up.com>
Date: Thu, 1 Dec 2022 23:48:25 +0530
Subject: [PATCH 2/3] Add test cases.

---
 .../SettingsActiveModule/Header.test.js       | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/assets/js/components/settings/SettingsActiveModule/Header.test.js b/assets/js/components/settings/SettingsActiveModule/Header.test.js
index 5bc8c7961f1..11bc287d65a 100644
--- 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' );
 

From 2ed5588191177295e1e15338a26fa5b75c8553d5 Mon Sep 17 00:00:00 2001
From: Hussain Thajutheen <hussain.thajutheen@10up.com>
Date: Fri, 2 Dec 2022 00:23:10 +0530
Subject: [PATCH 3/3] Update test.

---
 .../js/components/settings/SettingsActiveModule/index.test.js   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/js/components/settings/SettingsActiveModule/index.test.js b/assets/js/components/settings/SettingsActiveModule/index.test.js
index 4a3b5b81c72..e41189b79d3 100644
--- 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', () => {