Hide connect GA4 CTA and show a text if no access.

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