Only display the manual scan message under the scanner threats list (#…

…38626)

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>
 	);
 } );

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"

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>
 		</>
 	);
 };