Only render relevant onboarding steps when not scanning

Automattic · Oct 17, 2024 · 7504c30 · 7504c30
1 parent 3a40ee7
commit 7504c30
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 33 deletions.
diff --git a/projects/plugins/protect/src/js/components/onboarding-popover/index.jsx b/projects/plugins/protect/src/js/components/onboarding-popover/index.jsx
@@ -1,7 +1,6 @@
 import { ActionPopover } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { useContext, useEffect } from 'react';
-import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useOnboarding, { OnboardingRenderedContext } from '../../hooks/use-onboarding';
 
 const OnboardingPopover = ( { id, anchor, position } ) => {
@@ -13,8 +12,6 @@ const OnboardingPopover = ( { id, anchor, position } ) => {
 		completeAllCurrentSteps,
 	} = useOnboarding();
 
-	const { data: status } = useScanStatusQuery( { usePolling: true } );
-
 	// keep track of which onboarding steps are currently being rendered
 	const { setRenderedSteps } = useContext( OnboardingRenderedContext );
 	useEffect( () => {
@@ -32,11 +29,6 @@ const OnboardingPopover = ( { id, anchor, position } ) => {
 		return null;
 	}
 
-	// do not render if the scan is in progress
-	if ( isScanInProgress( status ) ) {
-		return null;
-	}
-
 	return (
 		<ActionPopover
 			anchor={ anchor }

diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -2,6 +2,7 @@ import { H3, Text } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useMemo, useState } from 'react';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import OnboardingPopover from '../onboarding-popover';
@@ -88,6 +89,7 @@ const timeSince = date => {
 const EmptyList = () => {
 	const { lastChecked } = useProtectData();
 	const { hasPlan } = usePlan();
+	const { data: status } = useScanStatusQuery();
 
 	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
 		useState( null );
@@ -122,11 +124,13 @@ const EmptyList = () => {
 			{ hasPlan && (
 				<>
 					<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-					<OnboardingPopover
-						id="paid-daily-and-manual-scans"
-						position={ 'bottom middle' }
-						anchor={ dailyAndManualScansPopoverAnchor }
-					/>
+					{ ! isScanInProgress( status ) && (
+						<OnboardingPopover
+							id="paid-daily-and-manual-scans"
+							position={ 'bottom middle' }
+							anchor={ dailyAndManualScansPopoverAnchor }
+						/>
+					) }
 				</>
 			) }
 		</div>

diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx
@@ -8,6 +8,7 @@ import {
 } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback, useMemo, useState } from 'react';
+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';
@@ -26,6 +27,9 @@ const ThreatsList = () => {
 	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
 
+	const { data: status } = useScanStatusQuery();
+	const scanning = isScanInProgress( status );
+
 	// List of fixable threats that do not have a fix in progress
 	const fixableList = useMemo( () => {
 		return list.filter( threat => {
@@ -105,11 +109,13 @@ const ThreatsList = () => {
 				<div ref={ setYourScanResultsPopoverAnchor }>
 					<ThreatsNavigation selected={ selected } onSelect={ setSelected } />
 				</div>
-				<OnboardingPopover
-					id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
-					position="top"
-					anchor={ yourScanResultsPopoverAnchor }
-				/>
+				{ ! scanning && (
+					<OnboardingPopover
+						id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
+						position="top"
+						anchor={ yourScanResultsPopoverAnchor }
+					/>
+				) }
 			</Col>
 			<Col lg={ 8 }>
 				{ list?.length > 0 ? (
@@ -131,17 +137,21 @@ const ThreatsList = () => {
 													fixableList.length
 												) }
 											</Button>
-											<OnboardingPopover
-												id="paid-fix-all-threats"
-												position={ isSm ? 'bottom right' : 'middle left' }
-												anchor={ showAutoFixersPopoverAnchor }
-											/>
+											{ ! scanning && (
+												<OnboardingPopover
+													id="paid-fix-all-threats"
+													position={ isSm ? 'bottom right' : 'middle left' }
+													anchor={ showAutoFixersPopoverAnchor }
+												/>
+											) }
 											<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-											<OnboardingPopover
-												id="paid-daily-and-manual-scans"
-												position={ isSm ? 'bottom left' : 'middle left' }
-												anchor={ dailyAndManualScansPopoverAnchor }
-											/>
+											{ ! scanning && (
+												<OnboardingPopover
+													id="paid-daily-and-manual-scans"
+													position={ isSm ? 'bottom left' : 'middle left' }
+													anchor={ dailyAndManualScansPopoverAnchor }
+												/>
+											) }
 										</>
 									) }
 								</div>
@@ -161,11 +171,13 @@ const ThreatsList = () => {
 										<ScanButton />
 									</div>
 								</div>
-								<OnboardingPopover
-									id="paid-understand-severity"
-									position="top"
-									anchor={ understandSeverityPopoverAnchor }
-								/>
+								{ ! scanning && (
+									<OnboardingPopover
+										id="paid-understand-severity"
+										position="top"
+										anchor={ understandSeverityPopoverAnchor }
+									/>
+								) }
 							</>
 						) : (
 							<FreeList list={ list } />