Add check for Jetpack 'google-analytics' module to decide panel visib…

…ility (#86780)

* Add check for Jetpack 'google-analytics' module to decide panel visibility

* Add test

client/my-sites/site-settings/analytics/form-google-analytics.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getFilteredAndSortedPlugins } from 'calypso/state/plugins/installed/selectors-ts';
 import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-route-parameterized';
+import getJetpackModule from 'calypso/state/selectors/get-jetpack-module';
 import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';
 import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
@@ -31,6 +32,7 @@ export const GoogleAnalyticsForm = ( props ) => {
 		uniqueEventTracker,
 		path,
 		isAtomic,
+		isJetpackModuleAvailable,
 		isGoogleAnalyticsEligible,
 	} = props;
 	const [ isCodeValid, setIsCodeValid ] = useState( true );
@@ -85,6 +87,10 @@ export const GoogleAnalyticsForm = ( props ) => {
 		isAtomic,
 	};
 	if ( ( props.siteIsJetpack && ! isAtomic ) || ( isAtomic && isGoogleAnalyticsEligible ) ) {
+		// Google Analytics module is not available (important distinction from not active)
+		if ( ! isJetpackModuleAvailable ) {
+			return null;
+		}
 		return <GoogleAnalyticsJetpackForm { ...newProps } />;
 	}
 	return <GoogleAnalyticsSimpleForm { ...newProps } />;
@@ -94,6 +100,7 @@ const mapStateToProps = ( state ) => {
 	const site = getSelectedSite( state );
 	const siteId = getSelectedSiteId( state );
 	const isGoogleAnalyticsEligible = siteHasFeature( state, siteId, FEATURE_GOOGLE_ANALYTICS );
+	const isJetpackModuleAvailable = Boolean( getJetpackModule( state, siteId, 'google-analytics' ) );
 	const jetpackModuleActive = isJetpackModuleActive( state, siteId, 'google-analytics' );
 	const siteIsJetpack = isJetpackSite( state, siteId );
 	const googleAnalyticsEnabled = site && ( ! siteIsJetpack || jetpackModuleActive );
@@ -108,7 +115,7 @@ const mapStateToProps = ( state ) => {
 		siteId,
 		siteIsJetpack,
 		sitePlugins,
-		jetpackModuleActive,
+		isJetpackModuleAvailable,
 		isAtomic: isAtomicSite( state, siteId ),
 		isGoogleAnalyticsEligible,
 	};

client/my-sites/site-settings/test/form-google-analytics.jsx

@@ -28,6 +28,7 @@ import {
 } from '@automattic/calypso-products';
 import { render, screen } from '@testing-library/react';
 import UpsellNudge from 'calypso/blocks/upsell-nudge';
+import { GoogleAnalyticsForm } from '../analytics/form-google-analytics';
 import GoogleAnalyticsJetpackForm from '../analytics/form-google-analytics-jetpack';
 import GoogleAnalyticsSimpleForm from '../analytics/form-google-analytics-simple';
 
@@ -57,6 +58,21 @@ describe( 'GoogleAnalyticsForm basic tests', () => {
 		} );
 	} );
 
+	test( 'base form should return null when ga module not available in a jetpack site', () => {
+		const gaFormProps = {
+			...props,
+			site: {
+				...props.site,
+				slug: 'test-site',
+			},
+			siteIsJetpack: true,
+			isAtomic: true,
+			isGoogleAnalyticsEligible: true,
+			isJetpackModuleAvailable: false,
+		};
+		render( <GoogleAnalyticsForm { ...gaFormProps } /> );
+		expect( screen.queryByRole( 'form', { name: /analytics/i } ) ).toBeNull();
+	} );
 	test( 'simple form should not blow up and have proper CSS class', () => {
 		render( <GoogleAnalyticsSimpleForm { ...props } /> );
 		expect( screen.queryByRole( 'form', { name: /analytics/i } ) ).toBeVisible();