Enhance/6261 key metrics settings toggle

assets/js/components/settings/SettingsAdmin.js

@@ -36,11 +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() {
@@ -80,29 +81,53 @@ 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>
-									<UserInputPreview
-										goTo={ goTo }
-										noHeader
-										noFooter
-										settingsView
-										showIndividualCTAs
-									/>
-								</Grid>
-							</div>
-						</Layout>
-					) }
-
-					{ isUserInputCompleted === false && (
-						<UserInputSettings isDismissible={ false } rounded />
-					) }
+					<Layout
+						title={ __( 'Key metrics', 'google-site-kit' ) }
+						header
+						rounded
+					>
+						<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
+							<SettingsKeyMetrics />
+							<Grid>
+								{ isUserInputCompleted && (
+									<Row>
+										<Cell size={ 12 }>
+											<UserInputPreview
+												goTo={ goTo }
+												noHeader
+												noFooter
+												settingsView
+												showIndividualCTAs
+											/>
+										</Cell>
+									</Row>
+								) }
+								{ isUserInputCompleted === false && (
+									<Row>
+										<Cell
+											className="googlesitekit-user-input__notification"
+											size={ 12 }
+										>
+											<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>
+									</Row>
+								) }
+							</Grid>
+						</div>
+					</Layout>
 				</Cell>
 			) }
 

assets/js/components/settings/SettingsKeyMetrics.js

@@ -0,0 +1,80 @@
+/**
+ * SettingsKeyMetrics 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.
+ */
+
+/**
+ * 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 { Cell, Grid, Row } from '../../material-components';
+
+const { useSelect, useDispatch } = Data;
+
+export default function SettingsKeyMetrics() {
+	const keyMetricsWidgetHidden = useSelect( ( select ) =>
+		select( CORE_USER ).isKeyMetricsWidgetHidden()
+	);
+
+	const keyMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getKeyMetrics()
+	);
+
+	const { setKeyMetricsSetting, saveKeyMetricsSettings } =
+		useDispatch( CORE_USER );
+
+	const handleKeyMetricsToggle = useCallback( async () => {
+		await setKeyMetricsSetting(
+			'isWidgetHidden',
+			! keyMetricsWidgetHidden
+		);
+		await saveKeyMetricsSettings();
+	}, [
+		keyMetricsWidgetHidden,
+		saveKeyMetricsSettings,
+		setKeyMetricsSetting,
+	] );
+
+	if ( ! keyMetricsWidgetHidden === undefined || ! keyMetrics?.length ) {
+		return null;
+	}
+
+	return (
+		<Grid>
+			<Row>
+				<Cell size={ 12 }>
+					<Switch
+						label={ __(
+							'Display key metrics in dashboard',
+							'google-site-kit'
+						) }
+						checked={ ! keyMetricsWidgetHidden }
+						onClick={ handleKeyMetricsToggle }
+						hideLabel={ false }
+					/>
+				</Cell>
+			</Row>
+		</Grid>
+	);
+}

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';