diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/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
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..18cdd381d21b8 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/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 (
}
+ header={
+
+
+ { hasPlan && viewingScanPage && (
+
+
+
+
+ ) }
+
+ }
>
{ notice && }
@@ -48,11 +67,11 @@ const AdminPage = ( { children } ) => {
link="/scan"
label={
- { 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' ) }
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/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
}
diff --git a/projects/plugins/protect/src/js/components/scan-button/index.jsx b/projects/plugins/protect/src/js/components/scan-button/index.jsx
index 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/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' ) }