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..4e93ae443aa72 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 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 ( } + header={ +
+ + { hasPlan && viewingScanPage && ( +
+ + +
+ ) } +
+ } > { notice && } 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' ) }