From ae36f16fdc235ffad05772fd1b5e916de3d1327b Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 1 Aug 2024 15:18:37 -0600
Subject: [PATCH] Only display the manual scan message under the scanner
 threats list (#38626)

---
 .../src/js/components/scan-button/index.jsx   |  6 ++---
 .../src/js/components/threats-list/index.jsx  | 21 ++++++++++++++++-
 .../js/components/threats-list/paid-list.jsx  | 23 -------------------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/scan-button/index.jsx b/projects/plugins/protect/src/js/components/scan-button/index.jsx
index 22ee422eaf7a8..91554cdaf4b93 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import React, { forwardRef } from 'react';
 import { STORE_ID } from '../../state/store';
 
-const ScanButton = forwardRef( ( props, ref ) => {
+const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const { scan } = useDispatch( STORE_ID );
 	const scanIsEnqueuing = useSelect( select => select( STORE_ID ).getScanIsEnqueuing(), [] );
 
@@ -18,12 +18,12 @@ const ScanButton = forwardRef( ( props, ref ) => {
 	return (
 		<Button
 			ref={ ref }
-			variant="secondary"
+			variant={ variant }
 			isLoading={ scanIsEnqueuing }
 			onClick={ handleScanClick() }
 			{ ...props }
 		>
-			{ __( 'Scan now', 'jetpack-protect' ) }
+			{ children ?? __( 'Scan now', 'jetpack-protect' ) }
 		</Button>
 	);
 } );
diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx
index b8b1eeefc25e8..d984fea2ce81d 100644
--- a/projects/plugins/protect/src/js/components/threats-list/index.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/index.jsx
@@ -1,5 +1,13 @@
-import { Container, Col, Title, Button, useBreakpointMatch } from '@automattic/jetpack-components';
+import {
+	Container,
+	Col,
+	Title,
+	Button,
+	useBreakpointMatch,
+	Text,
+} from '@automattic/jetpack-components';
 import { useDispatch } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback, useState } from 'react';
 import useProtectData from '../../hooks/use-protect-data';
@@ -137,6 +145,17 @@ const ThreatsList = () => {
 							<>
 								<div ref={ setUnderstandSeverityPopoverAnchor }>
 									<PaidList list={ list } />
+									<Text className={ styles[ 'manual-scan' ] } variant="body-small">
+										{ createInterpolateElement(
+											__(
+												'If you have manually fixed any of the threats listed above, <manualScanLink>you can run a manual scan now</manualScanLink> or wait for Jetpack to scan your site later today.',
+												'jetpack-protect'
+											),
+											{
+												manualScanLink: <ScanButton variant="link" />,
+											}
+										) }
+									</Text>
 								</div>
 								<OnboardingPopover
 									id="paid-understand-severity"
diff --git a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx b/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
index d8bd9424e6b0a..c25695ee67412 100644
--- a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
@@ -1,6 +1,5 @@
 import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
@@ -143,25 +142,6 @@ const ThreatAccordionItem = ( {
 };
 
 const PaidList = ( { list } ) => {
-	const { scan } = useDispatch( STORE_ID );
-
-	const handleScanClick = () => {
-		return event => {
-			event.preventDefault();
-			scan();
-		};
-	};
-
-	const manualScan = createInterpolateElement(
-		__(
-			'If you have manually fixed any of the threats listed above, <manualScanLink>you can run a manual scan now</manualScanLink> or wait for Jetpack to scan your site later today.',
-			'jetpack-protect'
-		),
-		{
-			manualScanLink: <Button variant="link" onClick={ handleScanClick() } />,
-		}
-	);
-
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
 	return (
@@ -223,9 +203,6 @@ const PaidList = ( { list } ) => {
 					)
 				) }
 			</PaidAccordion>
-			<Text className={ styles[ 'manual-scan' ] } variant="body-small">
-				{ manualScan }
-			</Text>
 		</>
 	);
 };