Merge remote-tracking branch 'remotes/origin/develop' into feature/39…

…72-ga-tracking-loading.

.github/workflows/compressed-size.yml

@@ -53,4 +53,4 @@ jobs:
           pattern: './dist/assets/**/*.{css,js}'
           # The sub-match below will be replaced by asterisks.
           # The length of 20 corresponds to webpack's `output.hashDigestLength`.
-          strip-hash: "\\.([a-f0-9]{20})\\.(?:css|js)$"
+          strip-hash: "([a-f0-9]{20})\\.(?:css|js)$"

assets/js/components/DashboardEntityApp.js

@@ -32,11 +32,18 @@ import {
 	CONTEXT_ENTITY_DASHBOARD_MONETIZATION,
 } from '../googlesitekit/widgets/default-contexts';
 import WidgetContextRenderer from '../googlesitekit/widgets/components/WidgetContextRenderer';
+import EntitySearchInput from './EntitySearchInput';
+import DateRangeSelector from './DateRangeSelector';
+import HelpMenu from './help/HelpMenu';
 
 function DashboardEntityApp() {
 	return (
 		<Fragment>
-			<Header />
+			<Header>
+				<EntitySearchInput />
+				<DateRangeSelector />
+				<HelpMenu />
+			</Header>
 			<WidgetContextRenderer slug={ CONTEXT_ENTITY_DASHBOARD_TRAFFIC } />
 			<WidgetContextRenderer slug={ CONTEXT_ENTITY_DASHBOARD_CONTENT } />
 			<WidgetContextRenderer slug={ CONTEXT_ENTITY_DASHBOARD_SPEED } />

assets/js/components/DashboardMainApp.js

@@ -32,11 +32,18 @@ import {
 } from '../googlesitekit/widgets/default-contexts';
 import Header from './Header';
 import WidgetContextRenderer from '../googlesitekit/widgets/components/WidgetContextRenderer';
+import EntitySearchInput from './EntitySearchInput';
+import DateRangeSelector from './DateRangeSelector';
+import HelpMenu from './help/HelpMenu';
 
 function DashboardMainApp() {
 	return (
 		<Fragment>
-			<Header />
+			<Header>
+				<EntitySearchInput />
+				<DateRangeSelector />
+				<HelpMenu />
+			</Header>
 			<WidgetContextRenderer slug={ CONTEXT_MAIN_DASHBOARD_TRAFFIC } />
 			<WidgetContextRenderer slug={ CONTEXT_MAIN_DASHBOARD_CONTENT } />
 			<WidgetContextRenderer slug={ CONTEXT_MAIN_DASHBOARD_SPEED } />

assets/js/components/EntitySearchInput.js

@@ -0,0 +1,56 @@
+/**
+ * EntitySearchInput component.
+ *
+ * Site Kit by Google, Copyright 2021 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, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from './Button';
+import MagnifyingGlass from '../../svg/magnifying-glass.svg';
+
+function EntitySearchInput() {
+	const [ isActive, setIsActive ] = useState( false );
+
+	const onActive = useCallback( () => {
+		setIsActive( true );
+	}, [] );
+
+	const onBlur = useCallback( () => {
+		setIsActive( false );
+	}, [] );
+
+	if ( isActive ) {
+		return <input onBlur={ onBlur } />;
+	}
+
+	return (
+		<Button
+			onClick={ onActive }
+			icon={ <MagnifyingGlass width="20" height="20" /> }
+		>
+			{ __( 'URL Search', 'google-site-kit' ) }
+		</Button>
+	);
+}
+
+export default EntitySearchInput;

assets/js/components/UserMenu.js

@@ -39,19 +39,21 @@ import { ESCAPE, TAB } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { CORE_SITE } from '../googlesitekit/datastore/site/constants';
-import { CORE_USER } from '../googlesitekit/datastore/user/constants';
-import { CORE_LOCATION } from '../googlesitekit/datastore/location/constants';
-import { useKeyCodesInside } from '../hooks/useKeyCodesInside';
 import { clearWebStorage, trackEvent } from '../util';
-import ViewContextContext from './Root/ViewContextContext';
 import Dialog from './Dialog';
 import Button from './Button';
 import Menu from './Menu';
 import Portal from './Portal';
+import { useFeature } from '../hooks/useFeature';
+import { CORE_SITE } from '../googlesitekit/datastore/site/constants';
+import { CORE_USER } from '../googlesitekit/datastore/user/constants';
+import { CORE_LOCATION } from '../googlesitekit/datastore/location/constants';
+import { useKeyCodesInside } from '../hooks/useKeyCodesInside';
+import ViewContextContext from './Root/ViewContextContext';
 const { useSelect, useDispatch } = Data;
 
 export default function UserMenu() {
+	const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' );
 	const proxyPermissionsURL = useSelect( ( select ) =>
 		select( CORE_SITE ).getProxyPermissionsURL()
 	);
@@ -150,7 +152,7 @@ export default function UserMenu() {
 		navigateTo( postDisconnectURL );
 	}, [ postDisconnectURL, navigateTo, viewContext ] );
 
-	if ( ! userEmail ) {
+	if ( ! unifiedDashboardEnabled && ! userEmail ) {
 		return null;
 	}
 
@@ -182,7 +184,7 @@ export default function UserMenu() {
 					aria-expanded={ menuOpen }
 					aria-controls="user-menu"
 				>
-					{ userEmail }
+					{ ! unifiedDashboardEnabled && userEmail }
 				</Button>
 				<Menu
 					className="googlesitekit-width-auto"

assets/js/components/activation/activation-app.js

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import { useMount } from 'react-use';
+
 /**
  * WordPress dependencies
  */
@@ -26,6 +31,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
+import { VIEW_CONTEXT_ACTIVATION } from '../../googlesitekit/constants';
 import { trackEvent } from '../../util';
 import { ActivationMain } from './activation-main';
 import NotificationCounter from '../legacy-notifications/notification-counter';
@@ -52,6 +58,16 @@ export function ActivationApp() {
 	const canViewDashboard = useSelect( ( select ) =>
 		select( CORE_USER ).hasCapability( PERMISSION_VIEW_DASHBOARD )
 	);
+	const isConnected = useSelect( ( select ) =>
+		select( CORE_SITE ).isConnected()
+	);
+	const isUsingProxy = useSelect( ( select ) =>
+		select( CORE_SITE ).isUsingProxy()
+	);
+
+	useMount( () => {
+		trackEvent( VIEW_CONTEXT_ACTIVATION, 'view_notification' );
+	} );
 
 	let buttonURL = proxySetupURL || splashURL;
 	let buttonLabel = __( 'Start setup', 'google-site-kit' );
@@ -64,13 +80,26 @@ export function ActivationApp() {
 	const onButtonClick = useCallback(
 		async ( event ) => {
 			event.preventDefault();
-			await trackEvent(
-				'plugin_setup',
-				proxySetupURL ? 'proxy_start_setup_banner' : 'goto_sitekit'
-			);
+			await trackEvent( VIEW_CONTEXT_ACTIVATION, 'confirm_notification' );
+
+			if ( proxySetupURL ) {
+				await trackEvent(
+					VIEW_CONTEXT_ACTIVATION,
+					'start_user_setup',
+					isUsingProxy ? 'proxy' : 'custom-oauth'
+				);
+			}
+
+			if ( proxySetupURL && ! isConnected ) {
+				await trackEvent(
+					VIEW_CONTEXT_ACTIVATION,
+					'start_site_setup',
+					isUsingProxy ? 'proxy' : 'custom-oauth'
+				);
+			}
 			navigateTo( buttonURL );
 		},
-		[ proxySetupURL, buttonURL, navigateTo ]
+		[ proxySetupURL, buttonURL, navigateTo, isConnected, isUsingProxy ]
 	);
 
 	if ( ! buttonURL ) {

assets/js/components/legacy-notifications/dashboard-setup-alerts.js

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import { useMount } from 'react-use';
+
 /**
  * WordPress dependencies
  */
@@ -33,20 +38,56 @@ import ModulesList from '../ModulesList';
 import SuccessGreenSVG from '../../../svg/success-green.svg';
 import UserInputSuccessNotification from '../notifications/UserInputSuccessNotification';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { VIEW_CONTEXT_DASHBOARD } from '../../googlesitekit/constants';
 import {
 	CORE_USER,
 	PERMISSION_MANAGE_OPTIONS,
 } from '../../googlesitekit/datastore/user/constants';
+import { trackEvent } from '../../util/tracking';
 const { useSelect } = Data;
 
 function DashboardSetupAlerts() {
 	const modules = useSelect( ( select ) =>
 		select( CORE_MODULES ).getModules()
 	);
-
 	const canManageOptions = useSelect( ( select ) =>
 		select( CORE_USER ).hasCapability( PERMISSION_MANAGE_OPTIONS )
 	);
+	const hasMultipleAdmins = useSelect( ( select ) =>
+		select( CORE_SITE ).hasMultipleAdmins()
+	);
+	const isUsingProxy = useSelect( ( select ) =>
+		select( CORE_SITE ).isUsingProxy()
+	);
+	const slug = getQueryParameter( 'slug' );
+
+	useMount( () => {
+		trackEvent(
+			`${ VIEW_CONTEXT_DASHBOARD }_authentication-success_notification`,
+			'view_notification'
+		);
+
+		// Only trigger these events if this is a site/plugin setup event,
+		// and not setup of an individual module (eg. AdSense, Analytics, etc.)
+		if ( slug === null ) {
+			trackEvent(
+				`${ VIEW_CONTEXT_DASHBOARD }_authentication-success_notification`,
+				'complete_user_setup',
+				isUsingProxy ? 'proxy' : 'custom-oauth'
+			);
+
+			// If the site doesn't yet have multiple admins, this is the initial
+			// site setup so we can log the "site setup complete" event.
+			if ( ! hasMultipleAdmins ) {
+				trackEvent(
+					`${ VIEW_CONTEXT_DASHBOARD }_authentication-success_notification`,
+					'complete_site_setup',
+					isUsingProxy ? 'proxy' : 'custom-oauth'
+				);
+			}
+		}
+	} );
 
 	if ( modules === undefined ) {
 		return null;
@@ -78,8 +119,6 @@ function DashboardSetupAlerts() {
 				return null;
 			}
 
-			const slug = getQueryParameter( 'slug' );
-
 			if ( slug && ! modules[ slug ]?.active ) {
 				return null;
 			}
@@ -114,6 +153,12 @@ function DashboardSetupAlerts() {
 						handleDismiss={ () => {} }
 						WinImageSVG={ SuccessGreenSVG }
 						dismiss={ __( 'OK, Got it!', 'google-site-kit' ) }
+						onDismiss={ async () =>
+							trackEvent(
+								`${ VIEW_CONTEXT_DASHBOARD }_authentication-success_notification`,
+								'confirm_notification'
+							)
+						}
 						format="large"
 						type="win-success"
 						learnMoreLabel={ winData.learnMore.label }

assets/js/components/legacy-notifications/notification.js

@@ -41,6 +41,8 @@ import Error from '../../../svg/error.svg';
 import Link from '../Link';
 import ModuleIcon from '../ModuleIcon';
 import { getItem, setItem, deleteItem } from '../../googlesitekit/api/cache';
+import { trackEvent } from '../../util';
+import { VIEW_CONTEXT_DASHBOARD } from '../../googlesitekit/constants';
 
 function Notification( {
 	anchorLink,
@@ -84,6 +86,12 @@ function Notification( {
 		setItem( cacheKeyDismissed, new Date(), { ttl: null } );
 
 	useMount( async () => {
+		await trackEvent(
+			`${ VIEW_CONTEXT_DASHBOARD }_site-notification`,
+			'view_notification',
+			id
+		);
+
 		if ( dismissExpires > 0 ) {
 			await expireDismiss();
 		}
@@ -103,6 +111,12 @@ function Notification( {
 		e.persist();
 		e.preventDefault();
 
+		await trackEvent(
+			`${ VIEW_CONTEXT_DASHBOARD }_site-notification`,
+			'dismiss_notification',
+			id
+		);
+
 		if ( onDismiss ) {
 			await onDismiss( e );
 		}
@@ -130,6 +144,12 @@ function Notification( {
 	async function handleCTAClick( e ) {
 		e.persist();
 
+		await trackEvent(
+			`${ VIEW_CONTEXT_DASHBOARD }_site-notification`,
+			'confirm_notification',
+			id
+		);
+
 		if ( onCTAClick ) {
 			await onCTAClick( e );
 		}
@@ -139,6 +159,16 @@ function Notification( {
 		}
 	}
 
+	async function handleLearnMore( e ) {
+		e.persist();
+
+		await trackEvent(
+			`${ VIEW_CONTEXT_DASHBOARD }_site-notification`,
+			'click_learn_more_link',
+			id
+		);
+	}
+
 	async function expireDismiss() {
 		const { value: dismissed } = await getItem( cacheKeyDismissed );
 
@@ -257,7 +287,12 @@ function Notification( {
 						{ learnMoreLabel && (
 							<Fragment>
 								{ ' ' }
-								<Link href={ learnMoreURL } external inherit>
+								<Link
+									onClick={ handleLearnMore }
+									href={ learnMoreURL }
+									external
+									inherit
+								>
 									{ learnMoreLabel }
 								</Link>
 								{ learnMoreDescription }