Protect: Integrate ThreatsDataViews

Update blog-charset test data value

changelog

Add Go to Cloud and Scan now button to Protect primary header

changelog

Revert "changelog"

This reverts commit 8bdd332.

Revert "Update blog-charset test data value"

This reverts commit 98dc3eb.

Revert "Protect: Integrate ThreatsDataViews"

This reverts commit a79cda8.

projects/plugins/protect/changelog/add-protect-header-buttons

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header

projects/plugins/protect/src/js/components/admin-page/index.jsx

@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import useNotices from '../../hooks/use-notices';
-import useProtectData from '../../hooks/use-protect-data';
+import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -19,11 +23,9 @@ const AdminPage = ( { children } ) => {
 	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
 	const navigate = useNavigate();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-	} = useProtectData();
+	const { data: status } = useScanStatusQuery();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +38,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
@@ -48,11 +67,11 @@ const AdminPage = ( { children } ) => {
 						link="/scan"
 						label={
 							<span className={ styles.tab }>
-								{ numThreats > 0
+								{ status.threats.length > 0
 									? sprintf(
 											// translators: %d is the number of threats found.
 											__( 'Scan (%d)', 'jetpack-protect' ),
-											numThreats
+											status.threats.length
 									  )
 									: __( 'Scan', 'jetpack-protect' ) }
 							</span>

projects/plugins/protect/src/js/components/admin-page/styles.module.scss

@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }

projects/plugins/protect/src/js/components/scan-button/index.jsx

@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }