Protect: only show Threats DataViews when scan is in progress or has results to show

Author: nateweller

projects/plugins/protect/src/js/routes/home/index.jsx

@@ -37,8 +37,6 @@ const HomePage = () => {
 
 	const showReport = status.lastChecked || isScanInProgress( status );
 
-	const showReport = status.lastChecked || isScanInProgress( status );
-
 	return (
 		<AdminPage>
 			<HomeAdminSectionHero />

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

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import AdminPage from '../../components/admin-page';
 import OnboardingPopover from '../../components/onboarding-popover';
+import useHistoryQuery from '../../data/scan/use-history-query';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import { OnboardingContext } from '../../hooks/use-onboarding';
@@ -24,6 +25,7 @@ const ScanPage = () => {
 	const location = useLocation();
 	const { filter } = useParams();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
+	const { data: history } = useHistoryQuery();
 
 	const [ scanResultsAnchor, setScanResultsAnchor ] = useState( null );
 
@@ -36,6 +38,9 @@ const ScanPage = () => {
 		currentScanStatus = 'active';
 	}
 
+	const hasHistory = history && history.threats.length;
+	const showResults = status.lastChecked || isScanInProgress( status ) || hasHistory;
+
 	const filters = useMemo( () => {
 		if ( location.pathname.includes( '/scan/history' ) ) {
 			return [
@@ -68,34 +73,36 @@ const ScanPage = () => {
 	return (
 		<OnboardingContext.Provider value={ onboardingSteps }>
 			<AdminPage>
-				<ScanAdminSectionHero />
-				<AdminSection>
-					<Container
-						className={ styles[ 'scan-results-container' ] }
-						horizontalSpacing={ 5 }
-						horizontalGap={ 4 }
-					>
-						<Col>
-							<div ref={ setScanResultsAnchor }>
-								<ScanResultsDataView filters={ filters } />
-							</div>
-							{ !! status && ! isScanInProgress( status ) && (
-								<OnboardingPopover
-									id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
-									anchor={ scanResultsAnchor }
-									position={ 'top' }
-								/>
-							) }
-							{ !! status && ! isScanInProgress( status ) && hasPlan && (
-								<OnboardingPopover
-									id={ 'paid-understand-severity' }
-									anchor={ scanResultsAnchor }
-									position={ 'top' }
-								/>
-							) }
-						</Col>
-					</Container>
-				</AdminSection>
+				<ScanAdminSectionHero size={ showResults ? 'normal' : 'large' } />
+				{ showResults && (
+					<AdminSection>
+						<Container
+							className={ styles[ 'scan-results-container' ] }
+							horizontalSpacing={ 5 }
+							horizontalGap={ 4 }
+						>
+							<Col>
+								<div ref={ setScanResultsAnchor }>
+									<ScanResultsDataView filters={ filters } />
+								</div>
+								{ !! status && ! isScanInProgress( status ) && (
+									<OnboardingPopover
+										id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
+										anchor={ scanResultsAnchor }
+										position={ 'top' }
+									/>
+								) }
+								{ !! status && ! isScanInProgress( status ) && hasPlan && (
+									<OnboardingPopover
+										id={ 'paid-understand-severity' }
+										anchor={ scanResultsAnchor }
+										position={ 'top' }
+									/>
+								) }
+							</Col>
+						</Container>
+					</AdminSection>
+				) }
 			</AdminPage>
 		</OnboardingContext.Provider>
 	);

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

@@ -2,6 +2,7 @@ import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components
 import { Tooltip } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
 import { useCallback, useState, useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
@@ -15,7 +16,7 @@ import useWafData from '../../hooks/use-waf-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
-const ScanAdminSectionHero: React.FC = () => {
+const ScanAdminSectionHero: React.FC = ( { size = 'normal' }: { size?: 'normal' | 'large' } ) => {
 	const { recordEvent } = useAnalyticsTracks();
 	const { hasPlan, upgradePlan } = usePlan();
 	const { setModal } = useModal();
@@ -106,7 +107,11 @@ const ScanAdminSectionHero: React.FC = () => {
 
 	return (
 		<AdminSectionHero>
-			<AdminSectionHero.Main className={ styles[ 'hero-main' ] }>
+			<AdminSectionHero.Main
+				className={ clsx( styles[ 'hero-main' ], {
+					[ styles[ 'hero-main--large' ] ]: size === 'large',
+				} ) }
+			>
 				<Text className={ styles[ 'last-checked' ] } mb={ 2 } ref={ setDailyScansPopoverAnchor }>
 					{ lastCheckedLocalTimestamp
 						? sprintf(

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

@@ -2,6 +2,11 @@
 	max-width: 512px;
 }
 
+.hero-main--large {
+	padding-top: calc( var( --spacing-base ) * 8 ); // 64px
+	padding-bottom: calc( var( --spacing-base ) * 8 ); // 64px
+}
+
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 	width: fit-content;
@@ -26,4 +31,4 @@
 
 .last-checked {
 	width: fit-content;
-}
+}