Enhancement/#11541 - Decouple Google Tag Gateway health status from GTG settings

assets/js/components/google-tag-gateway/GoogleTagGatewayToggle.js

@@ -51,15 +51,15 @@ export default function GoogleTagGatewayToggle( { className } ) {
 		select( CORE_SITE ).isGoogleTagGatewayEnabled()
 	);
 	const isLoading = useSelect( ( select ) =>
-		select( CORE_SITE ).isFetchingGetGTGServerRequirementStatus()
+		select( CORE_SITE ).isFetchingPostGTGHealthChecks()
 	);
 	const hasMetServerRequirements = useSelect( ( select ) => {
-		const { isGTGHealthy, isScriptAccessEnabled } = select( CORE_SITE );
+		const { isUpstreamHealthy, isMpathHealthy } = select( CORE_SITE );
 
-		return isGTGHealthy() !== false && isScriptAccessEnabled() !== false;
+		return isUpstreamHealthy() !== false && isMpathHealthy() !== false;
 	} );
 
-	const { fetchGetGTGServerRequirementStatus, setGoogleTagGatewayEnabled } =
+	const { fetchPostGTGHealthChecks, setGoogleTagGatewayEnabled } =
 		useDispatch( CORE_SITE );
 
 	const learnMoreURL = useSelect( ( select ) => {
@@ -74,8 +74,8 @@ export default function GoogleTagGatewayToggle( { className } ) {
 		);
 	} );
 
-	// Fetch the server requirement status on mount.
-	useMount( fetchGetGTGServerRequirementStatus );
+	// Fetch the GTG health status on mount.
+	useMount( fetchPostGTGHealthChecks );
 
 	const handleClick = useCallback( () => {
 		const action = isGoogleTagGatewayEnabled

assets/js/components/google-tag-gateway/GoogleTagGatewayToggle.stories.js

@@ -36,8 +36,8 @@ function Template() {
 	);
 }
 
-const serverRequirementStatusEndpoint = new RegExp(
-	'^/google-site-kit/v1/core/site/data/gtg-server-requirement-status'
+const healthChecksEndpoint = new RegExp(
+	'^/google-site-kit/v1/core/site/data/gtg-health-checks'
 );
 
 export const Default = Template.bind( {} );
@@ -48,11 +48,10 @@ export const ServerRequirementsFail = Template.bind( {} );
 ServerRequirementsFail.storyName = 'Server requirements fail';
 ServerRequirementsFail.args = {
 	setupRegistry: () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: false,
-				isScriptAccessEnabled: false,
+				isUpstreamHealthy: false,
+				isMpathHealthy: false,
 			},
 			status: 200,
 		} );
@@ -64,7 +63,7 @@ export const ServerRequirementsLoading = Template.bind( {} );
 ServerRequirementsLoading.storyName = 'Server requirements loading';
 ServerRequirementsLoading.args = {
 	setupRegistry: () => {
-		freezeFetch( serverRequirementStatusEndpoint );
+		freezeFetch( healthChecksEndpoint );
 	},
 };
 

assets/js/components/google-tag-gateway/GoogleTagGatewayToggle.test.js

