Protect: Update Scan and History headers

projects/plugins/protect/changelog/update-protect-scan-and-history-headers

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers

projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx

@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>

projects/plugins/protect/src/js/routes/scan/history/styles.module.scss

@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }

projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

@@ -1,38 +1,67 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
+import useFixers from '../../hooks/use-fixers';
+import useModal from '../../hooks/use-modal';
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
 		// Convert the lastChecked UTC date to a local timestamp
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,20 +79,35 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>

projects/plugins/protect/src/js/routes/scan/styles.module.scss

@@ -1,12 +1,12 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
 	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }