Protect: Hide Threats Report When No Data (#40620)

Automattic · Dec 18, 2024 · 113aebc · 113aebc
1 parent 2c38d55
commit 113aebc
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 34 deletions.
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/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.threats.length || 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>
 	);

diff --git a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx b/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();
@@ -91,7 +92,7 @@ const ScanAdminSectionHero: React.FC = () => {
 	};
 
 	if ( scanning ) {
-		return <ScanningAdminSectionHero />;
+		return <ScanningAdminSectionHero size={ size } />;
 	}
 
 	if ( status.error ) {
@@ -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(

diff --git a/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx
@@ -1,5 +1,6 @@
 import { Text } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
 import AdminSectionHero from '../../components/admin-section-hero';
 import InProgressAnimation from '../../components/in-progress-animation';
 import ProgressBar from '../../components/progress-bar';
@@ -8,7 +9,7 @@ import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
-const ScanningAdminSectionHero: React.FC = () => {
+const ScanningAdminSectionHero = ( { size = 'normal' }: { size?: 'normal' | 'large' } ) => {
 	const { hasPlan } = usePlan();
 	const { globalStats } = useWafData();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
@@ -19,7 +20,11 @@ const ScanningAdminSectionHero: React.FC = () => {
 
 	return (
 		<AdminSectionHero>
-			<AdminSectionHero.Main className={ styles[ 'hero-main' ] }>
+			<AdminSectionHero.Main
+				className={ clsx( styles[ 'hero-main' ], {
+					[ styles[ 'hero-main--large' ] ]: size === 'large',
+				} ) }
+			>
 				<AdminSectionHero.Heading>
 					{ __( 'Your results will be ready soon', 'jetpack-protect' ) }
 				</AdminSectionHero.Heading>

diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -2,6 +2,12 @@
 	max-width: 512px;
 }
 
+.hero-main--large {
+	flex: 1 auto;
+	align-content: center;
+	height: calc( 100vh - 408px );
+}
+
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 	width: fit-content;
@@ -26,4 +32,4 @@
 
 .last-checked {
 	width: fit-content;
-}
+}