Skip to content

Commit

Permalink
Protect: Add Go to Cloud and Scan now button to Protect primary header (
Browse files Browse the repository at this point in the history
#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
  • Loading branch information
dkmyta and nateweller committed Nov 26, 2024
1 parent fb14c36 commit a8ad2d3
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 2 deletions.
4 changes: 4 additions & 0 deletions projects/plugins/protect/changelog/add-protect-header-buttons
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Adds Go to Cloud and Scan now buttons to the primary header
27 changes: 25 additions & 2 deletions projects/plugins/protect/src/js/components/admin-page/index.jsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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( () => {
Expand All @@ -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 }>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 );
Expand All @@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
const handleScanClick = () => {
return event => {
event.preventDefault();
navigate( '/scan' );
startScanMutation.mutate();
};
};
Expand All @@ -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' ) }
Expand Down

0 comments on commit a8ad2d3

Please sign in to comment.