Merge pull request #8103 from google/benbowler/8081-display-offline-n…

…otification

Update offline notification to use SK GET route.

assets/js/components/DashboardEntityApp.js

@@ -61,6 +61,7 @@ import EntityBannerNotifications from './notifications/EntityBannerNotifications
 import DashboardSharingSettingsButton from './dashboard-sharing/DashboardSharingSettingsButton';
 import useViewOnly from '../hooks/useViewOnly';
 import OfflineNotification from './notifications/OfflineNotification';
+import { useMonitorInternetConnection } from '../hooks/useMonitorInternetConnection';
 const { useSelect } = Data;
 
 function DashboardEntityApp() {
@@ -122,6 +123,8 @@ function DashboardEntityApp() {
 		);
 	} );
 
+	useMonitorInternetConnection();
+
 	let lastWidgetAnchor = null;
 
 	if ( isMonetizationActive ) {

assets/js/components/DashboardMainApp.js

@@ -72,6 +72,7 @@ import {
 } from '../modules/analytics-4/datastore/constants';
 import { EDIT_SCOPE } from '../modules/analytics/datastore/constants';
 import OfflineNotification from './notifications/OfflineNotification';
+import { useMonitorInternetConnection } from '../hooks/useMonitorInternetConnection';
 const { useSelect, useDispatch } = Data;
 
 export default function DashboardMainApp() {
@@ -219,6 +220,8 @@ export default function DashboardMainApp() {
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
+	useMonitorInternetConnection();
+
 	let lastWidgetAnchor = null;
 
 	if ( isMonetizationActive ) {

assets/js/hooks/useMonitorInternetConnection.js

@@ -24,12 +24,12 @@ import { useLifecycles, useInterval } from 'react-use';
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
 import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import API from 'googlesitekit-api';
 import Data from 'googlesitekit-data';
 import { CORE_UI } from '../googlesitekit/datastore/ui/constants';
 
@@ -54,19 +54,21 @@ export function useMonitorInternetConnection() {
 		}
 
 		try {
-			// Use apiFetch directly, instead of our wrapper API, to have
-			// control over the error handling/catching, as status is switched to offline
-			// if request fails to reach the server.
-			const onlineResponse = await apiFetch( {
-				method: 'GET',
-				path: '/google-site-kit/v1/core/site/data/health-checks',
-			} );
+			const connectionCheckResponse = await API.get(
+				'core',
+				'site',
+				'connection-check',
+				undefined,
+				{
+					useCache: false,
+				}
+			);
 
 			// We are only interested if the request was successful, to
 			// confirm online status.
-			const canReachInternetURL = !! onlineResponse.checks;
+			const canReachConnectionCheck = !! connectionCheckResponse;
 
-			setIsOnline( canReachInternetURL );
+			setIsOnline( canReachConnectionCheck );
 		} catch ( err ) {
 			setIsOnline( false );
 		}

assets/js/hooks/useMonitorInternetConnection.test.js

@@ -41,7 +41,7 @@ describe( 'useMonitorInternetConnection', () => {
 	};
 
 	const healthCheckEndpoint = new RegExp(
-		'google-site-kit/v1/core/site/data/health-checks'
+		'google-site-kit/v1/core/site/data/connection-check'
 	);
 
 	const healthCheckResponse = {

includes/Core/Util/Health_Checks.php

@@ -95,6 +95,20 @@ private function get_rest_routes() {
 					),
 				)
 			),
+			new REST_Route(
+				'core/site/data/connection-check',
+				array(
+					array(
+						'methods'             => WP_REST_Server::READABLE,
+						'callback'            => function() {
+							return 'true';
+						},
+						'permission_callback' => function () {
+							return current_user_can( Permissions::VIEW_SHARED_DASHBOARD ) || current_user_can( Permissions::SETUP );
+						},
+					),
+				)
+			),
 		);
 	}