@@ -48,8 +48,8 @@ mockTrackEvent.mockImplementation( () => Promise.resolve() );
 describe( 'GoogleTagGatewayToggle', () => {
 	let registry;
 
-	const serverRequirementStatusEndpoint = new RegExp(
-		'^/google-site-kit/v1/core/site/data/gtg-server-requirement-status'
+	const healthChecksEndpoint = new RegExp(
+		'^/google-site-kit/v1/core/site/data/gtg-health-checks'
 	);
 
 	beforeEach( () => {
@@ -62,29 +62,27 @@ describe( 'GoogleTagGatewayToggle', () => {
 
 		registry.dispatch( CORE_SITE ).receiveGetGoogleTagGatewaySettings( {
 			isEnabled: false,
-			isGTGHealthy: null,
-			isScriptAccessEnabled: null,
 		} );
 	} );
 
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'should make a request to fetch the server requirement status', async () => {
-		muteFetch( serverRequirementStatusEndpoint );
+	it( 'should make a request to run health checks', async () => {
+		muteFetch( healthChecksEndpoint );
 
 		const { waitForRegistry } = render( <GoogleTagGatewayToggle />, {
 			registry,
 		} );
 
 		await waitForRegistry();
 
-		expect( fetchMock ).toHaveFetched( serverRequirementStatusEndpoint );
+		expect( fetchMock ).toHaveFetched( healthChecksEndpoint );
 	} );
 
-	it( 'should render in loading state if the server requirement status is still loading', async () => {
-		freezeFetch( serverRequirementStatusEndpoint );
+	it( 'should render in loading state if health checks are still loading', async () => {
+		freezeFetch( healthChecksEndpoint );
 
 		const { container, getByRole, waitForRegistry } = render(
 			<GoogleTagGatewayToggle />,
@@ -101,11 +99,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should render in default state', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );
@@ -127,11 +124,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should render in disabled state if server requirements are not met', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: false,
-				isScriptAccessEnabled: false,
+				isUpstreamHealthy: false,
+				isMpathHealthy: false,
 			},
 			status: 200,
 		} );
@@ -157,11 +153,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should not track an event when the toggle is viewed with no warning notice', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );
@@ -196,11 +191,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should track an event when the warning notice is viewed', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: false,
-				isScriptAccessEnabled: false,
+				isUpstreamHealthy: false,
+				isMpathHealthy: false,
 			},
 			status: 200,
 		} );
@@ -241,11 +235,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should track an event when the `Learn more` link is clicked in the toggle description', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );
@@ -276,11 +269,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should track an event when the `Learn more` link is clicked in the warning notice', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: false,
-				isScriptAccessEnabled: false,
+				isUpstreamHealthy: false,
+				isMpathHealthy: false,
 			},
 			status: 200,
 		} );
@@ -310,18 +302,17 @@ describe( 'GoogleTagGatewayToggle', () => {
 		);
 	} );
 
-	it.each( [ 'isGTGHealthy', 'isScriptAccessEnabled' ] )(
+	it.each( [ 'isUpstreamHealthy', 'isMpathHealthy' ] )(
 		'should not render in disabled state unless %s is explicitly false',
 		async ( requirement ) => {
 			const response = {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			};
 
 			response[ requirement ] = null;
 
-			fetchMock.getOnce( serverRequirementStatusEndpoint, {
+			fetchMock.postOnce( healthChecksEndpoint, {
 				body: response,
 				status: 200,
 			} );
@@ -341,18 +332,17 @@ describe( 'GoogleTagGatewayToggle', () => {
 		}
 	);
 
-	it.each( [ 'isGTGHealthy', 'isScriptAccessEnabled' ] )(
+	it.each( [ 'isUpstreamHealthy', 'isMpathHealthy' ] )(
 		'should render in disabled state if %s is false',
 		async ( requirement ) => {
 			const response = {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			};
 
 			response[ requirement ] = false;
 
-			fetchMock.getOnce( serverRequirementStatusEndpoint, {
+			fetchMock.postOnce( healthChecksEndpoint, {
 				body: response,
 				status: 200,
 			} );
@@ -373,11 +363,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	);
 
 	it( 'should toggle Google tag gateway for advertisers on click', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );
@@ -426,11 +415,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should track an event when the toggle is clicked', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );
@@ -473,11 +461,10 @@ describe( 'GoogleTagGatewayToggle', () => {
 	} );
 
 	it( 'should render a "Beta" badge', async () => {
-		fetchMock.getOnce( serverRequirementStatusEndpoint, {
+		fetchMock.postOnce( healthChecksEndpoint, {
 			body: {
-				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			},
 			status: 200,
 		} );

assets/js/components/google-tag-gateway/__snapshots__/GoogleTagGatewayToggle.test.js.snap

@@ -196,7 +196,7 @@ exports[`GoogleTagGatewayToggle should render in disabled state if server requir
 </div>
 `;
 
-exports[`GoogleTagGatewayToggle should render in loading state if the server requirement status is still loading 1`] = `
+exports[`GoogleTagGatewayToggle should render in loading state if health checks are still loading 1`] = `
 <div>
   <div
     class="googlesitekit-google-tag-gateway-toggle"

assets/js/components/notifications/GoogleTagGatewaySetupBanner.test.js

@@ -89,8 +89,11 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 
 		registry.dispatch( CORE_SITE ).receiveGetGoogleTagGatewaySettings( {
 			isEnabled: false,
-			isGTGHealthy: true,
-			isScriptAccessEnabled: true,
+		} );
+
+		registry.dispatch( CORE_SITE ).receiveGetGTGHealth( {
+			isUpstreamHealthy: true,
+			isMpathHealthy: true,
 		} );
 
 		registry
@@ -121,8 +124,11 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 		it( 'is not active when GTG is enabled', async () => {
 			registry.dispatch( CORE_SITE ).receiveGetGoogleTagGatewaySettings( {
 				isEnabled: true,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
+			} );
+
+			registry.dispatch( CORE_SITE ).receiveGetGTGHealth( {
+				isUpstreamHealthy: true,
+				isMpathHealthy: true,
 			} );
 
 			const isActive = await notification.checkRequirements(
@@ -133,11 +139,14 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 			expect( isActive ).toBe( false );
 		} );
 
-		it( 'is not active when GTG is not healthy', async () => {
+		it( 'is not active when upstream is not healthy', async () => {
 			registry.dispatch( CORE_SITE ).receiveGetGoogleTagGatewaySettings( {
 				isEnabled: false,
-				isGTGHealthy: false,
-				isScriptAccessEnabled: true,
+			} );
+
+			registry.dispatch( CORE_SITE ).receiveGetGTGHealth( {
+				isUpstreamHealthy: false,
+				isMpathHealthy: true,
 			} );
 
 			const isActive = await notification.checkRequirements(
@@ -148,11 +157,14 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 			expect( isActive ).toBe( false );
 		} );
 
-		it( 'is not active when script access is not enabled', async () => {
+		it( 'is not active when mpath is not healthy', async () => {
 			registry.dispatch( CORE_SITE ).receiveGetGoogleTagGatewaySettings( {
 				isEnabled: false,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: false,
+			} );
+
+			registry.dispatch( CORE_SITE ).receiveGetGTGHealth( {
+				isUpstreamHealthy: true,
+				isMpathHealthy: false,
 			} );
 
 			const isActive = await notification.checkRequirements(
@@ -196,8 +208,6 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 		fetchMock.postOnce( gtgSettingsEndpoint, {
 			body: JSON.stringify( {
 				isEnabled: true,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
 			} ),
 			status: 200,
 		} );
@@ -289,8 +299,6 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 		fetchMock.postOnce( gtgSettingsEndpoint, {
 			body: JSON.stringify( {
 				isEnabled: true,
-				isGTGHealthy: true,
-				isScriptAccessEnabled: true,
 			} ),
 			status: 200,
 		} );