Protect: Add Go to Cloud and Scan now button to Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>

Author: dkmyta

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 useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 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';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,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 }>

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' ) }