From 838b0605d412d3e495425a9cfbe743ecb9ab9aef Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Sun, 15 Dec 2024 12:31:23 -0700 Subject: [PATCH] Protect: only show Threats DataViews when scan is in progress or has results to show --- .../protect/src/js/routes/home/index.jsx | 2 - .../protect/src/js/routes/scan/index.jsx | 63 ++++++++++--------- .../routes/scan/scan-admin-section-hero.tsx | 11 +++- .../scan/scanning-admin-section-hero.tsx | 9 ++- .../src/js/routes/scan/styles.module.scss | 8 ++- 5 files changed, 57 insertions(+), 36 deletions(-) diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx index 7207ce0c60c29..3e77fca2cad8f 100644 --- a/projects/plugins/protect/src/js/routes/home/index.jsx +++ b/projects/plugins/protect/src/js/routes/home/index.jsx @@ -38,8 +38,6 @@ const HomePage = () => { const showReport = status.lastChecked || SCAN_IN_PROGRESS_STATUSES.indexOf( status?.status ) >= 0; - const showReport = status.lastChecked || isScanInProgress( status ); - return ( diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx index aa1aea5581076..9b0e278349359 100644 --- 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 ( - - - - -
- -
- { !! status && ! isScanInProgress( status ) && ( - - ) } - { !! status && ! isScanInProgress( status ) && hasPlan && ( - - ) } - - - + + { showResults && ( + + + +
+ +
+ { !! status && ! isScanInProgress( status ) && ( + + ) } + { !! status && ! isScanInProgress( status ) && hasPlan && ( + + ) } + + + + ) } ); 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 index 20e759ba76a2f..ea313bbacc1ce 100644 --- 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 ; + return ; } if ( status.error ) { @@ -106,7 +107,11 @@ const ScanAdminSectionHero: React.FC = () => { return ( - + { 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 index 6ce672bde6dde..ec9e9c8c5f4e0 100644 --- 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 ( - + { __( 'Your results will be ready soon', 'jetpack-protect' ) } diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index cd0e4f9b03e66..6a04aedcda048 100644 --- 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; -} \ No newline at end of file +}