Protect: Show existing threat results while scan is in progress

projects/plugins/protect/src/js/components/scan-button/index.jsx

@@ -1,10 +1,16 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+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 disabled = useMemo( () => {
+		return startScanMutation.isPending || isScanInProgress( status );
+	}, [ startScanMutation.isPending, status ] );
 
 	const handleScanClick = () => {
 		return event => {
@@ -14,7 +20,13 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	};
 
 	return (
-		<Button ref={ ref } variant={ variant } onClick={ handleScanClick() } { ...props }>
+		<Button
+			ref={ ref }
+			variant={ variant }
+			onClick={ handleScanClick() }
+			disabled={ disabled }
+			{ ...props }
+		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }
 		</Button>
 	);

projects/plugins/protect/src/js/components/threats-list/empty.jsx

@@ -103,19 +103,21 @@ const EmptyList = () => {
 				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 			</H3>
 			<Text mb={ 4 }>
-				{ createInterpolateElement(
-					sprintf(
-						// translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago".
-						__(
-							'The last Protect scan ran <strong>%s</strong> and everything looked great.',
-							'jetpack-protect'
-						),
-						timeSinceLastScan
-					),
-					{
-						strong: <strong />,
-					}
-				) }
+				{ timeSinceLastScan
+					? createInterpolateElement(
+							sprintf(
+								// translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago".
+								__(
+									'The last Protect scan ran <strong>%s</strong> and everything looked great.',
+									'jetpack-protect'
+								),
+								timeSinceLastScan
+							),
+							{
+								strong: <strong />,
+							}
+					  )
+					: __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) }
 			</Text>
 			{ hasPlan && (
 				<>

projects/plugins/protect/src/js/components/threats-list/index.jsx

@@ -39,12 +39,11 @@ const ThreatsList = () => {
 	// Popover anchors
 	const [ yourScanResultsPopoverAnchor, setYourScanResultsPopoverAnchor ] = useState( null );
 	const [ understandSeverityPopoverAnchor, setUnderstandSeverityPopoverAnchor ] = useState( null );
-
-	const { setModal } = useModal();
-
-	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
 	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
 		useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	const { setModal } = useModal();
 
 	const handleShowAutoFixersClick = threatList => {
 		return event => {
@@ -137,16 +136,14 @@ const ThreatsList = () => {
 												position={ isSm ? 'bottom right' : 'middle left' }
 												anchor={ showAutoFixersPopoverAnchor }
 											/>
+											<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
+											<OnboardingPopover
+												id="paid-daily-and-manual-scans"
+												position={ 'bottom middle' }
+												anchor={ dailyAndManualScansPopoverAnchor }
+											/>
 										</>
 									) }
-									<div>
-										<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-										<OnboardingPopover
-											id="paid-daily-and-manual-scans"
-											position={ isSm ? 'bottom left' : 'middle left' }
-											anchor={ dailyAndManualScansPopoverAnchor }
-										/>
-									</div>
 								</div>
 							) }
 						</div>

projects/plugins/protect/src/js/routes/scan/history/index.jsx

@@ -1,4 +1,12 @@
-import { AdminSectionHero, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
+import {
+	AdminSectionHero,
+	Container,
+	Col,
+	H3,
+	Text,
+	Title,
+	AdminSection,
+} from '@automattic/jetpack-components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
@@ -242,7 +250,7 @@ const ScanHistoryRoute = () => {
 	return (
 		<AdminPage>
 			<AdminSectionHero>
-				<Container horizontalSpacing={ 3 } horizontalGap={ 4 }>
+				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
 					<Col>
 						<ScanSectionHeader
 							subtitle={ error ? null : __( 'Threat history', 'jetpack-protect' ) }
@@ -256,10 +264,15 @@ const ScanHistoryRoute = () => {
 											numAllThreats === 1 ? 'threat' : 'threats'
 									  )
 							}
+							showNavigation={ true }
 						/>
 					</Col>
-					{ error ? (
-						<Col>
+				</Container>
+			</AdminSectionHero>
+			<AdminSection>
+				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
+					<Col>
+						{ error ? (
 							<ErrorScreen
 								baseErrorMessage={ __(
 									"An error occurred loading your site's threat history.",
@@ -268,9 +281,7 @@ const ScanHistoryRoute = () => {
 								errorMessage={ error.message }
 								errorCode={ error.code }
 							/>
-						</Col>
-					) : (
-						<Col>
+						) : (
 							<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
 								<Col lg={ 4 }>
 									<ThreatsNavigation
@@ -315,10 +326,10 @@ const ScanHistoryRoute = () => {
 									) }
 								</Col>
 							</Container>
-						</Col>
-					) }
+						) }
+					</Col>
 				</Container>
-			</AdminSectionHero>
+			</AdminSection>
 			<ScanFooter />
 		</AdminPage>
 	);