From 63601160a58ab81fabf032ae5af869a596d0e09b Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Fri, 3 Mar 2023 17:40:25 +0600
Subject: [PATCH 01/35] Add `SettingsKeyMetrics` component.

---
 .../js/components/settings/SettingsAdmin.js   |  2 +
 .../components/settings/SettingsKeyMetrics.js | 77 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 assets/js/components/settings/SettingsKeyMetrics.js

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index 64f1fc7456a..d1c0b503090 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -41,6 +41,7 @@ import { useFeature } from '../../hooks/useFeature';
 import { trackEvent } from '../../util';
 import SettingsPlugin from './SettingsPlugin';
 import useViewContext from '../../hooks/useViewContext';
+import SettingsKeyMetrics from './SettingsKeyMetrics';
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsAdmin() {
@@ -88,6 +89,7 @@ export default function SettingsAdmin() {
 						>
 							<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
 								<Grid>
+									<SettingsKeyMetrics />
 									<UserInputPreview
 										goTo={ goTo }
 										noHeader
diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
new file mode 100644
index 00000000000..80eb1e73ecd
--- /dev/null
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -0,0 +1,77 @@
+/**
+ * SetupModule component.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Switch } from 'googlesitekit-components';
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { useFeature } from '../../hooks/useFeature';
+import useViewOnly from '../../hooks/useViewOnly';
+
+const { useSelect, useDispatch } = Data;
+
+export default function SettingsKeyMetrics() {
+	const dashboardSharingEnabled = useFeature( 'dashboardSharing' );
+	const viewOnly = useViewOnly();
+
+	const isAuthenticated = useSelect( ( select ) =>
+		select( CORE_USER ).isAuthenticated()
+	);
+
+	const keyMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getKeyMetrics()
+	);
+
+	const { setKeyMetricSetting, saveKeyMetrics } = useDispatch( CORE_USER );
+
+	const handleKeyMatricsToggle = useCallback( async () => {
+		await setKeyMetricSetting(
+			'isWidgetHidden',
+			! keyMetrics?.isWidgetHidden
+		);
+		await saveKeyMetrics();
+	}, [ keyMetrics, saveKeyMetrics, setKeyMetricSetting ] );
+
+	if ( ! ( isAuthenticated || ( dashboardSharingEnabled && viewOnly ) ) ) {
+		return null;
+	}
+
+	return (
+		<Switch
+			label={ __(
+				'Display key metrics in dashboard',
+				'google-site-kit'
+			) }
+			checked={ ! keyMetrics?.isWidgetHidden }
+			onClick={ handleKeyMatricsToggle }
+			hideLabel={ false }
+		/>
+	);
+}

From cb05d5b077504062f38b218820d395ce56dff40c Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 9 Mar 2023 13:12:20 +0600
Subject: [PATCH 02/35] Cleanup incorrect implementation logic.

---
 .../js/components/settings/SettingsAdmin.js   | 26 +++++++++----------
 .../components/settings/SettingsKeyMetrics.js | 13 ----------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index d1c0b503090..05b96686c56 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -81,15 +81,15 @@ export default function SettingsAdmin() {
 		<Row>
 			{ userInputEnabled && (
 				<Cell size={ 12 }>
-					{ isUserInputCompleted && (
-						<Layout
-							title={ __( 'Key metrics', 'google-site-kit' ) }
-							header
-							rounded
-						>
-							<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
-								<Grid>
-									<SettingsKeyMetrics />
+					<Layout
+						title={ __( 'Key metrics', 'google-site-kit' ) }
+						header
+						rounded
+					>
+						<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
+							<Grid>
+								<SettingsKeyMetrics />
+								{ isUserInputCompleted && (
 									<UserInputPreview
 										goTo={ goTo }
 										noHeader
@@ -97,10 +97,10 @@ export default function SettingsAdmin() {
 										settingsView
 										showIndividualCTAs
 									/>
-								</Grid>
-							</div>
-						</Layout>
-					) }
+								) }
+							</Grid>
+						</div>
+					</Layout>
 
 					{ isUserInputCompleted === false && (
 						<UserInputSettings isDismissible={ false } rounded />
diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 80eb1e73ecd..15502206626 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -32,19 +32,10 @@ import { __ } from '@wordpress/i18n';
 import { Switch } from 'googlesitekit-components';
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
-import { useFeature } from '../../hooks/useFeature';
-import useViewOnly from '../../hooks/useViewOnly';
 
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsKeyMetrics() {
-	const dashboardSharingEnabled = useFeature( 'dashboardSharing' );
-	const viewOnly = useViewOnly();
-
-	const isAuthenticated = useSelect( ( select ) =>
-		select( CORE_USER ).isAuthenticated()
-	);
-
 	const keyMetrics = useSelect( ( select ) =>
 		select( CORE_USER ).getKeyMetrics()
 	);
@@ -59,10 +50,6 @@ export default function SettingsKeyMetrics() {
 		await saveKeyMetrics();
 	}, [ keyMetrics, saveKeyMetrics, setKeyMetricSetting ] );
 
-	if ( ! ( isAuthenticated || ( dashboardSharingEnabled && viewOnly ) ) ) {
-		return null;
-	}
-
 	return (
 		<Switch
 			label={ __(

From b19b7f35f71383c749f6bd4f6e2b83dea1e91c91 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Fri, 10 Mar 2023 02:49:41 +0600
Subject: [PATCH 03/35] Update Key Metrics section of settings page.

---
 .../js/components/settings/SettingsAdmin.js   | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index 05b96686c56..9d53e91d3c1 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -36,12 +36,12 @@ import OptIn from '../OptIn';
 import ResetButton from '../ResetButton';
 import UserInputPreview from '../user-input/UserInputPreview';
 import { USER_INPUT_QUESTIONS_LIST } from '../user-input/util/constants';
-import UserInputSettings from '../notifications/UserInputSettings';
 import { useFeature } from '../../hooks/useFeature';
 import { trackEvent } from '../../util';
 import SettingsPlugin from './SettingsPlugin';
 import useViewContext from '../../hooks/useViewContext';
 import SettingsKeyMetrics from './SettingsKeyMetrics';
+import Link from '../Link';
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsAdmin() {
@@ -89,6 +89,8 @@ export default function SettingsAdmin() {
 						<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
 							<Grid>
 								<SettingsKeyMetrics />
+							</Grid>
+							<Grid>
 								{ isUserInputCompleted && (
 									<UserInputPreview
 										goTo={ goTo }
@@ -98,13 +100,29 @@ export default function SettingsAdmin() {
 										showIndividualCTAs
 									/>
 								) }
+								{ isUserInputCompleted === false && (
+									<div>
+										<Cell>
+											<p>
+												<span>
+													{ __(
+														'Answer 3 quick questions to help us show the most relevant data for your site',
+														'google-site-kit'
+													) }
+												</span>
+											</p>
+											<Link href={ userInputURL }>
+												{ __(
+													'Personalize your metrics',
+													'google-site-kit'
+												) }
+											</Link>
+										</Cell>
+									</div>
+								) }
 							</Grid>
 						</div>
 					</Layout>
-
-					{ isUserInputCompleted === false && (
-						<UserInputSettings isDismissible={ false } rounded />
-					) }
 				</Cell>
 			) }
 

From 295152191742132b65e742274d9f3644fb442230 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 01:05:36 +0600
Subject: [PATCH 04/35] Update key metrics related selectors and actions.

---
 .../datastore/user/key-metrics.js             | 92 +++++++++----------
 .../widgets/datastore/key-metrics.js          | 21 +++++
 2 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index 23375fe2c93..320f18e21e1 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -28,18 +28,17 @@ import Data from 'googlesitekit-data';
 import { CORE_USER } from './constants';
 import { createFetchStore } from '../../data/create-fetch-store';
 import { actions as errorStoreActions } from '../../data/create-error-store';
-import { CORE_WIDGETS } from '../../widgets/datastore/constants';
 const { receiveError, clearError } = errorStoreActions;
 const { createRegistrySelector } = Data;
 
 const SET_KEY_METRICS_SETTING = 'SET_KEY_METRICS_SETTING';
 
 const baseInitialState = {
-	keyMetrics: undefined,
+	keyMetricsSettings: undefined,
 };
 
-const fetchGetUserPickedMetricsStore = createFetchStore( {
-	baseName: 'getUserPickedMetrics',
+const fetchGetKeyMetricsSettingsStore = createFetchStore( {
+	baseName: 'getKeyMetricsSettings',
 	controlCallback: () =>
 		API.get( 'core', 'user', 'key-metrics', undefined, {
 			// Never cache key metrics requests, we want them to be
@@ -47,17 +46,20 @@ const fetchGetUserPickedMetricsStore = createFetchStore( {
 			// make requests to Google APIs so it's not a slow request.
 			useCache: false,
 		} ),
-	reducerCallback: ( state, keyMetrics ) => ( {
+	reducerCallback: ( state, keyMetricsSettings ) => ( {
 		...state,
-		keyMetrics,
+		keyMetricsSettings,
 	} ),
 } );
 
-const fetchSaveKeyMetricsStore = createFetchStore( {
-	baseName: 'saveKeyMetrics',
+const fetchSaveKeyMetricsSettingsStore = createFetchStore( {
+	baseName: 'saveKeyMetricsSettings',
 	controlCallback: ( settings ) =>
 		API.set( 'core', 'user', 'key-metrics', { settings } ),
-	reducerCallback: ( state, keyMetrics ) => ( { ...state, keyMetrics } ),
+	reducerCallback: ( state, keyMetricsSettings ) => ( {
+		...state,
+		keyMetricsSettings,
+	} ),
 	argsToParams: ( settings ) => settings,
 	validateParams: ( settings ) => {
 		invariant( isPlainObject( settings ), 'Settings should be an object.' );
@@ -87,23 +89,25 @@ const baseActions = {
 	/**
 	 * Saves key metrics settings.
 	 *
-	 * @since 1.94.0
+	 * @since n.e.x.t
 	 *
 	 * @return {Object} Object with `response` and `error`.
 	 */
-	*saveKeyMetrics() {
-		yield clearError( 'saveKeyMetrics', [] );
+	*saveKeyMetricsSettings() {
+		yield clearError( 'saveKeyMetricsSettings', [] );
 
 		const registry = yield Data.commonActions.getRegistry();
-		const keyMetrics = registry.select( CORE_USER ).getUserPickedMetrics();
+		const keyMetricsSettings = registry
+			.select( CORE_USER )
+			.getKeyMetricsSettings();
 		const { response, error } =
-			yield fetchSaveKeyMetricsStore.actions.fetchSaveKeyMetrics(
-				keyMetrics
+			yield fetchSaveKeyMetricsSettingsStore.actions.fetchSaveKeyMetrics(
+				keyMetricsSettings
 			);
 
 		if ( error ) {
 			// Store error manually since saveKeyMetrics signature differs from fetchSaveKeyMetricsStore.
-			yield receiveError( error, 'saveKeyMetrics', [] );
+			yield receiveError( error, 'saveKeyMetricsSettings', [] );
 		}
 
 		return { response, error };
@@ -117,8 +121,8 @@ const baseReducer = ( state, { type, payload } ) => {
 		case SET_KEY_METRICS_SETTING: {
 			return {
 				...state,
-				keyMetrics: {
-					...state.keyMetrics,
+				keyMetricsSettings: {
+					...state.keyMetricsSettings,
 					[ payload.settingID ]: payload.value,
 				},
 			};
@@ -130,64 +134,52 @@ const baseReducer = ( state, { type, payload } ) => {
 };
 
 const baseResolvers = {
-	*getUserPickedMetrics() {
+	*getKeyMetricsSettings() {
 		const registry = yield Data.commonActions.getRegistry();
-		const userPickedKeyMetrics = registry
+		const keyMetricsSettings = registry
 			.select( CORE_USER )
-			.getUserPickedMetrics();
+			.getKeyMetricsSettings();
 
-		if ( userPickedKeyMetrics ) {
-			return userPickedKeyMetrics;
+		if ( keyMetricsSettings ) {
+			return keyMetricsSettings;
 		}
 
-		yield fetchGetUserPickedMetricsStore.actions.fetchGetUserPickedMetrics();
+		yield fetchGetKeyMetricsSettingsStore.actions.fetchGetKeyMetricsSettings();
 	},
 };
 
 const baseSelectors = {
 	/**
-	 * Gets key metrics for this user, either from the user-selected
-	 * key metrics selected by this user (if available) or—if the user has not
-	 * manually selected their own key metrics—from the automatically-selected
-	 * (eg. "answer-based") metrics based on their answers to our User Input
-	 * questions.
+	 * Gets the Key Metric widget slugs selected by the user.
 	 *
-	 * @since 1.96.0
+	 * @since n.e.x.t
 	 *
-	 * @param {Object} state Data store's state.
-	 * @return {(Object|undefined)} Key metrics settings.
+	 * @return {Array<string>|undefined} An array of Key Metric widget slugs, or undefined if the key metrics settings are not loaded.
 	 */
-	getKeyMetrics: createRegistrySelector( ( select ) => () => {
-		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
+	getUserPickedMetrics: createRegistrySelector( ( select ) => () => {
+		const keyMetricsSettings = select( CORE_USER ).getKeyMetricsSettings();
 
-		if ( userPickedMetrics === undefined ) {
+		if ( keyMetricsSettings === undefined ) {
 			return undefined;
 		}
-
-		if ( userPickedMetrics?.widgetSlugs?.length ) {
-			return userPickedMetrics.widgetSlugs;
-		}
-
-		return select( CORE_WIDGETS ).getAnswerBasedMetrics();
+		return keyMetricsSettings.widgetSlugs;
 	} ),
-
 	/**
-	 * Gets key metrics selected by the user.
+	 * Gets key metrics settings.
 	 *
-	 * @since 1.94.0 Initially introduced as `getKeyMetrics`.
-	 * @since 1.96.0 Updated selector name now that `getKeyMetrics` contains more advanced logic.
+	 * @since n.e.x.t
 	 *
 	 * @param {Object} state Data store's state.
-	 * @return {(Object|undefined)} Key metrics settings.
+	 * @return {(Object|undefined)} Key metrics settings. Returns `undefined` if not loaded.
 	 */
-	getUserPickedMetrics( state ) {
-		return state.keyMetrics;
+	getKeyMetricsSettings( state ) {
+		return state.keyMetricsSettings;
 	},
 };
 
 const store = Data.combineStores(
-	fetchGetUserPickedMetricsStore,
-	fetchSaveKeyMetricsStore,
+	fetchGetKeyMetricsSettingsStore,
+	fetchSaveKeyMetricsSettingsStore,
 	{
 		initialState: baseInitialState,
 		actions: baseActions,
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.js
index 822984af265..22fd023c1ca 100644
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.js
+++ b/assets/js/googlesitekit/widgets/datastore/key-metrics.js
@@ -20,12 +20,33 @@
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
+import { CORE_WIDGETS } from './constants';
 import { CORE_SITE } from '../../datastore/site/constants';
 import { CORE_USER } from '../../datastore/user/constants';
 
 const { createRegistrySelector } = Data;
 
 const selectors = {
+	/**
+	 * Gets currently selected key metrics based on either the user picked metrics or the answer based metrics.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {Array<string>|undefined} An array of key metric slugs, or undefined while loading.
+	 */
+	getKeyMetrics: createRegistrySelector( ( select ) => () => {
+		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
+
+		if ( userPickedMetrics === undefined ) {
+			return undefined;
+		}
+
+		if ( userPickedMetrics.length ) {
+			return userPickedMetrics;
+		}
+
+		return select( CORE_WIDGETS ).getAnswerBasedMetrics();
+	} ),
 	/**
 	 * Gets the Key Metric widget slugs based on the user input settings.
 	 *

From bf56f748f8ec3dc53da035e83247449e5b19a23a Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 01:13:45 +0600
Subject: [PATCH 05/35] Update fetch store actions.

---
 assets/js/googlesitekit/datastore/user/key-metrics.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index 320f18e21e1..53901bd0d88 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -101,7 +101,7 @@ const baseActions = {
 			.select( CORE_USER )
 			.getKeyMetricsSettings();
 		const { response, error } =
-			yield fetchSaveKeyMetricsSettingsStore.actions.fetchSaveKeyMetrics(
+			yield fetchSaveKeyMetricsSettingsStore.actions.fetchSaveKeyMetricsSettings(
 				keyMetricsSettings
 			);
 

From 9511ea5d28e46ed00463c6f7b87fc056b8e26dce Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 01:42:34 +0600
Subject: [PATCH 06/35] Update SettingsKeyMetrics component.

---
 .../js/components/settings/SettingsKeyMetrics.js  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 15502206626..afb43c745e9 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -36,19 +36,20 @@ import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsKeyMetrics() {
-	const keyMetrics = useSelect( ( select ) =>
-		select( CORE_USER ).getKeyMetrics()
+	const keyMetricsSettings = useSelect( ( select ) =>
+		select( CORE_USER ).getKeyMetricsSettings()
 	);
 
-	const { setKeyMetricSetting, saveKeyMetrics } = useDispatch( CORE_USER );
+	const { setKeyMetricSetting, saveKeyMetricsSettings } =
+		useDispatch( CORE_USER );
 
 	const handleKeyMatricsToggle = useCallback( async () => {
 		await setKeyMetricSetting(
 			'isWidgetHidden',
-			! keyMetrics?.isWidgetHidden
+			! keyMetricsSettings?.isWidgetHidden
 		);
-		await saveKeyMetrics();
-	}, [ keyMetrics, saveKeyMetrics, setKeyMetricSetting ] );
+		await saveKeyMetricsSettings();
+	}, [ keyMetricsSettings, saveKeyMetricsSettings, setKeyMetricSetting ] );
 
 	return (
 		<Switch
@@ -56,7 +57,7 @@ export default function SettingsKeyMetrics() {
 				'Display key metrics in dashboard',
 				'google-site-kit'
 			) }
-			checked={ ! keyMetrics?.isWidgetHidden }
+			checked={ ! keyMetricsSettings?.isWidgetHidden }
 			onClick={ handleKeyMatricsToggle }
 			hideLabel={ false }
 		/>

From 0f74f2b015871c546bc22c5e241356f256cee67e Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 02:35:27 +0600
Subject: [PATCH 07/35] Update key-metrics datastore tests.

---
 .../datastore/user/key-metrics.test.js        | 101 +++++++++++-------
 .../widgets/datastore/key-metrics.test.js     |  86 +++++++++++++++
 2 files changed, 150 insertions(+), 37 deletions(-)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index 85c12bbe297..86ceef4d0a1 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -20,8 +20,10 @@
 import API from 'googlesitekit-api';
 import {
 	createTestRegistry,
+	freezeFetch,
 	unsubscribeFromAll,
 	untilResolved,
+	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
 import { CORE_USER } from './constants';
 
@@ -75,13 +77,13 @@ describe( 'core/user key metrics', () => {
 					.dispatch( CORE_USER )
 					.setKeyMetricSetting( settingID, settingValue );
 
-				expect( store.getState().keyMetrics[ settingID ] ).toBe(
+				expect( store.getState().keyMetricsSettings[ settingID ] ).toBe(
 					settingValue
 				);
 			} );
 		} );
 
-		describe( 'saveKeyMetrics', () => {
+		describe( 'saveKeyMetricsSettings', () => {
 			beforeEach( async () => {
 				await registry
 					.dispatch( CORE_USER )
@@ -94,7 +96,7 @@ describe( 'core/user key metrics', () => {
 					status: 200,
 				} );
 
-				await registry.dispatch( CORE_USER ).saveKeyMetrics();
+				await registry.dispatch( CORE_USER ).saveKeyMetricsSettings();
 
 				// Ensure the proper body parameters were sent.
 				expect( fetchMock ).toHaveFetched(
@@ -110,7 +112,7 @@ describe( 'core/user key metrics', () => {
 					}
 				);
 
-				expect( store.getState().keyMetrics ).toMatchObject(
+				expect( store.getState().keyMetricsSettings ).toMatchObject(
 					coreKeyMetricsExpectedResponse
 				);
 
@@ -129,12 +131,12 @@ describe( 'core/user key metrics', () => {
 					status: 500,
 				} );
 
-				await registry.dispatch( CORE_USER ).saveKeyMetrics();
+				await registry.dispatch( CORE_USER ).saveKeyMetricsSettings();
 
 				expect(
 					registry
 						.select( CORE_USER )
-						.getErrorForAction( 'saveKeyMetrics', [] )
+						.getErrorForAction( 'saveKeyMetricsSettings', [] )
 				).toMatchObject( response );
 
 				expect( console ).toHaveErrored();
@@ -143,8 +145,8 @@ describe( 'core/user key metrics', () => {
 	} );
 
 	describe( 'selectors', () => {
-		describe( 'getKeyMetrics', () => {
-			it( 'should fetch user key metrics from the API if none exist', async () => {
+		describe( 'getKeyMetricsSettings', () => {
+			it( 'should fetch user key metrics settings from the API if none exist', async () => {
 				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
 					body: coreKeyMetricsExpectedResponse,
 					status: 200,
@@ -162,12 +164,12 @@ describe( 'core/user key metrics', () => {
 					CORE_USER
 				).getUserInputSettings();
 
-				registry.select( CORE_USER ).getKeyMetrics();
+				registry.select( CORE_USER ).getKeyMetricsSettings();
 
 				await untilResolved(
 					registry,
 					CORE_USER
-				).getUserPickedMetrics();
+				).getKeyMetricsSettings();
 
 				expect( fetchMock ).toHaveFetched(
 					coreKeyMetricsEndpointRegExp,
@@ -179,50 +181,75 @@ describe( 'core/user key metrics', () => {
 				);
 
 				expect(
-					registry.select( CORE_USER ).getKeyMetrics()
-				).toMatchObject( coreKeyMetricsExpectedResponse.widgetSlugs );
+					registry.select( CORE_USER ).getKeyMetricsSettings()
+				).toMatchObject( coreKeyMetricsExpectedResponse );
 
 				expect( fetchMock ).toHaveFetchedTimes( 2 );
 			} );
 
-			it( 'should use answer-based key metrics if the user has not selected any widgets', async () => {
-				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
-					body: {
-						widgetSlugs: [],
-						isWidgetHidden: false,
-					},
-					status: 200,
-				} );
+			it( 'should not make a network request if settings exist', async () => {
+				registry
+					.dispatch( CORE_USER )
+					.receiveGetKeyMetricsSettings(
+						coreKeyMetricsExpectedResponse
+					);
 
-				fetchMock.getOnce( coreUserInputSettingsEndpointRegExp, {
-					body: coreUserInputSettingsExpectedResponse,
-					status: 200,
-				} );
-
-				registry.select( CORE_USER ).getUserInputSettings();
+				registry.select( CORE_USER ).getKeyMetricsSettings();
 
 				await untilResolved(
 					registry,
 					CORE_USER
-				).getUserInputSettings();
+				).getKeyMetricsSettings();
+
+				expect( fetchMock ).not.toHaveFetched(
+					coreKeyMetricsEndpointRegExp
+				);
+			} );
+		} );
+
+		describe( 'getUserPickedMetrics', () => {
+			it( 'should return undefined while settings are loading', async () => {
+				freezeFetch( coreKeyMetricsEndpointRegExp );
+
+				const { getUserPickedMetrics } = registry.select( CORE_USER );
 
-				registry.select( CORE_USER ).getKeyMetrics();
+				expect( getUserPickedMetrics() ).toBeUndefined();
+
+				await waitForDefaultTimeouts();
+			} );
+
+			it( 'uses a resolver to make a network request if settings are not available', async () => {
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: coreKeyMetricsExpectedResponse,
+					status: 200,
+				} );
+
+				const { getUserPickedMetrics } = registry.select( CORE_USER );
+
+				expect( getUserPickedMetrics() ).toBeUndefined();
 
 				await untilResolved(
 					registry,
 					CORE_USER
-				).getUserPickedMetrics();
+				).getKeyMetricsSettings();
 
 				expect(
-					registry.select( CORE_USER ).getKeyMetrics()
-				).toMatchObject( [
-					'kmAnalyticsLoyalVisitors',
-					'kmAnalyticsNewVisitors',
-					'kmAnalyticsTopTrafficSource',
-					'kmAnalyticsEngagedTrafficSource',
-				] );
+					registry.select( CORE_USER ).getUserPickedMetrics()
+				).toEqual( coreKeyMetricsExpectedResponse.widgetSlugs );
 
-				expect( fetchMock ).toHaveFetchedTimes( 2 );
+				expect( fetchMock ).toHaveFetchedTimes( 1 );
+			} );
+
+			it( 'should return user picked metrics', () => {
+				registry
+					.dispatch( CORE_USER )
+					.receiveGetKeyMetricsSettings(
+						coreKeyMetricsExpectedResponse
+					);
+
+				expect(
+					registry.select( CORE_USER ).getUserPickedMetrics()
+				).toEqual( coreKeyMetricsExpectedResponse.widgetSlugs );
 			} );
 		} );
 	} );
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
index bf99bea30ba..2a8c54fb8ca 100644
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
+++ b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
@@ -24,6 +24,7 @@ import {
 	freezeFetch,
 	provideSiteInfo,
 	unsubscribeFromAll,
+	untilResolved,
 	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
 import { CORE_USER } from '../../datastore/user/constants';
@@ -43,6 +44,91 @@ describe( 'core/widgets key metrics', () => {
 	} );
 
 	describe( 'selectors', () => {
+		describe( 'getKeyMetrics', () => {
+			it( 'should use answer-based key metrics if the user has not selected any widgets', async () => {
+				fetchMock.getOnce(
+					new RegExp(
+						'^/google-site-kit/v1/core/user/data/key-metrics'
+					),
+					{
+						body: {
+							widgetSlugs: [],
+							isWidgetHidden: false,
+						},
+						status: 200,
+					}
+				);
+
+				fetchMock.getOnce(
+					new RegExp(
+						'^/google-site-kit/v1/core/user/data/user-input-settings'
+					),
+					{
+						body: {
+							purpose: {
+								values: [ 'publish_blog' ],
+								scope: 'site',
+							},
+						},
+						status: 200,
+					}
+				);
+
+				registry.select( CORE_USER ).getUserInputSettings();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getUserInputSettings();
+
+				registry.select( CORE_WIDGETS ).getKeyMetrics();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getKeyMetricsSettings();
+
+				expect(
+					registry.select( CORE_WIDGETS ).getKeyMetrics()
+				).toMatchObject( [
+					'kmAnalyticsLoyalVisitors',
+					'kmAnalyticsNewVisitors',
+					'kmAnalyticsTopTrafficSource',
+					'kmAnalyticsEngagedTrafficSource',
+				] );
+
+				expect( fetchMock ).toHaveFetchedTimes( 2 );
+			} );
+
+			it( 'should use the user-selected key metrics if the user has selected any widgets', async () => {
+				fetchMock.getOnce(
+					new RegExp(
+						'^/google-site-kit/v1/core/user/data/key-metrics'
+					),
+					{
+						body: {
+							widgetSlugs: [ 'kmAnalyticsLoyalVisitors' ],
+							isWidgetHidden: false,
+						},
+						status: 200,
+					}
+				);
+
+				registry.select( CORE_WIDGETS ).getKeyMetrics();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getKeyMetricsSettings();
+
+				expect(
+					registry.select( CORE_WIDGETS ).getKeyMetrics()
+				).toMatchObject( [ 'kmAnalyticsLoyalVisitors' ] );
+
+				expect( fetchMock ).toHaveFetchedTimes( 1 );
+			} );
+		} );
+
 		describe( 'getAnswerBasedMetrics', () => {
 			it( 'should return undefined if user input settings are not resolved', async () => {
 				freezeFetch(

From 3d60c0d1ec94d7a078064a70e61b3a691e6f7fec Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 02:46:05 +0600
Subject: [PATCH 08/35] Add loading check to SettingsKeyMetrics.

---
 assets/js/components/settings/SettingsKeyMetrics.js  | 12 ++++++++++--
 .../js/googlesitekit/datastore/user/key-metrics.js   |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index afb43c745e9..47e6b3fc0b9 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -44,20 +44,28 @@ export default function SettingsKeyMetrics() {
 		useDispatch( CORE_USER );
 
 	const handleKeyMatricsToggle = useCallback( async () => {
+		if ( ! keyMetricsSettings ) {
+			return;
+		}
+
 		await setKeyMetricSetting(
 			'isWidgetHidden',
-			! keyMetricsSettings?.isWidgetHidden
+			! keyMetricsSettings.isWidgetHidden
 		);
 		await saveKeyMetricsSettings();
 	}, [ keyMetricsSettings, saveKeyMetricsSettings, setKeyMetricSetting ] );
 
+	if ( ! keyMetricsSettings ) {
+		return null;
+	}
+
 	return (
 		<Switch
 			label={ __(
 				'Display key metrics in dashboard',
 				'google-site-kit'
 			) }
-			checked={ ! keyMetricsSettings?.isWidgetHidden }
+			checked={ ! keyMetricsSettings.isWidgetHidden }
 			onClick={ handleKeyMatricsToggle }
 			hideLabel={ false }
 		/>
diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index 53901bd0d88..31ac97f6db9 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -164,6 +164,7 @@ const baseSelectors = {
 		}
 		return keyMetricsSettings.widgetSlugs;
 	} ),
+
 	/**
 	 * Gets key metrics settings.
 	 *

From a534afb695f71291268327d3db3f5d239dd65f04 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 17:50:58 +0600
Subject: [PATCH 09/35] Add default value to Key Metrics Settings.

---
 includes/Core/Key_Metrics/Key_Metrics_Settings.php | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/includes/Core/Key_Metrics/Key_Metrics_Settings.php b/includes/Core/Key_Metrics/Key_Metrics_Settings.php
index eb951c2c1fb..be2b4e37b3a 100644
--- a/includes/Core/Key_Metrics/Key_Metrics_Settings.php
+++ b/includes/Core/Key_Metrics/Key_Metrics_Settings.php
@@ -46,7 +46,10 @@ protected function get_type() {
 	 * @return array The default value.
 	 */
 	protected function get_default() {
-		return array();
+		return array(
+			'widgetSlugs'    => array(),
+			'isWidgetHidden' => true,
+		);
 	}
 
 	/**
@@ -91,7 +94,7 @@ protected function get_sanitize_callback() {
 
 			$sanitized_settings = array();
 
-			if ( isset( $settings['widgetSlugs'] ) && ! empty( $settings['widgetSlugs'] ) ) {
+			if ( isset( $settings['widgetSlugs'] ) ) {
 				$sanitized_settings['widgetSlugs'] = Sanitize::sanitize_string_list( $settings['widgetSlugs'] );
 			}
 

From 3b1c139f956b6c39cc19d2a95fb95b21f6f96d03 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 13 Mar 2023 17:58:01 +0600
Subject: [PATCH 10/35] Update test.

---
 .../Core/Key_Metrics/Key_Metrics_SettingsTest.php         | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/tests/phpunit/integration/Core/Key_Metrics/Key_Metrics_SettingsTest.php b/tests/phpunit/integration/Core/Key_Metrics/Key_Metrics_SettingsTest.php
index 88db0ef9657..5ddd4ffd1dd 100644
--- a/tests/phpunit/integration/Core/Key_Metrics/Key_Metrics_SettingsTest.php
+++ b/tests/phpunit/integration/Core/Key_Metrics/Key_Metrics_SettingsTest.php
@@ -39,7 +39,7 @@ public function set_up() {
 		$this->key_metrics_settings->register();
 	}
 
-	public function data_answers() {
+	public function data_key_metrics_settings() {
 		return array(
 			'empty by default' => array(
 				null,
@@ -58,7 +58,9 @@ public function data_answers() {
 					'widgetSlugs'    => array(),
 					'isWidgetHidden' => null,
 				),
-				array(),
+				array(
+					'widgetSlugs' => array(),
+				),
 			),
 			'array of widgetSlugs with non-string elements' => array(
 				array( 'widgetSlugs' => array( 'validWidgetSlug1', false, true, null, array(), 'validWidgetSlug2', '' ) ),
@@ -118,7 +120,7 @@ public function data_answers() {
 	}
 
 	/**
-	 * @dataProvider data_answers
+	 * @dataProvider data_key_metrics_settings
 	 *
 	 * @param mixed $input    Values to pass to the `set()` method.
 	 * @param array $expected The expected sanitized array.

From c18a180ff531476901f1d9ec2ddcbb2d240ff6cd Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 14 Mar 2023 00:21:56 +0600
Subject: [PATCH 11/35] Remove unnecessary return value from resolver.

---
 assets/js/googlesitekit/datastore/user/key-metrics.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index 31ac97f6db9..4b61663d8ef 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -141,7 +141,7 @@ const baseResolvers = {
 			.getKeyMetricsSettings();
 
 		if ( keyMetricsSettings ) {
-			return keyMetricsSettings;
+			return;
 		}
 
 		yield fetchGetKeyMetricsSettingsStore.actions.fetchGetKeyMetricsSettings();

From c05b1ead3dc3d9e45ba15fe92cf07bca4906f056 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 14 Mar 2023 01:28:00 +0600
Subject: [PATCH 12/35] Add class to user input section.

---
 assets/js/components/settings/SettingsAdmin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index 9d53e91d3c1..465e51c6c37 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -101,7 +101,7 @@ export default function SettingsAdmin() {
 									/>
 								) }
 								{ isUserInputCompleted === false && (
-									<div>
+									<div className="googlesitekit-user-input__notification">
 										<Cell>
 											<p>
 												<span>

From c3db905000d6260448a840d78add39c8fc0cca56 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 14 Mar 2023 13:38:19 +0600
Subject: [PATCH 13/35] Don't render key matrics toggle if there is no key
 metrics.

---
 assets/js/components/settings/SettingsKeyMetrics.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 47e6b3fc0b9..d842f88c684 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -32,12 +32,17 @@ import { __ } from '@wordpress/i18n';
 import { Switch } from 'googlesitekit-components';
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
 
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsKeyMetrics() {
 	const keyMetricsSettings = useSelect( ( select ) =>
-		select( CORE_USER ).getKeyMetricsSettings()
+		select( CORE_WIDGETS ).getKeyMetricsSettings()
+	);
+
+	const keyMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getKeyMetrics()
 	);
 
 	const { setKeyMetricSetting, saveKeyMetricsSettings } =
@@ -55,7 +60,7 @@ export default function SettingsKeyMetrics() {
 		await saveKeyMetricsSettings();
 	}, [ keyMetricsSettings, saveKeyMetricsSettings, setKeyMetricSetting ] );
 
-	if ( ! keyMetricsSettings ) {
+	if ( ! keyMetricsSettings || ! keyMetrics?.length ) {
 		return null;
 	}
 

From cbb4567a0d519176dc2dad96672a2b9d06b5648e Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 14 Mar 2023 15:32:01 +0600
Subject: [PATCH 14/35] Fix incorrect stores.

---
 assets/js/components/settings/SettingsKeyMetrics.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index d842f88c684..fbdc49a7f66 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -38,11 +38,11 @@ const { useSelect, useDispatch } = Data;
 
 export default function SettingsKeyMetrics() {
 	const keyMetricsSettings = useSelect( ( select ) =>
-		select( CORE_WIDGETS ).getKeyMetricsSettings()
+		select( CORE_USER ).getKeyMetricsSettings()
 	);
 
 	const keyMetrics = useSelect( ( select ) =>
-		select( CORE_USER ).getKeyMetrics()
+		select( CORE_WIDGETS ).getKeyMetrics()
 	);
 
 	const { setKeyMetricSetting, saveKeyMetricsSettings } =

From 44bf9b75a034ac59075b7be52a7b604b3f3cfd39 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Fri, 17 Mar 2023 17:32:39 +0600
Subject: [PATCH 15/35] Fix typos.

---
 assets/js/components/settings/SettingsKeyMetrics.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index fbdc49a7f66..b37eb5138bc 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -16,10 +16,6 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -48,7 +44,7 @@ export default function SettingsKeyMetrics() {
 	const { setKeyMetricSetting, saveKeyMetricsSettings } =
 		useDispatch( CORE_USER );
 
-	const handleKeyMatricsToggle = useCallback( async () => {
+	const handleKeyMetricsToggle = useCallback( async () => {
 		if ( ! keyMetricsSettings ) {
 			return;
 		}
@@ -71,7 +67,7 @@ export default function SettingsKeyMetrics() {
 				'google-site-kit'
 			) }
 			checked={ ! keyMetricsSettings.isWidgetHidden }
-			onClick={ handleKeyMatricsToggle }
+			onClick={ handleKeyMetricsToggle }
 			hideLabel={ false }
 		/>
 	);

From bf0e78a8cfd0b59256ac0778a9595116dbc75c8b Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 13:31:13 +0600
Subject: [PATCH 16/35] Change the `isWidgetHidden` default value.

---
 includes/Core/Key_Metrics/Key_Metrics_Settings.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/Core/Key_Metrics/Key_Metrics_Settings.php b/includes/Core/Key_Metrics/Key_Metrics_Settings.php
index be2b4e37b3a..3055182718c 100644
--- a/includes/Core/Key_Metrics/Key_Metrics_Settings.php
+++ b/includes/Core/Key_Metrics/Key_Metrics_Settings.php
@@ -48,7 +48,7 @@ protected function get_type() {
 	protected function get_default() {
 		return array(
 			'widgetSlugs'    => array(),
-			'isWidgetHidden' => true,
+			'isWidgetHidden' => false,
 		);
 	}
 

From 741c1b7955442709ac35c392950c7ec398925e6b Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 14:45:21 +0600
Subject: [PATCH 17/35] Add `isKeyMetricsWidgetHidden` selector.

---
 .../googlesitekit/datastore/user/key-metrics.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index 4b61663d8ef..fb83207d85f 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -165,6 +165,23 @@ const baseSelectors = {
 		return keyMetricsSettings.widgetSlugs;
 	} ),
 
+	/**
+	 * Gets whether the key metrics widget is hidden.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {boolean|undefined} True if the key metrics widget is hidden, false if it is not, or undefined if the key metrics settings are not loaded.
+	 */
+	isKeyMetricsWidgetHidden: createRegistrySelector( ( select ) => () => {
+		const keyMetricsSettings = select( CORE_USER ).getKeyMetricsSettings();
+
+		if ( keyMetricsSettings === undefined ) {
+			return undefined;
+		}
+
+		return keyMetricsSettings.isWidgetHidden;
+	} ),
+
 	/**
 	 * Gets key metrics settings.
 	 *

From af5573d991c40cefecdec6cdc1a8dc6108007d8a Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 14:48:50 +0600
Subject: [PATCH 18/35] Add tests for `isKeyMetricsWidgetHidden`.

---
 .../datastore/user/key-metrics.test.js        | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index 86ceef4d0a1..d8184fb71eb 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -252,5 +252,41 @@ describe( 'core/user key metrics', () => {
 				).toEqual( coreKeyMetricsExpectedResponse.widgetSlugs );
 			} );
 		} );
+
+		describe( 'isKeyMetricsWidgetHidden', () => {
+			it( 'should return undefined while settings are loading', async () => {
+				freezeFetch( coreKeyMetricsEndpointRegExp );
+
+				const { isKeyMetricsWidgetHidden } =
+					registry.select( CORE_USER );
+
+				expect( isKeyMetricsWidgetHidden() ).toBeUndefined();
+
+				await waitForDefaultTimeouts();
+			} );
+
+			it( 'uses a resolver to make a network request if settings are not available', async () => {
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: coreKeyMetricsExpectedResponse,
+					status: 200,
+				} );
+
+				const { isKeyMetricsWidgetHidden } =
+					registry.select( CORE_USER );
+
+				expect( isKeyMetricsWidgetHidden() ).toBeUndefined();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getKeyMetricsSettings();
+
+				expect(
+					registry.select( CORE_USER ).isKeyMetricsWidgetHidden()
+				).toEqual( coreKeyMetricsExpectedResponse.isWidgetHidden );
+
+				expect( fetchMock ).toHaveFetchedTimes( 1 );
+			} );
+		} );
 	} );
 } );

From 3953f3b353608e4e509c34261962aa4c215a55fd Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 14:53:26 +0600
Subject: [PATCH 19/35] Refactor `SettingsKeyMetrics` to use
 `isKeyMetricsWidgetHidden`.

---
 .../components/settings/SettingsKeyMetrics.js | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index b37eb5138bc..d8b24ada8b1 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -33,8 +33,8 @@ import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
 const { useSelect, useDispatch } = Data;
 
 export default function SettingsKeyMetrics() {
-	const keyMetricsSettings = useSelect( ( select ) =>
-		select( CORE_USER ).getKeyMetricsSettings()
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	const keyMetrics = useSelect( ( select ) =>
@@ -45,18 +45,15 @@ export default function SettingsKeyMetrics() {
 		useDispatch( CORE_USER );
 
 	const handleKeyMetricsToggle = useCallback( async () => {
-		if ( ! keyMetricsSettings ) {
-			return;
-		}
-
-		await setKeyMetricSetting(
-			'isWidgetHidden',
-			! keyMetricsSettings.isWidgetHidden
-		);
+		await setKeyMetricSetting( 'isWidgetHidden', ! keyMetricsWidgetHidden );
 		await saveKeyMetricsSettings();
-	}, [ keyMetricsSettings, saveKeyMetricsSettings, setKeyMetricSetting ] );
+	}, [
+		keyMetricsWidgetHidden,
+		saveKeyMetricsSettings,
+		setKeyMetricSetting,
+	] );
 
-	if ( ! keyMetricsSettings || ! keyMetrics?.length ) {
+	if ( ! keyMetricsWidgetHidden === undefined || ! keyMetrics?.length ) {
 		return null;
 	}
 
@@ -66,7 +63,7 @@ export default function SettingsKeyMetrics() {
 				'Display key metrics in dashboard',
 				'google-site-kit'
 			) }
-			checked={ ! keyMetricsSettings.isWidgetHidden }
+			checked={ ! keyMetricsWidgetHidden }
 			onClick={ handleKeyMetricsToggle }
 			hideLabel={ false }
 		/>

From d0fc19f387f1609bda7d82c8a49e736a603a0cf0 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 16:17:03 +0600
Subject: [PATCH 20/35] Add `keyMetricsWidgetHidden` check to key metrics
 widgets.

---
 .../widgets/EngagedTrafficSourceWidget.js        | 16 ++++++++++++++++
 .../components/widgets/LoyalVisitorsWidget.js    | 16 ++++++++++++++++
 .../components/widgets/NewVisitorsWidget.js      | 16 ++++++++++++++++
 .../components/widgets/PopularContentWidget.js   | 16 ++++++++++++++++
 .../components/widgets/PopularProductsWidget.js  | 16 ++++++++++++++++
 .../components/widgets/TopCitiesWidget.js        | 16 ++++++++++++++++
 .../widgets/TopConvertingTrafficSourceWidget.js  | 16 ++++++++++++++++
 .../components/widgets/TopCountriesWidget.js     | 16 ++++++++++++++++
 .../components/widgets/TopTrafficSourceWidget.js | 16 ++++++++++++++++
 .../components/widgets/PopularKeywordsWidget.js  | 16 ++++++++++++++++
 10 files changed, 160 insertions(+)

diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
index 27abd533ac5..ea84e885128 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function EngagedTrafficSourceWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for EngagedTrafficSourceWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
index 522d226a83b..b4b5580c35e 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function LoyalVisitorsWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for LoyalVisitorsWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
index 0a5710352c0..87b6dca9854 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function NewVisitorsWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for NewVisitorsWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
index 819b6fc3091..811719ab857 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function PopularContentWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for PopularContentWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
index b5b8a84b88a..81932985e9f 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function PopularProductsWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for PopularProductsWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
index cf574068a8f..f5c4c908860 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function TopCitiesWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for TopCitiesWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
index ca14c04d95a..d9c906cc383 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function TopConvertingTrafficSourceWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for TopConvertingTrafficSourceWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
index 65c8840f708..20afbf7e282 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function TopCountriesWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for TopCountriesWidget</div>;
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
index c86a466f51d..9c58bebf32a 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function TopTrafficSourceWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for TopTrafficSourceWidget</div>;
 }
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
index 07640785108..bdf91971d40 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
@@ -16,6 +16,22 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+
+const { useSelect } = Data;
+
 export default function PopularKeywordsWidget() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	if ( keyMetricsWidgetHidden !== false ) {
+		return null;
+	}
+
 	return <div>TODO: UI for PopularKeywordsWidget</div>;
 }

From 945b21cec0b8d1636fe9a43cd65f55f05ac96654 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 17:29:18 +0600
Subject: [PATCH 21/35] Update tests for key metrics widgets.

---
 .../datastore/user/key-metrics.test.js        |  5 +-
 .../EngagedTrafficSourceWidget.test.js        | 30 ++++++++--
 .../widgets/LoyalVisitorsWidget.test.js       | 30 ++++++++--
 .../widgets/NewVisitorsWidget.test.js         | 30 ++++++++--
 .../widgets/PopularContentWidget.test.js      | 28 ++++++++-
 .../widgets/PopularProductsWidget.test.js     | 28 ++++++++-
 .../widgets/TopCitiesWidget.test.js           | 28 ++++++++-
 .../TopConvertingTrafficSourceWidget.test.js  | 28 ++++++++-
 .../widgets/TopCountriesWidget.test.js        | 28 ++++++++-
 .../widgets/TopTrafficSourceWidget.test.js    | 28 ++++++++-
 .../widgets/PopularKeywordsWidget.test.js     | 28 ++++++++-
 assets/js/util/key-metrics.js                 | 58 +++++++++++++++++++
 12 files changed, 312 insertions(+), 37 deletions(-)
 create mode 100644 assets/js/util/key-metrics.js

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index d8184fb71eb..cbf642a183d 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -25,16 +25,13 @@ import {
 	untilResolved,
 	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
+import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
 import { CORE_USER } from './constants';
 
 describe( 'core/user key metrics', () => {
 	let registry;
 	let store;
 
-	const coreKeyMetricsEndpointRegExp = new RegExp(
-		'^/google-site-kit/v1/core/user/data/key-metrics'
-	);
-
 	const coreKeyMetricsExpectedResponse = {
 		widgetSlugs: [ 'widget1', 'widget2' ],
 		isWidgetHidden: false,
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index 94cdb0d6ade..c134b7858b5 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -1,5 +1,5 @@
 /**
- * EngagedTrafficSourceWidget tests.
+ * EngagedTrafficSourceWidget component tests.
  *
  * Site Kit by Google, Copyright 2023 Google LLC
  *
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
 
 describe( 'EngagedTrafficSourceWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <EngagedTrafficSourceWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <EngagedTrafficSourceWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <EngagedTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <EngagedTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for EngagedTrafficSourceWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index 6301b87d42b..f191747dfa2 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -1,5 +1,5 @@
 /**
- * LoyalVisitorsWidget tests.
+ * LoyalVisitorsWidget component tests.
  *
  * Site Kit by Google, Copyright 2023 Google LLC
  *
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import LoyalVisitorsWidget from './LoyalVisitorsWidget';
 
 describe( 'LoyalVisitorsWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <LoyalVisitorsWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <LoyalVisitorsWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <LoyalVisitorsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <LoyalVisitorsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for LoyalVisitorsWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index 0d24823c165..087d7078e8c 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -1,5 +1,5 @@
 /**
- * NewVisitorsWidget tests.
+ * NewVisitorsWidget component tests.
  *
  * Site Kit by Google, Copyright 2023 Google LLC
  *
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import NewVisitorsWidget from './NewVisitorsWidget';
 
 describe( 'NewVisitorsWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <NewVisitorsWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <NewVisitorsWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <NewVisitorsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <NewVisitorsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for NewVisitorsWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index 682e78b8247..c279a15bb91 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import PopularContentWidget from './PopularContentWidget';
 
 describe( 'PopularContentWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <PopularContentWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <PopularContentWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <PopularContentWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <PopularContentWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for PopularContentWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index 154917d0e32..bfa31803e6b 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import PopularProductsWidget from './PopularProductsWidget';
 
 describe( 'PopularProductsWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <PopularProductsWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <PopularProductsWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <PopularProductsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <PopularProductsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for PopularProductsWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index f0990af42d6..d0583024356 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import TopCitiesWidget from './TopCitiesWidget';
 
 describe( 'TopCitiesWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <TopCitiesWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <TopCitiesWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <TopCitiesWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <TopCitiesWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for TopCitiesWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index d3cb6108470..a906b79c6ac 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
 
 describe( 'TopConvertingTrafficSourceWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <TopConvertingTrafficSourceWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <TopConvertingTrafficSourceWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <TopConvertingTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <TopConvertingTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for TopConvertingTrafficSourceWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index 2c3ffed46b0..13cc56f5947 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import TopCountriesWidget from './TopCountriesWidget';
 
 describe( 'TopCountriesWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <TopCountriesWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <TopCountriesWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <TopCountriesWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <TopCountriesWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for TopCountriesWidget' )
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index 4cb452656e4..50023c475d6 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import TopTrafficSourceWidget from './TopTrafficSourceWidget';
 
 describe( 'TopTrafficSourceWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <TopTrafficSourceWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <TopTrafficSourceWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <TopTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <TopTrafficSourceWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for TopTrafficSourceWidget' )
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index 90714e56d04..803ec660cc8 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -16,12 +16,34 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import {
+	coreKeyMetricsEndpointRegExp,
+	setupRegistryKeyMetricsWidgetHidden,
+	setupRegistryKeyMetricsWidgetNotHidden,
+} from '../../../../util/key-metrics';
 import PopularKeywordsWidget from './PopularKeywordsWidget';
 
 describe( 'PopularKeywordsWidget', () => {
-	it( 'should render the widget', () => {
-		const { getByText } = render( <PopularKeywordsWidget /> );
+	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
+		freezeFetch( coreKeyMetricsEndpointRegExp );
+		const { container } = render( <PopularKeywordsWidget /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
+		const { container } = render( <PopularKeywordsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
+		const { getByText } = render( <PopularKeywordsWidget />, {
+			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+		} );
 
 		expect(
 			getByText( 'TODO: UI for PopularKeywordsWidget' )
diff --git a/assets/js/util/key-metrics.js b/assets/js/util/key-metrics.js
new file mode 100644
index 00000000000..915d4164a70
--- /dev/null
+++ b/assets/js/util/key-metrics.js
@@ -0,0 +1,58 @@
+/**
+ * Key Metrics test utility functions.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CORE_USER } from '../googlesitekit/datastore/user/constants';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * The endpoint for the key metrics settings.
+ */
+export const coreKeyMetricsEndpointRegExp = new RegExp(
+	'^/google-site-kit/v1/core/user/data/key-metrics'
+);
+
+/**
+ * Sets up the registry with the key metrics settings where isWidgetHidden is true.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object} registry The registry to set up.
+ */
+export const setupRegistryKeyMetricsWidgetHidden = ( registry ) => {
+	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+		widgetSlugs: [ 'test-slug' ],
+		isWidgetHidden: true,
+	} );
+};
+
+/**
+ * Sets up the registry with the key metrics settings where isWidgetHidden is false.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object} registry The registry to set up.
+ */
+export const setupRegistryKeyMetricsWidgetNotHidden = ( registry ) => {
+	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+		widgetSlugs: [ 'test-slug' ],
+		isWidgetHidden: false,
+	} );
+};

From 67846beea380e16babf301b23a78f2646991e281 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Mon, 20 Mar 2023 18:09:25 +0600
Subject: [PATCH 22/35] Fix typos and mistakes.

---
 .../components/settings/SettingsKeyMetrics.js |  2 +-
 .../widgets/datastore/key-metrics.test.js     | 39 +++++++------------
 .../EngagedTrafficSourceWidget.test.js        |  3 ++
 .../widgets/LoyalVisitorsWidget.test.js       |  3 ++
 .../widgets/NewVisitorsWidget.test.js         |  3 ++
 .../widgets/PopularContentWidget.test.js      |  3 ++
 .../widgets/PopularProductsWidget.test.js     |  3 ++
 .../widgets/TopCitiesWidget.test.js           |  3 ++
 .../TopConvertingTrafficSourceWidget.test.js  |  3 ++
 .../widgets/TopCountriesWidget.test.js        |  3 ++
 .../widgets/TopTrafficSourceWidget.test.js    |  3 ++
 .../widgets/PopularKeywordsWidget.test.js     |  3 ++
 assets/js/util/key-metrics.js                 |  3 +-
 13 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index d8b24ada8b1..27d008f0310 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -1,5 +1,5 @@
 /**
- * SetupModule component.
+ * SettingsKeyMetrics component.
  *
  * Site Kit by Google, Copyright 2023 Google LLC
  *
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
index 2a8c54fb8ca..716f8ad127d 100644
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
+++ b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
@@ -27,6 +27,7 @@ import {
 	untilResolved,
 	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
+import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
 import { CORE_USER } from '../../datastore/user/constants';
 import { CORE_WIDGETS } from './constants';
 
@@ -46,18 +47,13 @@ describe( 'core/widgets key metrics', () => {
 	describe( 'selectors', () => {
 		describe( 'getKeyMetrics', () => {
 			it( 'should use answer-based key metrics if the user has not selected any widgets', async () => {
-				fetchMock.getOnce(
-					new RegExp(
-						'^/google-site-kit/v1/core/user/data/key-metrics'
-					),
-					{
-						body: {
-							widgetSlugs: [],
-							isWidgetHidden: false,
-						},
-						status: 200,
-					}
-				);
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: {
+						widgetSlugs: [],
+						isWidgetHidden: false,
+					},
+					status: 200,
+				} );
 
 				fetchMock.getOnce(
 					new RegExp(
@@ -101,18 +97,13 @@ describe( 'core/widgets key metrics', () => {
 			} );
 
 			it( 'should use the user-selected key metrics if the user has selected any widgets', async () => {
-				fetchMock.getOnce(
-					new RegExp(
-						'^/google-site-kit/v1/core/user/data/key-metrics'
-					),
-					{
-						body: {
-							widgetSlugs: [ 'kmAnalyticsLoyalVisitors' ],
-							isWidgetHidden: false,
-						},
-						status: 200,
-					}
-				);
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: {
+						widgetSlugs: [ 'kmAnalyticsLoyalVisitors' ],
+						isWidgetHidden: false,
+					},
+					status: 200,
+				} );
 
 				registry.select( CORE_WIDGETS ).getKeyMetrics();
 
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index c134b7858b5..fec7b44917b 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index f191747dfa2..2230c974e08 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index 087d7078e8c..5c0a19b8fed 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index c279a15bb91..83aef1daf9b 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index bfa31803e6b..bb22e8ae595 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index d0583024356..24e6fdea75d 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index a906b79c6ac..027e4d98a32 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index 13cc56f5947..edc9632b88f 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index 50023c475d6..f13cfb1d7b4 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index 803ec660cc8..e9e2427e8f3 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/util/key-metrics.js b/assets/js/util/key-metrics.js
index 915d4164a70..ac6ecd9be04 100644
--- a/assets/js/util/key-metrics.js
+++ b/assets/js/util/key-metrics.js
@@ -16,11 +16,10 @@
  * limitations under the License.
  */
 
-import { CORE_USER } from '../googlesitekit/datastore/user/constants';
-
 /**
  * Internal dependencies
  */
+import { CORE_USER } from '../googlesitekit/datastore/user/constants';
 
 /**
  * The endpoint for the key metrics settings.

From b92cc0bacb2d19c2092b54a47e0c8ef1dc47edfc Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 18 May 2023 16:37:50 +0600
Subject: [PATCH 23/35] Update Key Metrics Widgets to use Widget API.

---
 .../widgets/EngagedTrafficSourceWidget.js           | 10 +++++++---
 .../components/widgets/LoyalVisitorsWidget.js       | 10 +++++++---
 .../components/widgets/NewVisitorsWidget.js         | 10 +++++++---
 .../components/widgets/PopularContentWidget.js      | 10 +++++++---
 .../components/widgets/PopularProductsWidget.js     | 10 +++++++---
 .../components/widgets/TopCitiesWidget.js           | 10 +++++++---
 .../widgets/TopConvertingTrafficSourceWidget.js     | 13 ++++++++++---
 .../components/widgets/TopCountriesWidget.js        | 10 +++++++---
 .../components/widgets/TopTrafficSourceWidget.js    | 10 +++++++---
 .../components/widgets/PopularKeywordsWidget.js     | 10 +++++++---
 10 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
index ea84e885128..4eae4f681fd 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function EngagedTrafficSourceWidget() {
+export default function EngagedTrafficSourceWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for EngagedTrafficSourceWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for EngagedTrafficSourceWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
index b4b5580c35e..a37211705e8 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function LoyalVisitorsWidget() {
+export default function LoyalVisitorsWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for LoyalVisitorsWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for LoyalVisitorsWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
index 87b6dca9854..b775456a8ea 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function NewVisitorsWidget() {
+export default function NewVisitorsWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for NewVisitorsWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for NewVisitorsWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
index 811719ab857..cf9e6b887cc 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function PopularContentWidget() {
+export default function PopularContentWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for PopularContentWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for PopularContentWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
index 81932985e9f..1a1ca6807d4 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function PopularProductsWidget() {
+export default function PopularProductsWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for PopularProductsWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for PopularProductsWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
index f5c4c908860..7cfe7482ad8 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function TopCitiesWidget() {
+export default function TopCitiesWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for TopCitiesWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for TopCitiesWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
index d9c906cc383..5551c09bc6b 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
@@ -24,14 +24,21 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function TopConvertingTrafficSourceWidget() {
+export default function TopConvertingTrafficSourceWidget( {
+	Widget,
+	WidgetNull,
+} ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for TopConvertingTrafficSourceWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for TopConvertingTrafficSourceWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
index 20afbf7e282..2d598123456 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function TopCountriesWidget() {
+export default function TopCountriesWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for TopCountriesWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for TopCountriesWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
index 9c58bebf32a..6b9f78d11d6 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function TopTrafficSourceWidget() {
+export default function TopTrafficSourceWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for TopTrafficSourceWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for TopTrafficSourceWidget</div>
+		</Widget>
+	);
 }
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
index bdf91971d40..d0e9d096582 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
@@ -24,14 +24,18 @@ import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
 const { useSelect } = Data;
 
-export default function PopularKeywordsWidget() {
+export default function PopularKeywordsWidget( { Widget, WidgetNull } ) {
 	const keyMetricsWidgetHidden = useSelect( ( select ) =>
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
 	if ( keyMetricsWidgetHidden !== false ) {
-		return null;
+		return <WidgetNull />;
 	}
 
-	return <div>TODO: UI for PopularKeywordsWidget</div>;
+	return (
+		<Widget>
+			<div>TODO: UI for PopularKeywordsWidget</div>
+		</Widget>
+	);
 }

From 097051daefd3a7cf6fc27f762790ec25fd749a47 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 18 May 2023 18:43:05 +0600
Subject: [PATCH 24/35] Refactor KM widget slugs as constants.

---
 .../widgets/datastore/constants.js            | 15 ++++
 .../widgets/datastore/key-metrics.js          | 45 +++++++-----
 .../widgets/datastore/key-metrics.test.js     | 71 +++++++++++--------
 assets/js/modules/analytics-4/index.js        | 29 +++++---
 assets/js/modules/search-console/index.js     |  3 +-
 5 files changed, 104 insertions(+), 59 deletions(-)

diff --git a/assets/js/googlesitekit/widgets/datastore/constants.js b/assets/js/googlesitekit/widgets/datastore/constants.js
index 50356cf6aa1..13e9b3c482d 100644
--- a/assets/js/googlesitekit/widgets/datastore/constants.js
+++ b/assets/js/googlesitekit/widgets/datastore/constants.js
@@ -20,3 +20,18 @@ export const WIDGET_AREA_STYLES = { BOXES: 'boxes', COMPOSITE: 'composite' };
 export const WIDGET_WIDTHS = { QUARTER: 'quarter', HALF: 'half', FULL: 'full' };
 
 export const CORE_WIDGETS = 'core/widgets';
+
+// Key Metrics Widgets
+export const KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE =
+	'kmAnalyticsEngagedTrafficSource';
+export const KM_ANALYTICS_LOYAL_VISITORS = 'kmAnalyticsLoyalVisitors';
+export const KM_ANALYTICS_NEW_VISITORS = 'kmAnalyticsNewVisitors';
+export const KM_ANALYTICS_POPULAR_CONTENT = 'kmAnalyticsPopularContent';
+export const KM_ANALYTICS_POPULAR_PRODUCTS = 'kmAnalyticsPopularProducts';
+export const KM_ANALYTICS_TOP_CITIES = 'kmAnalyticsTopCities';
+export const KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE =
+	'kmTopConvertingTrafficSource';
+export const KM_ANALYTICS_TOP_COUNTRIES = 'kmAnalyticsTopCountries';
+export const KM_ANALYTICS_TOP_TRAFFIC_SOURCE = 'kmAnalyticsTopTrafficSource';
+export const KM_SEARCH_CONSOLE_POPULAR_KEYWORDS =
+	'kmSearchConsolePopularKeywords';
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.js
index 22fd023c1ca..1b730c9f79f 100644
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.js
+++ b/assets/js/googlesitekit/widgets/datastore/key-metrics.js
@@ -20,7 +20,16 @@
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { CORE_WIDGETS } from './constants';
+import {
+	CORE_WIDGETS,
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_POPULAR_CONTENT,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+} from './constants';
 import { CORE_SITE } from '../../datastore/site/constants';
 import { CORE_USER } from '../../datastore/user/constants';
 
@@ -72,34 +81,34 @@ const selectors = {
 			case 'publish_blog':
 			case 'publish_news':
 				return [
-					'kmAnalyticsLoyalVisitors',
-					'kmAnalyticsNewVisitors',
-					'kmAnalyticsTopTrafficSource',
-					'kmAnalyticsEngagedTrafficSource',
+					KM_ANALYTICS_LOYAL_VISITORS,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
 				];
 			case 'monetize_content':
 				return [
-					'kmAnalyticsPopularContent',
-					'kmAnalyticsEngagedTrafficSource',
-					'kmAnalyticsNewVisitors',
-					'kmAnalyticsTopTrafficSource',
+					KM_ANALYTICS_POPULAR_CONTENT,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 				];
 			case 'sell_products_or_service':
 				return [
 					hasProductPostType()
-						? 'kmTopPopularProducts'
-						: 'kmAnalyticsPopularContent',
-					'kmAnalyticsEngagedTrafficSource',
-					'kmSearchConsolePopularKeywords',
-					'kmAnalyticsTopTrafficSource',
+						? KM_ANALYTICS_POPULAR_PRODUCTS
+						: KM_ANALYTICS_POPULAR_CONTENT,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 				];
 
 			case 'share_portfolio':
 				return [
-					'kmAnalyticsNewVisitors',
-					'kmAnalyticsTopTrafficSource',
-					'kmAnalyticsEngagedTrafficSource',
-					'kmSearchConsolePopularKeywords',
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
 				];
 			default:
 				return [];
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
index 716f8ad127d..a53f6a646fc 100644
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
+++ b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
@@ -29,7 +29,16 @@ import {
 } from '../../../../../tests/js/utils';
 import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
 import { CORE_USER } from '../../datastore/user/constants';
-import { CORE_WIDGETS } from './constants';
+import {
+	CORE_WIDGETS,
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_POPULAR_CONTENT,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+} from './constants';
 
 let registry;
 
@@ -87,10 +96,10 @@ describe( 'core/widgets key metrics', () => {
 				expect(
 					registry.select( CORE_WIDGETS ).getKeyMetrics()
 				).toMatchObject( [
-					'kmAnalyticsLoyalVisitors',
-					'kmAnalyticsNewVisitors',
-					'kmAnalyticsTopTrafficSource',
-					'kmAnalyticsEngagedTrafficSource',
+					KM_ANALYTICS_LOYAL_VISITORS,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
 				] );
 
 				expect( fetchMock ).toHaveFetchedTimes( 2 );
@@ -99,7 +108,7 @@ describe( 'core/widgets key metrics', () => {
 			it( 'should use the user-selected key metrics if the user has selected any widgets', async () => {
 				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
 					body: {
-						widgetSlugs: [ 'kmAnalyticsLoyalVisitors' ],
+						widgetSlugs: [ KM_ANALYTICS_LOYAL_VISITORS ],
 						isWidgetHidden: false,
 					},
 					status: 200,
@@ -114,7 +123,7 @@ describe( 'core/widgets key metrics', () => {
 
 				expect(
 					registry.select( CORE_WIDGETS ).getKeyMetrics()
-				).toMatchObject( [ 'kmAnalyticsLoyalVisitors' ] );
+				).toMatchObject( [ KM_ANALYTICS_LOYAL_VISITORS ] );
 
 				expect( fetchMock ).toHaveFetchedTimes( 1 );
 			} );
@@ -162,46 +171,46 @@ describe( 'core/widgets key metrics', () => {
 				[
 					'publish_blog',
 					[
-						'kmAnalyticsLoyalVisitors',
-						'kmAnalyticsNewVisitors',
-						'kmAnalyticsTopTrafficSource',
-						'kmAnalyticsEngagedTrafficSource',
+						KM_ANALYTICS_LOYAL_VISITORS,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
 					],
 				],
 				[
 					'publish_news',
 					[
-						'kmAnalyticsLoyalVisitors',
-						'kmAnalyticsNewVisitors',
-						'kmAnalyticsTopTrafficSource',
-						'kmAnalyticsEngagedTrafficSource',
+						KM_ANALYTICS_LOYAL_VISITORS,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
 					],
 				],
 				[
 					'monetize_content',
 					[
-						'kmAnalyticsPopularContent',
-						'kmAnalyticsEngagedTrafficSource',
-						'kmAnalyticsNewVisitors',
-						'kmAnalyticsTopTrafficSource',
+						KM_ANALYTICS_POPULAR_CONTENT,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 					],
 				],
 				[
 					'sell_products_or_service',
 					[
-						'kmAnalyticsPopularContent',
-						'kmAnalyticsEngagedTrafficSource',
-						'kmSearchConsolePopularKeywords',
-						'kmAnalyticsTopTrafficSource',
+						KM_ANALYTICS_POPULAR_CONTENT,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 					],
 				],
 				[
 					'share_portfolio',
 					[
-						'kmAnalyticsNewVisitors',
-						'kmAnalyticsTopTrafficSource',
-						'kmAnalyticsEngagedTrafficSource',
-						'kmSearchConsolePopularKeywords',
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
 					],
 				],
 			] )(
@@ -231,10 +240,10 @@ describe( 'core/widgets key metrics', () => {
 				expect(
 					registry.select( CORE_WIDGETS ).getAnswerBasedMetrics()
 				).toEqual( [
-					'kmTopPopularProducts',
-					'kmAnalyticsEngagedTrafficSource',
-					'kmSearchConsolePopularKeywords',
-					'kmAnalyticsTopTrafficSource',
+					KM_ANALYTICS_POPULAR_PRODUCTS,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 				] );
 			} );
 		} );
diff --git a/assets/js/modules/analytics-4/index.js b/assets/js/modules/analytics-4/index.js
index 56cf6bc5f04..ccd958e3916 100644
--- a/assets/js/modules/analytics-4/index.js
+++ b/assets/js/modules/analytics-4/index.js
@@ -34,6 +34,17 @@ import AnalyticsIcon from '../../../svg/graphics/analytics.svg';
 import { MODULES_ANALYTICS_4 } from './datastore/constants';
 import { AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY } from '../../googlesitekit/widgets/default-areas';
 import { isFeatureEnabled } from '../../features';
+import {
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_POPULAR_CONTENT,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_CITIES,
+	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
+	KM_ANALYTICS_TOP_COUNTRIES,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+} from '../../googlesitekit/widgets/datastore/constants';
 
 export { registerStore } from './datastore';
 
@@ -50,7 +61,7 @@ export const registerWidgets = ( widgets ) => {
 		 * Key metrics widgets.
 		 */
 		widgets.registerWidget(
-			'kmAnalyticsLoyalVisitors',
+			KM_ANALYTICS_LOYAL_VISITORS,
 			{
 				Component: LoyalVisitorsWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -62,7 +73,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsNewVisitors',
+			KM_ANALYTICS_NEW_VISITORS,
 			{
 				Component: NewVisitorsWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -74,7 +85,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsTopTrafficSource',
+			KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
 			{
 				Component: TopTrafficSourceWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -86,7 +97,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsEngagedTrafficSource',
+			KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
 			{
 				Component: EngagedTrafficSourceWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -98,7 +109,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsPopularContent',
+			KM_ANALYTICS_POPULAR_CONTENT,
 			{
 				Component: PopularContentWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -110,7 +121,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsPopularProducts',
+			KM_ANALYTICS_POPULAR_PRODUCTS,
 			{
 				Component: PopularProductsWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -122,7 +133,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsTopCities',
+			KM_ANALYTICS_TOP_CITIES,
 			{
 				Component: TopCitiesWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -134,7 +145,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmAnalyticsTopCountries',
+			KM_ANALYTICS_TOP_COUNTRIES,
 			{
 				Component: TopCountriesWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
@@ -146,7 +157,7 @@ export const registerWidgets = ( widgets ) => {
 		);
 
 		widgets.registerWidget(
-			'kmTopConvertingTrafficSource',
+			KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
 			{
 				Component: TopConvertingTrafficSourceWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,
diff --git a/assets/js/modules/search-console/index.js b/assets/js/modules/search-console/index.js
index 31322e05f62..edaddf02614 100644
--- a/assets/js/modules/search-console/index.js
+++ b/assets/js/modules/search-console/index.js
@@ -36,6 +36,7 @@ import PopularKeywordsWidget from './components/widgets/PopularKeywordsWidget';
 import { isFeatureEnabled } from '../../features';
 import { negateDefined } from '../../util/negate';
 import { MODULES_ANALYTICS } from '../analytics/datastore/constants';
+import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../googlesitekit/widgets/datastore/constants';
 
 export { registerStore } from './datastore';
 
@@ -113,7 +114,7 @@ export const registerWidgets = ( widgets ) => {
 		 * Key metrics widgets.
 		 */
 		widgets.registerWidget(
-			'kmSearchConsolePopularKeywords',
+			KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
 			{
 				Component: PopularKeywordsWidget,
 				width: widgets.WIDGET_WIDTHS.QUARTER,

From 2377a226d6b3cee8f366526bb0fa101ed81a3b24 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 18 May 2023 19:29:31 +0600
Subject: [PATCH 25/35] Update tests.

---
 .../widgets/EngagedTrafficSourceWidget.test.js       | 12 +++++++++---
 .../components/widgets/LoyalVisitorsWidget.test.js   | 12 +++++++++---
 .../components/widgets/NewVisitorsWidget.test.js     | 12 +++++++++---
 .../components/widgets/PopularContentWidget.test.js  | 12 +++++++++---
 .../components/widgets/PopularProductsWidget.test.js | 12 +++++++++---
 .../components/widgets/TopCitiesWidget.test.js       | 12 +++++++++---
 .../widgets/TopConvertingTrafficSourceWidget.test.js | 12 +++++++++---
 .../components/widgets/TopCountriesWidget.test.js    | 12 +++++++++---
 .../widgets/TopTrafficSourceWidget.test.js           | 12 +++++++++---
 .../components/widgets/PopularKeywordsWidget.test.js | 12 +++++++++---
 10 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index fec7b44917b..4668a7fd1db 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
 
 describe( 'EngagedTrafficSourceWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE
+	)( EngagedTrafficSourceWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <EngagedTrafficSourceWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <EngagedTrafficSourceWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'EngagedTrafficSourceWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <EngagedTrafficSourceWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index 2230c974e08..37e0ec6dfae 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import LoyalVisitorsWidget from './LoyalVisitorsWidget';
 
 describe( 'LoyalVisitorsWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_LOYAL_VISITORS
+	)( LoyalVisitorsWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <LoyalVisitorsWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <LoyalVisitorsWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'LoyalVisitorsWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <LoyalVisitorsWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index 5c0a19b8fed..eb5d0c11ea4 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import NewVisitorsWidget from './NewVisitorsWidget';
 
 describe( 'NewVisitorsWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_NEW_VISITORS
+	)( NewVisitorsWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <NewVisitorsWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <NewVisitorsWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'NewVisitorsWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <NewVisitorsWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index 83aef1daf9b..5671c501397 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import PopularContentWidget from './PopularContentWidget';
 
 describe( 'PopularContentWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_POPULAR_CONTENT
+	)( PopularContentWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <PopularContentWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <PopularContentWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'PopularContentWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <PopularContentWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index bb22e8ae595..c61d39a3e53 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import PopularProductsWidget from './PopularProductsWidget';
 
 describe( 'PopularProductsWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_POPULAR_PRODUCTS
+	)( PopularProductsWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <PopularProductsWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <PopularProductsWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'PopularProductsWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <PopularProductsWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index 24e6fdea75d..5e354a7dc5d 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import TopCitiesWidget from './TopCitiesWidget';
 
 describe( 'TopCitiesWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_TOP_CITIES
+	)( TopCitiesWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <TopCitiesWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <TopCitiesWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'TopCitiesWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <TopCitiesWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index 027e4d98a32..0b9800ba01d 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
 
 describe( 'TopConvertingTrafficSourceWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE
+	)( TopConvertingTrafficSourceWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <TopConvertingTrafficSourceWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <TopConvertingTrafficSourceWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'TopConvertingTrafficSourceWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <TopConvertingTrafficSourceWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index edc9632b88f..de7fb2f6a20 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import TopCountriesWidget from './TopCountriesWidget';
 
 describe( 'TopCountriesWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_TOP_COUNTRIES
+	)( TopCountriesWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <TopCountriesWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <TopCountriesWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'TopCountriesWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <TopCountriesWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index f13cfb1d7b4..e5fcad6460d 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import TopTrafficSourceWidget from './TopTrafficSourceWidget';
 
 describe( 'TopTrafficSourceWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_ANALYTICS_TOP_TRAFFIC_SOURCE
+	)( TopTrafficSourceWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <TopTrafficSourceWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <TopTrafficSourceWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'TopTrafficSourceWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <TopTrafficSourceWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index e9e2427e8f3..7906b4a5b6f 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -20,6 +20,8 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
+import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
 	setupRegistryKeyMetricsWidgetHidden,
@@ -28,15 +30,19 @@ import {
 import PopularKeywordsWidget from './PopularKeywordsWidget';
 
 describe( 'PopularKeywordsWidget', () => {
+	const WidgetWithComponentProps = withWidgetComponentProps(
+		KM_SEARCH_CONSOLE_POPULAR_KEYWORDS
+	)( PopularKeywordsWidget );
+
 	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
 		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <PopularKeywordsWidget /> );
+		const { container } = render( <WidgetWithComponentProps /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <PopularKeywordsWidget />, {
+		const { container } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
 		} );
 
@@ -44,7 +50,7 @@ describe( 'PopularKeywordsWidget', () => {
 	} );
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <PopularKeywordsWidget />, {
+		const { getByText } = render( <WidgetWithComponentProps />, {
 			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
 		} );
 

From 2009950163e9f0b26e56be2d75f36203a2d74e49 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Fri, 19 May 2023 10:57:34 +0600
Subject: [PATCH 26/35] Move the `Grid` to `SettingsKeyMetrics`.

---
 .../js/components/settings/SettingsAdmin.js   |  4 +---
 .../components/settings/SettingsKeyMetrics.js | 21 +++++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index 465e51c6c37..8eef1e37f56 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -87,9 +87,7 @@ export default function SettingsAdmin() {
 						rounded
 					>
 						<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
-							<Grid>
-								<SettingsKeyMetrics />
-							</Grid>
+							<SettingsKeyMetrics />
 							<Grid>
 								{ isUserInputCompleted && (
 									<UserInputPreview
diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 27d008f0310..423a14d1bf2 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -29,6 +29,7 @@ import { Switch } from 'googlesitekit-components';
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
+import { Grid } from '../../material-components';
 
 const { useSelect, useDispatch } = Data;
 
@@ -58,14 +59,16 @@ export default function SettingsKeyMetrics() {
 	}
 
 	return (
-		<Switch
-			label={ __(
-				'Display key metrics in dashboard',
-				'google-site-kit'
-			) }
-			checked={ ! keyMetricsWidgetHidden }
-			onClick={ handleKeyMetricsToggle }
-			hideLabel={ false }
-		/>
+		<Grid>
+			<Switch
+				label={ __(
+					'Display key metrics in dashboard',
+					'google-site-kit'
+				) }
+				checked={ ! keyMetricsWidgetHidden }
+				onClick={ handleKeyMetricsToggle }
+				hideLabel={ false }
+			/>
+		</Grid>
 	);
 }

From 01f5f7309a5f635345a618a381a117f534d1bc4e Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 14:56:37 +0600
Subject: [PATCH 27/35] Rename selector.

---
 assets/js/components/settings/SettingsKeyMetrics.js      | 9 ++++++---
 assets/js/googlesitekit/datastore/user/key-metrics.js    | 2 +-
 .../js/googlesitekit/datastore/user/key-metrics.test.js  | 6 +++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 423a14d1bf2..1a081ccaf9c 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -42,16 +42,19 @@ export default function SettingsKeyMetrics() {
 		select( CORE_WIDGETS ).getKeyMetrics()
 	);
 
-	const { setKeyMetricSetting, saveKeyMetricsSettings } =
+	const { setKeyMetricsSetting, saveKeyMetricsSettings } =
 		useDispatch( CORE_USER );
 
 	const handleKeyMetricsToggle = useCallback( async () => {
-		await setKeyMetricSetting( 'isWidgetHidden', ! keyMetricsWidgetHidden );
+		await setKeyMetricsSetting(
+			'isWidgetHidden',
+			! keyMetricsWidgetHidden
+		);
 		await saveKeyMetricsSettings();
 	}, [
 		keyMetricsWidgetHidden,
 		saveKeyMetricsSettings,
-		setKeyMetricSetting,
+		setKeyMetricsSetting,
 	] );
 
 	if ( ! keyMetricsWidgetHidden === undefined || ! keyMetrics?.length ) {
diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index fb83207d85f..b4bb68e8033 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -76,7 +76,7 @@ const baseActions = {
 	 * @param {Array.<string>} value     Setting value.
 	 * @return {Object} Redux-style action.
 	 */
-	setKeyMetricSetting( settingID, value ) {
+	setKeyMetricsSetting( settingID, value ) {
 		return {
 			type: SET_KEY_METRICS_SETTING,
 			payload: {
diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index cbf642a183d..d0cb13d17fc 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -68,11 +68,11 @@ describe( 'core/user key metrics', () => {
 		const settingID = 'test-setting';
 		const settingValue = 'test-value';
 
-		describe( 'setKeyMetricSetting', () => {
+		describe( 'setKeyMetricsSetting', () => {
 			it( 'should set the setting value to the store', async () => {
 				await registry
 					.dispatch( CORE_USER )
-					.setKeyMetricSetting( settingID, settingValue );
+					.setKeyMetricsSetting( settingID, settingValue );
 
 				expect( store.getState().keyMetricsSettings[ settingID ] ).toBe(
 					settingValue
@@ -84,7 +84,7 @@ describe( 'core/user key metrics', () => {
 			beforeEach( async () => {
 				await registry
 					.dispatch( CORE_USER )
-					.setKeyMetricSetting( settingID, settingValue );
+					.setKeyMetricsSetting( settingID, settingValue );
 			} );
 
 			it( 'should save settings and add it to the store ', async () => {

From 3de5d225bca0a98224143be2187388a20b79d780 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 16:13:39 +0600
Subject: [PATCH 28/35] Move key metrics related infra from widgets datastore.

---
 .../components/settings/SettingsKeyMetrics.js |   3 +-
 .../googlesitekit/datastore/user/constants.js |  15 ++
 .../datastore/user/key-metrics.js             |  96 ++++++-
 .../datastore/user/key-metrics.test.js        | 208 ++++++++++++++-
 .../widgets/datastore/constants.js            |  15 --
 .../googlesitekit/widgets/datastore/index.js  |   2 -
 .../widgets/datastore/key-metrics.js          | 121 ---------
 .../widgets/datastore/key-metrics.test.js     | 251 ------------------
 .../EngagedTrafficSourceWidget.test.js        |   2 +-
 .../widgets/LoyalVisitorsWidget.test.js       |   2 +-
 .../widgets/NewVisitorsWidget.test.js         |   2 +-
 .../widgets/PopularContentWidget.test.js      |   2 +-
 .../widgets/PopularProductsWidget.test.js     |   2 +-
 .../widgets/TopCitiesWidget.test.js           |   2 +-
 .../TopConvertingTrafficSourceWidget.test.js  |   2 +-
 .../widgets/TopCountriesWidget.test.js        |   2 +-
 .../widgets/TopTrafficSourceWidget.test.js    |   2 +-
 assets/js/modules/analytics-4/index.js        |   2 +-
 .../widgets/PopularKeywordsWidget.test.js     |   2 +-
 assets/js/modules/search-console/index.js     |   2 +-
 20 files changed, 329 insertions(+), 406 deletions(-)
 delete mode 100644 assets/js/googlesitekit/widgets/datastore/key-metrics.js
 delete mode 100644 assets/js/googlesitekit/widgets/datastore/key-metrics.test.js

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index 1a081ccaf9c..c21a750a0c0 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -28,7 +28,6 @@ import { __ } from '@wordpress/i18n';
 import { Switch } from 'googlesitekit-components';
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
-import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
 import { Grid } from '../../material-components';
 
 const { useSelect, useDispatch } = Data;
@@ -39,7 +38,7 @@ export default function SettingsKeyMetrics() {
 	);
 
 	const keyMetrics = useSelect( ( select ) =>
-		select( CORE_WIDGETS ).getKeyMetrics()
+		select( CORE_USER ).getKeyMetrics()
 	);
 
 	const { setKeyMetricsSetting, saveKeyMetricsSettings } =
diff --git a/assets/js/googlesitekit/datastore/user/constants.js b/assets/js/googlesitekit/datastore/user/constants.js
index adf6ea42e3a..2b25bd23784 100644
--- a/assets/js/googlesitekit/datastore/user/constants.js
+++ b/assets/js/googlesitekit/datastore/user/constants.js
@@ -41,3 +41,18 @@ export const PERMISSION_MANAGE_MODULE_SHARING_OPTIONS =
 export const PERMISSION_DELEGATE_MODULE_SHARING_MANAGEMENT =
 	'googlesitekit_delegate_module_sharing_management';
 export const PERMISSION_UPDATE_PLUGINS = 'googlesitekit_update_plugins';
+
+// Key Metrics Widgets
+export const KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE =
+	'kmAnalyticsEngagedTrafficSource';
+export const KM_ANALYTICS_LOYAL_VISITORS = 'kmAnalyticsLoyalVisitors';
+export const KM_ANALYTICS_NEW_VISITORS = 'kmAnalyticsNewVisitors';
+export const KM_ANALYTICS_POPULAR_CONTENT = 'kmAnalyticsPopularContent';
+export const KM_ANALYTICS_POPULAR_PRODUCTS = 'kmAnalyticsPopularProducts';
+export const KM_ANALYTICS_TOP_CITIES = 'kmAnalyticsTopCities';
+export const KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE =
+	'kmTopConvertingTrafficSource';
+export const KM_ANALYTICS_TOP_COUNTRIES = 'kmAnalyticsTopCountries';
+export const KM_ANALYTICS_TOP_TRAFFIC_SOURCE = 'kmAnalyticsTopTrafficSource';
+export const KM_SEARCH_CONSOLE_POPULAR_KEYWORDS =
+	'kmSearchConsolePopularKeywords';
diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.js b/assets/js/googlesitekit/datastore/user/key-metrics.js
index b4bb68e8033..5a7500089a8 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.js
@@ -25,9 +25,21 @@ import { isPlainObject } from 'lodash';
  */
 import API from 'googlesitekit-api';
 import Data from 'googlesitekit-data';
-import { CORE_USER } from './constants';
+import {
+	CORE_USER,
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_POPULAR_CONTENT,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+} from './constants';
+import { CORE_SITE } from '../../datastore/site/constants';
+
 import { createFetchStore } from '../../data/create-fetch-store';
 import { actions as errorStoreActions } from '../../data/create-error-store';
+
 const { receiveError, clearError } = errorStoreActions;
 const { createRegistrySelector } = Data;
 
@@ -70,7 +82,7 @@ const baseActions = {
 	/**
 	 * Sets key metrics setting.
 	 *
-	 * @since 1.94.0
+	 * @since n.e.x.t
 	 *
 	 * @param {string}         settingID Setting key.
 	 * @param {Array.<string>} value     Setting value.
@@ -149,6 +161,86 @@ const baseResolvers = {
 };
 
 const baseSelectors = {
+	/**
+	 * Gets currently selected key metrics based on either the user picked metrics or the answer based metrics.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {Array<string>|undefined} An array of key metric slugs, or undefined while loading.
+	 */
+	getKeyMetrics: createRegistrySelector( ( select ) => () => {
+		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
+
+		if ( userPickedMetrics === undefined ) {
+			return undefined;
+		}
+
+		if ( userPickedMetrics.length ) {
+			return userPickedMetrics;
+		}
+
+		return select( CORE_USER ).getAnswerBasedMetrics();
+	} ),
+
+	/**
+	 * Gets the Key Metric widget slugs based on the user input settings.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {Array<string>|undefined} An array of Key Metric widget slugs, or undefined if the user input settings are not loaded.
+	 */
+	getAnswerBasedMetrics: createRegistrySelector( ( select ) => () => {
+		const userInputSettings = select( CORE_USER ).getUserInputSettings();
+
+		if ( userInputSettings === undefined ) {
+			return undefined;
+		}
+
+		const purpose = userInputSettings?.purpose?.values?.[ 0 ];
+
+		const hasProductPostType = () => {
+			const postTypes = select( CORE_SITE ).getPostTypes();
+			return postTypes.some( ( { slug } ) => slug === 'product' );
+		};
+
+		switch ( purpose ) {
+			case 'publish_blog':
+			case 'publish_news':
+				return [
+					KM_ANALYTICS_LOYAL_VISITORS,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+				];
+			case 'monetize_content':
+				return [
+					KM_ANALYTICS_POPULAR_CONTENT,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+				];
+			case 'sell_products_or_service':
+				return [
+					hasProductPostType()
+						? KM_ANALYTICS_POPULAR_PRODUCTS
+						: KM_ANALYTICS_POPULAR_CONTENT,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+				];
+
+			case 'share_portfolio':
+				return [
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+				];
+			default:
+				return [];
+		}
+	} ),
+
 	/**
 	 * Gets the Key Metric widget slugs selected by the user.
 	 *
diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index d0cb13d17fc..37c859d90d3 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -21,12 +21,22 @@ import API from 'googlesitekit-api';
 import {
 	createTestRegistry,
 	freezeFetch,
+	provideSiteInfo,
 	unsubscribeFromAll,
 	untilResolved,
 	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
 import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
-import { CORE_USER } from './constants';
+import {
+	CORE_USER,
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_POPULAR_CONTENT,
+	KM_ANALYTICS_POPULAR_PRODUCTS,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+} from './constants';
 
 describe( 'core/user key metrics', () => {
 	let registry;
@@ -53,7 +63,9 @@ describe( 'core/user key metrics', () => {
 
 	beforeEach( () => {
 		registry = createTestRegistry();
+		provideSiteInfo( registry );
 		store = registry.stores[ CORE_USER ].store;
+		registry.dispatch( CORE_USER ).receiveIsUserInputCompleted( true );
 	} );
 
 	afterAll( () => {
@@ -68,6 +80,200 @@ describe( 'core/user key metrics', () => {
 		const settingID = 'test-setting';
 		const settingValue = 'test-value';
 
+		describe( 'getKeyMetrics', () => {
+			it( 'should use answer-based key metrics if the user has not selected any widgets', async () => {
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: {
+						widgetSlugs: [],
+						isWidgetHidden: false,
+					},
+					status: 200,
+				} );
+
+				fetchMock.getOnce(
+					new RegExp(
+						'^/google-site-kit/v1/core/user/data/user-input-settings'
+					),
+					{
+						body: {
+							purpose: {
+								values: [ 'publish_blog' ],
+								scope: 'site',
+							},
+						},
+						status: 200,
+					}
+				);
+
+				registry.select( CORE_USER ).getUserInputSettings();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getUserInputSettings();
+
+				registry.select( CORE_USER ).getKeyMetrics();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getKeyMetricsSettings();
+
+				expect(
+					registry.select( CORE_USER ).getKeyMetrics()
+				).toMatchObject( [
+					KM_ANALYTICS_LOYAL_VISITORS,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+				] );
+
+				expect( fetchMock ).toHaveFetchedTimes( 2 );
+			} );
+
+			it( 'should use the user-selected key metrics if the user has selected any widgets', async () => {
+				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
+					body: {
+						widgetSlugs: [ KM_ANALYTICS_LOYAL_VISITORS ],
+						isWidgetHidden: false,
+					},
+					status: 200,
+				} );
+
+				registry.select( CORE_USER ).getKeyMetrics();
+
+				await untilResolved(
+					registry,
+					CORE_USER
+				).getKeyMetricsSettings();
+
+				expect(
+					registry.select( CORE_USER ).getKeyMetrics()
+				).toMatchObject( [ KM_ANALYTICS_LOYAL_VISITORS ] );
+
+				expect( fetchMock ).toHaveFetchedTimes( 1 );
+			} );
+		} );
+
+		describe( 'getAnswerBasedMetrics', () => {
+			it( 'should return undefined if user input settings are not resolved', async () => {
+				freezeFetch(
+					new RegExp(
+						'^/google-site-kit/v1/core/user/data/user-input-settings'
+					)
+				);
+
+				expect(
+					registry.select( CORE_USER ).getAnswerBasedMetrics()
+				).toBeUndefined();
+
+				// Wait for resolvers to run.
+				await waitForDefaultTimeouts();
+			} );
+
+			it.each( [
+				[ 'undefined', undefined ],
+				[ 'null', null ],
+				[ 'an empty object', {} ],
+				[ 'an object with empty purpose', { purpose: {} } ],
+				[
+					'an object with empty purpose values',
+					{ purpose: { values: [] } },
+				],
+			] )(
+				'should return an empty array if user input settings are %s',
+				( userInputSettings ) => {
+					registry
+						.dispatch( CORE_USER )
+						.receiveGetUserInputSettings( userInputSettings );
+
+					expect(
+						registry.select( CORE_USER ).getAnswerBasedMetrics()
+					).toEqual( [] );
+				}
+			);
+
+			it.each( [
+				[
+					'publish_blog',
+					[
+						KM_ANALYTICS_LOYAL_VISITORS,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					],
+				],
+				[
+					'publish_news',
+					[
+						KM_ANALYTICS_LOYAL_VISITORS,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					],
+				],
+				[
+					'monetize_content',
+					[
+						KM_ANALYTICS_POPULAR_CONTENT,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					],
+				],
+				[
+					'sell_products_or_service',
+					[
+						KM_ANALYTICS_POPULAR_CONTENT,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					],
+				],
+				[
+					'share_portfolio',
+					[
+						KM_ANALYTICS_NEW_VISITORS,
+						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+					],
+				],
+			] )(
+				'should return the correct metrics for the %s purpose',
+				( purpose, expectedMetrics ) => {
+					registry
+						.dispatch( CORE_USER )
+						.receiveGetUserInputSettings( {
+							purpose: { values: [ purpose ] },
+						} );
+
+					expect(
+						registry.select( CORE_USER ).getAnswerBasedMetrics()
+					).toEqual( expectedMetrics );
+				}
+			);
+
+			it( 'should return the correct metrics for the sell_products_or_service purposes when the site has a product post type', () => {
+				provideSiteInfo( registry, {
+					postTypes: [ { slug: 'product', label: 'Product' } ],
+				} );
+
+				registry.dispatch( CORE_USER ).receiveGetUserInputSettings( {
+					purpose: { values: [ 'sell_products_or_service' ] },
+				} );
+
+				expect(
+					registry.select( CORE_USER ).getAnswerBasedMetrics()
+				).toEqual( [
+					KM_ANALYTICS_POPULAR_PRODUCTS,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+				] );
+			} );
+		} );
+
 		describe( 'setKeyMetricsSetting', () => {
 			it( 'should set the setting value to the store', async () => {
 				await registry
diff --git a/assets/js/googlesitekit/widgets/datastore/constants.js b/assets/js/googlesitekit/widgets/datastore/constants.js
index 13e9b3c482d..50356cf6aa1 100644
--- a/assets/js/googlesitekit/widgets/datastore/constants.js
+++ b/assets/js/googlesitekit/widgets/datastore/constants.js
@@ -20,18 +20,3 @@ export const WIDGET_AREA_STYLES = { BOXES: 'boxes', COMPOSITE: 'composite' };
 export const WIDGET_WIDTHS = { QUARTER: 'quarter', HALF: 'half', FULL: 'full' };
 
 export const CORE_WIDGETS = 'core/widgets';
-
-// Key Metrics Widgets
-export const KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE =
-	'kmAnalyticsEngagedTrafficSource';
-export const KM_ANALYTICS_LOYAL_VISITORS = 'kmAnalyticsLoyalVisitors';
-export const KM_ANALYTICS_NEW_VISITORS = 'kmAnalyticsNewVisitors';
-export const KM_ANALYTICS_POPULAR_CONTENT = 'kmAnalyticsPopularContent';
-export const KM_ANALYTICS_POPULAR_PRODUCTS = 'kmAnalyticsPopularProducts';
-export const KM_ANALYTICS_TOP_CITIES = 'kmAnalyticsTopCities';
-export const KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE =
-	'kmTopConvertingTrafficSource';
-export const KM_ANALYTICS_TOP_COUNTRIES = 'kmAnalyticsTopCountries';
-export const KM_ANALYTICS_TOP_TRAFFIC_SOURCE = 'kmAnalyticsTopTrafficSource';
-export const KM_SEARCH_CONSOLE_POPULAR_KEYWORDS =
-	'kmSearchConsolePopularKeywords';
diff --git a/assets/js/googlesitekit/widgets/datastore/index.js b/assets/js/googlesitekit/widgets/datastore/index.js
index e1cb08c32c7..8e34055ebdb 100644
--- a/assets/js/googlesitekit/widgets/datastore/index.js
+++ b/assets/js/googlesitekit/widgets/datastore/index.js
@@ -23,7 +23,6 @@ import Data from 'googlesitekit-data';
 import areas from './areas';
 import widgets from './widgets';
 import contexts from './contexts';
-import keyMetrics from './key-metrics';
 import { createErrorStore } from '../../data/create-error-store';
 import { CORE_WIDGETS } from './constants';
 
@@ -32,7 +31,6 @@ const store = Data.combineStores(
 	areas,
 	widgets,
 	contexts,
-	keyMetrics,
 	createErrorStore( CORE_WIDGETS )
 );
 
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.js
deleted file mode 100644
index 1b730c9f79f..00000000000
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * `core/widgets` data store: key metrics data.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import Data from 'googlesitekit-data';
-import {
-	CORE_WIDGETS,
-	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-	KM_ANALYTICS_LOYAL_VISITORS,
-	KM_ANALYTICS_NEW_VISITORS,
-	KM_ANALYTICS_POPULAR_CONTENT,
-	KM_ANALYTICS_POPULAR_PRODUCTS,
-	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-} from './constants';
-import { CORE_SITE } from '../../datastore/site/constants';
-import { CORE_USER } from '../../datastore/user/constants';
-
-const { createRegistrySelector } = Data;
-
-const selectors = {
-	/**
-	 * Gets currently selected key metrics based on either the user picked metrics or the answer based metrics.
-	 *
-	 * @since n.e.x.t
-	 *
-	 * @return {Array<string>|undefined} An array of key metric slugs, or undefined while loading.
-	 */
-	getKeyMetrics: createRegistrySelector( ( select ) => () => {
-		const userPickedMetrics = select( CORE_USER ).getUserPickedMetrics();
-
-		if ( userPickedMetrics === undefined ) {
-			return undefined;
-		}
-
-		if ( userPickedMetrics.length ) {
-			return userPickedMetrics;
-		}
-
-		return select( CORE_WIDGETS ).getAnswerBasedMetrics();
-	} ),
-	/**
-	 * Gets the Key Metric widget slugs based on the user input settings.
-	 *
-	 * @since 1.95.0
-	 *
-	 * @return {Array<string>|undefined} An array of Key Metric widget slugs, or undefined if the user input settings are not loaded.
-	 */
-	getAnswerBasedMetrics: createRegistrySelector( ( select ) => () => {
-		const userInputSettings = select( CORE_USER ).getUserInputSettings();
-
-		if ( userInputSettings === undefined ) {
-			return undefined;
-		}
-
-		const purpose = userInputSettings?.purpose?.values?.[ 0 ];
-
-		const hasProductPostType = () => {
-			const postTypes = select( CORE_SITE ).getPostTypes();
-			return postTypes.some( ( { slug } ) => slug === 'product' );
-		};
-
-		switch ( purpose ) {
-			case 'publish_blog':
-			case 'publish_news':
-				return [
-					KM_ANALYTICS_LOYAL_VISITORS,
-					KM_ANALYTICS_NEW_VISITORS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-				];
-			case 'monetize_content':
-				return [
-					KM_ANALYTICS_POPULAR_CONTENT,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					KM_ANALYTICS_NEW_VISITORS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-				];
-			case 'sell_products_or_service':
-				return [
-					hasProductPostType()
-						? KM_ANALYTICS_POPULAR_PRODUCTS
-						: KM_ANALYTICS_POPULAR_CONTENT,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-				];
-
-			case 'share_portfolio':
-				return [
-					KM_ANALYTICS_NEW_VISITORS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-				];
-			default:
-				return [];
-		}
-	} ),
-};
-
-export default {
-	selectors,
-};
diff --git a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js b/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
deleted file mode 100644
index a53f6a646fc..00000000000
--- a/assets/js/googlesitekit/widgets/datastore/key-metrics.test.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/**
- * `core/widgets` data store: key metrics tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	createTestRegistry,
-	freezeFetch,
-	provideSiteInfo,
-	unsubscribeFromAll,
-	untilResolved,
-	waitForDefaultTimeouts,
-} from '../../../../../tests/js/utils';
-import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
-import { CORE_USER } from '../../datastore/user/constants';
-import {
-	CORE_WIDGETS,
-	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-	KM_ANALYTICS_LOYAL_VISITORS,
-	KM_ANALYTICS_NEW_VISITORS,
-	KM_ANALYTICS_POPULAR_CONTENT,
-	KM_ANALYTICS_POPULAR_PRODUCTS,
-	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-} from './constants';
-
-let registry;
-
-describe( 'core/widgets key metrics', () => {
-	beforeEach( () => {
-		registry = createTestRegistry();
-		registry.dispatch( CORE_USER ).receiveIsUserInputCompleted( true );
-		provideSiteInfo( registry );
-	} );
-
-	afterEach( () => {
-		unsubscribeFromAll( registry );
-	} );
-
-	describe( 'selectors', () => {
-		describe( 'getKeyMetrics', () => {
-			it( 'should use answer-based key metrics if the user has not selected any widgets', async () => {
-				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
-					body: {
-						widgetSlugs: [],
-						isWidgetHidden: false,
-					},
-					status: 200,
-				} );
-
-				fetchMock.getOnce(
-					new RegExp(
-						'^/google-site-kit/v1/core/user/data/user-input-settings'
-					),
-					{
-						body: {
-							purpose: {
-								values: [ 'publish_blog' ],
-								scope: 'site',
-							},
-						},
-						status: 200,
-					}
-				);
-
-				registry.select( CORE_USER ).getUserInputSettings();
-
-				await untilResolved(
-					registry,
-					CORE_USER
-				).getUserInputSettings();
-
-				registry.select( CORE_WIDGETS ).getKeyMetrics();
-
-				await untilResolved(
-					registry,
-					CORE_USER
-				).getKeyMetricsSettings();
-
-				expect(
-					registry.select( CORE_WIDGETS ).getKeyMetrics()
-				).toMatchObject( [
-					KM_ANALYTICS_LOYAL_VISITORS,
-					KM_ANALYTICS_NEW_VISITORS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-				] );
-
-				expect( fetchMock ).toHaveFetchedTimes( 2 );
-			} );
-
-			it( 'should use the user-selected key metrics if the user has selected any widgets', async () => {
-				fetchMock.getOnce( coreKeyMetricsEndpointRegExp, {
-					body: {
-						widgetSlugs: [ KM_ANALYTICS_LOYAL_VISITORS ],
-						isWidgetHidden: false,
-					},
-					status: 200,
-				} );
-
-				registry.select( CORE_WIDGETS ).getKeyMetrics();
-
-				await untilResolved(
-					registry,
-					CORE_USER
-				).getKeyMetricsSettings();
-
-				expect(
-					registry.select( CORE_WIDGETS ).getKeyMetrics()
-				).toMatchObject( [ KM_ANALYTICS_LOYAL_VISITORS ] );
-
-				expect( fetchMock ).toHaveFetchedTimes( 1 );
-			} );
-		} );
-
-		describe( 'getAnswerBasedMetrics', () => {
-			it( 'should return undefined if user input settings are not resolved', async () => {
-				freezeFetch(
-					new RegExp(
-						'^/google-site-kit/v1/core/user/data/user-input-settings'
-					)
-				);
-
-				expect(
-					registry.select( CORE_WIDGETS ).getAnswerBasedMetrics()
-				).toBeUndefined();
-
-				// Wait for resolvers to run.
-				await waitForDefaultTimeouts();
-			} );
-
-			it.each( [
-				[ 'undefined', undefined ],
-				[ 'null', null ],
-				[ 'an empty object', {} ],
-				[ 'an object with empty purpose', { purpose: {} } ],
-				[
-					'an object with empty purpose values',
-					{ purpose: { values: [] } },
-				],
-			] )(
-				'should return an empty array if user input settings are %s',
-				( userInputSettings ) => {
-					registry
-						.dispatch( CORE_USER )
-						.receiveGetUserInputSettings( userInputSettings );
-
-					expect(
-						registry.select( CORE_WIDGETS ).getAnswerBasedMetrics()
-					).toEqual( [] );
-				}
-			);
-
-			it.each( [
-				[
-					'publish_blog',
-					[
-						KM_ANALYTICS_LOYAL_VISITORS,
-						KM_ANALYTICS_NEW_VISITORS,
-						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					],
-				],
-				[
-					'publish_news',
-					[
-						KM_ANALYTICS_LOYAL_VISITORS,
-						KM_ANALYTICS_NEW_VISITORS,
-						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					],
-				],
-				[
-					'monetize_content',
-					[
-						KM_ANALYTICS_POPULAR_CONTENT,
-						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-						KM_ANALYTICS_NEW_VISITORS,
-						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-					],
-				],
-				[
-					'sell_products_or_service',
-					[
-						KM_ANALYTICS_POPULAR_CONTENT,
-						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-					],
-				],
-				[
-					'share_portfolio',
-					[
-						KM_ANALYTICS_NEW_VISITORS,
-						KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-						KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-						KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-					],
-				],
-			] )(
-				'should return the correct metrics for the %s purpose',
-				( purpose, expectedMetrics ) => {
-					registry
-						.dispatch( CORE_USER )
-						.receiveGetUserInputSettings( {
-							purpose: { values: [ purpose ] },
-						} );
-
-					expect(
-						registry.select( CORE_WIDGETS ).getAnswerBasedMetrics()
-					).toEqual( expectedMetrics );
-				}
-			);
-
-			it( 'should return the correct metrics for the sell_products_or_service purposes when the site has a product post type', () => {
-				provideSiteInfo( registry, {
-					postTypes: [ { slug: 'product', label: 'Product' } ],
-				} );
-
-				registry.dispatch( CORE_USER ).receiveGetUserInputSettings( {
-					purpose: { values: [ 'sell_products_or_service' ] },
-				} );
-
-				expect(
-					registry.select( CORE_WIDGETS ).getAnswerBasedMetrics()
-				).toEqual( [
-					KM_ANALYTICS_POPULAR_PRODUCTS,
-					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
-					KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
-					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-				] );
-			} );
-		} );
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index 4668a7fd1db..07939f3ad0a 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index 37e0ec6dfae..3c4b1afdc00 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index eb5d0c11ea4..13f35d23501 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index 5671c501397..2f6ae1b777b 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index c61d39a3e53..b0543b41693 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index 5e354a7dc5d..cd58539c6aa 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index 0b9800ba01d..20ee3403ea5 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index de7fb2f6a20..5671e63a050 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index e5fcad6460d..ab1270e90e7 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/analytics-4/index.js b/assets/js/modules/analytics-4/index.js
index ccd958e3916..047d5610f94 100644
--- a/assets/js/modules/analytics-4/index.js
+++ b/assets/js/modules/analytics-4/index.js
@@ -44,7 +44,7 @@ import {
 	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
 	KM_ANALYTICS_TOP_COUNTRIES,
 	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
-} from '../../googlesitekit/widgets/datastore/constants';
+} from '../../googlesitekit/datastore/user/constants';
 
 export { registerStore } from './datastore';
 
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index 7906b4a5b6f..4aa84d622eb 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -20,7 +20,7 @@
  * Internal dependencies
  */
 import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/widgets/datastore/constants';
+import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/datastore/user/constants';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
diff --git a/assets/js/modules/search-console/index.js b/assets/js/modules/search-console/index.js
index edaddf02614..74137c23621 100644
--- a/assets/js/modules/search-console/index.js
+++ b/assets/js/modules/search-console/index.js
@@ -36,7 +36,7 @@ import PopularKeywordsWidget from './components/widgets/PopularKeywordsWidget';
 import { isFeatureEnabled } from '../../features';
 import { negateDefined } from '../../util/negate';
 import { MODULES_ANALYTICS } from '../analytics/datastore/constants';
-import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../googlesitekit/widgets/datastore/constants';
+import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../googlesitekit/datastore/user/constants';
 
 export { registerStore } from './datastore';
 

From fa316fd2f97be818e03970ff594a0d95c90383da Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 16:21:57 +0600
Subject: [PATCH 29/35] Add prop types to key metrics widgets.

---
 .../components/widgets/EngagedTrafficSourceWidget.js   | 10 ++++++++++
 .../components/widgets/LoyalVisitorsWidget.js          | 10 ++++++++++
 .../components/widgets/NewVisitorsWidget.js            | 10 ++++++++++
 .../components/widgets/PopularContentWidget.js         | 10 ++++++++++
 .../components/widgets/PopularProductsWidget.js        | 10 ++++++++++
 .../analytics-4/components/widgets/TopCitiesWidget.js  | 10 ++++++++++
 .../widgets/TopConvertingTrafficSourceWidget.js        | 10 ++++++++++
 .../components/widgets/TopCountriesWidget.js           | 10 ++++++++++
 .../components/widgets/TopTrafficSourceWidget.js       | 10 ++++++++++
 .../components/widgets/PopularKeywordsWidget.js        | 10 ++++++++++
 10 files changed, 100 insertions(+)

diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
index 4eae4f681fd..deacccb60ec 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function EngagedTrafficSourceWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+EngagedTrafficSourceWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
index a37211705e8..5d0902e35d0 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function LoyalVisitorsWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+LoyalVisitorsWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
index b775456a8ea..6340a44954c 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function NewVisitorsWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+NewVisitorsWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
index cf9e6b887cc..c9b4937b89a 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function PopularContentWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+PopularContentWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
index 1a1ca6807d4..384030944ab 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function PopularProductsWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+PopularProductsWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
index 7cfe7482ad8..71748110fd7 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function TopCitiesWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+TopCitiesWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
index 5551c09bc6b..e5180827f30 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -42,3 +47,8 @@ export default function TopConvertingTrafficSourceWidget( {
 		</Widget>
 	);
 }
+
+TopConvertingTrafficSourceWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
index 2d598123456..ef9769d8355 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function TopCountriesWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+TopCountriesWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
index 6b9f78d11d6..d9d420b54f3 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function TopTrafficSourceWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+TopTrafficSourceWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
index d0e9d096582..d9253490a39 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
@@ -39,3 +44,8 @@ export default function PopularKeywordsWidget( { Widget, WidgetNull } ) {
 		</Widget>
 	);
 }
+
+PopularKeywordsWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};

From f9d21e288f4ce54c5511ae2b3ab96223ef5e39a0 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 17:45:50 +0600
Subject: [PATCH 30/35] Refactor KM widget tests to use provideKeyMetrics.

---
 .../EngagedTrafficSourceWidget.test.js        | 19 ++++---
 .../widgets/LoyalVisitorsWidget.test.js       | 19 ++++---
 .../widgets/NewVisitorsWidget.test.js         | 19 ++++---
 .../widgets/PopularContentWidget.test.js      | 19 ++++---
 .../widgets/PopularProductsWidget.test.js     | 19 ++++---
 .../widgets/TopCitiesWidget.test.js           | 19 ++++---
 .../TopConvertingTrafficSourceWidget.test.js  | 19 ++++---
 .../widgets/TopCountriesWidget.test.js        | 19 ++++---
 .../widgets/TopTrafficSourceWidget.test.js    | 19 ++++---
 .../widgets/PopularKeywordsWidget.test.js     | 19 ++++---
 assets/js/util/key-metrics.js                 | 57 -------------------
 tests/js/utils.js                             | 26 +++++++++
 12 files changed, 136 insertions(+), 137 deletions(-)
 delete mode 100644 assets/js/util/key-metrics.js

diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index 07939f3ad0a..0160156b3db 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
 
 describe( 'EngagedTrafficSourceWidget', () => {
@@ -43,7 +43,10 @@ describe( 'EngagedTrafficSourceWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'EngagedTrafficSourceWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index 3c4b1afdc00..d9aaec3a1ae 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import LoyalVisitorsWidget from './LoyalVisitorsWidget';
 
 describe( 'LoyalVisitorsWidget', () => {
@@ -43,7 +43,10 @@ describe( 'LoyalVisitorsWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'LoyalVisitorsWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index 13f35d23501..0d553c5f5ab 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import NewVisitorsWidget from './NewVisitorsWidget';
 
 describe( 'NewVisitorsWidget', () => {
@@ -43,7 +43,10 @@ describe( 'NewVisitorsWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'NewVisitorsWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index 2f6ae1b777b..772db429940 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularContentWidget from './PopularContentWidget';
 
 describe( 'PopularContentWidget', () => {
@@ -43,7 +43,10 @@ describe( 'PopularContentWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'PopularContentWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index b0543b41693..e01d4cdbfb0 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularProductsWidget from './PopularProductsWidget';
 
 describe( 'PopularProductsWidget', () => {
@@ -43,7 +43,10 @@ describe( 'PopularProductsWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'PopularProductsWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index cd58539c6aa..39c6a6091b7 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopCitiesWidget from './TopCitiesWidget';
 
 describe( 'TopCitiesWidget', () => {
@@ -43,7 +43,10 @@ describe( 'TopCitiesWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'TopCitiesWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index 20ee3403ea5..5d769a98ff1 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
 
 describe( 'TopConvertingTrafficSourceWidget', () => {
@@ -43,7 +43,10 @@ describe( 'TopConvertingTrafficSourceWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'TopConvertingTrafficSourceWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index 5671e63a050..a8a49f598af 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopCountriesWidget from './TopCountriesWidget';
 
 describe( 'TopCountriesWidget', () => {
@@ -43,7 +43,10 @@ describe( 'TopCountriesWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'TopCountriesWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index ab1270e90e7..dad2a316a51 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopTrafficSourceWidget from './TopTrafficSourceWidget';
 
 describe( 'TopTrafficSourceWidget', () => {
@@ -43,7 +43,10 @@ describe( 'TopTrafficSourceWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'TopTrafficSourceWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index 4aa84d622eb..48df9fe307c 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -19,14 +19,14 @@
 /**
  * Internal dependencies
  */
-import { freezeFetch, render } from '../../../../../../tests/js/test-utils';
-import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/datastore/user/constants';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import {
 	coreKeyMetricsEndpointRegExp,
-	setupRegistryKeyMetricsWidgetHidden,
-	setupRegistryKeyMetricsWidgetNotHidden,
-} from '../../../../util/key-metrics';
+	freezeFetch,
+	provideKeyMetrics,
+	render,
+} from '../../../../../../tests/js/test-utils';
+import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularKeywordsWidget from './PopularKeywordsWidget';
 
 describe( 'PopularKeywordsWidget', () => {
@@ -43,7 +43,10 @@ describe( 'PopularKeywordsWidget', () => {
 
 	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
 		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetHidden,
+			setupRegistry: ( registry ) =>
+				provideKeyMetrics( registry, {
+					isWidgetHidden: true,
+				} ),
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
@@ -51,7 +54,7 @@ describe( 'PopularKeywordsWidget', () => {
 
 	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
 		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: setupRegistryKeyMetricsWidgetNotHidden,
+			setupRegistry: provideKeyMetrics,
 		} );
 
 		expect(
diff --git a/assets/js/util/key-metrics.js b/assets/js/util/key-metrics.js
deleted file mode 100644
index ac6ecd9be04..00000000000
--- a/assets/js/util/key-metrics.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Key Metrics test utility functions.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import { CORE_USER } from '../googlesitekit/datastore/user/constants';
-
-/**
- * The endpoint for the key metrics settings.
- */
-export const coreKeyMetricsEndpointRegExp = new RegExp(
-	'^/google-site-kit/v1/core/user/data/key-metrics'
-);
-
-/**
- * Sets up the registry with the key metrics settings where isWidgetHidden is true.
- *
- * @since n.e.x.t
- *
- * @param {Object} registry The registry to set up.
- */
-export const setupRegistryKeyMetricsWidgetHidden = ( registry ) => {
-	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
-		widgetSlugs: [ 'test-slug' ],
-		isWidgetHidden: true,
-	} );
-};
-
-/**
- * Sets up the registry with the key metrics settings where isWidgetHidden is false.
- *
- * @since n.e.x.t
- *
- * @param {Object} registry The registry to set up.
- */
-export const setupRegistryKeyMetricsWidgetNotHidden = ( registry ) => {
-	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
-		widgetSlugs: [ 'test-slug' ],
-		isWidgetHidden: false,
-	} );
-};
diff --git a/tests/js/utils.js b/tests/js/utils.js
index 2d8eeaff0c6..b299c289d4a 100644
--- a/tests/js/utils.js
+++ b/tests/js/utils.js
@@ -401,6 +401,32 @@ export function provideTracking( registry, enabled = true ) {
 	registry.dispatch( CORE_USER ).receiveGetTracking( { enabled } );
 }
 
+/**
+ * The endpoint for the key metrics settings.
+ */
+export const coreKeyMetricsEndpointRegExp = new RegExp(
+	'^/google-site-kit/v1/core/user/data/key-metrics'
+);
+
+/**
+ * Provides key metrics settings data to the given registry.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object} registry    The registry to set up.
+ * @param {Object} [extraData] Extra data to merge with the default settings.
+ */
+export const provideKeyMetrics = ( registry, extraData = {} ) => {
+	const defaults = {
+		widgetSlugs: [ 'test-slug' ],
+		isWidgetHidden: false,
+	};
+	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+		...defaults,
+		...extraData,
+	} );
+};
+
 /**
  * Mutes a fetch request to the given URL once.
  *

From 857e4c32430fe46c4fe95a64ce056641bf80c9b1 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 17:58:54 +0600
Subject: [PATCH 31/35] Add row and cell.

---
 .../components/settings/SettingsKeyMetrics.js | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/assets/js/components/settings/SettingsKeyMetrics.js b/assets/js/components/settings/SettingsKeyMetrics.js
index c21a750a0c0..5aade3bfdc2 100644
--- a/assets/js/components/settings/SettingsKeyMetrics.js
+++ b/assets/js/components/settings/SettingsKeyMetrics.js
@@ -28,7 +28,7 @@ import { __ } from '@wordpress/i18n';
 import { Switch } from 'googlesitekit-components';
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
-import { Grid } from '../../material-components';
+import { Cell, Grid, Row } from '../../material-components';
 
 const { useSelect, useDispatch } = Data;
 
@@ -62,15 +62,19 @@ export default function SettingsKeyMetrics() {
 
 	return (
 		<Grid>
-			<Switch
-				label={ __(
-					'Display key metrics in dashboard',
-					'google-site-kit'
-				) }
-				checked={ ! keyMetricsWidgetHidden }
-				onClick={ handleKeyMetricsToggle }
-				hideLabel={ false }
-			/>
+			<Row>
+				<Cell size={ 12 }>
+					<Switch
+						label={ __(
+							'Display key metrics in dashboard',
+							'google-site-kit'
+						) }
+						checked={ ! keyMetricsWidgetHidden }
+						onClick={ handleKeyMetricsToggle }
+						hideLabel={ false }
+					/>
+				</Cell>
+			</Row>
 		</Grid>
 	);
 }

From ee1ece8a25a5c0003f5b4841aa38878bda0d0064 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 18:44:19 +0600
Subject: [PATCH 32/35] Update SettingsAdmin before revert.

---
 .../js/components/settings/SettingsAdmin.js   | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/assets/js/components/settings/SettingsAdmin.js b/assets/js/components/settings/SettingsAdmin.js
index 8eef1e37f56..e50f086faa7 100644
--- a/assets/js/components/settings/SettingsAdmin.js
+++ b/assets/js/components/settings/SettingsAdmin.js
@@ -90,17 +90,24 @@ export default function SettingsAdmin() {
 							<SettingsKeyMetrics />
 							<Grid>
 								{ isUserInputCompleted && (
-									<UserInputPreview
-										goTo={ goTo }
-										noHeader
-										noFooter
-										settingsView
-										showIndividualCTAs
-									/>
+									<Row>
+										<Cell size={ 12 }>
+											<UserInputPreview
+												goTo={ goTo }
+												noHeader
+												noFooter
+												settingsView
+												showIndividualCTAs
+											/>
+										</Cell>
+									</Row>
 								) }
 								{ isUserInputCompleted === false && (
-									<div className="googlesitekit-user-input__notification">
-										<Cell>
+									<Row>
+										<Cell
+											className="googlesitekit-user-input__notification"
+											size={ 12 }
+										>
 											<p>
 												<span>
 													{ __(
@@ -116,7 +123,7 @@ export default function SettingsAdmin() {
 												) }
 											</Link>
 										</Cell>
-									</div>
+									</Row>
 								) }
 							</Grid>
 						</div>

From a2515f57f03f76a433d26402cc5b7fbcc35c2012 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Tue, 30 May 2023 19:13:38 +0600
Subject: [PATCH 33/35] Move regex to key-metrics.

---
 .../js/googlesitekit/datastore/user/key-metrics.test.js   | 8 +++++++-
 .../components/widgets/EngagedTrafficSourceWidget.test.js | 2 +-
 .../components/widgets/LoyalVisitorsWidget.test.js        | 2 +-
 .../components/widgets/NewVisitorsWidget.test.js          | 2 +-
 .../components/widgets/PopularContentWidget.test.js       | 2 +-
 .../components/widgets/PopularProductsWidget.test.js      | 2 +-
 .../components/widgets/TopCitiesWidget.test.js            | 2 +-
 .../widgets/TopConvertingTrafficSourceWidget.test.js      | 2 +-
 .../components/widgets/TopCountriesWidget.test.js         | 2 +-
 .../components/widgets/TopTrafficSourceWidget.test.js     | 2 +-
 .../components/widgets/PopularKeywordsWidget.test.js      | 2 +-
 tests/js/utils.js                                         | 7 -------
 12 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index 37c859d90d3..87d549eaafb 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -26,7 +26,6 @@ import {
 	untilResolved,
 	waitForDefaultTimeouts,
 } from '../../../../../tests/js/utils';
-import { coreKeyMetricsEndpointRegExp } from '../../../util/key-metrics';
 import {
 	CORE_USER,
 	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
@@ -38,6 +37,13 @@ import {
 	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
 } from './constants';
 
+/**
+ * The endpoint for the key metrics settings.
+ */
+export const coreKeyMetricsEndpointRegExp = new RegExp(
+	'^/google-site-kit/v1/core/user/data/key-metrics'
+);
+
 describe( 'core/user key metrics', () => {
 	let registry;
 	let store;
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
index 0160156b3db..61a18748802 100644
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
index d9aaec3a1ae..3827402d312 100644
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import LoyalVisitorsWidget from './LoyalVisitorsWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
index 0d553c5f5ab..3450a9950b8 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import NewVisitorsWidget from './NewVisitorsWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
index 772db429940..f391dd77027 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularContentWidget from './PopularContentWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
index e01d4cdbfb0..917b0e597d0 100644
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularProductsWidget from './PopularProductsWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index 39c6a6091b7..bf49f234cc2 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopCitiesWidget from './TopCitiesWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
index 5d769a98ff1..5473f889707 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index a8a49f598af..366045e6435 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopCountriesWidget from './TopCountriesWidget';
 
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
index dad2a316a51..0fd7af81a30 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import TopTrafficSourceWidget from './TopTrafficSourceWidget';
 
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
index 48df9fe307c..76ee527e917 100644
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
@@ -20,12 +20,12 @@
  * Internal dependencies
  */
 import {
-	coreKeyMetricsEndpointRegExp,
 	freezeFetch,
 	provideKeyMetrics,
 	render,
 } from '../../../../../../tests/js/test-utils';
 import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/datastore/user/constants';
+import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import PopularKeywordsWidget from './PopularKeywordsWidget';
 
diff --git a/tests/js/utils.js b/tests/js/utils.js
index b299c289d4a..0c9b3bd00ba 100644
--- a/tests/js/utils.js
+++ b/tests/js/utils.js
@@ -401,13 +401,6 @@ export function provideTracking( registry, enabled = true ) {
 	registry.dispatch( CORE_USER ).receiveGetTracking( { enabled } );
 }
 
-/**
- * The endpoint for the key metrics settings.
- */
-export const coreKeyMetricsEndpointRegExp = new RegExp(
-	'^/google-site-kit/v1/core/user/data/key-metrics'
-);
-
 /**
  * Provides key metrics settings data to the given registry.
  *

From bbc6bd33cf6dddd05d922df5d73ee5fb9f921669 Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 1 Jun 2023 16:39:52 +0600
Subject: [PATCH 34/35] Remove KM widget test files.

---
 .../datastore/user/key-metrics.test.js        | 10 +--
 .../EngagedTrafficSourceWidget.test.js        | 64 -------------------
 .../widgets/LoyalVisitorsWidget.test.js       | 64 -------------------
 .../widgets/NewVisitorsWidget.test.js         | 64 -------------------
 .../widgets/PopularContentWidget.test.js      | 64 -------------------
 .../widgets/PopularProductsWidget.test.js     | 64 -------------------
 .../widgets/TopCitiesWidget.test.js           | 64 -------------------
 .../TopConvertingTrafficSourceWidget.test.js  | 64 -------------------
 .../widgets/TopCountriesWidget.test.js        | 64 -------------------
 .../widgets/TopTrafficSourceWidget.test.js    | 64 -------------------
 .../widgets/PopularKeywordsWidget.test.js     | 64 -------------------
 tests/js/utils.js                             | 19 ------
 12 files changed, 3 insertions(+), 666 deletions(-)
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
 delete mode 100644 assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
 delete mode 100644 assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js

diff --git a/assets/js/googlesitekit/datastore/user/key-metrics.test.js b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
index 87d549eaafb..0e5cb549991 100644
--- a/assets/js/googlesitekit/datastore/user/key-metrics.test.js
+++ b/assets/js/googlesitekit/datastore/user/key-metrics.test.js
@@ -37,17 +37,13 @@ import {
 	KM_SEARCH_CONSOLE_POPULAR_KEYWORDS,
 } from './constants';
 
-/**
- * The endpoint for the key metrics settings.
- */
-export const coreKeyMetricsEndpointRegExp = new RegExp(
-	'^/google-site-kit/v1/core/user/data/key-metrics'
-);
-
 describe( 'core/user key metrics', () => {
 	let registry;
 	let store;
 
+	const coreKeyMetricsEndpointRegExp = new RegExp(
+		'^/google-site-kit/v1/core/user/data/key-metrics'
+	);
 	const coreKeyMetricsExpectedResponse = {
 		widgetSlugs: [ 'widget1', 'widget2' ],
 		isWidgetHidden: false,
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
deleted file mode 100644
index 61a18748802..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * EngagedTrafficSourceWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
-
-describe( 'EngagedTrafficSourceWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE
-	)( EngagedTrafficSourceWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for EngagedTrafficSourceWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
deleted file mode 100644
index 3827402d312..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * LoyalVisitorsWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_LOYAL_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import LoyalVisitorsWidget from './LoyalVisitorsWidget';
-
-describe( 'LoyalVisitorsWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_LOYAL_VISITORS
-	)( LoyalVisitorsWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for LoyalVisitorsWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
deleted file mode 100644
index 3450a9950b8..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * NewVisitorsWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_NEW_VISITORS } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import NewVisitorsWidget from './NewVisitorsWidget';
-
-describe( 'NewVisitorsWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_NEW_VISITORS
-	)( NewVisitorsWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for NewVisitorsWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
deleted file mode 100644
index f391dd77027..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * PopularContentWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_CONTENT } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import PopularContentWidget from './PopularContentWidget';
-
-describe( 'PopularContentWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_POPULAR_CONTENT
-	)( PopularContentWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for PopularContentWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
deleted file mode 100644
index 917b0e597d0..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * PopularProductsWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_POPULAR_PRODUCTS } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import PopularProductsWidget from './PopularProductsWidget';
-
-describe( 'PopularProductsWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_POPULAR_PRODUCTS
-	)( PopularProductsWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for PopularProductsWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
deleted file mode 100644
index bf49f234cc2..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * TopCitiesWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CITIES } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import TopCitiesWidget from './TopCitiesWidget';
-
-describe( 'TopCitiesWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_TOP_CITIES
-	)( TopCitiesWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for TopCitiesWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
deleted file mode 100644
index 5473f889707..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * TopConvertingTrafficSourceWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
-
-describe( 'TopConvertingTrafficSourceWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE
-	)( TopConvertingTrafficSourceWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for TopConvertingTrafficSourceWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
deleted file mode 100644
index 366045e6435..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * TopCountriesWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_COUNTRIES } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import TopCountriesWidget from './TopCountriesWidget';
-
-describe( 'TopCountriesWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_TOP_COUNTRIES
-	)( TopCountriesWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for TopCountriesWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
deleted file mode 100644
index 0fd7af81a30..00000000000
--- a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * TopTrafficSourceWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_ANALYTICS_TOP_TRAFFIC_SOURCE } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import TopTrafficSourceWidget from './TopTrafficSourceWidget';
-
-describe( 'TopTrafficSourceWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_ANALYTICS_TOP_TRAFFIC_SOURCE
-	)( TopTrafficSourceWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for TopTrafficSourceWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
deleted file mode 100644
index 76ee527e917..00000000000
--- a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * PopularKeywordsWidget component tests.
- *
- * Site Kit by Google, Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Internal dependencies
- */
-import {
-	freezeFetch,
-	provideKeyMetrics,
-	render,
-} from '../../../../../../tests/js/test-utils';
-import { KM_SEARCH_CONSOLE_POPULAR_KEYWORDS } from '../../../../googlesitekit/datastore/user/constants';
-import { coreKeyMetricsEndpointRegExp } from '../../../../googlesitekit/datastore/user/key-metrics.test';
-import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
-import PopularKeywordsWidget from './PopularKeywordsWidget';
-
-describe( 'PopularKeywordsWidget', () => {
-	const WidgetWithComponentProps = withWidgetComponentProps(
-		KM_SEARCH_CONSOLE_POPULAR_KEYWORDS
-	)( PopularKeywordsWidget );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is not loaded', () => {
-		freezeFetch( coreKeyMetricsEndpointRegExp );
-		const { container } = render( <WidgetWithComponentProps /> );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render anything when isKeyMetricsWidgetHidden is true', () => {
-		const { container } = render( <WidgetWithComponentProps />, {
-			setupRegistry: ( registry ) =>
-				provideKeyMetrics( registry, {
-					isWidgetHidden: true,
-				} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render the widget when isKeyMetricsWidgetHidden is false', () => {
-		const { getByText } = render( <WidgetWithComponentProps />, {
-			setupRegistry: provideKeyMetrics,
-		} );
-
-		expect(
-			getByText( 'TODO: UI for PopularKeywordsWidget' )
-		).toBeInTheDocument();
-	} );
-} );
diff --git a/tests/js/utils.js b/tests/js/utils.js
index c7644c0fefc..0896e3c1430 100644
--- a/tests/js/utils.js
+++ b/tests/js/utils.js
@@ -401,25 +401,6 @@ export function provideTracking( registry, enabled = true ) {
 	registry.dispatch( CORE_USER ).receiveGetTracking( { enabled } );
 }
 
-/**
- * Provides key metrics settings data to the given registry.
- *
- * @since n.e.x.t
- *
- * @param {Object} registry    The registry to set up.
- * @param {Object} [extraData] Extra data to merge with the default settings.
- */
-export const provideKeyMetrics = ( registry, extraData = {} ) => {
-	const defaults = {
-		widgetSlugs: [ 'test-slug' ],
-		isWidgetHidden: false,
-	};
-	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
-		...defaults,
-		...extraData,
-	} );
-};
-
 /**
  * Mutes a fetch request to the given URL once.
  *

From f1a254ddf70c6df278f8fdbae013e8a84cabb49f Mon Sep 17 00:00:00 2001
From: Arafat Zahan <arafat.zahan@10up.com>
Date: Thu, 1 Jun 2023 17:32:23 +0600
Subject: [PATCH 35/35] Fix VRT.

---
 .../widgets/NewVisitorsWidget.stories.js      |  7 ++++++-
 tests/js/utils.js                             | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js
index e9d8b4ffbcd..8f638be9198 100644
--- a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js
+++ b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js
@@ -19,7 +19,10 @@
 /**
  * Internal dependencies
  */
-import { provideModules } from '../../../../../../tests/js/utils';
+import {
+	provideKeyMetrics,
+	provideModules,
+} from '../../../../../../tests/js/utils';
 import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
 import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import NewVisitorsWidget from './NewVisitorsWidget';
@@ -110,6 +113,8 @@ export default {
 
 				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
 
+				provideKeyMetrics( registry );
+
 				// Call story-specific setup.
 				args.setupRegistry( registry );
 			};
diff --git a/tests/js/utils.js b/tests/js/utils.js
index 0896e3c1430..c7644c0fefc 100644
--- a/tests/js/utils.js
+++ b/tests/js/utils.js
@@ -401,6 +401,25 @@ export function provideTracking( registry, enabled = true ) {
 	registry.dispatch( CORE_USER ).receiveGetTracking( { enabled } );
 }
 
+/**
+ * Provides key metrics settings data to the given registry.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object} registry    The registry to set up.
+ * @param {Object} [extraData] Extra data to merge with the default settings.
+ */
+export const provideKeyMetrics = ( registry, extraData = {} ) => {
+	const defaults = {
+		widgetSlugs: [ 'test-slug' ],
+		isWidgetHidden: false,
+	};
+	registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+		...defaults,
+		...extraData,
+	} );
+};
+
 /**
  * Mutes a fetch request to the given URL once.
  *