From 997e0b11eaa0cd9716895f5a0f4d8601e00a188f Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 001/143] Init project branch


From c6c82a95df8e2ffe7427d3776a8b75bc82ab2fd6 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 002/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From fc04ac528f115967c03b79c4f4edfe986c5b53af Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 003/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From fb3582e9e3eef95b28b64b03a83f4e9abde83710 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 004/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From ad120a9e928814a7dcc41d457ff6cacde9d9fcc6 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 13:15:16 -0800
Subject: [PATCH 005/143] Add home tab, page and stat cards

---
 .../protect/src/class-jetpack-protect.php     |   1 +
 .../src/js/components/admin-page/index.jsx    |   1 +
 .../src/js/components/pricing-table/index.jsx |   2 +-
 .../components/protect-check-icon/index.tsx   |  29 ++++-
 .../src/js/components/threats-list/empty.jsx  |  18 +--
 projects/plugins/protect/src/js/index.tsx     |   4 +-
 .../routes/home/home-admin-section-hero.tsx   |  47 ++++++++
 .../src/js/routes/home/home-statcards.jsx     | 113 ++++++++++++++++++
 .../protect/src/js/routes/home/index.jsx      |  25 ++++
 .../src/js/routes/home/styles.module.scss     |  73 +++++++++++
 .../src/js/routes/scan/styles.module.scss     |  60 ++++++++++
 11 files changed, 351 insertions(+), 22 deletions(-)
 create mode 100644 projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/home-statcards.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/index.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/styles.module.scss

diff --git a/projects/plugins/protect/src/class-jetpack-protect.php b/projects/plugins/protect/src/class-jetpack-protect.php
index 293ccdaeb3ce7..c57d8194e4e0d 100644
--- a/projects/plugins/protect/src/class-jetpack-protect.php
+++ b/projects/plugins/protect/src/class-jetpack-protect.php
@@ -459,6 +459,7 @@ public static function get_waf_stats() {
 		return array(
 			'blockedRequests'           => Plan::has_required_plan() ? Waf_Stats::get_blocked_requests() : false,
 			'automaticRulesLastUpdated' => Waf_Stats::get_automatic_rules_last_updated(),
+			'blockedLogins'             => (int) get_option( 'jetpack_protect_blocked_attempts', 0 ),
 		);
 	}
 }
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 2d023560517f3..92eab94652faf 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -67,6 +67,7 @@ const AdminPage = ( { children } ) => {
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
 				<Tabs className={ styles.navigation }>
+					<Tab link="/" label={ __( 'Home', 'jetpack-protect' ) } />
 					<Tab
 						link="/scan"
 						label={
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 3edd7911a0b6a..9ffa4e6799ca0 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -48,7 +48,7 @@ const ConnectedPricingTable = () => {
 	const getProtectFree = useCallback( async () => {
 		recordEvent( 'jetpack_protect_connected_product_activated' );
 		await connectSiteMutation.mutateAsync();
-		navigate( '/scan' );
+		navigate( '/' );
 	}, [ connectSiteMutation, recordEvent, navigate ] );
 
 	const args = {
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
index d1100d8ce6d5e..e65edba5b4ae3 100644
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
@@ -3,16 +3,39 @@ import { type JSX } from 'react';
 /**
  * Protect Shield and Checkmark SVG Icon
  *
+ * @param {object} props               - Component props.
+ * @param {string} [props.width="80"]  - The width of the SVG Icon.
+ * @param {string} [props.height="96"] - The height of the SVG Icon.
+ * @param {string} [props.status=null] - The status of the icon.
+ *
  * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
  */
-export default function ProtectCheck(): JSX.Element {
+export default function ProtectCheck( {
+	width = '80',
+	height = '96',
+	status = null,
+} ): JSX.Element {
+	let fill = '#069E08';
+
+	if ( status === 'warning' ) {
+		fill = '#F0B849';
+	} else if ( status === 'disabled' ) {
+		fill = '#A7AAAD';
+	}
+
 	return (
-		<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			width={ width }
+			height={ height }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill="#069E08"
+				fill={ fill }
 			/>
 			<path
 				fillRule="evenodd"
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
index 2d493b11e64a4..97b80d1e9a9cd 100644
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -6,26 +6,10 @@ import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-s
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import OnboardingPopover from '../onboarding-popover';
+import ProtectCheck from '../protect-check-icon';
 import ScanButton from '../scan-button';
 import styles from './styles.module.scss';
 
-const ProtectCheck = () => (
-	<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-			fill="#069E08"
-		/>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-			fill="white"
-		/>
-	</svg>
-);
-
 /**
  * Time Since
  *
diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx
index b8983d65bb836..96e021da2790e 100644
--- a/projects/plugins/protect/src/js/index.tsx
+++ b/projects/plugins/protect/src/js/index.tsx
@@ -11,6 +11,7 @@ import { NoticeProvider } from './hooks/use-notices';
 import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
+import HomeRoute from './routes/home';
 import ScanRoute from './routes/scan';
 import ScanHistoryRoute from './routes/scan/history';
 import SetupRoute from './routes/setup';
@@ -57,6 +58,7 @@ function render() {
 									<ScrollToTop />
 									<Routes>
 										<Route path="/setup" element={ <SetupRoute /> } />
+										<Route path="/" element={ <HomeRoute /> } />
 										<Route path="/scan" element={ <ScanRoute /> } />
 										<Route
 											path="/scan/history"
@@ -75,7 +77,7 @@ function render() {
 											}
 										/>
 										<Route path="/firewall" element={ <FirewallRoute /> } />
-										<Route path="*" element={ <Navigate to="/scan" replace /> } />
+										<Route path="*" element={ <Navigate to="/" replace /> } />
 									</Routes>
 								</HashRouter>
 								<Modal />
diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
new file mode 100644
index 0000000000000..2041ec8c17b59
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -0,0 +1,47 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AdminSectionHero from '../../components/admin-section-hero';
+import HomeStatCards from './home-statcards';
+import styles from './styles.module.scss';
+
+const HomeAdminSectionHero: React.FC = () => {
+	const navigate = useNavigate();
+	const handleScanReportClick = useCallback( () => {
+		navigate( '/scan' );
+	}, [ navigate ] );
+
+	return (
+		<AdminSectionHero
+			main={
+				<>
+					<AdminSectionHero.Heading>
+						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
+					</AdminSectionHero.Heading>
+					<AdminSectionHero.Subheading>
+						<>
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We stay ahead of security threats to keep your site protected.',
+									'jetpack-protect'
+								) }
+							</Text>
+							<Button
+								className={ styles[ 'scan-report' ] }
+								variant="primary"
+								weight="regular"
+								onClick={ handleScanReportClick }
+							>
+								{ __( 'View scan report', 'jetpack-protect' ) }
+							</Button>
+						</>
+					</AdminSectionHero.Subheading>
+				</>
+			}
+			secondary={ <HomeStatCards /> }
+		/>
+	);
+};
+
+export default HomeAdminSectionHero;
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
new file mode 100644
index 0000000000000..44bfbf69bc02f
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -0,0 +1,113 @@
+import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import ProtectCheck from '../../components/protect-check-icon';
+import useProtectData from '../../hooks/use-protect-data';
+import useWafData from '../../hooks/use-waf-data';
+import styles from './styles.module.scss';
+
+const HomeStatCards = () => {
+	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+
+	const {
+		counts: {
+			current: { threats: numThreats },
+		},
+	} = useProtectData();
+
+	const {
+		config: { bruteForceProtection: isBruteForceModuleEnabled },
+		isEnabled: isWafModuleEnabled,
+		wafSupported,
+		stats,
+	} = useWafData();
+
+	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
+
+	const { blockedLogins: blockedLoginsCount } = stats;
+
+	const defaultArgs = useMemo(
+		() => ( {
+			variant: isSmall ? 'horizontal' : 'square',
+		} ),
+		[ isSmall ]
+	);
+
+	const scanArgs = useMemo(
+		() => ( {
+			...defaultArgs,
+			icon: (
+				<span className={ styles[ 'stat-card-icon' ] }>
+					<ProtectCheck
+						width={ '16' }
+						height={ '19.14' }
+						status={ numThreats ? 'warning' : null }
+					/>
+				</span>
+			),
+			label: (
+				<span className={ styles[ 'stat-card-label' ] }>
+					{ __( 'Threats found', 'jetpack-protect' ) }
+				</span>
+			),
+			value: numThreats,
+		} ),
+		[ defaultArgs, numThreats ]
+	);
+
+	const wafArgs = useMemo(
+		() => ( {
+			...defaultArgs,
+			className: isWafModuleEnabled ? styles.active : styles.disabled,
+			icon: (
+				<span className={ styles[ 'stat-card-icon' ] }>
+					<ProtectCheck
+						width={ '16' }
+						height={ '19.14' }
+						status={ ! isWafModuleEnabled ? 'disabled' : null }
+					/>
+				</span>
+			),
+			label: (
+				<span className={ styles[ 'stat-card-label' ] }>
+					{ __( 'Blocked requests', 'jetpack-protect' ) }
+				</span>
+			),
+			value: allTimeBlockCount,
+		} ),
+		[ defaultArgs, isWafModuleEnabled, allTimeBlockCount ]
+	);
+
+	const bruteForceArgs = useMemo(
+		() => ( {
+			...defaultArgs,
+			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
+			icon: (
+				<span className={ styles[ 'stat-card-icon' ] }>
+					<ProtectCheck
+						width={ '16' }
+						height={ '19.14' }
+						status={ ! isBruteForceModuleEnabled ? 'disabled' : null }
+					/>
+				</span>
+			),
+			label: (
+				<span className={ styles[ 'stat-card-label' ] }>
+					{ __( 'Blocked logins', 'jetpack-protect' ) }
+				</span>
+			),
+			value: blockedLoginsCount,
+		} ),
+		[ defaultArgs, isBruteForceModuleEnabled, blockedLoginsCount ]
+	);
+
+	return (
+		<div className={ styles[ 'stat-card-wrapper' ] }>
+			<StatCard { ...scanArgs } />
+			{ wafSupported && <StatCard { ...wafArgs } /> }
+			<StatCard { ...bruteForceArgs } />
+		</div>
+	);
+};
+
+export default HomeStatCards;
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
new file mode 100644
index 0000000000000..718349caaac3f
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -0,0 +1,25 @@
+import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import AdminPage from '../../components/admin-page';
+import HomeAdminSectionHero from './home-admin-section-hero';
+
+/**
+ * Home Page
+ *
+ * The entry point for the Home page.
+ *
+ * @return {Component} The root component for the scan page.
+ */
+const HomePage = () => {
+	return (
+		<AdminPage>
+			<HomeAdminSectionHero />
+			<AdminSection>
+				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
+					<Col>{ /* TODO: Add ScanReport component here */ }</Col>
+				</Container>
+			</AdminSection>
+		</AdminPage>
+	);
+};
+
+export default HomePage;
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
new file mode 100644
index 0000000000000..52ee0dc3f35cf
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -0,0 +1,73 @@
+.subheading-text {
+	white-space: nowrap;
+}
+
+.product-section, .info-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.scan-report {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+}
+
+.stat-card-wrapper {
+    display: flex;
+    margin-left: auto;
+
+    > *:not( last-child ) {
+        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
+    }
+
+    .disabled {
+        opacity: 0.5;
+    }
+}
+
+.stat-card-icon {
+    width: 100%;
+    margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+	.active {
+		fill: var( --jp-green-40 );
+	}
+
+	.warning {
+		fill: var( --jp-yellow-40 );
+	}
+
+	.disabled {
+		fill: var( --jp-gray-40 );
+	}
+}
+
+.stat-card-label {
+    white-space: nowrap;
+}
+
+@media ( max-width: 1115px ) {
+    .stat-card-wrapper {
+        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+        flex-wrap: wrap;
+
+    }
+}
+
+@media ( max-width: 599px ) {
+    .stat-card-wrapper {
+        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+        flex-wrap: wrap;
+
+        > *:not( last-child ) {
+            margin-right: 0;
+            margin-bottom: var( --spacing-base ); // 8px
+        }
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
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 908e34f6e71d7..2e311f93d76fd 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -9,4 +9,64 @@
 
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+}
+.stat-card-wrapper {
+    display: flex;
+    margin-left: auto;
+
+    > *:not( last-child ) {
+        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
+    }
+
+    .disabled {
+        opacity: 0.5;
+    }
+}
+
+.stat-card-icon {
+    width: 100%;
+    margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+	.active {
+		fill: var( --jp-green-40 );
+	}
+
+	.warning {
+		fill: var( --jp-yellow-40 );
+	}
+
+	.disabled {
+		fill: var( --jp-gray-40 );
+	}
+}
+
+.stat-card-label {
+    white-space: nowrap;
+}
+
+@media ( max-width: 1115px ) {
+    .stat-card-wrapper {
+        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+        flex-wrap: wrap;
+
+    }
+}
+
+@media ( max-width: 599px ) {
+    .stat-card-wrapper {
+        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+        flex-wrap: wrap;
+
+        > *:not( last-child ) {
+            margin-right: 0;
+            margin-bottom: var( --spacing-base ); // 8px
+        }
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
 }
\ No newline at end of file

From d210012d463cd8a7a37ebef45dd86ca983aa59f3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 14:10:41 -0800
Subject: [PATCH 006/143] Fixes and improvements

---
 .../src/js/components/alert-icon/index.jsx    | 74 -------------------
 .../src/js/components/alert-icon/index.tsx    | 47 ++++++++++++
 .../alert-icon/stories/index.stories.jsx      |  6 +-
 .../components/alert-icon/styles.module.scss  | 11 ---
 .../error-admin-section-hero/index.tsx        |  4 +-
 .../styles.module.scss                        |  4 -
 .../components/protect-check-icon/index.tsx   | 28 +++----
 .../src/js/routes/home/home-statcards.jsx     | 25 ++++---
 .../src/js/routes/scan/styles.module.scss     |  4 +-
 9 files changed, 83 insertions(+), 120 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.jsx
 create mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/styles.module.scss

diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.jsx b/projects/plugins/protect/src/js/components/alert-icon/index.jsx
deleted file mode 100644
index 8a4d32da59553..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/index.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Path, SVG, Rect, G } from '@wordpress/components';
-import React from 'react';
-import styles from './styles.module.scss';
-
-/**
- * Alert icon
- *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
- * @return { React.ReactNode }      The Alert Icon component.
- */
-export default function AlertSVGIcon( { className, color = '#D63638' } ) {
-	return (
-		<div className={ styles.container }>
-			<SVG
-				className={ className }
-				width="127"
-				height="136"
-				viewBox="0 0 127 136"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<G filter="url(#filter0_d_2716_19567)">
-					<Path
-						fillRule="evenodd"
-						clipRule="evenodd"
-						d="M63.4061 36L86.8123 46.4057V61.9177C86.8123 75.141 78.1289 87.6611 65.8844 91.6107C64.2754 92.1298 62.5369 92.1297 60.9279 91.6107C48.6834 87.6611 40 75.141 40 61.9177V46.4057L63.4061 36Z"
-						fill={ color }
-					/>
-					<Rect x="59.8953" y="72.1666" width="7.02184" height="7" rx="3.5" fill="white" />
-					<Path
-						d="M59.9619 51.0626C59.9258 50.4868 60.383 50 60.9599 50H65.8524C66.4293 50 66.8866 50.4868 66.8505 51.0626L65.8056 67.7292C65.7725 68.2562 65.3355 68.6667 64.8075 68.6667H62.0048C61.4769 68.6667 61.0398 68.2562 61.0068 67.7292L59.9619 51.0626Z"
-						fill="white"
-					/>
-				</G>
-				<defs>
-					<filter
-						id="filter0_d_2716_19567"
-						x="0"
-						y="0"
-						width="126.812"
-						height="136"
-						filterUnits="userSpaceOnUse"
-						colorInterpolationFilters="sRGB"
-					>
-						<feFlood floodOpacity="0" result="BackgroundImageFix" />
-						<feColorMatrix
-							in="SourceAlpha"
-							type="matrix"
-							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-							result="hardAlpha"
-						/>
-						<feOffset dy="4" />
-						<feGaussianBlur stdDeviation="20" />
-						<feComposite in2="hardAlpha" operator="out" />
-						<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
-						<feBlend
-							mode="normal"
-							in2="BackgroundImageFix"
-							result="effect1_dropShadow_2716_19567"
-						/>
-						<feBlend
-							mode="normal"
-							in="SourceGraphic"
-							in2="effect1_dropShadow_2716_19567"
-							result="shape"
-						/>
-					</filter>
-				</defs>
-			</SVG>
-		</div>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.tsx b/projects/plugins/protect/src/js/components/alert-icon/index.tsx
new file mode 100644
index 0000000000000..65f8b1ddf2eaa
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/alert-icon/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+/**
+ * Alert icon
+ *
+ * @param {object} props           - Props.
+ * @param {string} props.className - Optional component class name.
+ * @param {string} props.width     - Optional icon width. Defaults to '127'.
+ * @param {string} props.height    - Optional icon height. Defaults to '136'.
+ * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
+ *
+ * @return {JSX.Element}      The Alert Icon component.
+ */
+export default function Alert( {
+	className,
+	width = '40',
+	height = '48',
+	color = '#D63638',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
+} ): JSX.Element {
+	return (
+		<svg
+			className={ className }
+			width={ width }
+			height={ height }
+			viewBox="0 0 40 48"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20 0L40 8.91914V22.2152C40 33.5494 32.5803 44.2809 22.1176 47.6664C20.7428 48.1112 19.2572 48.1112 17.8824 47.6664C7.41973 44.2809 0 33.5494 0 22.2152V8.91914L20 0Z"
+				fill={ color }
+			/>
+			<rect x="17" y="31" width="6" height="6" rx="3" fill="white" />
+			<path
+				d="M17.0664 13.0624C17.0304 12.4867 17.4876 12 18.0645 12H21.9355C22.5124 12 22.9696 12.4867 22.9336 13.0624L22.0586 27.0624C22.0257 27.5894 21.5886 28 21.0605 28H18.9395C18.4114 28 17.9743 27.5894 17.9414 27.0624L17.0664 13.0624Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
index 107e513394d42..c8d40b156016d 100644
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
-import AlertIcon from '../index.jsx';
+import Alert from '../index.jsx';
 
 export default {
 	title: 'Plugins/Protect/Alert Icon',
-	component: AlertIcon,
+	component: Alert,
 	argTypes: {
 		color: {
 			control: {
@@ -14,5 +14,5 @@ export default {
 	},
 };
 
-const FooterTemplate = args => <AlertIcon { ...args } />;
+const FooterTemplate = args => <Alert { ...args } />;
 export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss b/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
deleted file mode 100644
index 938a62897f2a8..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-	width: 48px;
-	height: 56px;
-	margin-bottom: calc( var( --spacing-base ) * 8 ); // 64px
-
-	> svg {
-		position: relative;
-		top: -36px;
-		left: -40px;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 5214531dcf362..842421ba19692 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,7 +1,7 @@
 import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
+import Alert from '../alert-icon';
 import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
@@ -25,7 +25,7 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<Icon className={ styles.warning } icon={ warning } size={ 54 } />
+							<Alert className={ styles.warning } />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
 						</div>
 					</AdminSectionHero.Heading>
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
index 6f0750abd02f8..e0053d4dece1b 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
@@ -4,10 +4,6 @@
 }
 
 .warning {
-    width: 54px;
-    height: 54px;
-    fill: var( --jp-red );
-    margin-left: -8px;
     margin-right: var( --spacing-base ); // 8px
 }
 
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
index e65edba5b4ae3..e222d61adcadf 100644
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
@@ -3,28 +3,28 @@ import { type JSX } from 'react';
 /**
  * Protect Shield and Checkmark SVG Icon
  *
- * @param {object} props               - Component props.
- * @param {string} [props.width="80"]  - The width of the SVG Icon.
- * @param {string} [props.height="96"] - The height of the SVG Icon.
- * @param {string} [props.status=null] - The status of the icon.
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="80"]      - The width of the SVG Icon.
+ * @param {string} [props.height="96"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
  *
  * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
  */
 export default function ProtectCheck( {
+	className,
 	width = '80',
 	height = '96',
-	status = null,
+	color = '#069E08',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
 } ): JSX.Element {
-	let fill = '#069E08';
-
-	if ( status === 'warning' ) {
-		fill = '#F0B849';
-	} else if ( status === 'disabled' ) {
-		fill = '#A7AAAD';
-	}
-
 	return (
 		<svg
+			className={ className }
 			width={ width }
 			height={ height }
 			viewBox="0 0 80 96"
@@ -35,7 +35,7 @@ export default function ProtectCheck( {
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ fill }
+				fill={ color }
 			/>
 			<path
 				fillRule="evenodd"
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 44bfbf69bc02f..51323e8b80ae7 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,6 +1,7 @@
 import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
+import Alert from '../../components/alert-icon';
 import ProtectCheck from '../../components/protect-check-icon';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
@@ -41,7 +42,7 @@ const HomeStatCards = () => {
 					<ProtectCheck
 						width={ '16' }
 						height={ '19.14' }
-						status={ numThreats ? 'warning' : null }
+						color={ numThreats ? '#F0B849' : '#069E08' }
 					/>
 				</span>
 			),
@@ -61,11 +62,11 @@ const HomeStatCards = () => {
 			className: isWafModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					<ProtectCheck
-						width={ '16' }
-						height={ '19.14' }
-						status={ ! isWafModuleEnabled ? 'disabled' : null }
-					/>
+					{ isWafModuleEnabled ? (
+						<ProtectCheck width={ '16' } height={ '19.14' } />
+					) : (
+						<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
+					) }
 				</span>
 			),
 			label: (
@@ -84,11 +85,13 @@ const HomeStatCards = () => {
 			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					<ProtectCheck
-						width={ '16' }
-						height={ '19.14' }
-						status={ ! isBruteForceModuleEnabled ? 'disabled' : null }
-					/>
+					<span className={ styles[ 'stat-card-icon' ] }>
+						{ isBruteForceModuleEnabled ? (
+							<ProtectCheck width={ '16' } height={ '19.14' } />
+						) : (
+							<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
+						) }
+					</span>
 				</span>
 			),
 			label: (
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 2e311f93d76fd..20b378d0d75e0 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -7,9 +7,11 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.auto-fixers {
+.auto-fixers,
+.scan-navigation {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
+
 .stat-card-wrapper {
     display: flex;
     margin-left: auto;

From b07220cd6c22dcd4071a849ef5614129656202b3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 14:51:12 -0800
Subject: [PATCH 007/143] Add Tooltips

---
 .../src/js/routes/home/home-statcards.jsx     | 94 ++++++++++++++++---
 .../src/js/routes/home/styles.module.scss     | 13 ++-
 2 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 51323e8b80ae7..ffc39960b7319 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,21 +1,33 @@
 import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
+import { Tooltip } from '@wordpress/components';
+import { dateI18n } from '@wordpress/date';
+import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import Alert from '../../components/alert-icon';
 import ProtectCheck from '../../components/protect-check-icon';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
 const HomeStatCards = () => {
+	const { hasPlan } = usePlan();
+
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
+		lastChecked,
 	} = useProtectData();
 
+	let lastCheckedLocalTimestamp = null;
+	if ( lastChecked ) {
+		// Convert the lastChecked UTC date to a local timestamp
+		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+	}
+
 	const {
 		config: { bruteForceProtection: isBruteForceModuleEnabled },
 		isEnabled: isWafModuleEnabled,
@@ -85,13 +97,11 @@ const HomeStatCards = () => {
 			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					<span className={ styles[ 'stat-card-icon' ] }>
-						{ isBruteForceModuleEnabled ? (
-							<ProtectCheck width={ '16' } height={ '19.14' } />
-						) : (
-							<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
-						) }
-					</span>
+					{ isBruteForceModuleEnabled ? (
+						<ProtectCheck width={ '16' } height={ '19.14' } />
+					) : (
+						<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
+					) }
 				</span>
 			),
 			label: (
@@ -104,11 +114,71 @@ const HomeStatCards = () => {
 		[ defaultArgs, isBruteForceModuleEnabled, blockedLoginsCount ]
 	);
 
+	const lastCheckedMessage = useMemo( () => {
+		const getEntity = () => {
+			if ( numThreats === 1 ) {
+				return hasPlan
+					? __( 'threat', 'jetpack-protect' )
+					: __( 'vulnerability', 'jetpack-protect' );
+			}
+			return hasPlan
+				? __( 'threats', 'jetpack-protect' )
+				: __( 'vulnerabilities', 'jetpack-protect' );
+		};
+
+		if ( numThreats > 0 ) {
+			return sprintf(
+				// translators: %1$s: date and time of the last scan, %2$d: number of threats/vulnerabilities, %3$s: "threat(s)" or "vulnerabilities"
+				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
+				dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp ),
+				numThreats,
+				getEntity()
+			);
+		}
+
+		return sprintf(
+			// translators: %s: date and time of the last scan
+			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
+			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
+		);
+	}, [ numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+
 	return (
-		<div className={ styles[ 'stat-card-wrapper' ] }>
-			<StatCard { ...scanArgs } />
-			{ wafSupported && <StatCard { ...wafArgs } /> }
-			<StatCard { ...bruteForceArgs } />
+		<div className={ styles[ 'stat-cards-wrapper' ] }>
+			<Tooltip className={ styles[ 'stat-card-tooltip' ] } text={ lastCheckedMessage }>
+				<div className={ styles[ 'stat-card-wrapper' ] }>
+					<StatCard { ...scanArgs } />
+				</div>
+			</Tooltip>
+			{ wafSupported && (
+				<Tooltip
+					className={ styles[ 'stat-card-tooltip' ] }
+					text={
+						isWafModuleEnabled
+							? __( 'Untrusted traffic requests blocked all-time.', 'jetpack-protect' )
+							: __( "Firewall is off. Untrusted traffic can't be blocked", 'jetpack-protect' )
+					}
+				>
+					<div className={ styles[ 'stat-card-wrapper' ] }>
+						<StatCard { ...wafArgs } />
+					</div>
+				</Tooltip>
+			) }
+			<Tooltip
+				className={ styles[ 'stat-card-tooltip' ] }
+				text={
+					isBruteForceModuleEnabled
+						? __( 'Login attempts blocked all-time.', 'jetpack-protect' )
+						: __(
+								"Brute force protect is off. Log in attempts can't be blocked.",
+								'jetpack-protect'
+						  )
+				}
+			>
+				<div className={ styles[ 'stat-card-wrapper' ] }>
+					<StatCard { ...bruteForceArgs } />
+				</div>
+			</Tooltip>
 		</div>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 52ee0dc3f35cf..a5124e9671229 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -11,7 +11,7 @@
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
-.stat-card-wrapper {
+.stat-cards-wrapper {
     display: flex;
     margin-left: auto;
 
@@ -48,8 +48,15 @@
     white-space: nowrap;
 }
 
+.stat-card-tooltip {
+	margin-top: 8px;
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
+
 @media ( max-width: 1115px ) {
-    .stat-card-wrapper {
+    .stat-cards-wrapper {
         margin-top: calc( var( --spacing-base ) * 3 ); // 24px
         flex-wrap: wrap;
 
@@ -57,7 +64,7 @@
 }
 
 @media ( max-width: 599px ) {
-    .stat-card-wrapper {
+    .stat-cards-wrapper {
         margin-top: calc( var( --spacing-base ) * 3 ); // 24px
         flex-wrap: wrap;
 

From 3613c648f3a784f489734a11aeeede3320266d16 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 14:58:03 -0800
Subject: [PATCH 008/143] Fix translations

---
 .../routes/home/home-admin-section-hero.tsx   | 16 +++++++---
 .../src/js/routes/home/home-statcards.jsx     | 32 +++++++++----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
index 2041ec8c17b59..c9bc1b628f9cc 100644
--- a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -1,12 +1,14 @@
 import { Text, Button } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AdminSectionHero from '../../components/admin-section-hero';
+import usePlan from '../../hooks/use-plan';
 import HomeStatCards from './home-statcards';
 import styles from './styles.module.scss';
 
 const HomeAdminSectionHero: React.FC = () => {
+	const { hasPlan } = usePlan();
 	const navigate = useNavigate();
 	const handleScanReportClick = useCallback( () => {
 		navigate( '/scan' );
@@ -22,9 +24,15 @@ const HomeAdminSectionHero: React.FC = () => {
 					<AdminSectionHero.Subheading>
 						<>
 							<Text className={ styles[ 'subheading-text' ] }>
-								{ __(
-									'We stay ahead of security threats to keep your site protected.',
-									'jetpack-protect'
+								{ sprintf(
+									// translators: %s is replaced with "threats" or "vulnerabilities" depending on the user's plan.
+									__(
+										'We stay ahead of security %s to keep your site protected.',
+										'jetpack-protect'
+									),
+									hasPlan
+										? __( 'threats', 'jetpack-protect' )
+										: __( 'vulnerabilities', 'jetpack-protect' )
 								) }
 							</Text>
 							<Button
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index ffc39960b7319..eb16778e8ed72 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,7 +1,7 @@
 import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import Alert from '../../components/alert-icon';
 import ProtectCheck from '../../components/protect-check-icon';
@@ -60,12 +60,18 @@ const HomeStatCards = () => {
 			),
 			label: (
 				<span className={ styles[ 'stat-card-label' ] }>
-					{ __( 'Threats found', 'jetpack-protect' ) }
+					{ sprintf(
+						// translators: %s: "Threats" or "Vulnerabilities"
+						__( '%s found', 'jetpack-protect' ),
+						hasPlan
+							? __( 'Threats', 'jetpack-protect' )
+							: __( 'Vulnerabilities', 'jetpack-protect' )
+					) }
 				</span>
 			),
 			value: numThreats,
 		} ),
-		[ defaultArgs, numThreats ]
+		[ defaultArgs, hasPlan, numThreats ]
 	);
 
 	const wafArgs = useMemo(
@@ -115,29 +121,21 @@ const HomeStatCards = () => {
 	);
 
 	const lastCheckedMessage = useMemo( () => {
-		const getEntity = () => {
-			if ( numThreats === 1 ) {
-				return hasPlan
-					? __( 'threat', 'jetpack-protect' )
-					: __( 'vulnerability', 'jetpack-protect' );
-			}
-			return hasPlan
-				? __( 'threats', 'jetpack-protect' )
-				: __( 'vulnerabilities', 'jetpack-protect' );
-		};
+		const entityLabel = hasPlan
+			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
+			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
 
 		if ( numThreats > 0 ) {
 			return sprintf(
-				// translators: %1$s: date and time of the last scan, %2$d: number of threats/vulnerabilities, %3$s: "threat(s)" or "vulnerabilities"
+				// translators: %1$s: date/time, %2$d: number, %3$s: entity label
 				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
 				dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp ),
 				numThreats,
-				getEntity()
+				entityLabel
 			);
 		}
-
 		return sprintf(
-			// translators: %s: date and time of the last scan
+			// translators: %s: date/time
 			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
 			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
 		);

From f95141c94b3e54d02af8ba2e43632dcf98e95622 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 15:01:27 -0800
Subject: [PATCH 009/143] Reorg

---
 .../src/js/routes/home/home-statcards.jsx     | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index eb16778e8ed72..33b82f7122f31 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -12,7 +12,6 @@ import styles from './styles.module.scss';
 
 const HomeStatCards = () => {
 	const { hasPlan } = usePlan();
-
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
 	const {
@@ -22,12 +21,6 @@ const HomeStatCards = () => {
 		lastChecked,
 	} = useProtectData();
 
-	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
-		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
-	}
-
 	const {
 		config: { bruteForceProtection: isBruteForceModuleEnabled },
 		isEnabled: isWafModuleEnabled,
@@ -36,9 +29,35 @@ const HomeStatCards = () => {
 	} = useWafData();
 
 	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
-
 	const { blockedLogins: blockedLoginsCount } = stats;
 
+	let lastCheckedLocalTimestamp = null;
+	if ( lastChecked ) {
+		// Convert the lastChecked UTC date to a local timestamp
+		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+	}
+
+	const lastCheckedMessage = useMemo( () => {
+		const entityLabel = hasPlan
+			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
+			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
+
+		if ( numThreats > 0 ) {
+			return sprintf(
+				// translators: %1$s: date/time, %2$d: number, %3$s: entity label
+				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
+				dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp ),
+				numThreats,
+				entityLabel
+			);
+		}
+		return sprintf(
+			// translators: %s: date/time
+			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
+			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
+		);
+	}, [ numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+
 	const defaultArgs = useMemo(
 		() => ( {
 			variant: isSmall ? 'horizontal' : 'square',
@@ -120,27 +139,6 @@ const HomeStatCards = () => {
 		[ defaultArgs, isBruteForceModuleEnabled, blockedLoginsCount ]
 	);
 
-	const lastCheckedMessage = useMemo( () => {
-		const entityLabel = hasPlan
-			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
-			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
-
-		if ( numThreats > 0 ) {
-			return sprintf(
-				// translators: %1$s: date/time, %2$d: number, %3$s: entity label
-				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
-				dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp ),
-				numThreats,
-				entityLabel
-			);
-		}
-		return sprintf(
-			// translators: %s: date/time
-			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
-			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
-		);
-	}, [ numThreats, lastCheckedLocalTimestamp, hasPlan ] );
-
 	return (
 		<div className={ styles[ 'stat-cards-wrapper' ] }>
 			<Tooltip className={ styles[ 'stat-card-tooltip' ] } text={ lastCheckedMessage }>

From 88b097711562669fa31ab0277061c47c142525f9 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 22 Nov 2024 15:07:40 -0800
Subject: [PATCH 010/143] Fix typo

---
 .../protect/src/js/routes/scan/scan-admin-section-hero.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 1c5cc6cac49b9..abfe93078a487 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
@@ -121,7 +121,7 @@ const ScanAdminSectionHero: React.FC = () => {
 						<>
 							<Text className={ styles[ 'subheading-text' ] }>
 								{ __(
-									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
 									'jetpack-protect'
 								) }
 							</Text>

From 7840094807567bbe9020a125f21bf1a7d1db4468 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 26 Nov 2024 11:25:11 -0800
Subject: [PATCH 011/143] Add errorMessage flag to StatCard, make WAF stats
 free

---
 .../components/components/stat-card/index.tsx | 32 +++++----
 .../components/components/stat-card/types.ts  |  5 ++
 .../protect/src/class-jetpack-protect.php     |  2 +-
 .../js/routes/firewall/firewall-statcards.jsx | 22 +++----
 .../src/js/routes/home/home-statcards.jsx     | 65 +++++++++++++------
 .../src/js/routes/home/styles.module.scss     | 13 ++--
 6 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index b6854dc02f37e..8917ef4473c51 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -18,7 +18,14 @@ import type React from 'react';
  * @param {StatCardProps} props - Component props.
  * @return {React.ReactNode} - StatCard react component.
  */
-const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => {
+const StatCard = ( {
+	className,
+	icon,
+	label,
+	value,
+	variant = 'square',
+	errorMessage,
+}: StatCardProps ) => {
 	const formattedValue = numberFormat( value );
 	const compactValue = numberFormat( value, {
 		notation: 'compact',
@@ -29,18 +36,19 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa
 		<div className={ clsx( className, styles.wrapper, styles[ variant ] ) }>
 			<div className={ clsx( styles.icon ) }>{ icon }</div>
 			<div className={ clsx( styles.info ) }>
-				<Text className={ styles.label }>{ label }</Text>
-				{ variant === 'square' ? (
-					<Tooltip text={ formattedValue } placement="top">
-						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ compactValue }
+				<Text className={ styles.label }>{ errorMessage ? errorMessage : label }</Text>
+				{ ! errorMessage &&
+					( variant === 'square' ? (
+						<Tooltip text={ formattedValue } placement="top">
+							<Text variant="headline-small" className={ clsx( styles.value ) }>
+								{ compactValue }
+							</Text>
+						</Tooltip>
+					) : (
+						<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
+							{ formattedValue }
 						</Text>
-					</Tooltip>
-				) : (
-					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-						{ formattedValue }
-					</Text>
-				) }
+					) ) }
 			</div>
 		</div>
 	);
diff --git a/projects/js-packages/components/components/stat-card/types.ts b/projects/js-packages/components/components/stat-card/types.ts
index 4b0fd698e6774..d976781550de3 100644
--- a/projects/js-packages/components/components/stat-card/types.ts
+++ b/projects/js-packages/components/components/stat-card/types.ts
@@ -25,4 +25,9 @@ export type StatCardProps = {
 	 * @default 'square'
 	 */
 	variant?: 'square' | 'horizontal';
+
+	/**
+	 * The error message to be displayed.
+	 */
+	errorMessage?: string;
 };
diff --git a/projects/plugins/protect/src/class-jetpack-protect.php b/projects/plugins/protect/src/class-jetpack-protect.php
index c57d8194e4e0d..492cded402990 100644
--- a/projects/plugins/protect/src/class-jetpack-protect.php
+++ b/projects/plugins/protect/src/class-jetpack-protect.php
@@ -457,7 +457,7 @@ public static function get_waf_stats() {
 		}
 
 		return array(
-			'blockedRequests'           => Plan::has_required_plan() ? Waf_Stats::get_blocked_requests() : false,
+			'blockedRequests'           => Waf_Stats::get_blocked_requests(),
 			'automaticRulesLastUpdated' => Waf_Stats::get_automatic_rules_last_updated(),
 			'blockedLogins'             => (int) get_option( 'jetpack_protect_blocked_attempts', 0 ),
 		);
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
index 15c80df763c18..3b69d4e8afe0d 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
@@ -1,13 +1,11 @@
-import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, shield, chartBar } from '@wordpress/icons';
 import { useCallback, useMemo } from 'react';
-import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
 const FirewallStatCards = () => {
-	const { hasPlan } = usePlan();
 	const {
 		config: { bruteForceProtection: isBruteForceModuleEnabled },
 		isEnabled: isWafModuleEnabled,
@@ -22,26 +20,22 @@ const FirewallStatCards = () => {
 	const { currentDay: currentDayBlockCount, thirtyDays: thirtyDayBlockCounts } = stats
 		? stats.blockedRequests
 		: { currentDay: 0, thirtyDays: 0 };
-	const isFeatureDisabled = ! isSupportedWafFeatureEnabled || ! hasPlan;
 
 	const defaultArgs = useMemo(
 		() => ( {
-			className: isFeatureDisabled ? styles.disabled : styles.active,
+			className: ! isSupportedWafFeatureEnabled ? styles.disabled : styles.active,
 			variant: isSmall ? 'horizontal' : 'square',
 		} ),
-		[ isFeatureDisabled, isSmall ]
+		[ isSupportedWafFeatureEnabled, isSmall ]
 	);
 
 	const StatCardIcon = useCallback(
 		( { icon } ) => (
 			<span className={ styles[ 'stat-card-icon' ] }>
 				<Icon icon={ icon } />
-				{ ! isSmall && ! hasPlan && (
-					<Text variant="label">{ __( 'Paid feature', 'jetpack-protect' ) }</Text>
-				) }
 			</span>
 		),
-		[ isSmall, hasPlan ]
+		[]
 	);
 
 	const StatCardLabel = useCallback(
@@ -77,9 +71,9 @@ const FirewallStatCards = () => {
 			...defaultArgs,
 			icon: <StatCardIcon icon={ shield } />,
 			label: <StatCardLabel period={ 24 } units="hours" />,
-			value: isFeatureDisabled ? 0 : currentDayBlockCount,
+			value: ! isSupportedWafFeatureEnabled ? 0 : currentDayBlockCount,
 		} ),
-		[ defaultArgs, StatCardIcon, StatCardLabel, isFeatureDisabled, currentDayBlockCount ]
+		[ defaultArgs, StatCardIcon, StatCardLabel, isSupportedWafFeatureEnabled, currentDayBlockCount ]
 	);
 
 	const thirtyDaysArgs = useMemo(
@@ -87,9 +81,9 @@ const FirewallStatCards = () => {
 			...defaultArgs,
 			icon: <StatCardIcon icon={ chartBar } />,
 			label: <StatCardLabel period={ 30 } units="days" />,
-			value: isFeatureDisabled ? 0 : thirtyDayBlockCounts,
+			value: ! isSupportedWafFeatureEnabled ? 0 : thirtyDayBlockCounts,
 		} ),
-		[ defaultArgs, StatCardIcon, StatCardLabel, isFeatureDisabled, thirtyDayBlockCounts ]
+		[ defaultArgs, StatCardIcon, StatCardLabel, isSupportedWafFeatureEnabled, thirtyDayBlockCounts ]
 	);
 
 	return (
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 33b82f7122f31..35f59f6ef982e 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,4 +1,4 @@
-import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -11,6 +11,9 @@ import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
 const HomeStatCards = () => {
+	const defaultHeight = '19.14';
+	const defaultWidth = '16';
+
 	const { hasPlan } = usePlan();
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
@@ -19,6 +22,7 @@ const HomeStatCards = () => {
 			current: { threats: numThreats },
 		},
 		lastChecked,
+		error: scanError,
 	} = useProtectData();
 
 	const {
@@ -38,6 +42,13 @@ const HomeStatCards = () => {
 	}
 
 	const lastCheckedMessage = useMemo( () => {
+		if ( scanError ) {
+			return __(
+				'A scan error occurred. View your scan report for more detail.',
+				'jetpack-protect'
+			);
+		}
+
 		const entityLabel = hasPlan
 			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
@@ -56,7 +67,14 @@ const HomeStatCards = () => {
 			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
 			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
 		);
-	}, [ numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+	}, [ scanError, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+
+	const renderIcon = isFeatureEnabled => {
+		if ( isFeatureEnabled ) {
+			return <ProtectCheck width={ defaultWidth } height={ defaultHeight } />;
+		}
+		return <Alert width={ defaultWidth } height={ defaultHeight } color="#A7AAAD" />;
+	};
 
 	const defaultArgs = useMemo(
 		() => ( {
@@ -68,13 +86,21 @@ const HomeStatCards = () => {
 	const scanArgs = useMemo(
 		() => ( {
 			...defaultArgs,
+			className: scanError ? styles.error : styles.active,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					<ProtectCheck
-						width={ '16' }
-						height={ '19.14' }
-						color={ numThreats ? '#F0B849' : '#069E08' }
-					/>
+					{ scanError ? (
+						<Alert width={ defaultWidth } height={ defaultHeight } />
+					) : (
+						<ProtectCheck
+							width={ defaultWidth }
+							height={ defaultHeight }
+							color={ numThreats ? '#F0B849' : '#069E08' }
+						/>
+					) }
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
+						{ __( 'Scanning', 'jetpack-protect' ) }
+					</Text>
 				</span>
 			),
 			label: (
@@ -89,8 +115,9 @@ const HomeStatCards = () => {
 				</span>
 			),
 			value: numThreats,
+			errorMessage: scanError ? __( 'Scan error', 'jetpack-protect' ) : null,
 		} ),
-		[ defaultArgs, hasPlan, numThreats ]
+		[ defaultArgs, scanError, hasPlan, numThreats ]
 	);
 
 	const wafArgs = useMemo(
@@ -99,11 +126,10 @@ const HomeStatCards = () => {
 			className: isWafModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					{ isWafModuleEnabled ? (
-						<ProtectCheck width={ '16' } height={ '19.14' } />
-					) : (
-						<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
-					) }
+					{ renderIcon( isWafModuleEnabled ) }{ ' ' }
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
+						{ __( 'Firewall', 'jetpack-protect' ) }
+					</Text>
 				</span>
 			),
 			label: (
@@ -122,11 +148,10 @@ const HomeStatCards = () => {
 			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					{ isBruteForceModuleEnabled ? (
-						<ProtectCheck width={ '16' } height={ '19.14' } />
-					) : (
-						<Alert width={ '16' } height={ '19.14' } color={ '#A7AAAD' } />
-					) }
+					{ renderIcon( isBruteForceModuleEnabled ) }
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
+						{ __( 'Login protection', 'jetpack-protect' ) }
+					</Text>
 				</span>
 			),
 			label: (
@@ -151,7 +176,7 @@ const HomeStatCards = () => {
 					className={ styles[ 'stat-card-tooltip' ] }
 					text={
 						isWafModuleEnabled
-							? __( 'Untrusted traffic requests blocked all-time.', 'jetpack-protect' )
+							? __( 'Untrusted traffic requests blocked all time.', 'jetpack-protect' )
 							: __( "Firewall is off. Untrusted traffic can't be blocked", 'jetpack-protect' )
 					}
 				>
@@ -164,7 +189,7 @@ const HomeStatCards = () => {
 				className={ styles[ 'stat-card-tooltip' ] }
 				text={
 					isBruteForceModuleEnabled
-						? __( 'Login attempts blocked all-time.', 'jetpack-protect' )
+						? __( 'Total login attempts blocked all time.', 'jetpack-protect' )
 						: __(
 								"Brute force protect is off. Log in attempts can't be blocked.",
 								'jetpack-protect'
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index a5124e9671229..66d819889d388 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -19,6 +19,10 @@
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
     }
 
+    .error {
+        border: 2px solid var( --jp-red-50 );
+    }
+
     .disabled {
         opacity: 0.5;
     }
@@ -28,8 +32,8 @@
     width: 100%;
     margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 8px;
 
 	.active {
 		fill: var( --jp-green-40 );
@@ -42,10 +46,11 @@
 	.disabled {
 		fill: var( --jp-gray-40 );
 	}
-}
 
-.stat-card-label {
-    white-space: nowrap;
+    &-label {
+        color: var( --jp-black );
+        white-space: nowrap;
+    }
 }
 
 .stat-card-tooltip {

From 0a5ba319c67172df596de72996fb0ed144aee30e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 26 Nov 2024 11:26:00 -0800
Subject: [PATCH 012/143] changelog

---
 projects/js-packages/components/changelog/add-protect-home | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/js-packages/components/changelog/add-protect-home

diff --git a/projects/js-packages/components/changelog/add-protect-home b/projects/js-packages/components/changelog/add-protect-home
new file mode 100644
index 0000000000000..8831cd4d9785a
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-protect-home
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds errorMessage flag to StatCard

From 0b17531f2e99c84dbd736ed9aed7cb5975f4dfbf Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 08:47:24 -0800
Subject: [PATCH 013/143] Add icon labels

---
 .../components/components/stat-card/index.tsx | 23 +++++++-------
 .../src/js/routes/home/home-statcards.jsx     | 30 ++++++++++---------
 .../src/js/routes/home/styles.module.scss     |  4 +++
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index 8917ef4473c51..309d123707e3a 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -36,19 +36,18 @@ const StatCard = ( {
 		<div className={ clsx( className, styles.wrapper, styles[ variant ] ) }>
 			<div className={ clsx( styles.icon ) }>{ icon }</div>
 			<div className={ clsx( styles.info ) }>
-				<Text className={ styles.label }>{ errorMessage ? errorMessage : label }</Text>
-				{ ! errorMessage &&
-					( variant === 'square' ? (
-						<Tooltip text={ formattedValue } placement="top">
-							<Text variant="headline-small" className={ clsx( styles.value ) }>
-								{ compactValue }
-							</Text>
-						</Tooltip>
-					) : (
-						<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-							{ formattedValue }
+				<Text className={ styles.label }>{ label }</Text>
+				{ variant === 'square' ? (
+					<Tooltip text={ formattedValue } placement="top">
+						<Text variant="headline-small" className={ clsx( styles.value ) }>
+							{ errorMessage ? '-' : compactValue }
 						</Text>
-					) ) }
+					</Tooltip>
+				) : (
+					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
+						{ errorMessage ? '-' : formattedValue }
+					</Text>
+				) }
 			</div>
 		</div>
 	);
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 35f59f6ef982e..cbbae2d46c6bd 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -44,7 +44,7 @@ const HomeStatCards = () => {
 	const lastCheckedMessage = useMemo( () => {
 		if ( scanError ) {
 			return __(
-				'A scan error occurred. View your scan report for more detail.',
+				'Please check your connection or try scanning again in a few minutes.',
 				'jetpack-protect'
 			);
 		}
@@ -98,24 +98,26 @@ const HomeStatCards = () => {
 							color={ numThreats ? '#F0B849' : '#069E08' }
 						/>
 					) }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
-						{ __( 'Scanning', 'jetpack-protect' ) }
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+						{ __( 'Scan', 'jetpack-protect' ) }
 					</Text>
 				</span>
 			),
 			label: (
 				<span className={ styles[ 'stat-card-label' ] }>
-					{ sprintf(
-						// translators: %s: "Threats" or "Vulnerabilities"
-						__( '%s found', 'jetpack-protect' ),
-						hasPlan
-							? __( 'Threats', 'jetpack-protect' )
-							: __( 'Vulnerabilities', 'jetpack-protect' )
-					) }
+					{ scanError
+						? __( 'Unable to scan', 'jetpack-protect' )
+						: sprintf(
+								// translators: %s: "Threats" or "Vulnerabilities"
+								__( '%s found', 'jetpack-protect' ),
+								hasPlan
+									? __( 'Threats', 'jetpack-protect' )
+									: __( 'Vulnerabilities', 'jetpack-protect' )
+						  ) }
 				</span>
 			),
 			value: numThreats,
-			errorMessage: scanError ? __( 'Scan error', 'jetpack-protect' ) : null,
+			errorMessage: scanError,
 		} ),
 		[ defaultArgs, scanError, hasPlan, numThreats ]
 	);
@@ -127,7 +129,7 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ renderIcon( isWafModuleEnabled ) }{ ' ' }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
 						{ __( 'Firewall', 'jetpack-protect' ) }
 					</Text>
 				</span>
@@ -149,8 +151,8 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ renderIcon( isBruteForceModuleEnabled ) }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="label">
-						{ __( 'Login protection', 'jetpack-protect' ) }
+					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+						{ __( 'Brute force', 'jetpack-protect' ) }
 					</Text>
 				</span>
 			),
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 66d819889d388..168c9fc75c6dd 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -53,6 +53,10 @@
     }
 }
 
+// .stat-card-label {
+//     white-space: nowrap;
+// }
+
 .stat-card-tooltip {
 	margin-top: 8px;
 	max-width: 240px;

From 3ab4126e1ddd4968aed580f90acc51d0fdc80e69 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 09:10:44 -0800
Subject: [PATCH 014/143] Remove error class

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx | 1 -
 .../plugins/protect/src/js/routes/home/styles.module.scss | 8 --------
 2 files changed, 9 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index cbbae2d46c6bd..ebd97410b1882 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -86,7 +86,6 @@ const HomeStatCards = () => {
 	const scanArgs = useMemo(
 		() => ( {
 			...defaultArgs,
-			className: scanError ? styles.error : styles.active,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ scanError ? (
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 168c9fc75c6dd..e1760b0eb1de4 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -19,10 +19,6 @@
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
     }
 
-    .error {
-        border: 2px solid var( --jp-red-50 );
-    }
-
     .disabled {
         opacity: 0.5;
     }
@@ -53,10 +49,6 @@
     }
 }
 
-// .stat-card-label {
-//     white-space: nowrap;
-// }
-
 .stat-card-tooltip {
 	margin-top: 8px;
 	max-width: 240px;

From 1b12f91664929fecd339bdd56d086b869938f1a7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 12:21:20 -0800
Subject: [PATCH 015/143] Use ToggleControl

---
 .../admin-section-hero/styles.module.scss     |  1 -
 .../alert-icon/stories/index.stories.jsx      |  2 +-
 .../src/js/components/form-toggle/compact.jsx |  8 --
 .../src/js/components/form-toggle/index.jsx   | 68 --------------
 .../form-toggle/stories/index.stories.jsx     | 35 --------
 .../components/form-toggle/styles.module.scss | 89 -------------------
 .../components/seventy-five-layout/index.tsx  |  9 +-
 .../seventy-five-layout/styles.module.scss    | 10 +++
 .../js/routes/firewall/firewall-footer.jsx    | 59 ++++++------
 .../protect/src/js/routes/firewall/index.jsx  | 10 +--
 .../src/js/routes/firewall/styles.module.scss | 65 ++++----------
 .../src/js/routes/home/styles.module.scss     | 25 ------
 12 files changed, 67 insertions(+), 314 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/compact.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/styles.module.scss

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 5881bcd910045..de7018c13b641 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -9,7 +9,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-end;
 }
 
 .heading-icon {
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
index c8d40b156016d..f49ddf4877c46 100644
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
-import Alert from '../index.jsx';
+import Alert from '../index.tsx';
 
 export default {
 	title: 'Plugins/Protect/Alert Icon',
diff --git a/projects/plugins/protect/src/js/components/form-toggle/compact.jsx b/projects/plugins/protect/src/js/components/form-toggle/compact.jsx
deleted file mode 100644
index b72eaf481050e..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/compact.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import FormToggle from '..';
-import styles from './styles.module.scss';
-
-const CompactFormToggle = props => (
-	<FormToggle { ...props } className={ `${ props.className } ${ styles[ 'is-compact' ] }` } />
-);
-
-export default CompactFormToggle;
diff --git a/projects/plugins/protect/src/js/components/form-toggle/index.jsx b/projects/plugins/protect/src/js/components/form-toggle/index.jsx
deleted file mode 100644
index 6caae3daf059b..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback } from 'react';
-import styles from './styles.module.scss';
-
-const FormToggle = ( {
-	ariaLabel,
-	checked = false,
-	className = '',
-	disabled = false,
-	id,
-	onChange = () => {},
-	onKeyDown = () => {},
-	switchClassNames = '',
-	toggling,
-} ) => {
-	const onClick = useCallback(
-		event => {
-			if ( ! disabled ) {
-				onChange( event );
-			}
-		},
-		[ disabled, onChange ]
-	);
-
-	const handleKeyDown = useCallback(
-		event => {
-			if ( disabled ) {
-				return;
-			}
-
-			if ( event.key === 'Enter' || event.key === ' ' ) {
-				event.preventDefault();
-				onChange( event );
-			}
-
-			onKeyDown( event );
-		},
-		[ disabled, onChange, onKeyDown ]
-	);
-
-	return (
-		<>
-			<div>
-				<input
-					className={ `${ styles[ 'form-toggle' ] } ${ className } ${
-						toggling ? styles[ 'is-toggling' ] : ''
-					}` }
-					type="checkbox"
-					checked={ checked }
-					readOnly={ true }
-					disabled={ disabled }
-				/>
-				<span
-					className={ `${ styles[ 'form-toggle__switch' ] } ${ switchClassNames }` }
-					disabled={ disabled }
-					id={ id }
-					onClick={ onClick }
-					onKeyDown={ handleKeyDown }
-					role="checkbox"
-					aria-checked={ checked }
-					aria-label={ ariaLabel }
-					tabIndex={ disabled ? -1 : 0 }
-				/>
-			</div>
-		</>
-	);
-};
-
-export default FormToggle;
diff --git a/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
deleted file mode 100644
index c57b140c37f7f..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import FormToggle from '..';
-
-export default {
-	title: 'Plugins/Protect/FormToggle',
-	component: FormToggle,
-};
-
-const Template = args => {
-	const [ checked, setChecked ] = useState( args.checked );
-
-	const handleChecked = useCallback( () => {
-		setChecked( ! checked );
-	}, [ checked ] );
-
-	return <FormToggle { ...args } checked={ checked } onChange={ handleChecked } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	checked: false,
-	disabled: false,
-};
-
-export const DisabledOff = Template.bind( {} );
-DisabledOff.args = {
-	checked: false,
-	disabled: true,
-};
-
-export const DisabledOn = Template.bind( {} );
-DisabledOn.args = {
-	checked: true,
-	disabled: true,
-};
diff --git a/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss b/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss
deleted file mode 100644
index 1231fbabb44d9..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.form-toggle[type="checkbox"] {
-	display: none;
-}
-
-.form-toggle__switch {
-	position: relative;
-	display: inline-block;
-	border: 2px solid var( --jp-black );
-	border-radius: 100px;
-	box-sizing: border-box;
-	padding: 2px;
-	width: 48px;
-	height: 24px;
-	vertical-align: middle;
-	outline: 0;
-	cursor: pointer;
-	transition: all .4s ease, box-shadow 0s;
-
-	&:after {
-		position: relative;
-		display: block;
-		content: "";
-		width: 16px;
-		height: 16px;
-	}
-	&:after {
-		left: 0;
-		border-radius: 50%;
-		background: var( --jp-black );
-		transition: all .2s ease;
-	}
-}
-
-.form-toggle {
-
-	&:checked {
-
-		& + .form-toggle__switch:after {
-			left: 22px;
-		}
-
-		&:disabled + .form-toggle__switch {
-			border-color: var( --jp-black );
-			background-color: var( --jp-black );
-
-			&:after {
-				background-color: var( --jp-white );
-			}
-		}
-
-		&:not( :disabled ) + .form-toggle__switch {
-			border-color: var( --jp-green );
-			background-color: var( --jp-green );
-
-			&:after {
-				background-color: var( --jp-white );
-			}
-		}
-
-	}
-
-
-	&:disabled {
-		+ span.form-toggle__switch {
-			opacity: 0.25;
-			cursor: default;
-		}
-	}
-}
-
-.form-toggle.is-compact {
-	+ .form-toggle__switch {
-		border-radius: 8px;
-		width: 24px;
-		height: 16px;
-
-		&:after {
-			width: 12px;
-			height: 12px;
-		}
-	}
-	&:checked {
-		+ .form-toggle__switch {
-			&:after {
-				left: 8px;
-			}
-		}
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
index 19ee4309e55a5..25bb45266b898 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
@@ -1,5 +1,6 @@
 import { Container, Col, useBreakpointMatch } from '@automattic/jetpack-components';
 import React from 'react';
+import styles from './styles.module.scss';
 
 // Define the props interface for the SeventyFiveLayout component
 interface SeventyFiveLayoutProps {
@@ -56,11 +57,9 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 		<Container horizontalSpacing={ spacing } horizontalGap={ gap } fluid={ fluid }>
 			{ ! hideSecondarySection && (
 				<>
-					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
-						{ main }
-					</Col>
-					{ isLarge && <Col lg={ 1 } /> }
-					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
+					<Col className={ `${ styles.main } ${ styles[ mainClassName ] }` }>{ main }</Col>
+					{ isLarge && <Col className={ styles.spacer } /> }
+					<Col className={ `${ styles.secondary } ${ styles[ secondaryClassName ] }` }>
 						{ secondary }
 					</Col>
 				</>
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss b/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
index 5405c6e28a9b4..7b4ec532ee1d6 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
@@ -7,7 +7,17 @@
 		grid-column: 1 / span 6;
 	}
 
+	.spacer {
+		grid-column: 7 / span 1;
+	}
+
 	.secondary {
 		grid-column: 8 / span 5;
 	}
 }
+
+// @media ( max-width: 1600px ) {
+// 	.secondary {
+// 		margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+// 	}
+// }
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
index d23055afb14b3..89502158f3467 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -1,8 +1,8 @@
-import { AdminSectionHero, Title, Text, Button } from '@automattic/jetpack-components';
+import { Title, Text, Button, ToggleControl } from '@automattic/jetpack-components';
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
+import AdminSectionHero from '../../components/admin-section-hero';
 import useModal from '../../hooks/use-modal';
 import useNotices from '../../hooks/use-notices';
 import useWafData from '../../hooks/use-waf-data';
@@ -23,7 +23,7 @@ const StandaloneMode = () => {
 	return (
 		<div className={ styles[ 'standalone-mode-section' ] }>
 			<Title>{ __( 'Standalone mode', 'jetpack-protect' ) }</Title>
-			<Text mb={ 2 }>
+			<Text>
 				{ __(
 					'Learn how you can execute the firewall before WordPress initializes. This mode offers the most protection.',
 					'jetpack-protect'
@@ -69,14 +69,15 @@ const ShareDebugData = () => {
 	}, [ jetpackWafShareDebugData ] );
 
 	return (
-		<div className={ styles[ 'share-data-section' ] }>
-			<Title mb={ 2 }>{ __( 'Share detailed data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'footer-checkbox' ] }>
-				<CheckboxControl
+		<div>
+			<Title>{ __( 'Share detailed data with Jetpack', 'jetpack-protect' ) }</Title>
+			<div className={ styles[ 'share-data-section' ] }>
+				<ToggleControl
+					className={ styles[ 'share-data-toggle' ] }
 					checked={ Boolean( settings.jetpack_waf_share_debug_data ) }
 					onChange={ handleShareDebugDataChange }
 					disabled={ isUpdating }
-					__nextHasNoMarginBottom={ true }
+					size="small"
 				/>
 				<Text>
 					{ __(
@@ -114,14 +115,15 @@ const ShareData = () => {
 	}, [ jetpackWafShareData ] );
 
 	return (
-		<div className={ styles[ 'share-data-section' ] }>
-			<Title mb={ 2 }>{ __( 'Share basic data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'footer-checkbox' ] }>
-				<CheckboxControl
+		<div>
+			<Title>{ __( 'Share basic data with Jetpack', 'jetpack-protect' ) }</Title>
+			<div className={ styles[ 'share-data-section' ] }>
+				<ToggleControl
+					className={ styles[ 'share-data-toggle' ] }
 					checked={ Boolean( settings.jetpack_waf_share_data ) }
 					onChange={ handleShareDataChange }
 					disabled={ isUpdating }
-					__nextHasNoMarginBottom={ true }
+					size="small"
 				/>
 				<Text>
 					{ __(
@@ -138,20 +140,23 @@ const FirewallFooter = () => {
 	const { isEnabled } = useWafData();
 
 	return (
-		<AdminSectionHero>
-			<SeventyFiveLayout
-				main={ <StandaloneMode /> }
-				secondary={
-					isEnabled && (
-						<>
-							<ShareData />
-							<ShareDebugData />
-						</>
-					)
-				}
-				preserveSecondaryOnMobile={ true }
-			/>
-		</AdminSectionHero>
+		<AdminSectionHero
+			spacing={ 7 }
+			main={
+				<div className={ styles[ 'footer-main' ] }>
+					<StandaloneMode />
+				</div>
+			}
+			secondary={
+				isEnabled && (
+					<div className={ styles[ 'footer-secondary' ] }>
+						<ShareData />
+						<ShareDebugData />
+					</div>
+				)
+			}
+			preserveSecondaryOnMobile={ true }
+		/>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 53af919b17f78..777913774ce76 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -5,6 +5,7 @@ import {
 	Text,
 	ContextualUpgradeTrigger,
 	useBreakpointMatch,
+	ToggleControl,
 	Notice as JetpackNotice,
 } from '@automattic/jetpack-components';
 import { Popover } from '@wordpress/components';
@@ -14,7 +15,6 @@ import { Icon, closeSmall } from '@wordpress/icons';
 import moment from 'moment';
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import AdminPage from '../../components/admin-page';
-import FormToggle from '../../components/form-toggle';
 import Textarea from '../../components/textarea';
 import { FREE_PLUGIN_SUPPORT_URL, PAID_PLUGIN_SUPPORT_URL } from '../../constants';
 import useWafSeenMutation from '../../data/waf/use-waf-seen-mutation';
@@ -283,7 +283,7 @@ const FirewallPage = () => {
 				}` }
 			>
 				<div className={ styles[ 'toggle-section__control' ] }>
-					<FormToggle
+					<ToggleControl
 						checked={ canToggleAutomaticRules ? jetpackWafAutomaticRules : false }
 						onChange={ withFormState( handleAutomaticRulesChange ) }
 						disabled={ ! canEditFirewallSettings || ! canToggleAutomaticRules || isUpdating }
@@ -416,7 +416,7 @@ const FirewallPage = () => {
 	const bruteForceProtectionSettings = (
 		<div className={ styles[ 'toggle-section' ] }>
 			<div className={ styles[ 'toggle-section__control' ] }>
-				<FormToggle
+				<ToggleControl
 					id="brute_force_protection"
 					checked={ isBruteForceModuleEnabled }
 					onChange={ withFormState( toggleBruteForceProtection ) }
@@ -444,7 +444,7 @@ const FirewallPage = () => {
 			}` }
 		>
 			<div className={ styles[ 'toggle-section__control' ] }>
-				<FormToggle
+				<ToggleControl
 					id="jetpack_waf_ip_block_list_enabled"
 					checked={ ipBlockListEnabled }
 					onChange={ withFormState( toggleIpBlockList ) }
@@ -500,7 +500,7 @@ const FirewallPage = () => {
 		<>
 			<div className={ styles[ 'toggle-section' ] }>
 				<div className={ styles[ 'toggle-section__control' ] }>
-					<FormToggle
+					<ToggleControl
 						id="jetpack_waf_ip_allow_list_enabled"
 						checked={ jetpackWafIpAllowListEnabled }
 						onChange={ toggleIpAllowList }
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index c0350ff100e6b..d5ba00b97846e 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -147,8 +147,6 @@
 
 .stat-card-wrapper {
     display: flex;
-    margin-left: auto;
-    flex-wrap: wrap;
 
     >:first-child {
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
@@ -171,51 +169,6 @@
     white-space: nowrap;
 }
 
-@media ( max-width: 1115px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-    }
-}
-
-@media ( max-width: 599px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-
-        >:first-child {
-            margin-right: 0;
-            margin-bottom: var( --spacing-base ); // 8px
-        }
-    }
-
-    .stat-card-icon {
-        margin-bottom: 0;
-    }
-}
-
-.footer-checkbox {
-    display: flex;
-    align-items: center;
-
-    & input[type=checkbox]:checked {
-        background: var( --jp-green-40 );
-        border-color: var( --jp-green-40 );
-    }
-
-    & input[type=checkbox]:indeterminate {
-        background: var( --jp-green-40 );
-        border-color: var( --jp-green-40 );
-    }
-
-    & input[type=checkbox]:focus {
-        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --jp-green-40 );
-    } 
-}
-
-.standalone-mode-section, .share-data-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
-}
-
 .icon-tooltip {
     max-height: 20px;
     margin-left: calc( var( --spacing-base ) / 2 ); // 4px
@@ -231,9 +184,21 @@
     }
 }
 
-@media ( max-width: 599px ) {
+.footer-main {
+    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.footer-secondary {
+    display: flex;
+    gap: calc( var( --spacing-base ) * 7 ); // 56px
+    flex-direction: column;
+}
+
+.share-data-section {
+    display: flex;
 
-    .share-data-section {
-        margin-top: 0;
+    .share-data-toggle {
+        margin-top: calc( var( --spacing-base ) / 2 ); // 4px
+        margin-right: var( --spacing-base ); // 8px
     }
 }
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index e1760b0eb1de4..a586a921df576 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -13,7 +13,6 @@
 
 .stat-cards-wrapper {
     display: flex;
-    margin-left: auto;
 
     > *:not( last-child ) {
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
@@ -54,28 +53,4 @@
 	max-width: 240px;
 	border-radius: 4px;
 	text-align: left;
-}
-
-@media ( max-width: 1115px ) {
-    .stat-cards-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-        flex-wrap: wrap;
-
-    }
-}
-
-@media ( max-width: 599px ) {
-    .stat-cards-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-        flex-wrap: wrap;
-
-        > *:not( last-child ) {
-            margin-right: 0;
-            margin-bottom: var( --spacing-base ); // 8px
-        }
-    }
-
-    .stat-card-icon {
-        margin-bottom: 0;
-    }
 }
\ No newline at end of file

From b42565691fe973e8af7ab60642269de42f3c404e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 12:21:35 -0800
Subject: [PATCH 016/143] Remove imports

---
 .../plugins/protect/src/js/routes/firewall/firewall-footer.jsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
index 89502158f3467..661a72684c376 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -1,5 +1,4 @@
 import { Title, Text, Button, ToggleControl } from '@automattic/jetpack-components';
-import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';

From 93295fee61353efe26680fa5c5546bdc2655e33d Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 13:14:17 -0800
Subject: [PATCH 017/143] Improve responsiveness of header and stat cards

---
 .../components/admin-section-hero/index.tsx   |  8 +++--
 .../admin-section-hero/styles.module.scss     | 13 --------
 .../components/seventy-five-layout/index.tsx  |  9 +++---
 .../seventy-five-layout/styles.module.scss    | 23 --------------
 .../firewall/firewall-admin-section-hero.tsx  |  3 ++
 .../js/routes/firewall/firewall-statcards.jsx |  2 +-
 .../src/js/routes/firewall/styles.module.scss | 27 ++++++++++++++++-
 .../routes/home/home-admin-section-hero.tsx   |  2 ++
 .../src/js/routes/home/home-statcards.jsx     | 30 +++++++++++--------
 .../src/js/routes/home/styles.module.scss     | 25 ++++++++++++++++
 10 files changed, 86 insertions(+), 56 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ed83bebc8638..037e46add3714 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -9,7 +9,9 @@ import styles from './styles.module.scss';
 
 interface AdminSectionHeroProps {
 	main: React.ReactNode;
+	mainClassName?: string;
 	secondary?: React.ReactNode;
+	secondaryClassName?: string;
 	preserveSecondaryOnMobile?: boolean;
 	spacing?: number;
 }
@@ -21,7 +23,9 @@ interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
 
 const AdminSectionHero: AdminSectionHeroComponent = ( {
 	main,
+	mainClassName,
 	secondary,
+	secondaryClassName,
 	preserveSecondaryOnMobile = true,
 	spacing = 7,
 } ) => {
@@ -32,9 +36,9 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 				spacing={ spacing }
 				gap={ 0 }
 				main={ main }
-				mainClassName={ styles[ 'header-main' ] }
+				mainClassName={ mainClassName }
 				secondary={ secondary }
-				secondaryClassName={ styles[ 'header-secondary' ] }
+				secondaryClassName={ secondaryClassName }
 				preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
 				fluid={ false }
 			/>
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index de7018c13b641..23c0fa7b6f6dd 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -1,16 +1,3 @@
-.header-main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.header-secondary {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
 .heading-icon {
     margin-left: var( --spacing-base ); // 8px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
index 25bb45266b898..19ee4309e55a5 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
@@ -1,6 +1,5 @@
 import { Container, Col, useBreakpointMatch } from '@automattic/jetpack-components';
 import React from 'react';
-import styles from './styles.module.scss';
 
 // Define the props interface for the SeventyFiveLayout component
 interface SeventyFiveLayoutProps {
@@ -57,9 +56,11 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 		<Container horizontalSpacing={ spacing } horizontalGap={ gap } fluid={ fluid }>
 			{ ! hideSecondarySection && (
 				<>
-					<Col className={ `${ styles.main } ${ styles[ mainClassName ] }` }>{ main }</Col>
-					{ isLarge && <Col className={ styles.spacer } /> }
-					<Col className={ `${ styles.secondary } ${ styles[ secondaryClassName ] }` }>
+					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
+						{ main }
+					</Col>
+					{ isLarge && <Col lg={ 1 } /> }
+					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
 						{ secondary }
 					</Col>
 				</>
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss b/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
deleted file mode 100644
index 7b4ec532ee1d6..0000000000000
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// seventy-five layout
-// Handle large lg size from here,
-// adding a gap on one column
-// in between main and secondary sections.
-@media ( min-width: 960px ) {
-	.main {
-		grid-column: 1 / span 6;
-	}
-
-	.spacer {
-		grid-column: 7 / span 1;
-	}
-
-	.secondary {
-		grid-column: 8 / span 5;
-	}
-}
-
-// @media ( max-width: 1600px ) {
-// 	.secondary {
-// 		margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-// 	}
-// }
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index 3f70a75509b76..bc6c87002e849 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -5,6 +5,7 @@ import AdminSectionHero from '../../components/admin-section-hero';
 import useWafData from '../../hooks/use-waf-data';
 import FirewallStatCards from './firewall-statcards';
 import FirewallSubheading from './firewall-subheading';
+import styles from './styles.module.scss';
 
 const FirewallAdminSectionHero = () => {
 	const {
@@ -85,6 +86,7 @@ const FirewallAdminSectionHero = () => {
 
 	return (
 		<AdminSectionHero
+			mainClassName={ styles[ 'home-header-main' ] }
 			main={
 				<>
 					<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } />
@@ -92,6 +94,7 @@ const FirewallAdminSectionHero = () => {
 					<AdminSectionHero.Subheading>{ subheading }</AdminSectionHero.Subheading>
 				</>
 			}
+			secondaryClassName={ styles[ 'home-header-main' ] }
 			secondary={ wafSupported && <FirewallStatCards /> }
 		/>
 	);
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
index 3b69d4e8afe0d..7b1fd7cbbbede 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
@@ -87,7 +87,7 @@ const FirewallStatCards = () => {
 	);
 
 	return (
-		<div className={ styles[ 'stat-card-wrapper' ] }>
+		<div className={ styles[ 'stat-cards-wrapper' ] }>
 			<StatCard { ...currentDayArgs } />
 			<StatCard { ...thirtyDaysArgs } />
 		</div>
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index d5ba00b97846e..b9f2342d1a8c7 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -145,7 +145,7 @@
     align-items: center;
 }
 
-.stat-card-wrapper {
+.stat-cards-wrapper {
     display: flex;
 
     >:first-child {
@@ -202,3 +202,28 @@
         margin-right: var( --spacing-base ); // 8px
     }
 }
+
+@media ( max-width: 1200px ) {
+    .stat-cards-wrapper {
+        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+    }
+    
+    .home-header-main {
+        grid-column: 1 / -1;
+    }
+
+    .home-header-secondary {
+        grid-column: 1 / -1;
+    }
+}
+
+@media ( max-width: 599px ) {
+    .stat-cards-wrapper {
+        flex-direction: column;
+        gap: var( --spacing-base ); // 8px
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
index c9bc1b628f9cc..b41f9ab76a789 100644
--- a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -16,6 +16,7 @@ const HomeAdminSectionHero: React.FC = () => {
 
 	return (
 		<AdminSectionHero
+			mainClassName={ styles[ 'home-header-main' ] }
 			main={
 				<>
 					<AdminSectionHero.Heading>
@@ -47,6 +48,7 @@ const HomeAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Subheading>
 				</>
 			}
+			secondaryClassName={ styles[ 'home-header-secondary' ] }
 			secondary={ <HomeStatCards /> }
 		/>
 	);
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index ebd97410b1882..331d583035bbf 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -97,9 +97,11 @@ const HomeStatCards = () => {
 							color={ numThreats ? '#F0B849' : '#069E08' }
 						/>
 					) }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
-						{ __( 'Scan', 'jetpack-protect' ) }
-					</Text>
+					{ ! isSmall && (
+						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+							{ __( 'Scan', 'jetpack-protect' ) }
+						</Text>
+					) }
 				</span>
 			),
 			label: (
@@ -118,7 +120,7 @@ const HomeStatCards = () => {
 			value: numThreats,
 			errorMessage: scanError,
 		} ),
-		[ defaultArgs, scanError, hasPlan, numThreats ]
+		[ defaultArgs, scanError, hasPlan, isSmall, numThreats ]
 	);
 
 	const wafArgs = useMemo(
@@ -128,9 +130,11 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ renderIcon( isWafModuleEnabled ) }{ ' ' }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
-						{ __( 'Firewall', 'jetpack-protect' ) }
-					</Text>
+					{ ! isSmall && (
+						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+							{ __( 'Firewall', 'jetpack-protect' ) }
+						</Text>
+					) }
 				</span>
 			),
 			label: (
@@ -140,7 +144,7 @@ const HomeStatCards = () => {
 			),
 			value: allTimeBlockCount,
 		} ),
-		[ defaultArgs, isWafModuleEnabled, allTimeBlockCount ]
+		[ defaultArgs, isWafModuleEnabled, isSmall, allTimeBlockCount ]
 	);
 
 	const bruteForceArgs = useMemo(
@@ -150,9 +154,11 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ renderIcon( isBruteForceModuleEnabled ) }
-					<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
-						{ __( 'Brute force', 'jetpack-protect' ) }
-					</Text>
+					{ ! isSmall && (
+						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+							{ __( 'Brute force', 'jetpack-protect' ) }
+						</Text>
+					) }
 				</span>
 			),
 			label: (
@@ -162,7 +168,7 @@ const HomeStatCards = () => {
 			),
 			value: blockedLoginsCount,
 		} ),
-		[ defaultArgs, isBruteForceModuleEnabled, blockedLoginsCount ]
+		[ defaultArgs, isBruteForceModuleEnabled, isSmall, blockedLoginsCount ]
 	);
 
 	return (
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index a586a921df576..57610447a7aeb 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -53,4 +53,29 @@
 	max-width: 240px;
 	border-radius: 4px;
 	text-align: left;
+}
+
+@media ( max-width: 1600px ) {
+    .stat-cards-wrapper {
+        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+    }
+    
+    .home-header-main {
+        grid-column: 1 / -1;
+    }
+
+    .home-header-secondary {
+        grid-column: 1 / -1;
+    }
+}
+
+@media ( max-width: 599px ) {
+    .stat-cards-wrapper {
+        flex-direction: column;
+        gap: var( --spacing-base ); // 8px
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
 }
\ No newline at end of file

From 5ab6db34ad20dfeaa36cc58b324aea80873f9073 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 13:21:01 -0800
Subject: [PATCH 018/143] Fix subheading text wrap

---
 .../plugins/protect/src/js/routes/home/styles.module.scss     | 4 ----
 .../plugins/protect/src/js/routes/scan/styles.module.scss     | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 57610447a7aeb..7df39046caa25 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -1,7 +1,3 @@
-.subheading-text {
-	white-space: nowrap;
-}
-
 .product-section, .info-section {
 	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
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 20b378d0d75e0..4985320e826cf 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,7 +1,3 @@
-.subheading-text {
-	white-space: nowrap;
-}
-
 .product-section, .info-section {
 	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px

From c636037d3372630f7fb44f4ba664c03f83fad3a5 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 13:36:22 -0800
Subject: [PATCH 019/143] Add StatCard error flag

---
 .../js-packages/components/components/stat-card/index.tsx   | 6 +++---
 .../js-packages/components/components/stat-card/types.ts    | 4 ++--
 .../plugins/protect/src/js/routes/home/home-statcards.jsx   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index 309d123707e3a..310b79068d750 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -24,7 +24,7 @@ const StatCard = ( {
 	label,
 	value,
 	variant = 'square',
-	errorMessage,
+	error,
 }: StatCardProps ) => {
 	const formattedValue = numberFormat( value );
 	const compactValue = numberFormat( value, {
@@ -40,12 +40,12 @@ const StatCard = ( {
 				{ variant === 'square' ? (
 					<Tooltip text={ formattedValue } placement="top">
 						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ errorMessage ? '-' : compactValue }
+							{ error ? '-' : compactValue }
 						</Text>
 					</Tooltip>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-						{ errorMessage ? '-' : formattedValue }
+						{ error ? '-' : formattedValue }
 					</Text>
 				) }
 			</div>
diff --git a/projects/js-packages/components/components/stat-card/types.ts b/projects/js-packages/components/components/stat-card/types.ts
index d976781550de3..ccc80df000e14 100644
--- a/projects/js-packages/components/components/stat-card/types.ts
+++ b/projects/js-packages/components/components/stat-card/types.ts
@@ -27,7 +27,7 @@ export type StatCardProps = {
 	variant?: 'square' | 'horizontal';
 
 	/**
-	 * The error message to be displayed.
+	 * Whether the stat card represents an error.
 	 */
-	errorMessage?: string;
+	error?: boolean;
 };
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 331d583035bbf..64d4f0766d9db 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -118,7 +118,7 @@ const HomeStatCards = () => {
 				</span>
 			),
 			value: numThreats,
-			errorMessage: scanError,
+			error: scanError ? true : false,
 		} ),
 		[ defaultArgs, scanError, hasPlan, isSmall, numThreats ]
 	);

From 3c928b245ac601abcdf18cca80fcda8764812bc3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 14:37:03 -0800
Subject: [PATCH 020/143] Fix WAF settings toggles

---
 .../components/seventy-five-layout/index.tsx  |  3 +-
 .../protect/src/js/routes/firewall/index.jsx  | 28 ++-----------------
 .../src/js/routes/home/styles.module.scss     |  2 +-
 3 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
index 19ee4309e55a5..4dfb1fdb2f266 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
@@ -43,7 +43,7 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 	fluid,
 } ) => {
 	// Ensure the correct typing for useBreakpointMatch
-	const [ isSmall, isLarge ] = useBreakpointMatch( [ 'sm', 'lg' ] );
+	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ] );
 
 	/*
 	 * By convention, secondary section is not shown when:
@@ -59,7 +59,6 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
 						{ main }
 					</Col>
-					{ isLarge && <Col lg={ 1 } /> }
 					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
 						{ secondary }
 					</Col>
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 777913774ce76..990fef6344d5a 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -116,24 +116,6 @@ const FirewallPage = () => {
 		[ formState ]
 	);
 
-	/**
-	 * Returns an event listener that syncs the target input's value with form state, before calling a callback.
-	 *
-	 * @param {*} callback - The function to call with the input's value.
-	 * @return {Function} - Event listener
-	 */
-	const withFormState = callback => {
-		return event => {
-			const { id, value, ariaChecked } = event.target;
-			const inputValue = ariaChecked ? ariaChecked !== 'true' : value;
-			setFormState( prevState => ( {
-				...prevState,
-				[ id ]: inputValue,
-			} ) );
-			return callback( inputValue );
-		};
-	};
-
 	/**
 	 * Handle Automatic Rules Change
 	 *
@@ -285,7 +267,7 @@ const FirewallPage = () => {
 				<div className={ styles[ 'toggle-section__control' ] }>
 					<ToggleControl
 						checked={ canToggleAutomaticRules ? jetpackWafAutomaticRules : false }
-						onChange={ withFormState( handleAutomaticRulesChange ) }
+						onChange={ handleAutomaticRulesChange }
 						disabled={ ! canEditFirewallSettings || ! canToggleAutomaticRules || isUpdating }
 					/>
 					{ hasPlan && upgradeIsSeen === false && (
@@ -417,9 +399,8 @@ const FirewallPage = () => {
 		<div className={ styles[ 'toggle-section' ] }>
 			<div className={ styles[ 'toggle-section__control' ] }>
 				<ToggleControl
-					id="brute_force_protection"
 					checked={ isBruteForceModuleEnabled }
-					onChange={ withFormState( toggleBruteForceProtection ) }
+					onChange={ toggleBruteForceProtection }
 					disabled={ isUpdating }
 				/>
 			</div>
@@ -445,9 +426,8 @@ const FirewallPage = () => {
 		>
 			<div className={ styles[ 'toggle-section__control' ] }>
 				<ToggleControl
-					id="jetpack_waf_ip_block_list_enabled"
 					checked={ ipBlockListEnabled }
-					onChange={ withFormState( toggleIpBlockList ) }
+					onChange={ toggleIpBlockList }
 					disabled={ ! canEditFirewallSettings }
 				/>
 			</div>
@@ -464,7 +444,6 @@ const FirewallPage = () => {
 				{ ( ipBlockListEnabled || ipBlockListHasContent ) && (
 					<div className={ styles[ 'manual-rules-section' ] }>
 						<Textarea
-							id="jetpack_waf_ip_block_list"
 							placeholder={ __( 'Example:', 'jetpack-protect' ) + '\n12.12.12.1\n12.12.12.2' }
 							rows={ 3 }
 							value={ formState.jetpack_waf_ip_block_list }
@@ -501,7 +480,6 @@ const FirewallPage = () => {
 			<div className={ styles[ 'toggle-section' ] }>
 				<div className={ styles[ 'toggle-section__control' ] }>
 					<ToggleControl
-						id="jetpack_waf_ip_allow_list_enabled"
 						checked={ jetpackWafIpAllowListEnabled }
 						onChange={ toggleIpAllowList }
 						disabled={ isUpdating }
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 7df39046caa25..37c0199cc4afc 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -51,7 +51,7 @@
 	text-align: left;
 }
 
-@media ( max-width: 1600px ) {
+@media ( max-width: 1400px ) {
     .stat-cards-wrapper {
         margin-top: calc( var( --spacing-base ) * 4 ); // 32px
     }

From 4a870d1c7491e822f8f2320d18b6dc13456e15d4 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 14:41:05 -0800
Subject: [PATCH 021/143] Optimizations

---
 .../protect/src/js/routes/home/home-statcards.jsx        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 64d4f0766d9db..3fa454017d0d6 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -38,7 +38,10 @@ const HomeStatCards = () => {
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
 		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+		lastCheckedLocalTimestamp = dateI18n(
+			'F jS g:i A',
+			new Date( lastChecked + ' UTC' ).getTime()
+		);
 	}
 
 	const lastCheckedMessage = useMemo( () => {
@@ -57,7 +60,7 @@ const HomeStatCards = () => {
 			return sprintf(
 				// translators: %1$s: date/time, %2$d: number, %3$s: entity label
 				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
-				dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp ),
+				lastCheckedLocalTimestamp,
 				numThreats,
 				entityLabel
 			);
@@ -65,7 +68,7 @@ const HomeStatCards = () => {
 		return sprintf(
 			// translators: %s: date/time
 			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
-			dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp )
+			lastCheckedLocalTimestamp
 		);
 	}, [ scanError, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
 

From 2eb89b4697d426875d2a8a12396d202bcd94267a Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 15:29:07 -0800
Subject: [PATCH 022/143] Centralize localTimestamp

---
 .../src/js/hooks/use-protect-data/index.ts    |  10 ++
 .../protect/src/js/routes/firewall/index.jsx  |   3 +-
 .../src/js/routes/firewall/styles.module.scss |   8 +-
 .../src/js/routes/home/home-statcards.jsx     |  40 ++---
 .../src/js/routes/home/styles.module.scss     |   1 +
 .../src/js/routes/scan/history/index.jsx      |   2 -
 .../protect/src/js/routes/scan/index.jsx      |   2 -
 .../routes/scan/scan-admin-section-hero.tsx   |  11 +-
 .../src/js/routes/scan/scan-footer.jsx        | 143 ------------------
 9 files changed, 41 insertions(+), 179 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/scan-footer.jsx

diff --git a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
index d560cff20ef86..6a7391d3e3be8 100644
--- a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
+++ b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
@@ -1,3 +1,4 @@
+import { dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import useHistoryQuery from '../../data/scan/use-history-query';
@@ -163,11 +164,20 @@ export default function useProtectData(
 		return result;
 	}, [ scanHistory, sourceType, status, filter ] );
 
+	const lastCheckedLocalTimestamp = useMemo( () => {
+		if ( lastChecked ) {
+			// Convert the lastChecked UTC date to a local timestamp
+			return dateI18n( 'F jS g:i A', new Date( lastChecked + ' UTC' ) );
+		}
+		return null;
+	}, [ lastChecked ] );
+
 	return {
 		results,
 		counts,
 		error,
 		lastChecked,
+		lastCheckedLocalTimestamp,
 		hasUncheckedItems,
 		jetpackScan,
 	};
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 990fef6344d5a..1c77f4f5f6b57 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -22,7 +22,6 @@ import useWafUpgradeSeenMutation from '../../data/waf/use-waf-upgrade-seen-mutat
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
-import ScanFooter from '../scan/scan-footer';
 import FirewallAdminSectionHero from './firewall-admin-section-hero';
 import FirewallFooter from './firewall-footer';
 import styles from './styles.module.scss';
@@ -575,7 +574,7 @@ const FirewallPage = () => {
 					</div>
 				</Col>
 			</Container>
-			{ wafSupported ? <FirewallFooter /> : <ScanFooter /> }
+			{ wafSupported && <FirewallFooter /> }
 		</AdminPage>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index b9f2342d1a8c7..9a49ddf73d0cb 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -147,6 +147,7 @@
 
 .stat-cards-wrapper {
     display: flex;
+    justify-content: flex-end;
 
     >:first-child {
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
@@ -206,6 +207,7 @@
 @media ( max-width: 1200px ) {
     .stat-cards-wrapper {
         margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+        justify-content: flex-start;
     }
     
     .home-header-main {
@@ -217,7 +219,7 @@
     }
 }
 
-@media ( max-width: 599px ) {
+@media ( min-width: 599px ) {
     .stat-cards-wrapper {
         flex-direction: column;
         gap: var( --spacing-base ); // 8px
@@ -226,4 +228,8 @@
     .stat-card-icon {
         margin-bottom: 0;
     }
+
+    .footer-main {
+        margin-right: calc( var( --spacing-base ) * 4 ); // 32px
+    }
 }
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 3fa454017d0d6..847e0e12cd596 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,6 +1,5 @@
 import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
-import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import Alert from '../../components/alert-icon';
@@ -21,7 +20,7 @@ const HomeStatCards = () => {
 		counts: {
 			current: { threats: numThreats },
 		},
-		lastChecked,
+		lastCheckedLocalTimestamp,
 		error: scanError,
 	} = useProtectData();
 
@@ -35,15 +34,6 @@ const HomeStatCards = () => {
 	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
 	const { blockedLogins: blockedLoginsCount } = stats;
 
-	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
-		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = dateI18n(
-			'F jS g:i A',
-			new Date( lastChecked + ' UTC' ).getTime()
-		);
-	}
-
 	const lastCheckedMessage = useMemo( () => {
 		if ( scanError ) {
 			return __(
@@ -56,19 +46,29 @@ const HomeStatCards = () => {
 			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
 
-		if ( numThreats > 0 ) {
+		if ( lastCheckedLocalTimestamp ) {
+			if ( numThreats > 0 ) {
+				return sprintf(
+					// translators: %1$s: date/time, %2$d: number, %3$s: entity label
+					__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
+					lastCheckedLocalTimestamp,
+					numThreats,
+					entityLabel
+				);
+			}
 			return sprintf(
-				// translators: %1$s: date/time, %2$d: number, %3$s: entity label
-				__( 'Last checked on %1$s: We found %2$d %3$s.', 'jetpack-protect' ),
-				lastCheckedLocalTimestamp,
-				numThreats,
-				entityLabel
+				// translators: %s: date/time
+				__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
+				lastCheckedLocalTimestamp
 			);
 		}
+
 		return sprintf(
-			// translators: %s: date/time
-			__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
-			lastCheckedLocalTimestamp
+			// translators: %1$s: date/time, %2$d: number, %3$s: entity label
+			__( 'Last scan we found %2$d %3$s.', 'jetpack-protect' ),
+			lastCheckedLocalTimestamp,
+			numThreats,
+			entityLabel
 		);
 	}, [ scanError, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
 
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 37c0199cc4afc..5aa90150f5ed0 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -9,6 +9,7 @@
 
 .stat-cards-wrapper {
     display: flex;
+    justify-content: flex-start;
 
     > *:not( last-child ) {
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
index 723f9de9ab230..d0c8a53bb6c99 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
@@ -10,7 +10,6 @@ import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useAnalyticsTracks from '../../../hooks/use-analytics-tracks';
 import usePlan from '../../../hooks/use-plan';
 import useProtectData from '../../../hooks/use-protect-data';
-import ScanFooter from '../scan-footer';
 import HistoryAdminSectionHero from './history-admin-section-hero';
 import StatusFilters from './status-filters';
 import styles from './styles.module.scss';
@@ -293,7 +292,6 @@ const ScanHistoryRoute = () => {
 					</Container>
 				</AdminSection>
 			) }
-			<ScanFooter />
 		</AdminPage>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
index 1f3cdfdd7520f..e52625ed1f0dc 100644
--- a/projects/plugins/protect/src/js/routes/scan/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -8,7 +8,6 @@ import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import onboardingSteps from './onboarding-steps';
 import ScanAdminSectionHero from './scan-admin-section-hero';
-import ScanFooter from './scan-footer';
 
 /**
  * Scan Page
@@ -58,7 +57,6 @@ const ScanPage = () => {
 						</Container>
 					</AdminSection>
 				) }
-				<ScanFooter />
 			</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
index abfe93078a487..bf894b93bb95d 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
@@ -1,5 +1,4 @@
 import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
-import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
 import { useMemo } from 'react';
@@ -20,7 +19,7 @@ const ScanAdminSectionHero: React.FC = () => {
 		counts: {
 			current: { threats: numThreats },
 		},
-		lastChecked,
+		lastCheckedLocalTimestamp,
 	} = useProtectData();
 	const { hasPlan } = usePlan();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
@@ -45,12 +44,6 @@ const ScanAdminSectionHero: React.FC = () => {
 
 	const scanning = isScanInProgress( status );
 
-	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
-		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
-	}
-
 	const handleShowAutoFixersClick = threatList => {
 		return event => {
 			event.preventDefault();
@@ -84,7 +77,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							? sprintf(
 									// translators: %s: date and time of the last scan
 									__( '%s results', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+									lastCheckedLocalTimestamp
 							  )
 							: __( 'Most recent results', 'jetpack-protect' ) }
 					</Text>
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx b/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
deleted file mode 100644
index 56d7ea1c14a7d..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-	Text,
-	Button,
-	Title,
-	getRedirectUrl,
-	ContextualUpgradeTrigger,
-	Col,
-	Container,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useWafData from '../../hooks/use-waf-data';
-import styles from './styles.module.scss';
-
-const ProductPromotion = () => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { hasPlan, upgradePlan } = usePlan();
-	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_footer_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	if ( hasPlan ) {
-		const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
-
-		return (
-			<div className={ styles[ 'product-section' ] }>
-				<Title>{ __( 'Get access to our Cloud', 'jetpack-protect' ) }</Title>
-				<Text mb={ 3 }>
-					{ __(
-						'With your Protect upgrade, you have free access to scan your site on our Cloud, so you can be aware and fix your threats even if your site goes down.',
-						'jetpack-protect'
-					) }
-				</Text>
-
-				<Button variant="secondary" weight="regular" href={ goToCloudUrl }>
-					{ __( 'Go to Cloud', 'jetpack-protect' ) }
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<div className={ styles[ 'product-section' ] }>
-			<Title>{ __( 'Advanced scan results', 'jetpack-protect' ) }</Title>
-			<Text mb={ 3 }>
-				{ __(
-					'Upgrade Jetpack Protect to get advanced scan tools, including one-click fixes for most threats and malware scanning.',
-					'jetpack-protect'
-				) }
-			</Text>
-
-			<ContextualUpgradeTrigger
-				description={ __(
-					'Looking for advanced scan results and one-click fixes?',
-					'jetpack-protect'
-				) }
-				cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-				onClick={ getScan }
-			/>
-		</div>
-	);
-};
-
-const FooterInfo = () => {
-	const { hasPlan } = usePlan();
-	const { globalStats } = useWafData();
-	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
-	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
-		? '50,000'
-		: totalVulnerabilities.toLocaleString();
-
-	if ( hasPlan ) {
-		const learnMoreScanUrl = getRedirectUrl( 'protect-footer-learn-more-scan' );
-
-		return (
-			<div className={ styles[ 'info-section' ] }>
-				<Title>{ __( 'Line-by-line scanning', 'jetpack-protect' ) }</Title>
-				<Text mb={ 2 }>
-					{ __(
-						'We actively review line-by-line of your site files to identify threats and vulnerabilities. Jetpack monitors millions of websites to keep your site secure all the time.',
-						'jetpack-protect'
-					) }{ ' ' }
-					<Button variant="link" target="_blank" weight="regular" href={ learnMoreScanUrl }>
-						{ __( 'Learn more', 'jetpack-protect' ) }
-					</Button>
-				</Text>
-			</div>
-		);
-	}
-
-	const learnMoreProtectUrl = getRedirectUrl( 'jetpack-protect-footer-learn-more' );
-
-	return (
-		<div className={ styles[ 'info-section' ] }>
-			<Title>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__( 'Over %s listed vulnerabilities', 'jetpack-protect' ),
-					totalVulnerabilitiesFormatted
-				) }
-			</Title>
-			<Text mb={ 3 }>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__(
-						'Every day we check your plugin, theme, and WordPress versions against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-						'jetpack-protect'
-					),
-					totalVulnerabilitiesFormatted
-				) }
-			</Text>
-
-			<Button variant="link" isExternalLink={ true } href={ learnMoreProtectUrl } weight="regular">
-				{ __( 'Learn more', 'jetpack-protect' ) }
-			</Button>
-		</div>
-	);
-};
-
-const ScanFooter = () => {
-	const { waf } = window.jetpackProtectInitialState || {};
-	return waf.wafSupported ? (
-		<SeventyFiveLayout
-			main={ <ProductPromotion /> }
-			secondary={ <FooterInfo /> }
-			preserveSecondaryOnMobile={ true }
-		/>
-	) : (
-		<Container horizontalSpacing={ 0 } horizontalGap={ 0 } fluid={ false }>
-			<Col>
-				<FooterInfo />
-			</Col>
-		</Container>
-	);
-};
-
-export default ScanFooter;

From 621b15cd3348270f53053463756bebbfe4a357ff Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 15:48:02 -0800
Subject: [PATCH 023/143] Add scanning card state

---
 .../src/js/routes/home/home-statcards.jsx     | 77 ++++++++++++-------
 .../src/js/routes/home/styles.module.scss     |  4 +
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 847e0e12cd596..aaba3ede38c93 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,9 +1,10 @@
 import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
-import { Tooltip } from '@wordpress/components';
+import { Spinner, Tooltip } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import Alert from '../../components/alert-icon';
 import ProtectCheck from '../../components/protect-check-icon';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
@@ -31,6 +32,9 @@ const HomeStatCards = () => {
 		stats,
 	} = useWafData();
 
+	const { data: status } = useScanStatusQuery();
+	const scanning = isScanInProgress( status );
+
 	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
 	const { blockedLogins: blockedLoginsCount } = stats;
 
@@ -42,6 +46,10 @@ const HomeStatCards = () => {
 			);
 		}
 
+		if ( scanning ) {
+			return __( 'A scan is in progress…', 'jetpack-protect' );
+		}
+
 		const entityLabel = hasPlan
 			? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 			: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' );
@@ -70,7 +78,7 @@ const HomeStatCards = () => {
 			numThreats,
 			entityLabel
 		);
-	}, [ scanError, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+	}, [ scanError, scanning, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
 
 	const renderIcon = isFeatureEnabled => {
 		if ( isFeatureEnabled ) {
@@ -86,20 +94,49 @@ const HomeStatCards = () => {
 		[ isSmall ]
 	);
 
+	const scanIcon = useMemo( () => {
+		if ( scanning ) {
+			return <Spinner />;
+		}
+
+		if ( scanError ) {
+			return <Alert width={ defaultWidth } height={ defaultHeight } />;
+		}
+
+		return (
+			<ProtectCheck
+				width={ defaultWidth }
+				height={ defaultHeight }
+				color={ numThreats ? '#F0B849' : '#069E08' }
+			/>
+		);
+	}, [ scanning, scanError, defaultWidth, defaultHeight, numThreats ] );
+
+	const scanLabel = useMemo( () => {
+		if ( scanError ) {
+			return __( 'Unable to scan', 'jetpack-protect' );
+		}
+
+		if ( scanning ) {
+			return __( 'Scanning…', 'jetpack-protect' );
+		}
+
+		const label = hasPlan
+			? __( 'Threats', 'jetpack-protect' )
+			: __( 'Vulnerabilities', 'jetpack-protect' );
+		return sprintf(
+			// translators: %s: "Threats" or "Vulnerabilities"
+			__( '%s found', 'jetpack-protect' ),
+			label
+		);
+	}, [ scanning, scanError, hasPlan ] );
+
 	const scanArgs = useMemo(
 		() => ( {
 			...defaultArgs,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					{ scanError ? (
-						<Alert width={ defaultWidth } height={ defaultHeight } />
-					) : (
-						<ProtectCheck
-							width={ defaultWidth }
-							height={ defaultHeight }
-							color={ numThreats ? '#F0B849' : '#069E08' }
-						/>
-					) }
+					{ scanIcon }
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
 							{ __( 'Scan', 'jetpack-protect' ) }
@@ -107,23 +144,11 @@ const HomeStatCards = () => {
 					) }
 				</span>
 			),
-			label: (
-				<span className={ styles[ 'stat-card-label' ] }>
-					{ scanError
-						? __( 'Unable to scan', 'jetpack-protect' )
-						: sprintf(
-								// translators: %s: "Threats" or "Vulnerabilities"
-								__( '%s found', 'jetpack-protect' ),
-								hasPlan
-									? __( 'Threats', 'jetpack-protect' )
-									: __( 'Vulnerabilities', 'jetpack-protect' )
-						  ) }
-				</span>
-			),
+			label: <span className={ styles[ 'stat-card-label' ] }>{ scanLabel }</span>,
 			value: numThreats,
-			error: scanError ? true : false,
+			error: scanError || scanning ? true : false,
 		} ),
-		[ defaultArgs, scanError, hasPlan, isSmall, numThreats ]
+		[ defaultArgs, scanIcon, scanLabel, scanning, scanError, isSmall, numThreats ]
 	);
 
 	const wafArgs = useMemo(
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 5aa90150f5ed0..028867ab115ea 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -27,6 +27,10 @@
     align-items: center;
     gap: 8px;
 
+    svg {
+        margin: 0;
+    }
+
 	.active {
 		fill: var( --jp-green-40 );
 	}

From b908e37dbd99b1fcef00f3fac2be0fe3cb73a4fa Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 27 Nov 2024 15:49:49 -0800
Subject: [PATCH 024/143] Fix styling

---
 .../plugins/protect/src/js/routes/firewall/styles.module.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index 9a49ddf73d0cb..66d108ca1ec75 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -219,7 +219,7 @@
     }
 }
 
-@media ( min-width: 599px ) {
+@media ( max-width: 599px ) {
     .stat-cards-wrapper {
         flex-direction: column;
         gap: var( --spacing-base ); // 8px

From 95d2e1eb669483ce58a4d819070c0eaa8b48480c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 28 Nov 2024 09:51:57 -0800
Subject: [PATCH 025/143] Update scanning card state

---
 .../components/seventy-five-layout/index.tsx  |  1 +
 .../src/js/routes/home/home-statcards.jsx     |  4 +-
 .../src/js/routes/home/styles.module.scss     |  2 +-
 .../scan/scanning-admin-section-hero.tsx      |  1 +
 .../src/js/routes/scan/styles.module.scss     | 61 +------------------
 5 files changed, 8 insertions(+), 61 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
index 4dfb1fdb2f266..61458aa4d46e6 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
@@ -59,6 +59,7 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
 						{ main }
 					</Col>
+					<Col lg={ 1 } />
 					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
 						{ secondary }
 					</Col>
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index aaba3ede38c93..fe9987b44b3ee 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -118,7 +118,7 @@ const HomeStatCards = () => {
 		}
 
 		if ( scanning ) {
-			return __( 'Scanning…', 'jetpack-protect' );
+			return __( 'Please wait…', 'jetpack-protect' );
 		}
 
 		const label = hasPlan
@@ -139,7 +139,7 @@ const HomeStatCards = () => {
 					{ scanIcon }
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
-							{ __( 'Scan', 'jetpack-protect' ) }
+							{ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
 						</Text>
 					) }
 				</span>
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 028867ab115ea..14d68c2fccd4b 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -56,7 +56,7 @@
 	text-align: left;
 }
 
-@media ( max-width: 1400px ) {
+@media ( max-width: 1600px ) {
     .stat-cards-wrapper {
         margin-top: calc( var( --spacing-base ) * 4 ); // 32px
     }
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 c214c52ff8892..540320a3a3b58 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
@@ -20,6 +20,7 @@ const ScanningAdminSectionHero: React.FC = () => {
 
 	return (
 		<AdminSectionHero
+			mainClassName={ styles[ 'scanning-header-main' ] }
 			main={
 				<>
 					<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
index 4985320e826cf..871ded92b41c1 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -8,63 +8,8 @@
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
-.stat-card-wrapper {
+.scanning-header-main {
     display: flex;
-    margin-left: auto;
-
-    > *:not( last-child ) {
-        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
-    }
-
-    .disabled {
-        opacity: 0.5;
-    }
-}
-
-.stat-card-icon {
-    width: 100%;
-    margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-	.active {
-		fill: var( --jp-green-40 );
-	}
-
-	.warning {
-		fill: var( --jp-yellow-40 );
-	}
-
-	.disabled {
-		fill: var( --jp-gray-40 );
-	}
+    flex-direction: column;
+    justify-content: center;
 }
-
-.stat-card-label {
-    white-space: nowrap;
-}
-
-@media ( max-width: 1115px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-        flex-wrap: wrap;
-
-    }
-}
-
-@media ( max-width: 599px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-        flex-wrap: wrap;
-
-        > *:not( last-child ) {
-            margin-right: 0;
-            margin-bottom: var( --spacing-base ); // 8px
-        }
-    }
-
-    .stat-card-icon {
-        margin-bottom: 0;
-    }
-}
\ No newline at end of file

From fd712cc9ec266da56cabe078b258f77218921b33 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 026/143] Init project branch


From 01c637d37ba7f4212ca0ba79a8f6aa3342281a90 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 027/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From b0a981949dfdeba6a359efa22c6777e207813ccc Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 028/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From 05bae764bf9d068ad5a8574e74ea1e2ba48a33e2 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 029/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From b9a2980498c5ff1370914dace767bd16d8ce1a95 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 09:53:50 -0800
Subject: [PATCH 030/143] Update scanning card tooltip

---
 projects/plugins/protect/src/js/routes/home/home-statcards.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index fe9987b44b3ee..2514a4f626858 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -47,7 +47,7 @@ const HomeStatCards = () => {
 		}
 
 		if ( scanning ) {
-			return __( 'A scan is in progress…', 'jetpack-protect' );
+			return __( 'Your scan results will be ready soon.', 'jetpack-protect' );
 		}
 
 		const entityLabel = hasPlan

From b168a3d700c5cd53538a2d5ad57ff3a5125b5d81 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 09:59:56 -0800
Subject: [PATCH 031/143] Reorg

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 2514a4f626858..6ab748bc5f3cb 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -32,12 +32,12 @@ const HomeStatCards = () => {
 		stats,
 	} = useWafData();
 
-	const { data: status } = useScanStatusQuery();
-	const scanning = isScanInProgress( status );
-
 	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
 	const { blockedLogins: blockedLoginsCount } = stats;
 
+	const { data: status } = useScanStatusQuery();
+	const scanning = isScanInProgress( status );
+
 	const lastCheckedMessage = useMemo( () => {
 		if ( scanError ) {
 			return __(
@@ -47,7 +47,7 @@ const HomeStatCards = () => {
 		}
 
 		if ( scanning ) {
-			return __( 'Your scan results will be ready soon.', 'jetpack-protect' );
+			return __( 'Your results will be ready soon.', 'jetpack-protect' );
 		}
 
 		const entityLabel = hasPlan

From a095354eb69fa6bf5165231ac1833417e478f9bd Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 10:57:21 -0800
Subject: [PATCH 032/143] Reorg, optimize

---
 .../src/js/routes/home/home-statcards.jsx     | 57 ++++++++-----------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 6ab748bc5f3cb..7254173d65dd2 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,7 +1,7 @@
 import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { Spinner, Tooltip } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import Alert from '../../components/alert-icon';
 import ProtectCheck from '../../components/protect-check-icon';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
@@ -11,12 +11,11 @@ import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
 const HomeStatCards = () => {
-	const defaultHeight = '19.14';
-	const defaultWidth = '16';
-
 	const { hasPlan } = usePlan();
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
+	const variant = isSmall ? 'horizontal' : 'square';
+
 	const {
 		counts: {
 			current: { threats: numThreats },
@@ -38,6 +37,18 @@ const HomeStatCards = () => {
 	const { data: status } = useScanStatusQuery();
 	const scanning = isScanInProgress( status );
 
+	const defaultDimensions = useMemo( () => ( { height: '19.14', width: '16' } ), [] );
+
+	const renderIcon = useCallback(
+		isFeatureEnabled => {
+			if ( isFeatureEnabled ) {
+				return <ProtectCheck { ...defaultDimensions } />;
+			}
+			return <Alert { ...defaultDimensions } color="#A7AAAD" />;
+		},
+		[ defaultDimensions ]
+	);
+
 	const lastCheckedMessage = useMemo( () => {
 		if ( scanError ) {
 			return __(
@@ -80,37 +91,17 @@ const HomeStatCards = () => {
 		);
 	}, [ scanError, scanning, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
 
-	const renderIcon = isFeatureEnabled => {
-		if ( isFeatureEnabled ) {
-			return <ProtectCheck width={ defaultWidth } height={ defaultHeight } />;
-		}
-		return <Alert width={ defaultWidth } height={ defaultHeight } color="#A7AAAD" />;
-	};
-
-	const defaultArgs = useMemo(
-		() => ( {
-			variant: isSmall ? 'horizontal' : 'square',
-		} ),
-		[ isSmall ]
-	);
-
 	const scanIcon = useMemo( () => {
 		if ( scanning ) {
 			return <Spinner />;
 		}
 
 		if ( scanError ) {
-			return <Alert width={ defaultWidth } height={ defaultHeight } />;
+			return <Alert { ...defaultDimensions } />;
 		}
 
-		return (
-			<ProtectCheck
-				width={ defaultWidth }
-				height={ defaultHeight }
-				color={ numThreats ? '#F0B849' : '#069E08' }
-			/>
-		);
-	}, [ scanning, scanError, defaultWidth, defaultHeight, numThreats ] );
+		return <ProtectCheck { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />;
+	}, [ scanning, scanError, defaultDimensions, numThreats ] );
 
 	const scanLabel = useMemo( () => {
 		if ( scanError ) {
@@ -133,7 +124,7 @@ const HomeStatCards = () => {
 
 	const scanArgs = useMemo(
 		() => ( {
-			...defaultArgs,
+			variant: variant,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					{ scanIcon }
@@ -148,12 +139,12 @@ const HomeStatCards = () => {
 			value: numThreats,
 			error: scanError || scanning ? true : false,
 		} ),
-		[ defaultArgs, scanIcon, scanLabel, scanning, scanError, isSmall, numThreats ]
+		[ variant, scanIcon, scanLabel, scanning, scanError, isSmall, numThreats ]
 	);
 
 	const wafArgs = useMemo(
 		() => ( {
-			...defaultArgs,
+			variant: variant,
 			className: isWafModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
@@ -172,12 +163,12 @@ const HomeStatCards = () => {
 			),
 			value: allTimeBlockCount,
 		} ),
-		[ defaultArgs, isWafModuleEnabled, isSmall, allTimeBlockCount ]
+		[ variant, renderIcon, isWafModuleEnabled, isSmall, allTimeBlockCount ]
 	);
 
 	const bruteForceArgs = useMemo(
 		() => ( {
-			...defaultArgs,
+			variant: variant,
 			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
@@ -196,7 +187,7 @@ const HomeStatCards = () => {
 			),
 			value: blockedLoginsCount,
 		} ),
-		[ defaultArgs, isBruteForceModuleEnabled, isSmall, blockedLoginsCount ]
+		[ variant, renderIcon, isBruteForceModuleEnabled, isSmall, blockedLoginsCount ]
 	);
 
 	return (

From 7b5e017e6cf385502471b7002a6e9144892bb0c8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 11:33:29 -0800
Subject: [PATCH 033/143] Remove count when feature disabled

---
 .../js-packages/components/components/stat-card/index.tsx | 6 +++---
 .../js-packages/components/components/stat-card/types.ts  | 4 ++--
 .../plugins/protect/src/js/routes/home/home-statcards.jsx | 8 +++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index 310b79068d750..222cafb44068e 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -24,7 +24,7 @@ const StatCard = ( {
 	label,
 	value,
 	variant = 'square',
-	error,
+	hideValue = false,
 }: StatCardProps ) => {
 	const formattedValue = numberFormat( value );
 	const compactValue = numberFormat( value, {
@@ -40,12 +40,12 @@ const StatCard = ( {
 				{ variant === 'square' ? (
 					<Tooltip text={ formattedValue } placement="top">
 						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ error ? '-' : compactValue }
+							{ hideValue ? '-' : compactValue }
 						</Text>
 					</Tooltip>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-						{ error ? '-' : formattedValue }
+						{ hideValue ? '-' : formattedValue }
 					</Text>
 				) }
 			</div>
diff --git a/projects/js-packages/components/components/stat-card/types.ts b/projects/js-packages/components/components/stat-card/types.ts
index ccc80df000e14..8e1c0e99d6d60 100644
--- a/projects/js-packages/components/components/stat-card/types.ts
+++ b/projects/js-packages/components/components/stat-card/types.ts
@@ -27,7 +27,7 @@ export type StatCardProps = {
 	variant?: 'square' | 'horizontal';
 
 	/**
-	 * Whether the stat card represents an error.
+	 * Whether to hide the value.
 	 */
-	error?: boolean;
+	hideValue?: boolean;
 };
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 7254173d65dd2..cc0189a19690b 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -34,8 +34,8 @@ const HomeStatCards = () => {
 	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
 	const { blockedLogins: blockedLoginsCount } = stats;
 
-	const { data: status } = useScanStatusQuery();
-	const scanning = isScanInProgress( status );
+	const { data: scanStatus } = useScanStatusQuery();
+	const scanning = isScanInProgress( scanStatus );
 
 	const defaultDimensions = useMemo( () => ( { height: '19.14', width: '16' } ), [] );
 
@@ -137,7 +137,7 @@ const HomeStatCards = () => {
 			),
 			label: <span className={ styles[ 'stat-card-label' ] }>{ scanLabel }</span>,
 			value: numThreats,
-			error: scanError || scanning ? true : false,
+			hideValue: !! ( scanError || scanning ),
 		} ),
 		[ variant, scanIcon, scanLabel, scanning, scanError, isSmall, numThreats ]
 	);
@@ -162,6 +162,7 @@ const HomeStatCards = () => {
 				</span>
 			),
 			value: allTimeBlockCount,
+			hideValue: ! isWafModuleEnabled,
 		} ),
 		[ variant, renderIcon, isWafModuleEnabled, isSmall, allTimeBlockCount ]
 	);
@@ -186,6 +187,7 @@ const HomeStatCards = () => {
 				</span>
 			),
 			value: blockedLoginsCount,
+			hideValue: ! isBruteForceModuleEnabled,
 		} ),
 		[ variant, renderIcon, isBruteForceModuleEnabled, isSmall, blockedLoginsCount ]
 	);

From 0b632bfaa2c8968e1688e55ff6a3e8a658a4c062 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 11:54:48 -0800
Subject: [PATCH 034/143] Optimize

---
 .../src/js/routes/home/home-statcards.jsx     | 142 +++++++++---------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index cc0189a19690b..c57930a297c9f 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -10,10 +10,28 @@ import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
+const IconWithLabel = ( { label, isSmall, icon } ) => (
+	<span className={ styles[ 'stat-card-icon' ] }>
+		{ icon }
+		{ ! isSmall && (
+			<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+				{ label }
+			</Text>
+		) }
+	</span>
+);
+
+const HomeStatCard = ( { text, args } ) => (
+	<Tooltip className={ styles[ 'stat-card-tooltip' ] } text={ text }>
+		<div className={ styles[ 'stat-card-wrapper' ] }>
+			<StatCard { ...args } />
+		</div>
+	</Tooltip>
+);
+
 const HomeStatCards = () => {
 	const { hasPlan } = usePlan();
 	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
 	const variant = isSmall ? 'horizontal' : 'square';
 
 	const {
@@ -31,8 +49,10 @@ const HomeStatCards = () => {
 		stats,
 	} = useWafData();
 
-	const { allTime: allTimeBlockCount } = stats ? stats.blockedRequests : { allTime: 0 };
-	const { blockedLogins: blockedLoginsCount } = stats;
+	const {
+		blockedRequests: { allTime: allTimeBlockedRequestsCount = 0 } = {},
+		blockedLogins: allTimeBlockedLoginsCount = 0,
+	} = stats || {};
 
 	const { data: scanStatus } = useScanStatusQuery();
 	const scanning = isScanInProgress( scanStatus );
@@ -40,12 +60,12 @@ const HomeStatCards = () => {
 	const defaultDimensions = useMemo( () => ( { height: '19.14', width: '16' } ), [] );
 
 	const renderIcon = useCallback(
-		isFeatureEnabled => {
-			if ( isFeatureEnabled ) {
-				return <ProtectCheck { ...defaultDimensions } />;
-			}
-			return <Alert { ...defaultDimensions } color="#A7AAAD" />;
-		},
+		isFeatureEnabled =>
+			isFeatureEnabled ? (
+				<ProtectCheck { ...defaultDimensions } />
+			) : (
+				<Alert { ...defaultDimensions } color="#A7AAAD" />
+			),
 		[ defaultDimensions ]
 	);
 
@@ -91,56 +111,48 @@ const HomeStatCards = () => {
 		);
 	}, [ scanError, scanning, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
 
-	const scanIcon = useMemo( () => {
+	const scanArgs = useMemo( () => {
+		let scanIcon;
 		if ( scanning ) {
-			return <Spinner />;
-		}
-
-		if ( scanError ) {
-			return <Alert { ...defaultDimensions } />;
+			scanIcon = <Spinner />;
+		} else if ( scanError ) {
+			scanIcon = <Alert { ...defaultDimensions } />;
+		} else {
+			scanIcon = (
+				<ProtectCheck { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />
+			);
 		}
 
-		return <ProtectCheck { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />;
-	}, [ scanning, scanError, defaultDimensions, numThreats ] );
-
-	const scanLabel = useMemo( () => {
+		let scanLabel;
 		if ( scanError ) {
-			return __( 'Unable to scan', 'jetpack-protect' );
-		}
-
-		if ( scanning ) {
-			return __( 'Please wait…', 'jetpack-protect' );
+			scanLabel = __( 'Unable to scan', 'jetpack-protect' );
+		} else if ( scanning ) {
+			scanLabel = __( 'Please wait…', 'jetpack-protect' );
+		} else {
+			const label = hasPlan
+				? __( 'Threats', 'jetpack-protect' )
+				: __( 'Vulnerabilities', 'jetpack-protect' );
+			scanLabel = sprintf(
+				// translators: %s: "Threats" or "Vulnerabilities"
+				__( '%s found', 'jetpack-protect' ),
+				label
+			);
 		}
 
-		const label = hasPlan
-			? __( 'Threats', 'jetpack-protect' )
-			: __( 'Vulnerabilities', 'jetpack-protect' );
-		return sprintf(
-			// translators: %s: "Threats" or "Vulnerabilities"
-			__( '%s found', 'jetpack-protect' ),
-			label
-		);
-	}, [ scanning, scanError, hasPlan ] );
-
-	const scanArgs = useMemo(
-		() => ( {
-			variant: variant,
+		return {
+			variant,
 			icon: (
-				<span className={ styles[ 'stat-card-icon' ] }>
-					{ scanIcon }
-					{ ! isSmall && (
-						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
-							{ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
-						</Text>
-					) }
-				</span>
+				<IconWithLabel
+					icon={ scanIcon }
+					label={ __( 'Scan', 'jetpack-protect' ) }
+					isSmall={ isSmall }
+				/>
 			),
 			label: <span className={ styles[ 'stat-card-label' ] }>{ scanLabel }</span>,
 			value: numThreats,
 			hideValue: !! ( scanError || scanning ),
-		} ),
-		[ variant, scanIcon, scanLabel, scanning, scanError, isSmall, numThreats ]
-	);
+		};
+	}, [ variant, scanning, defaultDimensions, scanError, numThreats, hasPlan, isSmall ] );
 
 	const wafArgs = useMemo(
 		() => ( {
@@ -161,10 +173,10 @@ const HomeStatCards = () => {
 					{ __( 'Blocked requests', 'jetpack-protect' ) }
 				</span>
 			),
-			value: allTimeBlockCount,
+			value: allTimeBlockedRequestsCount,
 			hideValue: ! isWafModuleEnabled,
 		} ),
-		[ variant, renderIcon, isWafModuleEnabled, isSmall, allTimeBlockCount ]
+		[ variant, renderIcon, isWafModuleEnabled, isSmall, allTimeBlockedRequestsCount ]
 	);
 
 	const bruteForceArgs = useMemo(
@@ -186,35 +198,26 @@ const HomeStatCards = () => {
 					{ __( 'Blocked logins', 'jetpack-protect' ) }
 				</span>
 			),
-			value: blockedLoginsCount,
+			value: allTimeBlockedLoginsCount,
 			hideValue: ! isBruteForceModuleEnabled,
 		} ),
-		[ variant, renderIcon, isBruteForceModuleEnabled, isSmall, blockedLoginsCount ]
+		[ variant, renderIcon, isBruteForceModuleEnabled, isSmall, allTimeBlockedLoginsCount ]
 	);
 
 	return (
 		<div className={ styles[ 'stat-cards-wrapper' ] }>
-			<Tooltip className={ styles[ 'stat-card-tooltip' ] } text={ lastCheckedMessage }>
-				<div className={ styles[ 'stat-card-wrapper' ] }>
-					<StatCard { ...scanArgs } />
-				</div>
-			</Tooltip>
+			<HomeStatCard text={ lastCheckedMessage } args={ scanArgs } />
 			{ wafSupported && (
-				<Tooltip
-					className={ styles[ 'stat-card-tooltip' ] }
+				<HomeStatCard
 					text={
 						isWafModuleEnabled
 							? __( 'Untrusted traffic requests blocked all time.', 'jetpack-protect' )
 							: __( "Firewall is off. Untrusted traffic can't be blocked", 'jetpack-protect' )
 					}
-				>
-					<div className={ styles[ 'stat-card-wrapper' ] }>
-						<StatCard { ...wafArgs } />
-					</div>
-				</Tooltip>
+					args={ wafArgs }
+				/>
 			) }
-			<Tooltip
-				className={ styles[ 'stat-card-tooltip' ] }
+			<HomeStatCard
 				text={
 					isBruteForceModuleEnabled
 						? __( 'Total login attempts blocked all time.', 'jetpack-protect' )
@@ -223,11 +226,8 @@ const HomeStatCards = () => {
 								'jetpack-protect'
 						  )
 				}
-			>
-				<div className={ styles[ 'stat-card-wrapper' ] }>
-					<StatCard { ...bruteForceArgs } />
-				</div>
-			</Tooltip>
+				args={ bruteForceArgs }
+			/>
 		</div>
 	);
 };

From 28c954d9bb1c470aa8c31352b13f8d355abde090 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 11:56:11 -0800
Subject: [PATCH 035/143] Update messaging

---
 projects/plugins/protect/src/js/routes/home/home-statcards.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index c57930a297c9f..1e6f6fb6f5461 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -222,7 +222,7 @@ const HomeStatCards = () => {
 					isBruteForceModuleEnabled
 						? __( 'Total login attempts blocked all time.', 'jetpack-protect' )
 						: __(
-								"Brute force protect is off. Log in attempts can't be blocked.",
+								"Brute force protection is off. Log in attempts can't be blocked.",
 								'jetpack-protect'
 						  )
 				}

From 0d51b1af4f966fc48497fce9bed6253859e3eb98 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 12:18:19 -0800
Subject: [PATCH 036/143] Fix blocklist textarea

---
 projects/plugins/protect/src/js/routes/firewall/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 1c77f4f5f6b57..3e8ed5012ccd7 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -443,6 +443,7 @@ const FirewallPage = () => {
 				{ ( ipBlockListEnabled || ipBlockListHasContent ) && (
 					<div className={ styles[ 'manual-rules-section' ] }>
 						<Textarea
+							id="jetpack_waf_ip_block_list"
 							placeholder={ __( 'Example:', 'jetpack-protect' ) + '\n12.12.12.1\n12.12.12.2' }
 							rows={ 3 }
 							value={ formState.jetpack_waf_ip_block_list }

From 0ea782ec70f852246be27fbc930f6a5ed7ee00d6 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 29 Nov 2024 12:32:40 -0800
Subject: [PATCH 037/143] Add dummy args for translations

---
 .../protect/src/js/routes/home/home-statcards.jsx     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 1e6f6fb6f5461..4d03623fb6f11 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -131,7 +131,7 @@ const HomeStatCards = () => {
 		} else {
 			const label = hasPlan
 				? __( 'Threats', 'jetpack-protect' )
-				: __( 'Vulnerabilities', 'jetpack-protect' );
+				: __( 'Vulnerabilities', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 );
 			scanLabel = sprintf(
 				// translators: %s: "Threats" or "Vulnerabilities"
 				__( '%s found', 'jetpack-protect' ),
@@ -212,7 +212,11 @@ const HomeStatCards = () => {
 					text={
 						isWafModuleEnabled
 							? __( 'Untrusted traffic requests blocked all time.', 'jetpack-protect' )
-							: __( "Firewall is off. Untrusted traffic can't be blocked", 'jetpack-protect' )
+							: __(
+									"Firewall is off. Untrusted traffic can't be blocked",
+									'jetpack-protect',
+									/* dummy arg to avoid bad minification */ 0
+							  )
 					}
 					args={ wafArgs }
 				/>
@@ -223,7 +227,8 @@ const HomeStatCards = () => {
 						? __( 'Total login attempts blocked all time.', 'jetpack-protect' )
 						: __(
 								"Brute force protection is off. Log in attempts can't be blocked.",
-								'jetpack-protect'
+								'jetpack-protect',
+								/* dummy arg to avoid bad minification */ 0
 						  )
 				}
 				args={ bruteForceArgs }

From 73df67d1c0dab93c5524680da6e23a2057f7a3eb Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 038/143] Init project branch


From 70e3f0370ae79eaaba1fcabf197b5d2f6570a1e0 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 039/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From b44b37a918bea178928711cd7a647abb9a26fd00 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 040/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From 7515dcba5f8a07cce72ee6473307bcc60bd48a79 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 041/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From 5656dbe683e9afd653070b9690064c84df7458d5 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 042/143] Protect: add ShieldIcon component

---
 .../components/admin-section-hero/index.tsx   |  21 ++-
 .../stories/index.stories.jsx                 |   4 +-
 .../src/js/components/shield-icon/index.tsx   | 165 ++++++++++++++++++
 .../shield-icon/stories/index.stories.tsx     |  50 ++++++
 4 files changed, 230 insertions(+), 10 deletions(-)
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ed83bebc8638..758c8c21e0193 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,9 +1,6 @@
-import {
-	AdminSectionHero as JetpackAdminSectionHero,
-	H3,
-	getIconBySlug,
-} from '@automattic/jetpack-components';
+import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
+import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -15,7 +12,7 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
+	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 
 AdminSectionHero.Heading = ( {
 	children,
+	variant = 'default',
 	showIcon = false,
 }: {
 	children: React.ReactNode;
+	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
 } ) => {
-	const Icon = getIconBySlug( 'protect' );
-
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
-			{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
+			{ showIcon && (
+				<ShieldIcon
+					variant={ `${ variant }-outline` }
+					fill="#1d2327"
+					className={ styles[ 'heading-icon' ] }
+				/>
+			) }
 		</H3>
 	);
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index 7d5b4f8066c93..ca2dfda7fc98e 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -12,7 +12,9 @@ Default.args = {
 	main: (
 		<>
 			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
+			<AdminSectionHero.Heading showIcon variant="success">
+				{ 'No threats found' }
+			</AdminSectionHero.Heading>
 			<AdminSectionHero.Subheading>
 				<Text>{ 'Most recent results' }</Text>
 			</AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..3bf7f479f0051
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
@@ -0,0 +1,165 @@
+import { type JSX } from 'react';
+
+/**
+ * Protect Shield and Checkmark SVG Icon
+ *
+ * @param {object} props           - Component props.
+ * @param {string} props.variant   - Icon variant.
+ * @param {string} props.fill      - Icon fill color.
+ * @param {string} props.className - Additional class names.
+ * @param {number} props.height    - Icon height.
+ * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
+ */
+export default function ShieldIcon( {
+	variant = 'default',
+	height = 32,
+	className,
+	fill,
+}: {
+	variant:
+		| 'default'
+		| 'success'
+		| 'error'
+		| 'default-outline'
+		| 'success-outline'
+		| 'error-outline';
+	className?: string;
+	height?: number;
+	fill?: string;
+} ): JSX.Element {
+	if ( 'error-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
+					fill={ fill || '#D63638' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'error' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 123 ) / 150 }
+				viewBox="0 0 123 150"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
+					fill={ `#fff` }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 14 ) / 17 }
+				viewBox="0 0 14 17"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
+					fill={ fill || '#069E08' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 80 ) / 96 }
+				viewBox="0 0 80 96"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+					fill="white"
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'default-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || 'black' }
+				/>
+			</svg>
+		);
+	}
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 80 ) / 96 }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ fill || 'black' }
+			/>
+		</svg>
+	);
+}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d10365f4b0834
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ShieldIcon from '../index';
+
+export default {
+	title: 'Plugins/Protect/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		Story => (
+			<div style={ { height: '72px', width: '72px' } }>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [
+				'default',
+				'success',
+				'error',
+				'default-outline',
+				'success-outline',
+				'error-outline',
+			],
+		},
+		fill: {
+			control: 'color',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'default',
+};
+
+export const SuccessVariant = args => <ShieldIcon { ...args } />;
+SuccessVariant.args = {
+	variant: 'success',
+};
+
+export const ErrorVariant = args => <ShieldIcon { ...args } />;
+ErrorVariant.args = {
+	variant: 'error',
+};

From 22712db78950c979f7ada3a099e0a50498d4b082 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 10:43:08 -0800
Subject: [PATCH 043/143] Add ScanReport component

---
 .../components/scan-report/constants.ts       |  50 +++++
 .../components/scan-report/index.tsx          | 206 ++++++++++++++++++
 .../scan-report/stories/index.stories.tsx     |  87 ++++++++
 .../components/scan-report/styles.module.scss |  15 ++
 4 files changed, 358 insertions(+)
 create mode 100644 projects/js-packages/components/components/scan-report/constants.ts
 create mode 100644 projects/js-packages/components/components/scan-report/index.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/styles.module.scss

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
new file mode 100644
index 0000000000000..1487b203374f8
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -0,0 +1,50 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	wordpress as coreIcon,
+} from '@wordpress/icons';
+
+export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
+	[
+		{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
+		{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
+		{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
+	];
+
+export const THREAT_TYPES = [
+	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
+	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
+	{ value: 'file', label: __( 'File', 'jetpack' ) },
+];
+
+export const THREAT_ICONS = {
+	plugins: pluginIcon,
+	themes: themeIcon,
+	core: coreIcon,
+	file: fileIcon,
+	default: shieldIcon,
+};
+
+export const THREAT_FIELD_THREAT = 'threat';
+export const THREAT_FIELD_TITLE = 'title';
+export const THREAT_FIELD_DESCRIPTION = 'description';
+export const THREAT_FIELD_ICON = 'icon';
+export const THREAT_FIELD_STATUS = 'status';
+export const THREAT_FIELD_TYPE = 'type';
+export const THREAT_FIELD_EXTENSION = 'extension';
+export const THREAT_FIELD_PLUGIN = 'plugin';
+export const THREAT_FIELD_THEME = 'theme';
+export const THREAT_FIELD_SAFETY = 'safety';
+export const THREAT_FIELD_SIGNATURE = 'signature';
+export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
+export const THREAT_FIELD_FIXED_ON = 'fixed-on';
+export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
+export const THREAT_FIELD_UPDATE = 'update';
+
+export const THREAT_ACTION_FIX = 'fix';
+export const THREAT_ACTION_IGNORE = 'ignore';
+export const THREAT_ACTION_UNIGNORE = 'unignore';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
new file mode 100644
index 0000000000000..54a0bb85cc980
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -0,0 +1,206 @@
+import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import {
+	type Field,
+	type FieldType,
+	type Filter,
+	type SortDirection,
+	type SupportedLayouts,
+	type View,
+	DataViews,
+	filterSortAndPaginate,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import ThreatSeverityBadge from '../threat-severity-badge';
+import {
+	THREAT_FIELD_EXTENSION,
+	THREAT_FIELD_ICON,
+	THREAT_FIELD_SAFETY,
+	THREAT_FIELD_UPDATE,
+	THREAT_FIELD_TYPE,
+	THREAT_TYPES,
+	THREAT_ICONS,
+} from './constants';
+import styles from './styles.module.scss';
+
+/**
+ * DataViews component for displaying a scan report.
+ *
+ * @param {object}   props                   - Component props.
+ * @param {Array}    props.data              - Threats data.
+ * @param {Array}    props.filters           - Initial DataView filters.
+ * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ *
+ * @return {JSX.Element} The ScanReport component.
+ */
+export default function ScanReport( { data, filters, onChangeSelection } ): JSX.Element {
+	// TODO: Add types
+	const baseView = {
+		sort: {
+			field: 'type',
+			direction: 'desc' as SortDirection,
+		},
+		search: '',
+		filters: filters || [],
+		page: 1,
+		perPage: 20,
+	};
+
+	/**
+	 * DataView default layouts.
+	 *
+	 * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+	 */
+	const defaultLayouts: SupportedLayouts = {
+		table: {
+			...baseView,
+			fields: [
+				THREAT_FIELD_SAFETY,
+				THREAT_FIELD_TYPE,
+				THREAT_FIELD_EXTENSION,
+				THREAT_FIELD_UPDATE,
+			],
+			layout: {
+				primaryField: THREAT_FIELD_SAFETY,
+			},
+		},
+		list: {
+			...baseView,
+			fields: [ THREAT_FIELD_SAFETY, THREAT_FIELD_TYPE, THREAT_FIELD_UPDATE ],
+			layout: {
+				primaryField: THREAT_FIELD_EXTENSION,
+				mediaField: THREAT_FIELD_ICON,
+			},
+		},
+	};
+
+	/**
+	 * DataView view object - configures how the dataset is visible to the user.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+	 */
+	const [ view, setView ] = useState< View >( {
+		type: 'table',
+		...defaultLayouts.table,
+	} );
+
+	/**
+	 * DataView fields - describes the visible items for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+	 */
+	const fields = useMemo( () => {
+		const result = [
+			{
+				id: THREAT_FIELD_SAFETY,
+				label: __( 'Safety', 'jetpack' ),
+				// getValue?
+				render( { item } ) {
+					if ( item.threats.length === 0 ) {
+						return <Icon icon={ check } size={ 20 } />;
+						// TODO: Icons for checked/clean, unchecked, or threats
+					}
+				},
+			},
+			{
+				id: THREAT_FIELD_TYPE,
+				label: __( 'Type', 'jetpack' ),
+				elements: THREAT_TYPES,
+				// getValue?
+				render( { item } ) {
+					// TODO: We could just captilize the first letter of type, or have a utility function to do this
+					switch ( item.type ) {
+						case 'core':
+							return 'Core';
+						case 'plugins':
+							return 'Plugins';
+						case 'themes':
+							return 'Themes';
+						case 'file':
+							return 'File';
+						default:
+							return '';
+					}
+				},
+			},
+			{
+				id: THREAT_FIELD_EXTENSION,
+				label: __( 'Extension', 'jetpack' ),
+				// enableGlobalSearch: true,
+				// enableHiding: true,
+				// getValue?
+				render( { item } ) {
+					return item.name ? item.name : '';
+					// TODO: Account for file and db?
+				},
+			},
+			{
+				id: THREAT_FIELD_UPDATE,
+				label: __( 'Update Available', 'jetpack' ),
+				// getValue?
+				render() {
+					return <Icon icon={ check } size={ 20 } />;
+					// TODO: Is this possible to determine?
+				},
+			},
+			{
+				id: THREAT_FIELD_ICON,
+				label: __( 'Icon', 'jetpack' ),
+				enableHiding: false,
+				// getValue?
+				render() {
+					return (
+						<div className={ styles.threat__media }>
+							<Icon icon={ check } size={ 20 } />
+							{ /* TODO: Use utility function to get icon based on type, might need ot modify props */ }
+						</div>
+					);
+				},
+			},
+		];
+
+		return result;
+	}, [] );
+
+	/**
+	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+	 */
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ data, view, fields ] );
+
+	/**
+	 * Callback function to update the view state.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+	 */
+	const onChangeView = useCallback( ( newView: View ) => {
+		setView( newView );
+	}, [] );
+
+	/**
+	 * DataView getItemId function - returns the unique ID for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+	 */
+	const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] );
+	// TODO: Do we need this? dataset doesn't come with an id for each
+
+	return (
+		<DataViews
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
new file mode 100644
index 0000000000000..7d103fd899438
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -0,0 +1,87 @@
+import ScanReport from '..';
+
+export default {
+	title: 'JS Packages/Components/Scan Report',
+	component: ScanReport,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ScanReport { ...args } />;
+Default.args = {
+	// TODO: Need to pass all core, plugins, themes, files, and database as a flat array
+	data: [
+		{
+			id: 1,
+			name: 'WordPress',
+			slug: null,
+			version: '6.7.1',
+			threats: [],
+			checked: true,
+			type: 'core',
+		},
+		{
+			id: 2,
+			name: 'Jetpack',
+			slug: 'jetpack/jetpack.php',
+			version: '14.1-a.7',
+			threats: [],
+			checked: false,
+			type: 'plugins',
+		},
+		{
+			id: 3,
+			name: 'Twenty Fifteen',
+			slug: 'twentyfifteen',
+			version: '14.1-a.7',
+			threats: [],
+			checked: true,
+			type: 'themes',
+		},
+	],
+	filters: [],
+};
+
+// data: {
+// 	core: {
+// 		name: 'WordPress',
+// 		slug: null,
+// 		version: '6.7.1',
+// 		threats: [],
+// 		checked: true,
+// 		type: 'core',
+// 	},
+// 	plugins: [
+// 		{
+// 			name: 'Jetpack',
+// 			slug: 'jetpack/jetpack.php',
+// 			version: '14.1-a.7',
+// 			threats: [],
+// 			checked: false,
+// 			type: 'plugins',
+// 		},
+// 	],
+// 	themes: [
+// 		{
+// 			name: 'Twenty Fifteen',
+// 			slug: 'twentyfifteen',
+// 			version: '14.1-a.7',
+// 			threats: [],
+// 			checked: true,
+// 			type: 'themes',
+// 		},
+// 	],
+// 	files: [],
+// 	database: [],
+// }
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
new file mode 100644
index 0000000000000..544f93d6c5770
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -0,0 +1,15 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: var( --jp-black );
+	}
+}
\ No newline at end of file

From 274ada613631f1eef1098d2355af86c6462a8ddb Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:14:24 -0800
Subject: [PATCH 044/143] Add icons and tooltips

---
 .../components/scan-report/index.tsx          | 74 +++++++++----------
 .../scan-report/stories/index.stories.tsx     |  2 +-
 .../components/scan-report/styles.module.scss | 26 +++++++
 3 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 54a0bb85cc980..4895554a53c88 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -1,18 +1,14 @@
-import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import { type Threat } from '@automattic/jetpack-scan';
+import { Tooltip } from '@wordpress/components';
 import {
-	type Field,
-	type FieldType,
-	type Filter,
-	type SortDirection,
 	type SupportedLayouts,
 	type View,
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, shield, check } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
-import ThreatSeverityBadge from '../threat-severity-badge';
 import {
 	THREAT_FIELD_EXTENSION,
 	THREAT_FIELD_ICON,
@@ -37,10 +33,6 @@ import styles from './styles.module.scss';
 export default function ScanReport( { data, filters, onChangeSelection } ): JSX.Element {
 	// TODO: Add types
 	const baseView = {
-		sort: {
-			field: 'type',
-			direction: 'desc' as SortDirection,
-		},
 		search: '',
 		filters: filters || [],
 		page: 1,
@@ -97,41 +89,49 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 			{
 				id: THREAT_FIELD_SAFETY,
 				label: __( 'Safety', 'jetpack' ),
-				// getValue?
 				render( { item } ) {
-					if ( item.threats.length === 0 ) {
-						return <Icon icon={ check } size={ 20 } />;
-						// TODO: Icons for checked/clean, unchecked, or threats
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							return (
+								<Tooltip className={ styles.tooltip } text={ __( 'Threat detected.', 'jetpack' ) }>
+									<Icon className={ styles.shield__threat } icon={ shield } />
+								</Tooltip>
+							);
+						}
+						return (
+							<Tooltip
+								className={ styles.tooltip }
+								text={ __( 'No known threats found that affect this version.', 'jetpack' ) }
+							>
+								<Icon className={ styles.shield__checked } icon={ shield } />
+							</Tooltip>
+						);
 					}
+					return (
+						<Tooltip
+							className={ styles.tooltip }
+							text={ __(
+								'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
+								'jetpack'
+							) }
+						>
+							<Icon className={ styles.shield__unchecked } icon={ shield } />
+						</Tooltip>
+					);
 				},
 			},
 			{
 				id: THREAT_FIELD_TYPE,
 				label: __( 'Type', 'jetpack' ),
 				elements: THREAT_TYPES,
-				// getValue?
 				render( { item } ) {
-					// TODO: We could just captilize the first letter of type, or have a utility function to do this
-					switch ( item.type ) {
-						case 'core':
-							return 'Core';
-						case 'plugins':
-							return 'Plugins';
-						case 'themes':
-							return 'Themes';
-						case 'file':
-							return 'File';
-						default:
-							return '';
-					}
+					return item.type ? item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 ) : '';
 				},
 			},
 			{
 				id: THREAT_FIELD_EXTENSION,
 				label: __( 'Extension', 'jetpack' ),
-				// enableGlobalSearch: true,
-				// enableHiding: true,
-				// getValue?
+				enableGlobalSearch: true,
 				render( { item } ) {
 					return item.name ? item.name : '';
 					// TODO: Account for file and db?
@@ -140,22 +140,18 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 			{
 				id: THREAT_FIELD_UPDATE,
 				label: __( 'Update Available', 'jetpack' ),
-				// getValue?
 				render() {
-					return <Icon icon={ check } size={ 20 } />;
+					return <Icon className={ styles.check } icon={ check } />;
 					// TODO: Is this possible to determine?
 				},
 			},
 			{
 				id: THREAT_FIELD_ICON,
 				label: __( 'Icon', 'jetpack' ),
-				enableHiding: false,
-				// getValue?
-				render() {
+				render( { item } ) {
 					return (
 						<div className={ styles.threat__media }>
-							<Icon icon={ check } size={ 20 } />
-							{ /* TODO: Use utility function to get icon based on type, might need ot modify props */ }
+							<Icon icon={ THREAT_ICONS[ item.type ] } />
 						</div>
 					);
 				},
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index 7d103fd899438..b12c5fe15b902 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -45,7 +45,7 @@ Default.args = {
 			name: 'Twenty Fifteen',
 			slug: 'twentyfifteen',
 			version: '14.1-a.7',
-			threats: [],
+			threats: [ 'threat' ],
 			checked: true,
 			type: 'themes',
 		},
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
index 544f93d6c5770..8726b582e346d 100644
--- a/projects/js-packages/components/components/scan-report/styles.module.scss
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -12,4 +12,30 @@
 	svg {
 		fill: var( --jp-black );
 	}
+}
+
+.tooltip {
+	margin-top: var( --spacing-base )	;
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
+
+.shield {
+
+	&__threat {
+		fill: #F0B849;
+	}
+
+	&__checked {
+		fill: var( --jp-green-40 );
+	}
+
+	&__unchecked {
+		fill: var( --jp-gray-40 );
+	}
+}
+
+.check {
+	fill: var( --jp-green-40 );
 }
\ No newline at end of file

From 4d20b9bad220a58ae25c69ef5849dc80869bec01 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:23:06 -0800
Subject: [PATCH 045/143] Add ShieldCheckIcon and ShieldAlertIcon

---
 .../components/scan-report/shield-alert.tsx   | 48 +++++++++++++++++++
 .../components/scan-report/shield-check.tsx   | 48 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 projects/js-packages/components/components/scan-report/shield-alert.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/shield-check.tsx

diff --git a/projects/js-packages/components/components/scan-report/shield-alert.tsx b/projects/js-packages/components/components/scan-report/shield-alert.tsx
new file mode 100644
index 0000000000000..399b521fafb12
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/shield-alert.tsx
@@ -0,0 +1,48 @@
+import { type JSX } from 'react';
+
+/**
+ * Shield and Alert SVG Icon
+ *
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="80"]      - The width of the SVG Icon.
+ * @param {string} [props.height="96"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
+ *
+ * @return {JSX.Element} Shield and Alert SVG Icon
+ */
+export default function ShieldAlertIcon( {
+	className,
+	width = '80',
+	height = '96',
+	color = '#069E08',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
+} ): JSX.Element {
+	return (
+		<svg
+			className={ className }
+			width={ width }
+			height={ height }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ color }
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
diff --git a/projects/js-packages/components/components/scan-report/shield-check.tsx b/projects/js-packages/components/components/scan-report/shield-check.tsx
new file mode 100644
index 0000000000000..9d4394badac53
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/shield-check.tsx
@@ -0,0 +1,48 @@
+import { type JSX } from 'react';
+
+/**
+ * Shield and Checkmark SVG Icon
+ *
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="80"]      - The width of the SVG Icon.
+ * @param {string} [props.height="96"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
+ *
+ * @return {JSX.Element} Shield and Checkmark SVG Icon
+ */
+export default function ShieldCheckIcon( {
+	className,
+	width = '80',
+	height = '96',
+	color = '#069E08',
+}: {
+	className?: string;
+	width?: string;
+	height?: string;
+	color?: string;
+} ): JSX.Element {
+	return (
+		<svg
+			className={ className }
+			width={ width }
+			height={ height }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ color }
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}

From 35a9baf44a5e8560277573181f24ff84ece9948a Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:32:53 -0800
Subject: [PATCH 046/143] Fix icons

---
 .../components/scan-report/index.tsx          | 18 ++++++++++++----
 .../components/scan-report/shield-alert.tsx   | 21 +++++++++----------
 .../components/scan-report/styles.module.scss |  1 -
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 4895554a53c88..8edd902ea6940 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -7,7 +7,7 @@ import {
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
-import { Icon, shield, check } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import {
 	THREAT_FIELD_EXTENSION,
@@ -18,6 +18,8 @@ import {
 	THREAT_TYPES,
 	THREAT_ICONS,
 } from './constants';
+import ShieldAlertIcon from './shield-alert';
+import ShieldCheckIcon from './shield-check';
 import styles from './styles.module.scss';
 
 /**
@@ -85,6 +87,8 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
 	 */
 	const fields = useMemo( () => {
+		const defaultIconDimension = { width: '16', height: '19.14' };
+
 		const result = [
 			{
 				id: THREAT_FIELD_SAFETY,
@@ -94,7 +98,9 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 						if ( item.threats.length > 0 ) {
 							return (
 								<Tooltip className={ styles.tooltip } text={ __( 'Threat detected.', 'jetpack' ) }>
-									<Icon className={ styles.shield__threat } icon={ shield } />
+									<div className={ styles.icon }>
+										<ShieldAlertIcon color={ '#F0B849' } { ...defaultIconDimension } />
+									</div>
 								</Tooltip>
 							);
 						}
@@ -103,7 +109,9 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 								className={ styles.tooltip }
 								text={ __( 'No known threats found that affect this version.', 'jetpack' ) }
 							>
-								<Icon className={ styles.shield__checked } icon={ shield } />
+								<div className={ styles.icon }>
+									<ShieldCheckIcon color={ '#069E08' } { ...defaultIconDimension } />
+								</div>
 							</Tooltip>
 						);
 					}
@@ -115,7 +123,9 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 								'jetpack'
 							) }
 						>
-							<Icon className={ styles.shield__unchecked } icon={ shield } />
+							<div className={ styles.icon }>
+								<ShieldCheckIcon color={ '#A7AAAD' } { ...defaultIconDimension } />
+							</div>
 						</Tooltip>
 					);
 				},
diff --git a/projects/js-packages/components/components/scan-report/shield-alert.tsx b/projects/js-packages/components/components/scan-report/shield-alert.tsx
index 399b521fafb12..75991c424d0c0 100644
--- a/projects/js-packages/components/components/scan-report/shield-alert.tsx
+++ b/projects/js-packages/components/components/scan-report/shield-alert.tsx
@@ -5,17 +5,17 @@ import { type JSX } from 'react';
  *
  * @param {object} props                   - Component props.
  * @param {string} [props.className]       - The class name to add to the SVG Icon.
- * @param {string} [props.width="80"]      - The width of the SVG Icon.
- * @param {string} [props.height="96"]     - The height of the SVG Icon.
- * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
+ * @param {string} [props.width="40"]      - The width of the SVG Icon.
+ * @param {string} [props.height="48"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#D63638"] - The color of the SVG Icon.
  *
  * @return {JSX.Element} Shield and Alert SVG Icon
  */
 export default function ShieldAlertIcon( {
 	className,
-	width = '80',
-	height = '96',
-	color = '#069E08',
+	width = '40',
+	height = '48',
+	color = '#D63638',
 }: {
 	className?: string;
 	width?: string;
@@ -27,20 +27,19 @@ export default function ShieldAlertIcon( {
 			className={ className }
 			width={ width }
 			height={ height }
-			viewBox="0 0 80 96"
+			viewBox="0 0 40 48"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				d="M20 0L40 8.91914V22.2152C40 33.5494 32.5803 44.2809 22.1176 47.6664C20.7428 48.1112 19.2572 48.1112 17.8824 47.6664C7.41973 44.2809 0 33.5494 0 22.2152V8.91914L20 0Z"
 				fill={ color }
 			/>
+			<rect x="17" y="31" width="6" height="6" rx="3" fill="white" />
 			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+				d="M17.0664 13.0624C17.0304 12.4867 17.4876 12 18.0645 12H21.9355C22.5124 12 22.9696 12.4867 22.9336 13.0624L22.0586 27.0624C22.0257 27.5894 21.5886 28 21.0605 28H18.9395C18.4114 28 17.9743 27.5894 17.9414 27.0624L17.0664 13.0624Z"
 				fill="white"
 			/>
 		</svg>
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
index 8726b582e346d..1f7b030977387 100644
--- a/projects/js-packages/components/components/scan-report/styles.module.scss
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -15,7 +15,6 @@
 }
 
 .tooltip {
-	margin-top: var( --spacing-base )	;
 	max-width: 240px;
 	border-radius: 4px;
 	text-align: left;

From 28636c81ccf2b002aea448be571836e86aacaf15 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:52:55 -0800
Subject: [PATCH 047/143] Simplify

---
 .../components/scan-report/constants.ts       | 22 +-----------
 .../components/scan-report/index.tsx          | 23 ++++++-------
 .../scan-report/stories/index.stories.tsx     | 34 -------------------
 3 files changed, 11 insertions(+), 68 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 1487b203374f8..8596ed4add809 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -7,13 +7,6 @@ import {
 	wordpress as coreIcon,
 } from '@wordpress/icons';
 
-export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
-	[
-		{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
-		{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
-		{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
-	];
-
 export const THREAT_TYPES = [
 	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
 	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
@@ -29,22 +22,9 @@ export const THREAT_ICONS = {
 	default: shieldIcon,
 };
 
-export const THREAT_FIELD_THREAT = 'threat';
-export const THREAT_FIELD_TITLE = 'title';
-export const THREAT_FIELD_DESCRIPTION = 'description';
 export const THREAT_FIELD_ICON = 'icon';
-export const THREAT_FIELD_STATUS = 'status';
 export const THREAT_FIELD_TYPE = 'type';
 export const THREAT_FIELD_EXTENSION = 'extension';
-export const THREAT_FIELD_PLUGIN = 'plugin';
-export const THREAT_FIELD_THEME = 'theme';
 export const THREAT_FIELD_SAFETY = 'safety';
-export const THREAT_FIELD_SIGNATURE = 'signature';
-export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
-export const THREAT_FIELD_FIXED_ON = 'fixed-on';
-export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
 export const THREAT_FIELD_UPDATE = 'update';
-
-export const THREAT_ACTION_FIX = 'fix';
-export const THREAT_ACTION_IGNORE = 'ignore';
-export const THREAT_ACTION_UNIGNORE = 'unignore';
+export const THREAT_FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 8edd902ea6940..c97c261b5fe58 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -7,13 +7,13 @@ import {
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
-import { Icon, check } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import {
 	THREAT_FIELD_EXTENSION,
+	THREAT_FIELD_VERSION,
 	THREAT_FIELD_ICON,
 	THREAT_FIELD_SAFETY,
-	THREAT_FIELD_UPDATE,
 	THREAT_FIELD_TYPE,
 	THREAT_TYPES,
 	THREAT_ICONS,
@@ -33,7 +33,6 @@ import styles from './styles.module.scss';
  * @return {JSX.Element} The ScanReport component.
  */
 export default function ScanReport( { data, filters, onChangeSelection } ): JSX.Element {
-	// TODO: Add types
 	const baseView = {
 		search: '',
 		filters: filters || [],
@@ -55,7 +54,7 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 				THREAT_FIELD_SAFETY,
 				THREAT_FIELD_TYPE,
 				THREAT_FIELD_EXTENSION,
-				THREAT_FIELD_UPDATE,
+				THREAT_FIELD_VERSION,
 			],
 			layout: {
 				primaryField: THREAT_FIELD_SAFETY,
@@ -63,9 +62,9 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 		},
 		list: {
 			...baseView,
-			fields: [ THREAT_FIELD_SAFETY, THREAT_FIELD_TYPE, THREAT_FIELD_UPDATE ],
+			fields: [ THREAT_FIELD_SAFETY, THREAT_FIELD_EXTENSION, THREAT_FIELD_VERSION ],
 			layout: {
-				primaryField: THREAT_FIELD_EXTENSION,
+				primaryField: THREAT_FIELD_TYPE,
 				mediaField: THREAT_FIELD_ICON,
 			},
 		},
@@ -144,15 +143,14 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 				enableGlobalSearch: true,
 				render( { item } ) {
 					return item.name ? item.name : '';
-					// TODO: Account for file and db?
 				},
 			},
 			{
-				id: THREAT_FIELD_UPDATE,
-				label: __( 'Update Available', 'jetpack' ),
-				render() {
-					return <Icon className={ styles.check } icon={ check } />;
-					// TODO: Is this possible to determine?
+				id: THREAT_FIELD_VERSION,
+				label: __( 'Version', 'jetpack' ),
+				enableGlobalSearch: true,
+				render( { item } ) {
+					return item.version ? item.version : '';
 				},
 			},
 			{
@@ -195,7 +193,6 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
 	 */
 	const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] );
-	// TODO: Do we need this? dataset doesn't come with an id for each
 
 	return (
 		<DataViews
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index b12c5fe15b902..977653c80a13f 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -20,7 +20,6 @@ export default {
 
 export const Default = args => <ScanReport { ...args } />;
 Default.args = {
-	// TODO: Need to pass all core, plugins, themes, files, and database as a flat array
 	data: [
 		{
 			id: 1,
@@ -52,36 +51,3 @@ Default.args = {
 	],
 	filters: [],
 };
-
-// data: {
-// 	core: {
-// 		name: 'WordPress',
-// 		slug: null,
-// 		version: '6.7.1',
-// 		threats: [],
-// 		checked: true,
-// 		type: 'core',
-// 	},
-// 	plugins: [
-// 		{
-// 			name: 'Jetpack',
-// 			slug: 'jetpack/jetpack.php',
-// 			version: '14.1-a.7',
-// 			threats: [],
-// 			checked: false,
-// 			type: 'plugins',
-// 		},
-// 	],
-// 	themes: [
-// 		{
-// 			name: 'Twenty Fifteen',
-// 			slug: 'twentyfifteen',
-// 			version: '14.1-a.7',
-// 			threats: [],
-// 			checked: true,
-// 			type: 'themes',
-// 		},
-// 	],
-// 	files: [],
-// 	database: [],
-// }

From 9154ff708819a00e1dd82961aa45ee7bd10d1714 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:53:27 -0800
Subject: [PATCH 048/143] changelog

---
 .../components/changelog/components-add-scan-report           | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/js-packages/components/changelog/components-add-scan-report

diff --git a/projects/js-packages/components/changelog/components-add-scan-report b/projects/js-packages/components/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..ba0fbd4cce025
--- /dev/null
+++ b/projects/js-packages/components/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport component

From 8b64c2bf2d29850e68e048d8ab11cd38014cb81f Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 12:54:14 -0800
Subject: [PATCH 049/143] Remove file type

---
 .../js-packages/components/components/scan-report/constants.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 8596ed4add809..a0779c995939b 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -11,7 +11,6 @@ export const THREAT_TYPES = [
 	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
 	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
 	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
-	{ value: 'file', label: __( 'File', 'jetpack' ) },
 ];
 
 export const THREAT_ICONS = {

From 52c71e4b31f4f1827651453fb29689f000d414a3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 13:08:36 -0800
Subject: [PATCH 050/143] Add dedicated components for shield icons

---
 .../components/scan-report/index.tsx          |  4 ++--
 .../components/scan-report/styles.module.scss | 19 -----------------
 .../index.tsx}                                |  0
 .../shield-alert/stories/index.stories.tsx    | 21 +++++++++++++++++++
 .../index.tsx}                                |  0
 .../shield-check/stories/index.stories.tsx    | 21 +++++++++++++++++++
 6 files changed, 44 insertions(+), 21 deletions(-)
 rename projects/js-packages/components/components/{scan-report/shield-alert.tsx => shield-alert/index.tsx} (100%)
 create mode 100644 projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
 rename projects/js-packages/components/components/{scan-report/shield-check.tsx => shield-check/index.tsx} (100%)
 create mode 100644 projects/js-packages/components/components/shield-check/stories/index.stories.tsx

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index c97c261b5fe58..a05f871d38601 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -9,6 +9,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
+import ShieldAlertIcon from '../shield-alert';
+import ShieldCheckIcon from '../shield-check';
 import {
 	THREAT_FIELD_EXTENSION,
 	THREAT_FIELD_VERSION,
@@ -18,8 +20,6 @@ import {
 	THREAT_TYPES,
 	THREAT_ICONS,
 } from './constants';
-import ShieldAlertIcon from './shield-alert';
-import ShieldCheckIcon from './shield-check';
 import styles from './styles.module.scss';
 
 /**
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
index 1f7b030977387..d313d4cb8898a 100644
--- a/projects/js-packages/components/components/scan-report/styles.module.scss
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -18,23 +18,4 @@
 	max-width: 240px;
 	border-radius: 4px;
 	text-align: left;
-}
-
-.shield {
-
-	&__threat {
-		fill: #F0B849;
-	}
-
-	&__checked {
-		fill: var( --jp-green-40 );
-	}
-
-	&__unchecked {
-		fill: var( --jp-gray-40 );
-	}
-}
-
-.check {
-	fill: var( --jp-green-40 );
 }
\ No newline at end of file
diff --git a/projects/js-packages/components/components/scan-report/shield-alert.tsx b/projects/js-packages/components/components/shield-alert/index.tsx
similarity index 100%
rename from projects/js-packages/components/components/scan-report/shield-alert.tsx
rename to projects/js-packages/components/components/shield-alert/index.tsx
diff --git a/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx b/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d8393504574a6
--- /dev/null
+++ b/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
@@ -0,0 +1,21 @@
+import ShieldAlertIcon from '..';
+
+export default {
+	title: 'JS Packages/Components/Shield Alert',
+	component: ShieldAlertIcon,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = () => <ShieldAlertIcon />;
diff --git a/projects/js-packages/components/components/scan-report/shield-check.tsx b/projects/js-packages/components/components/shield-check/index.tsx
similarity index 100%
rename from projects/js-packages/components/components/scan-report/shield-check.tsx
rename to projects/js-packages/components/components/shield-check/index.tsx
diff --git a/projects/js-packages/components/components/shield-check/stories/index.stories.tsx b/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
new file mode 100644
index 0000000000000..31d20c55f51e4
--- /dev/null
+++ b/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
@@ -0,0 +1,21 @@
+import ShieldCheckIcon from '..';
+
+export default {
+	title: 'JS Packages/Components/Shield Check',
+	component: ShieldCheckIcon,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = () => <ShieldCheckIcon />;

From 554b0376f18e6013b9f98e3e8f7d65cfd75ae652 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 13:57:09 -0800
Subject: [PATCH 051/143] Add ScanReport to Protect

---
 .../components/scan-report/constants.ts       | 25 ++++---
 .../components/scan-report/index.tsx          | 70 +++++++++++--------
 projects/js-packages/components/index.ts      |  3 +
 .../src/js/components/alert-icon/index.tsx    | 47 -------------
 .../alert-icon/stories/index.stories.jsx      | 18 -----
 .../error-admin-section-hero/index.tsx        |  5 +-
 .../components/protect-check-icon/index.tsx   | 48 -------------
 .../src/js/components/threats-list/empty.jsx  |  5 +-
 .../src/js/routes/home/home-statcards.jsx     | 18 +++--
 .../protect/src/js/routes/home/index.jsx      | 15 +++-
 .../src/js/routes/scan/history/index.jsx      | 13 +++-
 11 files changed, 98 insertions(+), 169 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/protect-check-icon/index.tsx

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index a0779c995939b..6c1d5f12e9647 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -7,13 +7,20 @@ import {
 	wordpress as coreIcon,
 } from '@wordpress/icons';
 
-export const THREAT_TYPES = [
+export const STATUS_TYPES = [
+	{ value: 'checked', label: __( 'Checked', 'jetpack' ) },
+	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack' ) },
+	{ value: 'threat', label: __( 'Threats', 'jetpack' ) },
+];
+
+export const TYPES = [
+	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
 	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
 	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
-	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
+	{ value: 'file', label: __( 'File', 'jetpack' ) },
 ];
 
-export const THREAT_ICONS = {
+export const ICONS = {
 	plugins: pluginIcon,
 	themes: themeIcon,
 	core: coreIcon,
@@ -21,9 +28,9 @@ export const THREAT_ICONS = {
 	default: shieldIcon,
 };
 
-export const THREAT_FIELD_ICON = 'icon';
-export const THREAT_FIELD_TYPE = 'type';
-export const THREAT_FIELD_EXTENSION = 'extension';
-export const THREAT_FIELD_SAFETY = 'safety';
-export const THREAT_FIELD_UPDATE = 'update';
-export const THREAT_FIELD_VERSION = 'version';
+export const FIELD_ICON = 'icon';
+export const FIELD_TYPE = 'type';
+export const FIELD_EXTENSION = 'extension';
+export const FIELD_STATUS = 'status';
+export const FIELD_UPDATE = 'update';
+export const FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index a05f871d38601..dca5a2ad91d4f 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -12,13 +12,14 @@ import { useCallback, useMemo, useState } from 'react';
 import ShieldAlertIcon from '../shield-alert';
 import ShieldCheckIcon from '../shield-check';
 import {
-	THREAT_FIELD_EXTENSION,
-	THREAT_FIELD_VERSION,
-	THREAT_FIELD_ICON,
-	THREAT_FIELD_SAFETY,
-	THREAT_FIELD_TYPE,
-	THREAT_TYPES,
-	THREAT_ICONS,
+	FIELD_EXTENSION,
+	FIELD_VERSION,
+	FIELD_ICON,
+	FIELD_STATUS,
+	FIELD_TYPE,
+	STATUS_TYPES,
+	TYPES,
+	ICONS,
 } from './constants';
 import styles from './styles.module.scss';
 
@@ -27,17 +28,16 @@ import styles from './styles.module.scss';
  *
  * @param {object}   props                   - Component props.
  * @param {Array}    props.data              - Threats data.
- * @param {Array}    props.filters           - Initial DataView filters.
  * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
  *
  * @return {JSX.Element} The ScanReport component.
  */
-export default function ScanReport( { data, filters, onChangeSelection } ): JSX.Element {
+export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 	const baseView = {
 		search: '',
-		filters: filters || [],
+		filters: [],
 		page: 1,
-		perPage: 20,
+		perPage: 5,
 	};
 
 	/**
@@ -50,22 +50,17 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 	const defaultLayouts: SupportedLayouts = {
 		table: {
 			...baseView,
-			fields: [
-				THREAT_FIELD_SAFETY,
-				THREAT_FIELD_TYPE,
-				THREAT_FIELD_EXTENSION,
-				THREAT_FIELD_VERSION,
-			],
+			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_EXTENSION, FIELD_VERSION ],
 			layout: {
-				primaryField: THREAT_FIELD_SAFETY,
+				primaryField: FIELD_STATUS,
 			},
 		},
 		list: {
 			...baseView,
-			fields: [ THREAT_FIELD_SAFETY, THREAT_FIELD_EXTENSION, THREAT_FIELD_VERSION ],
+			fields: [ FIELD_STATUS, FIELD_VERSION ],
 			layout: {
-				primaryField: THREAT_FIELD_TYPE,
-				mediaField: THREAT_FIELD_ICON,
+				primaryField: FIELD_EXTENSION,
+				mediaField: FIELD_ICON,
 			},
 		},
 	};
@@ -90,8 +85,18 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 
 		const result = [
 			{
-				id: THREAT_FIELD_SAFETY,
-				label: __( 'Safety', 'jetpack' ),
+				id: FIELD_STATUS,
+				label: __( 'Status', 'jetpack' ),
+				elements: STATUS_TYPES,
+				getValue( { item } ) {
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							return 'threat';
+						}
+						return 'checked';
+					}
+					return 'unchecked';
+				},
 				render( { item } ) {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
@@ -130,36 +135,43 @@ export default function ScanReport( { data, filters, onChangeSelection } ): JSX.
 				},
 			},
 			{
-				id: THREAT_FIELD_TYPE,
+				id: FIELD_TYPE,
 				label: __( 'Type', 'jetpack' ),
-				elements: THREAT_TYPES,
+				elements: TYPES,
+				enableHiding: false,
 				render( { item } ) {
 					return item.type ? item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 ) : '';
 				},
 			},
 			{
-				id: THREAT_FIELD_EXTENSION,
+				id: FIELD_EXTENSION,
 				label: __( 'Extension', 'jetpack' ),
 				enableGlobalSearch: true,
+				enableHiding: false,
+				getValue( { item } ) {
+					return item.name ? item.name : '';
+				},
 				render( { item } ) {
 					return item.name ? item.name : '';
 				},
 			},
 			{
-				id: THREAT_FIELD_VERSION,
+				id: FIELD_VERSION,
 				label: __( 'Version', 'jetpack' ),
 				enableGlobalSearch: true,
+				enableHiding: false,
 				render( { item } ) {
 					return item.version ? item.version : '';
 				},
 			},
 			{
-				id: THREAT_FIELD_ICON,
+				id: FIELD_ICON,
 				label: __( 'Icon', 'jetpack' ),
+				enableHiding: false,
 				render( { item } ) {
 					return (
 						<div className={ styles.threat__media }>
-							<Icon icon={ THREAT_ICONS[ item.type ] } />
+							<Icon icon={ ICONS[ item.type ] } />
 						</div>
 					);
 				},
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index eb90df97ad5fe..4a9d4313429ef 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,6 +47,9 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
+export { default as ScanReport } from './components/scan-report';
+export { default as ShieldCheckIcon } from './components/shield-check';
+export { default as ShieldAlertIcon } from './components/shield-alert';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.tsx b/projects/plugins/protect/src/js/components/alert-icon/index.tsx
deleted file mode 100644
index 65f8b1ddf2eaa..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-/**
- * Alert icon
- *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.width     - Optional icon width. Defaults to '127'.
- * @param {string} props.height    - Optional icon height. Defaults to '136'.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
- *
- * @return {JSX.Element}      The Alert Icon component.
- */
-export default function Alert( {
-	className,
-	width = '40',
-	height = '48',
-	color = '#D63638',
-}: {
-	className?: string;
-	width?: string;
-	height?: string;
-	color?: string;
-} ): JSX.Element {
-	return (
-		<svg
-			className={ className }
-			width={ width }
-			height={ height }
-			viewBox="0 0 40 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M20 0L40 8.91914V22.2152C40 33.5494 32.5803 44.2809 22.1176 47.6664C20.7428 48.1112 19.2572 48.1112 17.8824 47.6664C7.41973 44.2809 0 33.5494 0 22.2152V8.91914L20 0Z"
-				fill={ color }
-			/>
-			<rect x="17" y="31" width="6" height="6" rx="3" fill="white" />
-			<path
-				d="M17.0664 13.0624C17.0304 12.4867 17.4876 12 18.0645 12H21.9355C22.5124 12 22.9696 12.4867 22.9336 13.0624L22.0586 27.0624C22.0257 27.5894 21.5886 28 21.0605 28H18.9395C18.4114 28 17.9743 27.5894 17.9414 27.0624L17.0664 13.0624Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
deleted file mode 100644
index f49ddf4877c46..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import Alert from '../index.tsx';
-
-export default {
-	title: 'Plugins/Protect/Alert Icon',
-	component: Alert,
-	argTypes: {
-		color: {
-			control: {
-				type: 'color',
-			},
-		},
-	},
-};
-
-const FooterTemplate = args => <Alert { ...args } />;
-export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 842421ba19692..1a12768b1d197 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,7 +1,6 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, ShieldAlertIcon } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import AdminSectionHero from '../admin-section-hero';
-import Alert from '../alert-icon';
 import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
@@ -25,7 +24,7 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<Alert className={ styles.warning } />
+							<ShieldAlertIcon className={ styles.warning } />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
 						</div>
 					</AdminSectionHero.Heading>
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
deleted file mode 100644
index e222d61adcadf..0000000000000
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @param {object} props                   - Component props.
- * @param {string} [props.className]       - The class name to add to the SVG Icon.
- * @param {string} [props.width="80"]      - The width of the SVG Icon.
- * @param {string} [props.height="96"]     - The height of the SVG Icon.
- * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
- *
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ProtectCheck( {
-	className,
-	width = '80',
-	height = '96',
-	color = '#069E08',
-}: {
-	className?: string;
-	width?: string;
-	height?: string;
-	color?: string;
-} ): JSX.Element {
-	return (
-		<svg
-			className={ className }
-			width={ width }
-			height={ height }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ color }
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
index 97b80d1e9a9cd..257c3139010cd 100644
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -1,4 +1,4 @@
-import { H3, Text } from '@automattic/jetpack-components';
+import { H3, Text, ShieldCheckIcon } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useMemo, useState } from 'react';
@@ -6,7 +6,6 @@ import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-s
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import OnboardingPopover from '../onboarding-popover';
-import ProtectCheck from '../protect-check-icon';
 import ScanButton from '../scan-button';
 import styles from './styles.module.scss';
 
@@ -84,7 +83,7 @@ const EmptyList = () => {
 
 	return (
 		<div className={ styles.empty }>
-			<ProtectCheck />
+			<ShieldCheckIcon />
 			<H3 weight="bold" mt={ 8 }>
 				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 			</H3>
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 4d03623fb6f11..9eb1f0f448bad 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,9 +1,13 @@
-import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import {
+	Text,
+	useBreakpointMatch,
+	StatCard,
+	ShieldCheckIcon,
+	ShieldAlertIcon,
+} from '@automattic/jetpack-components';
 import { Spinner, Tooltip } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo, useCallback } from 'react';
-import Alert from '../../components/alert-icon';
-import ProtectCheck from '../../components/protect-check-icon';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
@@ -62,9 +66,9 @@ const HomeStatCards = () => {
 	const renderIcon = useCallback(
 		isFeatureEnabled =>
 			isFeatureEnabled ? (
-				<ProtectCheck { ...defaultDimensions } />
+				<ShieldCheckIcon { ...defaultDimensions } />
 			) : (
-				<Alert { ...defaultDimensions } color="#A7AAAD" />
+				<ShieldAlertIcon { ...defaultDimensions } color="#A7AAAD" />
 			),
 		[ defaultDimensions ]
 	);
@@ -116,10 +120,10 @@ const HomeStatCards = () => {
 		if ( scanning ) {
 			scanIcon = <Spinner />;
 		} else if ( scanError ) {
-			scanIcon = <Alert { ...defaultDimensions } />;
+			scanIcon = <ShieldAlertIcon { ...defaultDimensions } />;
 		} else {
 			scanIcon = (
-				<ProtectCheck { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />
+				<ShieldCheckIcon { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />
 			);
 		}
 
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 718349caaac3f..df15755162dfe 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,5 +1,6 @@
-import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
+import useProtectData from '../../hooks/use-protect-data';
 import HomeAdminSectionHero from './home-admin-section-hero';
 
 /**
@@ -10,12 +11,22 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
+	const {
+		results: { core, plugins, themes },
+	} = useProtectData();
+
+	const data = [ ...core, ...plugins, ...themes ].map( ( item, index ) => {
+		return { ...item, id: index + 1 };
+	} );
+
 	return (
 		<AdminPage>
 			<HomeAdminSectionHero />
 			<AdminSection>
 				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-					<Col>{ /* TODO: Add ScanReport component here */ }</Col>
+					<Col>
+						<ScanReport data={ data } />
+					</Col>
 				</Container>
 			</AdminSection>
 		</AdminPage>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
index d0c8a53bb6c99..8b570efb337ae 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
@@ -1,9 +1,16 @@
-import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
+import {
+	AdminSection,
+	Container,
+	Col,
+	H3,
+	Text,
+	Title,
+	ShieldCheckIcon,
+} from '@automattic/jetpack-components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import AdminPage from '../../../components/admin-page';
-import ProtectCheck from '../../../components/protect-check-icon';
 import ThreatsNavigation from '../../../components/threats-list/navigation';
 import PaidList from '../../../components/threats-list/paid-list';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
@@ -272,7 +279,7 @@ const ScanHistoryRoute = () => {
 												</div>
 											</div>
 											<div className={ styles.empty }>
-												<ProtectCheck />
+												<ShieldCheckIcon />
 												<H3 weight="bold" mt={ 8 }>
 													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 												</H3>

From 0c006acf47a3a87594d6cff46e2c90986c0898c2 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 14:31:42 -0800
Subject: [PATCH 052/143] Update extension field

---
 .../components/components/scan-report/constants.ts            | 2 +-
 .../js-packages/components/components/scan-report/index.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 6c1d5f12e9647..c12a41cc5bdef 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -30,7 +30,7 @@ export const ICONS = {
 
 export const FIELD_ICON = 'icon';
 export const FIELD_TYPE = 'type';
-export const FIELD_EXTENSION = 'extension';
+export const FIELD_NAME = 'name';
 export const FIELD_STATUS = 'status';
 export const FIELD_UPDATE = 'update';
 export const FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index dca5a2ad91d4f..dc216981c979b 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -144,8 +144,8 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 				},
 			},
 			{
-				id: FIELD_EXTENSION,
-				label: __( 'Extension', 'jetpack' ),
+				id: FIELD_NAME,
+				label: __( 'Name', 'jetpack' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				getValue( { item } ) {

From 0834d9f65fc59a5269dd0e7194f493f362c33836 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 14:33:18 -0800
Subject: [PATCH 053/143] Fix constants

---
 .../js-packages/components/components/scan-report/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index dc216981c979b..2be50fa0b77a0 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -12,7 +12,7 @@ import { useCallback, useMemo, useState } from 'react';
 import ShieldAlertIcon from '../shield-alert';
 import ShieldCheckIcon from '../shield-check';
 import {
-	FIELD_EXTENSION,
+	FIELD_NAME,
 	FIELD_VERSION,
 	FIELD_ICON,
 	FIELD_STATUS,
@@ -50,7 +50,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 	const defaultLayouts: SupportedLayouts = {
 		table: {
 			...baseView,
-			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_EXTENSION, FIELD_VERSION ],
+			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
 			layout: {
 				primaryField: FIELD_STATUS,
 			},
@@ -59,7 +59,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			...baseView,
 			fields: [ FIELD_STATUS, FIELD_VERSION ],
 			layout: {
-				primaryField: FIELD_EXTENSION,
+				primaryField: FIELD_NAME,
 				mediaField: FIELD_ICON,
 			},
 		},

From 1d3ca0c49e7b7d2841435f9e6b13b375892c438c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 14:40:27 -0800
Subject: [PATCH 054/143] Match icons

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 9eb1f0f448bad..aa4df64797926 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -121,10 +121,10 @@ const HomeStatCards = () => {
 			scanIcon = <Spinner />;
 		} else if ( scanError ) {
 			scanIcon = <ShieldAlertIcon { ...defaultDimensions } />;
+		} else if ( numThreats ) {
+			scanIcon = <ShieldAlertIcon { ...defaultDimensions } color={ '#F0B849' } />;
 		} else {
-			scanIcon = (
-				<ShieldCheckIcon { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />
-			);
+			scanIcon = <ShieldCheckIcon { ...defaultDimensions } color={ '#069E08' } />;
 		}
 
 		let scanLabel;

From 36ac533e5a8981ea625f204e20860cbd740e2f21 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:00:32 -0800
Subject: [PATCH 055/143] Add files threats

---
 .../components/scan-report/constants.ts       |  2 +-
 .../scan-report/stories/index.stories.tsx     | 25 +++++++++++++++++--
 .../protect/src/js/routes/home/index.jsx      | 21 ++++++++++++++--
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index c12a41cc5bdef..b8ec6be497f19 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -17,7 +17,7 @@ export const TYPES = [
 	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
 	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
 	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
-	{ value: 'file', label: __( 'File', 'jetpack' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack' ) },
 ];
 
 export const ICONS = {
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index 977653c80a13f..d81cc9d615719 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -43,11 +43,32 @@ Default.args = {
 			id: 3,
 			name: 'Twenty Fifteen',
 			slug: 'twentyfifteen',
-			version: '14.1-a.7',
-			threats: [ 'threat' ],
+			version: '1.1',
+			threats: [
+				{
+					id: 198352527,
+					signature: 'Vulnerable.WP.Extension',
+					description: 'Vulnerable WordPress extension',
+					severity: 3,
+				},
+			],
 			checked: true,
 			type: 'themes',
 		},
+		{
+			id: 4,
+			name: '/var/www/html/wp-content/uploads/jptt_eicar.php',
+			threats: [
+				{
+					id: 198352406,
+					signature: 'EICAR_AV_Test_Suspicious',
+					title: 'Malicious code found in file: jptt_eicar.php',
+					severity: 1,
+				},
+			],
+			checked: true,
+			type: 'files',
+		},
 	],
 	filters: [],
 };
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index df15755162dfe..6d572ea64cc22 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -12,10 +12,27 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  */
 const HomePage = () => {
 	const {
-		results: { core, plugins, themes },
+		results: { core, plugins, themes, files },
 	} = useProtectData();
 
-	const data = [ ...core, ...plugins, ...themes ].map( ( item, index ) => {
+	const fileThreats =
+		files.length > 0
+			? files.map( threat => ( {
+					checked: true,
+					name: threat.filename,
+					threats: [ threat ],
+					type: 'files',
+			  } ) )
+			: [
+					{
+						checked: true,
+						name: '',
+						threats: [],
+						type: 'files',
+					},
+			  ];
+
+	const data = [ ...core, ...plugins, ...themes, ...fileThreats ].map( ( item, index ) => {
 		return { ...item, id: index + 1 };
 	} );
 

From 8d8bf24095fb0e132d0001149db9e94d7f9f37cb Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:03:10 -0800
Subject: [PATCH 056/143] Remove changelogs

---
 .../changelog/update-repo-gardening-need-label-message-update | 4 ----
 .../plugins/search/changelog/update-fetch-available-licenses  | 4 ----
 .../plugins/social/changelog/update-fetch-available-licenses  | 4 ----
 .../starter-plugin/changelog/update-fetch-available-licenses  | 4 ----
 .../videopress/changelog/update-fetch-available-licenses      | 4 ----
 5 files changed, 20 deletions(-)
 delete mode 100644 projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
 delete mode 100644 projects/plugins/search/changelog/update-fetch-available-licenses
 delete mode 100644 projects/plugins/social/changelog/update-fetch-available-licenses
 delete mode 100644 projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
 delete mode 100644 projects/plugins/videopress/changelog/update-fetch-available-licenses

diff --git a/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update b/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
deleted file mode 100644
index f9b9b65aced9d..0000000000000
--- a/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Prompt for labels: update wording.
diff --git a/projects/plugins/search/changelog/update-fetch-available-licenses b/projects/plugins/search/changelog/update-fetch-available-licenses
deleted file mode 100644
index 3c349c8b1445e..0000000000000
--- a/projects/plugins/search/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/social/changelog/update-fetch-available-licenses b/projects/plugins/social/changelog/update-fetch-available-licenses
deleted file mode 100644
index 3c349c8b1445e..0000000000000
--- a/projects/plugins/social/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses b/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
deleted file mode 100644
index 3c349c8b1445e..0000000000000
--- a/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/videopress/changelog/update-fetch-available-licenses b/projects/plugins/videopress/changelog/update-fetch-available-licenses
deleted file mode 100644
index 3c349c8b1445e..0000000000000
--- a/projects/plugins/videopress/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.

From b299e525fcc77a0bfd1c397059d3ca256966c179 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:06:49 -0800
Subject: [PATCH 057/143] Remove unintended additions

---
 .../repo-gardening/src/tasks/triage-issues/ai-labeling.js | 8 +-------
 .../repo-gardening/src/tasks/triage-issues/index.js       | 2 +-
 .../changelog/update-@wordpress-editor-and-fix-issues     | 4 ----
 projects/js-packages/publicize-components/package.json    | 2 +-
 .../licensing/changelog/update-fetch-available-licenses   | 4 ----
 5 files changed, 3 insertions(+), 17 deletions(-)
 delete mode 100644 projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
 delete mode 100644 projects/packages/licensing/changelog/update-fetch-available-licenses

diff --git a/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js b/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
index 12dcdcc3da8cc..5675e176024a1 100644
--- a/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
+++ b/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
@@ -192,17 +192,11 @@ async function aiLabeling( payload, octokit ) {
 			} );
 
 			// During testing, post a comment on the issue with the explanations.
-			let explanationComment = `**OpenAI suggested the following labels for this issue:**
+			const explanationComment = `**OpenAI suggested the following labels for this issue:**
 ${ Object.entries( explanations )
 	.map( ( [ labelName, explanation ] ) => `- ${ labelName }: ${ explanation }` )
 	.join( '\n' ) }`;
 
-			if ( ownerLogin === 'automattic' ) {
-				explanationComment += `
-
-If you have feedback about the labels suggested, please let us know in #repo-gardening!`;
-			}
-
 			await octokit.rest.issues.createComment( {
 				owner: ownerLogin,
 				repo: name,
diff --git a/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js b/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
index 77f7103ab22f9..0108eefc6806a 100644
--- a/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
+++ b/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
@@ -45,7 +45,7 @@ async function addCommentAskLabels( octokit, ownerLogin, authorLogin, repo, issu
 		return;
 	}
 
-	const commentBody = `This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a \`[Type]\`, a \`[Feature]\`, and a \`[Pri]\` label?
+	const commentBody = `It looks like you didn't add any labels to this issue. Could you please add a \`[Type]\`, a \`[Feature]\`, and a \`[Pri]\` label? Those labels will help us categorize and monitor activity in this repository.
 `;
 
 	await octokit.rest.issues.createComment( {
diff --git a/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues b/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
deleted file mode 100644
index d73147b9c7a39..0000000000000
--- a/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Updated @wordpress/editor to the latest version
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index 4f0e249db891d..3d8833de879ec 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -37,7 +37,7 @@
 		"@wordpress/dataviews": "4.8.0",
 		"@wordpress/date": "5.12.0",
 		"@wordpress/edit-post": "8.12.0",
-		"@wordpress/editor": "14.13.0",
+		"@wordpress/editor": "14.12.0",
 		"@wordpress/element": "6.12.0",
 		"@wordpress/hooks": "4.12.0",
 		"@wordpress/html-entities": "4.12.0",
diff --git a/projects/packages/licensing/changelog/update-fetch-available-licenses b/projects/packages/licensing/changelog/update-fetch-available-licenses
deleted file mode 100644
index dcb780add9500..0000000000000
--- a/projects/packages/licensing/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Exclude revoked licenses from results when filtering unattached licenses in `Licensing::get_user_licenses()`. Only unattached and valid licenses are now returned.

From ee3289f89bb89cf011cc32f383b394058ce0593b Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:16:25 -0800
Subject: [PATCH 058/143] Revert prior commit

---
 .../repo-gardening/src/tasks/triage-issues/ai-labeling.js | 8 +++++++-
 .../repo-gardening/src/tasks/triage-issues/index.js       | 2 +-
 .../changelog/update-@wordpress-editor-and-fix-issues     | 4 ++++
 .../licensing/changelog/update-fetch-available-licenses   | 4 ++++
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
 create mode 100644 projects/packages/licensing/changelog/update-fetch-available-licenses

diff --git a/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js b/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
index 5675e176024a1..12dcdcc3da8cc 100644
--- a/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
+++ b/projects/github-actions/repo-gardening/src/tasks/triage-issues/ai-labeling.js
@@ -192,11 +192,17 @@ async function aiLabeling( payload, octokit ) {
 			} );
 
 			// During testing, post a comment on the issue with the explanations.
-			const explanationComment = `**OpenAI suggested the following labels for this issue:**
+			let explanationComment = `**OpenAI suggested the following labels for this issue:**
 ${ Object.entries( explanations )
 	.map( ( [ labelName, explanation ] ) => `- ${ labelName }: ${ explanation }` )
 	.join( '\n' ) }`;
 
+			if ( ownerLogin === 'automattic' ) {
+				explanationComment += `
+
+If you have feedback about the labels suggested, please let us know in #repo-gardening!`;
+			}
+
 			await octokit.rest.issues.createComment( {
 				owner: ownerLogin,
 				repo: name,
diff --git a/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js b/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
index 0108eefc6806a..77f7103ab22f9 100644
--- a/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
+++ b/projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js
@@ -45,7 +45,7 @@ async function addCommentAskLabels( octokit, ownerLogin, authorLogin, repo, issu
 		return;
 	}
 
-	const commentBody = `It looks like you didn't add any labels to this issue. Could you please add a \`[Type]\`, a \`[Feature]\`, and a \`[Pri]\` label? Those labels will help us categorize and monitor activity in this repository.
+	const commentBody = `This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a \`[Type]\`, a \`[Feature]\`, and a \`[Pri]\` label?
 `;
 
 	await octokit.rest.issues.createComment( {
diff --git a/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues b/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
new file mode 100644
index 0000000000000..d73147b9c7a39
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated @wordpress/editor to the latest version
diff --git a/projects/packages/licensing/changelog/update-fetch-available-licenses b/projects/packages/licensing/changelog/update-fetch-available-licenses
new file mode 100644
index 0000000000000..dcb780add9500
--- /dev/null
+++ b/projects/packages/licensing/changelog/update-fetch-available-licenses
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Exclude revoked licenses from results when filtering unattached licenses in `Licensing::get_user_licenses()`. Only unattached and valid licenses are now returned.

From 58bef981f64c7acd9c85fc4ae3aa0f17b091dbbe Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:16:35 -0800
Subject: [PATCH 059/143] Revert "Remove changelogs"

This reverts commit 8d8bf24095fb0e132d0001149db9e94d7f9f37cb.
---
 .../changelog/update-repo-gardening-need-label-message-update | 4 ++++
 .../plugins/search/changelog/update-fetch-available-licenses  | 4 ++++
 .../plugins/social/changelog/update-fetch-available-licenses  | 4 ++++
 .../starter-plugin/changelog/update-fetch-available-licenses  | 4 ++++
 .../videopress/changelog/update-fetch-available-licenses      | 4 ++++
 5 files changed, 20 insertions(+)
 create mode 100644 projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
 create mode 100644 projects/plugins/search/changelog/update-fetch-available-licenses
 create mode 100644 projects/plugins/social/changelog/update-fetch-available-licenses
 create mode 100644 projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
 create mode 100644 projects/plugins/videopress/changelog/update-fetch-available-licenses

diff --git a/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update b/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
new file mode 100644
index 0000000000000..f9b9b65aced9d
--- /dev/null
+++ b/projects/github-actions/repo-gardening/changelog/update-repo-gardening-need-label-message-update
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Prompt for labels: update wording.
diff --git a/projects/plugins/search/changelog/update-fetch-available-licenses b/projects/plugins/search/changelog/update-fetch-available-licenses
new file mode 100644
index 0000000000000..3c349c8b1445e
--- /dev/null
+++ b/projects/plugins/search/changelog/update-fetch-available-licenses
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/social/changelog/update-fetch-available-licenses b/projects/plugins/social/changelog/update-fetch-available-licenses
new file mode 100644
index 0000000000000..3c349c8b1445e
--- /dev/null
+++ b/projects/plugins/social/changelog/update-fetch-available-licenses
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses b/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
new file mode 100644
index 0000000000000..3c349c8b1445e
--- /dev/null
+++ b/projects/plugins/starter-plugin/changelog/update-fetch-available-licenses
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.
diff --git a/projects/plugins/videopress/changelog/update-fetch-available-licenses b/projects/plugins/videopress/changelog/update-fetch-available-licenses
new file mode 100644
index 0000000000000..3c349c8b1445e
--- /dev/null
+++ b/projects/plugins/videopress/changelog/update-fetch-available-licenses
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Resolved an issue where revoked licenses were incorrectly treated as unattached. This caused users to be redirected to the license activation page after site connection, even when unattached licenses were not valid for activation.

From 8849fe44eba874fcb6e9f0dfcec8a0b9998d9117 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:19:29 -0800
Subject: [PATCH 060/143] Remove changelogs

---
 .../changelog/update-@wordpress-editor-and-fix-issues         | 4 ----
 .../licensing/changelog/update-fetch-available-licenses       | 4 ----
 2 files changed, 8 deletions(-)
 delete mode 100644 projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
 delete mode 100644 projects/packages/licensing/changelog/update-fetch-available-licenses

diff --git a/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues b/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
deleted file mode 100644
index d73147b9c7a39..0000000000000
--- a/projects/js-packages/publicize-components/changelog/update-@wordpress-editor-and-fix-issues
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Updated @wordpress/editor to the latest version
diff --git a/projects/packages/licensing/changelog/update-fetch-available-licenses b/projects/packages/licensing/changelog/update-fetch-available-licenses
deleted file mode 100644
index dcb780add9500..0000000000000
--- a/projects/packages/licensing/changelog/update-fetch-available-licenses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: changed
-
-Exclude revoked licenses from results when filtering unattached licenses in `Licensing::get_user_licenses()`. Only unattached and valid licenses are now returned.

From a3cbe99e71ecd040109b7203285aaf21a18fd9ad Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:24:13 -0800
Subject: [PATCH 061/143] Fix file icon in list view

---
 .../js-packages/components/components/scan-report/constants.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index b8ec6be497f19..fc1dfac73192f 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -24,7 +24,7 @@ export const ICONS = {
 	plugins: pluginIcon,
 	themes: themeIcon,
 	core: coreIcon,
-	file: fileIcon,
+	files: fileIcon,
 	default: shieldIcon,
 };
 

From b85f4c845b08433e530915f90dc52fc791ebcf20 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:31:11 -0800
Subject: [PATCH 062/143] Add file threat signature for version

---
 .../components/components/scan-report/stories/index.stories.tsx | 1 +
 projects/plugins/protect/src/js/routes/home/index.jsx           | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index d81cc9d615719..aea3ddef3a4b5 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -58,6 +58,7 @@ Default.args = {
 		{
 			id: 4,
 			name: '/var/www/html/wp-content/uploads/jptt_eicar.php',
+			version: 'EICAR_AV_Test_Suspicious',
 			threats: [
 				{
 					id: 198352406,
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 6d572ea64cc22..62ce9872a179a 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -2,6 +2,7 @@ import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-co
 import AdminPage from '../../components/admin-page';
 import useProtectData from '../../hooks/use-protect-data';
 import HomeAdminSectionHero from './home-admin-section-hero';
+import { version } from 'react';
 
 /**
  * Home Page
@@ -22,6 +23,7 @@ const HomePage = () => {
 					name: threat.filename,
 					threats: [ threat ],
 					type: 'files',
+					version: threat.signature,
 			  } ) )
 			: [
 					{

From bc0ca4302d5fd90e048f4b3ec36c7dcb974a87af Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:46:54 -0800
Subject: [PATCH 063/143] Add changelog

---
 projects/plugins/protect/changelog/add-protect-home | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/protect/changelog/add-protect-home

diff --git a/projects/plugins/protect/changelog/add-protect-home b/projects/plugins/protect/changelog/add-protect-home
new file mode 100644
index 0000000000000..0bcfedb6fe8ac
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-home
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds a Home page and StatCards

From dafa62992d71cb45dd317fe0469c009adc5f7c7b Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:53:46 -0800
Subject: [PATCH 064/143] Fix text domains

---
 .../components/scan-report/constants.ts       | 14 ++++++------
 .../components/scan-report/index.tsx          | 22 ++++++++++++-------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index fc1dfac73192f..fc6295d0837ed 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -8,16 +8,16 @@ import {
 } from '@wordpress/icons';
 
 export const STATUS_TYPES = [
-	{ value: 'checked', label: __( 'Checked', 'jetpack' ) },
-	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack' ) },
-	{ value: 'threat', label: __( 'Threats', 'jetpack' ) },
+	{ value: 'checked', label: __( 'Checked', 'jetpack-components' ) },
+	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-components' ) },
+	{ value: 'threat', label: __( 'Threats', 'jetpack-components' ) },
 ];
 
 export const TYPES = [
-	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
-	{ value: 'plugins', label: __( 'Plugins', 'jetpack' ) },
-	{ value: 'themes', label: __( 'Themes', 'jetpack' ) },
-	{ value: 'files', label: __( 'Files', 'jetpack' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
+	{ value: 'plugins', label: __( 'Plugins', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Themes', 'jetpack-components' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
 ];
 
 export const ICONS = {
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 2be50fa0b77a0..d77cce8b5b686 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -86,7 +86,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		const result = [
 			{
 				id: FIELD_STATUS,
-				label: __( 'Status', 'jetpack' ),
+				label: __( 'Status', 'jetpack-components' ),
 				elements: STATUS_TYPES,
 				getValue( { item } ) {
 					if ( item.checked ) {
@@ -101,7 +101,10 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							return (
-								<Tooltip className={ styles.tooltip } text={ __( 'Threat detected.', 'jetpack' ) }>
+								<Tooltip
+									className={ styles.tooltip }
+									text={ __( 'Threat detected.', 'jetpack-components' ) }
+								>
 									<div className={ styles.icon }>
 										<ShieldAlertIcon color={ '#F0B849' } { ...defaultIconDimension } />
 									</div>
@@ -111,7 +114,10 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 						return (
 							<Tooltip
 								className={ styles.tooltip }
-								text={ __( 'No known threats found that affect this version.', 'jetpack' ) }
+								text={ __(
+									'No known threats found that affect this version.',
+									'jetpack-components'
+								) }
 							>
 								<div className={ styles.icon }>
 									<ShieldCheckIcon color={ '#069E08' } { ...defaultIconDimension } />
@@ -124,7 +130,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 							className={ styles.tooltip }
 							text={ __(
 								'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
-								'jetpack'
+								'jetpack-components'
 							) }
 						>
 							<div className={ styles.icon }>
@@ -136,7 +142,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			},
 			{
 				id: FIELD_TYPE,
-				label: __( 'Type', 'jetpack' ),
+				label: __( 'Type', 'jetpack-components' ),
 				elements: TYPES,
 				enableHiding: false,
 				render( { item } ) {
@@ -145,7 +151,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			},
 			{
 				id: FIELD_NAME,
-				label: __( 'Name', 'jetpack' ),
+				label: __( 'Name', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				getValue( { item } ) {
@@ -157,7 +163,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			},
 			{
 				id: FIELD_VERSION,
-				label: __( 'Version', 'jetpack' ),
+				label: __( 'Version', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				render( { item } ) {
@@ -166,7 +172,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			},
 			{
 				id: FIELD_ICON,
-				label: __( 'Icon', 'jetpack' ),
+				label: __( 'Icon', 'jetpack-components' ),
 				enableHiding: false,
 				render( { item } ) {
 					return (

From f1e2a9bf5a88f2a06a1d10f44f3d8c48ee65888d Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 15:55:51 -0800
Subject: [PATCH 065/143] Changelog

---
 .../protect/changelog/update-protect-add-scan-report-to-home  | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/protect/changelog/update-protect-add-scan-report-to-home

diff --git a/projects/plugins/protect/changelog/update-protect-add-scan-report-to-home b/projects/plugins/protect/changelog/update-protect-add-scan-report-to-home
new file mode 100644
index 0000000000000..0478ae51501b8
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-add-scan-report-to-home
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport to HomeRoute

From 2dde812699b82ebae91f19248b796f5a8a394a93 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 18:56:45 -0800
Subject: [PATCH 066/143] Optimize, simplify

---
 .../scan-report/stories/index.stories.tsx     |  2 --
 .../protect/src/js/routes/home/index.jsx      | 25 +++++--------------
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index aea3ddef3a4b5..49495c3dd1b67 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -57,8 +57,6 @@ Default.args = {
 		},
 		{
 			id: 4,
-			name: '/var/www/html/wp-content/uploads/jptt_eicar.php',
-			version: 'EICAR_AV_Test_Suspicious',
 			threats: [
 				{
 					id: 198352406,
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 62ce9872a179a..8e704dd6f7aab 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -16,25 +16,12 @@ const HomePage = () => {
 		results: { core, plugins, themes, files },
 	} = useProtectData();
 
-	const fileThreats =
-		files.length > 0
-			? files.map( threat => ( {
-					checked: true,
-					name: threat.filename,
-					threats: [ threat ],
-					type: 'files',
-					version: threat.signature,
-			  } ) )
-			: [
-					{
-						checked: true,
-						name: '',
-						threats: [],
-						type: 'files',
-					},
-			  ];
-
-	const data = [ ...core, ...plugins, ...themes, ...fileThreats ].map( ( item, index ) => {
+	const data = [
+		...core,
+		...plugins,
+		...themes,
+		{ checked: true, threats: files, type: 'files' },
+	].map( ( item, index ) => {
 		return { ...item, id: index + 1 };
 	} );
 

From 412568dddfd9934bea8d5003c8a94a95d1fd9369 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 19:04:37 -0800
Subject: [PATCH 067/143] Add dummy arg to fix build errors

---
 .../protect/src/js/routes/home/home-admin-section-hero.tsx  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
index b41f9ab76a789..cc582cfea5ae5 100644
--- a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -33,7 +33,11 @@ const HomeAdminSectionHero: React.FC = () => {
 									),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
-										: __( 'vulnerabilities', 'jetpack-protect' )
+										: __(
+												'vulnerabilities',
+												'jetpack-protect',
+												/* dummy arg to avoid bad minification */ 0
+										  )
 								) }
 							</Text>
 							<Button

From 5700f5479fc22c096e33efe1b653b8f35f977fb7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 2 Dec 2024 19:10:19 -0800
Subject: [PATCH 068/143] Remove unintentionally added import

---
 projects/plugins/protect/src/js/routes/home/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 8e704dd6f7aab..a57cd83d2e86c 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -2,7 +2,6 @@ import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-co
 import AdminPage from '../../components/admin-page';
 import useProtectData from '../../hooks/use-protect-data';
 import HomeAdminSectionHero from './home-admin-section-hero';
-import { version } from 'react';
 
 /**
  * Home Page

From 9a1fd3ef84d0972e7694af319ba6101221b8f7d4 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 09:38:44 -0800
Subject: [PATCH 069/143] Set unique ID first

---
 projects/plugins/protect/src/js/routes/home/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index a57cd83d2e86c..d24016cfa401b 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -21,7 +21,7 @@ const HomePage = () => {
 		...themes,
 		{ checked: true, threats: files, type: 'files' },
 	].map( ( item, index ) => {
-		return { ...item, id: index + 1 };
+		return { id: index + 1, ...item };
 	} );
 
 	return (

From a4c84f2931dd00e5114ffa7a98ee5e3113150bde Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 09:43:55 -0800
Subject: [PATCH 070/143] Update scan card title when scanning

---
 projects/plugins/protect/src/js/routes/home/home-statcards.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 4d03623fb6f11..6918febdd7926 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -144,7 +144,7 @@ const HomeStatCards = () => {
 			icon: (
 				<IconWithLabel
 					icon={ scanIcon }
-					label={ __( 'Scan', 'jetpack-protect' ) }
+					label={ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
 					isSmall={ isSmall }
 				/>
 			),

From ac24f95ad8be90345e02c6b747f2db4c23f54deb Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 09:44:13 -0800
Subject: [PATCH 071/143] Update scan card title when scanning

---
 projects/plugins/protect/src/js/routes/home/home-statcards.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index aa4df64797926..b74c23ad25058 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -148,7 +148,7 @@ const HomeStatCards = () => {
 			icon: (
 				<IconWithLabel
 					icon={ scanIcon }
-					label={ __( 'Scan', 'jetpack-protect' ) }
+					label={ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
 					isSmall={ isSmall }
 				/>
 			),

From e19219411660422bdac40d93f8848c8fab4453b5 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 10:19:24 -0800
Subject: [PATCH 072/143] Add and use shared icons

---
 .../components/shield-alert}/index.tsx        | 18 +++++++--------
 .../shield-alert/stories/index.stories.tsx    | 21 ++++++++++++++++++
 .../components/shield-check}/index.tsx        |  6 ++---
 .../shield-check/stories/index.stories.tsx    | 21 ++++++++++++++++++
 projects/js-packages/components/index.ts      |  2 ++
 .../alert-icon/stories/index.stories.jsx      | 18 ---------------
 .../error-admin-section-hero/index.tsx        |  5 ++---
 .../src/js/components/threats-list/empty.jsx  |  5 ++---
 .../src/js/routes/home/home-statcards.jsx     | 22 +++++++++++--------
 .../src/js/routes/scan/history/index.jsx      | 13 ++++++++---
 10 files changed, 83 insertions(+), 48 deletions(-)
 rename projects/{plugins/protect/src/js/components/alert-icon => js-packages/components/components/shield-alert}/index.tsx (64%)
 create mode 100644 projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
 rename projects/{plugins/protect/src/js/components/protect-check-icon => js-packages/components/components/shield-check}/index.tsx (89%)
 create mode 100644 projects/js-packages/components/components/shield-check/stories/index.stories.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx

diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.tsx b/projects/js-packages/components/components/shield-alert/index.tsx
similarity index 64%
rename from projects/plugins/protect/src/js/components/alert-icon/index.tsx
rename to projects/js-packages/components/components/shield-alert/index.tsx
index 65f8b1ddf2eaa..75991c424d0c0 100644
--- a/projects/plugins/protect/src/js/components/alert-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-alert/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
+import { type JSX } from 'react';
 
 /**
- * Alert icon
+ * Shield and Alert SVG Icon
  *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.width     - Optional icon width. Defaults to '127'.
- * @param {string} props.height    - Optional icon height. Defaults to '136'.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
+ * @param {object} props                   - Component props.
+ * @param {string} [props.className]       - The class name to add to the SVG Icon.
+ * @param {string} [props.width="40"]      - The width of the SVG Icon.
+ * @param {string} [props.height="48"]     - The height of the SVG Icon.
+ * @param {string} [props.color="#D63638"] - The color of the SVG Icon.
  *
- * @return {JSX.Element}      The Alert Icon component.
+ * @return {JSX.Element} Shield and Alert SVG Icon
  */
-export default function Alert( {
+export default function ShieldAlertIcon( {
 	className,
 	width = '40',
 	height = '48',
diff --git a/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx b/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d8393504574a6
--- /dev/null
+++ b/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
@@ -0,0 +1,21 @@
+import ShieldAlertIcon from '..';
+
+export default {
+	title: 'JS Packages/Components/Shield Alert',
+	component: ShieldAlertIcon,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = () => <ShieldAlertIcon />;
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/js-packages/components/components/shield-check/index.tsx
similarity index 89%
rename from projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
rename to projects/js-packages/components/components/shield-check/index.tsx
index e222d61adcadf..9d4394badac53 100644
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-check/index.tsx
@@ -1,7 +1,7 @@
 import { type JSX } from 'react';
 
 /**
- * Protect Shield and Checkmark SVG Icon
+ * Shield and Checkmark SVG Icon
  *
  * @param {object} props                   - Component props.
  * @param {string} [props.className]       - The class name to add to the SVG Icon.
@@ -9,9 +9,9 @@ import { type JSX } from 'react';
  * @param {string} [props.height="96"]     - The height of the SVG Icon.
  * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
  *
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
+ * @return {JSX.Element} Shield and Checkmark SVG Icon
  */
-export default function ProtectCheck( {
+export default function ShieldCheckIcon( {
 	className,
 	width = '80',
 	height = '96',
diff --git a/projects/js-packages/components/components/shield-check/stories/index.stories.tsx b/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
new file mode 100644
index 0000000000000..31d20c55f51e4
--- /dev/null
+++ b/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
@@ -0,0 +1,21 @@
+import ShieldCheckIcon from '..';
+
+export default {
+	title: 'JS Packages/Components/Shield Check',
+	component: ShieldCheckIcon,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = () => <ShieldCheckIcon />;
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index eb90df97ad5fe..7251e980ca0ae 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,6 +47,8 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
+export { default as ShieldCheckIcon } from './components/shield-check';
+export { default as ShieldAlertIcon } from './components/shield-alert';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
deleted file mode 100644
index f49ddf4877c46..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import Alert from '../index.tsx';
-
-export default {
-	title: 'Plugins/Protect/Alert Icon',
-	component: Alert,
-	argTypes: {
-		color: {
-			control: {
-				type: 'color',
-			},
-		},
-	},
-};
-
-const FooterTemplate = args => <Alert { ...args } />;
-export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 842421ba19692..1a12768b1d197 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,7 +1,6 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, ShieldAlertIcon } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import AdminSectionHero from '../admin-section-hero';
-import Alert from '../alert-icon';
 import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
@@ -25,7 +24,7 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<Alert className={ styles.warning } />
+							<ShieldAlertIcon className={ styles.warning } />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
 						</div>
 					</AdminSectionHero.Heading>
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
index 97b80d1e9a9cd..257c3139010cd 100644
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -1,4 +1,4 @@
-import { H3, Text } from '@automattic/jetpack-components';
+import { H3, Text, ShieldCheckIcon } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useMemo, useState } from 'react';
@@ -6,7 +6,6 @@ import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-s
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import OnboardingPopover from '../onboarding-popover';
-import ProtectCheck from '../protect-check-icon';
 import ScanButton from '../scan-button';
 import styles from './styles.module.scss';
 
@@ -84,7 +83,7 @@ const EmptyList = () => {
 
 	return (
 		<div className={ styles.empty }>
-			<ProtectCheck />
+			<ShieldCheckIcon />
 			<H3 weight="bold" mt={ 8 }>
 				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 			</H3>
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 6918febdd7926..b74c23ad25058 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,9 +1,13 @@
-import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import {
+	Text,
+	useBreakpointMatch,
+	StatCard,
+	ShieldCheckIcon,
+	ShieldAlertIcon,
+} from '@automattic/jetpack-components';
 import { Spinner, Tooltip } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo, useCallback } from 'react';
-import Alert from '../../components/alert-icon';
-import ProtectCheck from '../../components/protect-check-icon';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
@@ -62,9 +66,9 @@ const HomeStatCards = () => {
 	const renderIcon = useCallback(
 		isFeatureEnabled =>
 			isFeatureEnabled ? (
-				<ProtectCheck { ...defaultDimensions } />
+				<ShieldCheckIcon { ...defaultDimensions } />
 			) : (
-				<Alert { ...defaultDimensions } color="#A7AAAD" />
+				<ShieldAlertIcon { ...defaultDimensions } color="#A7AAAD" />
 			),
 		[ defaultDimensions ]
 	);
@@ -116,11 +120,11 @@ const HomeStatCards = () => {
 		if ( scanning ) {
 			scanIcon = <Spinner />;
 		} else if ( scanError ) {
-			scanIcon = <Alert { ...defaultDimensions } />;
+			scanIcon = <ShieldAlertIcon { ...defaultDimensions } />;
+		} else if ( numThreats ) {
+			scanIcon = <ShieldAlertIcon { ...defaultDimensions } color={ '#F0B849' } />;
 		} else {
-			scanIcon = (
-				<ProtectCheck { ...defaultDimensions } color={ numThreats ? '#F0B849' : '#069E08' } />
-			);
+			scanIcon = <ShieldCheckIcon { ...defaultDimensions } color={ '#069E08' } />;
 		}
 
 		let scanLabel;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
index d0c8a53bb6c99..8b570efb337ae 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
@@ -1,9 +1,16 @@
-import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
+import {
+	AdminSection,
+	Container,
+	Col,
+	H3,
+	Text,
+	Title,
+	ShieldCheckIcon,
+} from '@automattic/jetpack-components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import AdminPage from '../../../components/admin-page';
-import ProtectCheck from '../../../components/protect-check-icon';
 import ThreatsNavigation from '../../../components/threats-list/navigation';
 import PaidList from '../../../components/threats-list/paid-list';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
@@ -272,7 +279,7 @@ const ScanHistoryRoute = () => {
 												</div>
 											</div>
 											<div className={ styles.empty }>
-												<ProtectCheck />
+												<ShieldCheckIcon />
 												<H3 weight="bold" mt={ 8 }>
 													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 												</H3>

From 5adbf1bb3bf35d544492876d74dd57582ce94df8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 10:35:32 -0800
Subject: [PATCH 073/143] Fix build issues

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index b74c23ad25058..508d6cd968acd 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -148,7 +148,10 @@ const HomeStatCards = () => {
 			icon: (
 				<IconWithLabel
 					icon={ scanIcon }
-					label={ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
+					label={
+						( scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ),
+						/* dummy arg to avoid bad minification */ 0 )
+					}
 					isSmall={ isSmall }
 				/>
 			),

From 25bdb1f3a1aacfa4cb5eaab89ff185b44bab8f97 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 10:35:56 -0800
Subject: [PATCH 074/143] Fix build issues

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index b74c23ad25058..508d6cd968acd 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -148,7 +148,10 @@ const HomeStatCards = () => {
 			icon: (
 				<IconWithLabel
 					icon={ scanIcon }
-					label={ scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ) }
+					label={
+						( scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ),
+						/* dummy arg to avoid bad minification */ 0 )
+					}
 					isSmall={ isSmall }
 				/>
 			),

From 3fa353801210357c0323e2987750306a16123eb5 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 10:39:27 -0800
Subject: [PATCH 075/143] Fix dummy arg placement

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 508d6cd968acd..fe0349d1f8aeb 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -149,8 +149,9 @@ const HomeStatCards = () => {
 				<IconWithLabel
 					icon={ scanIcon }
 					label={
-						( scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ),
-						/* dummy arg to avoid bad minification */ 0 )
+						scanning
+							? __( 'Scanning', 'jetpack-protect' )
+							: __( 'Scan', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 )
 					}
 					isSmall={ isSmall }
 				/>

From 5a4b60ec4aee7569df25879a778401059bfe25dc Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 3 Dec 2024 10:39:44 -0800
Subject: [PATCH 076/143] Fix dummy arg placement

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 508d6cd968acd..fe0349d1f8aeb 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -149,8 +149,9 @@ const HomeStatCards = () => {
 				<IconWithLabel
 					icon={ scanIcon }
 					label={
-						( scanning ? __( 'Scanning', 'jetpack-protect' ) : __( 'Scan', 'jetpack-protect' ),
-						/* dummy arg to avoid bad minification */ 0 )
+						scanning
+							? __( 'Scanning', 'jetpack-protect' )
+							: __( 'Scan', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 )
 					}
 					isSmall={ isSmall }
 				/>

From 809484eedb57186a65389519d3e26f94695222ec Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 4 Dec 2024 15:29:26 -0800
Subject: [PATCH 077/143] Use dynamic ShieldIcon

---
 .../components/shield-alert/index.tsx         |  47 -----
 .../shield-alert/stories/index.stories.tsx    |  21 ---
 .../components/shield-check/index.tsx         |  48 -----
 .../shield-check/stories/index.stories.tsx    |  21 ---
 .../components/shield-icon/index.tsx          |  79 +++++++++
 .../shield-icon/stories/index.stories.tsx     |  54 ++++++
 projects/js-packages/components/index.ts      |   3 +-
 .../components/admin-section-hero/index.tsx   |  15 +-
 .../error-admin-section-hero/index.tsx        |   4 +-
 .../src/js/components/shield-icon/index.tsx   | 165 ------------------
 .../shield-icon/stories/index.stories.tsx     |  50 ------
 .../src/js/components/threats-list/empty.jsx  |   4 +-
 .../src/js/routes/home/home-statcards.jsx     |  52 +++---
 .../src/js/routes/scan/history/index.jsx      |   4 +-
 14 files changed, 175 insertions(+), 392 deletions(-)
 delete mode 100644 projects/js-packages/components/components/shield-alert/index.tsx
 delete mode 100644 projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
 delete mode 100644 projects/js-packages/components/components/shield-check/index.tsx
 delete mode 100644 projects/js-packages/components/components/shield-check/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/shield-icon/index.tsx
 create mode 100644 projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/js-packages/components/components/shield-alert/index.tsx b/projects/js-packages/components/components/shield-alert/index.tsx
deleted file mode 100644
index 75991c424d0c0..0000000000000
--- a/projects/js-packages/components/components/shield-alert/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Shield and Alert SVG Icon
- *
- * @param {object} props                   - Component props.
- * @param {string} [props.className]       - The class name to add to the SVG Icon.
- * @param {string} [props.width="40"]      - The width of the SVG Icon.
- * @param {string} [props.height="48"]     - The height of the SVG Icon.
- * @param {string} [props.color="#D63638"] - The color of the SVG Icon.
- *
- * @return {JSX.Element} Shield and Alert SVG Icon
- */
-export default function ShieldAlertIcon( {
-	className,
-	width = '40',
-	height = '48',
-	color = '#D63638',
-}: {
-	className?: string;
-	width?: string;
-	height?: string;
-	color?: string;
-} ): JSX.Element {
-	return (
-		<svg
-			className={ className }
-			width={ width }
-			height={ height }
-			viewBox="0 0 40 48"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M20 0L40 8.91914V22.2152C40 33.5494 32.5803 44.2809 22.1176 47.6664C20.7428 48.1112 19.2572 48.1112 17.8824 47.6664C7.41973 44.2809 0 33.5494 0 22.2152V8.91914L20 0Z"
-				fill={ color }
-			/>
-			<rect x="17" y="31" width="6" height="6" rx="3" fill="white" />
-			<path
-				d="M17.0664 13.0624C17.0304 12.4867 17.4876 12 18.0645 12H21.9355C22.5124 12 22.9696 12.4867 22.9336 13.0624L22.0586 27.0624C22.0257 27.5894 21.5886 28 21.0605 28H18.9395C18.4114 28 17.9743 27.5894 17.9414 27.0624L17.0664 13.0624Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx b/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
deleted file mode 100644
index d8393504574a6..0000000000000
--- a/projects/js-packages/components/components/shield-alert/stories/index.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ShieldAlertIcon from '..';
-
-export default {
-	title: 'JS Packages/Components/Shield Alert',
-	component: ShieldAlertIcon,
-	parameters: {
-		backgrounds: {
-			default: 'light',
-			values: [ { name: 'light', value: 'white' } ],
-		},
-	},
-	decorators: [
-		Story => (
-			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-export const Default = () => <ShieldAlertIcon />;
diff --git a/projects/js-packages/components/components/shield-check/index.tsx b/projects/js-packages/components/components/shield-check/index.tsx
deleted file mode 100644
index 9d4394badac53..0000000000000
--- a/projects/js-packages/components/components/shield-check/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Shield and Checkmark SVG Icon
- *
- * @param {object} props                   - Component props.
- * @param {string} [props.className]       - The class name to add to the SVG Icon.
- * @param {string} [props.width="80"]      - The width of the SVG Icon.
- * @param {string} [props.height="96"]     - The height of the SVG Icon.
- * @param {string} [props.color="#069E08"] - The color of the SVG Icon.
- *
- * @return {JSX.Element} Shield and Checkmark SVG Icon
- */
-export default function ShieldCheckIcon( {
-	className,
-	width = '80',
-	height = '96',
-	color = '#069E08',
-}: {
-	className?: string;
-	width?: string;
-	height?: string;
-	color?: string;
-} ): JSX.Element {
-	return (
-		<svg
-			className={ className }
-			width={ width }
-			height={ height }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ color }
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/js-packages/components/components/shield-check/stories/index.stories.tsx b/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
deleted file mode 100644
index 31d20c55f51e4..0000000000000
--- a/projects/js-packages/components/components/shield-check/stories/index.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ShieldCheckIcon from '..';
-
-export default {
-	title: 'JS Packages/Components/Shield Check',
-	component: ShieldCheckIcon,
-	parameters: {
-		backgrounds: {
-			default: 'light',
-			values: [ { name: 'light', value: 'white' } ],
-		},
-	},
-	decorators: [
-		Story => (
-			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-export const Default = () => <ShieldCheckIcon />;
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..fee9f4d70c463
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const COLORS = {
+	error: '#D63638',
+	warning: '#F0B849',
+	success: '#069E08',
+	default: '#1d2327',
+};
+
+/**
+ * Protect Shield SVG Icon
+ *
+ * @param {object}  props           - Component props.
+ * @param {string}  props.className - Additional class names.
+ * @param {string}  props.contrast  - Icon contrast color. Overrides variant.
+ * @param {string}  props.fill      - Icon fill color (default, success, warning, error, or a custom color code string). Overrides variant.
+ * @param {number}  props.height    - Icon height (px). Width is calculated based on height.
+ * @param {string}  props.icon      - Icon variant (success, error). Overrides variant.
+ * @param {boolean} props.outline   - When enabled, the icon will use an outline style.
+ * @param {string}  props.variant   - Icon variant (default, success, error).
+ *
+ * @return {React.ReactElement} Protect Shield SVG Icon
+ */
+export default function ShieldIcon( {
+	className,
+	contrast = '#fff',
+	fill,
+	height = 32,
+	icon,
+	outline = false,
+	variant = 'default',
+}: {
+	className?: string;
+	contrast?: string;
+	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	height?: number;
+	icon?: 'success' | 'error';
+	outline?: boolean;
+	variant: 'default' | 'success' | 'warning' | 'error';
+} ): JSX.Element {
+	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
+	const iconFill = outline ? shieldFill : contrast;
+	const iconVariant = icon || variant;
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 76 ) / 93 }
+			viewBox="0 0 76 93"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				d={
+					'M37.5652 0.980293L75.1304 18.0554V43.5097C75.1304 65.2086 61.1942 85.753 41.5427 92.2343C38.9604 93.0862 36.1701 93.0862 33.5878 92.2343C13.9362 85.753 0 65.2086 0 43.5097V18.0554L37.5652 0.980293Z' +
+					( outline
+						? ' M8.34783 23.4307V43.5097C8.34783 61.9471 20.286 79.0573 36.2024 84.3068C37.0866 84.5981 38.0438 84.5981 38.928 84.3068C54.8444 79.0573 66.7826 61.9471 66.7826 43.5097V23.4307L37.5652 10.15L8.34783 23.4307Z'
+						: '' )
+				}
+				fill={ shieldFill }
+			/>
+			{ 'success' === iconVariant && (
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M55.6042 37.0675L34.3578 65.2656L20.898 55.3892L23.878 51.4342L33.33 58.3698L51.5965 34.1267L55.6042 37.0675Z"
+					fill={ iconFill }
+				/>
+			) }
+			{ [ 'warning', 'error' ].includes( iconVariant ) && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+				/>
+			) }
+		</svg>
+	);
+}
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b5a16d4da4075
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,54 @@
+import ShieldIcon from '../index';
+
+export default {
+	title: 'JS Packages/Components/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'default', 'success', 'warning', 'error' ],
+		},
+		icon: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'success', 'error' ],
+		},
+		fill: {
+			control: 'color',
+		},
+		outline: {
+			control: 'boolean',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'success',
+	outline: false,
+};
+
+export const Variants = () => {
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" />
+				<ShieldIcon variant="success" />
+				<ShieldIcon variant="warning" />
+				<ShieldIcon variant="error" />
+			</div>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="success" outline />
+				<ShieldIcon variant="warning" outline />
+				<ShieldIcon variant="error" outline />
+			</div>
+		</div>
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 7251e980ca0ae..4b0f3612012e7 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,8 +47,7 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
-export { default as ShieldCheckIcon } from './components/shield-check';
-export { default as ShieldAlertIcon } from './components/shield-alert';
+export { default as ShieldIcon } from './components/shield-icon';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 20aba37c2fdf3..d35674a1b322c 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,6 +1,9 @@
-import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
+import {
+	AdminSectionHero as JetpackAdminSectionHero,
+	H3,
+	ShieldIcon,
+} from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
-import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -47,18 +50,22 @@ AdminSectionHero.Heading = ( {
 	children,
 	variant = 'default',
 	showIcon = false,
+	outline,
 }: {
 	children: React.ReactNode;
 	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
+	outline?: boolean;
 } ) => {
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
 			{ showIcon && (
 				<ShieldIcon
-					variant={ `${ variant }-outline` }
-					fill="#1d2327"
+					height={ 38 }
+					variant={ variant }
+					outline={ outline }
+					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
 			) }
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 1a12768b1d197..8eb49846d6f5a 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,4 +1,4 @@
-import { Text, ShieldAlertIcon } from '@automattic/jetpack-components';
+import { Text, ShieldIcon } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import AdminSectionHero from '../admin-section-hero';
 import ScanNavigation from '../scan-navigation';
@@ -24,7 +24,7 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<ShieldAlertIcon className={ styles.warning } />
+							<ShieldIcon variant="error" />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
 						</div>
 					</AdminSectionHero.Heading>
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
deleted file mode 100644
index 3bf7f479f0051..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @param {object} props           - Component props.
- * @param {string} props.variant   - Icon variant.
- * @param {string} props.fill      - Icon fill color.
- * @param {string} props.className - Additional class names.
- * @param {number} props.height    - Icon height.
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ShieldIcon( {
-	variant = 'default',
-	height = 32,
-	className,
-	fill,
-}: {
-	variant:
-		| 'default'
-		| 'success'
-		| 'error'
-		| 'default-outline'
-		| 'success-outline'
-		| 'error-outline';
-	className?: string;
-	height?: number;
-	fill?: string;
-} ): JSX.Element {
-	if ( 'error-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
-					fill={ fill || '#D63638' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'error' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 123 ) / 150 }
-				viewBox="0 0 123 150"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
-					fill={ `#fff` }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 14 ) / 17 }
-				viewBox="0 0 14 17"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
-					fill={ fill || '#069E08' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 80 ) / 96 }
-				viewBox="0 0 80 96"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-					fill="white"
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'default-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || 'black' }
-				/>
-			</svg>
-		);
-	}
-
-	return (
-		<svg
-			height={ height }
-			width={ ( height * 80 ) / 96 }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			className={ className }
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ fill || 'black' }
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
deleted file mode 100644
index d10365f4b0834..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ShieldIcon from '../index';
-
-export default {
-	title: 'Plugins/Protect/Sheild Icon',
-	component: ShieldIcon,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { height: '72px', width: '72px' } }>
-				<Story />
-			</div>
-		),
-	],
-	argTypes: {
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: [
-				'default',
-				'success',
-				'error',
-				'default-outline',
-				'success-outline',
-				'error-outline',
-			],
-		},
-		fill: {
-			control: 'color',
-		},
-	},
-};
-
-export const Default = args => <ShieldIcon { ...args } />;
-Default.args = {
-	variant: 'default',
-};
-
-export const SuccessVariant = args => <ShieldIcon { ...args } />;
-SuccessVariant.args = {
-	variant: 'success',
-};
-
-export const ErrorVariant = args => <ShieldIcon { ...args } />;
-ErrorVariant.args = {
-	variant: 'error',
-};
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
index 257c3139010cd..c46e21e1dfdc1 100644
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -1,4 +1,4 @@
-import { H3, Text, ShieldCheckIcon } from '@automattic/jetpack-components';
+import { H3, Text, ShieldIcon } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useMemo, useState } from 'react';
@@ -83,7 +83,7 @@ const EmptyList = () => {
 
 	return (
 		<div className={ styles.empty }>
-			<ShieldCheckIcon />
+			<ShieldIcon variant="success" />
 			<H3 weight="bold" mt={ 8 }>
 				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 			</H3>
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index fe0349d1f8aeb..126d4c5359a6a 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -1,13 +1,7 @@
-import {
-	Text,
-	useBreakpointMatch,
-	StatCard,
-	ShieldCheckIcon,
-	ShieldAlertIcon,
-} from '@automattic/jetpack-components';
+import { Text, useBreakpointMatch, StatCard, ShieldIcon } from '@automattic/jetpack-components';
 import { Spinner, Tooltip } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useMemo, useCallback } from 'react';
+import { useMemo } 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';
@@ -61,17 +55,7 @@ const HomeStatCards = () => {
 	const { data: scanStatus } = useScanStatusQuery();
 	const scanning = isScanInProgress( scanStatus );
 
-	const defaultDimensions = useMemo( () => ( { height: '19.14', width: '16' } ), [] );
-
-	const renderIcon = useCallback(
-		isFeatureEnabled =>
-			isFeatureEnabled ? (
-				<ShieldCheckIcon { ...defaultDimensions } />
-			) : (
-				<ShieldAlertIcon { ...defaultDimensions } color="#A7AAAD" />
-			),
-		[ defaultDimensions ]
-	);
+	const iconHeight = useMemo( () => 20, [] );
 
 	const lastCheckedMessage = useMemo( () => {
 		if ( scanError ) {
@@ -120,11 +104,15 @@ const HomeStatCards = () => {
 		if ( scanning ) {
 			scanIcon = <Spinner />;
 		} else if ( scanError ) {
-			scanIcon = <ShieldAlertIcon { ...defaultDimensions } />;
-		} else if ( numThreats ) {
-			scanIcon = <ShieldAlertIcon { ...defaultDimensions } color={ '#F0B849' } />;
+			scanIcon = <ShieldIcon variant="error" height={ iconHeight } />;
 		} else {
-			scanIcon = <ShieldCheckIcon { ...defaultDimensions } color={ '#069E08' } />;
+			scanIcon = (
+				<ShieldIcon
+					variant={ numThreats ? 'error' : 'success' }
+					height={ iconHeight }
+					color={ numThreats ? '#F0B849' : '#069E08' }
+				/>
+			);
 		}
 
 		let scanLabel;
@@ -160,7 +148,7 @@ const HomeStatCards = () => {
 			value: numThreats,
 			hideValue: !! ( scanError || scanning ),
 		};
-	}, [ variant, scanning, defaultDimensions, scanError, numThreats, hasPlan, isSmall ] );
+	}, [ variant, scanning, iconHeight, scanError, numThreats, hasPlan, isSmall ] );
 
 	const wafArgs = useMemo(
 		() => ( {
@@ -168,7 +156,11 @@ const HomeStatCards = () => {
 			className: isWafModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					{ renderIcon( isWafModuleEnabled ) }{ ' ' }
+					<ShieldIcon
+						variant="success"
+						height={ iconHeight }
+						fill={ ! isWafModuleEnabled ? '#A7AAAD' : null }
+					/>
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
 							{ __( 'Firewall', 'jetpack-protect' ) }
@@ -184,7 +176,7 @@ const HomeStatCards = () => {
 			value: allTimeBlockedRequestsCount,
 			hideValue: ! isWafModuleEnabled,
 		} ),
-		[ variant, renderIcon, isWafModuleEnabled, isSmall, allTimeBlockedRequestsCount ]
+		[ variant, isWafModuleEnabled, iconHeight, isSmall, allTimeBlockedRequestsCount ]
 	);
 
 	const bruteForceArgs = useMemo(
@@ -193,7 +185,11 @@ const HomeStatCards = () => {
 			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					{ renderIcon( isBruteForceModuleEnabled ) }
+					<ShieldIcon
+						variant="success"
+						height={ iconHeight }
+						fill={ ! isBruteForceModuleEnabled ? '#A7AAAD' : null }
+					/>
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
 							{ __( 'Brute force', 'jetpack-protect' ) }
@@ -209,7 +205,7 @@ const HomeStatCards = () => {
 			value: allTimeBlockedLoginsCount,
 			hideValue: ! isBruteForceModuleEnabled,
 		} ),
-		[ variant, renderIcon, isBruteForceModuleEnabled, isSmall, allTimeBlockedLoginsCount ]
+		[ variant, isBruteForceModuleEnabled, iconHeight, isSmall, allTimeBlockedLoginsCount ]
 	);
 
 	return (
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
index 8b570efb337ae..103159a812a95 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
@@ -5,7 +5,7 @@ import {
 	H3,
 	Text,
 	Title,
-	ShieldCheckIcon,
+	ShieldIcon,
 } from '@automattic/jetpack-components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback } from 'react';
@@ -279,7 +279,7 @@ const ScanHistoryRoute = () => {
 												</div>
 											</div>
 											<div className={ styles.empty }>
-												<ShieldCheckIcon />
+												<ShieldIcon />
 												<H3 weight="bold" mt={ 8 }>
 													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 												</H3>

From 5ece8cfffc56eff3f1b73f02809a92bf092d35af Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 4 Dec 2024 15:35:31 -0800
Subject: [PATCH 078/143] Fix variants

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 126d4c5359a6a..dce20e670ab20 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -108,7 +108,7 @@ const HomeStatCards = () => {
 		} else {
 			scanIcon = (
 				<ShieldIcon
-					variant={ numThreats ? 'error' : 'success' }
+					variant={ numThreats ? 'warning' : 'success' }
 					height={ iconHeight }
 					color={ numThreats ? '#F0B849' : '#069E08' }
 				/>
@@ -157,7 +157,7 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					<ShieldIcon
-						variant="success"
+						variant={ ! isWafModuleEnabled ? 'error' : 'success' }
 						height={ iconHeight }
 						fill={ ! isWafModuleEnabled ? '#A7AAAD' : null }
 					/>
@@ -186,7 +186,7 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					<ShieldIcon
-						variant="success"
+						variant={ ! isBruteForceModuleEnabled ? 'error' : 'success' }
 						height={ iconHeight }
 						fill={ ! isBruteForceModuleEnabled ? '#A7AAAD' : null }
 					/>

From fac6ce18167ca58c4b923ca8f8546179036b782e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 4 Dec 2024 15:45:47 -0800
Subject: [PATCH 079/143] Update Protect shield icon uses to use package
 versions

---
 .../protect/src/js/components/admin-section-hero/index.tsx    | 4 +---
 .../src/js/components/admin-section-hero/styles.module.scss   | 2 +-
 .../src/js/components/error-admin-section-hero/index.tsx      | 2 +-
 .../js/components/error-admin-section-hero/styles.module.scss | 2 +-
 .../plugins/protect/src/js/components/threats-list/empty.jsx  | 2 +-
 .../src/js/routes/scan/history/history-admin-section-hero.tsx | 2 +-
 projects/plugins/protect/src/js/routes/scan/history/index.jsx | 2 +-
 .../protect/src/js/routes/scan/scan-admin-section-hero.tsx    | 4 ++--
 8 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index d35674a1b322c..a8be3da774417 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -50,12 +50,10 @@ AdminSectionHero.Heading = ( {
 	children,
 	variant = 'default',
 	showIcon = false,
-	outline,
 }: {
 	children: React.ReactNode;
 	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
-	outline?: boolean;
 } ) => {
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
@@ -64,7 +62,7 @@ AdminSectionHero.Heading = ( {
 				<ShieldIcon
 					height={ 38 }
 					variant={ variant }
-					outline={ outline }
+					outline
 					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 23c0fa7b6f6dd..e833bc831c466 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -1,5 +1,5 @@
 .heading-icon {
-    margin-left: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 8eb49846d6f5a..05cd21179799c 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -24,8 +24,8 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<ShieldIcon variant="error" />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
+							<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
 						</div>
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
index e0053d4dece1b..1c89377d4b4b5 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
@@ -4,7 +4,7 @@
 }
 
 .warning {
-    margin-right: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
 }
 
 .scan-navigation {
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
index c46e21e1dfdc1..8eabd10a5b248 100644
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
@@ -83,7 +83,7 @@ const EmptyList = () => {
 
 	return (
 		<div className={ styles.empty }>
-			<ShieldIcon variant="success" />
+			<ShieldIcon variant="success" height={ 96 } />
 			<H3 weight="bold" mt={ 8 }>
 				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 			</H3>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 4aa517f5f120b..141c51cde284a 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => {
 							__( 'Most recent results', 'jetpack-protect' )
 						) }
 					</Text>
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant="success">
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
index 103159a812a95..2ca616ffe5af9 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
@@ -279,7 +279,7 @@ const ScanHistoryRoute = () => {
 												</div>
 											</div>
 											<div className={ styles.empty }>
-												<ShieldIcon />
+												<ShieldIcon variant="sucess" height={ 96 } />
 												<H3 weight="bold" mt={ 8 }>
 													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
 												</H3>
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 bf894b93bb95d..c7cec8892001c 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
@@ -58,7 +58,7 @@ const ScanAdminSectionHero: React.FC = () => {
 		return <ScanningAdminSectionHero />;
 	}
 
-	if ( status.error ) {
+	if ( ! status.error ) {
 		return (
 			<ErrorAdminSectionHero
 				baseErrorMessage={ __( 'We are having problems scanning your site.', 'jetpack-protect' ) }
@@ -88,7 +88,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							anchor={ dailyScansPopoverAnchor }
 						/>
 					) }
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */

From ee3bc6eb45959a2a795a1b9be9b80f08f9718f3f Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 4 Dec 2024 19:11:33 -0800
Subject: [PATCH 080/143] Add info variant

---
 .../components/shield-icon/index.tsx           | 18 +++++++++++++-----
 .../shield-icon/stories/index.stories.tsx      |  6 ++++--
 .../src/js/routes/home/home-statcards.jsx      |  9 ++-------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index fee9f4d70c463..68ad9a2cbf04d 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 const COLORS = {
-	error: '#D63638',
-	warning: '#F0B849',
-	success: '#069E08',
 	default: '#1d2327',
+	info: '#A7AAAD',
+	success: '#069E08',
+	warning: '#F0B849',
+	error: '#D63638',
 };
 
 /**
@@ -32,11 +33,11 @@ export default function ShieldIcon( {
 }: {
 	className?: string;
 	contrast?: string;
-	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
 	icon?: 'success' | 'error';
 	outline?: boolean;
-	variant: 'default' | 'success' | 'warning' | 'error';
+	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
 	const iconFill = outline ? shieldFill : contrast;
@@ -60,6 +61,13 @@ export default function ShieldIcon( {
 				}
 				fill={ shieldFill }
 			/>
+			{ 'info' === iconVariant && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+					transform="scale(1, -1) translate(0, -93)"
+				/>
+			) }
 			{ 'success' === iconVariant && (
 				<path
 					fillRule="evenodd"
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
index b5a16d4da4075..2d6213c0a8c3c 100644
--- a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -11,13 +11,13 @@ export default {
 			control: {
 				type: 'select',
 			},
-			options: [ 'default', 'success', 'warning', 'error' ],
+			options: [ 'default', 'info', 'success', 'warning', 'error' ],
 		},
 		icon: {
 			control: {
 				type: 'select',
 			},
-			options: [ 'success', 'error' ],
+			options: [ 'success', 'error', 'info' ],
 		},
 		fill: {
 			control: 'color',
@@ -39,12 +39,14 @@ export const Variants = () => {
 		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" />
+				<ShieldIcon variant="info" />
 				<ShieldIcon variant="success" />
 				<ShieldIcon variant="warning" />
 				<ShieldIcon variant="error" />
 			</div>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="info" outline />
 				<ShieldIcon variant="success" outline />
 				<ShieldIcon variant="warning" outline />
 				<ShieldIcon variant="error" outline />
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index dce20e670ab20..96327d782c07b 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -156,11 +156,7 @@ const HomeStatCards = () => {
 			className: isWafModuleEnabled ? styles.active : styles.disabled,
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
-					<ShieldIcon
-						variant={ ! isWafModuleEnabled ? 'error' : 'success' }
-						height={ iconHeight }
-						fill={ ! isWafModuleEnabled ? '#A7AAAD' : null }
-					/>
+					<ShieldIcon variant={ ! isWafModuleEnabled ? 'info' : 'success' } height={ iconHeight } />
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
 							{ __( 'Firewall', 'jetpack-protect' ) }
@@ -186,9 +182,8 @@ const HomeStatCards = () => {
 			icon: (
 				<span className={ styles[ 'stat-card-icon' ] }>
 					<ShieldIcon
-						variant={ ! isBruteForceModuleEnabled ? 'error' : 'success' }
+						variant={ ! isBruteForceModuleEnabled ? 'info' : 'success' }
 						height={ iconHeight }
-						fill={ ! isBruteForceModuleEnabled ? '#A7AAAD' : null }
 					/>
 					{ ! isSmall && (
 						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">

From 3a17f97eadeefaf9ff05082a41b730acf4a19048 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 081/143] Init project branch


From f4820b97324860aaeecea89033799dd4a465af4e Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 082/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From a240e20764dc17cdeb2e5a44cf5dae274a9fea8a Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 083/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From b9bfed3145a9255de5fb1398a6a624bd0fd34cea Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 084/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From f02081f15c804f4f4794054db29b23e9bc0eed24 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 085/143] Protect: add ShieldIcon component

---
 .../components/admin-section-hero/index.tsx   |  21 ++-
 .../stories/index.stories.jsx                 |   4 +-
 .../src/js/components/shield-icon/index.tsx   | 165 ++++++++++++++++++
 .../shield-icon/stories/index.stories.tsx     |  50 ++++++
 4 files changed, 230 insertions(+), 10 deletions(-)
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ed83bebc8638..758c8c21e0193 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,9 +1,6 @@
-import {
-	AdminSectionHero as JetpackAdminSectionHero,
-	H3,
-	getIconBySlug,
-} from '@automattic/jetpack-components';
+import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
+import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -15,7 +12,7 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
+	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 
 AdminSectionHero.Heading = ( {
 	children,
+	variant = 'default',
 	showIcon = false,
 }: {
 	children: React.ReactNode;
+	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
 } ) => {
-	const Icon = getIconBySlug( 'protect' );
-
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
-			{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
+			{ showIcon && (
+				<ShieldIcon
+					variant={ `${ variant }-outline` }
+					fill="#1d2327"
+					className={ styles[ 'heading-icon' ] }
+				/>
+			) }
 		</H3>
 	);
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index 7d5b4f8066c93..ca2dfda7fc98e 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -12,7 +12,9 @@ Default.args = {
 	main: (
 		<>
 			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
+			<AdminSectionHero.Heading showIcon variant="success">
+				{ 'No threats found' }
+			</AdminSectionHero.Heading>
 			<AdminSectionHero.Subheading>
 				<Text>{ 'Most recent results' }</Text>
 			</AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..3bf7f479f0051
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
@@ -0,0 +1,165 @@
+import { type JSX } from 'react';
+
+/**
+ * Protect Shield and Checkmark SVG Icon
+ *
+ * @param {object} props           - Component props.
+ * @param {string} props.variant   - Icon variant.
+ * @param {string} props.fill      - Icon fill color.
+ * @param {string} props.className - Additional class names.
+ * @param {number} props.height    - Icon height.
+ * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
+ */
+export default function ShieldIcon( {
+	variant = 'default',
+	height = 32,
+	className,
+	fill,
+}: {
+	variant:
+		| 'default'
+		| 'success'
+		| 'error'
+		| 'default-outline'
+		| 'success-outline'
+		| 'error-outline';
+	className?: string;
+	height?: number;
+	fill?: string;
+} ): JSX.Element {
+	if ( 'error-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
+					fill={ fill || '#D63638' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'error' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 123 ) / 150 }
+				viewBox="0 0 123 150"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
+					fill={ `#fff` }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 14 ) / 17 }
+				viewBox="0 0 14 17"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
+					fill={ fill || '#069E08' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 80 ) / 96 }
+				viewBox="0 0 80 96"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+					fill="white"
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'default-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || 'black' }
+				/>
+			</svg>
+		);
+	}
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 80 ) / 96 }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ fill || 'black' }
+			/>
+		</svg>
+	);
+}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d10365f4b0834
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ShieldIcon from '../index';
+
+export default {
+	title: 'Plugins/Protect/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		Story => (
+			<div style={ { height: '72px', width: '72px' } }>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [
+				'default',
+				'success',
+				'error',
+				'default-outline',
+				'success-outline',
+				'error-outline',
+			],
+		},
+		fill: {
+			control: 'color',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'default',
+};
+
+export const SuccessVariant = args => <ShieldIcon { ...args } />;
+SuccessVariant.args = {
+	variant: 'success',
+};
+
+export const ErrorVariant = args => <ShieldIcon { ...args } />;
+ErrorVariant.args = {
+	variant: 'error',
+};

From 6c73d5aa12eda7d1e1812f416d1f91e6cb9274f3 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Wed, 4 Dec 2024 20:26:54 -0700
Subject: [PATCH 086/143] Protect: Add ShieldIcon Component (#40402)

---
 .../components/changelog/add-shield-icon      |   4 +
 .../components/shield-icon/index.tsx          |  79 +++++++++
 .../shield-icon/stories/index.stories.tsx     |  54 ++++++
 projects/js-packages/components/index.ts      |   1 +
 .../protect/changelog/refactor-alert-icon     |   5 +
 .../components/admin-section-hero/index.tsx   |  20 ++-
 .../admin-section-hero/styles.module.scss     |   4 +-
 .../src/js/components/alert-icon/index.jsx    |  74 --------
 .../alert-icon/stories/index.stories.jsx      |  18 --
 .../components/alert-icon/styles.module.scss  |  11 --
 .../src/js/components/shield-icon/index.tsx   | 165 ------------------
 .../shield-icon/stories/index.stories.tsx     |  50 ------
 .../history/history-admin-section-hero.tsx    |   2 +-
 .../routes/scan/scan-admin-section-hero.tsx   |   2 +-
 14 files changed, 162 insertions(+), 327 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-shield-icon
 create mode 100644 projects/js-packages/components/components/shield-icon/index.tsx
 create mode 100644 projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
 create mode 100644 projects/plugins/protect/changelog/refactor-alert-icon
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/js-packages/components/changelog/add-shield-icon b/projects/js-packages/components/changelog/add-shield-icon
new file mode 100644
index 0000000000000..5c6cc27eeb809
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-shield-icon
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ShieldIcon component
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..fee9f4d70c463
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const COLORS = {
+	error: '#D63638',
+	warning: '#F0B849',
+	success: '#069E08',
+	default: '#1d2327',
+};
+
+/**
+ * Protect Shield SVG Icon
+ *
+ * @param {object}  props           - Component props.
+ * @param {string}  props.className - Additional class names.
+ * @param {string}  props.contrast  - Icon contrast color. Overrides variant.
+ * @param {string}  props.fill      - Icon fill color (default, success, warning, error, or a custom color code string). Overrides variant.
+ * @param {number}  props.height    - Icon height (px). Width is calculated based on height.
+ * @param {string}  props.icon      - Icon variant (success, error). Overrides variant.
+ * @param {boolean} props.outline   - When enabled, the icon will use an outline style.
+ * @param {string}  props.variant   - Icon variant (default, success, error).
+ *
+ * @return {React.ReactElement} Protect Shield SVG Icon
+ */
+export default function ShieldIcon( {
+	className,
+	contrast = '#fff',
+	fill,
+	height = 32,
+	icon,
+	outline = false,
+	variant = 'default',
+}: {
+	className?: string;
+	contrast?: string;
+	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	height?: number;
+	icon?: 'success' | 'error';
+	outline?: boolean;
+	variant: 'default' | 'success' | 'warning' | 'error';
+} ): JSX.Element {
+	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
+	const iconFill = outline ? shieldFill : contrast;
+	const iconVariant = icon || variant;
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 76 ) / 93 }
+			viewBox="0 0 76 93"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				d={
+					'M37.5652 0.980293L75.1304 18.0554V43.5097C75.1304 65.2086 61.1942 85.753 41.5427 92.2343C38.9604 93.0862 36.1701 93.0862 33.5878 92.2343C13.9362 85.753 0 65.2086 0 43.5097V18.0554L37.5652 0.980293Z' +
+					( outline
+						? ' M8.34783 23.4307V43.5097C8.34783 61.9471 20.286 79.0573 36.2024 84.3068C37.0866 84.5981 38.0438 84.5981 38.928 84.3068C54.8444 79.0573 66.7826 61.9471 66.7826 43.5097V23.4307L37.5652 10.15L8.34783 23.4307Z'
+						: '' )
+				}
+				fill={ shieldFill }
+			/>
+			{ 'success' === iconVariant && (
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M55.6042 37.0675L34.3578 65.2656L20.898 55.3892L23.878 51.4342L33.33 58.3698L51.5965 34.1267L55.6042 37.0675Z"
+					fill={ iconFill }
+				/>
+			) }
+			{ [ 'warning', 'error' ].includes( iconVariant ) && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+				/>
+			) }
+		</svg>
+	);
+}
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b5a16d4da4075
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,54 @@
+import ShieldIcon from '../index';
+
+export default {
+	title: 'JS Packages/Components/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'default', 'success', 'warning', 'error' ],
+		},
+		icon: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'success', 'error' ],
+		},
+		fill: {
+			control: 'color',
+		},
+		outline: {
+			control: 'boolean',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'success',
+	outline: false,
+};
+
+export const Variants = () => {
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" />
+				<ShieldIcon variant="success" />
+				<ShieldIcon variant="warning" />
+				<ShieldIcon variant="error" />
+			</div>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="success" outline />
+				<ShieldIcon variant="warning" outline />
+				<ShieldIcon variant="error" outline />
+			</div>
+		</div>
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index eb90df97ad5fe..4b0f3612012e7 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,6 +47,7 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
+export { default as ShieldIcon } from './components/shield-icon';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/changelog/refactor-alert-icon b/projects/plugins/protect/changelog/refactor-alert-icon
new file mode 100644
index 0000000000000..46b4c247b1b9f
--- /dev/null
+++ b/projects/plugins/protect/changelog/refactor-alert-icon
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Refactored icon component code.
+
+
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 758c8c21e0193..5ccf607698084 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,6 +1,9 @@
-import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
+import {
+	AdminSectionHero as JetpackAdminSectionHero,
+	H3,
+	ShieldIcon,
+} from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
-import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -12,7 +15,12 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
+	Heading: React.FC< {
+		children: React.ReactNode;
+		showIcon?: boolean;
+		variant?: 'default' | 'success' | 'error';
+		outline?: boolean;
+	} >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -53,8 +61,10 @@ AdminSectionHero.Heading = ( {
 			{ children }
 			{ showIcon && (
 				<ShieldIcon
-					variant={ `${ variant }-outline` }
-					fill="#1d2327"
+					height={ 38 }
+					variant={ variant }
+					outline
+					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
 			) }
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 5881bcd910045..a414aa9216f5c 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -13,7 +13,7 @@
 }
 
 .heading-icon {
-    margin-left: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
@@ -23,4 +23,4 @@
 
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
-}
\ No newline at end of file
+}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.jsx b/projects/plugins/protect/src/js/components/alert-icon/index.jsx
deleted file mode 100644
index 8a4d32da59553..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/index.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Path, SVG, Rect, G } from '@wordpress/components';
-import React from 'react';
-import styles from './styles.module.scss';
-
-/**
- * Alert icon
- *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
- * @return { React.ReactNode }      The Alert Icon component.
- */
-export default function AlertSVGIcon( { className, color = '#D63638' } ) {
-	return (
-		<div className={ styles.container }>
-			<SVG
-				className={ className }
-				width="127"
-				height="136"
-				viewBox="0 0 127 136"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<G filter="url(#filter0_d_2716_19567)">
-					<Path
-						fillRule="evenodd"
-						clipRule="evenodd"
-						d="M63.4061 36L86.8123 46.4057V61.9177C86.8123 75.141 78.1289 87.6611 65.8844 91.6107C64.2754 92.1298 62.5369 92.1297 60.9279 91.6107C48.6834 87.6611 40 75.141 40 61.9177V46.4057L63.4061 36Z"
-						fill={ color }
-					/>
-					<Rect x="59.8953" y="72.1666" width="7.02184" height="7" rx="3.5" fill="white" />
-					<Path
-						d="M59.9619 51.0626C59.9258 50.4868 60.383 50 60.9599 50H65.8524C66.4293 50 66.8866 50.4868 66.8505 51.0626L65.8056 67.7292C65.7725 68.2562 65.3355 68.6667 64.8075 68.6667H62.0048C61.4769 68.6667 61.0398 68.2562 61.0068 67.7292L59.9619 51.0626Z"
-						fill="white"
-					/>
-				</G>
-				<defs>
-					<filter
-						id="filter0_d_2716_19567"
-						x="0"
-						y="0"
-						width="126.812"
-						height="136"
-						filterUnits="userSpaceOnUse"
-						colorInterpolationFilters="sRGB"
-					>
-						<feFlood floodOpacity="0" result="BackgroundImageFix" />
-						<feColorMatrix
-							in="SourceAlpha"
-							type="matrix"
-							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-							result="hardAlpha"
-						/>
-						<feOffset dy="4" />
-						<feGaussianBlur stdDeviation="20" />
-						<feComposite in2="hardAlpha" operator="out" />
-						<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
-						<feBlend
-							mode="normal"
-							in2="BackgroundImageFix"
-							result="effect1_dropShadow_2716_19567"
-						/>
-						<feBlend
-							mode="normal"
-							in="SourceGraphic"
-							in2="effect1_dropShadow_2716_19567"
-							result="shape"
-						/>
-					</filter>
-				</defs>
-			</SVG>
-		</div>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
deleted file mode 100644
index 107e513394d42..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import AlertIcon from '../index.jsx';
-
-export default {
-	title: 'Plugins/Protect/Alert Icon',
-	component: AlertIcon,
-	argTypes: {
-		color: {
-			control: {
-				type: 'color',
-			},
-		},
-	},
-};
-
-const FooterTemplate = args => <AlertIcon { ...args } />;
-export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss b/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
deleted file mode 100644
index 938a62897f2a8..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-	width: 48px;
-	height: 56px;
-	margin-bottom: calc( var( --spacing-base ) * 8 ); // 64px
-
-	> svg {
-		position: relative;
-		top: -36px;
-		left: -40px;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
deleted file mode 100644
index 3bf7f479f0051..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @param {object} props           - Component props.
- * @param {string} props.variant   - Icon variant.
- * @param {string} props.fill      - Icon fill color.
- * @param {string} props.className - Additional class names.
- * @param {number} props.height    - Icon height.
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ShieldIcon( {
-	variant = 'default',
-	height = 32,
-	className,
-	fill,
-}: {
-	variant:
-		| 'default'
-		| 'success'
-		| 'error'
-		| 'default-outline'
-		| 'success-outline'
-		| 'error-outline';
-	className?: string;
-	height?: number;
-	fill?: string;
-} ): JSX.Element {
-	if ( 'error-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
-					fill={ fill || '#D63638' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'error' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 123 ) / 150 }
-				viewBox="0 0 123 150"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
-					fill={ `#fff` }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 14 ) / 17 }
-				viewBox="0 0 14 17"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
-					fill={ fill || '#069E08' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 80 ) / 96 }
-				viewBox="0 0 80 96"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-					fill="white"
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'default-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || 'black' }
-				/>
-			</svg>
-		);
-	}
-
-	return (
-		<svg
-			height={ height }
-			width={ ( height * 80 ) / 96 }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			className={ className }
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ fill || 'black' }
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
deleted file mode 100644
index d10365f4b0834..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ShieldIcon from '../index';
-
-export default {
-	title: 'Plugins/Protect/Sheild Icon',
-	component: ShieldIcon,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { height: '72px', width: '72px' } }>
-				<Story />
-			</div>
-		),
-	],
-	argTypes: {
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: [
-				'default',
-				'success',
-				'error',
-				'default-outline',
-				'success-outline',
-				'error-outline',
-			],
-		},
-		fill: {
-			control: 'color',
-		},
-	},
-};
-
-export const Default = args => <ShieldIcon { ...args } />;
-Default.args = {
-	variant: 'default',
-};
-
-export const SuccessVariant = args => <ShieldIcon { ...args } />;
-SuccessVariant.args = {
-	variant: 'success',
-};
-
-export const ErrorVariant = args => <ShieldIcon { ...args } />;
-ErrorVariant.args = {
-	variant: 'error',
-};
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 4aa517f5f120b..141c51cde284a 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => {
 							__( 'Most recent results', 'jetpack-protect' )
 						) }
 					</Text>
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant="success">
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
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 1c5cc6cac49b9..9e1b9c102a037 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
@@ -95,7 +95,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							anchor={ dailyScansPopoverAnchor }
 						/>
 					) }
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */

From 1118627d51569f55a638f62341c5aa1da620dbc2 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 5 Dec 2024 10:50:27 -0700
Subject: [PATCH 087/143] Protect: Integrate ThreatsDataViews Component
 (#40076)

---
 pnpm-lock.yaml                                |   3 +
 .../add-threat-subtitle-and-icon-utils        |   4 +
 projects/js-packages/scan/src/utils/index.ts  |  32 +-
 .../protect/changelog/add-threats-data-views  |   5 +
 projects/plugins/protect/package.json         |   1 +
 .../protect/src/class-scan-history.php        |  30 +-
 projects/plugins/protect/src/js/api.ts        |   3 +-
 .../src/js/components/admin-page/index.jsx    |  12 +-
 .../components/admin-page/styles.module.scss  |  11 +
 .../error-admin-section-hero/index.tsx        |   4 -
 .../js/components/fix-threat-modal/index.jsx  |   9 +-
 .../js/components/free-accordion/index.jsx    |  64 ----
 .../free-accordion/stories/index.stories.jsx  | 120 -------
 .../free-accordion/styles.module.scss         |  79 -----
 .../components/ignore-threat-modal/index.jsx  |  14 +-
 .../src/js/components/navigation/badge.jsx    | 101 ------
 .../src/js/components/navigation/group.jsx    |  51 ---
 .../src/js/components/navigation/index.jsx    |  73 -----
 .../src/js/components/navigation/item.jsx     |  85 -----
 .../src/js/components/navigation/label.jsx    |  24 --
 .../components/navigation/styles.module.scss  | 142 ---------
 .../navigation/use-menu-navigation.js         |  92 ------
 .../js/components/paid-accordion/index.jsx    | 192 -----------
 .../stories/broken/index.stories.jsx          | 120 -------
 .../paid-accordion/styles.module.scss         | 202 ------------
 .../src/js/components/pricing-table/index.jsx |   4 +-
 .../components/protect-check-icon/index.tsx   |  25 --
 .../js/components/scan-navigation/index.jsx   |  44 ---
 .../js/components/threat-fix-header/index.jsx |   7 +-
 .../src/js/components/threats-list/empty.jsx  | 140 --------
 .../js/components/threats-list/free-list.jsx  | 125 --------
 .../src/js/components/threats-list/index.jsx  | 194 -----------
 .../js/components/threats-list/navigation.jsx | 130 --------
 .../js/components/threats-list/pagination.jsx | 142 ---------
 .../js/components/threats-list/paid-list.jsx  | 253 ---------------
 .../threats-list/styles.module.scss           | 129 --------
 .../threats-list/use-threats-list.js          | 158 ---------
 .../unignore-threat-modal/index.jsx           |  18 +-
 .../src/js/hooks/use-protect-data/index.ts    | 173 ----------
 projects/plugins/protect/src/js/index.tsx     |   7 +-
 .../protect/src/js/routes/firewall/index.jsx  |   3 +-
 .../history/history-admin-section-hero.tsx    |  84 -----
 .../src/js/routes/scan/history/index.jsx      | 301 ------------------
 .../js/routes/scan/history/status-filters.jsx |  44 ---
 .../js/routes/scan/history/styles.module.scss |  37 ---
 .../protect/src/js/routes/scan/index.jsx      |  79 +++--
 .../src/js/routes/scan/onboarding-steps.jsx   |  61 ++--
 .../routes/scan/scan-admin-section-hero.tsx   | 138 ++++----
 .../src/js/routes/scan/scan-footer.jsx        | 143 ---------
 .../js/routes/scan/scan-results-data-view.tsx |  56 ++++
 .../scan/scanning-admin-section-hero.tsx      |  25 +-
 .../src/js/routes/scan/styles.module.scss     |  20 +-
 projects/plugins/protect/webpack.config.js    |  18 ++
 53 files changed, 363 insertions(+), 3668 deletions(-)
 create mode 100644 projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
 create mode 100644 projects/plugins/protect/changelog/add-threats-data-views
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/badge.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/group.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/item.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/label.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/scan-navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/empty.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/free-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/navigation.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/pagination.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
 delete mode 100644 projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a6d147b9c7eb..fbb0bbdb03d94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4202,6 +4202,9 @@ importers:
         specifier: 6.2.2
         version: 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
+      '@automattic/babel-plugin-replace-textdomain':
+        specifier: workspace:*
+        version: link:../../js-packages/babel-plugin-replace-textdomain
       '@automattic/jetpack-webpack-config':
         specifier: workspace:*
         version: link:../../js-packages/webpack-config
diff --git a/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
new file mode 100644
index 0000000000000..ad8fa81458278
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add utilities for generating threat subtitle and icons
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index fbafc9fcede36..29e017c837b68 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -17,6 +17,36 @@ export const getThreatType = ( threat: Threat ) => {
 	return null;
 };
 
+export const getThreatIcon = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return 'wordpress-alt';
+		case 'plugin':
+			return 'plugins';
+		case 'theme':
+			return 'appearance';
+		case 'file':
+			return 'media-code';
+		default:
+			return 'shield-alt';
+	}
+};
+
+export const getThreatSubtitle = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
+		case 'plugin':
+			return __( 'Vulnerable Plugin', 'jetpack-scan' );
+		case 'theme':
+			return __( 'Vulnerable Theme', 'jetpack-scan' );
+		case 'file':
+			return __( 'File Threat', 'jetpack-scan' );
+		default:
+			return __( 'Threat', 'jetpack-scan' );
+	}
+};
+
 export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => {
 	const now = new Date();
 	const lastUpdated = new Date( lastUpdatedTimestamp );
@@ -124,7 +154,7 @@ export const getFixerDescription = ( threat: Threat ) => {
 			}
 			break;
 		case 'update':
-			if ( threat.fixedIn && threat.extension.name ) {
+			if ( threat.fixedIn && threat.extension?.name ) {
 				return sprintf(
 					/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
 					__( 'Update %1$s to version %2$s', 'jetpack-scan' ),
diff --git a/projects/plugins/protect/changelog/add-threats-data-views b/projects/plugins/protect/changelog/add-threats-data-views
new file mode 100644
index 0000000000000..e15bd6a461a71
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-threats-data-views
@@ -0,0 +1,5 @@
+Significance: minor
+Type: changed
+
+Added DataViews component for viewing scan results.
+
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
index 9d11e44dc60af..8708e2c101c9f 100644
--- a/projects/plugins/protect/package.json
+++ b/projects/plugins/protect/package.json
@@ -49,6 +49,7 @@
 		"react-router-dom": "6.2.2"
 	},
 	"devDependencies": {
+		"@automattic/babel-plugin-replace-textdomain": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.26.0",
 		"@babel/preset-env": "7.26.0",
diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php
index bd034c375caf9..8ea1dec7156e7 100644
--- a/projects/plugins/protect/src/class-scan-history.php
+++ b/projects/plugins/protect/src/class-scan-history.php
@@ -207,43 +207,19 @@ public static function fetch_from_api() {
 	 * Normalize API Data
 	 * Formats the payload from the Scan API into an instance of History_Model.
 	 *
-	 * @phan-suppress PhanDeprecatedProperty -- Maintaining backwards compatibility.
-	 *
 	 * @param object $scan_data The data returned by the scan API.
 	 * @return History_Model
 	 */
 	private static function normalize_api_data( $scan_data ) {
-		$history                      = new History_Model();
-		$history->num_threats         = 0;
-		$history->num_core_threats    = 0;
-		$history->num_plugins_threats = 0;
-		$history->num_themes_threats  = 0;
-
+		$history               = new History_Model();
 		$history->last_checked = $scan_data->last_checked;
 
 		if ( empty( $scan_data->threats ) || ! is_array( $scan_data->threats ) ) {
 			return $history;
 		}
 
-		foreach ( $scan_data->threats as $threat ) {
-			if ( isset( $threat->extension->type ) ) {
-				if ( 'plugin' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'plugin' );
-					continue;
-				}
-
-				if ( 'theme' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'theme' );
-					continue;
-				}
-			}
-
-			if ( 'Vulnerable.WP.Core' === $threat->signature ) {
-				self::handle_core_threats( $threat, $history );
-				continue;
-			}
-
-			self::handle_additional_threats( $threat, $history );
+		foreach ( $scan_data->threats as $source_threat ) {
+			$history->threats[] = new Threat_Model( $source_threat );
 		}
 
 		return $history;
diff --git a/projects/plugins/protect/src/js/api.ts b/projects/plugins/protect/src/js/api.ts
index 2b98a6164bf8b..97d11fd5c0f2b 100644
--- a/projects/plugins/protect/src/js/api.ts
+++ b/projects/plugins/protect/src/js/api.ts
@@ -1,6 +1,7 @@
-import { type FixersStatus, type ScanStatus, type WafStatus } from '@automattic/jetpack-scan';
+import { type FixersStatus, type ScanStatus } from '@automattic/jetpack-scan';
 import apiFetch from '@wordpress/api-fetch';
 import camelize from 'camelize';
+import { WafStatus } from './types/waf';
 
 const API = {
 	getWaf: (): Promise< WafStatus > =>
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 2d023560517f3..68f9359a9bd81 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -9,9 +9,9 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import useNotices from '../../hooks/use-notices';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
 import ScanButton from '../scan-button';
@@ -23,11 +23,7 @@ const AdminPage = ( { children } ) => {
 	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
 	const navigate = useNavigate();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-	} = useProtectData();
+	const { data: status } = useScanStatusQuery();
 	const location = useLocation();
 	const { hasPlan } = usePlan();
 
@@ -71,11 +67,11 @@ const AdminPage = ( { children } ) => {
 						link="/scan"
 						label={
 							<span className={ styles.tab }>
-								{ numThreats > 0
+								{ status.threats.length > 0
 									? sprintf(
 											// translators: %d is the number of threats found.
 											__( 'Scan (%d)', 'jetpack-protect' ),
-											numThreats
+											status.threats.length
 									  )
 									: __( 'Scan', 'jetpack-protect' ) }
 							</span>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adc0cee561ba5..da2e9510cd7d9 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -5,10 +5,21 @@
 .header {
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
+    align-items: center;
+
+    @media ( min-width: 600px ) {
+        flex-direction: row;
+    }
 
     &__scan_buttons {
         display: flex;
         gap: calc( var( --spacing-base ) * 3 ); // 24px
+
+        @media ( min-width: 600px ) {
+            flex-direction: row;
+        }
     }
 }
 
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 5214531dcf362..1a9bc87387fa9 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -2,7 +2,6 @@ import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
-import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
 interface ErrorAdminSectionHeroProps {
@@ -32,9 +31,6 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 					<AdminSectionHero.Subheading>
 						<Text>{ displayErrorMessage }</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			preserveSecondaryOnMobile={ false }
diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
index e1274e8e29a17..cbb49498c353f 100644
--- a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
@@ -7,7 +7,7 @@ import ThreatFixHeader from '../threat-fix-header';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
+const FixThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const { fixThreats, isLoading: isFixersLoading } = useFixers();
 
@@ -21,7 +21,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 	const handleFixClick = () => {
 		return async event => {
 			event.preventDefault();
-			await fixThreats( [ id ] );
+			await fixThreats( [ threat.id ] );
 			setModal( { type: null } );
 		};
 	};
@@ -37,10 +37,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 				</Text>
 
 				<div className={ styles.list }>
-					<ThreatFixHeader
-						threat={ { id, fixable, label, icon, severity } }
-						fixAllDialog={ false }
-					/>
+					<ThreatFixHeader threat={ threat } fixAllDialog={ false } />
 				</div>
 
 				<div className={ styles.footer }>
diff --git a/projects/plugins/protect/src/js/components/free-accordion/index.jsx b/projects/plugins/protect/src/js/components/free-accordion/index.jsx
deleted file mode 100644
index e801d9374fd33..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext } from 'react';
-import styles from './styles.module.scss';
-
-const FreeAccordionContext = React.createContext();
-
-export const FreeAccordionItem = ( { id, title, label, icon, children, onOpen } ) => {
-	const accordionData = useContext( FreeAccordionContext );
-	const open = accordionData?.open === id;
-	const setOpen = accordionData?.setOpen;
-
-	const bodyClassNames = clsx( styles[ 'accordion-body' ], {
-		[ styles[ 'accordion-body-open' ] ]: open,
-		[ styles[ 'accordion-body-close' ] ]: ! open,
-	} );
-
-	const handleClick = useCallback( () => {
-		if ( ! open ) {
-			onOpen?.();
-		}
-		setOpen( current => {
-			return current === id ? null : id;
-		} );
-	}, [ open, onOpen, setOpen, id ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ open ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-				</div>
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ open ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div className={ bodyClassNames } aria-hidden={ open ? 'false' : 'true' }>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const FreeAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<FreeAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</FreeAccordionContext.Provider>
-	);
-};
-
-export default FreeAccordion;
diff --git a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
deleted file mode 100644
index 43ad41e2501eb..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import FreeAccordion, { FreeAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Free Accordion',
-	component: FreeAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<FreeAccordion>
-		<FreeAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-	</FreeAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
deleted file mode 100644
index 5278f6eff39f4..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.accordion {
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/8;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
index 7e8113b6f38ab..0788eb8bd7a41 100644
--- a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
@@ -1,16 +1,18 @@
 import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import useIgnoreThreatMutation from '../../data/scan/use-ignore-threat-mutation';
 import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const IgnoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const ignoreThreatMutation = useIgnoreThreatMutation();
 	const codeableURL = getRedirectUrl( 'jetpack-protect-codeable-referral' );
+	const icon = getThreatIcon( threat );
 
 	const [ isIgnoring, setIsIgnoring ] = useState( false );
 
@@ -25,7 +27,7 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		return async event => {
 			event.preventDefault();
 			setIsIgnoring( true );
-			await ignoreThreatMutation.mutateAsync( id );
+			await ignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsIgnoring( false );
 		};
@@ -42,12 +44,12 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/components/navigation/badge.jsx b/projects/plugins/protect/src/js/components/navigation/badge.jsx
deleted file mode 100644
index 93ebecf7235ef..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/badge.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover, Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, check, info } from '@wordpress/icons';
-import PropTypes from 'prop-types';
-import React, { useState, useCallback, useMemo } from 'react';
-import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
-import styles from './styles.module.scss';
-
-/**
- * Gets the Badge element
- *
- * @param {number}  count   - The number of threats found for this item.
- * @param {boolean} checked - Whether this item was checked for threats yet.
- * @return {object} The badge element
- */
-const getBadgeElement = ( count, checked ) => {
-	if ( ! checked ) {
-		return {
-			popoverText: __(
-				'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
-				'jetpack-protect'
-			),
-			badgeElement: (
-				<Icon icon={ info } size={ 28 } className={ styles[ 'navigation-item-info-badge' ] } />
-			),
-		};
-	}
-
-	if ( count === 0 ) {
-		return {
-			popoverText: __( 'No known threats found to affect this version', 'jetpack-protect' ),
-			badgeElement: (
-				<Icon icon={ check } size={ 28 } className={ styles[ 'navigation-item-check-badge' ] } />
-			),
-		};
-	}
-
-	return {
-		popoverText: null,
-		badgeElement: (
-			<Text
-				variant="body-extra-small"
-				className={ styles[ 'navigation-item-badge' ] }
-				component="div"
-			>
-				{ count }
-			</Text>
-		),
-	};
-};
-
-const ItemBadge = ( { count, checked } ) => {
-	const { data: status } = useScanStatusQuery();
-
-	const { popoverText, badgeElement } = getBadgeElement( count, checked );
-	const [ showPopover, setShowPopover ] = useState( false );
-
-	const inProgress = useMemo( () => isScanInProgress( status ), [ status ] );
-
-	const handleEnter = useCallback( () => {
-		if ( inProgress ) {
-			return;
-		}
-
-		setShowPopover( true );
-	}, [ inProgress ] );
-
-	const handleOut = useCallback( () => {
-		setShowPopover( false );
-	}, [] );
-
-	return (
-		<div
-			onMouseLeave={ popoverText ? handleOut : null }
-			onMouseEnter={ popoverText ? handleEnter : null }
-			onClick={ popoverText ? handleEnter : null }
-			onFocus={ popoverText ? handleEnter : null }
-			onBlur={ popoverText ? handleOut : null }
-			role="presentation"
-		>
-			{ ! inProgress ? badgeElement : <Spinner /> }
-			{ showPopover && (
-				<Popover noArrow={ false } inline={ true }>
-					<Text variant="body-small" className={ styles[ 'popover-text' ] }>
-						{ popoverText }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-ItemBadge.propTypes = {
-	/* The number of threats found for this item */
-	count: PropTypes.number,
-	/* Whether this item was checked for threats yet */
-	checked: PropTypes.bool,
-};
-
-export default ItemBadge;
diff --git a/projects/plugins/protect/src/js/components/navigation/group.jsx b/projects/plugins/protect/src/js/components/navigation/group.jsx
deleted file mode 100644
index 9352ae5c63d67..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/group.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useState, useCallback, useContext } from 'react';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const MAX_ITEMS = 8;
-
-const NavigationGroup = ( { icon, label, children } ) => {
-	const [ collapsed, setCollapsed ] = useState( true );
-	const { mode } = useContext( NavigationContext );
-	const needsTruncate =
-		Array.isArray( children ) && children?.length >= MAX_ITEMS && mode === 'list';
-	const content = needsTruncate && collapsed ? children.slice( 0, MAX_ITEMS ) : children;
-	const totalHideItems = needsTruncate ? children?.length - MAX_ITEMS : 0;
-
-	const handleCollapsedToggle = useCallback( () => {
-		setCollapsed( current => ! current );
-	}, [] );
-
-	return (
-		<li tabIndex={ -1 } role="menuitem" className={ styles[ 'navigation-group' ] }>
-			<ItemLabel icon={ icon } className={ styles[ 'navigation-group-label' ] }>
-				{ label }
-			</ItemLabel>
-			<div className={ styles[ 'navigation-group-list' ] }>
-				<ul className={ styles[ 'navigation-group-content' ] }>{ content }</ul>
-				{ needsTruncate && (
-					<div className={ styles[ 'navigation-group-truncate' ] }>
-						<Button variant="link" onClick={ handleCollapsedToggle }>
-							{ collapsed
-								? sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Show %s more', 'jetpack-protect' ),
-										totalHideItems
-								  )
-								: sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Hide %s items', 'jetpack-protect' ),
-										totalHideItems
-								  ) }
-						</Button>
-					</div>
-				) }
-			</div>
-		</li>
-	);
-};
-
-export default NavigationGroup;
diff --git a/projects/plugins/protect/src/js/components/navigation/index.jsx b/projects/plugins/protect/src/js/components/navigation/index.jsx
deleted file mode 100644
index bd30dfbdad964..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/index.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import React, { useState, useRef, useCallback } from 'react';
-import NavigationGroup from './group';
-import NavigationItem from './item';
-import styles from './styles.module.scss';
-import useMenuNavigation, { NavigationContext } from './use-menu-navigation';
-
-const NavigationList = ( { children } ) => (
-	<ul className={ styles.navigation } role="menu">
-		{ children }
-	</ul>
-);
-
-const NavigationDropdown = ( { children, data } ) => {
-	const ref = useRef( undefined );
-	const [ listOpen, setListOpen ] = useState( false );
-	const item = data?.items?.find( navItem => navItem?.id === data?.selectedItem ) ?? {
-		label: __( 'See all results', 'jetpack-protect' ),
-	};
-	const { label, icon } = item;
-
-	const handleOpen = useCallback( () => {
-		setListOpen( open => ! open );
-	}, [] );
-
-	return (
-		<button className={ styles[ 'navigation-dropdown-button' ] } onClick={ handleOpen } ref={ ref }>
-			<div className={ styles[ 'navigation-dropdown-label' ] }>
-				{ icon && <Icon icon={ icon } className={ styles[ 'navigation-dropdown-icon' ] } /> }
-				<Text>{ label }</Text>
-			</div>
-			<Icon icon={ listOpen ? chevronUp : chevronDown } size={ 32 } />
-			<Popover position="bottom center" anchorRef={ ref?.current } inline={ true }>
-				<div
-					style={ {
-						display: listOpen ? 'block' : 'none',
-						width: ref?.current?.getBoundingClientRect?.()?.width,
-					} }
-				>
-					{ children }
-				</div>
-			</Popover>
-		</button>
-	);
-};
-
-const getNavigationComponent = mode => {
-	switch ( mode ) {
-		case 'list':
-			return NavigationList;
-		case 'dropdown':
-			return NavigationDropdown;
-		default:
-			return NavigationList;
-	}
-};
-
-const Navigation = ( { children, selected, onSelect, mode = 'list' } ) => {
-	const data = useMenuNavigation( { selected, onSelect } );
-	const Component = getNavigationComponent( mode );
-
-	return (
-		<NavigationContext.Provider value={ { ...data, mode } }>
-			<Component data={ data }>{ children }</Component>
-		</NavigationContext.Provider>
-	);
-};
-
-export default Navigation;
-export { NavigationItem, NavigationGroup };
diff --git a/projects/plugins/protect/src/js/components/navigation/item.jsx b/projects/plugins/protect/src/js/components/navigation/item.jsx
deleted file mode 100644
index d902625c3997d..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/item.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import clsx from 'clsx';
-import React, { useContext, useEffect, useCallback } from 'react';
-import ItemBadge from './badge';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const NavigationItem = ( {
-	id,
-	label,
-	icon,
-	badge,
-	disabled,
-	onClick,
-	onKeyDown,
-	onFocus,
-	checked,
-} ) => {
-	const context = useContext( NavigationContext );
-
-	const selected = context?.selectedItem === id;
-	const registerItem = context?.registerItem;
-	const registerRef = context?.registerRef;
-	const handleClickItem = context?.handleClickItem;
-	const handleKeyDownItem = context?.handleKeyDownItem;
-	const handleFocusItem = context?.handleFocusItem;
-
-	const wrapperClassName = clsx( styles[ 'navigation-item' ], {
-		[ styles.clickable ]: ! disabled,
-		[ styles.selected ]: selected,
-	} );
-
-	const handleClick = useCallback(
-		evt => {
-			onClick?.( evt );
-			handleClickItem?.( id );
-		},
-		[ handleClickItem, id, onClick ]
-	);
-
-	const handleKeyDown = useCallback(
-		evt => {
-			onKeyDown?.( evt );
-			handleKeyDownItem?.( evt );
-		},
-		[ handleKeyDownItem, onKeyDown ]
-	);
-
-	const handleRef = useCallback(
-		ref => {
-			registerRef( ref, id );
-		},
-		[ registerRef, id ]
-	);
-
-	const handleFocus = useCallback(
-		evt => {
-			onFocus?.( evt );
-			handleFocusItem?.( id );
-		},
-		[ handleFocusItem, id, onFocus ]
-	);
-
-	useEffect( () => {
-		registerItem( { id, disabled, label, icon } );
-		// eslint-disable-next-line
-	}, [] );
-
-	return (
-		<li
-			className={ wrapperClassName }
-			onClick={ disabled ? null : handleClick }
-			onKeyDown={ handleKeyDown }
-			onFocus={ disabled ? null : handleFocus }
-			role="menuitem"
-			tabIndex={ disabled ? -1 : 0 }
-			ref={ handleRef }
-		>
-			<ItemLabel icon={ icon }>{ label }</ItemLabel>
-			<ItemBadge count={ badge } checked={ checked } />
-		</li>
-	);
-};
-
-export default NavigationItem;
diff --git a/projects/plugins/protect/src/js/components/navigation/label.jsx b/projects/plugins/protect/src/js/components/navigation/label.jsx
deleted file mode 100644
index 8f075caae020a..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/label.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon } from '@wordpress/icons';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './styles.module.scss';
-
-const ItemLabel = ( { icon, children, className } ) => {
-	return (
-		<Text className={ clsx( styles[ 'navigation-item-label' ], className ) }>
-			{ icon && <Icon icon={ icon } className={ styles[ 'navigation-item-icon' ] } size={ 28 } /> }
-			<span className={ styles[ 'navigation-item-label-content' ] }>{ children }</span>
-		</Text>
-	);
-};
-
-ItemLabel.propTypes = {
-	/* An icon that will be rendered before text */
-	icon: PropTypes.node,
-	/* Label text that will be rendered */
-	children: PropTypes.node.isRequired,
-};
-
-export default ItemLabel;
diff --git a/projects/plugins/protect/src/js/components/navigation/styles.module.scss b/projects/plugins/protect/src/js/components/navigation/styles.module.scss
deleted file mode 100644
index df9e3ef1f8a25..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/styles.module.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-.navigation {
-	background-color: var( --jp-white );
-	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
-	border-radius: var( --jp-border-radius );
-	margin: 0;
-}
-
-.navigation-item {
-	display: flex;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	text-align: left;
-
-	// Clickable State
-	&.clickable {
-		cursor: pointer;
-		outline-color: var( --jp-black );
-
-		// Focus/Hover State
-		&:hover:not(.selected),
-		&:focus:not(.selected) {
-			background-color: var( --jp-gray-0 );
-		}
-	}
-
-	// Selected State
-	&.selected {
-		background-color: var( --jp-black );
-
-		& .navigation-item-label {
-			color: var( --jp-white )
-		}
-
-		& .navigation-item-icon {
-			fill: var( --jp-white );
-		}
-
-		& .navigation-item-badge {
-			border: 1px solid var( --jp-red );
-			background-color: var( --jp-red );
-			color: var( --jp-white );
-		}
-	}
-
-	// CHILDRENS
-
-	// .navigation-item-label
-	&-label {
-		display: flex;
-		align-items: center;
-		padding-right: var( --spacing-base ); // 8px
-		overflow-x: hidden;
-	}
-
-	// .navigation-item-label-content
-	&-label-text {
-		display: block;
-		overflow-x: hidden;
-		text-overflow: ellipsis;
-	}
-
-	// .navigation-item-icon
-	&-icon {
-		margin-right: calc( var( --spacing-base ) * 2); // 16px
-	}
-
-	// .navigation-item-badge
-	&-badge {
-		border: 1px solid var( --jp-red-60 );
-		color: var( --jp-red-60 );
-		border-radius: 50%;
-		padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
-		min-width: 30px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-	}
-
-	&-check-badge {
-		fill: var( --jp-green-50 );
-	}
-
-	&-info-badge {
-		fill: var( --jp-gray-20 );
-	}
-}
-
-.navigation-group {
-	--icon-size: 28px;
-	--item-spacing: calc( var( --spacing-base ) * 2 ); // 16px
-	--left-spacing: calc( var( --icon-size ) + var( --item-spacing ) ); // 28px + 16px
-
-	list-style: none;
-
-	&-label {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-
-	&-content {
-		padding: 0;
-	}
-
-	&-list {
-		margin-left: var( --left-spacing ) ;
-	}
-
-	&-truncate {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		display: flex;
-		justify-content: flex-start;
-	}
-}
-
-.popover-text {
-	width: 250px;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.navigation-dropdown {
-	&-button {
-		display: flex;
-		border: 1px solid var( --jp-gray-10 );
-		border-radius: var( --jp-border-radius );
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		background-color: var( --jp-white );
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	&-label {
-		display: flex;
-		justify-content: flex-start;
-	}
-
-	&-icon {
-		margin-right: var( --spacing-base ); // 8px
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js b/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
deleted file mode 100644
index 2972dac06b572..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-
-export const NavigationContext = React.createContext();
-
-const useMenuNavigation = ( { selected, onSelect } ) => {
-	const [ items, setItems ] = useState( [] );
-	const [ refs, setRef ] = useState( [] );
-	const [ focusedItem, setFocusedItem ] = useState();
-
-	const handleClickItem = id => {
-		onSelect( id );
-	};
-
-	const handleFocusItem = id => {
-		setFocusedItem( id );
-	};
-
-	const getPrevItem = ( current, last ) => {
-		const startMinusOne = current - 1;
-		const prevIndex = startMinusOne < 0 ? last : startMinusOne;
-		const prevItem = items[ prevIndex ];
-		return prevItem?.disabled ? getPrevItem( prevIndex, last ) : prevItem;
-	};
-
-	const getNextItem = ( current, last ) => {
-		const startPlusOne = current + 1;
-		const nextIndex = startPlusOne > last ? 0 : startPlusOne;
-		const nextItem = items[ nextIndex ];
-		return nextItem?.disabled ? getNextItem( nextIndex, last ) : nextItem;
-	};
-
-	const handleKeyDownItem = input => {
-		const code = input?.code;
-		const current = items.findIndex( item => item?.id === selected );
-		const lastIndex = items.length - 1;
-
-		let nextId;
-
-		if ( code === 'ArrowUp' ) {
-			const prevItem = getPrevItem( current, lastIndex );
-			nextId = prevItem?.id;
-		} else if ( code === 'ArrowDown' ) {
-			const nextItem = getNextItem( current, lastIndex );
-			nextId = nextItem?.id;
-		} else if ( ( code === 'Enter' || code === 'Space' ) && focusedItem ) {
-			nextId = focusedItem;
-		}
-
-		if ( nextId ) {
-			const element = refs[ nextId ];
-			element?.focus();
-			onSelect( nextId );
-		}
-	};
-
-	const registerRef = ( ref, id ) => {
-		setRef( allRefs => {
-			if ( ! allRefs[ id ] && ref ) {
-				return { ...allRefs, [ id ]: ref };
-			}
-			return allRefs;
-		} );
-	};
-
-	const registerItem = data => {
-		setItems( allItems => {
-			const newItems = [ ...allItems ];
-			const id = data?.id;
-			const currentIdx = newItems.findIndex( item => item?.id === id );
-
-			if ( currentIdx >= 0 ) {
-				newItems[ currentIdx ] = data;
-			} else {
-				newItems.push( data );
-			}
-
-			return newItems;
-		} );
-	};
-
-	return {
-		selectedItem: selected,
-		handleClickItem,
-		handleKeyDownItem,
-		handleFocusItem,
-		registerRef,
-		registerItem,
-		items,
-	};
-};
-
-export default useMenuNavigation;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
deleted file mode 100644
index c733ff1f0a08c..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
-	IconTooltip,
-	Spinner,
-	Text,
-	ThreatSeverityBadge,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { ExternalLink } from '@wordpress/components';
-import { dateI18n } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext, useMemo } from 'react';
-import { PAID_PLUGIN_SUPPORT_URL } from '../../constants';
-import useFixers from '../../hooks/use-fixers';
-import styles from './styles.module.scss';
-
-// Extract context provider for clarity and reusability
-const PaidAccordionContext = React.createContext();
-
-// Component for displaying threat dates
-const ScanHistoryDetails = ( { firstDetected, fixedOn, status } ) => {
-	const statusText = useMemo( () => {
-		if ( status === 'fixed' ) {
-			return sprintf(
-				/* translators: %s: Fixed on date */
-				__( 'Threat fixed %s', 'jetpack-protect' ),
-				dateI18n( 'M j, Y', fixedOn )
-			);
-		}
-		if ( status === 'ignored' ) {
-			return __( 'Threat ignored', 'jetpack-protect' );
-		}
-		return null;
-	}, [ status, fixedOn ] );
-
-	return (
-		firstDetected && (
-			<>
-				<Text className={ styles[ 'accordion-header-status' ] }>
-					{ sprintf(
-						/* translators: %s: First detected date */
-						__( 'Threat found %s', 'jetpack-protect' ),
-						dateI18n( 'M j, Y', firstDetected )
-					) }
-					{ statusText && (
-						<>
-							<span className={ styles[ 'accordion-header-status-separator' ] }></span>
-							<span className={ styles[ `is-${ status }` ] }>{ statusText }</span>
-						</>
-					) }
-				</Text>
-				{ [ 'fixed', 'ignored' ].includes( status ) && <StatusBadge status={ status } /> }
-			</>
-		)
-	);
-};
-
-// Badge for displaying the status (fixed or ignored)
-const StatusBadge = ( { status } ) => (
-	<div className={ `${ styles[ 'status-badge' ] } ${ styles[ status ] }` }>
-		{ status === 'fixed'
-			? __( 'Fixed', 'jetpack-protect' )
-			: __( 'Ignored', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 ) }
-	</div>
-);
-
-const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => {
-	if ( isStaleFixInProgress ) {
-		return (
-			<IconTooltip
-				className={ styles[ 'icon-tooltip' ] }
-				iconClassName={ styles[ 'icon-tooltip__icon' ] }
-				iconSize={ 20 }
-				placement={ 'top' }
-				hoverShow={ true }
-			>
-				<Text className={ styles[ 'icon-tooltip__content' ] }>
-					{ createInterpolateElement(
-						__(
-							'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
-							'jetpack-protect'
-						),
-						{
-							supportLink: (
-								<ExternalLink
-									className={ styles[ 'support-link' ] }
-									href={ PAID_PLUGIN_SUPPORT_URL }
-								/>
-							),
-						}
-					) }
-				</Text>
-			</IconTooltip>
-		);
-	}
-
-	if ( isActiveFixInProgress ) {
-		return <Spinner color="black" />;
-	}
-
-	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
-};
-
-export const PaidAccordionItem = ( {
-	id,
-	title,
-	label,
-	icon,
-	fixable,
-	severity,
-	children,
-	firstDetected,
-	fixedOn,
-	onOpen,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { open, setOpen } = useContext( PaidAccordionContext );
-	const isOpen = open === id;
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-
-	const handleClick = useCallback( () => {
-		if ( ! isOpen ) {
-			onOpen?.();
-		}
-		setOpen( current => ( current === id ? null : id ) );
-	}, [ isOpen, onOpen, setOpen, id ] );
-
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ isOpen ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-					{ [ 'fixed', 'ignored' ].includes( status ) && (
-						<ScanHistoryDetails
-							firstDetected={ firstDetected }
-							fixedOn={ fixedOn }
-							status={ status }
-						/>
-					) }
-				</div>
-				<div>
-					<ThreatSeverityBadge severity={ severity } />
-				</div>
-				{ ! hideAutoFixColumn && fixable && (
-					<div>
-						{ renderFixerStatus( isThreatFixInProgress( id ), isThreatFixStale( id ) ) }
-						{ isSmall && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					</div>
-				) }
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ isOpen ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div
-				className={ clsx( styles[ 'accordion-body' ], {
-					[ styles[ 'accordion-body-open' ] ]: isOpen,
-					[ styles[ 'accordion-body-close' ] ]: ! isOpen,
-				} ) }
-				aria-hidden={ ! isOpen }
-			>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const PaidAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<PaidAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</PaidAccordionContext.Provider>
-	);
-};
-
-export default PaidAccordion;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx b/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
deleted file mode 100644
index 252f22b2bad77..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import PaidAccordion, { PaidAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Paid Accordion',
-	component: PaidAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<PaidAccordion>
-		<PaidAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-	</PaidAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
deleted file mode 100644
index 8304942b206d4..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.accordion {
-	display: inline-block;
-	width: 100%;
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/7;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	>:not( :first-child ) {
-		margin: auto;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status {
-	font-size: var( --font-body-small );
-	font-weight: normal;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status-separator {
-	display: inline-block;
-	height: 4px;
-	margin: 2px 12px;
-	width: 4px;
-	background-color: var( --jp-gray-50 );
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
-
-.icon-check {
-	fill: var( --jp-green-40 );
-}
-
-.status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	position: relative;
-	text-align: center;
-	width: 60px;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-
-	&.fixed {
-		color: var( --jp-white );
-		background-color: #008a20;
-	}
-
-	&.ignored {
-		color: var( --jp-white );
-		background-color: var( --jp-gray-50 );
-	}
-}
-
-.is-fixed {
-	color: #008a20;
-}
-
-.support-link {
-	color: inherit;
-
-	&:focus,
-	&:hover {
-		color: inherit;
-		box-shadow: none;
-	}
-}
-
-.icon-tooltip {
-    max-height: 20px;
-    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-
-    &__icon {
-        color: var( --jp-red );
-    }
-
-    &__content {
-        color: var( --jp-gray-70 );
-        font-weight: 400;
-        line-height: 24px;
-    }
-}
-
-@media ( max-width: 599px ) {
-	.accordion-header {
-		display: grid;
-		grid-auto-rows: minmax( auto, auto );
-
-		>:first-child {
-			grid-column: 1/8;
-		 	grid-row: 1;
-		}
-
-		>:nth-child( 2 ) {
-			padding-left: calc( var( --spacing-base ) * 4 ); // 32px
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) {
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) span {
-			position: absolute;
-			margin-top: var( --spacing-base ); // 8px
-		}
-
-		>:last-child {
-			grid-column: 10;
-			grid-row: 1/3;
-		}
-	}
-
-	.status-badge {
-		display: none;
-	}
-}
-
-@media ( max-width: 1200px ) {
-	.accordion-header-status {
-		display: grid;
-	}
-
-	.accordion-header-status-separator {
-		display: none;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 3edd7911a0b6a..0f857430d92d8 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -11,9 +11,9 @@ import { __ } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useConnectSiteMutation from '../../data/use-connection-mutation';
+import useProductDataQuery from '../../data/use-product-data-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 
 /**
  * Product Detail component.
@@ -30,7 +30,7 @@ const ConnectedPricingTable = () => {
 	} );
 
 	// Access paid protect product data
-	const { jetpackScan } = useProtectData();
+	const { data: jetpackScan } = useProductDataQuery();
 	const { pricingForUi } = jetpackScan;
 	const { introductoryOffer, currencyCode: currency = 'USD' } = pricingForUi;
 
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
deleted file mode 100644
index d1100d8ce6d5e..0000000000000
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ProtectCheck(): JSX.Element {
-	return (
-		<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill="#069E08"
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx b/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
deleted file mode 100644
index e626b6af066c7..0000000000000
--- a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usePlan from '../../hooks/use-plan';
-import ButtonGroup from '../button-group';
-
-/**
- * Navigation for scan sections.
- *
- * @return {React.Element} The React Component.
- */
-export default function ScanNavigation() {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const { hasPlan } = usePlan();
-
-	const viewingScanPage = location.pathname === '/scan';
-	const viewingHistoryPage = location.pathname.includes( '/scan/history' );
-	const navigateToScanPage = useCallback( () => navigate( '/scan' ), [ navigate ] );
-	const navigateToHistoryPage = useCallback( () => navigate( '/scan/history' ), [ navigate ] );
-
-	if ( ! hasPlan || ( ! viewingScanPage && ! viewingHistoryPage ) ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ButtonGroup>
-				<ButtonGroup.Button
-					variant={ viewingScanPage ? 'primary' : 'secondary' }
-					onClick={ navigateToScanPage }
-				>
-					{ __( 'Scanner', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-				<ButtonGroup.Button
-					variant={ viewingHistoryPage ? 'primary' : 'secondary' }
-					onClick={ navigateToHistoryPage }
-				>
-					{ __( 'History', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-			</ButtonGroup>
-		</>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
index bc5e0107cea80..45a8524e60b59 100644
--- a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
+++ b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
@@ -1,6 +1,7 @@
 import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import React, { useState, useCallback } from 'react';
 import styles from './styles.module.scss';
 
@@ -65,10 +66,10 @@ export default function ThreatFixHeader( { threat, fixAllDialog, onCheckFix } )
 	return (
 		<>
 			<div className={ styles.threat }>
-				<Icon icon={ threat.icon } className={ styles.threat__icon } />
+				<Icon icon={ getThreatIcon( threat ) } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ threat.label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
 					<Text className={ styles.threat__summary__title }>
 						{ getFixerMessage( threat.fixable ) }
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
deleted file mode 100644
index 2d493b11e64a4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-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';
-import ScanButton from '../scan-button';
-import styles from './styles.module.scss';
-
-const ProtectCheck = () => (
-	<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-			fill="#069E08"
-		/>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-			fill="white"
-		/>
-	</svg>
-);
-
-/**
- * Time Since
- *
- * @param {string} date - The past date to compare to the current date.
- * @return {string} - A description of the amount of time between a date and now, i.e. "5 minutes ago".
- */
-const timeSince = date => {
-	const now = new Date();
-	const offset = now.getTimezoneOffset() * 60000;
-
-	const seconds = Math.floor( ( new Date( now.getTime() + offset ).getTime() - date ) / 1000 );
-
-	let interval = seconds / 31536000; // 364 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of years i.e. "5 years ago".
-			_n( '%s year ago', '%s years ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 2592000; // 30 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of months i.e. "5 months ago".
-			_n( '%s month ago', '%s months ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 86400; // 1 day
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of days i.e. "5 days ago".
-			_n( '%s day ago', '%s days ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 3600; // 1 hour
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of hours i.e. "5 hours ago".
-			_n( '%s hour ago', '%s hours ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 60; // 1 minute
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of minutes i.e. "5 minutes ago".
-			_n( '%s minute ago', '%s minutes ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	return __( 'a few seconds ago', 'jetpack-protect' );
-};
-
-const EmptyList = () => {
-	const { lastChecked } = useProtectData();
-	const { hasPlan } = usePlan();
-	const { data: status } = useScanStatusQuery();
-
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const timeSinceLastScan = useMemo( () => {
-		return lastChecked ? timeSince( Date.parse( lastChecked ) ) : null;
-	}, [ lastChecked ] );
-
-	return (
-		<div className={ styles.empty }>
-			<ProtectCheck />
-			<H3 weight="bold" mt={ 8 }>
-				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-			</H3>
-			<Text mb={ 4 }>
-				{ timeSinceLastScan
-					? createInterpolateElement(
-							sprintf(
-								// translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago".
-								__(
-									'The last Protect scan ran <strong>%s</strong> and everything looked great.',
-									'jetpack-protect'
-								),
-								timeSinceLastScan
-							),
-							{
-								strong: <strong />,
-							}
-					  )
-					: __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) }
-			</Text>
-			{ hasPlan && (
-				<>
-					<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-					{ ! isScanInProgress( status ) && (
-						<OnboardingPopover
-							id="paid-daily-and-manual-scans"
-							position={ 'bottom middle' }
-							anchor={ dailyAndManualScansPopoverAnchor }
-						/>
-					) }
-				</>
-			) }
-		</div>
-	);
-};
-
-export default EmptyList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx b/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
deleted file mode 100644
index 88d4a92f9bac5..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Text, Button, ContextualUpgradeTrigger } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import FreeAccordion, { FreeAccordionItem } from '../free-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	description,
-	fixedIn,
-	icon,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-} ) => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { upgradePlan } = usePlan();
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_threat_list_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	return (
-		<FreeAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'What is the problem?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ fixedIn && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-					<ContextualUpgradeTrigger
-						description={ __(
-							'Looking for advanced scan results and one-click fixes?',
-							'jetpack-protect'
-						) }
-						cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-						onClick={ getScan }
-						className={ styles[ 'threat-item-cta' ] }
-					/>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-		</FreeAccordionItem>
-	);
-};
-
-const FreeList = ( { list } ) => {
-	return (
-		<Pagination list={ list }>
-			{ ( { currentItems } ) => (
-				<FreeAccordion>
-					{ currentItems.map(
-						( {
-							description,
-							fixedIn,
-							icon,
-							id,
-							label,
-							name,
-							source,
-							table,
-							title,
-							type,
-							version,
-						} ) => (
-							<ThreatAccordionItem
-								description={ description }
-								fixedIn={ fixedIn }
-								icon={ icon }
-								id={ id }
-								label={ label }
-								key={ id }
-								name={ name }
-								source={ source }
-								table={ table }
-								title={ title }
-								type={ type }
-								version={ version }
-							/>
-						)
-					) }
-				</FreeAccordion>
-			) }
-		</Pagination>
-	);
-};
-
-export default FreeList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx
deleted file mode 100644
index 2823a804c1412..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/index.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import {
-	Container,
-	Col,
-	Title,
-	Button,
-	useBreakpointMatch,
-	Text,
-} 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';
-import OnboardingPopover from '../onboarding-popover';
-import ScanButton from '../scan-button';
-import EmptyList from './empty';
-import FreeList from './free-list';
-import ThreatsNavigation from './navigation';
-import PaidList from './paid-list';
-import styles from './styles.module.scss';
-import useThreatsList from './use-threats-list';
-
-const ThreatsList = () => {
-	const { hasPlan } = usePlan();
-	const { item, list, selected, setSelected } = useThreatsList();
-	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 => {
-			const threatId = parseInt( threat.id );
-			return (
-				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
-			);
-		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
-
-	// Popover anchors
-	const [ yourScanResultsPopoverAnchor, setYourScanResultsPopoverAnchor ] = useState( null );
-	const [ understandSeverityPopoverAnchor, setUnderstandSeverityPopoverAnchor ] = useState( null );
-	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const { setModal } = useModal();
-
-	const handleShowAutoFixersClick = threatList => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_ALL_THREATS',
-				props: { threatList },
-			} );
-		};
-	};
-
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					return __( 'All threats', 'jetpack-protect' );
-				}
-				return sprintf(
-					/* translators: placeholder is the amount of threats found on the site. */
-					__( 'All %s threats', 'jetpack-protect' ),
-					list.length
-				);
-			case 'core':
-				return sprintf(
-					/* translators: placeholder is the amount of WordPress threats found on the site. */
-					__( '%1$s WordPress %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'files':
-				return sprintf(
-					/* translators: placeholder is the amount of file threats found on the site. */
-					__( '%1$s file %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'database':
-				return sprintf(
-					/* translators: placeholder is the amount of database threats found on the site. */
-					__( '%1$s database %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			default:
-				return sprintf(
-					/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-					__( '%1$s %2$s in %3$s %4$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats',
-					item?.name,
-					item?.version
-				);
-		}
-	}, [ selected, list, item ] );
-
-	return (
-		<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-			<Col lg={ 4 }>
-				<div ref={ setYourScanResultsPopoverAnchor }>
-					<ThreatsNavigation selected={ selected } onSelect={ setSelected } />
-				</div>
-				{ ! scanning && (
-					<OnboardingPopover
-						id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
-						position="top"
-						anchor={ yourScanResultsPopoverAnchor }
-					/>
-				) }
-			</Col>
-			<Col lg={ 8 }>
-				{ list?.length > 0 ? (
-					<>
-						<div className={ styles[ 'list-header' ] }>
-							<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-							{ hasPlan && (
-								<div className={ styles[ 'list-header__controls' ] }>
-									{ fixableList.length > 0 && (
-										<>
-											<Button
-												ref={ setShowAutoFixersPopoverAnchor }
-												variant="primary"
-												onClick={ handleShowAutoFixersClick( fixableList ) }
-											>
-												{ sprintf(
-													/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-													__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-													fixableList.length
-												) }
-											</Button>
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-fix-all-threats"
-													position={ isSm ? 'bottom right' : 'middle left' }
-													anchor={ showAutoFixersPopoverAnchor }
-												/>
-											) }
-											<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-daily-and-manual-scans"
-													position={ isSm ? 'bottom left' : 'middle left' }
-													anchor={ dailyAndManualScansPopoverAnchor }
-												/>
-											) }
-										</>
-									) }
-								</div>
-							) }
-						</div>
-						{ hasPlan ? (
-							<>
-								<div ref={ setUnderstandSeverityPopoverAnchor }>
-									<PaidList list={ list } />
-									<div className={ styles[ 'manual-scan' ] }>
-										<Text variant="body-small" mb={ 4 }>
-											{ __(
-												'If you have manually fixed any of the threats listed above, you can run a manual scan now or wait for Jetpack to scan your site later today.',
-												'jetpack-protect'
-											) }
-										</Text>
-										<ScanButton />
-									</div>
-								</div>
-								{ ! scanning && (
-									<OnboardingPopover
-										id="paid-understand-severity"
-										position="top"
-										anchor={ understandSeverityPopoverAnchor }
-									/>
-								) }
-							</>
-						) : (
-							<FreeList list={ list } />
-						) }
-					</>
-				) : (
-					<EmptyList />
-				) }
-			</Col>
-		</Container>
-	);
-};
-
-export default ThreatsList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx b/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
deleted file mode 100644
index 9befe85a78612..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useBreakpointMatch } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
-import {
-	wordpress as coreIcon,
-	plugins as pluginsIcon,
-	warning as warningIcon,
-	color as themesIcon,
-	code as filesIcon,
-} from '@wordpress/icons';
-import { useCallback, useMemo } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
-import Navigation, { NavigationItem, NavigationGroup } from '../navigation';
-
-const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFilter = 'all' } ) => {
-	const { hasPlan } = usePlan();
-	const {
-		results: { plugins, themes },
-		counts: {
-			current: { threats: numThreats, core: numCoreThreats, files: numFilesThreats },
-		},
-	} = useProtectData( { sourceType, filter: { status: statusFilter } } );
-
-	const { recordEvent } = useAnalyticsTracks();
-	const [ isSmallOrLarge ] = useBreakpointMatch( 'lg', '<' );
-
-	const trackNavigationClickAll = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_all_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickCore = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_core_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickPlugin = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_plugin_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickTheme = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_theme_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickFiles = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_file_click' );
-	}, [ recordEvent ] );
-
-	const allLabel = useMemo( () => {
-		if ( statusFilter === 'fixed' ) {
-			return __( 'All fixed threats', 'jetpack-protect' );
-		}
-		if ( statusFilter === 'ignored' ) {
-			return __(
-				'All ignored threats',
-				'jetpack-protect',
-				/** dummy arg to avoid bad minification */ 0
-			);
-		}
-		return __( 'All threats', 'jetpack-protect' );
-	}, [ statusFilter ] );
-
-	return (
-		<Navigation
-			selected={ selected }
-			onSelect={ onSelect }
-			mode={ isSmallOrLarge ? 'dropdown' : 'list' }
-		>
-			<NavigationItem
-				initial
-				id="all"
-				label={ allLabel }
-				icon={ warningIcon }
-				badge={ numThreats }
-				disabled={ numThreats <= 0 }
-				onClick={ trackNavigationClickAll }
-				checked={ true }
-			/>
-			<NavigationItem
-				id="core"
-				label={ __( 'WordPress', 'jetpack-protect' ) }
-				icon={ coreIcon }
-				badge={ numCoreThreats }
-				disabled={ numCoreThreats <= 0 }
-				onClick={ trackNavigationClickCore }
-				checked={ true }
-			/>
-			<NavigationGroup label={ __( 'Plugins', 'jetpack-protect' ) } icon={ pluginsIcon }>
-				{ plugins.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickPlugin }
-					/>
-				) ) }
-			</NavigationGroup>
-			<NavigationGroup label={ __( 'Themes', 'jetpack-protect' ) } icon={ themesIcon }>
-				{ themes.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickTheme }
-					/>
-				) ) }
-			</NavigationGroup>
-			{ hasPlan && (
-				<>
-					<NavigationItem
-						id="files"
-						label={ __( 'Files', 'jetpack-protect' ) }
-						icon={ filesIcon }
-						badge={ numFilesThreats }
-						disabled={ numFilesThreats <= 0 }
-						onClick={ trackNavigationClickFiles }
-						checked={ true }
-					/>
-				</>
-			) }
-		</Navigation>
-	);
-};
-
-export default ThreatsNavigation;
diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
deleted file mode 100644
index 3e17bed0eeac4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import React, { useCallback, useState, useMemo } from 'react';
-import styles from './styles.module.scss';
-
-const PaginationButton = ( { pageNumber, currentPage, onPageChange } ) => {
-	const isCurrentPage = useMemo( () => currentPage === pageNumber, [ currentPage, pageNumber ] );
-
-	const handleClick = useCallback( () => {
-		onPageChange( pageNumber );
-	}, [ onPageChange, pageNumber ] );
-
-	return (
-		<Button
-			size={ 'medium' }
-			className={ ! isCurrentPage ? styles.unfocused : null }
-			onClick={ handleClick }
-			aria-current={ isCurrentPage ? 'page' : undefined }
-			aria-label={ sprintf(
-				/* translators: placeholder is a page number, i.e. "Page 123" */
-				__( 'Page %d', 'jetpack-protect' ),
-				pageNumber
-			) }
-		>
-			{ pageNumber }
-		</Button>
-	);
-};
-
-const Pagination = ( { list, itemPerPage = 10, children } ) => {
-	const [ isSm ] = useBreakpointMatch( 'sm' );
-
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-
-	const handlePreviousPageClick = useCallback(
-		() => setCurrentPage( currentPage - 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-	const handleNextPageClick = useCallback(
-		() => setCurrentPage( currentPage + 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-
-	const totalPages = useMemo( () => Math.ceil( list.length / itemPerPage ), [ list, itemPerPage ] );
-
-	const currentItems = useMemo( () => {
-		const indexOfLastItem = currentPage * itemPerPage;
-		const indexOfFirstItem = indexOfLastItem - itemPerPage;
-		return list.slice( indexOfFirstItem, indexOfLastItem );
-	}, [ currentPage, list, itemPerPage ] );
-
-	const pageNumbers = useMemo( () => {
-		if ( isSm ) {
-			return [ currentPage ];
-		}
-
-		const result = [ 1 ];
-		if ( currentPage > 3 && totalPages > 4 ) {
-			result.push( '…' );
-		}
-
-		if ( currentPage === 1 ) {
-			// Current page is the first page.
-			// i.e. [ 1 ] 2 3 4 ... 10
-			result.push( currentPage + 1, currentPage + 2, currentPage + 3 );
-		} else if ( currentPage === 2 ) {
-			// Current page is the second to first page.
-			// i.e. 1 [ 2 ] 3 4 ... 10
-			result.push( currentPage, currentPage + 1, currentPage + 2 );
-		} else if ( currentPage < totalPages - 1 ) {
-			// Current page is positioned in the middle of the pagination.
-			// i.e. 1 ... 3 [ 4 ] 5 ... 10
-			result.push( currentPage - 1, currentPage, currentPage + 1 );
-		} else if ( currentPage === totalPages - 1 ) {
-			// Current page is the second to last page.
-			// i.e. 1 ... 7 8 [ 9 ] 10
-			currentPage > 3 && result.push( currentPage - 2 );
-			currentPage > 2 && result.push( currentPage - 1 );
-			result.push( currentPage );
-		} else if ( currentPage === totalPages ) {
-			// Current page is the last page.
-			// i.e. 1 ... 7 8 9 [ 10 ]
-			currentPage >= 5 && result.push( currentPage - 3 );
-			currentPage >= 4 && result.push( currentPage - 2 );
-			result.push( currentPage - 1 );
-		}
-
-		if ( result[ result.length - 1 ] < totalPages - 1 ) {
-			result.push( '…' );
-			result.push( totalPages );
-		} else if ( result[ result.length - 1 ] < totalPages ) {
-			result.push( totalPages );
-		}
-
-		return result.filter( pageNumber => pageNumber <= totalPages || isNaN( pageNumber ) );
-	}, [ currentPage, isSm, totalPages ] );
-
-	return (
-		<>
-			{ children( { currentItems } ) }
-			{ totalPages > 1 && (
-				<nav
-					role="navigation"
-					aria-label={ __( 'Threat list pages', 'jetpack-protect' ) }
-					className={ styles[ 'pagination-container' ] }
-				>
-					<Button
-						onClick={ handlePreviousPageClick }
-						disabled={ currentPage === 1 }
-						variant={ 'link' }
-						icon={ chevronLeft }
-						iconSize={ 24 }
-						aria-label={ __( 'Previous page', 'jetpack-protect' ) }
-					/>
-					{ pageNumbers.map( ( pageNumber, index ) =>
-						typeof pageNumber === 'number' ? (
-							<PaginationButton
-								key={ pageNumber }
-								pageNumber={ pageNumber }
-								currentPage={ currentPage }
-								onPageChange={ setCurrentPage }
-							/>
-						) : (
-							<span key={ `ellipses_${ index }` }>{ pageNumber }</span>
-						)
-					) }
-					<Button
-						onClick={ handleNextPageClick }
-						disabled={ currentPage === totalPages }
-						variant={ 'link' }
-						icon={ chevronRight }
-						iconSize={ 24 }
-						aria-label={ __( 'Next page', 'jetpack-protect' ) }
-					/>
-				</nav>
-			) }
-		</>
-	);
-};
-
-export default Pagination;
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
deleted file mode 100644
index baedf8dfa5184..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import {
-	Text,
-	Button,
-	DiffViewer,
-	MarkedLines,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import useFixers from '../../hooks/use-fixers';
-import useModal from '../../hooks/use-modal';
-import PaidAccordion, { PaidAccordionItem } from '../paid-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	context,
-	description,
-	diff,
-	filename,
-	firstDetected,
-	fixedIn,
-	fixedOn,
-	icon,
-	fixable,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-	severity,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { setModal } = useModal();
-	const { recordEvent } = useAnalyticsTracks();
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const isActiveFixInProgress = isThreatFixInProgress( id );
-	const isStaleFixInProgress = isThreatFixStale( id );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	const handleIgnoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'IGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleUnignoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'UNIGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleFixThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_THREAT',
-				props: { id, fixable, label, icon, severity },
-			} );
-		};
-	};
-
-	return (
-		<PaidAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			fixable={ fixable }
-			severity={ severity }
-			firstDetected={ firstDetected }
-			fixedOn={ fixedOn }
-			status={ status }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme', 'file', 'database' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-			hideAutoFixColumn={ hideAutoFixColumn }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ status !== 'fixed'
-							? __( 'What is the problem?', 'jetpack-protect' )
-							: __(
-									'What was the problem?',
-									'jetpack-protect',
-									/** dummy arg to avoid bad minification */ 0
-							  ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ ( filename || context || diff ) && (
-				<Text variant="title-small" mb={ 2 }>
-					{ __( 'The technical details', 'jetpack-protect' ) }
-				</Text>
-			) }
-			{ filename && (
-				<>
-					<Text mb={ 2 }>
-						{
-							/* translators: filename follows in separate line; e.g. "PHP.Injection.5 in: `post.php`" */
-							__( 'Threat found in file:', 'jetpack-protect' )
-						}
-					</Text>
-					<pre className={ styles[ 'threat-filename' ] }>{ filename }</pre>
-				</>
-			) }
-			{ context && <MarkedLines context={ context } /> }
-			{ diff && <DiffViewer diff={ diff } /> }
-			{ fixedIn && status !== 'fixed' && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-			{ [ 'ignored', 'current' ].includes( status ) && (
-				<div className={ styles[ 'threat-footer' ] }>
-					{ 'ignored' === status && (
-						<Button
-							isDestructive={ true }
-							variant="secondary"
-							onClick={ handleUnignoreThreatClick() }
-						>
-							{ __( 'Unignore threat', 'jetpack-protect' ) }
-						</Button>
-					) }
-					{ 'current' === status && (
-						<>
-							<Button
-								isDestructive={ true }
-								variant="secondary"
-								onClick={ handleIgnoreThreatClick() }
-								disabled={ isActiveFixInProgress || isStaleFixInProgress }
-							>
-								{ __( 'Ignore threat', 'jetpack-protect' ) }
-							</Button>
-							{ fixable && (
-								<Button
-									disabled={ isActiveFixInProgress || isStaleFixInProgress }
-									onClick={ handleFixThreatClick() }
-								>
-									{ __( 'Fix threat', 'jetpack-protect' ) }
-								</Button>
-							) }
-						</>
-					) }
-				</div>
-			) }
-		</PaidAccordionItem>
-	);
-};
-
-const PaidList = ( { list, hideAutoFixColumn = false } ) => {
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<>
-			{ ! isSmall && (
-				<div className={ styles[ 'accordion-header' ] }>
-					<span>{ __( 'Details', 'jetpack-protect' ) }</span>
-					<span>{ __( 'Severity', 'jetpack-protect' ) }</span>
-					{ ! hideAutoFixColumn && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					<span></span>
-				</div>
-			) }
-			<Pagination list={ list }>
-				{ ( { currentItems } ) => (
-					<PaidAccordion>
-						{ currentItems.map(
-							( {
-								context,
-								description,
-								diff,
-								filename,
-								firstDetected,
-								fixedIn,
-								fixedOn,
-								icon,
-								fixable,
-								id,
-								label,
-								name,
-								severity,
-								source,
-								table,
-								title,
-								type,
-								version,
-								status,
-							} ) => (
-								<ThreatAccordionItem
-									context={ context }
-									description={ description }
-									diff={ diff }
-									filename={ filename }
-									firstDetected={ firstDetected }
-									fixedIn={ fixedIn }
-									fixedOn={ fixedOn }
-									icon={ icon }
-									fixable={ fixable }
-									id={ id }
-									key={ id }
-									label={ label }
-									name={ name }
-									severity={ severity }
-									source={ source }
-									table={ table }
-									title={ title }
-									type={ type }
-									version={ version }
-									status={ status }
-									hideAutoFixColumn={ hideAutoFixColumn }
-								/>
-							)
-						) }
-					</PaidAccordion>
-				) }
-			</Pagination>
-		</>
-	);
-};
-
-export default PaidList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
deleted file mode 100644
index 4a50d87b2562b..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.threat-section + .threat-section {
-	margin-top: calc( var( --spacing-base ) * 5 ); // 40px
-}
-
-.threat-filename {
-	background-color: var( --jp-gray-0 );
-	padding: calc( var( --spacing-base ) * 3 ); // 24px
-	overflow-x: scroll;
-}
-
-.threat-footer {
-	display: flex;
-	justify-content: flex-end;
-	border-top: 1px solid var( --jp-gray );
-	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-}
-.threat-item-cta {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 36px
-}
-
-.list-header {
-	display: flex;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.threat-footer {
-	width: 100%;
-	display: flex;
-	justify-content: right;
-	padding-top: calc( var( --spacing-base ) * 4 ); // 32px
-	border-top: 1px solid var( --jp-gray );
-
-	> :last-child {
-		margin-left: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-}
-
-.accordion-header {
-	display: grid;
-	grid-template-columns: repeat( 9, 1fr );
-	background-color: white;
-	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ); // 16px | 24px
-	border: 1px solid var( --jp-gray );
-	border-bottom: none;
-	color: var( --jp-gray-50 );
-	width: 100%;
-
-	> span:first-child {
-		grid-column: 1 / 7;
-	}
-
-	> span:not( :first-child ) {
-		text-align: center;
-	}
-}
-
-.manual-scan {
-	margin: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 8 ); // 32px | 64px
-	text-align: center;
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-
-	.threat-footer {
-		justify-content: center;
-
-		> * {
-			width: 50%;
-		}
-	}
-}
-
-.pagination-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 4px;
-	margin-top: calc( var( --spacing-base ) * 4 ); // 24px
-	margin-bottom: calc(var(--spacing-base) * 2); // 16px
-
-	button {
-		font-size: var( --font-body );
-		width: auto;
-		height: auto;
-		padding: 0 var( --spacing-base ); // 0 | 8px
-		line-height: 32px;
-		min-width: 32px;
-
-		&.unfocused {
-			color: var( --jp-black );
-			background: none;
-	
-			&:hover:not(:disabled) {
-				color: var( --jp-black );
-				background: none;
-			}
-		}
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js b/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
deleted file mode 100644
index de000288251ae..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import {
-	plugins as pluginsIcon,
-	wordpress as coreIcon,
-	color as themesIcon,
-	code as filesIcon,
-	grid as databaseIcon,
-} from '@wordpress/icons';
-import { useEffect, useMemo, useState } from 'react';
-import useProtectData from '../../hooks/use-protect-data';
-
-const sortThreats = ( a, b ) => b.severity - a.severity;
-
-/**
- * Flatten threats data
- *
- * Merges threat category data with each threat it contains, plus any additional data provided.
- *
- * @param {object} data    - The threat category data, i.e. "core", "plugins", "themes", etc.
- * @param {object} newData - Additional data to add to each threat.
- * @return {object[]} Array of threats with additional properties from the threat category and function argument.
- */
-const flattenThreats = ( data, newData ) => {
-	// If "data" is an empty object
-	if ( typeof data === 'object' && Object.keys( data ).length === 0 ) {
-		return [];
-	}
-
-	// If "data" has multiple entries, recursively flatten each one.
-	if ( Array.isArray( data ) ) {
-		return data.map( extension => flattenThreats( extension, newData ) ).flat();
-	}
-
-	// Merge the threat category data with each threat it contains, plus any additional data provided.
-	return data?.threats.map( threat => ( {
-		...threat,
-		...data,
-		...newData,
-	} ) );
-};
-
-/**
- * Threats List Hook
- *
- * @param    {object}   args        - Arguments for the hook.
- * @param    {string}   args.source - "scan" or "history".
- * @param    {string}   args.status - "all", "fixed", or "ignored".
- *                                  ---
- * @typedef {object} UseThreatsList
- * @property {object}   item        - The selected threat category.
- * @property {object[]} list        - The list of threats to display.
- * @property {string}   selected    - The selected threat category.
- * @property {Function} setSelected - Sets the selected threat category.
- *                                  ---
- * @return {UseThreatsList} useThreatsList hook.
- */
-const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' } ) => {
-	const [ selected, setSelected ] = useState( 'all' );
-	const {
-		results: { plugins, themes, core, files, database },
-	} = useProtectData( {
-		sourceType: source,
-		filter: { status, key: selected },
-	} );
-
-	const { unsortedList, item } = useMemo( () => {
-		// If a specific threat category is selected, filter for and flatten the category's threats.
-		if ( selected && selected !== 'all' ) {
-			// Core, files, and database data threats are already grouped together,
-			// so we just need to flatten them and add the appropriate icon.
-			switch ( selected ) {
-				case 'core':
-					return {
-						unsortedList: flattenThreats( core, { icon: coreIcon } ),
-						item: core,
-					};
-				case 'files':
-					return {
-						unsortedList: flattenThreats( { threats: files }, { icon: filesIcon } ),
-						item: files,
-					};
-				case 'database':
-					return {
-						unsortedList: flattenThreats( { threats: database }, { icon: databaseIcon } ),
-						item: database,
-					};
-				default:
-					break;
-			}
-
-			// Extensions (i.e. plugins and themes) have entries for each individual extension,
-			// so we need to check for a matching threat in each extension.
-			const selectedPlugin = plugins.find( plugin => plugin?.name === selected );
-			if ( selectedPlugin ) {
-				return {
-					unsortedList: flattenThreats( selectedPlugin, { icon: pluginsIcon } ),
-					item: selectedPlugin,
-				};
-			}
-			const selectedTheme = themes.find( theme => theme?.name === selected );
-			if ( selectedTheme ) {
-				return {
-					unsortedList: flattenThreats( selectedTheme, { icon: themesIcon } ),
-					item: selectedTheme,
-				};
-			}
-		}
-
-		// Otherwise, return all threats.
-		return {
-			unsortedList: [
-				...flattenThreats( core, { icon: coreIcon } ),
-				...flattenThreats( plugins, { icon: pluginsIcon } ),
-				...flattenThreats( themes, { icon: themesIcon } ),
-				...flattenThreats( { threats: files }, { icon: filesIcon } ),
-				...flattenThreats( { threats: database }, { icon: databaseIcon } ),
-			],
-			item: null,
-		};
-	}, [ core, database, files, plugins, selected, themes ] );
-
-	const getLabel = threat => {
-		if ( threat.name && threat.version ) {
-			// Extension threat i.e. "Woocommerce (3.0.0)"
-			return `${ threat.name } (${ threat.version })`;
-		}
-
-		if ( threat.filename ) {
-			// File threat i.e. "index.php"
-			return threat.filename.split( '/' ).pop();
-		}
-
-		if ( threat.table ) {
-			// Database threat i.e. "wp_posts"
-			return threat.table;
-		}
-	};
-
-	const list = useMemo( () => {
-		return unsortedList
-			.sort( sortThreats )
-			.map( threat => ( { label: getLabel( threat ), ...threat } ) );
-	}, [ unsortedList ] );
-
-	useEffect( () => {
-		if ( selected !== 'all' && status !== 'all' && list.length === 0 ) {
-			setSelected( 'all' );
-		}
-	}, [ selected, status, item, list ] );
-
-	return {
-		item,
-		list,
-		selected,
-		setSelected,
-	};
-};
-
-export default useThreatsList;
diff --git a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
index 81f1eabb27d5b..7f1ef3652bb85 100644
--- a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
@@ -1,4 +1,5 @@
 import { Button, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useState } from 'react';
@@ -7,9 +8,14 @@ import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const UnignoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
+
+	const icon = getThreatIcon( threat );
+
+	const [ isUnignoring, setIsUnignoring ] = useState( false );
 	const unignoreThreatMutation = useUnIgnoreThreatMutation();
+
 	const handleCancelClick = () => {
 		return event => {
 			event.preventDefault();
@@ -17,13 +23,11 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		};
 	};
 
-	const [ isUnignoring, setIsUnignoring ] = useState( false );
-
 	const handleUnignoreClick = () => {
 		return async event => {
 			event.preventDefault();
 			setIsUnignoring( true );
-			await unignoreThreatMutation.mutateAsync( id );
+			await unignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsUnignoring( false );
 		};
@@ -40,12 +44,12 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
deleted file mode 100644
index 2338d306e6780..0000000000000
--- a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { type ExtensionStatus, type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import useHistoryQuery from '../../data/scan/use-history-query';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
-import useProductDataQuery from '../../data/use-product-data-query';
-
-type ThreatFilterKey = 'all' | 'core' | 'files' | 'database' | string;
-
-type Filter = { key: ThreatFilterKey; status: ThreatStatus | 'all' };
-
-// Valid "key" values for filtering.
-const KEY_FILTERS = [ 'all', 'core', 'plugins', 'themes', 'files', 'database' ];
-
-/**
- * Filter Extension Threats
- *
- * @param {Array}  threats       - The threats to filter.
- * @param {object} filter        - The filter to apply to the data.
- * @param {string} filter.status - The status to filter: 'all', 'current', 'fixed', or 'ignored'.
- * @param {string} filter.key    - The key to filter: 'all', 'core', 'files', 'database', or an extension name.
- * @param {string} key           - The threat's key: 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {Array} The filtered threats.
- */
-const filterThreats = ( threats: Threat[], filter: Filter, key: ThreatFilterKey ): Threat[] => {
-	if ( ! Array.isArray( threats ) ) {
-		return [];
-	}
-
-	return threats.filter( threat => {
-		if ( filter.status && filter.status !== 'all' && threat.status !== filter.status ) {
-			return false;
-		}
-		if ( filter.key && filter.key !== 'all' && filter.key !== key ) {
-			return false;
-		}
-		return true;
-	} );
-};
-
-/**
- * Get parsed data from the initial state
- *
- * @param {object} options            - The options to use when getting the data.
- * @param {string} options.sourceType - 'scan' or 'history'.
- * @param {object} options.filter     - The filter to apply to the data.
- *                                    _param {string} options.filter.status - 'all', 'fixed', or 'ignored'.
- *                                    _param {string} options.filter.key    - 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {object} The information available in Protect's initial state.
- */
-export default function useProtectData(
-	{ sourceType, filter } = {
-		sourceType: 'scan',
-		filter: { status: null, key: null },
-	}
-) {
-	const { data: status } = useScanStatusQuery();
-	const { data: scanHistory } = useHistoryQuery();
-	const { data: jetpackScan } = useProductDataQuery();
-
-	const { counts, results, error, lastChecked, hasUncheckedItems } = useMemo( () => {
-		// This hook can provide data from two sources: the current scan or the scan history.
-		const data = sourceType === 'history' ? { ...scanHistory } : { ...status };
-
-		// Prepare the result object.
-		const result = {
-			results: {
-				core: [],
-				plugins: [],
-				themes: [],
-				files: [],
-				database: [],
-			},
-			counts: {
-				all: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-				current: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-			},
-			error: null,
-			lastChecked: data.lastChecked || null,
-			hasUncheckedItems: data.hasUncheckedItems || false,
-		};
-
-		// Loop through the provided extensions, and update the result object.
-		const processExtensions = ( extensions: Array< ExtensionStatus >, key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( extensions ) ) {
-				return [];
-			}
-			extensions.forEach( extension => {
-				// Update the total counts.
-				result.counts.all[ key ] += extension?.threats?.length || 0;
-				result.counts.all.threats += extension?.threats?.length || 0;
-
-				// Filter the extension's threats based on the current filters.
-				const filteredThreats = filterThreats(
-					extension?.threats || [],
-					filter,
-					KEY_FILTERS.includes( filter.key ) ? key : extension?.name
-				);
-
-				// Update the result object with the extension and its filtered threats.
-				result.results[ key ].push( { ...extension, threats: filteredThreats } );
-
-				// Update the current counts.
-				result.counts.current[ key ] += filteredThreats.length;
-				result.counts.current.threats += filteredThreats.length;
-			} );
-		};
-
-		// Loop through the provided threats, and update the result object.
-		const processThreats = ( threatsToProcess: Threat[], key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( threatsToProcess ) ) {
-				return [];
-			}
-
-			result.counts.all[ key ] += threatsToProcess.length;
-			result.counts.all.threats += threatsToProcess.length;
-
-			const filteredThreats = filterThreats( threatsToProcess, filter, key );
-
-			result.results[ key ] = [ ...result.results[ key ], ...filteredThreats ];
-			result.counts.current[ key ] += filteredThreats.length;
-			result.counts.current.threats += filteredThreats.length;
-		};
-
-		// Core data may be either a single object or an array of multiple objects.
-		let cores = Array.isArray( data.core ) ? data.core : [];
-		if ( data?.core?.threats ) {
-			cores = [ data.core ];
-		}
-
-		// Process the data
-		processExtensions( cores, 'core' );
-		processExtensions( data?.plugins, 'plugins' );
-		processExtensions( data?.themes, 'themes' );
-		processThreats( data?.files, 'files' );
-		processThreats( data?.database, 'database' );
-
-		// Handle errors
-		if ( data.error ) {
-			result.error = {
-				message: data.errorMessage || __( 'An error occurred.', 'jetpack-protect' ),
-				code: data.errorCode || 500,
-			};
-		}
-
-		return result;
-	}, [ scanHistory, sourceType, status, filter ] );
-
-	return {
-		results,
-		counts,
-		error,
-		lastChecked,
-		hasUncheckedItems,
-		jetpackScan,
-	};
-}
diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx
index b8983d65bb836..2b91f4b090b92 100644
--- a/projects/plugins/protect/src/js/index.tsx
+++ b/projects/plugins/protect/src/js/index.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as WPElement from '@wordpress/element';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { HashRouter, Routes, Route, useLocation, Navigate } from 'react-router-dom';
 import Modal from './components/modal';
 import PaidPlanGate from './components/paid-plan-gate';
@@ -12,7 +12,6 @@ import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
 import ScanRoute from './routes/scan';
-import ScanHistoryRoute from './routes/scan/history';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
 
@@ -62,7 +61,7 @@ function render() {
 											path="/scan/history"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
@@ -70,7 +69,7 @@ function render() {
 											path="/scan/history/:filter"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 53af919b17f78..52ec1333bd958 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -22,7 +22,6 @@ import useWafUpgradeSeenMutation from '../../data/waf/use-waf-upgrade-seen-mutat
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
-import ScanFooter from '../scan/scan-footer';
 import FirewallAdminSectionHero from './firewall-admin-section-hero';
 import FirewallFooter from './firewall-footer';
 import styles from './styles.module.scss';
@@ -597,7 +596,7 @@ const FirewallPage = () => {
 					</div>
 				</Col>
 			</Container>
-			{ wafSupported ? <FirewallFooter /> : <ScanFooter /> }
+			{ wafSupported && <FirewallFooter /> }
 		</AdminPage>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
deleted file mode 100644
index 141c51cde284a..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { dateI18n } from '@wordpress/date';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import AdminSectionHero from '../../../components/admin-section-hero';
-import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useProtectData from '../../../hooks/use-protect-data';
-import styles from './styles.module.scss';
-
-const HistoryAdminSectionHero: React.FC = () => {
-	const { filter = 'all' } = useParams();
-	const { list } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const oldestFirstDetected = useMemo( () => {
-		if ( ! list.length ) {
-			return null;
-		}
-
-		return list.reduce( ( oldest, current ) => {
-			return new Date( current.firstDetected ) < new Date( oldest.firstDetected )
-				? current
-				: oldest;
-		} ).firstDetected;
-	}, [ list ] );
-
-	if ( error ) {
-		return (
-			<ErrorAdminSectionHero
-				baseErrorMessage={ __( 'We are having problems loading your history.', 'jetpack-protect' ) }
-				errorMessage={ error?.message }
-				errorCode={ error?.code }
-			/>
-		);
-	}
-
-	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Text>
-						{ oldestFirstDetected ? (
-							<span className={ styles[ 'subheading-content' ] }>
-								{ sprintf(
-									/* translators: %s: Oldest first detected date */
-									__( '%s - Today', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-								) }
-							</span>
-						) : (
-							__( 'Most recent results', 'jetpack-protect' )
-						) }
-					</Text>
-					<AdminSectionHero.Heading showIcon variant="success">
-						{ numAllThreats > 0
-							? sprintf(
-									/* translators: %s: Total number of threats  */
-									__( '%1$s previous %2$s', 'jetpack-protect' ),
-									numAllThreats,
-									numAllThreats === 1 ? 'threat' : 'threats'
-							  )
-							: __( 'No previous threats', 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<Text>
-							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
-						</Text>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-		/>
-	);
-};
-
-export default HistoryAdminSectionHero;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
deleted file mode 100644
index 723f9de9ab230..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useCallback } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
-import AdminPage from '../../../components/admin-page';
-import ProtectCheck from '../../../components/protect-check-icon';
-import ThreatsNavigation from '../../../components/threats-list/navigation';
-import PaidList from '../../../components/threats-list/paid-list';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useAnalyticsTracks from '../../../hooks/use-analytics-tracks';
-import usePlan from '../../../hooks/use-plan';
-import useProtectData from '../../../hooks/use-protect-data';
-import ScanFooter from '../scan-footer';
-import HistoryAdminSectionHero from './history-admin-section-hero';
-import StatusFilters from './status-filters';
-import styles from './styles.module.scss';
-
-const ScanHistoryRoute = () => {
-	// Track page view.
-	useAnalyticsTracks( { pageViewEventName: 'protect_scan_history' } );
-
-	const { hasPlan } = usePlan();
-	const { filter = 'all' } = useParams();
-
-	const { item, list, selected, setSelected } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const { counts: fixedCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'fixed', key: selected },
-	} );
-	const { threats: numFixed } = fixedCounts.current;
-
-	const { counts: ignoredCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'ignored', key: selected },
-	} );
-	const { threats: numIgnored } = ignoredCounts.current;
-
-	/**
-	 * Get the title for the threats list based on the selected filters and the amount of threats.
-	 */
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					switch ( filter ) {
-						case 'fixed':
-							return __( 'All fixed threats', 'jetpack-protect' );
-						case 'ignored':
-							return __(
-								'All ignored threats',
-								'jetpack-protect',
-								/** dummy arg to avoid bad minification */ 0
-							);
-						default:
-							return __( 'All threats', 'jetpack-protect' );
-					}
-				}
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed threats found on the site. */
-							__( 'All %s fixed threats', 'jetpack-protect' ),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored threats found on the site. */
-							__( 'All %s ignored threats', 'jetpack-protect' ),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of threats found on the site. */
-							__( 'All %s threats', 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'core':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed WordPress threats found on the site. */
-							_n(
-								'%1$s fixed WordPress threat',
-								'%1$s fixed WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored WordPress threats found on the site. */
-							_n(
-								'%1$s ignored WordPress threat',
-								'%1$s ignored WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of WordPress threats found on the site. */
-							_n(
-								'%1$s WordPress threat',
-								'%1$s WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-				}
-			case 'files':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed file threats found on the site. */
-							_n(
-								'%1$s fixed file threat',
-								'%1$s fixed file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored file threats found on the site. */
-							_n(
-								'%1$s ignored file threat',
-								'%1$s ignored file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of file threats found on the site. */
-							_n( '%1$s file threat', '%1$s file threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'database':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed database threats found on the site. */
-							_n(
-								'%1$s fixed database threat',
-								'%1$s fixed database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored database threats found on the site. */
-							_n(
-								'%1$s ignored database threat',
-								'%1$s ignored database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of database threats found on the site. */
-							_n( '%1$s database threat', '%1$s database threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			default:
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: Translates to "123 fixed threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s fixed threat in %2$s %3$s',
-								'%1$s fixed threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: Translates to "123 ignored threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s ignored threat in %2$s %3$s',
-								'%1$s ignored threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					default:
-						return sprintf(
-							/* translators: Translates to "123 threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s threat in %2$s %3$s',
-								'%1$s threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-				}
-		}
-	}, [ selected, list.length, filter, item?.name, item?.version ] );
-
-	// Threat history is only available for paid plans.
-	if ( ! hasPlan ) {
-		return <Navigate to="/scan" />;
-	}
-
-	// Remove the filter if there are no threats to show.
-	if ( list.length === 0 && filter !== 'all' ) {
-		return <Navigate to="/scan/history" />;
-	}
-
-	return (
-		<AdminPage>
-			<HistoryAdminSectionHero />
-			{ ( ! error || numAllThreats ) && (
-				<AdminSection>
-					<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-						<Col>
-							<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-								<Col lg={ 4 }>
-									<ThreatsNavigation
-										selected={ selected }
-										onSelect={ setSelected }
-										sourceType="history"
-										statusFilter={ filter }
-									/>
-								</Col>
-								<Col lg={ 8 }>
-									{ list.length > 0 ? (
-										<div>
-											<div className={ styles[ 'list-header' ] }>
-												<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters numFixed={ numFixed } numIgnored={ numIgnored } />
-												</div>
-											</div>
-											<PaidList list={ list } hideAutoFixColumn={ true } />
-										</div>
-									) : (
-										<>
-											<div className={ styles[ 'list-header' ] }>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters />
-												</div>
-											</div>
-											<div className={ styles.empty }>
-												<ProtectCheck />
-												<H3 weight="bold" mt={ 8 }>
-													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-												</H3>
-												<Text mb={ 4 }>
-													{ sprintf(
-														/* translators: %s: Filter type */
-														__( 'There are no%sthreats in your scan history.', 'jetpack-protect' ),
-														'all' === filter ? ' ' : ` ${ filter } `
-													) }
-												</Text>
-											</div>
-										</>
-									) }
-								</Col>
-							</Container>
-						</Col>
-					</Container>
-				</AdminSection>
-			) }
-			<ScanFooter />
-		</AdminPage>
-	);
-};
-
-export default ScanHistoryRoute;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx b/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
deleted file mode 100644
index 1bc9668b11065..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import ButtonGroup from '../../../components/button-group';
-
-/**
- * Status Filters component.
- *
- * @param {object} props            - Component props.
- * @param {number} props.numFixed   - Number of fixed threats.
- * @param {number} props.numIgnored - Number of ignored threats.
- *
- * @return {React.ReactNode} StatusFilters component.
- */
-export default function StatusFilters( { numFixed, numIgnored } ) {
-	const navigate = useNavigate();
-	const { filter = 'all' } = useParams();
-	const navigateOnClick = useCallback( path => () => navigate( path ), [ navigate ] );
-
-	return (
-		<ButtonGroup>
-			<ButtonGroup.Button
-				variant={ 'all' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history' ) }
-			>
-				{ __( 'All', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'fixed' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/fixed' ) }
-				disabled={ ! numFixed }
-			>
-				{ __( 'Fixed', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'ignored' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/ignored' ) }
-				disabled={ ! numIgnored }
-			>
-				{ __( 'Ignored', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-		</ButtonGroup>
-	);
-}
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
deleted file mode 100644
index d30f3e0ac3344..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.list-header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-}
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
index 1f3cdfdd7520f..c56ae3c747f3e 100644
--- a/projects/plugins/protect/src/js/routes/scan/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -1,14 +1,16 @@
 import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import { useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import AdminPage from '../../components/admin-page';
-import ThreatsList from '../../components/threats-list';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import OnboardingPopover from '../../components/onboarding-popover';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import { OnboardingContext } from '../../hooks/use-onboarding';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import onboardingSteps from './onboarding-steps';
 import ScanAdminSectionHero from './scan-admin-section-hero';
-import ScanFooter from './scan-footer';
+import ScanResultsDataView from './scan-results-data-view';
+import styles from './styles.module.scss';
 
 /**
  * Scan Page
@@ -19,23 +21,41 @@ import ScanFooter from './scan-footer';
  */
 const ScanPage = () => {
 	const { hasPlan } = usePlan();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
+	const location = useLocation();
+	const { filter } = useParams();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 
+	const [ scanResultsAnchor, setScanResultsAnchor ] = useState( null );
+
 	let currentScanStatus;
 	if ( status.error ) {
 		currentScanStatus = 'error';
-	} else if ( ! lastChecked ) {
+	} else if ( ! status.lastChecked ) {
 		currentScanStatus = 'in_progress';
 	} else {
 		currentScanStatus = 'active';
 	}
 
+	const filters = useMemo( () => {
+		if ( location.pathname.includes( '/scan/history' ) ) {
+			return [
+				{
+					field: 'status',
+					value: filter ? [ filter ] : [ 'fixed', 'ignored' ],
+					operator: 'isAny',
+				},
+			];
+		}
+
+		return [
+			{
+				field: 'status',
+				value: [ 'current' ],
+				operator: 'isAny',
+			},
+		];
+	}, [ filter, location.pathname ] );
+
 	// Track view for Protect admin page.
 	useAnalyticsTracks( {
 		pageViewEventName: 'protect_admin',
@@ -49,16 +69,33 @@ const ScanPage = () => {
 		<OnboardingContext.Provider value={ onboardingSteps }>
 			<AdminPage>
 				<ScanAdminSectionHero />
-				{ ( ! status.error || numThreats ) && (
-					<AdminSection>
-						<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-							<Col>
-								<ThreatsList />
-							</Col>
-						</Container>
-					</AdminSection>
-				) }
-				<ScanFooter />
+				<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 left' }
+								/>
+							) }
+							{ !! status && ! isScanInProgress( status ) && hasPlan && (
+								<OnboardingPopover
+									id={ 'paid-understand-severity' }
+									anchor={ scanResultsAnchor }
+									position={ 'top right' }
+								/>
+							) }
+						</Col>
+					</Container>
+				</AdminSection>
 			</AdminPage>
 		</OnboardingContext.Provider>
 	);
diff --git a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
index 0e85aa56d9289..c29af26bcb409 100644
--- a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
@@ -6,15 +6,6 @@ import usePlan from '../../hooks/use-plan';
 
 const { siteSuffix } = window.jetpackProtectInitialState;
 
-const scanResultsTitle = __( 'Your scan results', 'jetpack-protect' );
-const scanResultsDescription = (
-	<Text>
-		{ __(
-			'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files',
-			'jetpack-protect'
-		) }
-	</Text>
-);
 const UpgradeButton = props => {
 	const { upgradePlan } = usePlan();
 	const { recordEvent } = useAnalyticsTracks();
@@ -27,11 +18,6 @@ const UpgradeButton = props => {
 };
 
 export default [
-	{
-		id: 'free-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
-	},
 	{
 		id: 'free-daily-scans',
 		title: __( 'Daily automated scans', 'jetpack-protect' ),
@@ -49,10 +35,41 @@ export default [
 			</Text>
 		),
 	},
+	{
+		id: 'paid-daily-and-manual-scans',
+		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
+	{
+		id: 'free-scan-results',
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, and themes.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
 	{
 		id: 'paid-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
 	},
 	{
 		id: 'paid-fix-all-threats',
@@ -97,16 +114,4 @@ export default [
 			</Text>
 		),
 	},
-	{
-		id: 'paid-daily-and-manual-scans',
-		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
-		description: (
-			<Text>
-				{ __(
-					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
-					'jetpack-protect'
-				) }
-			</Text>
-		),
-	},
 ];
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 9e1b9c102a037..db76bac1b15b0 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
@@ -1,33 +1,41 @@
 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 { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import useThreatsList from '../../components/threats-list/use-threats-list';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
+import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useFixers from '../../hooks/use-fixers';
 import useModal from '../../hooks/use-modal';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
+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 {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
-	const { hasPlan } = usePlan();
+	const { recordEvent } = useAnalyticsTracks();
+	const { hasPlan, upgradePlan } = usePlan();
+	const { setModal } = useModal();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
-	const { list } = useThreatsList();
 	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const { setModal } = useModal();
+
+	const getScan = useCallback( () => {
+		recordEvent( 'jetpack_protect_scan_header_get_scan_link_click' );
+		upgradePlan();
+	}, [ recordEvent, upgradePlan ] );
+
+	const { globalStats } = useWafData();
+	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
+	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
+		? '50,000'
+		: totalVulnerabilities.toLocaleString();
+
+	const numThreats = status.threats.length;
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
@@ -35,20 +43,20 @@ const ScanAdminSectionHero: React.FC = () => {
 
 	// List of fixable threats that do not have a fix in progress
 	const fixableList = useMemo( () => {
-		return list.filter( threat => {
-			const threatId = parseInt( threat.id );
+		return status.threats.filter( threat => {
+			const threatId = typeof threat.id === 'string' ? parseInt( threat.id ) : threat.id;
 			return (
 				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
 			);
 		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+	}, [ status.threats, isThreatFixInProgress, isThreatFixStale ] );
 
 	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
+	if ( status.lastChecked ) {
 		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+		lastCheckedLocalTimestamp = new Date( status.lastChecked + ' UTC' ).getTime();
 	}
 
 	const handleShowAutoFixersClick = threatList => {
@@ -88,13 +96,11 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: __( 'Most recent results', 'jetpack-protect' ) }
 					</Text>
-					{ ! hasPlan && (
-						<OnboardingPopover
-							id="free-daily-scans"
-							position={ isSm ? 'bottom' : 'middle right' }
-							anchor={ dailyScansPopoverAnchor }
-						/>
-					) }
+					<OnboardingPopover
+						id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
+						position={ isSm ? 'bottom' : 'middle right' }
+						anchor={ dailyScansPopoverAnchor }
+					/>
 					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
@@ -105,48 +111,60 @@ const ScanAdminSectionHero: React.FC = () => {
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
 							  )
-							: sprintf(
-									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No active %s', 'jetpack-protect' ),
-									hasPlan
-										? __( 'threats', 'jetpack-protect' )
-										: __(
-												'vulnerabilities',
-												'jetpack-protect',
-												/* dummy arg to avoid bad minification */ 0
-										  )
-							  ) }
+							: __( "Don't worry about a thing", 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text className={ styles[ 'subheading-text' ] }>
-								{ __(
-									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
-									'jetpack-protect'
-								) }
-							</Text>
-							{ fixableList.length > 0 && (
+							{ hasPlan ? (
+								<Text>
+									{ __(
+										"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
+										'jetpack-protect'
+									) }
+								</Text>
+							) : (
 								<>
-									<Button
-										className={ styles[ 'auto-fixers' ] }
-										ref={ setShowAutoFixersPopoverAnchor }
-										variant="primary"
-										weight="regular"
-										onClick={ handleShowAutoFixersClick( fixableList ) }
-									>
+									<Text mb={ 4 }>
 										{ sprintf(
-											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-											fixableList.length
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
 										) }
-									</Button>
-									{ ! scanning && (
-										<OnboardingPopover
-											id="paid-fix-all-threats"
-											position={ isSm ? 'bottom right' : 'middle left' }
-											anchor={ showAutoFixersPopoverAnchor }
-										/>
-									) }
+									</Text>
+									<Tooltip
+										text={ __(
+											'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
+											'jetpack-protect'
+										) }
+									>
+										<Button onClick={ getScan }>
+											{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
+										</Button>
+									</Tooltip>
+								</>
+							) }
+							{ fixableList.length > 0 && (
+								<>
+									<div ref={ setShowAutoFixersPopoverAnchor }>
+										<Button
+											className={ styles[ 'auto-fixers' ] }
+											onClick={ handleShowAutoFixersClick( fixableList ) }
+										>
+											{ sprintf(
+												/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+												__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+												fixableList.length
+											) }
+										</Button>
+									</div>
+									<OnboardingPopover
+										id="paid-fix-all-threats"
+										position={ isSm ? 'bottom right' : 'middle left' }
+										anchor={ showAutoFixersPopoverAnchor }
+									/>
 								</>
 							) }
 						</>
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx b/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
deleted file mode 100644
index 56d7ea1c14a7d..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-	Text,
-	Button,
-	Title,
-	getRedirectUrl,
-	ContextualUpgradeTrigger,
-	Col,
-	Container,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useWafData from '../../hooks/use-waf-data';
-import styles from './styles.module.scss';
-
-const ProductPromotion = () => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { hasPlan, upgradePlan } = usePlan();
-	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_footer_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	if ( hasPlan ) {
-		const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
-
-		return (
-			<div className={ styles[ 'product-section' ] }>
-				<Title>{ __( 'Get access to our Cloud', 'jetpack-protect' ) }</Title>
-				<Text mb={ 3 }>
-					{ __(
-						'With your Protect upgrade, you have free access to scan your site on our Cloud, so you can be aware and fix your threats even if your site goes down.',
-						'jetpack-protect'
-					) }
-				</Text>
-
-				<Button variant="secondary" weight="regular" href={ goToCloudUrl }>
-					{ __( 'Go to Cloud', 'jetpack-protect' ) }
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<div className={ styles[ 'product-section' ] }>
-			<Title>{ __( 'Advanced scan results', 'jetpack-protect' ) }</Title>
-			<Text mb={ 3 }>
-				{ __(
-					'Upgrade Jetpack Protect to get advanced scan tools, including one-click fixes for most threats and malware scanning.',
-					'jetpack-protect'
-				) }
-			</Text>
-
-			<ContextualUpgradeTrigger
-				description={ __(
-					'Looking for advanced scan results and one-click fixes?',
-					'jetpack-protect'
-				) }
-				cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-				onClick={ getScan }
-			/>
-		</div>
-	);
-};
-
-const FooterInfo = () => {
-	const { hasPlan } = usePlan();
-	const { globalStats } = useWafData();
-	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
-	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
-		? '50,000'
-		: totalVulnerabilities.toLocaleString();
-
-	if ( hasPlan ) {
-		const learnMoreScanUrl = getRedirectUrl( 'protect-footer-learn-more-scan' );
-
-		return (
-			<div className={ styles[ 'info-section' ] }>
-				<Title>{ __( 'Line-by-line scanning', 'jetpack-protect' ) }</Title>
-				<Text mb={ 2 }>
-					{ __(
-						'We actively review line-by-line of your site files to identify threats and vulnerabilities. Jetpack monitors millions of websites to keep your site secure all the time.',
-						'jetpack-protect'
-					) }{ ' ' }
-					<Button variant="link" target="_blank" weight="regular" href={ learnMoreScanUrl }>
-						{ __( 'Learn more', 'jetpack-protect' ) }
-					</Button>
-				</Text>
-			</div>
-		);
-	}
-
-	const learnMoreProtectUrl = getRedirectUrl( 'jetpack-protect-footer-learn-more' );
-
-	return (
-		<div className={ styles[ 'info-section' ] }>
-			<Title>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__( 'Over %s listed vulnerabilities', 'jetpack-protect' ),
-					totalVulnerabilitiesFormatted
-				) }
-			</Title>
-			<Text mb={ 3 }>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__(
-						'Every day we check your plugin, theme, and WordPress versions against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-						'jetpack-protect'
-					),
-					totalVulnerabilitiesFormatted
-				) }
-			</Text>
-
-			<Button variant="link" isExternalLink={ true } href={ learnMoreProtectUrl } weight="regular">
-				{ __( 'Learn more', 'jetpack-protect' ) }
-			</Button>
-		</div>
-	);
-};
-
-const ScanFooter = () => {
-	const { waf } = window.jetpackProtectInitialState || {};
-	return waf.wafSupported ? (
-		<SeventyFiveLayout
-			main={ <ProductPromotion /> }
-			secondary={ <FooterInfo /> }
-			preserveSecondaryOnMobile={ true }
-		/>
-	) : (
-		<Container horizontalSpacing={ 0 } horizontalGap={ 0 } fluid={ false }>
-			<Col>
-				<FooterInfo />
-			</Col>
-		</Container>
-	);
-};
-
-export default ScanFooter;
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
new file mode 100644
index 0000000000000..616f4e256ed44
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
@@ -0,0 +1,56 @@
+import { ThreatsDataViews } from '@automattic/jetpack-components';
+import { Threat } from '@automattic/jetpack-scan';
+import { useCallback } from 'react';
+import useHistoryQuery from '../../data/scan/use-history-query';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import useModal from '../../hooks/use-modal';
+
+/**
+ * Scan Results Data View
+ *
+ * @param {object} props         - Component props.
+ * @param {Array}  props.filters - Default filters to apply to the data view.
+ *
+ * @return {JSX.Element} ScanResultDataView component.
+ */
+export default function ScanResultsDataView( {
+	filters = [],
+}: {
+	filters: React.ComponentProps< typeof ThreatsDataViews >[ 'filters' ];
+} ) {
+	const { setModal } = useModal();
+
+	const { data: scanStatus } = useScanStatusQuery();
+	const { data: history } = useHistoryQuery();
+
+	const onFixThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'FIX_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onIgnoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'IGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onUnignoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	return (
+		<ThreatsDataViews
+			data={ [ ...scanStatus.threats, ...( history ? history.threats : [] ) ] }
+			filters={ filters }
+			onFixThreats={ onFixThreats }
+			onIgnoreThreats={ onIgnoreThreats }
+			onUnignoreThreats={ onUnignoreThreats }
+		/>
+	);
+}
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 c214c52ff8892..4db4449b60119 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
@@ -3,7 +3,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import AdminSectionHero from '../../components/admin-section-hero';
 import InProgressAnimation from '../../components/in-progress-animation';
 import ProgressBar from '../../components/progress-bar';
-import ScanNavigation from '../../components/scan-navigation';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
@@ -35,20 +34,22 @@ const ScanningAdminSectionHero: React.FC = () => {
 								/>
 							) }
 							<Text>
-								{ sprintf(
-									// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-									__(
-										'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
-										'jetpack-protect'
-									),
-									totalVulnerabilitiesFormatted
-								) }
+								{ hasPlan
+									? __(
+											"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
+											'jetpack-protect'
+									  )
+									: sprintf(
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
+									  ) }
 							</Text>
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			secondary={ <InProgressAnimation /> }
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 908e34f6e71d7..163fd23248aaa 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,12 +1,14 @@
-.subheading-text {
-	white-space: nowrap;
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
-.product-section, .info-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
-}
+.scan-results-container {
+	padding-left: 0;
+	padding-right: 0;
+	overflow: hidden;
 
-.auto-fixers {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
-}
\ No newline at end of file
+	> * {
+		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
+		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
+	}
+}
diff --git a/projects/plugins/protect/webpack.config.js b/projects/plugins/protect/webpack.config.js
index 2f6a45721b100..0c65dfec146a7 100644
--- a/projects/plugins/protect/webpack.config.js
+++ b/projects/plugins/protect/webpack.config.js
@@ -33,6 +33,24 @@ module.exports = [
 					includeNodeModules: [ '@automattic/jetpack-' ],
 				} ),
 
+				/**
+				 * Transpile @wordpress/dataviews in node_modules too.
+				 *
+				 * @see https://github.com/Automattic/jetpack/issues/39907
+				 */
+				jetpackWebpackConfig.TranspileRule( {
+					includeNodeModules: [ '@wordpress/dataviews/' ],
+					babelOpts: {
+						configFile: false,
+						plugins: [
+							[
+								require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
+								{ textdomain: 'jetpack-protect' },
+							],
+						],
+					},
+				} ),
+
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],

From 5ba7582155c73939497c2ce62a05ea73993bd6c4 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:22:55 -0800
Subject: [PATCH 088/143] Components: Add ScanReport (#40419)

---
 .../changelog/components-add-scan-report      |   4 +
 .../components/scan-report/constants.ts       |  30 +++
 .../components/scan-report/index.tsx          | 197 ++++++++++++++++++
 .../scan-report/stories/index.stories.tsx     |  72 +++++++
 .../components/scan-report/styles.module.scss |  21 ++
 .../components/shield-icon/index.tsx          |  14 +-
 .../shield-icon/stories/index.stories.tsx     |   6 +-
 projects/js-packages/components/index.ts      |   1 +
 .../scan/changelog/components-add-scan-report |   4 +
 .../js-packages/scan/src/types/threats.ts     |  24 ++-
 10 files changed, 360 insertions(+), 13 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/components-add-scan-report
 create mode 100644 projects/js-packages/components/components/scan-report/constants.ts
 create mode 100644 projects/js-packages/components/components/scan-report/index.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/styles.module.scss
 create mode 100644 projects/js-packages/scan/changelog/components-add-scan-report

diff --git a/projects/js-packages/components/changelog/components-add-scan-report b/projects/js-packages/components/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..ba0fbd4cce025
--- /dev/null
+++ b/projects/js-packages/components/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport component
diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
new file mode 100644
index 0000000000000..436eed91c5701
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	wordpress as coreIcon,
+} from '@wordpress/icons';
+
+export const TYPES = [
+	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
+];
+
+export const ICONS = {
+	plugins: pluginIcon,
+	themes: themeIcon,
+	core: coreIcon,
+	files: fileIcon,
+	default: shieldIcon,
+};
+
+export const FIELD_ICON = 'icon';
+export const FIELD_TYPE = 'type';
+export const FIELD_NAME = 'name';
+export const FIELD_STATUS = 'status';
+export const FIELD_UPDATE = 'update';
+export const FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
new file mode 100644
index 0000000000000..14795376f7d95
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -0,0 +1,197 @@
+import { type ScanReportExtension } from '@automattic/jetpack-scan';
+import { Tooltip } from '@wordpress/components';
+import {
+	type SupportedLayouts,
+	type View,
+	type Field,
+	DataViews,
+	filterSortAndPaginate,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import ShieldIcon from '../shield-icon';
+import {
+	FIELD_NAME,
+	FIELD_VERSION,
+	FIELD_ICON,
+	FIELD_STATUS,
+	FIELD_TYPE,
+	TYPES,
+	ICONS,
+} from './constants';
+import styles from './styles.module.scss';
+
+/**
+ * DataViews component for displaying a scan report.
+ *
+ * @param {object}   props                   - Component props.
+ * @param {Array}    props.data              - Scan report data.
+ * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ *
+ * @return {JSX.Element} The ScanReport component.
+ */
+export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
+	const baseView = {
+		search: '',
+		filters: [],
+		page: 1,
+		perPage: 20,
+	};
+
+	/**
+	 * DataView default layouts.
+	 *
+	 * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+	 */
+	const defaultLayouts: SupportedLayouts = {
+		table: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_STATUS,
+			},
+		},
+		list: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_NAME,
+				mediaField: FIELD_ICON,
+			},
+		},
+	};
+
+	/**
+	 * DataView view object - configures how the dataset is visible to the user.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+	 */
+	const [ view, setView ] = useState< View >( {
+		type: 'table',
+		...defaultLayouts.table,
+	} );
+
+	/**
+	 * DataView fields - describes the visible items for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+	 */
+	const fields = useMemo( () => {
+		const iconHeight = 20;
+		const result: Field< ScanReportExtension >[] = [
+			{
+				id: FIELD_STATUS,
+				label: __( 'Status', 'jetpack-components' ),
+				render( { item }: { item: ScanReportExtension } ) {
+					let variant: 'info' | 'warning' | 'success' = 'info';
+					let text = __(
+						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
+						'jetpack-components'
+					);
+
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							variant = 'warning';
+							text = __( 'Threat detected.', 'jetpack-components' );
+						} else {
+							variant = 'success';
+							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+						}
+					}
+
+					return (
+						<Tooltip className={ styles.tooltip } text={ text }>
+							<div className={ styles.icon }>
+								<ShieldIcon variant={ variant } height={ iconHeight } />
+							</div>
+						</Tooltip>
+					);
+				},
+			},
+			{
+				id: FIELD_TYPE,
+				label: __( 'Type', 'jetpack-components' ),
+				elements: TYPES,
+			},
+			{
+				id: FIELD_NAME,
+				label: __( 'Name', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.name ? item.name : '';
+				},
+			},
+			{
+				id: FIELD_VERSION,
+				label: __( 'Version', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.version ? item.version : '';
+				},
+			},
+			...( view.type === 'list'
+				? [
+						{
+							id: FIELD_ICON,
+							label: __( 'Icon', 'jetpack-components' ),
+							enableSorting: false,
+							enableHiding: false,
+							getValue( { item }: { item: ScanReportExtension } ) {
+								return ICONS[ item.type ] || '';
+							},
+							render( { item }: { item: ScanReportExtension } ) {
+								return (
+									<div className={ styles.threat__media }>
+										<Icon icon={ ICONS[ item.type ] } />
+									</div>
+								);
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		return result;
+	}, [ view ] );
+
+	/**
+	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+	 */
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ data, view, fields ] );
+
+	/**
+	 * Callback function to update the view state.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+	 */
+	const onChangeView = useCallback( ( newView: View ) => {
+		setView( newView );
+	}, [] );
+
+	/**
+	 * DataView getItemId function - returns the unique ID for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+	 */
+	const getItemId = useCallback( ( item: ScanReportExtension ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
new file mode 100644
index 0000000000000..63926908850de
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -0,0 +1,72 @@
+import ScanReport from '..';
+
+export default {
+	title: 'JS Packages/Components/Scan Report',
+	component: ScanReport,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ScanReport { ...args } />;
+Default.args = {
+	data: [
+		{
+			id: 1,
+			name: 'WordPress',
+			slug: null,
+			version: '6.7.1',
+			threats: [],
+			checked: true,
+			type: 'core',
+		},
+		{
+			id: 2,
+			name: 'Jetpack',
+			slug: 'jetpack/jetpack.php',
+			version: '14.1-a.7',
+			threats: [],
+			checked: false,
+			type: 'plugins',
+		},
+		{
+			id: 3,
+			name: 'Twenty Fifteen',
+			slug: 'twentyfifteen',
+			version: '1.1',
+			threats: [
+				{
+					id: 198352527,
+					signature: 'Vulnerable.WP.Extension',
+					description: 'Vulnerable WordPress extension',
+					severity: 3,
+				},
+			],
+			checked: true,
+			type: 'themes',
+		},
+		{
+			id: 4,
+			threats: [
+				{
+					id: 198352406,
+					signature: 'EICAR_AV_Test_Suspicious',
+					title: 'Malicious code found in file: jptt_eicar.php',
+					severity: 1,
+				},
+			],
+			checked: true,
+			type: 'files',
+		},
+	],
+};
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
new file mode 100644
index 0000000000000..d313d4cb8898a
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -0,0 +1,21 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: var( --jp-black );
+	}
+}
+
+.tooltip {
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
\ No newline at end of file
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index fee9f4d70c463..b07b943b5e7fa 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 const COLORS = {
-	error: '#D63638',
-	warning: '#F0B849',
-	success: '#069E08',
 	default: '#1d2327',
+	info: '#A7AAAD',
+	success: '#069E08',
+	warning: '#F0B849',
+	error: '#D63638',
 };
 
 /**
@@ -32,11 +33,11 @@ export default function ShieldIcon( {
 }: {
 	className?: string;
 	contrast?: string;
-	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
 	icon?: 'success' | 'error';
 	outline?: boolean;
-	variant: 'default' | 'success' | 'warning' | 'error';
+	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
 	const iconFill = outline ? shieldFill : contrast;
@@ -60,6 +61,9 @@ export default function ShieldIcon( {
 				}
 				fill={ shieldFill }
 			/>
+			{ 'info' === iconVariant && (
+				<path d="M33.7 69H41.5V45.6H33.7V69ZM33.7 37.8H41.5V30H33.7V37.8Z" fill={ iconFill } />
+			) }
 			{ 'success' === iconVariant && (
 				<path
 					fillRule="evenodd"
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
index b5a16d4da4075..57bcb3802010c 100644
--- a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -11,13 +11,13 @@ export default {
 			control: {
 				type: 'select',
 			},
-			options: [ 'default', 'success', 'warning', 'error' ],
+			options: [ 'default', 'info', 'success', 'warning', 'error' ],
 		},
 		icon: {
 			control: {
 				type: 'select',
 			},
-			options: [ 'success', 'error' ],
+			options: [ 'info', 'success', 'error' ],
 		},
 		fill: {
 			control: 'color',
@@ -39,12 +39,14 @@ export const Variants = () => {
 		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" />
+				<ShieldIcon variant="info" />
 				<ShieldIcon variant="success" />
 				<ShieldIcon variant="warning" />
 				<ShieldIcon variant="error" />
 			</div>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="info" outline />
 				<ShieldIcon variant="success" outline />
 				<ShieldIcon variant="warning" outline />
 				<ShieldIcon variant="error" outline />
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 4b0f3612012e7..6df50ee7fdb61 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -48,6 +48,7 @@ export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
 export { default as ShieldIcon } from './components/shield-icon';
+export { default as ScanReport } from './components/scan-report';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/js-packages/scan/changelog/components-add-scan-report b/projects/js-packages/scan/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..eeb9c55de4a28
--- /dev/null
+++ b/projects/js-packages/scan/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates/adds scan types
diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts
index 016e2e1eaee51..19f76cce6875a 100644
--- a/projects/js-packages/scan/src/types/threats.ts
+++ b/projects/js-packages/scan/src/types/threats.ts
@@ -4,6 +4,23 @@ export type ThreatStatus = 'fixed' | 'ignored' | 'current';
 
 export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
 
+export type ScanReportExtension = {
+	id: number;
+	checked: boolean;
+	slug?: string;
+	name?: string;
+	version?: string;
+	threats: Threat[];
+	type: 'plugin' | 'theme' | 'core' | 'files';
+};
+
+export type Extension = {
+	slug?: string;
+	name: string;
+	version: string;
+	type: 'plugin' | 'theme' | 'core';
+};
+
 export type Threat = {
 	/** The threat's unique ID. */
 	id: string | number;
@@ -57,10 +74,5 @@ export type Threat = {
 	diff?: string;
 
 	/** The affected extension. */
-	extension?: {
-		slug: string;
-		name: string;
-		version: string;
-		type: 'plugin' | 'theme' | 'core';
-	};
+	extension?: Extension;
 };

From f7115cb825b0eb963a6996b2d343bb1dff0656ea Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 14:44:27 -0800
Subject: [PATCH 089/143] Update changelog

---
 projects/js-packages/components/changelog/add-protect-home | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/changelog/add-protect-home b/projects/js-packages/components/changelog/add-protect-home
index ae763d7566ebd..bbbcfa9454e78 100644
--- a/projects/js-packages/components/changelog/add-protect-home
+++ b/projects/js-packages/components/changelog/add-protect-home
@@ -1,4 +1,4 @@
 Significance: minor
 Type: added
 
-Adds error flag to StatCard
+Adds hideValue flag to StatCard

From 0021ecf4c38da13a8b2ded2d577da220435f23b3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 14:57:02 -0800
Subject: [PATCH 090/143] Update status label

---
 .../js-packages/components/components/scan-report/constants.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 6b8be4ed263c4..6a10d008b876f 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -10,7 +10,7 @@ import {
 export const STATUS_TYPES = [
 	{ value: 'checked', label: __( 'Checked', 'jetpack-components' ) },
 	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-components' ) },
-	{ value: 'threat', label: __( 'Threats', 'jetpack-components' ) },
+	{ value: 'threat', label: __( 'Threat', 'jetpack-components' ) },
 ];
 
 export const TYPES = [

From 8e067016bc6fba8b160f800319a77a3214ff7122 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 15:11:19 -0800
Subject: [PATCH 091/143] Use status query

---
 projects/plugins/protect/src/js/routes/home/index.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index d24016cfa401b..1ac5629efcf05 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,6 +1,6 @@
 import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
-import useProtectData from '../../hooks/use-protect-data';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import HomeAdminSectionHero from './home-admin-section-hero';
 
 /**
@@ -11,12 +11,11 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
-	const {
-		results: { core, plugins, themes, files },
-	} = useProtectData();
+	const { data: status } = useScanStatusQuery( { usePolling: true } );
+	const { core, plugins, themes, files = [] } = status;
 
 	const data = [
-		...core,
+		core,
 		...plugins,
 		...themes,
 		{ checked: true, threats: files, type: 'files' },

From 4fb5f6aabe2a97feda1d8b18417aee2ce4dc97b8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 15:12:14 -0800
Subject: [PATCH 092/143] Remove files default

---
 projects/plugins/protect/src/js/routes/home/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 1ac5629efcf05..41f38e3e5b7ad 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -12,7 +12,7 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  */
 const HomePage = () => {
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
-	const { core, plugins, themes, files = [] } = status;
+	const { core, plugins, themes, files } = status;
 
 	const data = [
 		core,

From 7dda24cf85ce86fa84a9240f800b6e45f7771de7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 15:28:36 -0800
Subject: [PATCH 093/143] Fix scanning header alignment

---
 .../plugins/protect/src/js/routes/scan/styles.module.scss   | 6 ++++++
 1 file changed, 6 insertions(+)

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 163fd23248aaa..23bff251ed974 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -12,3 +12,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.scanning-header-main {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}

From d7fcc2983a856bb05019b1f6ade419bd14a93b13 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 15:35:13 -0800
Subject: [PATCH 094/143] Redirect to scan page after checkout

---
 projects/plugins/protect/src/js/hooks/use-plan.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/hooks/use-plan.tsx b/projects/plugins/protect/src/js/hooks/use-plan.tsx
index b5ab18da01875..f5cd1d54943b9 100644
--- a/projects/plugins/protect/src/js/hooks/use-plan.tsx
+++ b/projects/plugins/protect/src/js/hooks/use-plan.tsx
@@ -48,7 +48,7 @@ export default function usePlan( { redirectUrl }: { redirectUrl?: string } = {}
 
 	const { run: checkout } = useProductCheckoutWorkflow( {
 		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: redirectUrl || adminUrl,
+		redirectUrl: redirectUrl || adminUrl + '#/scan',
 		siteProductAvailabilityHandler: API.checkPlan,
 		useBlogIdSuffix: true,
 		connectAfterCheckout: false,

From 9e3fa27d2dbc9aab82fe8c6d18dd263180e69f12 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Thu, 5 Dec 2024 15:44:34 -0800
Subject: [PATCH 095/143] Update card text to push all messages to two lines

---
 .../protect/src/js/routes/home/home-statcards.jsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 13fcc4d090a22..4e276895411d5 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -105,10 +105,10 @@ const HomeStatCards = () => {
 
 	const scanArgs = useMemo( () => {
 		let scanIcon;
-		if ( scanning ) {
-			scanIcon = <Spinner />;
-		} else if ( scanError ) {
+		if ( scanError ) {
 			scanIcon = <ShieldIcon variant="error" height={ iconHeight } />;
+		} else if ( scanning ) {
+			scanIcon = <Spinner />;
 		} else {
 			scanIcon = (
 				<ShieldIcon
@@ -121,7 +121,7 @@ const HomeStatCards = () => {
 
 		let scanLabel;
 		if ( scanError ) {
-			scanLabel = __( 'Unable to scan', 'jetpack-protect' );
+			scanLabel = __( 'An error occurred', 'jetpack-protect' );
 		} else if ( scanning ) {
 			scanLabel = __( 'Please wait…', 'jetpack-protect' );
 		} else {
@@ -130,7 +130,7 @@ const HomeStatCards = () => {
 				: __( 'Vulnerabilities', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 );
 			scanLabel = sprintf(
 				// translators: %s: "Threats" or "Vulnerabilities"
-				__( '%s found', 'jetpack-protect' ),
+				__( '%s identified', 'jetpack-protect' ),
 				label
 			);
 		}
@@ -198,7 +198,7 @@ const HomeStatCards = () => {
 			),
 			label: (
 				<span className={ styles[ 'stat-card-label' ] }>
-					{ __( 'Blocked logins', 'jetpack-protect' ) }
+					{ __( 'Blocked login attempts', 'jetpack-protect' ) }
 				</span>
 			),
 			value: allTimeBlockedLoginsCount,

From 831b3767c54761b9750e6712f5b2464f64aca3d6 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 05:18:15 -0800
Subject: [PATCH 096/143] Update scanning card message

---
 projects/plugins/protect/src/js/routes/home/home-statcards.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 4e276895411d5..613331553fa15 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -123,7 +123,7 @@ const HomeStatCards = () => {
 		if ( scanError ) {
 			scanLabel = __( 'An error occurred', 'jetpack-protect' );
 		} else if ( scanning ) {
-			scanLabel = __( 'Please wait…', 'jetpack-protect' );
+			scanLabel = __( 'One moment, please…', 'jetpack-protect' );
 		} else {
 			const label = hasPlan
 				? __( 'Threats', 'jetpack-protect' )

From 68976b7339fd3123e3b01bf6781095e03a854ed7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 06:00:08 -0800
Subject: [PATCH 097/143] Fixes and improvements

---
 projects/plugins/protect/src/js/hooks/use-plan.tsx        | 2 +-
 .../plugins/protect/src/js/routes/home/home-statcards.jsx | 8 ++++----
 .../plugins/protect/src/js/routes/scan/styles.module.scss | 6 ++++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/protect/src/js/hooks/use-plan.tsx b/projects/plugins/protect/src/js/hooks/use-plan.tsx
index b5ab18da01875..f5cd1d54943b9 100644
--- a/projects/plugins/protect/src/js/hooks/use-plan.tsx
+++ b/projects/plugins/protect/src/js/hooks/use-plan.tsx
@@ -48,7 +48,7 @@ export default function usePlan( { redirectUrl }: { redirectUrl?: string } = {}
 
 	const { run: checkout } = useProductCheckoutWorkflow( {
 		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: redirectUrl || adminUrl,
+		redirectUrl: redirectUrl || adminUrl + '#/scan',
 		siteProductAvailabilityHandler: API.checkPlan,
 		useBlogIdSuffix: true,
 		connectAfterCheckout: false,
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index 13fcc4d090a22..a85751197a32c 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -121,16 +121,16 @@ const HomeStatCards = () => {
 
 		let scanLabel;
 		if ( scanError ) {
-			scanLabel = __( 'Unable to scan', 'jetpack-protect' );
+			scanLabel = __( 'An error occurred', 'jetpack-protect' );
 		} else if ( scanning ) {
-			scanLabel = __( 'Please wait…', 'jetpack-protect' );
+			scanLabel = __( 'One moment, please…', 'jetpack-protect' );
 		} else {
 			const label = hasPlan
 				? __( 'Threats', 'jetpack-protect' )
 				: __( 'Vulnerabilities', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 );
 			scanLabel = sprintf(
 				// translators: %s: "Threats" or "Vulnerabilities"
-				__( '%s found', 'jetpack-protect' ),
+				__( '%s identified', 'jetpack-protect' ),
 				label
 			);
 		}
@@ -198,7 +198,7 @@ const HomeStatCards = () => {
 			),
 			label: (
 				<span className={ styles[ 'stat-card-label' ] }>
-					{ __( 'Blocked logins', 'jetpack-protect' ) }
+					{ __( 'Blocked login attempts', 'jetpack-protect' ) }
 				</span>
 			),
 			value: allTimeBlockedLoginsCount,
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 163fd23248aaa..84cd9c6a4f434 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -12,3 +12,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.scanning-header-main {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
\ No newline at end of file

From a4825e41be380c1773177c2a1b54c43da9dbf069 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 06:00:47 -0800
Subject: [PATCH 098/143] Reorg

---
 .../plugins/protect/src/js/routes/home/home-statcards.jsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
index a85751197a32c..613331553fa15 100644
--- a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -105,10 +105,10 @@ const HomeStatCards = () => {
 
 	const scanArgs = useMemo( () => {
 		let scanIcon;
-		if ( scanning ) {
-			scanIcon = <Spinner />;
-		} else if ( scanError ) {
+		if ( scanError ) {
 			scanIcon = <ShieldIcon variant="error" height={ iconHeight } />;
+		} else if ( scanning ) {
+			scanIcon = <Spinner />;
 		} else {
 			scanIcon = (
 				<ShieldIcon

From 46c808b2c66910006818f6ec5ef9d5d92dd1bec4 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 06:07:39 -0800
Subject: [PATCH 099/143] Sort list by status

---
 .../js-packages/components/components/scan-report/index.tsx  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index ae0acb3a1af79..8e11816e557b8 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -4,6 +4,7 @@ import {
 	type SupportedLayouts,
 	type View,
 	type Field,
+	type SortDirection,
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
@@ -34,6 +35,10 @@ import styles from './styles.module.scss';
  */
 export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 	const baseView = {
+		sort: {
+			field: 'status',
+			direction: 'desc' as SortDirection,
+		},
 		search: '',
 		filters: [],
 		page: 1,

From 2193ed5c400f4d3c06ad78369548db6c8a914d5e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 06:22:22 -0800
Subject: [PATCH 100/143] Remove default sorting in favour of filter use

---
 .../js-packages/components/components/scan-report/index.tsx  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 8e11816e557b8..ae0acb3a1af79 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -4,7 +4,6 @@ import {
 	type SupportedLayouts,
 	type View,
 	type Field,
-	type SortDirection,
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
@@ -35,10 +34,6 @@ import styles from './styles.module.scss';
  */
 export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 	const baseView = {
-		sort: {
-			field: 'status',
-			direction: 'desc' as SortDirection,
-		},
 		search: '',
 		filters: [],
 		page: 1,

From b2e59afe18f44f471d56430081bfae399c953fa8 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 06:41:30 -0800
Subject: [PATCH 101/143] Update tooltips to use conditional content

---
 .../components/scan-report/index.tsx          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index ae0acb3a1af79..3397543f8069a 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -7,7 +7,7 @@ import {
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import ShieldIcon from '../shield-icon';
@@ -97,6 +97,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					return 'unchecked';
 				},
 				render( { item }: { item: ScanReportExtension } ) {
+					const hasStatus = item.threats.some( threat => threat.status !== null );
 					let variant: 'info' | 'warning' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
@@ -106,10 +107,22 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = __( 'Threat detected.', 'jetpack-components' );
+							text = sprintf(
+								// translators: %s: Threat or Vulnerability
+								__( '%s detected.', 'jetpack-components' ),
+								hasStatus
+									? __( 'Threat', 'jetpack-components' )
+									: __( 'Vulnerability', 'jetpack-components' )
+							);
 						} else {
 							variant = 'success';
-							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+							text = sprintf(
+								// translators: %s: threats or vulnerabilities
+								__( 'No known %s found that affect this version.', 'jetpack-components' ),
+								hasStatus
+									? __( 'threats', 'jetpack-components' )
+									: __( 'vulnerabilities', 'jetpack-components' )
+							);
 						}
 					}
 

From 30c43dc77a945e65e3f1d0d329c0bc9b3f66e8e7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Fri, 6 Dec 2024 08:34:22 -0800
Subject: [PATCH 102/143] Don't use ternaries for translations in components to
 avoid build issues

---
 .../components/components/scan-report/index.tsx  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 3397543f8069a..92aadc7f073d1 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -97,12 +97,18 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					return 'unchecked';
 				},
 				render( { item }: { item: ScanReportExtension } ) {
-					const hasStatus = item.threats.some( threat => threat.status !== null );
 					let variant: 'info' | 'warning' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
 						'jetpack-components'
 					);
+					let capitalizedType = __( 'Vulnerability', 'jetpack-components' );
+					let pluralType = __( 'vulnerabilities', 'jetpack-components' );
+
+					if ( item.threats.some( threat => threat.status !== null ) ) {
+						capitalizedType = __( 'Threat', 'jetpack-components' );
+						pluralType = __( 'threats', 'jetpack-components' );
+					}
 
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
@@ -110,18 +116,14 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 							text = sprintf(
 								// translators: %s: Threat or Vulnerability
 								__( '%s detected.', 'jetpack-components' ),
-								hasStatus
-									? __( 'Threat', 'jetpack-components' )
-									: __( 'Vulnerability', 'jetpack-components' )
+								capitalizedType
 							);
 						} else {
 							variant = 'success';
 							text = sprintf(
 								// translators: %s: threats or vulnerabilities
 								__( 'No known %s found that affect this version.', 'jetpack-components' ),
-								hasStatus
-									? __( 'threats', 'jetpack-components' )
-									: __( 'vulnerabilities', 'jetpack-components' )
+								pluralType
 							);
 						}
 					}

From 420e1ecdf9d50e7703d75fc57a67e8a2a64d7de1 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 103/143] Init project branch


From 49cf36cd2516638513a331b4a3fa7bb5a92fe8b2 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 104/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From bdb1df46f77934a7d1ece7ffabd1a713e5a40b28 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 105/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From 2362d8f2b3ce2f43a7c8a115445ec0f4a909cf80 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 106/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From 28f4d2e4ac5ce85111e1e75bcd6515edef3545ab Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 107/143] Protect: add ShieldIcon component

---
 .../components/admin-section-hero/index.tsx   |  21 ++-
 .../stories/index.stories.jsx                 |   4 +-
 .../src/js/components/shield-icon/index.tsx   | 165 ++++++++++++++++++
 .../shield-icon/stories/index.stories.tsx     |  50 ++++++
 4 files changed, 230 insertions(+), 10 deletions(-)
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ed83bebc8638..758c8c21e0193 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,9 +1,6 @@
-import {
-	AdminSectionHero as JetpackAdminSectionHero,
-	H3,
-	getIconBySlug,
-} from '@automattic/jetpack-components';
+import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
+import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -15,7 +12,7 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
+	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 
 AdminSectionHero.Heading = ( {
 	children,
+	variant = 'default',
 	showIcon = false,
 }: {
 	children: React.ReactNode;
+	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
 } ) => {
-	const Icon = getIconBySlug( 'protect' );
-
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
-			{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
+			{ showIcon && (
+				<ShieldIcon
+					variant={ `${ variant }-outline` }
+					fill="#1d2327"
+					className={ styles[ 'heading-icon' ] }
+				/>
+			) }
 		</H3>
 	);
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index 7d5b4f8066c93..ca2dfda7fc98e 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -12,7 +12,9 @@ Default.args = {
 	main: (
 		<>
 			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
+			<AdminSectionHero.Heading showIcon variant="success">
+				{ 'No threats found' }
+			</AdminSectionHero.Heading>
 			<AdminSectionHero.Subheading>
 				<Text>{ 'Most recent results' }</Text>
 			</AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..3bf7f479f0051
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
@@ -0,0 +1,165 @@
+import { type JSX } from 'react';
+
+/**
+ * Protect Shield and Checkmark SVG Icon
+ *
+ * @param {object} props           - Component props.
+ * @param {string} props.variant   - Icon variant.
+ * @param {string} props.fill      - Icon fill color.
+ * @param {string} props.className - Additional class names.
+ * @param {number} props.height    - Icon height.
+ * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
+ */
+export default function ShieldIcon( {
+	variant = 'default',
+	height = 32,
+	className,
+	fill,
+}: {
+	variant:
+		| 'default'
+		| 'success'
+		| 'error'
+		| 'default-outline'
+		| 'success-outline'
+		| 'error-outline';
+	className?: string;
+	height?: number;
+	fill?: string;
+} ): JSX.Element {
+	if ( 'error-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
+					fill={ fill || '#D63638' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'error' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 123 ) / 150 }
+				viewBox="0 0 123 150"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
+					fill={ `#fff` }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 14 ) / 17 }
+				viewBox="0 0 14 17"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
+					fill={ fill || '#069E08' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 80 ) / 96 }
+				viewBox="0 0 80 96"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+					fill="white"
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'default-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || 'black' }
+				/>
+			</svg>
+		);
+	}
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 80 ) / 96 }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ fill || 'black' }
+			/>
+		</svg>
+	);
+}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d10365f4b0834
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ShieldIcon from '../index';
+
+export default {
+	title: 'Plugins/Protect/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		Story => (
+			<div style={ { height: '72px', width: '72px' } }>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [
+				'default',
+				'success',
+				'error',
+				'default-outline',
+				'success-outline',
+				'error-outline',
+			],
+		},
+		fill: {
+			control: 'color',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'default',
+};
+
+export const SuccessVariant = args => <ShieldIcon { ...args } />;
+SuccessVariant.args = {
+	variant: 'success',
+};
+
+export const ErrorVariant = args => <ShieldIcon { ...args } />;
+ErrorVariant.args = {
+	variant: 'error',
+};

From db7998dbbe0b890389dfbb692c6a1df89a2a6eb1 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Wed, 4 Dec 2024 20:26:54 -0700
Subject: [PATCH 108/143] Protect: Add ShieldIcon Component (#40402)

---
 .../components/changelog/add-shield-icon      |   4 +
 .../components/shield-icon/index.tsx          |  79 +++++++++
 .../shield-icon/stories/index.stories.tsx     |  54 ++++++
 projects/js-packages/components/index.ts      |   1 +
 .../protect/changelog/refactor-alert-icon     |   5 +
 .../components/admin-section-hero/index.tsx   |  20 ++-
 .../admin-section-hero/styles.module.scss     |   4 +-
 .../src/js/components/alert-icon/index.jsx    |  74 --------
 .../alert-icon/stories/index.stories.jsx      |  18 --
 .../components/alert-icon/styles.module.scss  |  11 --
 .../src/js/components/shield-icon/index.tsx   | 165 ------------------
 .../shield-icon/stories/index.stories.tsx     |  50 ------
 .../history/history-admin-section-hero.tsx    |   2 +-
 .../routes/scan/scan-admin-section-hero.tsx   |   2 +-
 14 files changed, 162 insertions(+), 327 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-shield-icon
 create mode 100644 projects/js-packages/components/components/shield-icon/index.tsx
 create mode 100644 projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
 create mode 100644 projects/plugins/protect/changelog/refactor-alert-icon
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/js-packages/components/changelog/add-shield-icon b/projects/js-packages/components/changelog/add-shield-icon
new file mode 100644
index 0000000000000..5c6cc27eeb809
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-shield-icon
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ShieldIcon component
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..fee9f4d70c463
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const COLORS = {
+	error: '#D63638',
+	warning: '#F0B849',
+	success: '#069E08',
+	default: '#1d2327',
+};
+
+/**
+ * Protect Shield SVG Icon
+ *
+ * @param {object}  props           - Component props.
+ * @param {string}  props.className - Additional class names.
+ * @param {string}  props.contrast  - Icon contrast color. Overrides variant.
+ * @param {string}  props.fill      - Icon fill color (default, success, warning, error, or a custom color code string). Overrides variant.
+ * @param {number}  props.height    - Icon height (px). Width is calculated based on height.
+ * @param {string}  props.icon      - Icon variant (success, error). Overrides variant.
+ * @param {boolean} props.outline   - When enabled, the icon will use an outline style.
+ * @param {string}  props.variant   - Icon variant (default, success, error).
+ *
+ * @return {React.ReactElement} Protect Shield SVG Icon
+ */
+export default function ShieldIcon( {
+	className,
+	contrast = '#fff',
+	fill,
+	height = 32,
+	icon,
+	outline = false,
+	variant = 'default',
+}: {
+	className?: string;
+	contrast?: string;
+	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	height?: number;
+	icon?: 'success' | 'error';
+	outline?: boolean;
+	variant: 'default' | 'success' | 'warning' | 'error';
+} ): JSX.Element {
+	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
+	const iconFill = outline ? shieldFill : contrast;
+	const iconVariant = icon || variant;
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 76 ) / 93 }
+			viewBox="0 0 76 93"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				d={
+					'M37.5652 0.980293L75.1304 18.0554V43.5097C75.1304 65.2086 61.1942 85.753 41.5427 92.2343C38.9604 93.0862 36.1701 93.0862 33.5878 92.2343C13.9362 85.753 0 65.2086 0 43.5097V18.0554L37.5652 0.980293Z' +
+					( outline
+						? ' M8.34783 23.4307V43.5097C8.34783 61.9471 20.286 79.0573 36.2024 84.3068C37.0866 84.5981 38.0438 84.5981 38.928 84.3068C54.8444 79.0573 66.7826 61.9471 66.7826 43.5097V23.4307L37.5652 10.15L8.34783 23.4307Z'
+						: '' )
+				}
+				fill={ shieldFill }
+			/>
+			{ 'success' === iconVariant && (
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M55.6042 37.0675L34.3578 65.2656L20.898 55.3892L23.878 51.4342L33.33 58.3698L51.5965 34.1267L55.6042 37.0675Z"
+					fill={ iconFill }
+				/>
+			) }
+			{ [ 'warning', 'error' ].includes( iconVariant ) && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+				/>
+			) }
+		</svg>
+	);
+}
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b5a16d4da4075
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,54 @@
+import ShieldIcon from '../index';
+
+export default {
+	title: 'JS Packages/Components/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'default', 'success', 'warning', 'error' ],
+		},
+		icon: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'success', 'error' ],
+		},
+		fill: {
+			control: 'color',
+		},
+		outline: {
+			control: 'boolean',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'success',
+	outline: false,
+};
+
+export const Variants = () => {
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" />
+				<ShieldIcon variant="success" />
+				<ShieldIcon variant="warning" />
+				<ShieldIcon variant="error" />
+			</div>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="success" outline />
+				<ShieldIcon variant="warning" outline />
+				<ShieldIcon variant="error" outline />
+			</div>
+		</div>
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index eb90df97ad5fe..4b0f3612012e7 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,6 +47,7 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
+export { default as ShieldIcon } from './components/shield-icon';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/changelog/refactor-alert-icon b/projects/plugins/protect/changelog/refactor-alert-icon
new file mode 100644
index 0000000000000..46b4c247b1b9f
--- /dev/null
+++ b/projects/plugins/protect/changelog/refactor-alert-icon
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Refactored icon component code.
+
+
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 758c8c21e0193..5ccf607698084 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,6 +1,9 @@
-import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
+import {
+	AdminSectionHero as JetpackAdminSectionHero,
+	H3,
+	ShieldIcon,
+} from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
-import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -12,7 +15,12 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
+	Heading: React.FC< {
+		children: React.ReactNode;
+		showIcon?: boolean;
+		variant?: 'default' | 'success' | 'error';
+		outline?: boolean;
+	} >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -53,8 +61,10 @@ AdminSectionHero.Heading = ( {
 			{ children }
 			{ showIcon && (
 				<ShieldIcon
-					variant={ `${ variant }-outline` }
-					fill="#1d2327"
+					height={ 38 }
+					variant={ variant }
+					outline
+					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
 			) }
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 5881bcd910045..a414aa9216f5c 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -13,7 +13,7 @@
 }
 
 .heading-icon {
-    margin-left: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
@@ -23,4 +23,4 @@
 
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
-}
\ No newline at end of file
+}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.jsx b/projects/plugins/protect/src/js/components/alert-icon/index.jsx
deleted file mode 100644
index 8a4d32da59553..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/index.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Path, SVG, Rect, G } from '@wordpress/components';
-import React from 'react';
-import styles from './styles.module.scss';
-
-/**
- * Alert icon
- *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
- * @return { React.ReactNode }      The Alert Icon component.
- */
-export default function AlertSVGIcon( { className, color = '#D63638' } ) {
-	return (
-		<div className={ styles.container }>
-			<SVG
-				className={ className }
-				width="127"
-				height="136"
-				viewBox="0 0 127 136"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<G filter="url(#filter0_d_2716_19567)">
-					<Path
-						fillRule="evenodd"
-						clipRule="evenodd"
-						d="M63.4061 36L86.8123 46.4057V61.9177C86.8123 75.141 78.1289 87.6611 65.8844 91.6107C64.2754 92.1298 62.5369 92.1297 60.9279 91.6107C48.6834 87.6611 40 75.141 40 61.9177V46.4057L63.4061 36Z"
-						fill={ color }
-					/>
-					<Rect x="59.8953" y="72.1666" width="7.02184" height="7" rx="3.5" fill="white" />
-					<Path
-						d="M59.9619 51.0626C59.9258 50.4868 60.383 50 60.9599 50H65.8524C66.4293 50 66.8866 50.4868 66.8505 51.0626L65.8056 67.7292C65.7725 68.2562 65.3355 68.6667 64.8075 68.6667H62.0048C61.4769 68.6667 61.0398 68.2562 61.0068 67.7292L59.9619 51.0626Z"
-						fill="white"
-					/>
-				</G>
-				<defs>
-					<filter
-						id="filter0_d_2716_19567"
-						x="0"
-						y="0"
-						width="126.812"
-						height="136"
-						filterUnits="userSpaceOnUse"
-						colorInterpolationFilters="sRGB"
-					>
-						<feFlood floodOpacity="0" result="BackgroundImageFix" />
-						<feColorMatrix
-							in="SourceAlpha"
-							type="matrix"
-							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-							result="hardAlpha"
-						/>
-						<feOffset dy="4" />
-						<feGaussianBlur stdDeviation="20" />
-						<feComposite in2="hardAlpha" operator="out" />
-						<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
-						<feBlend
-							mode="normal"
-							in2="BackgroundImageFix"
-							result="effect1_dropShadow_2716_19567"
-						/>
-						<feBlend
-							mode="normal"
-							in="SourceGraphic"
-							in2="effect1_dropShadow_2716_19567"
-							result="shape"
-						/>
-					</filter>
-				</defs>
-			</SVG>
-		</div>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
deleted file mode 100644
index 107e513394d42..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import AlertIcon from '../index.jsx';
-
-export default {
-	title: 'Plugins/Protect/Alert Icon',
-	component: AlertIcon,
-	argTypes: {
-		color: {
-			control: {
-				type: 'color',
-			},
-		},
-	},
-};
-
-const FooterTemplate = args => <AlertIcon { ...args } />;
-export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss b/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
deleted file mode 100644
index 938a62897f2a8..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-	width: 48px;
-	height: 56px;
-	margin-bottom: calc( var( --spacing-base ) * 8 ); // 64px
-
-	> svg {
-		position: relative;
-		top: -36px;
-		left: -40px;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
deleted file mode 100644
index 3bf7f479f0051..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @param {object} props           - Component props.
- * @param {string} props.variant   - Icon variant.
- * @param {string} props.fill      - Icon fill color.
- * @param {string} props.className - Additional class names.
- * @param {number} props.height    - Icon height.
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ShieldIcon( {
-	variant = 'default',
-	height = 32,
-	className,
-	fill,
-}: {
-	variant:
-		| 'default'
-		| 'success'
-		| 'error'
-		| 'default-outline'
-		| 'success-outline'
-		| 'error-outline';
-	className?: string;
-	height?: number;
-	fill?: string;
-} ): JSX.Element {
-	if ( 'error-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
-					fill={ fill || '#D63638' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'error' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 123 ) / 150 }
-				viewBox="0 0 123 150"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
-					fill={ `#fff` }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 14 ) / 17 }
-				viewBox="0 0 14 17"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
-					fill={ fill || '#069E08' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 80 ) / 96 }
-				viewBox="0 0 80 96"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-					fill="white"
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'default-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || 'black' }
-				/>
-			</svg>
-		);
-	}
-
-	return (
-		<svg
-			height={ height }
-			width={ ( height * 80 ) / 96 }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			className={ className }
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ fill || 'black' }
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
deleted file mode 100644
index d10365f4b0834..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ShieldIcon from '../index';
-
-export default {
-	title: 'Plugins/Protect/Sheild Icon',
-	component: ShieldIcon,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { height: '72px', width: '72px' } }>
-				<Story />
-			</div>
-		),
-	],
-	argTypes: {
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: [
-				'default',
-				'success',
-				'error',
-				'default-outline',
-				'success-outline',
-				'error-outline',
-			],
-		},
-		fill: {
-			control: 'color',
-		},
-	},
-};
-
-export const Default = args => <ShieldIcon { ...args } />;
-Default.args = {
-	variant: 'default',
-};
-
-export const SuccessVariant = args => <ShieldIcon { ...args } />;
-SuccessVariant.args = {
-	variant: 'success',
-};
-
-export const ErrorVariant = args => <ShieldIcon { ...args } />;
-ErrorVariant.args = {
-	variant: 'error',
-};
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 4aa517f5f120b..141c51cde284a 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => {
 							__( 'Most recent results', 'jetpack-protect' )
 						) }
 					</Text>
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant="success">
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
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 1c5cc6cac49b9..9e1b9c102a037 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
@@ -95,7 +95,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							anchor={ dailyScansPopoverAnchor }
 						/>
 					) }
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */

From 2d1181a669d8dedeb48bd83a14f4f8adc32188b1 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 5 Dec 2024 10:50:27 -0700
Subject: [PATCH 109/143] Protect: Integrate ThreatsDataViews Component
 (#40076)

---
 pnpm-lock.yaml                                |   3 +
 .../add-threat-subtitle-and-icon-utils        |   4 +
 projects/js-packages/scan/src/utils/index.ts  |  32 +-
 .../protect/changelog/add-threats-data-views  |   5 +
 projects/plugins/protect/package.json         |   1 +
 .../protect/src/class-scan-history.php        |  30 +-
 projects/plugins/protect/src/js/api.ts        |   3 +-
 .../src/js/components/admin-page/index.jsx    |  12 +-
 .../components/admin-page/styles.module.scss  |  11 +
 .../error-admin-section-hero/index.tsx        |   4 -
 .../js/components/fix-threat-modal/index.jsx  |   9 +-
 .../js/components/free-accordion/index.jsx    |  64 ----
 .../free-accordion/stories/index.stories.jsx  | 120 -------
 .../free-accordion/styles.module.scss         |  79 -----
 .../components/ignore-threat-modal/index.jsx  |  14 +-
 .../src/js/components/navigation/badge.jsx    | 101 ------
 .../src/js/components/navigation/group.jsx    |  51 ---
 .../src/js/components/navigation/index.jsx    |  73 -----
 .../src/js/components/navigation/item.jsx     |  85 -----
 .../src/js/components/navigation/label.jsx    |  24 --
 .../components/navigation/styles.module.scss  | 142 ---------
 .../navigation/use-menu-navigation.js         |  92 ------
 .../js/components/paid-accordion/index.jsx    | 192 -----------
 .../stories/broken/index.stories.jsx          | 120 -------
 .../paid-accordion/styles.module.scss         | 202 ------------
 .../src/js/components/pricing-table/index.jsx |   4 +-
 .../components/protect-check-icon/index.tsx   |  25 --
 .../js/components/scan-navigation/index.jsx   |  44 ---
 .../js/components/threat-fix-header/index.jsx |   7 +-
 .../src/js/components/threats-list/empty.jsx  | 140 --------
 .../js/components/threats-list/free-list.jsx  | 125 --------
 .../src/js/components/threats-list/index.jsx  | 194 -----------
 .../js/components/threats-list/navigation.jsx | 130 --------
 .../js/components/threats-list/pagination.jsx | 142 ---------
 .../js/components/threats-list/paid-list.jsx  | 253 ---------------
 .../threats-list/styles.module.scss           | 129 --------
 .../threats-list/use-threats-list.js          | 158 ---------
 .../unignore-threat-modal/index.jsx           |  18 +-
 .../src/js/hooks/use-protect-data/index.ts    | 173 ----------
 projects/plugins/protect/src/js/index.tsx     |   7 +-
 .../protect/src/js/routes/firewall/index.jsx  |   3 +-
 .../history/history-admin-section-hero.tsx    |  84 -----
 .../src/js/routes/scan/history/index.jsx      | 301 ------------------
 .../js/routes/scan/history/status-filters.jsx |  44 ---
 .../js/routes/scan/history/styles.module.scss |  37 ---
 .../protect/src/js/routes/scan/index.jsx      |  79 +++--
 .../src/js/routes/scan/onboarding-steps.jsx   |  61 ++--
 .../routes/scan/scan-admin-section-hero.tsx   | 138 ++++----
 .../src/js/routes/scan/scan-footer.jsx        | 143 ---------
 .../js/routes/scan/scan-results-data-view.tsx |  56 ++++
 .../scan/scanning-admin-section-hero.tsx      |  25 +-
 .../src/js/routes/scan/styles.module.scss     |  20 +-
 projects/plugins/protect/webpack.config.js    |  18 ++
 53 files changed, 363 insertions(+), 3668 deletions(-)
 create mode 100644 projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
 create mode 100644 projects/plugins/protect/changelog/add-threats-data-views
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/badge.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/group.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/item.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/label.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/scan-navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/empty.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/free-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/navigation.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/pagination.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
 delete mode 100644 projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37163dba4c345..61169e8234dc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4202,6 +4202,9 @@ importers:
         specifier: 6.2.2
         version: 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
+      '@automattic/babel-plugin-replace-textdomain':
+        specifier: workspace:*
+        version: link:../../js-packages/babel-plugin-replace-textdomain
       '@automattic/jetpack-webpack-config':
         specifier: workspace:*
         version: link:../../js-packages/webpack-config
diff --git a/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
new file mode 100644
index 0000000000000..ad8fa81458278
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add utilities for generating threat subtitle and icons
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 945cd0ecb7fa8..9e2e75bcd4d91 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -17,6 +17,36 @@ export const getThreatType = ( threat: Threat ) => {
 	return null;
 };
 
+export const getThreatIcon = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return 'wordpress-alt';
+		case 'plugin':
+			return 'plugins';
+		case 'theme':
+			return 'appearance';
+		case 'file':
+			return 'media-code';
+		default:
+			return 'shield-alt';
+	}
+};
+
+export const getThreatSubtitle = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
+		case 'plugin':
+			return __( 'Vulnerable Plugin', 'jetpack-scan' );
+		case 'theme':
+			return __( 'Vulnerable Theme', 'jetpack-scan' );
+		case 'file':
+			return __( 'File Threat', 'jetpack-scan' );
+		default:
+			return __( 'Threat', 'jetpack-scan' );
+	}
+};
+
 export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => {
 	const now = new Date();
 	const lastUpdated = new Date( lastUpdatedTimestamp );
@@ -123,7 +153,7 @@ export const getFixerDescription = ( threat: Threat ) => {
 			}
 			break;
 		case 'update':
-			if ( threat.fixedIn && threat.extension.name ) {
+			if ( threat.fixedIn && threat.extension?.name ) {
 				return sprintf(
 					/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
 					__( 'Update %1$s to version %2$s', 'jetpack-scan' ),
diff --git a/projects/plugins/protect/changelog/add-threats-data-views b/projects/plugins/protect/changelog/add-threats-data-views
new file mode 100644
index 0000000000000..e15bd6a461a71
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-threats-data-views
@@ -0,0 +1,5 @@
+Significance: minor
+Type: changed
+
+Added DataViews component for viewing scan results.
+
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
index 9d11e44dc60af..8708e2c101c9f 100644
--- a/projects/plugins/protect/package.json
+++ b/projects/plugins/protect/package.json
@@ -49,6 +49,7 @@
 		"react-router-dom": "6.2.2"
 	},
 	"devDependencies": {
+		"@automattic/babel-plugin-replace-textdomain": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.26.0",
 		"@babel/preset-env": "7.26.0",
diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php
index bd034c375caf9..8ea1dec7156e7 100644
--- a/projects/plugins/protect/src/class-scan-history.php
+++ b/projects/plugins/protect/src/class-scan-history.php
@@ -207,43 +207,19 @@ public static function fetch_from_api() {
 	 * Normalize API Data
 	 * Formats the payload from the Scan API into an instance of History_Model.
 	 *
-	 * @phan-suppress PhanDeprecatedProperty -- Maintaining backwards compatibility.
-	 *
 	 * @param object $scan_data The data returned by the scan API.
 	 * @return History_Model
 	 */
 	private static function normalize_api_data( $scan_data ) {
-		$history                      = new History_Model();
-		$history->num_threats         = 0;
-		$history->num_core_threats    = 0;
-		$history->num_plugins_threats = 0;
-		$history->num_themes_threats  = 0;
-
+		$history               = new History_Model();
 		$history->last_checked = $scan_data->last_checked;
 
 		if ( empty( $scan_data->threats ) || ! is_array( $scan_data->threats ) ) {
 			return $history;
 		}
 
-		foreach ( $scan_data->threats as $threat ) {
-			if ( isset( $threat->extension->type ) ) {
-				if ( 'plugin' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'plugin' );
-					continue;
-				}
-
-				if ( 'theme' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'theme' );
-					continue;
-				}
-			}
-
-			if ( 'Vulnerable.WP.Core' === $threat->signature ) {
-				self::handle_core_threats( $threat, $history );
-				continue;
-			}
-
-			self::handle_additional_threats( $threat, $history );
+		foreach ( $scan_data->threats as $source_threat ) {
+			$history->threats[] = new Threat_Model( $source_threat );
 		}
 
 		return $history;
diff --git a/projects/plugins/protect/src/js/api.ts b/projects/plugins/protect/src/js/api.ts
index 2b98a6164bf8b..97d11fd5c0f2b 100644
--- a/projects/plugins/protect/src/js/api.ts
+++ b/projects/plugins/protect/src/js/api.ts
@@ -1,6 +1,7 @@
-import { type FixersStatus, type ScanStatus, type WafStatus } from '@automattic/jetpack-scan';
+import { type FixersStatus, type ScanStatus } from '@automattic/jetpack-scan';
 import apiFetch from '@wordpress/api-fetch';
 import camelize from 'camelize';
+import { WafStatus } from './types/waf';
 
 const API = {
 	getWaf: (): Promise< WafStatus > =>
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 2d023560517f3..68f9359a9bd81 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -9,9 +9,9 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import useNotices from '../../hooks/use-notices';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
 import ScanButton from '../scan-button';
@@ -23,11 +23,7 @@ const AdminPage = ( { children } ) => {
 	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
 	const navigate = useNavigate();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-	} = useProtectData();
+	const { data: status } = useScanStatusQuery();
 	const location = useLocation();
 	const { hasPlan } = usePlan();
 
@@ -71,11 +67,11 @@ const AdminPage = ( { children } ) => {
 						link="/scan"
 						label={
 							<span className={ styles.tab }>
-								{ numThreats > 0
+								{ status.threats.length > 0
 									? sprintf(
 											// translators: %d is the number of threats found.
 											__( 'Scan (%d)', 'jetpack-protect' ),
-											numThreats
+											status.threats.length
 									  )
 									: __( 'Scan', 'jetpack-protect' ) }
 							</span>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adc0cee561ba5..da2e9510cd7d9 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -5,10 +5,21 @@
 .header {
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
+    align-items: center;
+
+    @media ( min-width: 600px ) {
+        flex-direction: row;
+    }
 
     &__scan_buttons {
         display: flex;
         gap: calc( var( --spacing-base ) * 3 ); // 24px
+
+        @media ( min-width: 600px ) {
+            flex-direction: row;
+        }
     }
 }
 
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 5214531dcf362..1a9bc87387fa9 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -2,7 +2,6 @@ import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
-import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
 interface ErrorAdminSectionHeroProps {
@@ -32,9 +31,6 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 					<AdminSectionHero.Subheading>
 						<Text>{ displayErrorMessage }</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			preserveSecondaryOnMobile={ false }
diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
index e1274e8e29a17..cbb49498c353f 100644
--- a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
@@ -7,7 +7,7 @@ import ThreatFixHeader from '../threat-fix-header';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
+const FixThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const { fixThreats, isLoading: isFixersLoading } = useFixers();
 
@@ -21,7 +21,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 	const handleFixClick = () => {
 		return async event => {
 			event.preventDefault();
-			await fixThreats( [ id ] );
+			await fixThreats( [ threat.id ] );
 			setModal( { type: null } );
 		};
 	};
@@ -37,10 +37,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 				</Text>
 
 				<div className={ styles.list }>
-					<ThreatFixHeader
-						threat={ { id, fixable, label, icon, severity } }
-						fixAllDialog={ false }
-					/>
+					<ThreatFixHeader threat={ threat } fixAllDialog={ false } />
 				</div>
 
 				<div className={ styles.footer }>
diff --git a/projects/plugins/protect/src/js/components/free-accordion/index.jsx b/projects/plugins/protect/src/js/components/free-accordion/index.jsx
deleted file mode 100644
index e801d9374fd33..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext } from 'react';
-import styles from './styles.module.scss';
-
-const FreeAccordionContext = React.createContext();
-
-export const FreeAccordionItem = ( { id, title, label, icon, children, onOpen } ) => {
-	const accordionData = useContext( FreeAccordionContext );
-	const open = accordionData?.open === id;
-	const setOpen = accordionData?.setOpen;
-
-	const bodyClassNames = clsx( styles[ 'accordion-body' ], {
-		[ styles[ 'accordion-body-open' ] ]: open,
-		[ styles[ 'accordion-body-close' ] ]: ! open,
-	} );
-
-	const handleClick = useCallback( () => {
-		if ( ! open ) {
-			onOpen?.();
-		}
-		setOpen( current => {
-			return current === id ? null : id;
-		} );
-	}, [ open, onOpen, setOpen, id ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ open ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-				</div>
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ open ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div className={ bodyClassNames } aria-hidden={ open ? 'false' : 'true' }>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const FreeAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<FreeAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</FreeAccordionContext.Provider>
-	);
-};
-
-export default FreeAccordion;
diff --git a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
deleted file mode 100644
index 43ad41e2501eb..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import FreeAccordion, { FreeAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Free Accordion',
-	component: FreeAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<FreeAccordion>
-		<FreeAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-	</FreeAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
deleted file mode 100644
index 5278f6eff39f4..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.accordion {
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/8;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
index 7e8113b6f38ab..0788eb8bd7a41 100644
--- a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
@@ -1,16 +1,18 @@
 import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import useIgnoreThreatMutation from '../../data/scan/use-ignore-threat-mutation';
 import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const IgnoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const ignoreThreatMutation = useIgnoreThreatMutation();
 	const codeableURL = getRedirectUrl( 'jetpack-protect-codeable-referral' );
+	const icon = getThreatIcon( threat );
 
 	const [ isIgnoring, setIsIgnoring ] = useState( false );
 
@@ -25,7 +27,7 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		return async event => {
 			event.preventDefault();
 			setIsIgnoring( true );
-			await ignoreThreatMutation.mutateAsync( id );
+			await ignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsIgnoring( false );
 		};
@@ -42,12 +44,12 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/components/navigation/badge.jsx b/projects/plugins/protect/src/js/components/navigation/badge.jsx
deleted file mode 100644
index 93ebecf7235ef..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/badge.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover, Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, check, info } from '@wordpress/icons';
-import PropTypes from 'prop-types';
-import React, { useState, useCallback, useMemo } from 'react';
-import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
-import styles from './styles.module.scss';
-
-/**
- * Gets the Badge element
- *
- * @param {number}  count   - The number of threats found for this item.
- * @param {boolean} checked - Whether this item was checked for threats yet.
- * @return {object} The badge element
- */
-const getBadgeElement = ( count, checked ) => {
-	if ( ! checked ) {
-		return {
-			popoverText: __(
-				'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
-				'jetpack-protect'
-			),
-			badgeElement: (
-				<Icon icon={ info } size={ 28 } className={ styles[ 'navigation-item-info-badge' ] } />
-			),
-		};
-	}
-
-	if ( count === 0 ) {
-		return {
-			popoverText: __( 'No known threats found to affect this version', 'jetpack-protect' ),
-			badgeElement: (
-				<Icon icon={ check } size={ 28 } className={ styles[ 'navigation-item-check-badge' ] } />
-			),
-		};
-	}
-
-	return {
-		popoverText: null,
-		badgeElement: (
-			<Text
-				variant="body-extra-small"
-				className={ styles[ 'navigation-item-badge' ] }
-				component="div"
-			>
-				{ count }
-			</Text>
-		),
-	};
-};
-
-const ItemBadge = ( { count, checked } ) => {
-	const { data: status } = useScanStatusQuery();
-
-	const { popoverText, badgeElement } = getBadgeElement( count, checked );
-	const [ showPopover, setShowPopover ] = useState( false );
-
-	const inProgress = useMemo( () => isScanInProgress( status ), [ status ] );
-
-	const handleEnter = useCallback( () => {
-		if ( inProgress ) {
-			return;
-		}
-
-		setShowPopover( true );
-	}, [ inProgress ] );
-
-	const handleOut = useCallback( () => {
-		setShowPopover( false );
-	}, [] );
-
-	return (
-		<div
-			onMouseLeave={ popoverText ? handleOut : null }
-			onMouseEnter={ popoverText ? handleEnter : null }
-			onClick={ popoverText ? handleEnter : null }
-			onFocus={ popoverText ? handleEnter : null }
-			onBlur={ popoverText ? handleOut : null }
-			role="presentation"
-		>
-			{ ! inProgress ? badgeElement : <Spinner /> }
-			{ showPopover && (
-				<Popover noArrow={ false } inline={ true }>
-					<Text variant="body-small" className={ styles[ 'popover-text' ] }>
-						{ popoverText }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-ItemBadge.propTypes = {
-	/* The number of threats found for this item */
-	count: PropTypes.number,
-	/* Whether this item was checked for threats yet */
-	checked: PropTypes.bool,
-};
-
-export default ItemBadge;
diff --git a/projects/plugins/protect/src/js/components/navigation/group.jsx b/projects/plugins/protect/src/js/components/navigation/group.jsx
deleted file mode 100644
index 9352ae5c63d67..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/group.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useState, useCallback, useContext } from 'react';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const MAX_ITEMS = 8;
-
-const NavigationGroup = ( { icon, label, children } ) => {
-	const [ collapsed, setCollapsed ] = useState( true );
-	const { mode } = useContext( NavigationContext );
-	const needsTruncate =
-		Array.isArray( children ) && children?.length >= MAX_ITEMS && mode === 'list';
-	const content = needsTruncate && collapsed ? children.slice( 0, MAX_ITEMS ) : children;
-	const totalHideItems = needsTruncate ? children?.length - MAX_ITEMS : 0;
-
-	const handleCollapsedToggle = useCallback( () => {
-		setCollapsed( current => ! current );
-	}, [] );
-
-	return (
-		<li tabIndex={ -1 } role="menuitem" className={ styles[ 'navigation-group' ] }>
-			<ItemLabel icon={ icon } className={ styles[ 'navigation-group-label' ] }>
-				{ label }
-			</ItemLabel>
-			<div className={ styles[ 'navigation-group-list' ] }>
-				<ul className={ styles[ 'navigation-group-content' ] }>{ content }</ul>
-				{ needsTruncate && (
-					<div className={ styles[ 'navigation-group-truncate' ] }>
-						<Button variant="link" onClick={ handleCollapsedToggle }>
-							{ collapsed
-								? sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Show %s more', 'jetpack-protect' ),
-										totalHideItems
-								  )
-								: sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Hide %s items', 'jetpack-protect' ),
-										totalHideItems
-								  ) }
-						</Button>
-					</div>
-				) }
-			</div>
-		</li>
-	);
-};
-
-export default NavigationGroup;
diff --git a/projects/plugins/protect/src/js/components/navigation/index.jsx b/projects/plugins/protect/src/js/components/navigation/index.jsx
deleted file mode 100644
index bd30dfbdad964..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/index.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import React, { useState, useRef, useCallback } from 'react';
-import NavigationGroup from './group';
-import NavigationItem from './item';
-import styles from './styles.module.scss';
-import useMenuNavigation, { NavigationContext } from './use-menu-navigation';
-
-const NavigationList = ( { children } ) => (
-	<ul className={ styles.navigation } role="menu">
-		{ children }
-	</ul>
-);
-
-const NavigationDropdown = ( { children, data } ) => {
-	const ref = useRef( undefined );
-	const [ listOpen, setListOpen ] = useState( false );
-	const item = data?.items?.find( navItem => navItem?.id === data?.selectedItem ) ?? {
-		label: __( 'See all results', 'jetpack-protect' ),
-	};
-	const { label, icon } = item;
-
-	const handleOpen = useCallback( () => {
-		setListOpen( open => ! open );
-	}, [] );
-
-	return (
-		<button className={ styles[ 'navigation-dropdown-button' ] } onClick={ handleOpen } ref={ ref }>
-			<div className={ styles[ 'navigation-dropdown-label' ] }>
-				{ icon && <Icon icon={ icon } className={ styles[ 'navigation-dropdown-icon' ] } /> }
-				<Text>{ label }</Text>
-			</div>
-			<Icon icon={ listOpen ? chevronUp : chevronDown } size={ 32 } />
-			<Popover position="bottom center" anchorRef={ ref?.current } inline={ true }>
-				<div
-					style={ {
-						display: listOpen ? 'block' : 'none',
-						width: ref?.current?.getBoundingClientRect?.()?.width,
-					} }
-				>
-					{ children }
-				</div>
-			</Popover>
-		</button>
-	);
-};
-
-const getNavigationComponent = mode => {
-	switch ( mode ) {
-		case 'list':
-			return NavigationList;
-		case 'dropdown':
-			return NavigationDropdown;
-		default:
-			return NavigationList;
-	}
-};
-
-const Navigation = ( { children, selected, onSelect, mode = 'list' } ) => {
-	const data = useMenuNavigation( { selected, onSelect } );
-	const Component = getNavigationComponent( mode );
-
-	return (
-		<NavigationContext.Provider value={ { ...data, mode } }>
-			<Component data={ data }>{ children }</Component>
-		</NavigationContext.Provider>
-	);
-};
-
-export default Navigation;
-export { NavigationItem, NavigationGroup };
diff --git a/projects/plugins/protect/src/js/components/navigation/item.jsx b/projects/plugins/protect/src/js/components/navigation/item.jsx
deleted file mode 100644
index d902625c3997d..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/item.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import clsx from 'clsx';
-import React, { useContext, useEffect, useCallback } from 'react';
-import ItemBadge from './badge';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const NavigationItem = ( {
-	id,
-	label,
-	icon,
-	badge,
-	disabled,
-	onClick,
-	onKeyDown,
-	onFocus,
-	checked,
-} ) => {
-	const context = useContext( NavigationContext );
-
-	const selected = context?.selectedItem === id;
-	const registerItem = context?.registerItem;
-	const registerRef = context?.registerRef;
-	const handleClickItem = context?.handleClickItem;
-	const handleKeyDownItem = context?.handleKeyDownItem;
-	const handleFocusItem = context?.handleFocusItem;
-
-	const wrapperClassName = clsx( styles[ 'navigation-item' ], {
-		[ styles.clickable ]: ! disabled,
-		[ styles.selected ]: selected,
-	} );
-
-	const handleClick = useCallback(
-		evt => {
-			onClick?.( evt );
-			handleClickItem?.( id );
-		},
-		[ handleClickItem, id, onClick ]
-	);
-
-	const handleKeyDown = useCallback(
-		evt => {
-			onKeyDown?.( evt );
-			handleKeyDownItem?.( evt );
-		},
-		[ handleKeyDownItem, onKeyDown ]
-	);
-
-	const handleRef = useCallback(
-		ref => {
-			registerRef( ref, id );
-		},
-		[ registerRef, id ]
-	);
-
-	const handleFocus = useCallback(
-		evt => {
-			onFocus?.( evt );
-			handleFocusItem?.( id );
-		},
-		[ handleFocusItem, id, onFocus ]
-	);
-
-	useEffect( () => {
-		registerItem( { id, disabled, label, icon } );
-		// eslint-disable-next-line
-	}, [] );
-
-	return (
-		<li
-			className={ wrapperClassName }
-			onClick={ disabled ? null : handleClick }
-			onKeyDown={ handleKeyDown }
-			onFocus={ disabled ? null : handleFocus }
-			role="menuitem"
-			tabIndex={ disabled ? -1 : 0 }
-			ref={ handleRef }
-		>
-			<ItemLabel icon={ icon }>{ label }</ItemLabel>
-			<ItemBadge count={ badge } checked={ checked } />
-		</li>
-	);
-};
-
-export default NavigationItem;
diff --git a/projects/plugins/protect/src/js/components/navigation/label.jsx b/projects/plugins/protect/src/js/components/navigation/label.jsx
deleted file mode 100644
index 8f075caae020a..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/label.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon } from '@wordpress/icons';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './styles.module.scss';
-
-const ItemLabel = ( { icon, children, className } ) => {
-	return (
-		<Text className={ clsx( styles[ 'navigation-item-label' ], className ) }>
-			{ icon && <Icon icon={ icon } className={ styles[ 'navigation-item-icon' ] } size={ 28 } /> }
-			<span className={ styles[ 'navigation-item-label-content' ] }>{ children }</span>
-		</Text>
-	);
-};
-
-ItemLabel.propTypes = {
-	/* An icon that will be rendered before text */
-	icon: PropTypes.node,
-	/* Label text that will be rendered */
-	children: PropTypes.node.isRequired,
-};
-
-export default ItemLabel;
diff --git a/projects/plugins/protect/src/js/components/navigation/styles.module.scss b/projects/plugins/protect/src/js/components/navigation/styles.module.scss
deleted file mode 100644
index df9e3ef1f8a25..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/styles.module.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-.navigation {
-	background-color: var( --jp-white );
-	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
-	border-radius: var( --jp-border-radius );
-	margin: 0;
-}
-
-.navigation-item {
-	display: flex;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	text-align: left;
-
-	// Clickable State
-	&.clickable {
-		cursor: pointer;
-		outline-color: var( --jp-black );
-
-		// Focus/Hover State
-		&:hover:not(.selected),
-		&:focus:not(.selected) {
-			background-color: var( --jp-gray-0 );
-		}
-	}
-
-	// Selected State
-	&.selected {
-		background-color: var( --jp-black );
-
-		& .navigation-item-label {
-			color: var( --jp-white )
-		}
-
-		& .navigation-item-icon {
-			fill: var( --jp-white );
-		}
-
-		& .navigation-item-badge {
-			border: 1px solid var( --jp-red );
-			background-color: var( --jp-red );
-			color: var( --jp-white );
-		}
-	}
-
-	// CHILDRENS
-
-	// .navigation-item-label
-	&-label {
-		display: flex;
-		align-items: center;
-		padding-right: var( --spacing-base ); // 8px
-		overflow-x: hidden;
-	}
-
-	// .navigation-item-label-content
-	&-label-text {
-		display: block;
-		overflow-x: hidden;
-		text-overflow: ellipsis;
-	}
-
-	// .navigation-item-icon
-	&-icon {
-		margin-right: calc( var( --spacing-base ) * 2); // 16px
-	}
-
-	// .navigation-item-badge
-	&-badge {
-		border: 1px solid var( --jp-red-60 );
-		color: var( --jp-red-60 );
-		border-radius: 50%;
-		padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
-		min-width: 30px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-	}
-
-	&-check-badge {
-		fill: var( --jp-green-50 );
-	}
-
-	&-info-badge {
-		fill: var( --jp-gray-20 );
-	}
-}
-
-.navigation-group {
-	--icon-size: 28px;
-	--item-spacing: calc( var( --spacing-base ) * 2 ); // 16px
-	--left-spacing: calc( var( --icon-size ) + var( --item-spacing ) ); // 28px + 16px
-
-	list-style: none;
-
-	&-label {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-
-	&-content {
-		padding: 0;
-	}
-
-	&-list {
-		margin-left: var( --left-spacing ) ;
-	}
-
-	&-truncate {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		display: flex;
-		justify-content: flex-start;
-	}
-}
-
-.popover-text {
-	width: 250px;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.navigation-dropdown {
-	&-button {
-		display: flex;
-		border: 1px solid var( --jp-gray-10 );
-		border-radius: var( --jp-border-radius );
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		background-color: var( --jp-white );
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	&-label {
-		display: flex;
-		justify-content: flex-start;
-	}
-
-	&-icon {
-		margin-right: var( --spacing-base ); // 8px
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js b/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
deleted file mode 100644
index 2972dac06b572..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-
-export const NavigationContext = React.createContext();
-
-const useMenuNavigation = ( { selected, onSelect } ) => {
-	const [ items, setItems ] = useState( [] );
-	const [ refs, setRef ] = useState( [] );
-	const [ focusedItem, setFocusedItem ] = useState();
-
-	const handleClickItem = id => {
-		onSelect( id );
-	};
-
-	const handleFocusItem = id => {
-		setFocusedItem( id );
-	};
-
-	const getPrevItem = ( current, last ) => {
-		const startMinusOne = current - 1;
-		const prevIndex = startMinusOne < 0 ? last : startMinusOne;
-		const prevItem = items[ prevIndex ];
-		return prevItem?.disabled ? getPrevItem( prevIndex, last ) : prevItem;
-	};
-
-	const getNextItem = ( current, last ) => {
-		const startPlusOne = current + 1;
-		const nextIndex = startPlusOne > last ? 0 : startPlusOne;
-		const nextItem = items[ nextIndex ];
-		return nextItem?.disabled ? getNextItem( nextIndex, last ) : nextItem;
-	};
-
-	const handleKeyDownItem = input => {
-		const code = input?.code;
-		const current = items.findIndex( item => item?.id === selected );
-		const lastIndex = items.length - 1;
-
-		let nextId;
-
-		if ( code === 'ArrowUp' ) {
-			const prevItem = getPrevItem( current, lastIndex );
-			nextId = prevItem?.id;
-		} else if ( code === 'ArrowDown' ) {
-			const nextItem = getNextItem( current, lastIndex );
-			nextId = nextItem?.id;
-		} else if ( ( code === 'Enter' || code === 'Space' ) && focusedItem ) {
-			nextId = focusedItem;
-		}
-
-		if ( nextId ) {
-			const element = refs[ nextId ];
-			element?.focus();
-			onSelect( nextId );
-		}
-	};
-
-	const registerRef = ( ref, id ) => {
-		setRef( allRefs => {
-			if ( ! allRefs[ id ] && ref ) {
-				return { ...allRefs, [ id ]: ref };
-			}
-			return allRefs;
-		} );
-	};
-
-	const registerItem = data => {
-		setItems( allItems => {
-			const newItems = [ ...allItems ];
-			const id = data?.id;
-			const currentIdx = newItems.findIndex( item => item?.id === id );
-
-			if ( currentIdx >= 0 ) {
-				newItems[ currentIdx ] = data;
-			} else {
-				newItems.push( data );
-			}
-
-			return newItems;
-		} );
-	};
-
-	return {
-		selectedItem: selected,
-		handleClickItem,
-		handleKeyDownItem,
-		handleFocusItem,
-		registerRef,
-		registerItem,
-		items,
-	};
-};
-
-export default useMenuNavigation;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
deleted file mode 100644
index c733ff1f0a08c..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
-	IconTooltip,
-	Spinner,
-	Text,
-	ThreatSeverityBadge,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { ExternalLink } from '@wordpress/components';
-import { dateI18n } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext, useMemo } from 'react';
-import { PAID_PLUGIN_SUPPORT_URL } from '../../constants';
-import useFixers from '../../hooks/use-fixers';
-import styles from './styles.module.scss';
-
-// Extract context provider for clarity and reusability
-const PaidAccordionContext = React.createContext();
-
-// Component for displaying threat dates
-const ScanHistoryDetails = ( { firstDetected, fixedOn, status } ) => {
-	const statusText = useMemo( () => {
-		if ( status === 'fixed' ) {
-			return sprintf(
-				/* translators: %s: Fixed on date */
-				__( 'Threat fixed %s', 'jetpack-protect' ),
-				dateI18n( 'M j, Y', fixedOn )
-			);
-		}
-		if ( status === 'ignored' ) {
-			return __( 'Threat ignored', 'jetpack-protect' );
-		}
-		return null;
-	}, [ status, fixedOn ] );
-
-	return (
-		firstDetected && (
-			<>
-				<Text className={ styles[ 'accordion-header-status' ] }>
-					{ sprintf(
-						/* translators: %s: First detected date */
-						__( 'Threat found %s', 'jetpack-protect' ),
-						dateI18n( 'M j, Y', firstDetected )
-					) }
-					{ statusText && (
-						<>
-							<span className={ styles[ 'accordion-header-status-separator' ] }></span>
-							<span className={ styles[ `is-${ status }` ] }>{ statusText }</span>
-						</>
-					) }
-				</Text>
-				{ [ 'fixed', 'ignored' ].includes( status ) && <StatusBadge status={ status } /> }
-			</>
-		)
-	);
-};
-
-// Badge for displaying the status (fixed or ignored)
-const StatusBadge = ( { status } ) => (
-	<div className={ `${ styles[ 'status-badge' ] } ${ styles[ status ] }` }>
-		{ status === 'fixed'
-			? __( 'Fixed', 'jetpack-protect' )
-			: __( 'Ignored', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 ) }
-	</div>
-);
-
-const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => {
-	if ( isStaleFixInProgress ) {
-		return (
-			<IconTooltip
-				className={ styles[ 'icon-tooltip' ] }
-				iconClassName={ styles[ 'icon-tooltip__icon' ] }
-				iconSize={ 20 }
-				placement={ 'top' }
-				hoverShow={ true }
-			>
-				<Text className={ styles[ 'icon-tooltip__content' ] }>
-					{ createInterpolateElement(
-						__(
-							'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
-							'jetpack-protect'
-						),
-						{
-							supportLink: (
-								<ExternalLink
-									className={ styles[ 'support-link' ] }
-									href={ PAID_PLUGIN_SUPPORT_URL }
-								/>
-							),
-						}
-					) }
-				</Text>
-			</IconTooltip>
-		);
-	}
-
-	if ( isActiveFixInProgress ) {
-		return <Spinner color="black" />;
-	}
-
-	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
-};
-
-export const PaidAccordionItem = ( {
-	id,
-	title,
-	label,
-	icon,
-	fixable,
-	severity,
-	children,
-	firstDetected,
-	fixedOn,
-	onOpen,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { open, setOpen } = useContext( PaidAccordionContext );
-	const isOpen = open === id;
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-
-	const handleClick = useCallback( () => {
-		if ( ! isOpen ) {
-			onOpen?.();
-		}
-		setOpen( current => ( current === id ? null : id ) );
-	}, [ isOpen, onOpen, setOpen, id ] );
-
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ isOpen ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-					{ [ 'fixed', 'ignored' ].includes( status ) && (
-						<ScanHistoryDetails
-							firstDetected={ firstDetected }
-							fixedOn={ fixedOn }
-							status={ status }
-						/>
-					) }
-				</div>
-				<div>
-					<ThreatSeverityBadge severity={ severity } />
-				</div>
-				{ ! hideAutoFixColumn && fixable && (
-					<div>
-						{ renderFixerStatus( isThreatFixInProgress( id ), isThreatFixStale( id ) ) }
-						{ isSmall && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					</div>
-				) }
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ isOpen ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div
-				className={ clsx( styles[ 'accordion-body' ], {
-					[ styles[ 'accordion-body-open' ] ]: isOpen,
-					[ styles[ 'accordion-body-close' ] ]: ! isOpen,
-				} ) }
-				aria-hidden={ ! isOpen }
-			>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const PaidAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<PaidAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</PaidAccordionContext.Provider>
-	);
-};
-
-export default PaidAccordion;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx b/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
deleted file mode 100644
index 252f22b2bad77..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import PaidAccordion, { PaidAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Paid Accordion',
-	component: PaidAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<PaidAccordion>
-		<PaidAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-	</PaidAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
deleted file mode 100644
index 8304942b206d4..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.accordion {
-	display: inline-block;
-	width: 100%;
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/7;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	>:not( :first-child ) {
-		margin: auto;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status {
-	font-size: var( --font-body-small );
-	font-weight: normal;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status-separator {
-	display: inline-block;
-	height: 4px;
-	margin: 2px 12px;
-	width: 4px;
-	background-color: var( --jp-gray-50 );
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
-
-.icon-check {
-	fill: var( --jp-green-40 );
-}
-
-.status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	position: relative;
-	text-align: center;
-	width: 60px;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-
-	&.fixed {
-		color: var( --jp-white );
-		background-color: #008a20;
-	}
-
-	&.ignored {
-		color: var( --jp-white );
-		background-color: var( --jp-gray-50 );
-	}
-}
-
-.is-fixed {
-	color: #008a20;
-}
-
-.support-link {
-	color: inherit;
-
-	&:focus,
-	&:hover {
-		color: inherit;
-		box-shadow: none;
-	}
-}
-
-.icon-tooltip {
-    max-height: 20px;
-    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-
-    &__icon {
-        color: var( --jp-red );
-    }
-
-    &__content {
-        color: var( --jp-gray-70 );
-        font-weight: 400;
-        line-height: 24px;
-    }
-}
-
-@media ( max-width: 599px ) {
-	.accordion-header {
-		display: grid;
-		grid-auto-rows: minmax( auto, auto );
-
-		>:first-child {
-			grid-column: 1/8;
-		 	grid-row: 1;
-		}
-
-		>:nth-child( 2 ) {
-			padding-left: calc( var( --spacing-base ) * 4 ); // 32px
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) {
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) span {
-			position: absolute;
-			margin-top: var( --spacing-base ); // 8px
-		}
-
-		>:last-child {
-			grid-column: 10;
-			grid-row: 1/3;
-		}
-	}
-
-	.status-badge {
-		display: none;
-	}
-}
-
-@media ( max-width: 1200px ) {
-	.accordion-header-status {
-		display: grid;
-	}
-
-	.accordion-header-status-separator {
-		display: none;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 3edd7911a0b6a..0f857430d92d8 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -11,9 +11,9 @@ import { __ } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useConnectSiteMutation from '../../data/use-connection-mutation';
+import useProductDataQuery from '../../data/use-product-data-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 
 /**
  * Product Detail component.
@@ -30,7 +30,7 @@ const ConnectedPricingTable = () => {
 	} );
 
 	// Access paid protect product data
-	const { jetpackScan } = useProtectData();
+	const { data: jetpackScan } = useProductDataQuery();
 	const { pricingForUi } = jetpackScan;
 	const { introductoryOffer, currencyCode: currency = 'USD' } = pricingForUi;
 
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
deleted file mode 100644
index d1100d8ce6d5e..0000000000000
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ProtectCheck(): JSX.Element {
-	return (
-		<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill="#069E08"
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx b/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
deleted file mode 100644
index e626b6af066c7..0000000000000
--- a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usePlan from '../../hooks/use-plan';
-import ButtonGroup from '../button-group';
-
-/**
- * Navigation for scan sections.
- *
- * @return {React.Element} The React Component.
- */
-export default function ScanNavigation() {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const { hasPlan } = usePlan();
-
-	const viewingScanPage = location.pathname === '/scan';
-	const viewingHistoryPage = location.pathname.includes( '/scan/history' );
-	const navigateToScanPage = useCallback( () => navigate( '/scan' ), [ navigate ] );
-	const navigateToHistoryPage = useCallback( () => navigate( '/scan/history' ), [ navigate ] );
-
-	if ( ! hasPlan || ( ! viewingScanPage && ! viewingHistoryPage ) ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ButtonGroup>
-				<ButtonGroup.Button
-					variant={ viewingScanPage ? 'primary' : 'secondary' }
-					onClick={ navigateToScanPage }
-				>
-					{ __( 'Scanner', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-				<ButtonGroup.Button
-					variant={ viewingHistoryPage ? 'primary' : 'secondary' }
-					onClick={ navigateToHistoryPage }
-				>
-					{ __( 'History', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-			</ButtonGroup>
-		</>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
index bc5e0107cea80..45a8524e60b59 100644
--- a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
+++ b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
@@ -1,6 +1,7 @@
 import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import React, { useState, useCallback } from 'react';
 import styles from './styles.module.scss';
 
@@ -65,10 +66,10 @@ export default function ThreatFixHeader( { threat, fixAllDialog, onCheckFix } )
 	return (
 		<>
 			<div className={ styles.threat }>
-				<Icon icon={ threat.icon } className={ styles.threat__icon } />
+				<Icon icon={ getThreatIcon( threat ) } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ threat.label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
 					<Text className={ styles.threat__summary__title }>
 						{ getFixerMessage( threat.fixable ) }
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
deleted file mode 100644
index 2d493b11e64a4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-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';
-import ScanButton from '../scan-button';
-import styles from './styles.module.scss';
-
-const ProtectCheck = () => (
-	<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-			fill="#069E08"
-		/>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-			fill="white"
-		/>
-	</svg>
-);
-
-/**
- * Time Since
- *
- * @param {string} date - The past date to compare to the current date.
- * @return {string} - A description of the amount of time between a date and now, i.e. "5 minutes ago".
- */
-const timeSince = date => {
-	const now = new Date();
-	const offset = now.getTimezoneOffset() * 60000;
-
-	const seconds = Math.floor( ( new Date( now.getTime() + offset ).getTime() - date ) / 1000 );
-
-	let interval = seconds / 31536000; // 364 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of years i.e. "5 years ago".
-			_n( '%s year ago', '%s years ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 2592000; // 30 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of months i.e. "5 months ago".
-			_n( '%s month ago', '%s months ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 86400; // 1 day
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of days i.e. "5 days ago".
-			_n( '%s day ago', '%s days ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 3600; // 1 hour
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of hours i.e. "5 hours ago".
-			_n( '%s hour ago', '%s hours ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 60; // 1 minute
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of minutes i.e. "5 minutes ago".
-			_n( '%s minute ago', '%s minutes ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	return __( 'a few seconds ago', 'jetpack-protect' );
-};
-
-const EmptyList = () => {
-	const { lastChecked } = useProtectData();
-	const { hasPlan } = usePlan();
-	const { data: status } = useScanStatusQuery();
-
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const timeSinceLastScan = useMemo( () => {
-		return lastChecked ? timeSince( Date.parse( lastChecked ) ) : null;
-	}, [ lastChecked ] );
-
-	return (
-		<div className={ styles.empty }>
-			<ProtectCheck />
-			<H3 weight="bold" mt={ 8 }>
-				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-			</H3>
-			<Text mb={ 4 }>
-				{ timeSinceLastScan
-					? createInterpolateElement(
-							sprintf(
-								// translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago".
-								__(
-									'The last Protect scan ran <strong>%s</strong> and everything looked great.',
-									'jetpack-protect'
-								),
-								timeSinceLastScan
-							),
-							{
-								strong: <strong />,
-							}
-					  )
-					: __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) }
-			</Text>
-			{ hasPlan && (
-				<>
-					<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-					{ ! isScanInProgress( status ) && (
-						<OnboardingPopover
-							id="paid-daily-and-manual-scans"
-							position={ 'bottom middle' }
-							anchor={ dailyAndManualScansPopoverAnchor }
-						/>
-					) }
-				</>
-			) }
-		</div>
-	);
-};
-
-export default EmptyList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx b/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
deleted file mode 100644
index 88d4a92f9bac5..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Text, Button, ContextualUpgradeTrigger } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import FreeAccordion, { FreeAccordionItem } from '../free-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	description,
-	fixedIn,
-	icon,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-} ) => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { upgradePlan } = usePlan();
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_threat_list_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	return (
-		<FreeAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'What is the problem?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ fixedIn && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-					<ContextualUpgradeTrigger
-						description={ __(
-							'Looking for advanced scan results and one-click fixes?',
-							'jetpack-protect'
-						) }
-						cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-						onClick={ getScan }
-						className={ styles[ 'threat-item-cta' ] }
-					/>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-		</FreeAccordionItem>
-	);
-};
-
-const FreeList = ( { list } ) => {
-	return (
-		<Pagination list={ list }>
-			{ ( { currentItems } ) => (
-				<FreeAccordion>
-					{ currentItems.map(
-						( {
-							description,
-							fixedIn,
-							icon,
-							id,
-							label,
-							name,
-							source,
-							table,
-							title,
-							type,
-							version,
-						} ) => (
-							<ThreatAccordionItem
-								description={ description }
-								fixedIn={ fixedIn }
-								icon={ icon }
-								id={ id }
-								label={ label }
-								key={ id }
-								name={ name }
-								source={ source }
-								table={ table }
-								title={ title }
-								type={ type }
-								version={ version }
-							/>
-						)
-					) }
-				</FreeAccordion>
-			) }
-		</Pagination>
-	);
-};
-
-export default FreeList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx
deleted file mode 100644
index 2823a804c1412..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/index.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import {
-	Container,
-	Col,
-	Title,
-	Button,
-	useBreakpointMatch,
-	Text,
-} 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';
-import OnboardingPopover from '../onboarding-popover';
-import ScanButton from '../scan-button';
-import EmptyList from './empty';
-import FreeList from './free-list';
-import ThreatsNavigation from './navigation';
-import PaidList from './paid-list';
-import styles from './styles.module.scss';
-import useThreatsList from './use-threats-list';
-
-const ThreatsList = () => {
-	const { hasPlan } = usePlan();
-	const { item, list, selected, setSelected } = useThreatsList();
-	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 => {
-			const threatId = parseInt( threat.id );
-			return (
-				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
-			);
-		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
-
-	// Popover anchors
-	const [ yourScanResultsPopoverAnchor, setYourScanResultsPopoverAnchor ] = useState( null );
-	const [ understandSeverityPopoverAnchor, setUnderstandSeverityPopoverAnchor ] = useState( null );
-	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const { setModal } = useModal();
-
-	const handleShowAutoFixersClick = threatList => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_ALL_THREATS',
-				props: { threatList },
-			} );
-		};
-	};
-
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					return __( 'All threats', 'jetpack-protect' );
-				}
-				return sprintf(
-					/* translators: placeholder is the amount of threats found on the site. */
-					__( 'All %s threats', 'jetpack-protect' ),
-					list.length
-				);
-			case 'core':
-				return sprintf(
-					/* translators: placeholder is the amount of WordPress threats found on the site. */
-					__( '%1$s WordPress %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'files':
-				return sprintf(
-					/* translators: placeholder is the amount of file threats found on the site. */
-					__( '%1$s file %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'database':
-				return sprintf(
-					/* translators: placeholder is the amount of database threats found on the site. */
-					__( '%1$s database %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			default:
-				return sprintf(
-					/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-					__( '%1$s %2$s in %3$s %4$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats',
-					item?.name,
-					item?.version
-				);
-		}
-	}, [ selected, list, item ] );
-
-	return (
-		<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-			<Col lg={ 4 }>
-				<div ref={ setYourScanResultsPopoverAnchor }>
-					<ThreatsNavigation selected={ selected } onSelect={ setSelected } />
-				</div>
-				{ ! scanning && (
-					<OnboardingPopover
-						id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
-						position="top"
-						anchor={ yourScanResultsPopoverAnchor }
-					/>
-				) }
-			</Col>
-			<Col lg={ 8 }>
-				{ list?.length > 0 ? (
-					<>
-						<div className={ styles[ 'list-header' ] }>
-							<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-							{ hasPlan && (
-								<div className={ styles[ 'list-header__controls' ] }>
-									{ fixableList.length > 0 && (
-										<>
-											<Button
-												ref={ setShowAutoFixersPopoverAnchor }
-												variant="primary"
-												onClick={ handleShowAutoFixersClick( fixableList ) }
-											>
-												{ sprintf(
-													/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-													__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-													fixableList.length
-												) }
-											</Button>
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-fix-all-threats"
-													position={ isSm ? 'bottom right' : 'middle left' }
-													anchor={ showAutoFixersPopoverAnchor }
-												/>
-											) }
-											<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-daily-and-manual-scans"
-													position={ isSm ? 'bottom left' : 'middle left' }
-													anchor={ dailyAndManualScansPopoverAnchor }
-												/>
-											) }
-										</>
-									) }
-								</div>
-							) }
-						</div>
-						{ hasPlan ? (
-							<>
-								<div ref={ setUnderstandSeverityPopoverAnchor }>
-									<PaidList list={ list } />
-									<div className={ styles[ 'manual-scan' ] }>
-										<Text variant="body-small" mb={ 4 }>
-											{ __(
-												'If you have manually fixed any of the threats listed above, you can run a manual scan now or wait for Jetpack to scan your site later today.',
-												'jetpack-protect'
-											) }
-										</Text>
-										<ScanButton />
-									</div>
-								</div>
-								{ ! scanning && (
-									<OnboardingPopover
-										id="paid-understand-severity"
-										position="top"
-										anchor={ understandSeverityPopoverAnchor }
-									/>
-								) }
-							</>
-						) : (
-							<FreeList list={ list } />
-						) }
-					</>
-				) : (
-					<EmptyList />
-				) }
-			</Col>
-		</Container>
-	);
-};
-
-export default ThreatsList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx b/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
deleted file mode 100644
index 9befe85a78612..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useBreakpointMatch } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
-import {
-	wordpress as coreIcon,
-	plugins as pluginsIcon,
-	warning as warningIcon,
-	color as themesIcon,
-	code as filesIcon,
-} from '@wordpress/icons';
-import { useCallback, useMemo } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
-import Navigation, { NavigationItem, NavigationGroup } from '../navigation';
-
-const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFilter = 'all' } ) => {
-	const { hasPlan } = usePlan();
-	const {
-		results: { plugins, themes },
-		counts: {
-			current: { threats: numThreats, core: numCoreThreats, files: numFilesThreats },
-		},
-	} = useProtectData( { sourceType, filter: { status: statusFilter } } );
-
-	const { recordEvent } = useAnalyticsTracks();
-	const [ isSmallOrLarge ] = useBreakpointMatch( 'lg', '<' );
-
-	const trackNavigationClickAll = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_all_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickCore = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_core_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickPlugin = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_plugin_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickTheme = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_theme_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickFiles = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_file_click' );
-	}, [ recordEvent ] );
-
-	const allLabel = useMemo( () => {
-		if ( statusFilter === 'fixed' ) {
-			return __( 'All fixed threats', 'jetpack-protect' );
-		}
-		if ( statusFilter === 'ignored' ) {
-			return __(
-				'All ignored threats',
-				'jetpack-protect',
-				/** dummy arg to avoid bad minification */ 0
-			);
-		}
-		return __( 'All threats', 'jetpack-protect' );
-	}, [ statusFilter ] );
-
-	return (
-		<Navigation
-			selected={ selected }
-			onSelect={ onSelect }
-			mode={ isSmallOrLarge ? 'dropdown' : 'list' }
-		>
-			<NavigationItem
-				initial
-				id="all"
-				label={ allLabel }
-				icon={ warningIcon }
-				badge={ numThreats }
-				disabled={ numThreats <= 0 }
-				onClick={ trackNavigationClickAll }
-				checked={ true }
-			/>
-			<NavigationItem
-				id="core"
-				label={ __( 'WordPress', 'jetpack-protect' ) }
-				icon={ coreIcon }
-				badge={ numCoreThreats }
-				disabled={ numCoreThreats <= 0 }
-				onClick={ trackNavigationClickCore }
-				checked={ true }
-			/>
-			<NavigationGroup label={ __( 'Plugins', 'jetpack-protect' ) } icon={ pluginsIcon }>
-				{ plugins.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickPlugin }
-					/>
-				) ) }
-			</NavigationGroup>
-			<NavigationGroup label={ __( 'Themes', 'jetpack-protect' ) } icon={ themesIcon }>
-				{ themes.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickTheme }
-					/>
-				) ) }
-			</NavigationGroup>
-			{ hasPlan && (
-				<>
-					<NavigationItem
-						id="files"
-						label={ __( 'Files', 'jetpack-protect' ) }
-						icon={ filesIcon }
-						badge={ numFilesThreats }
-						disabled={ numFilesThreats <= 0 }
-						onClick={ trackNavigationClickFiles }
-						checked={ true }
-					/>
-				</>
-			) }
-		</Navigation>
-	);
-};
-
-export default ThreatsNavigation;
diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
deleted file mode 100644
index 3e17bed0eeac4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import React, { useCallback, useState, useMemo } from 'react';
-import styles from './styles.module.scss';
-
-const PaginationButton = ( { pageNumber, currentPage, onPageChange } ) => {
-	const isCurrentPage = useMemo( () => currentPage === pageNumber, [ currentPage, pageNumber ] );
-
-	const handleClick = useCallback( () => {
-		onPageChange( pageNumber );
-	}, [ onPageChange, pageNumber ] );
-
-	return (
-		<Button
-			size={ 'medium' }
-			className={ ! isCurrentPage ? styles.unfocused : null }
-			onClick={ handleClick }
-			aria-current={ isCurrentPage ? 'page' : undefined }
-			aria-label={ sprintf(
-				/* translators: placeholder is a page number, i.e. "Page 123" */
-				__( 'Page %d', 'jetpack-protect' ),
-				pageNumber
-			) }
-		>
-			{ pageNumber }
-		</Button>
-	);
-};
-
-const Pagination = ( { list, itemPerPage = 10, children } ) => {
-	const [ isSm ] = useBreakpointMatch( 'sm' );
-
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-
-	const handlePreviousPageClick = useCallback(
-		() => setCurrentPage( currentPage - 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-	const handleNextPageClick = useCallback(
-		() => setCurrentPage( currentPage + 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-
-	const totalPages = useMemo( () => Math.ceil( list.length / itemPerPage ), [ list, itemPerPage ] );
-
-	const currentItems = useMemo( () => {
-		const indexOfLastItem = currentPage * itemPerPage;
-		const indexOfFirstItem = indexOfLastItem - itemPerPage;
-		return list.slice( indexOfFirstItem, indexOfLastItem );
-	}, [ currentPage, list, itemPerPage ] );
-
-	const pageNumbers = useMemo( () => {
-		if ( isSm ) {
-			return [ currentPage ];
-		}
-
-		const result = [ 1 ];
-		if ( currentPage > 3 && totalPages > 4 ) {
-			result.push( '…' );
-		}
-
-		if ( currentPage === 1 ) {
-			// Current page is the first page.
-			// i.e. [ 1 ] 2 3 4 ... 10
-			result.push( currentPage + 1, currentPage + 2, currentPage + 3 );
-		} else if ( currentPage === 2 ) {
-			// Current page is the second to first page.
-			// i.e. 1 [ 2 ] 3 4 ... 10
-			result.push( currentPage, currentPage + 1, currentPage + 2 );
-		} else if ( currentPage < totalPages - 1 ) {
-			// Current page is positioned in the middle of the pagination.
-			// i.e. 1 ... 3 [ 4 ] 5 ... 10
-			result.push( currentPage - 1, currentPage, currentPage + 1 );
-		} else if ( currentPage === totalPages - 1 ) {
-			// Current page is the second to last page.
-			// i.e. 1 ... 7 8 [ 9 ] 10
-			currentPage > 3 && result.push( currentPage - 2 );
-			currentPage > 2 && result.push( currentPage - 1 );
-			result.push( currentPage );
-		} else if ( currentPage === totalPages ) {
-			// Current page is the last page.
-			// i.e. 1 ... 7 8 9 [ 10 ]
-			currentPage >= 5 && result.push( currentPage - 3 );
-			currentPage >= 4 && result.push( currentPage - 2 );
-			result.push( currentPage - 1 );
-		}
-
-		if ( result[ result.length - 1 ] < totalPages - 1 ) {
-			result.push( '…' );
-			result.push( totalPages );
-		} else if ( result[ result.length - 1 ] < totalPages ) {
-			result.push( totalPages );
-		}
-
-		return result.filter( pageNumber => pageNumber <= totalPages || isNaN( pageNumber ) );
-	}, [ currentPage, isSm, totalPages ] );
-
-	return (
-		<>
-			{ children( { currentItems } ) }
-			{ totalPages > 1 && (
-				<nav
-					role="navigation"
-					aria-label={ __( 'Threat list pages', 'jetpack-protect' ) }
-					className={ styles[ 'pagination-container' ] }
-				>
-					<Button
-						onClick={ handlePreviousPageClick }
-						disabled={ currentPage === 1 }
-						variant={ 'link' }
-						icon={ chevronLeft }
-						iconSize={ 24 }
-						aria-label={ __( 'Previous page', 'jetpack-protect' ) }
-					/>
-					{ pageNumbers.map( ( pageNumber, index ) =>
-						typeof pageNumber === 'number' ? (
-							<PaginationButton
-								key={ pageNumber }
-								pageNumber={ pageNumber }
-								currentPage={ currentPage }
-								onPageChange={ setCurrentPage }
-							/>
-						) : (
-							<span key={ `ellipses_${ index }` }>{ pageNumber }</span>
-						)
-					) }
-					<Button
-						onClick={ handleNextPageClick }
-						disabled={ currentPage === totalPages }
-						variant={ 'link' }
-						icon={ chevronRight }
-						iconSize={ 24 }
-						aria-label={ __( 'Next page', 'jetpack-protect' ) }
-					/>
-				</nav>
-			) }
-		</>
-	);
-};
-
-export default Pagination;
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
deleted file mode 100644
index baedf8dfa5184..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import {
-	Text,
-	Button,
-	DiffViewer,
-	MarkedLines,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import useFixers from '../../hooks/use-fixers';
-import useModal from '../../hooks/use-modal';
-import PaidAccordion, { PaidAccordionItem } from '../paid-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	context,
-	description,
-	diff,
-	filename,
-	firstDetected,
-	fixedIn,
-	fixedOn,
-	icon,
-	fixable,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-	severity,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { setModal } = useModal();
-	const { recordEvent } = useAnalyticsTracks();
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const isActiveFixInProgress = isThreatFixInProgress( id );
-	const isStaleFixInProgress = isThreatFixStale( id );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	const handleIgnoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'IGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleUnignoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'UNIGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleFixThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_THREAT',
-				props: { id, fixable, label, icon, severity },
-			} );
-		};
-	};
-
-	return (
-		<PaidAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			fixable={ fixable }
-			severity={ severity }
-			firstDetected={ firstDetected }
-			fixedOn={ fixedOn }
-			status={ status }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme', 'file', 'database' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-			hideAutoFixColumn={ hideAutoFixColumn }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ status !== 'fixed'
-							? __( 'What is the problem?', 'jetpack-protect' )
-							: __(
-									'What was the problem?',
-									'jetpack-protect',
-									/** dummy arg to avoid bad minification */ 0
-							  ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ ( filename || context || diff ) && (
-				<Text variant="title-small" mb={ 2 }>
-					{ __( 'The technical details', 'jetpack-protect' ) }
-				</Text>
-			) }
-			{ filename && (
-				<>
-					<Text mb={ 2 }>
-						{
-							/* translators: filename follows in separate line; e.g. "PHP.Injection.5 in: `post.php`" */
-							__( 'Threat found in file:', 'jetpack-protect' )
-						}
-					</Text>
-					<pre className={ styles[ 'threat-filename' ] }>{ filename }</pre>
-				</>
-			) }
-			{ context && <MarkedLines context={ context } /> }
-			{ diff && <DiffViewer diff={ diff } /> }
-			{ fixedIn && status !== 'fixed' && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-			{ [ 'ignored', 'current' ].includes( status ) && (
-				<div className={ styles[ 'threat-footer' ] }>
-					{ 'ignored' === status && (
-						<Button
-							isDestructive={ true }
-							variant="secondary"
-							onClick={ handleUnignoreThreatClick() }
-						>
-							{ __( 'Unignore threat', 'jetpack-protect' ) }
-						</Button>
-					) }
-					{ 'current' === status && (
-						<>
-							<Button
-								isDestructive={ true }
-								variant="secondary"
-								onClick={ handleIgnoreThreatClick() }
-								disabled={ isActiveFixInProgress || isStaleFixInProgress }
-							>
-								{ __( 'Ignore threat', 'jetpack-protect' ) }
-							</Button>
-							{ fixable && (
-								<Button
-									disabled={ isActiveFixInProgress || isStaleFixInProgress }
-									onClick={ handleFixThreatClick() }
-								>
-									{ __( 'Fix threat', 'jetpack-protect' ) }
-								</Button>
-							) }
-						</>
-					) }
-				</div>
-			) }
-		</PaidAccordionItem>
-	);
-};
-
-const PaidList = ( { list, hideAutoFixColumn = false } ) => {
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<>
-			{ ! isSmall && (
-				<div className={ styles[ 'accordion-header' ] }>
-					<span>{ __( 'Details', 'jetpack-protect' ) }</span>
-					<span>{ __( 'Severity', 'jetpack-protect' ) }</span>
-					{ ! hideAutoFixColumn && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					<span></span>
-				</div>
-			) }
-			<Pagination list={ list }>
-				{ ( { currentItems } ) => (
-					<PaidAccordion>
-						{ currentItems.map(
-							( {
-								context,
-								description,
-								diff,
-								filename,
-								firstDetected,
-								fixedIn,
-								fixedOn,
-								icon,
-								fixable,
-								id,
-								label,
-								name,
-								severity,
-								source,
-								table,
-								title,
-								type,
-								version,
-								status,
-							} ) => (
-								<ThreatAccordionItem
-									context={ context }
-									description={ description }
-									diff={ diff }
-									filename={ filename }
-									firstDetected={ firstDetected }
-									fixedIn={ fixedIn }
-									fixedOn={ fixedOn }
-									icon={ icon }
-									fixable={ fixable }
-									id={ id }
-									key={ id }
-									label={ label }
-									name={ name }
-									severity={ severity }
-									source={ source }
-									table={ table }
-									title={ title }
-									type={ type }
-									version={ version }
-									status={ status }
-									hideAutoFixColumn={ hideAutoFixColumn }
-								/>
-							)
-						) }
-					</PaidAccordion>
-				) }
-			</Pagination>
-		</>
-	);
-};
-
-export default PaidList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
deleted file mode 100644
index 4a50d87b2562b..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.threat-section + .threat-section {
-	margin-top: calc( var( --spacing-base ) * 5 ); // 40px
-}
-
-.threat-filename {
-	background-color: var( --jp-gray-0 );
-	padding: calc( var( --spacing-base ) * 3 ); // 24px
-	overflow-x: scroll;
-}
-
-.threat-footer {
-	display: flex;
-	justify-content: flex-end;
-	border-top: 1px solid var( --jp-gray );
-	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-}
-.threat-item-cta {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 36px
-}
-
-.list-header {
-	display: flex;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.threat-footer {
-	width: 100%;
-	display: flex;
-	justify-content: right;
-	padding-top: calc( var( --spacing-base ) * 4 ); // 32px
-	border-top: 1px solid var( --jp-gray );
-
-	> :last-child {
-		margin-left: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-}
-
-.accordion-header {
-	display: grid;
-	grid-template-columns: repeat( 9, 1fr );
-	background-color: white;
-	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ); // 16px | 24px
-	border: 1px solid var( --jp-gray );
-	border-bottom: none;
-	color: var( --jp-gray-50 );
-	width: 100%;
-
-	> span:first-child {
-		grid-column: 1 / 7;
-	}
-
-	> span:not( :first-child ) {
-		text-align: center;
-	}
-}
-
-.manual-scan {
-	margin: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 8 ); // 32px | 64px
-	text-align: center;
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-
-	.threat-footer {
-		justify-content: center;
-
-		> * {
-			width: 50%;
-		}
-	}
-}
-
-.pagination-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 4px;
-	margin-top: calc( var( --spacing-base ) * 4 ); // 24px
-	margin-bottom: calc(var(--spacing-base) * 2); // 16px
-
-	button {
-		font-size: var( --font-body );
-		width: auto;
-		height: auto;
-		padding: 0 var( --spacing-base ); // 0 | 8px
-		line-height: 32px;
-		min-width: 32px;
-
-		&.unfocused {
-			color: var( --jp-black );
-			background: none;
-	
-			&:hover:not(:disabled) {
-				color: var( --jp-black );
-				background: none;
-			}
-		}
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js b/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
deleted file mode 100644
index de000288251ae..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import {
-	plugins as pluginsIcon,
-	wordpress as coreIcon,
-	color as themesIcon,
-	code as filesIcon,
-	grid as databaseIcon,
-} from '@wordpress/icons';
-import { useEffect, useMemo, useState } from 'react';
-import useProtectData from '../../hooks/use-protect-data';
-
-const sortThreats = ( a, b ) => b.severity - a.severity;
-
-/**
- * Flatten threats data
- *
- * Merges threat category data with each threat it contains, plus any additional data provided.
- *
- * @param {object} data    - The threat category data, i.e. "core", "plugins", "themes", etc.
- * @param {object} newData - Additional data to add to each threat.
- * @return {object[]} Array of threats with additional properties from the threat category and function argument.
- */
-const flattenThreats = ( data, newData ) => {
-	// If "data" is an empty object
-	if ( typeof data === 'object' && Object.keys( data ).length === 0 ) {
-		return [];
-	}
-
-	// If "data" has multiple entries, recursively flatten each one.
-	if ( Array.isArray( data ) ) {
-		return data.map( extension => flattenThreats( extension, newData ) ).flat();
-	}
-
-	// Merge the threat category data with each threat it contains, plus any additional data provided.
-	return data?.threats.map( threat => ( {
-		...threat,
-		...data,
-		...newData,
-	} ) );
-};
-
-/**
- * Threats List Hook
- *
- * @param    {object}   args        - Arguments for the hook.
- * @param    {string}   args.source - "scan" or "history".
- * @param    {string}   args.status - "all", "fixed", or "ignored".
- *                                  ---
- * @typedef {object} UseThreatsList
- * @property {object}   item        - The selected threat category.
- * @property {object[]} list        - The list of threats to display.
- * @property {string}   selected    - The selected threat category.
- * @property {Function} setSelected - Sets the selected threat category.
- *                                  ---
- * @return {UseThreatsList} useThreatsList hook.
- */
-const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' } ) => {
-	const [ selected, setSelected ] = useState( 'all' );
-	const {
-		results: { plugins, themes, core, files, database },
-	} = useProtectData( {
-		sourceType: source,
-		filter: { status, key: selected },
-	} );
-
-	const { unsortedList, item } = useMemo( () => {
-		// If a specific threat category is selected, filter for and flatten the category's threats.
-		if ( selected && selected !== 'all' ) {
-			// Core, files, and database data threats are already grouped together,
-			// so we just need to flatten them and add the appropriate icon.
-			switch ( selected ) {
-				case 'core':
-					return {
-						unsortedList: flattenThreats( core, { icon: coreIcon } ),
-						item: core,
-					};
-				case 'files':
-					return {
-						unsortedList: flattenThreats( { threats: files }, { icon: filesIcon } ),
-						item: files,
-					};
-				case 'database':
-					return {
-						unsortedList: flattenThreats( { threats: database }, { icon: databaseIcon } ),
-						item: database,
-					};
-				default:
-					break;
-			}
-
-			// Extensions (i.e. plugins and themes) have entries for each individual extension,
-			// so we need to check for a matching threat in each extension.
-			const selectedPlugin = plugins.find( plugin => plugin?.name === selected );
-			if ( selectedPlugin ) {
-				return {
-					unsortedList: flattenThreats( selectedPlugin, { icon: pluginsIcon } ),
-					item: selectedPlugin,
-				};
-			}
-			const selectedTheme = themes.find( theme => theme?.name === selected );
-			if ( selectedTheme ) {
-				return {
-					unsortedList: flattenThreats( selectedTheme, { icon: themesIcon } ),
-					item: selectedTheme,
-				};
-			}
-		}
-
-		// Otherwise, return all threats.
-		return {
-			unsortedList: [
-				...flattenThreats( core, { icon: coreIcon } ),
-				...flattenThreats( plugins, { icon: pluginsIcon } ),
-				...flattenThreats( themes, { icon: themesIcon } ),
-				...flattenThreats( { threats: files }, { icon: filesIcon } ),
-				...flattenThreats( { threats: database }, { icon: databaseIcon } ),
-			],
-			item: null,
-		};
-	}, [ core, database, files, plugins, selected, themes ] );
-
-	const getLabel = threat => {
-		if ( threat.name && threat.version ) {
-			// Extension threat i.e. "Woocommerce (3.0.0)"
-			return `${ threat.name } (${ threat.version })`;
-		}
-
-		if ( threat.filename ) {
-			// File threat i.e. "index.php"
-			return threat.filename.split( '/' ).pop();
-		}
-
-		if ( threat.table ) {
-			// Database threat i.e. "wp_posts"
-			return threat.table;
-		}
-	};
-
-	const list = useMemo( () => {
-		return unsortedList
-			.sort( sortThreats )
-			.map( threat => ( { label: getLabel( threat ), ...threat } ) );
-	}, [ unsortedList ] );
-
-	useEffect( () => {
-		if ( selected !== 'all' && status !== 'all' && list.length === 0 ) {
-			setSelected( 'all' );
-		}
-	}, [ selected, status, item, list ] );
-
-	return {
-		item,
-		list,
-		selected,
-		setSelected,
-	};
-};
-
-export default useThreatsList;
diff --git a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
index 81f1eabb27d5b..7f1ef3652bb85 100644
--- a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
@@ -1,4 +1,5 @@
 import { Button, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useState } from 'react';
@@ -7,9 +8,14 @@ import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const UnignoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
+
+	const icon = getThreatIcon( threat );
+
+	const [ isUnignoring, setIsUnignoring ] = useState( false );
 	const unignoreThreatMutation = useUnIgnoreThreatMutation();
+
 	const handleCancelClick = () => {
 		return event => {
 			event.preventDefault();
@@ -17,13 +23,11 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		};
 	};
 
-	const [ isUnignoring, setIsUnignoring ] = useState( false );
-
 	const handleUnignoreClick = () => {
 		return async event => {
 			event.preventDefault();
 			setIsUnignoring( true );
-			await unignoreThreatMutation.mutateAsync( id );
+			await unignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsUnignoring( false );
 		};
@@ -40,12 +44,12 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
deleted file mode 100644
index 2338d306e6780..0000000000000
--- a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { type ExtensionStatus, type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import useHistoryQuery from '../../data/scan/use-history-query';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
-import useProductDataQuery from '../../data/use-product-data-query';
-
-type ThreatFilterKey = 'all' | 'core' | 'files' | 'database' | string;
-
-type Filter = { key: ThreatFilterKey; status: ThreatStatus | 'all' };
-
-// Valid "key" values for filtering.
-const KEY_FILTERS = [ 'all', 'core', 'plugins', 'themes', 'files', 'database' ];
-
-/**
- * Filter Extension Threats
- *
- * @param {Array}  threats       - The threats to filter.
- * @param {object} filter        - The filter to apply to the data.
- * @param {string} filter.status - The status to filter: 'all', 'current', 'fixed', or 'ignored'.
- * @param {string} filter.key    - The key to filter: 'all', 'core', 'files', 'database', or an extension name.
- * @param {string} key           - The threat's key: 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {Array} The filtered threats.
- */
-const filterThreats = ( threats: Threat[], filter: Filter, key: ThreatFilterKey ): Threat[] => {
-	if ( ! Array.isArray( threats ) ) {
-		return [];
-	}
-
-	return threats.filter( threat => {
-		if ( filter.status && filter.status !== 'all' && threat.status !== filter.status ) {
-			return false;
-		}
-		if ( filter.key && filter.key !== 'all' && filter.key !== key ) {
-			return false;
-		}
-		return true;
-	} );
-};
-
-/**
- * Get parsed data from the initial state
- *
- * @param {object} options            - The options to use when getting the data.
- * @param {string} options.sourceType - 'scan' or 'history'.
- * @param {object} options.filter     - The filter to apply to the data.
- *                                    _param {string} options.filter.status - 'all', 'fixed', or 'ignored'.
- *                                    _param {string} options.filter.key    - 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {object} The information available in Protect's initial state.
- */
-export default function useProtectData(
-	{ sourceType, filter } = {
-		sourceType: 'scan',
-		filter: { status: null, key: null },
-	}
-) {
-	const { data: status } = useScanStatusQuery();
-	const { data: scanHistory } = useHistoryQuery();
-	const { data: jetpackScan } = useProductDataQuery();
-
-	const { counts, results, error, lastChecked, hasUncheckedItems } = useMemo( () => {
-		// This hook can provide data from two sources: the current scan or the scan history.
-		const data = sourceType === 'history' ? { ...scanHistory } : { ...status };
-
-		// Prepare the result object.
-		const result = {
-			results: {
-				core: [],
-				plugins: [],
-				themes: [],
-				files: [],
-				database: [],
-			},
-			counts: {
-				all: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-				current: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-			},
-			error: null,
-			lastChecked: data.lastChecked || null,
-			hasUncheckedItems: data.hasUncheckedItems || false,
-		};
-
-		// Loop through the provided extensions, and update the result object.
-		const processExtensions = ( extensions: Array< ExtensionStatus >, key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( extensions ) ) {
-				return [];
-			}
-			extensions.forEach( extension => {
-				// Update the total counts.
-				result.counts.all[ key ] += extension?.threats?.length || 0;
-				result.counts.all.threats += extension?.threats?.length || 0;
-
-				// Filter the extension's threats based on the current filters.
-				const filteredThreats = filterThreats(
-					extension?.threats || [],
-					filter,
-					KEY_FILTERS.includes( filter.key ) ? key : extension?.name
-				);
-
-				// Update the result object with the extension and its filtered threats.
-				result.results[ key ].push( { ...extension, threats: filteredThreats } );
-
-				// Update the current counts.
-				result.counts.current[ key ] += filteredThreats.length;
-				result.counts.current.threats += filteredThreats.length;
-			} );
-		};
-
-		// Loop through the provided threats, and update the result object.
-		const processThreats = ( threatsToProcess: Threat[], key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( threatsToProcess ) ) {
-				return [];
-			}
-
-			result.counts.all[ key ] += threatsToProcess.length;
-			result.counts.all.threats += threatsToProcess.length;
-
-			const filteredThreats = filterThreats( threatsToProcess, filter, key );
-
-			result.results[ key ] = [ ...result.results[ key ], ...filteredThreats ];
-			result.counts.current[ key ] += filteredThreats.length;
-			result.counts.current.threats += filteredThreats.length;
-		};
-
-		// Core data may be either a single object or an array of multiple objects.
-		let cores = Array.isArray( data.core ) ? data.core : [];
-		if ( data?.core?.threats ) {
-			cores = [ data.core ];
-		}
-
-		// Process the data
-		processExtensions( cores, 'core' );
-		processExtensions( data?.plugins, 'plugins' );
-		processExtensions( data?.themes, 'themes' );
-		processThreats( data?.files, 'files' );
-		processThreats( data?.database, 'database' );
-
-		// Handle errors
-		if ( data.error ) {
-			result.error = {
-				message: data.errorMessage || __( 'An error occurred.', 'jetpack-protect' ),
-				code: data.errorCode || 500,
-			};
-		}
-
-		return result;
-	}, [ scanHistory, sourceType, status, filter ] );
-
-	return {
-		results,
-		counts,
-		error,
-		lastChecked,
-		hasUncheckedItems,
-		jetpackScan,
-	};
-}
diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx
index b8983d65bb836..2b91f4b090b92 100644
--- a/projects/plugins/protect/src/js/index.tsx
+++ b/projects/plugins/protect/src/js/index.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as WPElement from '@wordpress/element';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { HashRouter, Routes, Route, useLocation, Navigate } from 'react-router-dom';
 import Modal from './components/modal';
 import PaidPlanGate from './components/paid-plan-gate';
@@ -12,7 +12,6 @@ import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
 import ScanRoute from './routes/scan';
-import ScanHistoryRoute from './routes/scan/history';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
 
@@ -62,7 +61,7 @@ function render() {
 											path="/scan/history"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
@@ -70,7 +69,7 @@ function render() {
 											path="/scan/history/:filter"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 53af919b17f78..52ec1333bd958 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -22,7 +22,6 @@ import useWafUpgradeSeenMutation from '../../data/waf/use-waf-upgrade-seen-mutat
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
-import ScanFooter from '../scan/scan-footer';
 import FirewallAdminSectionHero from './firewall-admin-section-hero';
 import FirewallFooter from './firewall-footer';
 import styles from './styles.module.scss';
@@ -597,7 +596,7 @@ const FirewallPage = () => {
 					</div>
 				</Col>
 			</Container>
-			{ wafSupported ? <FirewallFooter /> : <ScanFooter /> }
+			{ wafSupported && <FirewallFooter /> }
 		</AdminPage>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
deleted file mode 100644
index 141c51cde284a..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { dateI18n } from '@wordpress/date';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import AdminSectionHero from '../../../components/admin-section-hero';
-import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useProtectData from '../../../hooks/use-protect-data';
-import styles from './styles.module.scss';
-
-const HistoryAdminSectionHero: React.FC = () => {
-	const { filter = 'all' } = useParams();
-	const { list } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const oldestFirstDetected = useMemo( () => {
-		if ( ! list.length ) {
-			return null;
-		}
-
-		return list.reduce( ( oldest, current ) => {
-			return new Date( current.firstDetected ) < new Date( oldest.firstDetected )
-				? current
-				: oldest;
-		} ).firstDetected;
-	}, [ list ] );
-
-	if ( error ) {
-		return (
-			<ErrorAdminSectionHero
-				baseErrorMessage={ __( 'We are having problems loading your history.', 'jetpack-protect' ) }
-				errorMessage={ error?.message }
-				errorCode={ error?.code }
-			/>
-		);
-	}
-
-	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Text>
-						{ oldestFirstDetected ? (
-							<span className={ styles[ 'subheading-content' ] }>
-								{ sprintf(
-									/* translators: %s: Oldest first detected date */
-									__( '%s - Today', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-								) }
-							</span>
-						) : (
-							__( 'Most recent results', 'jetpack-protect' )
-						) }
-					</Text>
-					<AdminSectionHero.Heading showIcon variant="success">
-						{ numAllThreats > 0
-							? sprintf(
-									/* translators: %s: Total number of threats  */
-									__( '%1$s previous %2$s', 'jetpack-protect' ),
-									numAllThreats,
-									numAllThreats === 1 ? 'threat' : 'threats'
-							  )
-							: __( 'No previous threats', 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<Text>
-							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
-						</Text>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-		/>
-	);
-};
-
-export default HistoryAdminSectionHero;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
deleted file mode 100644
index 723f9de9ab230..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useCallback } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
-import AdminPage from '../../../components/admin-page';
-import ProtectCheck from '../../../components/protect-check-icon';
-import ThreatsNavigation from '../../../components/threats-list/navigation';
-import PaidList from '../../../components/threats-list/paid-list';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useAnalyticsTracks from '../../../hooks/use-analytics-tracks';
-import usePlan from '../../../hooks/use-plan';
-import useProtectData from '../../../hooks/use-protect-data';
-import ScanFooter from '../scan-footer';
-import HistoryAdminSectionHero from './history-admin-section-hero';
-import StatusFilters from './status-filters';
-import styles from './styles.module.scss';
-
-const ScanHistoryRoute = () => {
-	// Track page view.
-	useAnalyticsTracks( { pageViewEventName: 'protect_scan_history' } );
-
-	const { hasPlan } = usePlan();
-	const { filter = 'all' } = useParams();
-
-	const { item, list, selected, setSelected } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const { counts: fixedCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'fixed', key: selected },
-	} );
-	const { threats: numFixed } = fixedCounts.current;
-
-	const { counts: ignoredCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'ignored', key: selected },
-	} );
-	const { threats: numIgnored } = ignoredCounts.current;
-
-	/**
-	 * Get the title for the threats list based on the selected filters and the amount of threats.
-	 */
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					switch ( filter ) {
-						case 'fixed':
-							return __( 'All fixed threats', 'jetpack-protect' );
-						case 'ignored':
-							return __(
-								'All ignored threats',
-								'jetpack-protect',
-								/** dummy arg to avoid bad minification */ 0
-							);
-						default:
-							return __( 'All threats', 'jetpack-protect' );
-					}
-				}
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed threats found on the site. */
-							__( 'All %s fixed threats', 'jetpack-protect' ),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored threats found on the site. */
-							__( 'All %s ignored threats', 'jetpack-protect' ),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of threats found on the site. */
-							__( 'All %s threats', 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'core':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed WordPress threats found on the site. */
-							_n(
-								'%1$s fixed WordPress threat',
-								'%1$s fixed WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored WordPress threats found on the site. */
-							_n(
-								'%1$s ignored WordPress threat',
-								'%1$s ignored WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of WordPress threats found on the site. */
-							_n(
-								'%1$s WordPress threat',
-								'%1$s WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-				}
-			case 'files':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed file threats found on the site. */
-							_n(
-								'%1$s fixed file threat',
-								'%1$s fixed file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored file threats found on the site. */
-							_n(
-								'%1$s ignored file threat',
-								'%1$s ignored file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of file threats found on the site. */
-							_n( '%1$s file threat', '%1$s file threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'database':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed database threats found on the site. */
-							_n(
-								'%1$s fixed database threat',
-								'%1$s fixed database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored database threats found on the site. */
-							_n(
-								'%1$s ignored database threat',
-								'%1$s ignored database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of database threats found on the site. */
-							_n( '%1$s database threat', '%1$s database threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			default:
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: Translates to "123 fixed threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s fixed threat in %2$s %3$s',
-								'%1$s fixed threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: Translates to "123 ignored threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s ignored threat in %2$s %3$s',
-								'%1$s ignored threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					default:
-						return sprintf(
-							/* translators: Translates to "123 threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s threat in %2$s %3$s',
-								'%1$s threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-				}
-		}
-	}, [ selected, list.length, filter, item?.name, item?.version ] );
-
-	// Threat history is only available for paid plans.
-	if ( ! hasPlan ) {
-		return <Navigate to="/scan" />;
-	}
-
-	// Remove the filter if there are no threats to show.
-	if ( list.length === 0 && filter !== 'all' ) {
-		return <Navigate to="/scan/history" />;
-	}
-
-	return (
-		<AdminPage>
-			<HistoryAdminSectionHero />
-			{ ( ! error || numAllThreats ) && (
-				<AdminSection>
-					<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-						<Col>
-							<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-								<Col lg={ 4 }>
-									<ThreatsNavigation
-										selected={ selected }
-										onSelect={ setSelected }
-										sourceType="history"
-										statusFilter={ filter }
-									/>
-								</Col>
-								<Col lg={ 8 }>
-									{ list.length > 0 ? (
-										<div>
-											<div className={ styles[ 'list-header' ] }>
-												<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters numFixed={ numFixed } numIgnored={ numIgnored } />
-												</div>
-											</div>
-											<PaidList list={ list } hideAutoFixColumn={ true } />
-										</div>
-									) : (
-										<>
-											<div className={ styles[ 'list-header' ] }>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters />
-												</div>
-											</div>
-											<div className={ styles.empty }>
-												<ProtectCheck />
-												<H3 weight="bold" mt={ 8 }>
-													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-												</H3>
-												<Text mb={ 4 }>
-													{ sprintf(
-														/* translators: %s: Filter type */
-														__( 'There are no%sthreats in your scan history.', 'jetpack-protect' ),
-														'all' === filter ? ' ' : ` ${ filter } `
-													) }
-												</Text>
-											</div>
-										</>
-									) }
-								</Col>
-							</Container>
-						</Col>
-					</Container>
-				</AdminSection>
-			) }
-			<ScanFooter />
-		</AdminPage>
-	);
-};
-
-export default ScanHistoryRoute;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx b/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
deleted file mode 100644
index 1bc9668b11065..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import ButtonGroup from '../../../components/button-group';
-
-/**
- * Status Filters component.
- *
- * @param {object} props            - Component props.
- * @param {number} props.numFixed   - Number of fixed threats.
- * @param {number} props.numIgnored - Number of ignored threats.
- *
- * @return {React.ReactNode} StatusFilters component.
- */
-export default function StatusFilters( { numFixed, numIgnored } ) {
-	const navigate = useNavigate();
-	const { filter = 'all' } = useParams();
-	const navigateOnClick = useCallback( path => () => navigate( path ), [ navigate ] );
-
-	return (
-		<ButtonGroup>
-			<ButtonGroup.Button
-				variant={ 'all' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history' ) }
-			>
-				{ __( 'All', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'fixed' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/fixed' ) }
-				disabled={ ! numFixed }
-			>
-				{ __( 'Fixed', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'ignored' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/ignored' ) }
-				disabled={ ! numIgnored }
-			>
-				{ __( 'Ignored', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-		</ButtonGroup>
-	);
-}
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
deleted file mode 100644
index d30f3e0ac3344..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.list-header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-}
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
index 1f3cdfdd7520f..c56ae3c747f3e 100644
--- a/projects/plugins/protect/src/js/routes/scan/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -1,14 +1,16 @@
 import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import { useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import AdminPage from '../../components/admin-page';
-import ThreatsList from '../../components/threats-list';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import OnboardingPopover from '../../components/onboarding-popover';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import { OnboardingContext } from '../../hooks/use-onboarding';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import onboardingSteps from './onboarding-steps';
 import ScanAdminSectionHero from './scan-admin-section-hero';
-import ScanFooter from './scan-footer';
+import ScanResultsDataView from './scan-results-data-view';
+import styles from './styles.module.scss';
 
 /**
  * Scan Page
@@ -19,23 +21,41 @@ import ScanFooter from './scan-footer';
  */
 const ScanPage = () => {
 	const { hasPlan } = usePlan();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
+	const location = useLocation();
+	const { filter } = useParams();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 
+	const [ scanResultsAnchor, setScanResultsAnchor ] = useState( null );
+
 	let currentScanStatus;
 	if ( status.error ) {
 		currentScanStatus = 'error';
-	} else if ( ! lastChecked ) {
+	} else if ( ! status.lastChecked ) {
 		currentScanStatus = 'in_progress';
 	} else {
 		currentScanStatus = 'active';
 	}
 
+	const filters = useMemo( () => {
+		if ( location.pathname.includes( '/scan/history' ) ) {
+			return [
+				{
+					field: 'status',
+					value: filter ? [ filter ] : [ 'fixed', 'ignored' ],
+					operator: 'isAny',
+				},
+			];
+		}
+
+		return [
+			{
+				field: 'status',
+				value: [ 'current' ],
+				operator: 'isAny',
+			},
+		];
+	}, [ filter, location.pathname ] );
+
 	// Track view for Protect admin page.
 	useAnalyticsTracks( {
 		pageViewEventName: 'protect_admin',
@@ -49,16 +69,33 @@ const ScanPage = () => {
 		<OnboardingContext.Provider value={ onboardingSteps }>
 			<AdminPage>
 				<ScanAdminSectionHero />
-				{ ( ! status.error || numThreats ) && (
-					<AdminSection>
-						<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-							<Col>
-								<ThreatsList />
-							</Col>
-						</Container>
-					</AdminSection>
-				) }
-				<ScanFooter />
+				<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 left' }
+								/>
+							) }
+							{ !! status && ! isScanInProgress( status ) && hasPlan && (
+								<OnboardingPopover
+									id={ 'paid-understand-severity' }
+									anchor={ scanResultsAnchor }
+									position={ 'top right' }
+								/>
+							) }
+						</Col>
+					</Container>
+				</AdminSection>
 			</AdminPage>
 		</OnboardingContext.Provider>
 	);
diff --git a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
index 0e85aa56d9289..c29af26bcb409 100644
--- a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
@@ -6,15 +6,6 @@ import usePlan from '../../hooks/use-plan';
 
 const { siteSuffix } = window.jetpackProtectInitialState;
 
-const scanResultsTitle = __( 'Your scan results', 'jetpack-protect' );
-const scanResultsDescription = (
-	<Text>
-		{ __(
-			'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files',
-			'jetpack-protect'
-		) }
-	</Text>
-);
 const UpgradeButton = props => {
 	const { upgradePlan } = usePlan();
 	const { recordEvent } = useAnalyticsTracks();
@@ -27,11 +18,6 @@ const UpgradeButton = props => {
 };
 
 export default [
-	{
-		id: 'free-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
-	},
 	{
 		id: 'free-daily-scans',
 		title: __( 'Daily automated scans', 'jetpack-protect' ),
@@ -49,10 +35,41 @@ export default [
 			</Text>
 		),
 	},
+	{
+		id: 'paid-daily-and-manual-scans',
+		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
+	{
+		id: 'free-scan-results',
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, and themes.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
 	{
 		id: 'paid-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
 	},
 	{
 		id: 'paid-fix-all-threats',
@@ -97,16 +114,4 @@ export default [
 			</Text>
 		),
 	},
-	{
-		id: 'paid-daily-and-manual-scans',
-		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
-		description: (
-			<Text>
-				{ __(
-					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
-					'jetpack-protect'
-				) }
-			</Text>
-		),
-	},
 ];
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 9e1b9c102a037..db76bac1b15b0 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
@@ -1,33 +1,41 @@
 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 { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import useThreatsList from '../../components/threats-list/use-threats-list';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
+import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useFixers from '../../hooks/use-fixers';
 import useModal from '../../hooks/use-modal';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
+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 {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
-	const { hasPlan } = usePlan();
+	const { recordEvent } = useAnalyticsTracks();
+	const { hasPlan, upgradePlan } = usePlan();
+	const { setModal } = useModal();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
-	const { list } = useThreatsList();
 	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const { setModal } = useModal();
+
+	const getScan = useCallback( () => {
+		recordEvent( 'jetpack_protect_scan_header_get_scan_link_click' );
+		upgradePlan();
+	}, [ recordEvent, upgradePlan ] );
+
+	const { globalStats } = useWafData();
+	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
+	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
+		? '50,000'
+		: totalVulnerabilities.toLocaleString();
+
+	const numThreats = status.threats.length;
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
@@ -35,20 +43,20 @@ const ScanAdminSectionHero: React.FC = () => {
 
 	// List of fixable threats that do not have a fix in progress
 	const fixableList = useMemo( () => {
-		return list.filter( threat => {
-			const threatId = parseInt( threat.id );
+		return status.threats.filter( threat => {
+			const threatId = typeof threat.id === 'string' ? parseInt( threat.id ) : threat.id;
 			return (
 				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
 			);
 		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+	}, [ status.threats, isThreatFixInProgress, isThreatFixStale ] );
 
 	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
+	if ( status.lastChecked ) {
 		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+		lastCheckedLocalTimestamp = new Date( status.lastChecked + ' UTC' ).getTime();
 	}
 
 	const handleShowAutoFixersClick = threatList => {
@@ -88,13 +96,11 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: __( 'Most recent results', 'jetpack-protect' ) }
 					</Text>
-					{ ! hasPlan && (
-						<OnboardingPopover
-							id="free-daily-scans"
-							position={ isSm ? 'bottom' : 'middle right' }
-							anchor={ dailyScansPopoverAnchor }
-						/>
-					) }
+					<OnboardingPopover
+						id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
+						position={ isSm ? 'bottom' : 'middle right' }
+						anchor={ dailyScansPopoverAnchor }
+					/>
 					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
@@ -105,48 +111,60 @@ const ScanAdminSectionHero: React.FC = () => {
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
 							  )
-							: sprintf(
-									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No active %s', 'jetpack-protect' ),
-									hasPlan
-										? __( 'threats', 'jetpack-protect' )
-										: __(
-												'vulnerabilities',
-												'jetpack-protect',
-												/* dummy arg to avoid bad minification */ 0
-										  )
-							  ) }
+							: __( "Don't worry about a thing", 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text className={ styles[ 'subheading-text' ] }>
-								{ __(
-									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
-									'jetpack-protect'
-								) }
-							</Text>
-							{ fixableList.length > 0 && (
+							{ hasPlan ? (
+								<Text>
+									{ __(
+										"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
+										'jetpack-protect'
+									) }
+								</Text>
+							) : (
 								<>
-									<Button
-										className={ styles[ 'auto-fixers' ] }
-										ref={ setShowAutoFixersPopoverAnchor }
-										variant="primary"
-										weight="regular"
-										onClick={ handleShowAutoFixersClick( fixableList ) }
-									>
+									<Text mb={ 4 }>
 										{ sprintf(
-											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-											fixableList.length
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
 										) }
-									</Button>
-									{ ! scanning && (
-										<OnboardingPopover
-											id="paid-fix-all-threats"
-											position={ isSm ? 'bottom right' : 'middle left' }
-											anchor={ showAutoFixersPopoverAnchor }
-										/>
-									) }
+									</Text>
+									<Tooltip
+										text={ __(
+											'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
+											'jetpack-protect'
+										) }
+									>
+										<Button onClick={ getScan }>
+											{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
+										</Button>
+									</Tooltip>
+								</>
+							) }
+							{ fixableList.length > 0 && (
+								<>
+									<div ref={ setShowAutoFixersPopoverAnchor }>
+										<Button
+											className={ styles[ 'auto-fixers' ] }
+											onClick={ handleShowAutoFixersClick( fixableList ) }
+										>
+											{ sprintf(
+												/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+												__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+												fixableList.length
+											) }
+										</Button>
+									</div>
+									<OnboardingPopover
+										id="paid-fix-all-threats"
+										position={ isSm ? 'bottom right' : 'middle left' }
+										anchor={ showAutoFixersPopoverAnchor }
+									/>
 								</>
 							) }
 						</>
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx b/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
deleted file mode 100644
index 56d7ea1c14a7d..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-	Text,
-	Button,
-	Title,
-	getRedirectUrl,
-	ContextualUpgradeTrigger,
-	Col,
-	Container,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useWafData from '../../hooks/use-waf-data';
-import styles from './styles.module.scss';
-
-const ProductPromotion = () => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { hasPlan, upgradePlan } = usePlan();
-	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_footer_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	if ( hasPlan ) {
-		const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
-
-		return (
-			<div className={ styles[ 'product-section' ] }>
-				<Title>{ __( 'Get access to our Cloud', 'jetpack-protect' ) }</Title>
-				<Text mb={ 3 }>
-					{ __(
-						'With your Protect upgrade, you have free access to scan your site on our Cloud, so you can be aware and fix your threats even if your site goes down.',
-						'jetpack-protect'
-					) }
-				</Text>
-
-				<Button variant="secondary" weight="regular" href={ goToCloudUrl }>
-					{ __( 'Go to Cloud', 'jetpack-protect' ) }
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<div className={ styles[ 'product-section' ] }>
-			<Title>{ __( 'Advanced scan results', 'jetpack-protect' ) }</Title>
-			<Text mb={ 3 }>
-				{ __(
-					'Upgrade Jetpack Protect to get advanced scan tools, including one-click fixes for most threats and malware scanning.',
-					'jetpack-protect'
-				) }
-			</Text>
-
-			<ContextualUpgradeTrigger
-				description={ __(
-					'Looking for advanced scan results and one-click fixes?',
-					'jetpack-protect'
-				) }
-				cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-				onClick={ getScan }
-			/>
-		</div>
-	);
-};
-
-const FooterInfo = () => {
-	const { hasPlan } = usePlan();
-	const { globalStats } = useWafData();
-	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
-	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
-		? '50,000'
-		: totalVulnerabilities.toLocaleString();
-
-	if ( hasPlan ) {
-		const learnMoreScanUrl = getRedirectUrl( 'protect-footer-learn-more-scan' );
-
-		return (
-			<div className={ styles[ 'info-section' ] }>
-				<Title>{ __( 'Line-by-line scanning', 'jetpack-protect' ) }</Title>
-				<Text mb={ 2 }>
-					{ __(
-						'We actively review line-by-line of your site files to identify threats and vulnerabilities. Jetpack monitors millions of websites to keep your site secure all the time.',
-						'jetpack-protect'
-					) }{ ' ' }
-					<Button variant="link" target="_blank" weight="regular" href={ learnMoreScanUrl }>
-						{ __( 'Learn more', 'jetpack-protect' ) }
-					</Button>
-				</Text>
-			</div>
-		);
-	}
-
-	const learnMoreProtectUrl = getRedirectUrl( 'jetpack-protect-footer-learn-more' );
-
-	return (
-		<div className={ styles[ 'info-section' ] }>
-			<Title>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__( 'Over %s listed vulnerabilities', 'jetpack-protect' ),
-					totalVulnerabilitiesFormatted
-				) }
-			</Title>
-			<Text mb={ 3 }>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__(
-						'Every day we check your plugin, theme, and WordPress versions against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-						'jetpack-protect'
-					),
-					totalVulnerabilitiesFormatted
-				) }
-			</Text>
-
-			<Button variant="link" isExternalLink={ true } href={ learnMoreProtectUrl } weight="regular">
-				{ __( 'Learn more', 'jetpack-protect' ) }
-			</Button>
-		</div>
-	);
-};
-
-const ScanFooter = () => {
-	const { waf } = window.jetpackProtectInitialState || {};
-	return waf.wafSupported ? (
-		<SeventyFiveLayout
-			main={ <ProductPromotion /> }
-			secondary={ <FooterInfo /> }
-			preserveSecondaryOnMobile={ true }
-		/>
-	) : (
-		<Container horizontalSpacing={ 0 } horizontalGap={ 0 } fluid={ false }>
-			<Col>
-				<FooterInfo />
-			</Col>
-		</Container>
-	);
-};
-
-export default ScanFooter;
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
new file mode 100644
index 0000000000000..616f4e256ed44
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
@@ -0,0 +1,56 @@
+import { ThreatsDataViews } from '@automattic/jetpack-components';
+import { Threat } from '@automattic/jetpack-scan';
+import { useCallback } from 'react';
+import useHistoryQuery from '../../data/scan/use-history-query';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import useModal from '../../hooks/use-modal';
+
+/**
+ * Scan Results Data View
+ *
+ * @param {object} props         - Component props.
+ * @param {Array}  props.filters - Default filters to apply to the data view.
+ *
+ * @return {JSX.Element} ScanResultDataView component.
+ */
+export default function ScanResultsDataView( {
+	filters = [],
+}: {
+	filters: React.ComponentProps< typeof ThreatsDataViews >[ 'filters' ];
+} ) {
+	const { setModal } = useModal();
+
+	const { data: scanStatus } = useScanStatusQuery();
+	const { data: history } = useHistoryQuery();
+
+	const onFixThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'FIX_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onIgnoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'IGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onUnignoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	return (
+		<ThreatsDataViews
+			data={ [ ...scanStatus.threats, ...( history ? history.threats : [] ) ] }
+			filters={ filters }
+			onFixThreats={ onFixThreats }
+			onIgnoreThreats={ onIgnoreThreats }
+			onUnignoreThreats={ onUnignoreThreats }
+		/>
+	);
+}
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 c214c52ff8892..4db4449b60119 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
@@ -3,7 +3,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import AdminSectionHero from '../../components/admin-section-hero';
 import InProgressAnimation from '../../components/in-progress-animation';
 import ProgressBar from '../../components/progress-bar';
-import ScanNavigation from '../../components/scan-navigation';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
@@ -35,20 +34,22 @@ const ScanningAdminSectionHero: React.FC = () => {
 								/>
 							) }
 							<Text>
-								{ sprintf(
-									// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-									__(
-										'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
-										'jetpack-protect'
-									),
-									totalVulnerabilitiesFormatted
-								) }
+								{ hasPlan
+									? __(
+											"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
+											'jetpack-protect'
+									  )
+									: sprintf(
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
+									  ) }
 							</Text>
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			secondary={ <InProgressAnimation /> }
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 908e34f6e71d7..163fd23248aaa 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,12 +1,14 @@
-.subheading-text {
-	white-space: nowrap;
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
-.product-section, .info-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
-}
+.scan-results-container {
+	padding-left: 0;
+	padding-right: 0;
+	overflow: hidden;
 
-.auto-fixers {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
-}
\ No newline at end of file
+	> * {
+		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
+		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
+	}
+}
diff --git a/projects/plugins/protect/webpack.config.js b/projects/plugins/protect/webpack.config.js
index 2f6a45721b100..0c65dfec146a7 100644
--- a/projects/plugins/protect/webpack.config.js
+++ b/projects/plugins/protect/webpack.config.js
@@ -33,6 +33,24 @@ module.exports = [
 					includeNodeModules: [ '@automattic/jetpack-' ],
 				} ),
 
+				/**
+				 * Transpile @wordpress/dataviews in node_modules too.
+				 *
+				 * @see https://github.com/Automattic/jetpack/issues/39907
+				 */
+				jetpackWebpackConfig.TranspileRule( {
+					includeNodeModules: [ '@wordpress/dataviews/' ],
+					babelOpts: {
+						configFile: false,
+						plugins: [
+							[
+								require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
+								{ textdomain: 'jetpack-protect' },
+							],
+						],
+					},
+				} ),
+
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],

From 57eda8f5effd905046462803482daa32f64d6376 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:22:55 -0800
Subject: [PATCH 110/143] Components: Add ScanReport (#40419)

---
 .../changelog/components-add-scan-report      |   4 +
 .../components/scan-report/constants.ts       |  30 +++
 .../components/scan-report/index.tsx          | 197 ++++++++++++++++++
 .../scan-report/stories/index.stories.tsx     |  72 +++++++
 .../components/scan-report/styles.module.scss |  21 ++
 .../components/shield-icon/index.tsx          |  14 +-
 .../shield-icon/stories/index.stories.tsx     |   6 +-
 projects/js-packages/components/index.ts      |   1 +
 .../scan/changelog/components-add-scan-report |   4 +
 .../js-packages/scan/src/types/threats.ts     |  24 ++-
 10 files changed, 360 insertions(+), 13 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/components-add-scan-report
 create mode 100644 projects/js-packages/components/components/scan-report/constants.ts
 create mode 100644 projects/js-packages/components/components/scan-report/index.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/styles.module.scss
 create mode 100644 projects/js-packages/scan/changelog/components-add-scan-report

diff --git a/projects/js-packages/components/changelog/components-add-scan-report b/projects/js-packages/components/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..ba0fbd4cce025
--- /dev/null
+++ b/projects/js-packages/components/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport component
diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
new file mode 100644
index 0000000000000..436eed91c5701
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	wordpress as coreIcon,
+} from '@wordpress/icons';
+
+export const TYPES = [
+	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
+];
+
+export const ICONS = {
+	plugins: pluginIcon,
+	themes: themeIcon,
+	core: coreIcon,
+	files: fileIcon,
+	default: shieldIcon,
+};
+
+export const FIELD_ICON = 'icon';
+export const FIELD_TYPE = 'type';
+export const FIELD_NAME = 'name';
+export const FIELD_STATUS = 'status';
+export const FIELD_UPDATE = 'update';
+export const FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
new file mode 100644
index 0000000000000..14795376f7d95
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -0,0 +1,197 @@
+import { type ScanReportExtension } from '@automattic/jetpack-scan';
+import { Tooltip } from '@wordpress/components';
+import {
+	type SupportedLayouts,
+	type View,
+	type Field,
+	DataViews,
+	filterSortAndPaginate,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import ShieldIcon from '../shield-icon';
+import {
+	FIELD_NAME,
+	FIELD_VERSION,
+	FIELD_ICON,
+	FIELD_STATUS,
+	FIELD_TYPE,
+	TYPES,
+	ICONS,
+} from './constants';
+import styles from './styles.module.scss';
+
+/**
+ * DataViews component for displaying a scan report.
+ *
+ * @param {object}   props                   - Component props.
+ * @param {Array}    props.data              - Scan report data.
+ * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ *
+ * @return {JSX.Element} The ScanReport component.
+ */
+export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
+	const baseView = {
+		search: '',
+		filters: [],
+		page: 1,
+		perPage: 20,
+	};
+
+	/**
+	 * DataView default layouts.
+	 *
+	 * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+	 */
+	const defaultLayouts: SupportedLayouts = {
+		table: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_STATUS,
+			},
+		},
+		list: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_NAME,
+				mediaField: FIELD_ICON,
+			},
+		},
+	};
+
+	/**
+	 * DataView view object - configures how the dataset is visible to the user.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+	 */
+	const [ view, setView ] = useState< View >( {
+		type: 'table',
+		...defaultLayouts.table,
+	} );
+
+	/**
+	 * DataView fields - describes the visible items for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+	 */
+	const fields = useMemo( () => {
+		const iconHeight = 20;
+		const result: Field< ScanReportExtension >[] = [
+			{
+				id: FIELD_STATUS,
+				label: __( 'Status', 'jetpack-components' ),
+				render( { item }: { item: ScanReportExtension } ) {
+					let variant: 'info' | 'warning' | 'success' = 'info';
+					let text = __(
+						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
+						'jetpack-components'
+					);
+
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							variant = 'warning';
+							text = __( 'Threat detected.', 'jetpack-components' );
+						} else {
+							variant = 'success';
+							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+						}
+					}
+
+					return (
+						<Tooltip className={ styles.tooltip } text={ text }>
+							<div className={ styles.icon }>
+								<ShieldIcon variant={ variant } height={ iconHeight } />
+							</div>
+						</Tooltip>
+					);
+				},
+			},
+			{
+				id: FIELD_TYPE,
+				label: __( 'Type', 'jetpack-components' ),
+				elements: TYPES,
+			},
+			{
+				id: FIELD_NAME,
+				label: __( 'Name', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.name ? item.name : '';
+				},
+			},
+			{
+				id: FIELD_VERSION,
+				label: __( 'Version', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.version ? item.version : '';
+				},
+			},
+			...( view.type === 'list'
+				? [
+						{
+							id: FIELD_ICON,
+							label: __( 'Icon', 'jetpack-components' ),
+							enableSorting: false,
+							enableHiding: false,
+							getValue( { item }: { item: ScanReportExtension } ) {
+								return ICONS[ item.type ] || '';
+							},
+							render( { item }: { item: ScanReportExtension } ) {
+								return (
+									<div className={ styles.threat__media }>
+										<Icon icon={ ICONS[ item.type ] } />
+									</div>
+								);
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		return result;
+	}, [ view ] );
+
+	/**
+	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+	 */
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ data, view, fields ] );
+
+	/**
+	 * Callback function to update the view state.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+	 */
+	const onChangeView = useCallback( ( newView: View ) => {
+		setView( newView );
+	}, [] );
+
+	/**
+	 * DataView getItemId function - returns the unique ID for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+	 */
+	const getItemId = useCallback( ( item: ScanReportExtension ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
new file mode 100644
index 0000000000000..63926908850de
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -0,0 +1,72 @@
+import ScanReport from '..';
+
+export default {
+	title: 'JS Packages/Components/Scan Report',
+	component: ScanReport,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ScanReport { ...args } />;
+Default.args = {
+	data: [
+		{
+			id: 1,
+			name: 'WordPress',
+			slug: null,
+			version: '6.7.1',
+			threats: [],
+			checked: true,
+			type: 'core',
+		},
+		{
+			id: 2,
+			name: 'Jetpack',
+			slug: 'jetpack/jetpack.php',
+			version: '14.1-a.7',
+			threats: [],
+			checked: false,
+			type: 'plugins',
+		},
+		{
+			id: 3,
+			name: 'Twenty Fifteen',
+			slug: 'twentyfifteen',
+			version: '1.1',
+			threats: [
+				{
+					id: 198352527,
+					signature: 'Vulnerable.WP.Extension',
+					description: 'Vulnerable WordPress extension',
+					severity: 3,
+				},
+			],
+			checked: true,
+			type: 'themes',
+		},
+		{
+			id: 4,
+			threats: [
+				{
+					id: 198352406,
+					signature: 'EICAR_AV_Test_Suspicious',
+					title: 'Malicious code found in file: jptt_eicar.php',
+					severity: 1,
+				},
+			],
+			checked: true,
+			type: 'files',
+		},
+	],
+};
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
new file mode 100644
index 0000000000000..d313d4cb8898a
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -0,0 +1,21 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: var( --jp-black );
+	}
+}
+
+.tooltip {
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
\ No newline at end of file
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index fee9f4d70c463..b07b943b5e7fa 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 const COLORS = {
-	error: '#D63638',
-	warning: '#F0B849',
-	success: '#069E08',
 	default: '#1d2327',
+	info: '#A7AAAD',
+	success: '#069E08',
+	warning: '#F0B849',
+	error: '#D63638',
 };
 
 /**
@@ -32,11 +33,11 @@ export default function ShieldIcon( {
 }: {
 	className?: string;
 	contrast?: string;
-	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
 	icon?: 'success' | 'error';
 	outline?: boolean;
-	variant: 'default' | 'success' | 'warning' | 'error';
+	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
 	const iconFill = outline ? shieldFill : contrast;
@@ -60,6 +61,9 @@ export default function ShieldIcon( {
 				}
 				fill={ shieldFill }
 			/>
+			{ 'info' === iconVariant && (
+				<path d="M33.7 69H41.5V45.6H33.7V69ZM33.7 37.8H41.5V30H33.7V37.8Z" fill={ iconFill } />
+			) }
 			{ 'success' === iconVariant && (
 				<path
 					fillRule="evenodd"
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
index b5a16d4da4075..57bcb3802010c 100644
--- a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -11,13 +11,13 @@ export default {
 			control: {
 				type: 'select',
 			},
-			options: [ 'default', 'success', 'warning', 'error' ],
+			options: [ 'default', 'info', 'success', 'warning', 'error' ],
 		},
 		icon: {
 			control: {
 				type: 'select',
 			},
-			options: [ 'success', 'error' ],
+			options: [ 'info', 'success', 'error' ],
 		},
 		fill: {
 			control: 'color',
@@ -39,12 +39,14 @@ export const Variants = () => {
 		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" />
+				<ShieldIcon variant="info" />
 				<ShieldIcon variant="success" />
 				<ShieldIcon variant="warning" />
 				<ShieldIcon variant="error" />
 			</div>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="info" outline />
 				<ShieldIcon variant="success" outline />
 				<ShieldIcon variant="warning" outline />
 				<ShieldIcon variant="error" outline />
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 4b0f3612012e7..6df50ee7fdb61 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -48,6 +48,7 @@ export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
 export { default as ShieldIcon } from './components/shield-icon';
+export { default as ScanReport } from './components/scan-report';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/js-packages/scan/changelog/components-add-scan-report b/projects/js-packages/scan/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..eeb9c55de4a28
--- /dev/null
+++ b/projects/js-packages/scan/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates/adds scan types
diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts
index 72428c209ee49..22f6b06477163 100644
--- a/projects/js-packages/scan/src/types/threats.ts
+++ b/projects/js-packages/scan/src/types/threats.ts
@@ -4,6 +4,23 @@ export type ThreatStatus = 'fixed' | 'ignored' | 'current';
 
 export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
 
+export type ScanReportExtension = {
+	id: number;
+	checked: boolean;
+	slug?: string;
+	name?: string;
+	version?: string;
+	threats: Threat[];
+	type: 'plugins' | 'themes' | 'core' | 'files';
+};
+
+export type Extension = {
+	slug: string;
+	name: string;
+	version: string;
+	type: 'plugins' | 'themes' | 'core';
+};
+
 export type Threat = {
 	/** The threat's unique ID. */
 	id: string | number;
@@ -57,10 +74,5 @@ export type Threat = {
 	diff?: string;
 
 	/** The affected extension. */
-	extension?: {
-		slug: string;
-		name: string;
-		version: string;
-		type: 'plugins' | 'themes' | 'core';
-	};
+	extension?: Extension;
 };

From a4ebd3e7fb49082e9aead571a74dee1a5cd50048 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 6 Dec 2024 12:05:11 -0700
Subject: [PATCH 111/143] Fix type errors

---
 projects/js-packages/scan/src/utils/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 9e2e75bcd4d91..30a96cbd132d5 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -21,9 +21,9 @@ export const getThreatIcon = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return 'wordpress-alt';
-		case 'plugin':
+		case 'plugins':
 			return 'plugins';
-		case 'theme':
+		case 'themes':
 			return 'appearance';
 		case 'file':
 			return 'media-code';
@@ -36,9 +36,9 @@ export const getThreatSubtitle = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
-		case 'plugin':
+		case 'plugins':
 			return __( 'Vulnerable Plugin', 'jetpack-scan' );
-		case 'theme':
+		case 'themes':
 			return __( 'Vulnerable Theme', 'jetpack-scan' );
 		case 'file':
 			return __( 'File Threat', 'jetpack-scan' );

From 46ebdaab8591b384552e0be8f62e4d3fde311c05 Mon Sep 17 00:00:00 2001
From: Dean Kmyta <dkmyta@automattic.com>
Date: Sat, 7 Dec 2024 11:40:40 -0700
Subject: [PATCH 112/143] Protect: add home page

---
 .../components/components/stat-card/index.tsx |  13 +-
 .../components/components/stat-card/types.ts  |   5 +
 .../stories/index.stories.tsx                 |   4 +-
 .../threat-modal/stories/index.stories.tsx    |   2 +-
 .../threats-data-views/constants.ts           |   4 +-
 .../components/threats-data-views/index.tsx   |  18 +-
 .../stories/index.stories.tsx                 |  16 +-
 .../threats-data-views/test/index.test.tsx    |   2 +-
 .../scan/changelog/fix-scan-extension-type    |   5 -
 .../js-packages/scan/src/types/threats.ts     |   6 +-
 projects/js-packages/scan/src/utils/index.ts  |  21 +-
 .../protect/changelog/add-protect-home        |   4 +
 .../protect/src/class-jetpack-protect.php     |   3 +-
 .../src/js/components/admin-page/index.jsx    |   1 +
 .../components/admin-section-hero/index.tsx   |   8 +-
 .../admin-section-hero/styles.module.scss     |  14 -
 .../error-admin-section-hero/index.tsx        |   5 +-
 .../styles.module.scss                        |   6 +-
 .../src/js/components/form-toggle/compact.jsx |   8 -
 .../src/js/components/form-toggle/index.jsx   |  68 -----
 .../form-toggle/stories/index.stories.jsx     |  35 ---
 .../components/form-toggle/styles.module.scss |  89 ------
 .../src/js/components/pricing-table/index.jsx |   2 +-
 .../components/seventy-five-layout/index.tsx  |   4 +-
 .../seventy-five-layout/styles.module.scss    |  13 -
 .../plugins/protect/src/js/hooks/use-plan.tsx |   2 +-
 projects/plugins/protect/src/js/index.tsx     |   4 +-
 .../firewall/firewall-admin-section-hero.tsx  |   3 +
 .../js/routes/firewall/firewall-footer.jsx    |  60 ++--
 .../js/routes/firewall/firewall-statcards.jsx |  24 +-
 .../protect/src/js/routes/firewall/index.jsx  |  37 +--
 .../src/js/routes/firewall/styles.module.scss |  94 +++---
 .../routes/home/home-admin-section-hero.tsx   |  61 ++++
 .../src/js/routes/home/home-statcards.jsx     | 274 ++++++++++++++++++
 .../protect/src/js/routes/home/index.jsx      |  25 ++
 .../src/js/routes/home/styles.module.scss     |  82 ++++++
 .../scan/scanning-admin-section-hero.tsx      |   1 +
 .../src/js/routes/scan/styles.module.scss     |   6 +
 38 files changed, 616 insertions(+), 413 deletions(-)
 delete mode 100644 projects/js-packages/scan/changelog/fix-scan-extension-type
 create mode 100644 projects/plugins/protect/changelog/add-protect-home
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/compact.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/form-toggle/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
 create mode 100644 projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/home-statcards.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/index.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/home/styles.module.scss

diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index b6854dc02f37e..222cafb44068e 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -18,7 +18,14 @@ import type React from 'react';
  * @param {StatCardProps} props - Component props.
  * @return {React.ReactNode} - StatCard react component.
  */
-const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => {
+const StatCard = ( {
+	className,
+	icon,
+	label,
+	value,
+	variant = 'square',
+	hideValue = false,
+}: StatCardProps ) => {
 	const formattedValue = numberFormat( value );
 	const compactValue = numberFormat( value, {
 		notation: 'compact',
@@ -33,12 +40,12 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa
 				{ variant === 'square' ? (
 					<Tooltip text={ formattedValue } placement="top">
 						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ compactValue }
+							{ hideValue ? '-' : compactValue }
 						</Text>
 					</Tooltip>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-						{ formattedValue }
+						{ hideValue ? '-' : formattedValue }
 					</Text>
 				) }
 			</div>
diff --git a/projects/js-packages/components/components/stat-card/types.ts b/projects/js-packages/components/components/stat-card/types.ts
index 4b0fd698e6774..8e1c0e99d6d60 100644
--- a/projects/js-packages/components/components/stat-card/types.ts
+++ b/projects/js-packages/components/components/stat-card/types.ts
@@ -25,4 +25,9 @@ export type StatCardProps = {
 	 * @default 'square'
 	 */
 	variant?: 'square' | 'horizontal';
+
+	/**
+	 * Whether to hide the value.
+	 */
+	hideValue?: boolean;
 };
diff --git a/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
index 49139a80f07a0..4f346d04d394b 100644
--- a/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
@@ -23,13 +23,13 @@ Default.args = {
 
 export const DeletePlugin = args => <ThreatFixerButton { ...args } />;
 DeletePlugin.args = {
-	threat: { fixable: { fixer: 'delete' }, extension: { type: 'plugins' } },
+	threat: { fixable: { fixer: 'delete' }, extension: { type: 'plugin' } },
 	onClick: () => alert( 'Delete fixer callback triggered' ), // eslint-disable-line no-alert
 };
 
 export const DeleteTheme = args => <ThreatFixerButton { ...args } />;
 DeleteTheme.args = {
-	threat: { fixable: { fixer: 'delete' }, extension: { type: 'themes' } },
+	threat: { fixable: { fixer: 'delete' }, extension: { type: 'theme' } },
 	onClick: () => alert( 'Delete fixer callback triggered' ), // eslint-disable-line no-alert
 };
 
diff --git a/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx b/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
index eb799cb779b25..bf1eff8fe8f99 100644
--- a/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
@@ -255,7 +255,7 @@ VulnerableExtension.args = {
 			name: 'WP Super Cache',
 			slug: 'wp-super-cache',
 			version: '1.6.3',
-			type: 'plugins',
+			type: 'plugin',
 		},
 	},
 	isUserConnected: true,
diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts
index 59b79a7618453..01b689d1ce141 100644
--- a/projects/js-packages/components/components/threats-data-views/constants.ts
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -15,8 +15,8 @@ export const THREAT_STATUSES: { value: string; label: string; variant?: 'success
 	];
 
 export const THREAT_TYPES = [
-	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
-	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'plugin', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'theme', label: __( 'Theme', 'jetpack-components' ) },
 	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
 	{ value: 'file', label: __( 'File', 'jetpack-components' ) },
 ];
diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
index 6af7c028f4c3a..7ccfd59bec0c3 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -168,12 +168,12 @@ export default function ThreatsDataViews( {
 				// Extensions (Themes and Plugins)
 				if ( threat.extension ) {
 					switch ( threat.extension.type ) {
-						case 'themes':
+						case 'theme':
 							if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
 							break;
-						case 'plugins':
+						case 'plugin':
 							if ( ! acc.plugins.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.plugins.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
@@ -280,18 +280,7 @@ export default function ThreatsDataViews( {
 				label: __( 'Type', 'jetpack-components' ),
 				elements: THREAT_TYPES,
 				getValue( { item }: { item: Threat } ) {
-					switch ( getThreatType( item ) ) {
-						case 'core':
-							return __( 'WordPress', 'jetpack-components' );
-						case 'plugins':
-							return __( 'Plugin', 'jetpack-components' );
-						case 'themes':
-							return __( 'Theme', 'jetpack-components' );
-						case 'file':
-							return __( 'File', 'jetpack-components' );
-						default:
-							return __( 'Unknown', 'jetpack-components' );
-					}
+					return getThreatType( item ) ?? '';
 				},
 			},
 			{
@@ -439,6 +428,7 @@ export default function ThreatsDataViews( {
 				id: THREAT_ACTION_FIX,
 				label: __( 'Auto-fix', 'jetpack-components' ),
 				isPrimary: true,
+				supportsBulk: true,
 				callback: onFixThreats,
 				isEligible( item ) {
 					if ( ! onFixThreats ) {
diff --git a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
index 4839415084b80..52afdded5ad24 100644
--- a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
@@ -96,7 +96,7 @@ Default.args = {
 				name: 'WP Super Cache',
 				slug: 'wp-super-cache',
 				version: '1.6.3',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 		{
@@ -142,7 +142,7 @@ Default.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.4.5',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 	],
@@ -197,7 +197,7 @@ FixerStatuses.args = {
 				name: 'Example Plugin',
 				slug: 'example-plugin',
 				version: '1.2.3',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 		{
@@ -216,7 +216,7 @@ FixerStatuses.args = {
 				name: 'Example Theme',
 				slug: 'example-theme',
 				version: '2.2.2',
-				type: 'themes',
+				type: 'theme',
 			},
 		},
 		{
@@ -235,7 +235,7 @@ FixerStatuses.args = {
 				name: 'Example Theme II',
 				slug: 'example-theme-2',
 				version: '3.3.3',
-				type: 'themes',
+				type: 'theme',
 			},
 		},
 		{
@@ -292,7 +292,7 @@ FreeResults.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.2.3',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 		{
@@ -307,7 +307,7 @@ FreeResults.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.4.5',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 		{
@@ -321,7 +321,7 @@ FreeResults.args = {
 				name: 'WP Super Cache',
 				slug: 'wp-super-cache',
 				version: '1.6.3',
-				type: 'plugins',
+				type: 'plugin',
 			},
 		},
 	],
diff --git a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
index e5154b472664d..2e7dfea35d673 100644
--- a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
+++ b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
@@ -39,7 +39,7 @@ const data = [
 			name: 'WooCommerce',
 			slug: 'woocommerce',
 			version: '3.2.3',
-			type: 'plugins' as const,
+			type: 'plugin' as const,
 		},
 		fixedIn: '3.2.4',
 	},
diff --git a/projects/js-packages/scan/changelog/fix-scan-extension-type b/projects/js-packages/scan/changelog/fix-scan-extension-type
deleted file mode 100644
index dbeee66ac5b57..0000000000000
--- a/projects/js-packages/scan/changelog/fix-scan-extension-type
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: changed
-Comment: Fixed a type value.
-
-
diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts
index 22f6b06477163..19f76cce6875a 100644
--- a/projects/js-packages/scan/src/types/threats.ts
+++ b/projects/js-packages/scan/src/types/threats.ts
@@ -11,14 +11,14 @@ export type ScanReportExtension = {
 	name?: string;
 	version?: string;
 	threats: Threat[];
-	type: 'plugins' | 'themes' | 'core' | 'files';
+	type: 'plugin' | 'theme' | 'core' | 'files';
 };
 
 export type Extension = {
-	slug: string;
+	slug?: string;
 	name: string;
 	version: string;
-	type: 'plugins' | 'themes' | 'core';
+	type: 'plugin' | 'theme' | 'core';
 };
 
 export type Threat = {
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 30a96cbd132d5..29e017c837b68 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -21,9 +21,9 @@ export const getThreatIcon = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return 'wordpress-alt';
-		case 'plugins':
+		case 'plugin':
 			return 'plugins';
-		case 'themes':
+		case 'theme':
 			return 'appearance';
 		case 'file':
 			return 'media-code';
@@ -36,9 +36,9 @@ export const getThreatSubtitle = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
-		case 'plugins':
+		case 'plugin':
 			return __( 'Vulnerable Plugin', 'jetpack-scan' );
-		case 'themes':
+		case 'theme':
 			return __( 'Vulnerable Theme', 'jetpack-scan' );
 		case 'file':
 			return __( 'File Threat', 'jetpack-scan' );
@@ -98,22 +98,23 @@ export const getDetailedFixerAction = ( threat: Threat ) => {
 				return __( 'Delete file', 'jetpack-scan' );
 			}
 
-			if ( threat.extension?.type === 'plugins' ) {
+			if ( threat.extension?.type === 'plugin' ) {
 				return __( 'Delete plugin from site', 'jetpack-scan' );
 			}
 
-			if ( threat.extension?.type === 'themes' ) {
+			if ( threat.extension?.type === 'theme' ) {
 				return __( 'Delete theme from site', 'jetpack-scan' );
 			}
 			break;
 		case 'update':
-			if ( threat.extension?.type === 'plugins' ) {
+			if ( threat.extension?.type === 'plugin' ) {
 				return __( 'Update plugin to newer version', 'jetpack-scan' );
 			}
-			if ( threat.extension?.type === 'themes' ) {
+			if ( threat.extension?.type === 'theme' ) {
 				return __( 'Update theme to newer version', 'jetpack-scan' );
 			}
 			return __( 'Update', 'jetpack-scan' );
+			break;
 		case 'replace':
 		case 'rollback':
 			if ( threat.filename ) {
@@ -144,11 +145,11 @@ export const getFixerDescription = ( threat: Threat ) => {
 				return __( 'Delete the infected file.', 'jetpack-scan' );
 			}
 
-			if ( threat.extension?.type === 'plugins' ) {
+			if ( threat.extension?.type === 'plugin' ) {
 				return __( 'Delete the plugin directory to fix the threat.', 'jetpack-scan' );
 			}
 
-			if ( threat.extension?.type === 'themes' ) {
+			if ( threat.extension?.type === 'theme' ) {
 				return __( 'Delete the theme directory to fix the threat.', 'jetpack-scan' );
 			}
 			break;
diff --git a/projects/plugins/protect/changelog/add-protect-home b/projects/plugins/protect/changelog/add-protect-home
new file mode 100644
index 0000000000000..0bcfedb6fe8ac
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-home
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds a Home page and StatCards
diff --git a/projects/plugins/protect/src/class-jetpack-protect.php b/projects/plugins/protect/src/class-jetpack-protect.php
index 293ccdaeb3ce7..492cded402990 100644
--- a/projects/plugins/protect/src/class-jetpack-protect.php
+++ b/projects/plugins/protect/src/class-jetpack-protect.php
@@ -457,8 +457,9 @@ public static function get_waf_stats() {
 		}
 
 		return array(
-			'blockedRequests'           => Plan::has_required_plan() ? Waf_Stats::get_blocked_requests() : false,
+			'blockedRequests'           => Waf_Stats::get_blocked_requests(),
 			'automaticRulesLastUpdated' => Waf_Stats::get_automatic_rules_last_updated(),
+			'blockedLogins'             => (int) get_option( 'jetpack_protect_blocked_attempts', 0 ),
 		);
 	}
 }
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 68f9359a9bd81..5811238cd266e 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -63,6 +63,7 @@ const AdminPage = ( { children } ) => {
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
 				<Tabs className={ styles.navigation }>
+					<Tab link="/" label={ __( 'Home', 'jetpack-protect' ) } />
 					<Tab
 						link="/scan"
 						label={
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ccf607698084..cb11833a148af 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -9,7 +9,9 @@ import styles from './styles.module.scss';
 
 interface AdminSectionHeroProps {
 	main: React.ReactNode;
+	mainClassName?: string;
 	secondary?: React.ReactNode;
+	secondaryClassName?: string;
 	preserveSecondaryOnMobile?: boolean;
 	spacing?: number;
 }
@@ -26,7 +28,9 @@ interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
 
 const AdminSectionHero: AdminSectionHeroComponent = ( {
 	main,
+	mainClassName,
 	secondary,
+	secondaryClassName,
 	preserveSecondaryOnMobile = true,
 	spacing = 7,
 } ) => {
@@ -37,9 +41,9 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 				spacing={ spacing }
 				gap={ 0 }
 				main={ main }
-				mainClassName={ styles[ 'header-main' ] }
+				mainClassName={ mainClassName }
 				secondary={ secondary }
-				secondaryClassName={ styles[ 'header-secondary' ] }
+				secondaryClassName={ secondaryClassName }
 				preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
 				fluid={ false }
 			/>
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index a414aa9216f5c..021b7cc028da0 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -1,17 +1,3 @@
-.header-main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.header-secondary {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-}
-
 .heading-icon {
     margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 1a9bc87387fa9..95b03d6c7aa25 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,6 +1,5 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, ShieldIcon } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
 import styles from './styles.module.scss';
 
@@ -24,8 +23,8 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 				<>
 					<AdminSectionHero.Heading>
 						<div className={ styles.heading }>
-							<Icon className={ styles.warning } icon={ warning } size={ 54 } />
 							{ __( 'An error occurred', 'jetpack-protect' ) }
+							<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
 						</div>
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
index 6f0750abd02f8..1c89377d4b4b5 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
@@ -4,11 +4,7 @@
 }
 
 .warning {
-    width: 54px;
-    height: 54px;
-    fill: var( --jp-red );
-    margin-left: -8px;
-    margin-right: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
 }
 
 .scan-navigation {
diff --git a/projects/plugins/protect/src/js/components/form-toggle/compact.jsx b/projects/plugins/protect/src/js/components/form-toggle/compact.jsx
deleted file mode 100644
index b72eaf481050e..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/compact.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import FormToggle from '..';
-import styles from './styles.module.scss';
-
-const CompactFormToggle = props => (
-	<FormToggle { ...props } className={ `${ props.className } ${ styles[ 'is-compact' ] }` } />
-);
-
-export default CompactFormToggle;
diff --git a/projects/plugins/protect/src/js/components/form-toggle/index.jsx b/projects/plugins/protect/src/js/components/form-toggle/index.jsx
deleted file mode 100644
index 6caae3daf059b..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback } from 'react';
-import styles from './styles.module.scss';
-
-const FormToggle = ( {
-	ariaLabel,
-	checked = false,
-	className = '',
-	disabled = false,
-	id,
-	onChange = () => {},
-	onKeyDown = () => {},
-	switchClassNames = '',
-	toggling,
-} ) => {
-	const onClick = useCallback(
-		event => {
-			if ( ! disabled ) {
-				onChange( event );
-			}
-		},
-		[ disabled, onChange ]
-	);
-
-	const handleKeyDown = useCallback(
-		event => {
-			if ( disabled ) {
-				return;
-			}
-
-			if ( event.key === 'Enter' || event.key === ' ' ) {
-				event.preventDefault();
-				onChange( event );
-			}
-
-			onKeyDown( event );
-		},
-		[ disabled, onChange, onKeyDown ]
-	);
-
-	return (
-		<>
-			<div>
-				<input
-					className={ `${ styles[ 'form-toggle' ] } ${ className } ${
-						toggling ? styles[ 'is-toggling' ] : ''
-					}` }
-					type="checkbox"
-					checked={ checked }
-					readOnly={ true }
-					disabled={ disabled }
-				/>
-				<span
-					className={ `${ styles[ 'form-toggle__switch' ] } ${ switchClassNames }` }
-					disabled={ disabled }
-					id={ id }
-					onClick={ onClick }
-					onKeyDown={ handleKeyDown }
-					role="checkbox"
-					aria-checked={ checked }
-					aria-label={ ariaLabel }
-					tabIndex={ disabled ? -1 : 0 }
-				/>
-			</div>
-		</>
-	);
-};
-
-export default FormToggle;
diff --git a/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
deleted file mode 100644
index c57b140c37f7f..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/stories/index.stories.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import FormToggle from '..';
-
-export default {
-	title: 'Plugins/Protect/FormToggle',
-	component: FormToggle,
-};
-
-const Template = args => {
-	const [ checked, setChecked ] = useState( args.checked );
-
-	const handleChecked = useCallback( () => {
-		setChecked( ! checked );
-	}, [ checked ] );
-
-	return <FormToggle { ...args } checked={ checked } onChange={ handleChecked } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	checked: false,
-	disabled: false,
-};
-
-export const DisabledOff = Template.bind( {} );
-DisabledOff.args = {
-	checked: false,
-	disabled: true,
-};
-
-export const DisabledOn = Template.bind( {} );
-DisabledOn.args = {
-	checked: true,
-	disabled: true,
-};
diff --git a/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss b/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss
deleted file mode 100644
index 1231fbabb44d9..0000000000000
--- a/projects/plugins/protect/src/js/components/form-toggle/styles.module.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.form-toggle[type="checkbox"] {
-	display: none;
-}
-
-.form-toggle__switch {
-	position: relative;
-	display: inline-block;
-	border: 2px solid var( --jp-black );
-	border-radius: 100px;
-	box-sizing: border-box;
-	padding: 2px;
-	width: 48px;
-	height: 24px;
-	vertical-align: middle;
-	outline: 0;
-	cursor: pointer;
-	transition: all .4s ease, box-shadow 0s;
-
-	&:after {
-		position: relative;
-		display: block;
-		content: "";
-		width: 16px;
-		height: 16px;
-	}
-	&:after {
-		left: 0;
-		border-radius: 50%;
-		background: var( --jp-black );
-		transition: all .2s ease;
-	}
-}
-
-.form-toggle {
-
-	&:checked {
-
-		& + .form-toggle__switch:after {
-			left: 22px;
-		}
-
-		&:disabled + .form-toggle__switch {
-			border-color: var( --jp-black );
-			background-color: var( --jp-black );
-
-			&:after {
-				background-color: var( --jp-white );
-			}
-		}
-
-		&:not( :disabled ) + .form-toggle__switch {
-			border-color: var( --jp-green );
-			background-color: var( --jp-green );
-
-			&:after {
-				background-color: var( --jp-white );
-			}
-		}
-
-	}
-
-
-	&:disabled {
-		+ span.form-toggle__switch {
-			opacity: 0.25;
-			cursor: default;
-		}
-	}
-}
-
-.form-toggle.is-compact {
-	+ .form-toggle__switch {
-		border-radius: 8px;
-		width: 24px;
-		height: 16px;
-
-		&:after {
-			width: 12px;
-			height: 12px;
-		}
-	}
-	&:checked {
-		+ .form-toggle__switch {
-			&:after {
-				left: 8px;
-			}
-		}
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 0f857430d92d8..cce525d8ece9d 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -48,7 +48,7 @@ const ConnectedPricingTable = () => {
 	const getProtectFree = useCallback( async () => {
 		recordEvent( 'jetpack_protect_connected_product_activated' );
 		await connectSiteMutation.mutateAsync();
-		navigate( '/scan' );
+		navigate( '/' );
 	}, [ connectSiteMutation, recordEvent, navigate ] );
 
 	const args = {
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
index 19ee4309e55a5..61458aa4d46e6 100644
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
@@ -43,7 +43,7 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 	fluid,
 } ) => {
 	// Ensure the correct typing for useBreakpointMatch
-	const [ isSmall, isLarge ] = useBreakpointMatch( [ 'sm', 'lg' ] );
+	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ] );
 
 	/*
 	 * By convention, secondary section is not shown when:
@@ -59,7 +59,7 @@ const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
 					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
 						{ main }
 					</Col>
-					{ isLarge && <Col lg={ 1 } /> }
+					<Col lg={ 1 } />
 					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
 						{ secondary }
 					</Col>
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss b/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
deleted file mode 100644
index 5405c6e28a9b4..0000000000000
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/styles.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// seventy-five layout
-// Handle large lg size from here,
-// adding a gap on one column
-// in between main and secondary sections.
-@media ( min-width: 960px ) {
-	.main {
-		grid-column: 1 / span 6;
-	}
-
-	.secondary {
-		grid-column: 8 / span 5;
-	}
-}
diff --git a/projects/plugins/protect/src/js/hooks/use-plan.tsx b/projects/plugins/protect/src/js/hooks/use-plan.tsx
index b5ab18da01875..f5cd1d54943b9 100644
--- a/projects/plugins/protect/src/js/hooks/use-plan.tsx
+++ b/projects/plugins/protect/src/js/hooks/use-plan.tsx
@@ -48,7 +48,7 @@ export default function usePlan( { redirectUrl }: { redirectUrl?: string } = {}
 
 	const { run: checkout } = useProductCheckoutWorkflow( {
 		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: redirectUrl || adminUrl,
+		redirectUrl: redirectUrl || adminUrl + '#/scan',
 		siteProductAvailabilityHandler: API.checkPlan,
 		useBlogIdSuffix: true,
 		connectAfterCheckout: false,
diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx
index 2b91f4b090b92..4438d5021a664 100644
--- a/projects/plugins/protect/src/js/index.tsx
+++ b/projects/plugins/protect/src/js/index.tsx
@@ -11,6 +11,7 @@ import { NoticeProvider } from './hooks/use-notices';
 import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
+import HomeRoute from './routes/home';
 import ScanRoute from './routes/scan';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
@@ -56,6 +57,7 @@ function render() {
 									<ScrollToTop />
 									<Routes>
 										<Route path="/setup" element={ <SetupRoute /> } />
+										<Route path="/" element={ <HomeRoute /> } />
 										<Route path="/scan" element={ <ScanRoute /> } />
 										<Route
 											path="/scan/history"
@@ -74,7 +76,7 @@ function render() {
 											}
 										/>
 										<Route path="/firewall" element={ <FirewallRoute /> } />
-										<Route path="*" element={ <Navigate to="/scan" replace /> } />
+										<Route path="*" element={ <Navigate to="/" replace /> } />
 									</Routes>
 								</HashRouter>
 								<Modal />
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index 3f70a75509b76..bc6c87002e849 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -5,6 +5,7 @@ import AdminSectionHero from '../../components/admin-section-hero';
 import useWafData from '../../hooks/use-waf-data';
 import FirewallStatCards from './firewall-statcards';
 import FirewallSubheading from './firewall-subheading';
+import styles from './styles.module.scss';
 
 const FirewallAdminSectionHero = () => {
 	const {
@@ -85,6 +86,7 @@ const FirewallAdminSectionHero = () => {
 
 	return (
 		<AdminSectionHero
+			mainClassName={ styles[ 'home-header-main' ] }
 			main={
 				<>
 					<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } />
@@ -92,6 +94,7 @@ const FirewallAdminSectionHero = () => {
 					<AdminSectionHero.Subheading>{ subheading }</AdminSectionHero.Subheading>
 				</>
 			}
+			secondaryClassName={ styles[ 'home-header-main' ] }
 			secondary={ wafSupported && <FirewallStatCards /> }
 		/>
 	);
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
index d23055afb14b3..661a72684c376 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -1,8 +1,7 @@
-import { AdminSectionHero, Title, Text, Button } from '@automattic/jetpack-components';
-import { CheckboxControl } from '@wordpress/components';
+import { Title, Text, Button, ToggleControl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
+import AdminSectionHero from '../../components/admin-section-hero';
 import useModal from '../../hooks/use-modal';
 import useNotices from '../../hooks/use-notices';
 import useWafData from '../../hooks/use-waf-data';
@@ -23,7 +22,7 @@ const StandaloneMode = () => {
 	return (
 		<div className={ styles[ 'standalone-mode-section' ] }>
 			<Title>{ __( 'Standalone mode', 'jetpack-protect' ) }</Title>
-			<Text mb={ 2 }>
+			<Text>
 				{ __(
 					'Learn how you can execute the firewall before WordPress initializes. This mode offers the most protection.',
 					'jetpack-protect'
@@ -69,14 +68,15 @@ const ShareDebugData = () => {
 	}, [ jetpackWafShareDebugData ] );
 
 	return (
-		<div className={ styles[ 'share-data-section' ] }>
-			<Title mb={ 2 }>{ __( 'Share detailed data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'footer-checkbox' ] }>
-				<CheckboxControl
+		<div>
+			<Title>{ __( 'Share detailed data with Jetpack', 'jetpack-protect' ) }</Title>
+			<div className={ styles[ 'share-data-section' ] }>
+				<ToggleControl
+					className={ styles[ 'share-data-toggle' ] }
 					checked={ Boolean( settings.jetpack_waf_share_debug_data ) }
 					onChange={ handleShareDebugDataChange }
 					disabled={ isUpdating }
-					__nextHasNoMarginBottom={ true }
+					size="small"
 				/>
 				<Text>
 					{ __(
@@ -114,14 +114,15 @@ const ShareData = () => {
 	}, [ jetpackWafShareData ] );
 
 	return (
-		<div className={ styles[ 'share-data-section' ] }>
-			<Title mb={ 2 }>{ __( 'Share basic data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'footer-checkbox' ] }>
-				<CheckboxControl
+		<div>
+			<Title>{ __( 'Share basic data with Jetpack', 'jetpack-protect' ) }</Title>
+			<div className={ styles[ 'share-data-section' ] }>
+				<ToggleControl
+					className={ styles[ 'share-data-toggle' ] }
 					checked={ Boolean( settings.jetpack_waf_share_data ) }
 					onChange={ handleShareDataChange }
 					disabled={ isUpdating }
-					__nextHasNoMarginBottom={ true }
+					size="small"
 				/>
 				<Text>
 					{ __(
@@ -138,20 +139,23 @@ const FirewallFooter = () => {
 	const { isEnabled } = useWafData();
 
 	return (
-		<AdminSectionHero>
-			<SeventyFiveLayout
-				main={ <StandaloneMode /> }
-				secondary={
-					isEnabled && (
-						<>
-							<ShareData />
-							<ShareDebugData />
-						</>
-					)
-				}
-				preserveSecondaryOnMobile={ true }
-			/>
-		</AdminSectionHero>
+		<AdminSectionHero
+			spacing={ 7 }
+			main={
+				<div className={ styles[ 'footer-main' ] }>
+					<StandaloneMode />
+				</div>
+			}
+			secondary={
+				isEnabled && (
+					<div className={ styles[ 'footer-secondary' ] }>
+						<ShareData />
+						<ShareDebugData />
+					</div>
+				)
+			}
+			preserveSecondaryOnMobile={ true }
+		/>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
index 15c80df763c18..7b1fd7cbbbede 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
@@ -1,13 +1,11 @@
-import { Text, useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
+import { useBreakpointMatch, StatCard } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, shield, chartBar } from '@wordpress/icons';
 import { useCallback, useMemo } from 'react';
-import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
 import styles from './styles.module.scss';
 
 const FirewallStatCards = () => {
-	const { hasPlan } = usePlan();
 	const {
 		config: { bruteForceProtection: isBruteForceModuleEnabled },
 		isEnabled: isWafModuleEnabled,
@@ -22,26 +20,22 @@ const FirewallStatCards = () => {
 	const { currentDay: currentDayBlockCount, thirtyDays: thirtyDayBlockCounts } = stats
 		? stats.blockedRequests
 		: { currentDay: 0, thirtyDays: 0 };
-	const isFeatureDisabled = ! isSupportedWafFeatureEnabled || ! hasPlan;
 
 	const defaultArgs = useMemo(
 		() => ( {
-			className: isFeatureDisabled ? styles.disabled : styles.active,
+			className: ! isSupportedWafFeatureEnabled ? styles.disabled : styles.active,
 			variant: isSmall ? 'horizontal' : 'square',
 		} ),
-		[ isFeatureDisabled, isSmall ]
+		[ isSupportedWafFeatureEnabled, isSmall ]
 	);
 
 	const StatCardIcon = useCallback(
 		( { icon } ) => (
 			<span className={ styles[ 'stat-card-icon' ] }>
 				<Icon icon={ icon } />
-				{ ! isSmall && ! hasPlan && (
-					<Text variant="label">{ __( 'Paid feature', 'jetpack-protect' ) }</Text>
-				) }
 			</span>
 		),
-		[ isSmall, hasPlan ]
+		[]
 	);
 
 	const StatCardLabel = useCallback(
@@ -77,9 +71,9 @@ const FirewallStatCards = () => {
 			...defaultArgs,
 			icon: <StatCardIcon icon={ shield } />,
 			label: <StatCardLabel period={ 24 } units="hours" />,
-			value: isFeatureDisabled ? 0 : currentDayBlockCount,
+			value: ! isSupportedWafFeatureEnabled ? 0 : currentDayBlockCount,
 		} ),
-		[ defaultArgs, StatCardIcon, StatCardLabel, isFeatureDisabled, currentDayBlockCount ]
+		[ defaultArgs, StatCardIcon, StatCardLabel, isSupportedWafFeatureEnabled, currentDayBlockCount ]
 	);
 
 	const thirtyDaysArgs = useMemo(
@@ -87,13 +81,13 @@ const FirewallStatCards = () => {
 			...defaultArgs,
 			icon: <StatCardIcon icon={ chartBar } />,
 			label: <StatCardLabel period={ 30 } units="days" />,
-			value: isFeatureDisabled ? 0 : thirtyDayBlockCounts,
+			value: ! isSupportedWafFeatureEnabled ? 0 : thirtyDayBlockCounts,
 		} ),
-		[ defaultArgs, StatCardIcon, StatCardLabel, isFeatureDisabled, thirtyDayBlockCounts ]
+		[ defaultArgs, StatCardIcon, StatCardLabel, isSupportedWafFeatureEnabled, thirtyDayBlockCounts ]
 	);
 
 	return (
-		<div className={ styles[ 'stat-card-wrapper' ] }>
+		<div className={ styles[ 'stat-cards-wrapper' ] }>
 			<StatCard { ...currentDayArgs } />
 			<StatCard { ...thirtyDaysArgs } />
 		</div>
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 52ec1333bd958..3e8ed5012ccd7 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -5,6 +5,7 @@ import {
 	Text,
 	ContextualUpgradeTrigger,
 	useBreakpointMatch,
+	ToggleControl,
 	Notice as JetpackNotice,
 } from '@automattic/jetpack-components';
 import { Popover } from '@wordpress/components';
@@ -14,7 +15,6 @@ import { Icon, closeSmall } from '@wordpress/icons';
 import moment from 'moment';
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import AdminPage from '../../components/admin-page';
-import FormToggle from '../../components/form-toggle';
 import Textarea from '../../components/textarea';
 import { FREE_PLUGIN_SUPPORT_URL, PAID_PLUGIN_SUPPORT_URL } from '../../constants';
 import useWafSeenMutation from '../../data/waf/use-waf-seen-mutation';
@@ -115,24 +115,6 @@ const FirewallPage = () => {
 		[ formState ]
 	);
 
-	/**
-	 * Returns an event listener that syncs the target input's value with form state, before calling a callback.
-	 *
-	 * @param {*} callback - The function to call with the input's value.
-	 * @return {Function} - Event listener
-	 */
-	const withFormState = callback => {
-		return event => {
-			const { id, value, ariaChecked } = event.target;
-			const inputValue = ariaChecked ? ariaChecked !== 'true' : value;
-			setFormState( prevState => ( {
-				...prevState,
-				[ id ]: inputValue,
-			} ) );
-			return callback( inputValue );
-		};
-	};
-
 	/**
 	 * Handle Automatic Rules Change
 	 *
@@ -282,9 +264,9 @@ const FirewallPage = () => {
 				}` }
 			>
 				<div className={ styles[ 'toggle-section__control' ] }>
-					<FormToggle
+					<ToggleControl
 						checked={ canToggleAutomaticRules ? jetpackWafAutomaticRules : false }
-						onChange={ withFormState( handleAutomaticRulesChange ) }
+						onChange={ handleAutomaticRulesChange }
 						disabled={ ! canEditFirewallSettings || ! canToggleAutomaticRules || isUpdating }
 					/>
 					{ hasPlan && upgradeIsSeen === false && (
@@ -415,10 +397,9 @@ const FirewallPage = () => {
 	const bruteForceProtectionSettings = (
 		<div className={ styles[ 'toggle-section' ] }>
 			<div className={ styles[ 'toggle-section__control' ] }>
-				<FormToggle
-					id="brute_force_protection"
+				<ToggleControl
 					checked={ isBruteForceModuleEnabled }
-					onChange={ withFormState( toggleBruteForceProtection ) }
+					onChange={ toggleBruteForceProtection }
 					disabled={ isUpdating }
 				/>
 			</div>
@@ -443,10 +424,9 @@ const FirewallPage = () => {
 			}` }
 		>
 			<div className={ styles[ 'toggle-section__control' ] }>
-				<FormToggle
-					id="jetpack_waf_ip_block_list_enabled"
+				<ToggleControl
 					checked={ ipBlockListEnabled }
-					onChange={ withFormState( toggleIpBlockList ) }
+					onChange={ toggleIpBlockList }
 					disabled={ ! canEditFirewallSettings }
 				/>
 			</div>
@@ -499,8 +479,7 @@ const FirewallPage = () => {
 		<>
 			<div className={ styles[ 'toggle-section' ] }>
 				<div className={ styles[ 'toggle-section__control' ] }>
-					<FormToggle
-						id="jetpack_waf_ip_allow_list_enabled"
+					<ToggleControl
 						checked={ jetpackWafIpAllowListEnabled }
 						onChange={ toggleIpAllowList }
 						disabled={ isUpdating }
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index c0350ff100e6b..66d108ca1ec75 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -145,10 +145,9 @@
     align-items: center;
 }
 
-.stat-card-wrapper {
+.stat-cards-wrapper {
     display: flex;
-    margin-left: auto;
-    flex-wrap: wrap;
+    justify-content: flex-end;
 
     >:first-child {
         margin-right: calc( var( --spacing-base ) * 3 ); // 24px
@@ -171,69 +170,66 @@
     white-space: nowrap;
 }
 
-@media ( max-width: 1115px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-    }
-}
-
-@media ( max-width: 599px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.icon-tooltip {
+    max-height: 20px;
+    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
 
-        >:first-child {
-            margin-right: 0;
-            margin-bottom: var( --spacing-base ); // 8px
-        }
+    &__icon {
+        color: var( --jp-gray-20 );
     }
 
-    .stat-card-icon {
-        margin-bottom: 0;
+    &__content {
+        color: var( --jp-gray-70 );
+        font-weight: 400;
+        line-height: 24px;
     }
 }
 
-.footer-checkbox {
+.footer-main {
+    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.footer-secondary {
     display: flex;
-    align-items: center;
+    gap: calc( var( --spacing-base ) * 7 ); // 56px
+    flex-direction: column;
+}
 
-    & input[type=checkbox]:checked {
-        background: var( --jp-green-40 );
-        border-color: var( --jp-green-40 );
-    }
+.share-data-section {
+    display: flex;
 
-    & input[type=checkbox]:indeterminate {
-        background: var( --jp-green-40 );
-        border-color: var( --jp-green-40 );
+    .share-data-toggle {
+        margin-top: calc( var( --spacing-base ) / 2 ); // 4px
+        margin-right: var( --spacing-base ); // 8px
     }
-
-    & input[type=checkbox]:focus {
-        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --jp-green-40 );
-    } 
-}
-
-.standalone-mode-section, .share-data-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.icon-tooltip {
-    max-height: 20px;
-    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-
-    &__icon {
-        color: var( --jp-gray-20 );
+@media ( max-width: 1200px ) {
+    .stat-cards-wrapper {
+        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+        justify-content: flex-start;
+    }
+    
+    .home-header-main {
+        grid-column: 1 / -1;
     }
 
-    &__content {
-        color: var( --jp-gray-70 );
-        font-weight: 400;
-        line-height: 24px;
+    .home-header-secondary {
+        grid-column: 1 / -1;
     }
 }
 
 @media ( max-width: 599px ) {
+    .stat-cards-wrapper {
+        flex-direction: column;
+        gap: var( --spacing-base ); // 8px
+    }
 
-    .share-data-section {
-        margin-top: 0;
+    .stat-card-icon {
+        margin-bottom: 0;
     }
-}
+
+    .footer-main {
+        margin-right: calc( var( --spacing-base ) * 4 ); // 32px
+    }
+}
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
new file mode 100644
index 0000000000000..cc582cfea5ae5
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -0,0 +1,61 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AdminSectionHero from '../../components/admin-section-hero';
+import usePlan from '../../hooks/use-plan';
+import HomeStatCards from './home-statcards';
+import styles from './styles.module.scss';
+
+const HomeAdminSectionHero: React.FC = () => {
+	const { hasPlan } = usePlan();
+	const navigate = useNavigate();
+	const handleScanReportClick = useCallback( () => {
+		navigate( '/scan' );
+	}, [ navigate ] );
+
+	return (
+		<AdminSectionHero
+			mainClassName={ styles[ 'home-header-main' ] }
+			main={
+				<>
+					<AdminSectionHero.Heading>
+						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
+					</AdminSectionHero.Heading>
+					<AdminSectionHero.Subheading>
+						<>
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ sprintf(
+									// translators: %s is replaced with "threats" or "vulnerabilities" depending on the user's plan.
+									__(
+										'We stay ahead of security %s to keep your site protected.',
+										'jetpack-protect'
+									),
+									hasPlan
+										? __( 'threats', 'jetpack-protect' )
+										: __(
+												'vulnerabilities',
+												'jetpack-protect',
+												/* dummy arg to avoid bad minification */ 0
+										  )
+								) }
+							</Text>
+							<Button
+								className={ styles[ 'scan-report' ] }
+								variant="primary"
+								weight="regular"
+								onClick={ handleScanReportClick }
+							>
+								{ __( 'View scan report', 'jetpack-protect' ) }
+							</Button>
+						</>
+					</AdminSectionHero.Subheading>
+				</>
+			}
+			secondaryClassName={ styles[ 'home-header-secondary' ] }
+			secondary={ <HomeStatCards /> }
+		/>
+	);
+};
+
+export default HomeAdminSectionHero;
diff --git a/projects/plugins/protect/src/js/routes/home/home-statcards.jsx b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
new file mode 100644
index 0000000000000..2d1dc34cac147
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-statcards.jsx
@@ -0,0 +1,274 @@
+import { Text, useBreakpointMatch, StatCard, ShieldIcon } from '@automattic/jetpack-components';
+import { Spinner, Tooltip } from '@wordpress/components';
+import { dateI18n } from '@wordpress/date';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
+import usePlan from '../../hooks/use-plan';
+import useWafData from '../../hooks/use-waf-data';
+import styles from './styles.module.scss';
+
+const IconWithLabel = ( { label, isSmall, icon } ) => (
+	<span className={ styles[ 'stat-card-icon' ] }>
+		{ icon }
+		{ ! isSmall && (
+			<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+				{ label }
+			</Text>
+		) }
+	</span>
+);
+
+const HomeStatCard = ( { text, args } ) => (
+	<Tooltip className={ styles[ 'stat-card-tooltip' ] } text={ text }>
+		<div className={ styles[ 'stat-card-wrapper' ] }>
+			<StatCard { ...args } />
+		</div>
+	</Tooltip>
+);
+
+const HomeStatCards = () => {
+	const ICON_HEIGHT = 20;
+
+	const { hasPlan } = usePlan();
+	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+
+	const { data: status } = useScanStatusQuery();
+	const scanning = isScanInProgress( status );
+	const numThreats = status.threats.length;
+	const scanError = status.error;
+
+	let lastCheckedLocalTimestamp = null;
+	if ( status.lastChecked ) {
+		// Convert the lastChecked UTC date to a local timestamp
+		lastCheckedLocalTimestamp = dateI18n(
+			'F jS g:i A',
+			new Date( status.lastChecked + ' UTC' ).getTime(),
+			false
+		);
+	}
+
+	const {
+		config: { bruteForceProtection: isBruteForceModuleEnabled },
+		isEnabled: isWafModuleEnabled,
+		wafSupported,
+		stats,
+	} = useWafData();
+
+	const {
+		blockedRequests: { allTime: allTimeBlockedRequestsCount = 0 } = {},
+		blockedLogins: allTimeBlockedLoginsCount = 0,
+	} = stats || {};
+
+	const variant = useMemo( () => ( isSmall ? 'horizontal' : 'square' ), [ isSmall ] );
+
+	const lastCheckedMessage = useMemo( () => {
+		if ( scanning ) {
+			return __( 'Your results will be ready soon.', 'jetpack-protect' );
+		}
+
+		if ( scanError ) {
+			return __(
+				'Please check your connection or try scanning again in a few minutes.',
+				'jetpack-protect'
+			);
+		}
+
+		if ( lastCheckedLocalTimestamp ) {
+			if ( numThreats > 0 ) {
+				if ( hasPlan ) {
+					return sprintf(
+						// translators: %1$s: date/time, %2$d: number
+						_n(
+							'Last checked on %1$s: We found %2$d threat.',
+							'Last checked on %1$s: We found %2$d threats.',
+							numThreats,
+							'jetpack-protect'
+						),
+						lastCheckedLocalTimestamp,
+						numThreats
+					);
+				}
+				return sprintf(
+					// translators: %1$s: date/time, %2$d: number
+					_n(
+						'Last checked on %1$s: We found %2$d vulnerability.',
+						'Last checked on %1$s: We found %2$d vulnerabilities.',
+						numThreats,
+						'jetpack-protect'
+					),
+					lastCheckedLocalTimestamp,
+					numThreats
+				);
+			}
+			return sprintf(
+				// translators: %s: date/time
+				__( 'Last checked on %s: Your site is secure.', 'jetpack-protect' ),
+				lastCheckedLocalTimestamp
+			);
+		}
+		if ( hasPlan ) {
+			return sprintf(
+				// translators: %d: number
+				_n(
+					'Last scan we found %d threat.',
+					'Last scan we found %d threats.',
+					numThreats,
+					'jetpack-protect'
+				),
+				numThreats
+			);
+		}
+		return sprintf(
+			// translators: %d: number
+			_n(
+				'Last scan we found %2$d vulnerability.',
+				'Last scan we found %2$d vulnerabilities.',
+				numThreats,
+				'jetpack-protect'
+			),
+			numThreats
+		);
+	}, [ scanError, scanning, numThreats, lastCheckedLocalTimestamp, hasPlan ] );
+
+	const scanArgs = useMemo( () => {
+		let scanIcon;
+		if ( scanning ) {
+			scanIcon = <Spinner />;
+		} else if ( scanError ) {
+			scanIcon = <ShieldIcon variant="error" height={ ICON_HEIGHT } />;
+		} else {
+			scanIcon = (
+				<ShieldIcon
+					variant={ numThreats ? 'warning' : 'success' }
+					height={ ICON_HEIGHT }
+					color={ numThreats ? '#F0B849' : '#069E08' }
+				/>
+			);
+		}
+
+		let scanLabel;
+		if ( scanning ) {
+			scanLabel = __( 'One moment, please…', 'jetpack-protect' );
+		} else if ( scanError ) {
+			scanLabel = __( 'An error occurred', 'jetpack-protect' );
+		} else if ( hasPlan ) {
+			scanLabel = _n( 'Threat identified', 'Threats identified', numThreats, 'jetpack-protect' );
+		} else {
+			scanLabel = _n(
+				'Vulnerability identified',
+				'Vulnerabilities identified',
+				numThreats,
+				'jetpack-protect'
+			);
+		}
+
+		return {
+			variant,
+			icon: (
+				<IconWithLabel
+					icon={ scanIcon }
+					label={
+						scanning
+							? __( 'Scanning', 'jetpack-protect' )
+							: __( 'Scan', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 )
+					}
+					isSmall={ isSmall }
+				/>
+			),
+			label: <span className={ styles[ 'stat-card-label' ] }>{ scanLabel }</span>,
+			value: numThreats,
+			hideValue: !! ( scanError || scanning ),
+		};
+	}, [ variant, scanning, ICON_HEIGHT, scanError, numThreats, hasPlan, isSmall ] );
+
+	const wafArgs = useMemo(
+		() => ( {
+			variant: variant,
+			className: isWafModuleEnabled ? styles.active : styles.disabled,
+			icon: (
+				<span className={ styles[ 'stat-card-icon' ] }>
+					<ShieldIcon
+						variant={ ! isWafModuleEnabled ? 'info' : 'success' }
+						height={ ICON_HEIGHT }
+					/>
+					{ ! isSmall && (
+						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+							{ __( 'Firewall', 'jetpack-protect' ) }
+						</Text>
+					) }
+				</span>
+			),
+			label: (
+				<span className={ styles[ 'stat-card-label' ] }>
+					{ __( 'Blocked requests', 'jetpack-protect' ) }
+				</span>
+			),
+			value: allTimeBlockedRequestsCount,
+			hideValue: ! isWafModuleEnabled,
+		} ),
+		[ variant, isWafModuleEnabled, ICON_HEIGHT, isSmall, allTimeBlockedRequestsCount ]
+	);
+
+	const bruteForceArgs = useMemo(
+		() => ( {
+			variant: variant,
+			className: isBruteForceModuleEnabled ? styles.active : styles.disabled,
+			icon: (
+				<span className={ styles[ 'stat-card-icon' ] }>
+					<ShieldIcon
+						variant={ ! isBruteForceModuleEnabled ? 'info' : 'success' }
+						height={ ICON_HEIGHT }
+					/>
+					{ ! isSmall && (
+						<Text className={ styles[ 'stat-card-icon-label' ] } variant="body-extra-small">
+							{ __( 'Brute force', 'jetpack-protect' ) }
+						</Text>
+					) }
+				</span>
+			),
+			label: (
+				<span className={ styles[ 'stat-card-label' ] }>
+					{ __( 'Blocked login attempts', 'jetpack-protect' ) }
+				</span>
+			),
+			value: allTimeBlockedLoginsCount,
+			hideValue: ! isBruteForceModuleEnabled,
+		} ),
+		[ variant, isBruteForceModuleEnabled, ICON_HEIGHT, isSmall, allTimeBlockedLoginsCount ]
+	);
+
+	return (
+		<div className={ styles[ 'stat-cards-wrapper' ] }>
+			<HomeStatCard text={ lastCheckedMessage } args={ scanArgs } />
+			{ wafSupported && (
+				<HomeStatCard
+					text={
+						isWafModuleEnabled
+							? __( 'Untrusted traffic requests blocked all time.', 'jetpack-protect' )
+							: __(
+									"Firewall is off. Untrusted traffic can't be blocked",
+									'jetpack-protect',
+									/* dummy arg to avoid bad minification */ 0
+							  )
+					}
+					args={ wafArgs }
+				/>
+			) }
+			<HomeStatCard
+				text={
+					isBruteForceModuleEnabled
+						? __( 'Total login attempts blocked all time.', 'jetpack-protect' )
+						: __(
+								"Brute force protection is off. Log in attempts can't be blocked.",
+								'jetpack-protect',
+								/* dummy arg to avoid bad minification */ 0
+						  )
+				}
+				args={ bruteForceArgs }
+			/>
+		</div>
+	);
+};
+
+export default HomeStatCards;
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
new file mode 100644
index 0000000000000..718349caaac3f
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -0,0 +1,25 @@
+import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import AdminPage from '../../components/admin-page';
+import HomeAdminSectionHero from './home-admin-section-hero';
+
+/**
+ * Home Page
+ *
+ * The entry point for the Home page.
+ *
+ * @return {Component} The root component for the scan page.
+ */
+const HomePage = () => {
+	return (
+		<AdminPage>
+			<HomeAdminSectionHero />
+			<AdminSection>
+				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
+					<Col>{ /* TODO: Add ScanReport component here */ }</Col>
+				</Container>
+			</AdminSection>
+		</AdminPage>
+	);
+};
+
+export default HomePage;
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
new file mode 100644
index 0000000000000..14d68c2fccd4b
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -0,0 +1,82 @@
+.product-section, .info-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.scan-report {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+}
+
+.stat-cards-wrapper {
+    display: flex;
+    justify-content: flex-start;
+
+    > *:not( last-child ) {
+        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
+    }
+
+    .disabled {
+        opacity: 0.5;
+    }
+}
+
+.stat-card-icon {
+    width: 100%;
+    margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    svg {
+        margin: 0;
+    }
+
+	.active {
+		fill: var( --jp-green-40 );
+	}
+
+	.warning {
+		fill: var( --jp-yellow-40 );
+	}
+
+	.disabled {
+		fill: var( --jp-gray-40 );
+	}
+
+    &-label {
+        color: var( --jp-black );
+        white-space: nowrap;
+    }
+}
+
+.stat-card-tooltip {
+	margin-top: 8px;
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
+
+@media ( max-width: 1600px ) {
+    .stat-cards-wrapper {
+        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+    }
+    
+    .home-header-main {
+        grid-column: 1 / -1;
+    }
+
+    .home-header-secondary {
+        grid-column: 1 / -1;
+    }
+}
+
+@media ( max-width: 599px ) {
+    .stat-cards-wrapper {
+        flex-direction: column;
+        gap: var( --spacing-base ); // 8px
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
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 4db4449b60119..95f2e7d10d0cc 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
@@ -19,6 +19,7 @@ const ScanningAdminSectionHero: React.FC = () => {
 
 	return (
 		<AdminSectionHero
+			mainClassName={ styles[ 'scanning-header-main' ] }
 			main={
 				<>
 					<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
index 163fd23248aaa..84cd9c6a4f434 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -12,3 +12,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.scanning-header-main {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
\ No newline at end of file

From 4dd60b7cc3dd955f440fe39f85617591d1d19a87 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 113/143] Init project branch


From ff92d887df17e588780bcec47025fbcb6a0807a9 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:36 -0800
Subject: [PATCH 114/143] Protect: Add Go to Cloud and Scan now button to
 Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>
---
 .../changelog/add-protect-header-buttons      |  4 +++
 .../src/js/components/admin-page/index.jsx    | 27 +++++++++++++++++--
 .../components/admin-page/styles.module.scss  | 10 +++++++
 .../src/js/components/scan-button/index.jsx   |  4 +++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/add-protect-header-buttons

diff --git a/projects/plugins/protect/changelog/add-protect-header-buttons b/projects/plugins/protect/changelog/add-protect-header-buttons
new file mode 100644
index 0000000000000..24c40f542d7ee
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-protect-header-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds Go to Cloud and Scan now buttons to the primary header
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4579831b5f0a5..4e93ae443aa72 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,16 +1,20 @@
 import {
 	AdminPage as JetpackAdminPage,
+	Button,
 	Container,
+	getRedirectUrl,
 	JetpackProtectLogo,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import useNotices from '../../hooks/use-notices';
+import usePlan from '../../hooks/use-plan';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
+import ScanButton from '../scan-button';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
 
@@ -24,6 +28,8 @@ const AdminPage = ( { children } ) => {
 			current: { threats: numThreats },
 		},
 	} = useProtectData();
+	const location = useLocation();
+	const { hasPlan } = usePlan();
 
 	// Redirect to the setup page if the site is not registered.
 	useEffect( () => {
@@ -36,10 +42,27 @@ const AdminPage = ( { children } ) => {
 		return null;
 	}
 
+	const viewingScanPage = location.pathname.includes( '/scan' );
+
+	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
+	const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
+
 	return (
 		<JetpackAdminPage
 			moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) }
-			header={ <JetpackProtectLogo /> }
+			header={
+				<div className={ styles.header }>
+					<JetpackProtectLogo />
+					{ hasPlan && viewingScanPage && (
+						<div className={ styles.header__scan_buttons }>
+							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+								{ __( 'Go to Cloud', 'jetpack-protect' ) }
+							</Button>
+							<ScanButton />
+						</div>
+					) }
+				</div>
+			}
 		>
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index e70d2cdb076c7..adf7dc594b907 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -2,6 +2,16 @@
     white-space: nowrap;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+
+    &__scan_buttons {
+        display: flex;
+        gap: calc( var( --spacing-base ) * 2 ); // 16px
+    }
+}
+
 .navigation {
     margin-top: calc( var( --spacing-base ) * 3 * -1 ); // -24px
 }
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 9df71f5984cf1..19134582abe3c 100644
--- a/projects/plugins/protect/src/js/components/scan-button/index.jsx
+++ b/projects/plugins/protect/src/js/components/scan-button/index.jsx
@@ -1,12 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import React, { forwardRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useStartScanMutator from '../../data/scan/use-start-scan-mutation';
 
 const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props }, ref ) => {
 	const startScanMutation = useStartScanMutator();
 	const { data: status } = useScanStatusQuery();
+	const navigate = useNavigate();
 
 	const disabled = useMemo( () => {
 		return startScanMutation.isPending || isScanInProgress( status );
@@ -15,6 +17,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 	const handleScanClick = () => {
 		return event => {
 			event.preventDefault();
+			navigate( '/scan' );
 			startScanMutation.mutate();
 		};
 	};
@@ -25,6 +28,7 @@ const ScanButton = forwardRef( ( { variant = 'secondary', children, ...props },
 			variant={ variant }
 			onClick={ handleScanClick() }
 			disabled={ disabled }
+			weight={ 'regular' }
 			{ ...props }
 		>
 			{ children ?? __( 'Scan now', 'jetpack-protect' ) }

From 39e40946052c87f10efe686366f80dbceb0cc8bb Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:10:46 -0800
Subject: [PATCH 115/143] Protect: Update Scan and History headers (#40058)

* Update Scan and History section header structure/content

* changelog

* Update projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx

Co-authored-by: Nate Weller <nate.weller@automattic.com>

---------

Co-authored-by: Nate Weller <nate.weller@automattic.com>
---
 .../update-protect-scan-and-history-headers   |   4 +
 .../history/history-admin-section-hero.tsx    |  36 +++---
 .../js/routes/scan/history/styles.module.scss |   8 --
 .../routes/scan/scan-admin-section-hero.tsx   | 107 +++++++++++++-----
 .../src/js/routes/scan/styles.module.scss     |   8 +-
 5 files changed, 104 insertions(+), 59 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-scan-and-history-headers

diff --git a/projects/plugins/protect/changelog/update-protect-scan-and-history-headers b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
new file mode 100644
index 0000000000000..cd930e395e0ed
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-protect-scan-and-history-headers
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates the structure and content of the Scan and History page headers
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 9c8f30b7b8067..4aa517f5f120b 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -1,11 +1,10 @@
-import { Status, Text } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import AdminSectionHero from '../../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import ScanNavigation from '../../../components/scan-navigation';
 import useThreatsList from '../../../components/threats-list/use-threats-list';
 import useProtectData from '../../../hooks/use-protect-data';
 import styles from './styles.module.scss';
@@ -48,35 +47,34 @@ const HistoryAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status="active" label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text>
+						{ oldestFirstDetected ? (
+							<span className={ styles[ 'subheading-content' ] }>
+								{ sprintf(
+									/* translators: %s: Oldest first detected date */
+									__( '%s - Today', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
+								) }
+							</span>
+						) : (
+							__( 'Most recent results', 'jetpack-protect' )
+						) }
+					</Text>
 					<AdminSectionHero.Heading showIcon>
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
-									__( '%1$s previously active %2$s', 'jetpack-protect' ),
+									__( '%1$s previous %2$s', 'jetpack-protect' ),
 									numAllThreats,
 									numAllThreats === 1 ? 'threat' : 'threats'
 							  )
-							: __( 'No previously active threats', 'jetpack-protect' ) }
+							: __( 'No previous threats', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<Text>
-							{ oldestFirstDetected ? (
-								<span className={ styles[ 'subheading-content' ] }>
-									{ sprintf(
-										/* translators: %s: Oldest first detected date */
-										__( '%s - Today', 'jetpack-protect' ),
-										dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-									) }
-								</span>
-							) : (
-								__( 'Most recent results', 'jetpack-protect' )
-							) }
+							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
 						</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
index f66602e59a9e9..d30f3e0ac3344 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
@@ -8,10 +8,6 @@
 	flex-direction: column;
 }
 
-.subheading-content {
-	font-weight: bold;
-}
-
 .list-header {
 	display: flex;
 	justify-content: flex-end;
@@ -38,8 +34,4 @@
 	.list-title {
 		display: none;
 	}
-}
-
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
 }
\ No newline at end of file
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 60d484cd4a16f..1c5cc6cac49b9 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
@@ -1,30 +1,49 @@
-import { Text, Status, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
+import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import ScanNavigation from '../../components/scan-navigation';
+import useThreatsList from '../../components/threats-list/use-threats-list';
 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';
 import useProtectData from '../../hooks/use-protect-data';
 import ScanningAdminSectionHero from './scanning-admin-section-hero';
 import styles from './styles.module.scss';
 
 const ScanAdminSectionHero: React.FC = () => {
-	const { hasPlan } = usePlan();
-	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const {
 		counts: {
 			current: { threats: numThreats },
 		},
 		lastChecked,
 	} = useProtectData();
+	const { hasPlan } = usePlan();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
+	const { list } = useThreatsList();
+	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
+	const { setModal } = useModal();
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
+	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
+
+	// List of fixable threats that do not have a fix in progress
+	const fixableList = useMemo( () => {
+		return list.filter( threat => {
+			const threatId = parseInt( threat.id );
+			return (
+				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
+			);
+		} );
+	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+
+	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
 	if ( lastChecked ) {
@@ -32,7 +51,17 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
 	}
 
-	if ( isScanInProgress( status ) ) {
+	const handleShowAutoFixersClick = threatList => {
+		return event => {
+			event.preventDefault();
+			setModal( {
+				type: 'FIX_ALL_THREATS',
+				props: { threatList },
+			} );
+		};
+	};
+
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -50,12 +79,27 @@ const ScanAdminSectionHero: React.FC = () => {
 		<AdminSectionHero
 			main={
 				<>
-					<Status status={ 'active' } label={ __( 'Active', 'jetpack-protect' ) } />
+					<Text ref={ setDailyScansPopoverAnchor }>
+						{ lastCheckedLocalTimestamp
+							? sprintf(
+									// translators: %s: date and time of the last scan
+									__( '%s results', 'jetpack-protect' ),
+									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
+							  )
+							: __( 'Most recent results', 'jetpack-protect' ) }
+					</Text>
+					{ ! hasPlan && (
+						<OnboardingPopover
+							id="free-daily-scans"
+							position={ isSm ? 'bottom' : 'middle right' }
+							anchor={ dailyScansPopoverAnchor }
+						/>
+					) }
 					<AdminSectionHero.Heading showIcon>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s %2$s found', 'jetpack-protect' ),
+									__( '%1$s active %2$s', 'jetpack-protect' ),
 									numThreats,
 									hasPlan
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
@@ -63,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: sprintf(
 									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No %s found', 'jetpack-protect' ),
+									__( 'No active %s', 'jetpack-protect' ),
 									hasPlan
 										? __( 'threats', 'jetpack-protect' )
 										: __(
@@ -75,31 +119,38 @@ const ScanAdminSectionHero: React.FC = () => {
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text ref={ setDailyScansPopoverAnchor }>
-								{ lastCheckedLocalTimestamp ? (
-									<>
-										<span className={ styles[ 'subheading-content' ] }>
-											{ dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false ) }
-										</span>
-										&nbsp;
-										{ __( 'results', 'jetpack-protect' ) }
-									</>
-								) : (
-									__( 'Most recent results', 'jetpack-protect' )
+							<Text className={ styles[ 'subheading-text' ] }>
+								{ __(
+									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
+									'jetpack-protect'
 								) }
 							</Text>
-							{ ! hasPlan && (
-								<OnboardingPopover
-									id="free-daily-scans"
-									position={ isSm ? 'bottom' : 'middle right' }
-									anchor={ dailyScansPopoverAnchor }
-								/>
+							{ fixableList.length > 0 && (
+								<>
+									<Button
+										className={ styles[ 'auto-fixers' ] }
+										ref={ setShowAutoFixersPopoverAnchor }
+										variant="primary"
+										weight="regular"
+										onClick={ handleShowAutoFixersClick( fixableList ) }
+									>
+										{ sprintf(
+											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+											fixableList.length
+										) }
+									</Button>
+									{ ! scanning && (
+										<OnboardingPopover
+											id="paid-fix-all-threats"
+											position={ isSm ? 'bottom right' : 'middle left' }
+											anchor={ showAutoFixersPopoverAnchor }
+										/>
+									) }
+								</>
 							) }
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 		/>
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 8651420159fa1..908e34f6e71d7 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,5 +1,5 @@
-.subheading-content {
-    font-weight: bold;
+.subheading-text {
+	white-space: nowrap;
 }
 
 .product-section, .info-section {
@@ -7,6 +7,6 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-navigation {
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
\ No newline at end of file

From 9fec01117ca876cd5eb57d8134890875151290a0 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 18 Nov 2024 15:33:35 -0700
Subject: [PATCH 116/143] Protect: de-emphasize cloud link by using link
 variant (#40211)

---
 projects/plugins/protect/src/js/components/admin-page/index.jsx | 2 +-
 .../protect/src/js/components/admin-page/styles.module.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 4e93ae443aa72..2d023560517f3 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -55,7 +55,7 @@ const AdminPage = ( { children } ) => {
 					<JetpackProtectLogo />
 					{ hasPlan && viewingScanPage && (
 						<div className={ styles.header__scan_buttons }>
-							<Button variant="secondary" weight={ 'regular' } href={ goToCloudUrl }>
+							<Button variant="link" isExternalLink weight={ 'regular' } href={ goToCloudUrl }>
 								{ __( 'Go to Cloud', 'jetpack-protect' ) }
 							</Button>
 							<ScanButton />
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adf7dc594b907..adc0cee561ba5 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -8,7 +8,7 @@
 
     &__scan_buttons {
         display: flex;
-        gap: calc( var( --spacing-base ) * 2 ); // 16px
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
     }
 }
 

From af172c93254adce796c17104f8ab76d4d518b5c3 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 117/143] Protect: add ShieldIcon component

---
 .../components/admin-section-hero/index.tsx   |  21 ++-
 .../stories/index.stories.jsx                 |   4 +-
 .../src/js/components/shield-icon/index.tsx   | 165 ++++++++++++++++++
 .../shield-icon/stories/index.stories.tsx     |  50 ++++++
 4 files changed, 230 insertions(+), 10 deletions(-)
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 create mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ed83bebc8638..758c8c21e0193 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,9 +1,6 @@
-import {
-	AdminSectionHero as JetpackAdminSectionHero,
-	H3,
-	getIconBySlug,
-} from '@automattic/jetpack-components';
+import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
+import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -15,7 +12,7 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
+	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
 
 AdminSectionHero.Heading = ( {
 	children,
+	variant = 'default',
 	showIcon = false,
 }: {
 	children: React.ReactNode;
+	variant?: 'default' | 'success' | 'error';
 	showIcon?: boolean;
 } ) => {
-	const Icon = getIconBySlug( 'protect' );
-
 	return (
 		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
 			{ children }
-			{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
+			{ showIcon && (
+				<ShieldIcon
+					variant={ `${ variant }-outline` }
+					fill="#1d2327"
+					className={ styles[ 'heading-icon' ] }
+				/>
+			) }
 		</H3>
 	);
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index 7d5b4f8066c93..ca2dfda7fc98e 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -12,7 +12,9 @@ Default.args = {
 	main: (
 		<>
 			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
+			<AdminSectionHero.Heading showIcon variant="success">
+				{ 'No threats found' }
+			</AdminSectionHero.Heading>
 			<AdminSectionHero.Subheading>
 				<Text>{ 'Most recent results' }</Text>
 			</AdminSectionHero.Subheading>
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..3bf7f479f0051
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
@@ -0,0 +1,165 @@
+import { type JSX } from 'react';
+
+/**
+ * Protect Shield and Checkmark SVG Icon
+ *
+ * @param {object} props           - Component props.
+ * @param {string} props.variant   - Icon variant.
+ * @param {string} props.fill      - Icon fill color.
+ * @param {string} props.className - Additional class names.
+ * @param {number} props.height    - Icon height.
+ * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
+ */
+export default function ShieldIcon( {
+	variant = 'default',
+	height = 32,
+	className,
+	fill,
+}: {
+	variant:
+		| 'default'
+		| 'success'
+		| 'error'
+		| 'default-outline'
+		| 'success-outline'
+		| 'error-outline';
+	className?: string;
+	height?: number;
+	fill?: string;
+} ): JSX.Element {
+	if ( 'error-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
+					fill={ fill || '#D63638' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'error' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 123 ) / 150 }
+				viewBox="0 0 123 150"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
+					fill={ fill || '#D63638' }
+				/>
+				<path
+					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
+					fill={ `#fff` }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 14 ) / 17 }
+				viewBox="0 0 14 17"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
+					fill={ fill || '#069E08' }
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'success' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 80 ) / 96 }
+				viewBox="0 0 80 96"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+					fill={ fill || '#069E08' }
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
+					fill="white"
+				/>
+			</svg>
+		);
+	}
+
+	if ( 'default-outline' === variant ) {
+		return (
+			<svg
+				height={ height }
+				width={ ( height * 18 ) / 23 }
+				viewBox="0 0 18 23"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ className }
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
+					fill={ fill || 'black' }
+				/>
+			</svg>
+		);
+	}
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 80 ) / 96 }
+			viewBox="0 0 80 96"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
+				fill={ fill || 'black' }
+			/>
+		</svg>
+	);
+}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..d10365f4b0834
--- /dev/null
+++ b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ShieldIcon from '../index';
+
+export default {
+	title: 'Plugins/Protect/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		Story => (
+			<div style={ { height: '72px', width: '72px' } }>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [
+				'default',
+				'success',
+				'error',
+				'default-outline',
+				'success-outline',
+				'error-outline',
+			],
+		},
+		fill: {
+			control: 'color',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'default',
+};
+
+export const SuccessVariant = args => <ShieldIcon { ...args } />;
+SuccessVariant.args = {
+	variant: 'success',
+};
+
+export const ErrorVariant = args => <ShieldIcon { ...args } />;
+ErrorVariant.args = {
+	variant: 'error',
+};

From 00283bca9a70e694e8ca0680eace84279e7bb624 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Wed, 4 Dec 2024 20:26:54 -0700
Subject: [PATCH 118/143] Protect: Add ShieldIcon Component (#40402)

---
 .../components/changelog/add-shield-icon      |   4 +
 .../components/shield-icon/index.tsx          |  79 +++++++++
 .../shield-icon/stories/index.stories.tsx     |  54 ++++++
 projects/js-packages/components/index.ts      |   1 +
 .../protect/changelog/refactor-alert-icon     |   5 +
 .../components/admin-section-hero/index.tsx   |  20 ++-
 .../admin-section-hero/styles.module.scss     |   4 +-
 .../src/js/components/alert-icon/index.jsx    |  74 --------
 .../alert-icon/stories/index.stories.jsx      |  17 --
 .../components/alert-icon/styles.module.scss  |  11 --
 .../src/js/components/shield-icon/index.tsx   | 165 ------------------
 .../shield-icon/stories/index.stories.tsx     |  50 ------
 .../history/history-admin-section-hero.tsx    |   2 +-
 .../routes/scan/scan-admin-section-hero.tsx   |   2 +-
 14 files changed, 162 insertions(+), 326 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-shield-icon
 create mode 100644 projects/js-packages/components/components/shield-icon/index.tsx
 create mode 100644 projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
 create mode 100644 projects/plugins/protect/changelog/refactor-alert-icon
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

diff --git a/projects/js-packages/components/changelog/add-shield-icon b/projects/js-packages/components/changelog/add-shield-icon
new file mode 100644
index 0000000000000..5c6cc27eeb809
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-shield-icon
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ShieldIcon component
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
new file mode 100644
index 0000000000000..fee9f4d70c463
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const COLORS = {
+	error: '#D63638',
+	warning: '#F0B849',
+	success: '#069E08',
+	default: '#1d2327',
+};
+
+/**
+ * Protect Shield SVG Icon
+ *
+ * @param {object}  props           - Component props.
+ * @param {string}  props.className - Additional class names.
+ * @param {string}  props.contrast  - Icon contrast color. Overrides variant.
+ * @param {string}  props.fill      - Icon fill color (default, success, warning, error, or a custom color code string). Overrides variant.
+ * @param {number}  props.height    - Icon height (px). Width is calculated based on height.
+ * @param {string}  props.icon      - Icon variant (success, error). Overrides variant.
+ * @param {boolean} props.outline   - When enabled, the icon will use an outline style.
+ * @param {string}  props.variant   - Icon variant (default, success, error).
+ *
+ * @return {React.ReactElement} Protect Shield SVG Icon
+ */
+export default function ShieldIcon( {
+	className,
+	contrast = '#fff',
+	fill,
+	height = 32,
+	icon,
+	outline = false,
+	variant = 'default',
+}: {
+	className?: string;
+	contrast?: string;
+	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	height?: number;
+	icon?: 'success' | 'error';
+	outline?: boolean;
+	variant: 'default' | 'success' | 'warning' | 'error';
+} ): JSX.Element {
+	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
+	const iconFill = outline ? shieldFill : contrast;
+	const iconVariant = icon || variant;
+
+	return (
+		<svg
+			height={ height }
+			width={ ( height * 76 ) / 93 }
+			viewBox="0 0 76 93"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				d={
+					'M37.5652 0.980293L75.1304 18.0554V43.5097C75.1304 65.2086 61.1942 85.753 41.5427 92.2343C38.9604 93.0862 36.1701 93.0862 33.5878 92.2343C13.9362 85.753 0 65.2086 0 43.5097V18.0554L37.5652 0.980293Z' +
+					( outline
+						? ' M8.34783 23.4307V43.5097C8.34783 61.9471 20.286 79.0573 36.2024 84.3068C37.0866 84.5981 38.0438 84.5981 38.928 84.3068C54.8444 79.0573 66.7826 61.9471 66.7826 43.5097V23.4307L37.5652 10.15L8.34783 23.4307Z'
+						: '' )
+				}
+				fill={ shieldFill }
+			/>
+			{ 'success' === iconVariant && (
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M55.6042 37.0675L34.3578 65.2656L20.898 55.3892L23.878 51.4342L33.33 58.3698L51.5965 34.1267L55.6042 37.0675Z"
+					fill={ iconFill }
+				/>
+			) }
+			{ [ 'warning', 'error' ].includes( iconVariant ) && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+				/>
+			) }
+		</svg>
+	);
+}
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
new file mode 100644
index 0000000000000..b5a16d4da4075
--- /dev/null
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -0,0 +1,54 @@
+import ShieldIcon from '../index';
+
+export default {
+	title: 'JS Packages/Components/Sheild Icon',
+	component: ShieldIcon,
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'default', 'success', 'warning', 'error' ],
+		},
+		icon: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'success', 'error' ],
+		},
+		fill: {
+			control: 'color',
+		},
+		outline: {
+			control: 'boolean',
+		},
+	},
+};
+
+export const Default = args => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'success',
+	outline: false,
+};
+
+export const Variants = () => {
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" />
+				<ShieldIcon variant="success" />
+				<ShieldIcon variant="warning" />
+				<ShieldIcon variant="error" />
+			</div>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="success" outline />
+				<ShieldIcon variant="warning" outline />
+				<ShieldIcon variant="error" outline />
+			</div>
+		</div>
+	);
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index eb90df97ad5fe..4b0f3612012e7 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -47,6 +47,7 @@ export { default as ThemeProvider } from './components/theme-provider';
 export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
+export { default as ShieldIcon } from './components/shield-icon';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/plugins/protect/changelog/refactor-alert-icon b/projects/plugins/protect/changelog/refactor-alert-icon
new file mode 100644
index 0000000000000..46b4c247b1b9f
--- /dev/null
+++ b/projects/plugins/protect/changelog/refactor-alert-icon
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Refactored icon component code.
+
+
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 758c8c21e0193..5ccf607698084 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -1,6 +1,9 @@
-import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
+import {
+	AdminSectionHero as JetpackAdminSectionHero,
+	H3,
+	ShieldIcon,
+} from '@automattic/jetpack-components';
 import SeventyFiveLayout from '../seventy-five-layout';
-import ShieldIcon from '../shield-icon';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
@@ -12,7 +15,12 @@ interface AdminSectionHeroProps {
 }
 
 interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
+	Heading: React.FC< {
+		children: React.ReactNode;
+		showIcon?: boolean;
+		variant?: 'default' | 'success' | 'error';
+		outline?: boolean;
+	} >;
 	Subheading: React.FC< { children: React.ReactNode } >;
 }
 
@@ -53,8 +61,10 @@ AdminSectionHero.Heading = ( {
 			{ children }
 			{ showIcon && (
 				<ShieldIcon
-					variant={ `${ variant }-outline` }
-					fill="#1d2327"
+					height={ 38 }
+					variant={ variant }
+					outline
+					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
 			) }
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 5881bcd910045..a414aa9216f5c 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -13,7 +13,7 @@
 }
 
 .heading-icon {
-    margin-left: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
@@ -23,4 +23,4 @@
 
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
-}
\ No newline at end of file
+}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.jsx b/projects/plugins/protect/src/js/components/alert-icon/index.jsx
deleted file mode 100644
index 8a4d32da59553..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/index.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Path, SVG, Rect, G } from '@wordpress/components';
-import React from 'react';
-import styles from './styles.module.scss';
-
-/**
- * Alert icon
- *
- * @param {object} props           - Props.
- * @param {string} props.className - Optional component class name.
- * @param {string} props.color     - Optional icon color. Defaults to '#D63638'.
- * @return { React.ReactNode }      The Alert Icon component.
- */
-export default function AlertSVGIcon( { className, color = '#D63638' } ) {
-	return (
-		<div className={ styles.container }>
-			<SVG
-				className={ className }
-				width="127"
-				height="136"
-				viewBox="0 0 127 136"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<G filter="url(#filter0_d_2716_19567)">
-					<Path
-						fillRule="evenodd"
-						clipRule="evenodd"
-						d="M63.4061 36L86.8123 46.4057V61.9177C86.8123 75.141 78.1289 87.6611 65.8844 91.6107C64.2754 92.1298 62.5369 92.1297 60.9279 91.6107C48.6834 87.6611 40 75.141 40 61.9177V46.4057L63.4061 36Z"
-						fill={ color }
-					/>
-					<Rect x="59.8953" y="72.1666" width="7.02184" height="7" rx="3.5" fill="white" />
-					<Path
-						d="M59.9619 51.0626C59.9258 50.4868 60.383 50 60.9599 50H65.8524C66.4293 50 66.8866 50.4868 66.8505 51.0626L65.8056 67.7292C65.7725 68.2562 65.3355 68.6667 64.8075 68.6667H62.0048C61.4769 68.6667 61.0398 68.2562 61.0068 67.7292L59.9619 51.0626Z"
-						fill="white"
-					/>
-				</G>
-				<defs>
-					<filter
-						id="filter0_d_2716_19567"
-						x="0"
-						y="0"
-						width="126.812"
-						height="136"
-						filterUnits="userSpaceOnUse"
-						colorInterpolationFilters="sRGB"
-					>
-						<feFlood floodOpacity="0" result="BackgroundImageFix" />
-						<feColorMatrix
-							in="SourceAlpha"
-							type="matrix"
-							values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-							result="hardAlpha"
-						/>
-						<feOffset dy="4" />
-						<feGaussianBlur stdDeviation="20" />
-						<feComposite in2="hardAlpha" operator="out" />
-						<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
-						<feBlend
-							mode="normal"
-							in2="BackgroundImageFix"
-							result="effect1_dropShadow_2716_19567"
-						/>
-						<feBlend
-							mode="normal"
-							in="SourceGraphic"
-							in2="effect1_dropShadow_2716_19567"
-							result="shape"
-						/>
-					</filter>
-				</defs>
-			</SVG>
-		</div>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
deleted file mode 100644
index 47b2ee32d4b51..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import AlertIcon from '../index.jsx';
-
-export default {
-	title: 'Plugins/Protect/Alert Icon',
-	component: AlertIcon,
-	argTypes: {
-		color: {
-			control: {
-				type: 'color',
-			},
-		},
-	},
-};
-
-const FooterTemplate = args => <AlertIcon { ...args } />;
-export const Default = FooterTemplate.bind( {} );
diff --git a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss b/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
deleted file mode 100644
index 938a62897f2a8..0000000000000
--- a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-	width: 48px;
-	height: 56px;
-	margin-bottom: calc( var( --spacing-base ) * 8 ); // 64px
-
-	> svg {
-		position: relative;
-		top: -36px;
-		left: -40px;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx
deleted file mode 100644
index 3bf7f479f0051..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @param {object} props           - Component props.
- * @param {string} props.variant   - Icon variant.
- * @param {string} props.fill      - Icon fill color.
- * @param {string} props.className - Additional class names.
- * @param {number} props.height    - Icon height.
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ShieldIcon( {
-	variant = 'default',
-	height = 32,
-	className,
-	fill,
-}: {
-	variant:
-		| 'default'
-		| 'success'
-		| 'error'
-		| 'default-outline'
-		| 'success-outline'
-		| 'error-outline';
-	className?: string;
-	height?: number;
-	fill?: string;
-} ): JSX.Element {
-	if ( 'error-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
-					fill={ fill || '#D63638' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'error' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 123 ) / 150 }
-				viewBox="0 0 123 150"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
-					fill={ fill || '#D63638' }
-				/>
-				<path
-					d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
-					fill={ `#fff` }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 14 ) / 17 }
-				viewBox="0 0 14 17"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
-					fill={ fill || '#069E08' }
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'success' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 80 ) / 96 }
-				viewBox="0 0 80 96"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-					fill={ fill || '#069E08' }
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-					fill="white"
-				/>
-			</svg>
-		);
-	}
-
-	if ( 'default-outline' === variant ) {
-		return (
-			<svg
-				height={ height }
-				width={ ( height * 18 ) / 23 }
-				viewBox="0 0 18 23"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				className={ className }
-			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
-					fill={ fill || 'black' }
-				/>
-			</svg>
-		);
-	}
-
-	return (
-		<svg
-			height={ height }
-			width={ ( height * 80 ) / 96 }
-			viewBox="0 0 80 96"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			className={ className }
-		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill={ fill || 'black' }
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
deleted file mode 100644
index d10365f4b0834..0000000000000
--- a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import ShieldIcon from '../index';
-
-export default {
-	title: 'Plugins/Protect/Sheild Icon',
-	component: ShieldIcon,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { height: '72px', width: '72px' } }>
-				<Story />
-			</div>
-		),
-	],
-	argTypes: {
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: [
-				'default',
-				'success',
-				'error',
-				'default-outline',
-				'success-outline',
-				'error-outline',
-			],
-		},
-		fill: {
-			control: 'color',
-		},
-	},
-};
-
-export const Default = args => <ShieldIcon { ...args } />;
-Default.args = {
-	variant: 'default',
-};
-
-export const SuccessVariant = args => <ShieldIcon { ...args } />;
-SuccessVariant.args = {
-	variant: 'success',
-};
-
-export const ErrorVariant = args => <ShieldIcon { ...args } />;
-ErrorVariant.args = {
-	variant: 'error',
-};
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
index 4aa517f5f120b..141c51cde284a 100644
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
@@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => {
 							__( 'Most recent results', 'jetpack-protect' )
 						) }
 					</Text>
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant="success">
 						{ numAllThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats  */
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 1c5cc6cac49b9..9e1b9c102a037 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
@@ -95,7 +95,7 @@ const ScanAdminSectionHero: React.FC = () => {
 							anchor={ dailyScansPopoverAnchor }
 						/>
 					) }
-					<AdminSectionHero.Heading showIcon>
+					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
 									/* translators: %s: Total number of threats/vulnerabilities */

From f580acef495fd11cf9e8247df2ef91421723523f Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Thu, 5 Dec 2024 10:50:27 -0700
Subject: [PATCH 119/143] Protect: Integrate ThreatsDataViews Component
 (#40076)

---
 pnpm-lock.yaml                                |   3 +
 .../add-threat-subtitle-and-icon-utils        |   4 +
 projects/js-packages/scan/src/utils/index.ts  |  32 +-
 .../protect/changelog/add-threats-data-views  |   5 +
 projects/plugins/protect/package.json         |   1 +
 .../protect/src/class-scan-history.php        |  30 +-
 projects/plugins/protect/src/js/api.ts        |   3 +-
 .../src/js/components/admin-page/index.jsx    |  12 +-
 .../components/admin-page/styles.module.scss  |  11 +
 .../error-admin-section-hero/index.tsx        |   4 -
 .../js/components/fix-threat-modal/index.jsx  |   9 +-
 .../js/components/free-accordion/index.jsx    |  64 ----
 .../free-accordion/stories/index.stories.jsx  | 120 -------
 .../free-accordion/styles.module.scss         |  79 -----
 .../components/ignore-threat-modal/index.jsx  |  14 +-
 .../src/js/components/navigation/badge.jsx    | 101 ------
 .../src/js/components/navigation/group.jsx    |  51 ---
 .../src/js/components/navigation/index.jsx    |  73 -----
 .../src/js/components/navigation/item.jsx     |  85 -----
 .../src/js/components/navigation/label.jsx    |  24 --
 .../components/navigation/styles.module.scss  | 142 ---------
 .../navigation/use-menu-navigation.js         |  92 ------
 .../js/components/paid-accordion/index.jsx    | 192 -----------
 .../stories/broken/index.stories.jsx          | 120 -------
 .../paid-accordion/styles.module.scss         | 202 ------------
 .../src/js/components/pricing-table/index.jsx |   4 +-
 .../components/protect-check-icon/index.tsx   |  25 --
 .../js/components/scan-navigation/index.jsx   |  44 ---
 .../js/components/threat-fix-header/index.jsx |   7 +-
 .../src/js/components/threats-list/empty.jsx  | 140 --------
 .../js/components/threats-list/free-list.jsx  | 125 --------
 .../src/js/components/threats-list/index.jsx  | 194 -----------
 .../js/components/threats-list/navigation.jsx | 130 --------
 .../js/components/threats-list/pagination.jsx | 142 ---------
 .../js/components/threats-list/paid-list.jsx  | 253 ---------------
 .../threats-list/styles.module.scss           | 129 --------
 .../threats-list/use-threats-list.js          | 158 ---------
 .../unignore-threat-modal/index.jsx           |  18 +-
 .../src/js/hooks/use-protect-data/index.ts    | 173 ----------
 projects/plugins/protect/src/js/index.tsx     |   7 +-
 .../protect/src/js/routes/firewall/index.jsx  |   3 +-
 .../history/history-admin-section-hero.tsx    |  84 -----
 .../src/js/routes/scan/history/index.jsx      | 301 ------------------
 .../js/routes/scan/history/status-filters.jsx |  44 ---
 .../js/routes/scan/history/styles.module.scss |  37 ---
 .../protect/src/js/routes/scan/index.jsx      |  79 +++--
 .../src/js/routes/scan/onboarding-steps.jsx   |  61 ++--
 .../routes/scan/scan-admin-section-hero.tsx   | 138 ++++----
 .../src/js/routes/scan/scan-footer.jsx        | 143 ---------
 .../js/routes/scan/scan-results-data-view.tsx |  56 ++++
 .../scan/scanning-admin-section-hero.tsx      |  25 +-
 .../src/js/routes/scan/styles.module.scss     |  20 +-
 projects/plugins/protect/webpack.config.js    |  18 ++
 53 files changed, 363 insertions(+), 3668 deletions(-)
 create mode 100644 projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
 create mode 100644 projects/plugins/protect/changelog/add-threats-data-views
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/badge.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/group.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/item.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/label.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
 delete mode 100644 projects/plugins/protect/src/js/components/scan-navigation/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/empty.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/free-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/navigation.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/pagination.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
 delete mode 100644 projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/index.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
 delete mode 100644 projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
 create mode 100644 projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00711e4c34617..d1779de4f48e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4214,6 +4214,9 @@ importers:
         specifier: 6.2.2
         version: 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
+      '@automattic/babel-plugin-replace-textdomain':
+        specifier: workspace:*
+        version: link:../../js-packages/babel-plugin-replace-textdomain
       '@automattic/jetpack-webpack-config':
         specifier: workspace:*
         version: link:../../js-packages/webpack-config
diff --git a/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
new file mode 100644
index 0000000000000..ad8fa81458278
--- /dev/null
+++ b/projects/js-packages/scan/changelog/add-threat-subtitle-and-icon-utils
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add utilities for generating threat subtitle and icons
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 945cd0ecb7fa8..9e2e75bcd4d91 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -17,6 +17,36 @@ export const getThreatType = ( threat: Threat ) => {
 	return null;
 };
 
+export const getThreatIcon = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return 'wordpress-alt';
+		case 'plugin':
+			return 'plugins';
+		case 'theme':
+			return 'appearance';
+		case 'file':
+			return 'media-code';
+		default:
+			return 'shield-alt';
+	}
+};
+
+export const getThreatSubtitle = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
+		case 'plugin':
+			return __( 'Vulnerable Plugin', 'jetpack-scan' );
+		case 'theme':
+			return __( 'Vulnerable Theme', 'jetpack-scan' );
+		case 'file':
+			return __( 'File Threat', 'jetpack-scan' );
+		default:
+			return __( 'Threat', 'jetpack-scan' );
+	}
+};
+
 export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => {
 	const now = new Date();
 	const lastUpdated = new Date( lastUpdatedTimestamp );
@@ -123,7 +153,7 @@ export const getFixerDescription = ( threat: Threat ) => {
 			}
 			break;
 		case 'update':
-			if ( threat.fixedIn && threat.extension.name ) {
+			if ( threat.fixedIn && threat.extension?.name ) {
 				return sprintf(
 					/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
 					__( 'Update %1$s to version %2$s', 'jetpack-scan' ),
diff --git a/projects/plugins/protect/changelog/add-threats-data-views b/projects/plugins/protect/changelog/add-threats-data-views
new file mode 100644
index 0000000000000..e15bd6a461a71
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-threats-data-views
@@ -0,0 +1,5 @@
+Significance: minor
+Type: changed
+
+Added DataViews component for viewing scan results.
+
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
index 9d11e44dc60af..8708e2c101c9f 100644
--- a/projects/plugins/protect/package.json
+++ b/projects/plugins/protect/package.json
@@ -49,6 +49,7 @@
 		"react-router-dom": "6.2.2"
 	},
 	"devDependencies": {
+		"@automattic/babel-plugin-replace-textdomain": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.26.0",
 		"@babel/preset-env": "7.26.0",
diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php
index bd034c375caf9..8ea1dec7156e7 100644
--- a/projects/plugins/protect/src/class-scan-history.php
+++ b/projects/plugins/protect/src/class-scan-history.php
@@ -207,43 +207,19 @@ public static function fetch_from_api() {
 	 * Normalize API Data
 	 * Formats the payload from the Scan API into an instance of History_Model.
 	 *
-	 * @phan-suppress PhanDeprecatedProperty -- Maintaining backwards compatibility.
-	 *
 	 * @param object $scan_data The data returned by the scan API.
 	 * @return History_Model
 	 */
 	private static function normalize_api_data( $scan_data ) {
-		$history                      = new History_Model();
-		$history->num_threats         = 0;
-		$history->num_core_threats    = 0;
-		$history->num_plugins_threats = 0;
-		$history->num_themes_threats  = 0;
-
+		$history               = new History_Model();
 		$history->last_checked = $scan_data->last_checked;
 
 		if ( empty( $scan_data->threats ) || ! is_array( $scan_data->threats ) ) {
 			return $history;
 		}
 
-		foreach ( $scan_data->threats as $threat ) {
-			if ( isset( $threat->extension->type ) ) {
-				if ( 'plugin' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'plugin' );
-					continue;
-				}
-
-				if ( 'theme' === $threat->extension->type ) {
-					self::handle_extension_threats( $threat, $history, 'theme' );
-					continue;
-				}
-			}
-
-			if ( 'Vulnerable.WP.Core' === $threat->signature ) {
-				self::handle_core_threats( $threat, $history );
-				continue;
-			}
-
-			self::handle_additional_threats( $threat, $history );
+		foreach ( $scan_data->threats as $source_threat ) {
+			$history->threats[] = new Threat_Model( $source_threat );
 		}
 
 		return $history;
diff --git a/projects/plugins/protect/src/js/api.ts b/projects/plugins/protect/src/js/api.ts
index 2b98a6164bf8b..97d11fd5c0f2b 100644
--- a/projects/plugins/protect/src/js/api.ts
+++ b/projects/plugins/protect/src/js/api.ts
@@ -1,6 +1,7 @@
-import { type FixersStatus, type ScanStatus, type WafStatus } from '@automattic/jetpack-scan';
+import { type FixersStatus, type ScanStatus } from '@automattic/jetpack-scan';
 import apiFetch from '@wordpress/api-fetch';
 import camelize from 'camelize';
+import { WafStatus } from './types/waf';
 
 const API = {
 	getWaf: (): Promise< WafStatus > =>
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
index 2d023560517f3..68f9359a9bd81 100644
--- a/projects/plugins/protect/src/js/components/admin-page/index.jsx
+++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -9,9 +9,9 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import useNotices from '../../hooks/use-notices';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import Notice from '../notice';
 import ScanButton from '../scan-button';
@@ -23,11 +23,7 @@ const AdminPage = ( { children } ) => {
 	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
 	const navigate = useNavigate();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-	} = useProtectData();
+	const { data: status } = useScanStatusQuery();
 	const location = useLocation();
 	const { hasPlan } = usePlan();
 
@@ -71,11 +67,11 @@ const AdminPage = ( { children } ) => {
 						link="/scan"
 						label={
 							<span className={ styles.tab }>
-								{ numThreats > 0
+								{ status.threats.length > 0
 									? sprintf(
 											// translators: %d is the number of threats found.
 											__( 'Scan (%d)', 'jetpack-protect' ),
-											numThreats
+											status.threats.length
 									  )
 									: __( 'Scan', 'jetpack-protect' ) }
 							</span>
diff --git a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
index adc0cee561ba5..da2e9510cd7d9 100644
--- a/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-page/styles.module.scss
@@ -5,10 +5,21 @@
 .header {
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
+    align-items: center;
+
+    @media ( min-width: 600px ) {
+        flex-direction: row;
+    }
 
     &__scan_buttons {
         display: flex;
         gap: calc( var( --spacing-base ) * 3 ); // 24px
+
+        @media ( min-width: 600px ) {
+            flex-direction: row;
+        }
     }
 }
 
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 5214531dcf362..1a9bc87387fa9 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -2,7 +2,6 @@ import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
-import ScanNavigation from '../scan-navigation';
 import styles from './styles.module.scss';
 
 interface ErrorAdminSectionHeroProps {
@@ -32,9 +31,6 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 					<AdminSectionHero.Subheading>
 						<Text>{ displayErrorMessage }</Text>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			preserveSecondaryOnMobile={ false }
diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
index e1274e8e29a17..cbb49498c353f 100644
--- a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx
@@ -7,7 +7,7 @@ import ThreatFixHeader from '../threat-fix-header';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
+const FixThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const { fixThreats, isLoading: isFixersLoading } = useFixers();
 
@@ -21,7 +21,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 	const handleFixClick = () => {
 		return async event => {
 			event.preventDefault();
-			await fixThreats( [ id ] );
+			await fixThreats( [ threat.id ] );
 			setModal( { type: null } );
 		};
 	};
@@ -37,10 +37,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
 				</Text>
 
 				<div className={ styles.list }>
-					<ThreatFixHeader
-						threat={ { id, fixable, label, icon, severity } }
-						fixAllDialog={ false }
-					/>
+					<ThreatFixHeader threat={ threat } fixAllDialog={ false } />
 				</div>
 
 				<div className={ styles.footer }>
diff --git a/projects/plugins/protect/src/js/components/free-accordion/index.jsx b/projects/plugins/protect/src/js/components/free-accordion/index.jsx
deleted file mode 100644
index e801d9374fd33..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext } from 'react';
-import styles from './styles.module.scss';
-
-const FreeAccordionContext = React.createContext();
-
-export const FreeAccordionItem = ( { id, title, label, icon, children, onOpen } ) => {
-	const accordionData = useContext( FreeAccordionContext );
-	const open = accordionData?.open === id;
-	const setOpen = accordionData?.setOpen;
-
-	const bodyClassNames = clsx( styles[ 'accordion-body' ], {
-		[ styles[ 'accordion-body-open' ] ]: open,
-		[ styles[ 'accordion-body-close' ] ]: ! open,
-	} );
-
-	const handleClick = useCallback( () => {
-		if ( ! open ) {
-			onOpen?.();
-		}
-		setOpen( current => {
-			return current === id ? null : id;
-		} );
-	}, [ open, onOpen, setOpen, id ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ open ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-				</div>
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ open ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div className={ bodyClassNames } aria-hidden={ open ? 'false' : 'true' }>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const FreeAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<FreeAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</FreeAccordionContext.Provider>
-	);
-};
-
-export default FreeAccordion;
diff --git a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
deleted file mode 100644
index 43ad41e2501eb..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import FreeAccordion, { FreeAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Free Accordion',
-	component: FreeAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<FreeAccordion>
-		<FreeAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-		<FreeAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</FreeAccordionItem>
-	</FreeAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
deleted file mode 100644
index 5278f6eff39f4..0000000000000
--- a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.accordion {
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/8;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
index 7e8113b6f38ab..0788eb8bd7a41 100644
--- a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx
@@ -1,16 +1,18 @@
 import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import useIgnoreThreatMutation from '../../data/scan/use-ignore-threat-mutation';
 import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const IgnoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
 	const ignoreThreatMutation = useIgnoreThreatMutation();
 	const codeableURL = getRedirectUrl( 'jetpack-protect-codeable-referral' );
+	const icon = getThreatIcon( threat );
 
 	const [ isIgnoring, setIsIgnoring ] = useState( false );
 
@@ -25,7 +27,7 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		return async event => {
 			event.preventDefault();
 			setIsIgnoring( true );
-			await ignoreThreatMutation.mutateAsync( id );
+			await ignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsIgnoring( false );
 		};
@@ -42,12 +44,12 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/components/navigation/badge.jsx b/projects/plugins/protect/src/js/components/navigation/badge.jsx
deleted file mode 100644
index 93ebecf7235ef..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/badge.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover, Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, check, info } from '@wordpress/icons';
-import PropTypes from 'prop-types';
-import React, { useState, useCallback, useMemo } from 'react';
-import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
-import styles from './styles.module.scss';
-
-/**
- * Gets the Badge element
- *
- * @param {number}  count   - The number of threats found for this item.
- * @param {boolean} checked - Whether this item was checked for threats yet.
- * @return {object} The badge element
- */
-const getBadgeElement = ( count, checked ) => {
-	if ( ! checked ) {
-		return {
-			popoverText: __(
-				'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
-				'jetpack-protect'
-			),
-			badgeElement: (
-				<Icon icon={ info } size={ 28 } className={ styles[ 'navigation-item-info-badge' ] } />
-			),
-		};
-	}
-
-	if ( count === 0 ) {
-		return {
-			popoverText: __( 'No known threats found to affect this version', 'jetpack-protect' ),
-			badgeElement: (
-				<Icon icon={ check } size={ 28 } className={ styles[ 'navigation-item-check-badge' ] } />
-			),
-		};
-	}
-
-	return {
-		popoverText: null,
-		badgeElement: (
-			<Text
-				variant="body-extra-small"
-				className={ styles[ 'navigation-item-badge' ] }
-				component="div"
-			>
-				{ count }
-			</Text>
-		),
-	};
-};
-
-const ItemBadge = ( { count, checked } ) => {
-	const { data: status } = useScanStatusQuery();
-
-	const { popoverText, badgeElement } = getBadgeElement( count, checked );
-	const [ showPopover, setShowPopover ] = useState( false );
-
-	const inProgress = useMemo( () => isScanInProgress( status ), [ status ] );
-
-	const handleEnter = useCallback( () => {
-		if ( inProgress ) {
-			return;
-		}
-
-		setShowPopover( true );
-	}, [ inProgress ] );
-
-	const handleOut = useCallback( () => {
-		setShowPopover( false );
-	}, [] );
-
-	return (
-		<div
-			onMouseLeave={ popoverText ? handleOut : null }
-			onMouseEnter={ popoverText ? handleEnter : null }
-			onClick={ popoverText ? handleEnter : null }
-			onFocus={ popoverText ? handleEnter : null }
-			onBlur={ popoverText ? handleOut : null }
-			role="presentation"
-		>
-			{ ! inProgress ? badgeElement : <Spinner /> }
-			{ showPopover && (
-				<Popover noArrow={ false } inline={ true }>
-					<Text variant="body-small" className={ styles[ 'popover-text' ] }>
-						{ popoverText }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-ItemBadge.propTypes = {
-	/* The number of threats found for this item */
-	count: PropTypes.number,
-	/* Whether this item was checked for threats yet */
-	checked: PropTypes.bool,
-};
-
-export default ItemBadge;
diff --git a/projects/plugins/protect/src/js/components/navigation/group.jsx b/projects/plugins/protect/src/js/components/navigation/group.jsx
deleted file mode 100644
index 9352ae5c63d67..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/group.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useState, useCallback, useContext } from 'react';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const MAX_ITEMS = 8;
-
-const NavigationGroup = ( { icon, label, children } ) => {
-	const [ collapsed, setCollapsed ] = useState( true );
-	const { mode } = useContext( NavigationContext );
-	const needsTruncate =
-		Array.isArray( children ) && children?.length >= MAX_ITEMS && mode === 'list';
-	const content = needsTruncate && collapsed ? children.slice( 0, MAX_ITEMS ) : children;
-	const totalHideItems = needsTruncate ? children?.length - MAX_ITEMS : 0;
-
-	const handleCollapsedToggle = useCallback( () => {
-		setCollapsed( current => ! current );
-	}, [] );
-
-	return (
-		<li tabIndex={ -1 } role="menuitem" className={ styles[ 'navigation-group' ] }>
-			<ItemLabel icon={ icon } className={ styles[ 'navigation-group-label' ] }>
-				{ label }
-			</ItemLabel>
-			<div className={ styles[ 'navigation-group-list' ] }>
-				<ul className={ styles[ 'navigation-group-content' ] }>{ content }</ul>
-				{ needsTruncate && (
-					<div className={ styles[ 'navigation-group-truncate' ] }>
-						<Button variant="link" onClick={ handleCollapsedToggle }>
-							{ collapsed
-								? sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Show %s more', 'jetpack-protect' ),
-										totalHideItems
-								  )
-								: sprintf(
-										/* translators: %s: Number of hide items  */
-										__( 'Hide %s items', 'jetpack-protect' ),
-										totalHideItems
-								  ) }
-						</Button>
-					</div>
-				) }
-			</div>
-		</li>
-	);
-};
-
-export default NavigationGroup;
diff --git a/projects/plugins/protect/src/js/components/navigation/index.jsx b/projects/plugins/protect/src/js/components/navigation/index.jsx
deleted file mode 100644
index bd30dfbdad964..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/index.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import React, { useState, useRef, useCallback } from 'react';
-import NavigationGroup from './group';
-import NavigationItem from './item';
-import styles from './styles.module.scss';
-import useMenuNavigation, { NavigationContext } from './use-menu-navigation';
-
-const NavigationList = ( { children } ) => (
-	<ul className={ styles.navigation } role="menu">
-		{ children }
-	</ul>
-);
-
-const NavigationDropdown = ( { children, data } ) => {
-	const ref = useRef( undefined );
-	const [ listOpen, setListOpen ] = useState( false );
-	const item = data?.items?.find( navItem => navItem?.id === data?.selectedItem ) ?? {
-		label: __( 'See all results', 'jetpack-protect' ),
-	};
-	const { label, icon } = item;
-
-	const handleOpen = useCallback( () => {
-		setListOpen( open => ! open );
-	}, [] );
-
-	return (
-		<button className={ styles[ 'navigation-dropdown-button' ] } onClick={ handleOpen } ref={ ref }>
-			<div className={ styles[ 'navigation-dropdown-label' ] }>
-				{ icon && <Icon icon={ icon } className={ styles[ 'navigation-dropdown-icon' ] } /> }
-				<Text>{ label }</Text>
-			</div>
-			<Icon icon={ listOpen ? chevronUp : chevronDown } size={ 32 } />
-			<Popover position="bottom center" anchorRef={ ref?.current } inline={ true }>
-				<div
-					style={ {
-						display: listOpen ? 'block' : 'none',
-						width: ref?.current?.getBoundingClientRect?.()?.width,
-					} }
-				>
-					{ children }
-				</div>
-			</Popover>
-		</button>
-	);
-};
-
-const getNavigationComponent = mode => {
-	switch ( mode ) {
-		case 'list':
-			return NavigationList;
-		case 'dropdown':
-			return NavigationDropdown;
-		default:
-			return NavigationList;
-	}
-};
-
-const Navigation = ( { children, selected, onSelect, mode = 'list' } ) => {
-	const data = useMenuNavigation( { selected, onSelect } );
-	const Component = getNavigationComponent( mode );
-
-	return (
-		<NavigationContext.Provider value={ { ...data, mode } }>
-			<Component data={ data }>{ children }</Component>
-		</NavigationContext.Provider>
-	);
-};
-
-export default Navigation;
-export { NavigationItem, NavigationGroup };
diff --git a/projects/plugins/protect/src/js/components/navigation/item.jsx b/projects/plugins/protect/src/js/components/navigation/item.jsx
deleted file mode 100644
index d902625c3997d..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/item.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import clsx from 'clsx';
-import React, { useContext, useEffect, useCallback } from 'react';
-import ItemBadge from './badge';
-import ItemLabel from './label';
-import styles from './styles.module.scss';
-import { NavigationContext } from './use-menu-navigation';
-
-const NavigationItem = ( {
-	id,
-	label,
-	icon,
-	badge,
-	disabled,
-	onClick,
-	onKeyDown,
-	onFocus,
-	checked,
-} ) => {
-	const context = useContext( NavigationContext );
-
-	const selected = context?.selectedItem === id;
-	const registerItem = context?.registerItem;
-	const registerRef = context?.registerRef;
-	const handleClickItem = context?.handleClickItem;
-	const handleKeyDownItem = context?.handleKeyDownItem;
-	const handleFocusItem = context?.handleFocusItem;
-
-	const wrapperClassName = clsx( styles[ 'navigation-item' ], {
-		[ styles.clickable ]: ! disabled,
-		[ styles.selected ]: selected,
-	} );
-
-	const handleClick = useCallback(
-		evt => {
-			onClick?.( evt );
-			handleClickItem?.( id );
-		},
-		[ handleClickItem, id, onClick ]
-	);
-
-	const handleKeyDown = useCallback(
-		evt => {
-			onKeyDown?.( evt );
-			handleKeyDownItem?.( evt );
-		},
-		[ handleKeyDownItem, onKeyDown ]
-	);
-
-	const handleRef = useCallback(
-		ref => {
-			registerRef( ref, id );
-		},
-		[ registerRef, id ]
-	);
-
-	const handleFocus = useCallback(
-		evt => {
-			onFocus?.( evt );
-			handleFocusItem?.( id );
-		},
-		[ handleFocusItem, id, onFocus ]
-	);
-
-	useEffect( () => {
-		registerItem( { id, disabled, label, icon } );
-		// eslint-disable-next-line
-	}, [] );
-
-	return (
-		<li
-			className={ wrapperClassName }
-			onClick={ disabled ? null : handleClick }
-			onKeyDown={ handleKeyDown }
-			onFocus={ disabled ? null : handleFocus }
-			role="menuitem"
-			tabIndex={ disabled ? -1 : 0 }
-			ref={ handleRef }
-		>
-			<ItemLabel icon={ icon }>{ label }</ItemLabel>
-			<ItemBadge count={ badge } checked={ checked } />
-		</li>
-	);
-};
-
-export default NavigationItem;
diff --git a/projects/plugins/protect/src/js/components/navigation/label.jsx b/projects/plugins/protect/src/js/components/navigation/label.jsx
deleted file mode 100644
index 8f075caae020a..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/label.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { Icon } from '@wordpress/icons';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './styles.module.scss';
-
-const ItemLabel = ( { icon, children, className } ) => {
-	return (
-		<Text className={ clsx( styles[ 'navigation-item-label' ], className ) }>
-			{ icon && <Icon icon={ icon } className={ styles[ 'navigation-item-icon' ] } size={ 28 } /> }
-			<span className={ styles[ 'navigation-item-label-content' ] }>{ children }</span>
-		</Text>
-	);
-};
-
-ItemLabel.propTypes = {
-	/* An icon that will be rendered before text */
-	icon: PropTypes.node,
-	/* Label text that will be rendered */
-	children: PropTypes.node.isRequired,
-};
-
-export default ItemLabel;
diff --git a/projects/plugins/protect/src/js/components/navigation/styles.module.scss b/projects/plugins/protect/src/js/components/navigation/styles.module.scss
deleted file mode 100644
index df9e3ef1f8a25..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/styles.module.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-.navigation {
-	background-color: var( --jp-white );
-	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
-	border-radius: var( --jp-border-radius );
-	margin: 0;
-}
-
-.navigation-item {
-	display: flex;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	text-align: left;
-
-	// Clickable State
-	&.clickable {
-		cursor: pointer;
-		outline-color: var( --jp-black );
-
-		// Focus/Hover State
-		&:hover:not(.selected),
-		&:focus:not(.selected) {
-			background-color: var( --jp-gray-0 );
-		}
-	}
-
-	// Selected State
-	&.selected {
-		background-color: var( --jp-black );
-
-		& .navigation-item-label {
-			color: var( --jp-white )
-		}
-
-		& .navigation-item-icon {
-			fill: var( --jp-white );
-		}
-
-		& .navigation-item-badge {
-			border: 1px solid var( --jp-red );
-			background-color: var( --jp-red );
-			color: var( --jp-white );
-		}
-	}
-
-	// CHILDRENS
-
-	// .navigation-item-label
-	&-label {
-		display: flex;
-		align-items: center;
-		padding-right: var( --spacing-base ); // 8px
-		overflow-x: hidden;
-	}
-
-	// .navigation-item-label-content
-	&-label-text {
-		display: block;
-		overflow-x: hidden;
-		text-overflow: ellipsis;
-	}
-
-	// .navigation-item-icon
-	&-icon {
-		margin-right: calc( var( --spacing-base ) * 2); // 16px
-	}
-
-	// .navigation-item-badge
-	&-badge {
-		border: 1px solid var( --jp-red-60 );
-		color: var( --jp-red-60 );
-		border-radius: 50%;
-		padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
-		min-width: 30px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-	}
-
-	&-check-badge {
-		fill: var( --jp-green-50 );
-	}
-
-	&-info-badge {
-		fill: var( --jp-gray-20 );
-	}
-}
-
-.navigation-group {
-	--icon-size: 28px;
-	--item-spacing: calc( var( --spacing-base ) * 2 ); // 16px
-	--left-spacing: calc( var( --icon-size ) + var( --item-spacing ) ); // 28px + 16px
-
-	list-style: none;
-
-	&-label {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-
-	&-content {
-		padding: 0;
-	}
-
-	&-list {
-		margin-left: var( --left-spacing ) ;
-	}
-
-	&-truncate {
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		display: flex;
-		justify-content: flex-start;
-	}
-}
-
-.popover-text {
-	width: 250px;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.navigation-dropdown {
-	&-button {
-		display: flex;
-		border: 1px solid var( --jp-gray-10 );
-		border-radius: var( --jp-border-radius );
-		padding: calc( var( --spacing-base ) * 2 ); // 16px
-		background-color: var( --jp-white );
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	&-label {
-		display: flex;
-		justify-content: flex-start;
-	}
-
-	&-icon {
-		margin-right: var( --spacing-base ); // 8px
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js b/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
deleted file mode 100644
index 2972dac06b572..0000000000000
--- a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-
-export const NavigationContext = React.createContext();
-
-const useMenuNavigation = ( { selected, onSelect } ) => {
-	const [ items, setItems ] = useState( [] );
-	const [ refs, setRef ] = useState( [] );
-	const [ focusedItem, setFocusedItem ] = useState();
-
-	const handleClickItem = id => {
-		onSelect( id );
-	};
-
-	const handleFocusItem = id => {
-		setFocusedItem( id );
-	};
-
-	const getPrevItem = ( current, last ) => {
-		const startMinusOne = current - 1;
-		const prevIndex = startMinusOne < 0 ? last : startMinusOne;
-		const prevItem = items[ prevIndex ];
-		return prevItem?.disabled ? getPrevItem( prevIndex, last ) : prevItem;
-	};
-
-	const getNextItem = ( current, last ) => {
-		const startPlusOne = current + 1;
-		const nextIndex = startPlusOne > last ? 0 : startPlusOne;
-		const nextItem = items[ nextIndex ];
-		return nextItem?.disabled ? getNextItem( nextIndex, last ) : nextItem;
-	};
-
-	const handleKeyDownItem = input => {
-		const code = input?.code;
-		const current = items.findIndex( item => item?.id === selected );
-		const lastIndex = items.length - 1;
-
-		let nextId;
-
-		if ( code === 'ArrowUp' ) {
-			const prevItem = getPrevItem( current, lastIndex );
-			nextId = prevItem?.id;
-		} else if ( code === 'ArrowDown' ) {
-			const nextItem = getNextItem( current, lastIndex );
-			nextId = nextItem?.id;
-		} else if ( ( code === 'Enter' || code === 'Space' ) && focusedItem ) {
-			nextId = focusedItem;
-		}
-
-		if ( nextId ) {
-			const element = refs[ nextId ];
-			element?.focus();
-			onSelect( nextId );
-		}
-	};
-
-	const registerRef = ( ref, id ) => {
-		setRef( allRefs => {
-			if ( ! allRefs[ id ] && ref ) {
-				return { ...allRefs, [ id ]: ref };
-			}
-			return allRefs;
-		} );
-	};
-
-	const registerItem = data => {
-		setItems( allItems => {
-			const newItems = [ ...allItems ];
-			const id = data?.id;
-			const currentIdx = newItems.findIndex( item => item?.id === id );
-
-			if ( currentIdx >= 0 ) {
-				newItems[ currentIdx ] = data;
-			} else {
-				newItems.push( data );
-			}
-
-			return newItems;
-		} );
-	};
-
-	return {
-		selectedItem: selected,
-		handleClickItem,
-		handleKeyDownItem,
-		handleFocusItem,
-		registerRef,
-		registerItem,
-		items,
-	};
-};
-
-export default useMenuNavigation;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
deleted file mode 100644
index c733ff1f0a08c..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
-	IconTooltip,
-	Spinner,
-	Text,
-	ThreatSeverityBadge,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { ExternalLink } from '@wordpress/components';
-import { dateI18n } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-import clsx from 'clsx';
-import React, { useState, useCallback, useContext, useMemo } from 'react';
-import { PAID_PLUGIN_SUPPORT_URL } from '../../constants';
-import useFixers from '../../hooks/use-fixers';
-import styles from './styles.module.scss';
-
-// Extract context provider for clarity and reusability
-const PaidAccordionContext = React.createContext();
-
-// Component for displaying threat dates
-const ScanHistoryDetails = ( { firstDetected, fixedOn, status } ) => {
-	const statusText = useMemo( () => {
-		if ( status === 'fixed' ) {
-			return sprintf(
-				/* translators: %s: Fixed on date */
-				__( 'Threat fixed %s', 'jetpack-protect' ),
-				dateI18n( 'M j, Y', fixedOn )
-			);
-		}
-		if ( status === 'ignored' ) {
-			return __( 'Threat ignored', 'jetpack-protect' );
-		}
-		return null;
-	}, [ status, fixedOn ] );
-
-	return (
-		firstDetected && (
-			<>
-				<Text className={ styles[ 'accordion-header-status' ] }>
-					{ sprintf(
-						/* translators: %s: First detected date */
-						__( 'Threat found %s', 'jetpack-protect' ),
-						dateI18n( 'M j, Y', firstDetected )
-					) }
-					{ statusText && (
-						<>
-							<span className={ styles[ 'accordion-header-status-separator' ] }></span>
-							<span className={ styles[ `is-${ status }` ] }>{ statusText }</span>
-						</>
-					) }
-				</Text>
-				{ [ 'fixed', 'ignored' ].includes( status ) && <StatusBadge status={ status } /> }
-			</>
-		)
-	);
-};
-
-// Badge for displaying the status (fixed or ignored)
-const StatusBadge = ( { status } ) => (
-	<div className={ `${ styles[ 'status-badge' ] } ${ styles[ status ] }` }>
-		{ status === 'fixed'
-			? __( 'Fixed', 'jetpack-protect' )
-			: __( 'Ignored', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 ) }
-	</div>
-);
-
-const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => {
-	if ( isStaleFixInProgress ) {
-		return (
-			<IconTooltip
-				className={ styles[ 'icon-tooltip' ] }
-				iconClassName={ styles[ 'icon-tooltip__icon' ] }
-				iconSize={ 20 }
-				placement={ 'top' }
-				hoverShow={ true }
-			>
-				<Text className={ styles[ 'icon-tooltip__content' ] }>
-					{ createInterpolateElement(
-						__(
-							'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
-							'jetpack-protect'
-						),
-						{
-							supportLink: (
-								<ExternalLink
-									className={ styles[ 'support-link' ] }
-									href={ PAID_PLUGIN_SUPPORT_URL }
-								/>
-							),
-						}
-					) }
-				</Text>
-			</IconTooltip>
-		);
-	}
-
-	if ( isActiveFixInProgress ) {
-		return <Spinner color="black" />;
-	}
-
-	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
-};
-
-export const PaidAccordionItem = ( {
-	id,
-	title,
-	label,
-	icon,
-	fixable,
-	severity,
-	children,
-	firstDetected,
-	fixedOn,
-	onOpen,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { open, setOpen } = useContext( PaidAccordionContext );
-	const isOpen = open === id;
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-
-	const handleClick = useCallback( () => {
-		if ( ! isOpen ) {
-			onOpen?.();
-		}
-		setOpen( current => ( current === id ? null : id ) );
-	}, [ isOpen, onOpen, setOpen, id ] );
-
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<div className={ styles[ 'accordion-item' ] }>
-			<button className={ styles[ 'accordion-header' ] } onClick={ handleClick }>
-				<div>
-					<Text className={ styles[ 'accordion-header-label' ] } mb={ 1 }>
-						<Icon icon={ icon } className={ styles[ 'accordion-header-label-icon' ] } />
-						{ label }
-					</Text>
-					<Text
-						className={ styles[ 'accordion-header-description' ] }
-						variant={ isOpen ? 'title-small' : 'body' }
-					>
-						{ title }
-					</Text>
-					{ [ 'fixed', 'ignored' ].includes( status ) && (
-						<ScanHistoryDetails
-							firstDetected={ firstDetected }
-							fixedOn={ fixedOn }
-							status={ status }
-						/>
-					) }
-				</div>
-				<div>
-					<ThreatSeverityBadge severity={ severity } />
-				</div>
-				{ ! hideAutoFixColumn && fixable && (
-					<div>
-						{ renderFixerStatus( isThreatFixInProgress( id ), isThreatFixStale( id ) ) }
-						{ isSmall && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					</div>
-				) }
-				<div className={ styles[ 'accordion-header-button' ] }>
-					<Icon icon={ isOpen ? chevronUp : chevronDown } size={ 38 } />
-				</div>
-			</button>
-			<div
-				className={ clsx( styles[ 'accordion-body' ], {
-					[ styles[ 'accordion-body-open' ] ]: isOpen,
-					[ styles[ 'accordion-body-close' ] ]: ! isOpen,
-				} ) }
-				aria-hidden={ ! isOpen }
-			>
-				{ children }
-			</div>
-		</div>
-	);
-};
-
-const PaidAccordion = ( { children } ) => {
-	const [ open, setOpen ] = useState();
-
-	return (
-		<PaidAccordionContext.Provider value={ { open, setOpen } }>
-			<div className={ styles.accordion }>{ children }</div>
-		</PaidAccordionContext.Provider>
-	);
-};
-
-export default PaidAccordion;
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx b/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
deleted file mode 100644
index 252f22b2bad77..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { wordpress, plugins } from '@wordpress/icons';
-import React from 'react';
-import PaidAccordion, { PaidAccordionItem } from '..';
-
-export default {
-	title: 'Plugins/Protect/Paid Accordion',
-	component: PaidAccordion,
-	parameters: {
-		layout: 'centered',
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: 800 } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-// eslint-disable-next-line no-unused-vars
-export const Default = args => (
-	<PaidAccordion>
-		<PaidAccordionItem
-			id="wordpress"
-			label="WordPress (5.9-5.9.1)"
-			title="Contributor+ Stored Cross-Site Scripting"
-			icon={ wordpress }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-2"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-3"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-		<PaidAccordionItem
-			id="jetpack-4"
-			label="Jetpack < 9.8"
-			title="Carousel Module Non-Published Page/Post Attachment Comment Leak"
-			icon={ plugins }
-		>
-			<Text variant="title-small" mb={ 2 }>
-				What is the problem?
-			</Text>
-			<Text mb={ 5 }>
-				Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or
-				Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to
-				perform to Stored Cross-Site Scripting attacks
-			</Text>
-			<Text variant="title-small" mb={ 2 }>
-				How to fix it?
-			</Text>
-			<Text>Update to WordPress 5.9.2</Text>
-		</PaidAccordionItem>
-	</PaidAccordion>
-);
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
deleted file mode 100644
index 8304942b206d4..0000000000000
--- a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.accordion {
-	display: inline-block;
-	width: 100%;
-	border-radius: var( --jp-border-radius );
-	border: 1px solid var( --jp-gray );
-
-	& > *:not(:last-child) {
-		border-bottom: 1px solid var( --jp-gray );
-	}
-}
-
-.accordion-item {
-	background-color: var( --jp-white );
-}
-
-.accordion-header {
-	margin: 0;
-	display: grid;
-	grid-template-columns: repeat(9, 1fr);
-	cursor: pointer;
-	box-sizing: border-box;
-	background: none;
-	border: none;
-	width: 100%;
-	align-items: center;
-	outline-color: var( --jp-black );
-	padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px
-	text-align: start;
-
-	>:first-of-type {
-		grid-column: 1/7;
-	}
-
-	>:last-of-type {
-		grid-column: 9;
-	}
-
-	>:not( :first-child ) {
-		margin: auto;
-	}
-
-	&:hover {
-		background: var( --jp-gray-0 );
-	}
-}
-
-.accordion-header-label {
-	display: flex;
-	align-items: center;
-	font-size: var( --font-body-small );
-	font-weight: normal;
-}
-
-.accordion-header-label-icon {
-	margin-right: var( --spacing-base ); // 8px
-}
-
-.accordion-header-description {
-	font-weight: 600;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status {
-	font-size: var( --font-body-small );
-	font-weight: normal;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-	margin-bottom: var( --spacing-base ); // 8px
-}
-
-.accordion-header-status-separator {
-	display: inline-block;
-	height: 4px;
-	margin: 2px 12px;
-	width: 4px;
-	background-color: var( --jp-gray-50 );
-}
-
-.accordion-header-button {
-	align-items: center;
-}
-
-.accordion-body {
-	transform-origin: top center;
-	overflow: hidden;
-
-	&-close {
-		transition: all .1s;
-		max-height: 0;
-		padding: 0;
-		transform: scaleY(0);
-	}
-
-	&-open {
-		transition: max-height .3s, transform .2s;
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px
-		max-height: 1000px;
-		transform: scaleY(1);
-	}
-}
-
-.icon-check {
-	fill: var( --jp-green-40 );
-}
-
-.status-badge {
-	border-radius: 32px;
-	flex-shrink: 0;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 16px;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	position: relative;
-	text-align: center;
-	width: 60px;
-	margin-left: calc( var( --spacing-base ) * 4 ); // 32px
-
-	&.fixed {
-		color: var( --jp-white );
-		background-color: #008a20;
-	}
-
-	&.ignored {
-		color: var( --jp-white );
-		background-color: var( --jp-gray-50 );
-	}
-}
-
-.is-fixed {
-	color: #008a20;
-}
-
-.support-link {
-	color: inherit;
-
-	&:focus,
-	&:hover {
-		color: inherit;
-		box-shadow: none;
-	}
-}
-
-.icon-tooltip {
-    max-height: 20px;
-    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-
-    &__icon {
-        color: var( --jp-red );
-    }
-
-    &__content {
-        color: var( --jp-gray-70 );
-        font-weight: 400;
-        line-height: 24px;
-    }
-}
-
-@media ( max-width: 599px ) {
-	.accordion-header {
-		display: grid;
-		grid-auto-rows: minmax( auto, auto );
-
-		>:first-child {
-			grid-column: 1/8;
-		 	grid-row: 1;
-		}
-
-		>:nth-child( 2 ) {
-			padding-left: calc( var( --spacing-base ) * 4 ); // 32px
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) {
-			grid-row: 2;
-		}
-
-		>:nth-child( 3 ) span {
-			position: absolute;
-			margin-top: var( --spacing-base ); // 8px
-		}
-
-		>:last-child {
-			grid-column: 10;
-			grid-row: 1/3;
-		}
-	}
-
-	.status-badge {
-		display: none;
-	}
-}
-
-@media ( max-width: 1200px ) {
-	.accordion-header-status {
-		display: grid;
-	}
-
-	.accordion-header-status-separator {
-		display: none;
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
index 3edd7911a0b6a..0f857430d92d8 100644
--- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx
+++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx
@@ -11,9 +11,9 @@ import { __ } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useConnectSiteMutation from '../../data/use-connection-mutation';
+import useProductDataQuery from '../../data/use-product-data-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 
 /**
  * Product Detail component.
@@ -30,7 +30,7 @@ const ConnectedPricingTable = () => {
 	} );
 
 	// Access paid protect product data
-	const { jetpackScan } = useProtectData();
+	const { data: jetpackScan } = useProductDataQuery();
 	const { pricingForUi } = jetpackScan;
 	const { introductoryOffer, currencyCode: currency = 'USD' } = pricingForUi;
 
diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
deleted file mode 100644
index d1100d8ce6d5e..0000000000000
--- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { type JSX } from 'react';
-
-/**
- * Protect Shield and Checkmark SVG Icon
- *
- * @return {JSX.Element} Protect Shield and Checkmark SVG Icon
- */
-export default function ProtectCheck(): JSX.Element {
-	return (
-		<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-				fill="#069E08"
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx b/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
deleted file mode 100644
index e626b6af066c7..0000000000000
--- a/projects/plugins/protect/src/js/components/scan-navigation/index.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usePlan from '../../hooks/use-plan';
-import ButtonGroup from '../button-group';
-
-/**
- * Navigation for scan sections.
- *
- * @return {React.Element} The React Component.
- */
-export default function ScanNavigation() {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const { hasPlan } = usePlan();
-
-	const viewingScanPage = location.pathname === '/scan';
-	const viewingHistoryPage = location.pathname.includes( '/scan/history' );
-	const navigateToScanPage = useCallback( () => navigate( '/scan' ), [ navigate ] );
-	const navigateToHistoryPage = useCallback( () => navigate( '/scan/history' ), [ navigate ] );
-
-	if ( ! hasPlan || ( ! viewingScanPage && ! viewingHistoryPage ) ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ButtonGroup>
-				<ButtonGroup.Button
-					variant={ viewingScanPage ? 'primary' : 'secondary' }
-					onClick={ navigateToScanPage }
-				>
-					{ __( 'Scanner', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-				<ButtonGroup.Button
-					variant={ viewingHistoryPage ? 'primary' : 'secondary' }
-					onClick={ navigateToHistoryPage }
-				>
-					{ __( 'History', 'jetpack-protect' ) }
-				</ButtonGroup.Button>
-			</ButtonGroup>
-		</>
-	);
-}
diff --git a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
index bc5e0107cea80..45a8524e60b59 100644
--- a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
+++ b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx
@@ -1,6 +1,7 @@
 import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
+import { Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon } from '@wordpress/icons';
 import React, { useState, useCallback } from 'react';
 import styles from './styles.module.scss';
 
@@ -65,10 +66,10 @@ export default function ThreatFixHeader( { threat, fixAllDialog, onCheckFix } )
 	return (
 		<>
 			<div className={ styles.threat }>
-				<Icon icon={ threat.icon } className={ styles.threat__icon } />
+				<Icon icon={ getThreatIcon( threat ) } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ threat.label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
 					<Text className={ styles.threat__summary__title }>
 						{ getFixerMessage( threat.fixable ) }
diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx
deleted file mode 100644
index 2d493b11e64a4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-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';
-import ScanButton from '../scan-button';
-import styles from './styles.module.scss';
-
-const ProtectCheck = () => (
-	<svg width="80" height="96" viewBox="0 0 80 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
-			fill="#069E08"
-		/>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
-			fill="white"
-		/>
-	</svg>
-);
-
-/**
- * Time Since
- *
- * @param {string} date - The past date to compare to the current date.
- * @return {string} - A description of the amount of time between a date and now, i.e. "5 minutes ago".
- */
-const timeSince = date => {
-	const now = new Date();
-	const offset = now.getTimezoneOffset() * 60000;
-
-	const seconds = Math.floor( ( new Date( now.getTime() + offset ).getTime() - date ) / 1000 );
-
-	let interval = seconds / 31536000; // 364 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of years i.e. "5 years ago".
-			_n( '%s year ago', '%s years ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 2592000; // 30 days
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of months i.e. "5 months ago".
-			_n( '%s month ago', '%s months ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 86400; // 1 day
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of days i.e. "5 days ago".
-			_n( '%s day ago', '%s days ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 3600; // 1 hour
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of hours i.e. "5 hours ago".
-			_n( '%s hour ago', '%s hours ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	interval = seconds / 60; // 1 minute
-	if ( interval > 1 ) {
-		return sprintf(
-			// translators: placeholder is a number amount of minutes i.e. "5 minutes ago".
-			_n( '%s minute ago', '%s minutes ago', Math.floor( interval ), 'jetpack-protect' ),
-			Math.floor( interval )
-		);
-	}
-
-	return __( 'a few seconds ago', 'jetpack-protect' );
-};
-
-const EmptyList = () => {
-	const { lastChecked } = useProtectData();
-	const { hasPlan } = usePlan();
-	const { data: status } = useScanStatusQuery();
-
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const timeSinceLastScan = useMemo( () => {
-		return lastChecked ? timeSince( Date.parse( lastChecked ) ) : null;
-	}, [ lastChecked ] );
-
-	return (
-		<div className={ styles.empty }>
-			<ProtectCheck />
-			<H3 weight="bold" mt={ 8 }>
-				{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-			</H3>
-			<Text mb={ 4 }>
-				{ timeSinceLastScan
-					? createInterpolateElement(
-							sprintf(
-								// translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago".
-								__(
-									'The last Protect scan ran <strong>%s</strong> and everything looked great.',
-									'jetpack-protect'
-								),
-								timeSinceLastScan
-							),
-							{
-								strong: <strong />,
-							}
-					  )
-					: __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) }
-			</Text>
-			{ hasPlan && (
-				<>
-					<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-					{ ! isScanInProgress( status ) && (
-						<OnboardingPopover
-							id="paid-daily-and-manual-scans"
-							position={ 'bottom middle' }
-							anchor={ dailyAndManualScansPopoverAnchor }
-						/>
-					) }
-				</>
-			) }
-		</div>
-	);
-};
-
-export default EmptyList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx b/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
deleted file mode 100644
index 88d4a92f9bac5..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Text, Button, ContextualUpgradeTrigger } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import FreeAccordion, { FreeAccordionItem } from '../free-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	description,
-	fixedIn,
-	icon,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-} ) => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { upgradePlan } = usePlan();
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_threat_list_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	return (
-		<FreeAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'What is the problem?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ fixedIn && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-					<ContextualUpgradeTrigger
-						description={ __(
-							'Looking for advanced scan results and one-click fixes?',
-							'jetpack-protect'
-						) }
-						cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-						onClick={ getScan }
-						className={ styles[ 'threat-item-cta' ] }
-					/>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-		</FreeAccordionItem>
-	);
-};
-
-const FreeList = ( { list } ) => {
-	return (
-		<Pagination list={ list }>
-			{ ( { currentItems } ) => (
-				<FreeAccordion>
-					{ currentItems.map(
-						( {
-							description,
-							fixedIn,
-							icon,
-							id,
-							label,
-							name,
-							source,
-							table,
-							title,
-							type,
-							version,
-						} ) => (
-							<ThreatAccordionItem
-								description={ description }
-								fixedIn={ fixedIn }
-								icon={ icon }
-								id={ id }
-								label={ label }
-								key={ id }
-								name={ name }
-								source={ source }
-								table={ table }
-								title={ title }
-								type={ type }
-								version={ version }
-							/>
-						)
-					) }
-				</FreeAccordion>
-			) }
-		</Pagination>
-	);
-};
-
-export default FreeList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx
deleted file mode 100644
index 2823a804c1412..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/index.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import {
-	Container,
-	Col,
-	Title,
-	Button,
-	useBreakpointMatch,
-	Text,
-} 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';
-import OnboardingPopover from '../onboarding-popover';
-import ScanButton from '../scan-button';
-import EmptyList from './empty';
-import FreeList from './free-list';
-import ThreatsNavigation from './navigation';
-import PaidList from './paid-list';
-import styles from './styles.module.scss';
-import useThreatsList from './use-threats-list';
-
-const ThreatsList = () => {
-	const { hasPlan } = usePlan();
-	const { item, list, selected, setSelected } = useThreatsList();
-	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 => {
-			const threatId = parseInt( threat.id );
-			return (
-				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
-			);
-		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
-
-	// Popover anchors
-	const [ yourScanResultsPopoverAnchor, setYourScanResultsPopoverAnchor ] = useState( null );
-	const [ understandSeverityPopoverAnchor, setUnderstandSeverityPopoverAnchor ] = useState( null );
-	const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null );
-	const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] =
-		useState( null );
-
-	const { setModal } = useModal();
-
-	const handleShowAutoFixersClick = threatList => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_ALL_THREATS',
-				props: { threatList },
-			} );
-		};
-	};
-
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					return __( 'All threats', 'jetpack-protect' );
-				}
-				return sprintf(
-					/* translators: placeholder is the amount of threats found on the site. */
-					__( 'All %s threats', 'jetpack-protect' ),
-					list.length
-				);
-			case 'core':
-				return sprintf(
-					/* translators: placeholder is the amount of WordPress threats found on the site. */
-					__( '%1$s WordPress %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'files':
-				return sprintf(
-					/* translators: placeholder is the amount of file threats found on the site. */
-					__( '%1$s file %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			case 'database':
-				return sprintf(
-					/* translators: placeholder is the amount of database threats found on the site. */
-					__( '%1$s database %2$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats'
-				);
-			default:
-				return sprintf(
-					/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-					__( '%1$s %2$s in %3$s %4$s', 'jetpack-protect' ),
-					list.length,
-					list.length === 1 ? 'threat' : 'threats',
-					item?.name,
-					item?.version
-				);
-		}
-	}, [ selected, list, item ] );
-
-	return (
-		<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-			<Col lg={ 4 }>
-				<div ref={ setYourScanResultsPopoverAnchor }>
-					<ThreatsNavigation selected={ selected } onSelect={ setSelected } />
-				</div>
-				{ ! scanning && (
-					<OnboardingPopover
-						id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
-						position="top"
-						anchor={ yourScanResultsPopoverAnchor }
-					/>
-				) }
-			</Col>
-			<Col lg={ 8 }>
-				{ list?.length > 0 ? (
-					<>
-						<div className={ styles[ 'list-header' ] }>
-							<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-							{ hasPlan && (
-								<div className={ styles[ 'list-header__controls' ] }>
-									{ fixableList.length > 0 && (
-										<>
-											<Button
-												ref={ setShowAutoFixersPopoverAnchor }
-												variant="primary"
-												onClick={ handleShowAutoFixersClick( fixableList ) }
-											>
-												{ sprintf(
-													/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-													__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-													fixableList.length
-												) }
-											</Button>
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-fix-all-threats"
-													position={ isSm ? 'bottom right' : 'middle left' }
-													anchor={ showAutoFixersPopoverAnchor }
-												/>
-											) }
-											<ScanButton ref={ setDailyAndManualScansPopoverAnchor } />
-											{ ! scanning && (
-												<OnboardingPopover
-													id="paid-daily-and-manual-scans"
-													position={ isSm ? 'bottom left' : 'middle left' }
-													anchor={ dailyAndManualScansPopoverAnchor }
-												/>
-											) }
-										</>
-									) }
-								</div>
-							) }
-						</div>
-						{ hasPlan ? (
-							<>
-								<div ref={ setUnderstandSeverityPopoverAnchor }>
-									<PaidList list={ list } />
-									<div className={ styles[ 'manual-scan' ] }>
-										<Text variant="body-small" mb={ 4 }>
-											{ __(
-												'If you have manually fixed any of the threats listed above, you can run a manual scan now or wait for Jetpack to scan your site later today.',
-												'jetpack-protect'
-											) }
-										</Text>
-										<ScanButton />
-									</div>
-								</div>
-								{ ! scanning && (
-									<OnboardingPopover
-										id="paid-understand-severity"
-										position="top"
-										anchor={ understandSeverityPopoverAnchor }
-									/>
-								) }
-							</>
-						) : (
-							<FreeList list={ list } />
-						) }
-					</>
-				) : (
-					<EmptyList />
-				) }
-			</Col>
-		</Container>
-	);
-};
-
-export default ThreatsList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx b/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
deleted file mode 100644
index 9befe85a78612..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useBreakpointMatch } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
-import {
-	wordpress as coreIcon,
-	plugins as pluginsIcon,
-	warning as warningIcon,
-	color as themesIcon,
-	code as filesIcon,
-} from '@wordpress/icons';
-import { useCallback, useMemo } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
-import Navigation, { NavigationItem, NavigationGroup } from '../navigation';
-
-const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFilter = 'all' } ) => {
-	const { hasPlan } = usePlan();
-	const {
-		results: { plugins, themes },
-		counts: {
-			current: { threats: numThreats, core: numCoreThreats, files: numFilesThreats },
-		},
-	} = useProtectData( { sourceType, filter: { status: statusFilter } } );
-
-	const { recordEvent } = useAnalyticsTracks();
-	const [ isSmallOrLarge ] = useBreakpointMatch( 'lg', '<' );
-
-	const trackNavigationClickAll = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_all_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickCore = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_core_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickPlugin = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_plugin_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickTheme = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_theme_click' );
-	}, [ recordEvent ] );
-
-	const trackNavigationClickFiles = useCallback( () => {
-		recordEvent( 'jetpack_protect_navigation_file_click' );
-	}, [ recordEvent ] );
-
-	const allLabel = useMemo( () => {
-		if ( statusFilter === 'fixed' ) {
-			return __( 'All fixed threats', 'jetpack-protect' );
-		}
-		if ( statusFilter === 'ignored' ) {
-			return __(
-				'All ignored threats',
-				'jetpack-protect',
-				/** dummy arg to avoid bad minification */ 0
-			);
-		}
-		return __( 'All threats', 'jetpack-protect' );
-	}, [ statusFilter ] );
-
-	return (
-		<Navigation
-			selected={ selected }
-			onSelect={ onSelect }
-			mode={ isSmallOrLarge ? 'dropdown' : 'list' }
-		>
-			<NavigationItem
-				initial
-				id="all"
-				label={ allLabel }
-				icon={ warningIcon }
-				badge={ numThreats }
-				disabled={ numThreats <= 0 }
-				onClick={ trackNavigationClickAll }
-				checked={ true }
-			/>
-			<NavigationItem
-				id="core"
-				label={ __( 'WordPress', 'jetpack-protect' ) }
-				icon={ coreIcon }
-				badge={ numCoreThreats }
-				disabled={ numCoreThreats <= 0 }
-				onClick={ trackNavigationClickCore }
-				checked={ true }
-			/>
-			<NavigationGroup label={ __( 'Plugins', 'jetpack-protect' ) } icon={ pluginsIcon }>
-				{ plugins.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickPlugin }
-					/>
-				) ) }
-			</NavigationGroup>
-			<NavigationGroup label={ __( 'Themes', 'jetpack-protect' ) } icon={ themesIcon }>
-				{ themes.map( ( { name, threats, checked } ) => (
-					<NavigationItem
-						key={ name }
-						id={ name }
-						label={ name }
-						checked={ checked }
-						badge={ threats?.length }
-						disabled={ threats?.length <= 0 }
-						onClick={ trackNavigationClickTheme }
-					/>
-				) ) }
-			</NavigationGroup>
-			{ hasPlan && (
-				<>
-					<NavigationItem
-						id="files"
-						label={ __( 'Files', 'jetpack-protect' ) }
-						icon={ filesIcon }
-						badge={ numFilesThreats }
-						disabled={ numFilesThreats <= 0 }
-						onClick={ trackNavigationClickFiles }
-						checked={ true }
-					/>
-				</>
-			) }
-		</Navigation>
-	);
-};
-
-export default ThreatsNavigation;
diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
deleted file mode 100644
index 3e17bed0eeac4..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import React, { useCallback, useState, useMemo } from 'react';
-import styles from './styles.module.scss';
-
-const PaginationButton = ( { pageNumber, currentPage, onPageChange } ) => {
-	const isCurrentPage = useMemo( () => currentPage === pageNumber, [ currentPage, pageNumber ] );
-
-	const handleClick = useCallback( () => {
-		onPageChange( pageNumber );
-	}, [ onPageChange, pageNumber ] );
-
-	return (
-		<Button
-			size={ 'medium' }
-			className={ ! isCurrentPage ? styles.unfocused : null }
-			onClick={ handleClick }
-			aria-current={ isCurrentPage ? 'page' : undefined }
-			aria-label={ sprintf(
-				/* translators: placeholder is a page number, i.e. "Page 123" */
-				__( 'Page %d', 'jetpack-protect' ),
-				pageNumber
-			) }
-		>
-			{ pageNumber }
-		</Button>
-	);
-};
-
-const Pagination = ( { list, itemPerPage = 10, children } ) => {
-	const [ isSm ] = useBreakpointMatch( 'sm' );
-
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-
-	const handlePreviousPageClick = useCallback(
-		() => setCurrentPage( currentPage - 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-	const handleNextPageClick = useCallback(
-		() => setCurrentPage( currentPage + 1 ),
-		[ currentPage, setCurrentPage ]
-	);
-
-	const totalPages = useMemo( () => Math.ceil( list.length / itemPerPage ), [ list, itemPerPage ] );
-
-	const currentItems = useMemo( () => {
-		const indexOfLastItem = currentPage * itemPerPage;
-		const indexOfFirstItem = indexOfLastItem - itemPerPage;
-		return list.slice( indexOfFirstItem, indexOfLastItem );
-	}, [ currentPage, list, itemPerPage ] );
-
-	const pageNumbers = useMemo( () => {
-		if ( isSm ) {
-			return [ currentPage ];
-		}
-
-		const result = [ 1 ];
-		if ( currentPage > 3 && totalPages > 4 ) {
-			result.push( '…' );
-		}
-
-		if ( currentPage === 1 ) {
-			// Current page is the first page.
-			// i.e. [ 1 ] 2 3 4 ... 10
-			result.push( currentPage + 1, currentPage + 2, currentPage + 3 );
-		} else if ( currentPage === 2 ) {
-			// Current page is the second to first page.
-			// i.e. 1 [ 2 ] 3 4 ... 10
-			result.push( currentPage, currentPage + 1, currentPage + 2 );
-		} else if ( currentPage < totalPages - 1 ) {
-			// Current page is positioned in the middle of the pagination.
-			// i.e. 1 ... 3 [ 4 ] 5 ... 10
-			result.push( currentPage - 1, currentPage, currentPage + 1 );
-		} else if ( currentPage === totalPages - 1 ) {
-			// Current page is the second to last page.
-			// i.e. 1 ... 7 8 [ 9 ] 10
-			currentPage > 3 && result.push( currentPage - 2 );
-			currentPage > 2 && result.push( currentPage - 1 );
-			result.push( currentPage );
-		} else if ( currentPage === totalPages ) {
-			// Current page is the last page.
-			// i.e. 1 ... 7 8 9 [ 10 ]
-			currentPage >= 5 && result.push( currentPage - 3 );
-			currentPage >= 4 && result.push( currentPage - 2 );
-			result.push( currentPage - 1 );
-		}
-
-		if ( result[ result.length - 1 ] < totalPages - 1 ) {
-			result.push( '…' );
-			result.push( totalPages );
-		} else if ( result[ result.length - 1 ] < totalPages ) {
-			result.push( totalPages );
-		}
-
-		return result.filter( pageNumber => pageNumber <= totalPages || isNaN( pageNumber ) );
-	}, [ currentPage, isSm, totalPages ] );
-
-	return (
-		<>
-			{ children( { currentItems } ) }
-			{ totalPages > 1 && (
-				<nav
-					role="navigation"
-					aria-label={ __( 'Threat list pages', 'jetpack-protect' ) }
-					className={ styles[ 'pagination-container' ] }
-				>
-					<Button
-						onClick={ handlePreviousPageClick }
-						disabled={ currentPage === 1 }
-						variant={ 'link' }
-						icon={ chevronLeft }
-						iconSize={ 24 }
-						aria-label={ __( 'Previous page', 'jetpack-protect' ) }
-					/>
-					{ pageNumbers.map( ( pageNumber, index ) =>
-						typeof pageNumber === 'number' ? (
-							<PaginationButton
-								key={ pageNumber }
-								pageNumber={ pageNumber }
-								currentPage={ currentPage }
-								onPageChange={ setCurrentPage }
-							/>
-						) : (
-							<span key={ `ellipses_${ index }` }>{ pageNumber }</span>
-						)
-					) }
-					<Button
-						onClick={ handleNextPageClick }
-						disabled={ currentPage === totalPages }
-						variant={ 'link' }
-						icon={ chevronRight }
-						iconSize={ 24 }
-						aria-label={ __( 'Next page', 'jetpack-protect' ) }
-					/>
-				</nav>
-			) }
-		</>
-	);
-};
-
-export default Pagination;
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
deleted file mode 100644
index baedf8dfa5184..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import {
-	Text,
-	Button,
-	DiffViewer,
-	MarkedLines,
-	useBreakpointMatch,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import useFixers from '../../hooks/use-fixers';
-import useModal from '../../hooks/use-modal';
-import PaidAccordion, { PaidAccordionItem } from '../paid-accordion';
-import Pagination from './pagination';
-import styles from './styles.module.scss';
-
-const ThreatAccordionItem = ( {
-	context,
-	description,
-	diff,
-	filename,
-	firstDetected,
-	fixedIn,
-	fixedOn,
-	icon,
-	fixable,
-	id,
-	label,
-	name,
-	source,
-	title,
-	type,
-	severity,
-	status,
-	hideAutoFixColumn = false,
-} ) => {
-	const { setModal } = useModal();
-	const { recordEvent } = useAnalyticsTracks();
-
-	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const isActiveFixInProgress = isThreatFixInProgress( id );
-	const isStaleFixInProgress = isThreatFixStale( id );
-
-	const learnMoreButton = source ? (
-		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
-			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
-		</Button>
-	) : null;
-
-	const handleIgnoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'IGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleUnignoreThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'UNIGNORE_THREAT',
-				props: { id, label, title, icon, severity },
-			} );
-		};
-	};
-
-	const handleFixThreatClick = () => {
-		return event => {
-			event.preventDefault();
-			setModal( {
-				type: 'FIX_THREAT',
-				props: { id, fixable, label, icon, severity },
-			} );
-		};
-	};
-
-	return (
-		<PaidAccordionItem
-			id={ id }
-			label={ label }
-			title={ title }
-			icon={ icon }
-			fixable={ fixable }
-			severity={ severity }
-			firstDetected={ firstDetected }
-			fixedOn={ fixedOn }
-			status={ status }
-			onOpen={ useCallback( () => {
-				if ( ! [ 'core', 'plugin', 'theme', 'file', 'database' ].includes( type ) ) {
-					return;
-				}
-				recordEvent( `jetpack_protect_${ type }_threat_open` );
-			}, [ recordEvent, type ] ) }
-			hideAutoFixColumn={ hideAutoFixColumn }
-		>
-			{ description && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ status !== 'fixed'
-							? __( 'What is the problem?', 'jetpack-protect' )
-							: __(
-									'What was the problem?',
-									'jetpack-protect',
-									/** dummy arg to avoid bad minification */ 0
-							  ) }
-					</Text>
-					<Text mb={ 2 }>{ description }</Text>
-					{ learnMoreButton }
-				</div>
-			) }
-			{ ( filename || context || diff ) && (
-				<Text variant="title-small" mb={ 2 }>
-					{ __( 'The technical details', 'jetpack-protect' ) }
-				</Text>
-			) }
-			{ filename && (
-				<>
-					<Text mb={ 2 }>
-						{
-							/* translators: filename follows in separate line; e.g. "PHP.Injection.5 in: `post.php`" */
-							__( 'Threat found in file:', 'jetpack-protect' )
-						}
-					</Text>
-					<pre className={ styles[ 'threat-filename' ] }>{ filename }</pre>
-				</>
-			) }
-			{ context && <MarkedLines context={ context } /> }
-			{ diff && <DiffViewer diff={ diff } /> }
-			{ fixedIn && status !== 'fixed' && (
-				<div className={ styles[ 'threat-section' ] }>
-					<Text variant="title-small" mb={ 2 }>
-						{ __( 'How to fix it?', 'jetpack-protect' ) }
-					</Text>
-					<Text mb={ 2 }>
-						{
-							/* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */
-							sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn )
-						}
-					</Text>
-				</div>
-			) }
-			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
-			{ [ 'ignored', 'current' ].includes( status ) && (
-				<div className={ styles[ 'threat-footer' ] }>
-					{ 'ignored' === status && (
-						<Button
-							isDestructive={ true }
-							variant="secondary"
-							onClick={ handleUnignoreThreatClick() }
-						>
-							{ __( 'Unignore threat', 'jetpack-protect' ) }
-						</Button>
-					) }
-					{ 'current' === status && (
-						<>
-							<Button
-								isDestructive={ true }
-								variant="secondary"
-								onClick={ handleIgnoreThreatClick() }
-								disabled={ isActiveFixInProgress || isStaleFixInProgress }
-							>
-								{ __( 'Ignore threat', 'jetpack-protect' ) }
-							</Button>
-							{ fixable && (
-								<Button
-									disabled={ isActiveFixInProgress || isStaleFixInProgress }
-									onClick={ handleFixThreatClick() }
-								>
-									{ __( 'Fix threat', 'jetpack-protect' ) }
-								</Button>
-							) }
-						</>
-					) }
-				</div>
-			) }
-		</PaidAccordionItem>
-	);
-};
-
-const PaidList = ( { list, hideAutoFixColumn = false } ) => {
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
-
-	return (
-		<>
-			{ ! isSmall && (
-				<div className={ styles[ 'accordion-header' ] }>
-					<span>{ __( 'Details', 'jetpack-protect' ) }</span>
-					<span>{ __( 'Severity', 'jetpack-protect' ) }</span>
-					{ ! hideAutoFixColumn && <span>{ __( 'Auto-fix', 'jetpack-protect' ) }</span> }
-					<span></span>
-				</div>
-			) }
-			<Pagination list={ list }>
-				{ ( { currentItems } ) => (
-					<PaidAccordion>
-						{ currentItems.map(
-							( {
-								context,
-								description,
-								diff,
-								filename,
-								firstDetected,
-								fixedIn,
-								fixedOn,
-								icon,
-								fixable,
-								id,
-								label,
-								name,
-								severity,
-								source,
-								table,
-								title,
-								type,
-								version,
-								status,
-							} ) => (
-								<ThreatAccordionItem
-									context={ context }
-									description={ description }
-									diff={ diff }
-									filename={ filename }
-									firstDetected={ firstDetected }
-									fixedIn={ fixedIn }
-									fixedOn={ fixedOn }
-									icon={ icon }
-									fixable={ fixable }
-									id={ id }
-									key={ id }
-									label={ label }
-									name={ name }
-									severity={ severity }
-									source={ source }
-									table={ table }
-									title={ title }
-									type={ type }
-									version={ version }
-									status={ status }
-									hideAutoFixColumn={ hideAutoFixColumn }
-								/>
-							)
-						) }
-					</PaidAccordion>
-				) }
-			</Pagination>
-		</>
-	);
-};
-
-export default PaidList;
diff --git a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
deleted file mode 100644
index 4a50d87b2562b..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.threat-section + .threat-section {
-	margin-top: calc( var( --spacing-base ) * 5 ); // 40px
-}
-
-.threat-filename {
-	background-color: var( --jp-gray-0 );
-	padding: calc( var( --spacing-base ) * 3 ); // 24px
-	overflow-x: scroll;
-}
-
-.threat-footer {
-	display: flex;
-	justify-content: flex-end;
-	border-top: 1px solid var( --jp-gray );
-	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
-	margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-}
-.threat-item-cta {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 36px
-}
-
-.list-header {
-	display: flex;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-.threat-footer {
-	width: 100%;
-	display: flex;
-	justify-content: right;
-	padding-top: calc( var( --spacing-base ) * 4 ); // 32px
-	border-top: 1px solid var( --jp-gray );
-
-	> :last-child {
-		margin-left: calc( var( --spacing-base ) * 2 ); // 16px
-	}
-}
-
-.accordion-header {
-	display: grid;
-	grid-template-columns: repeat( 9, 1fr );
-	background-color: white;
-	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ); // 16px | 24px
-	border: 1px solid var( --jp-gray );
-	border-bottom: none;
-	color: var( --jp-gray-50 );
-	width: 100%;
-
-	> span:first-child {
-		grid-column: 1 / 7;
-	}
-
-	> span:not( :first-child ) {
-		text-align: center;
-	}
-}
-
-.manual-scan {
-	margin: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 8 ); // 32px | 64px
-	text-align: center;
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-
-	.threat-footer {
-		justify-content: center;
-
-		> * {
-			width: 50%;
-		}
-	}
-}
-
-.pagination-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 4px;
-	margin-top: calc( var( --spacing-base ) * 4 ); // 24px
-	margin-bottom: calc(var(--spacing-base) * 2); // 16px
-
-	button {
-		font-size: var( --font-body );
-		width: auto;
-		height: auto;
-		padding: 0 var( --spacing-base ); // 0 | 8px
-		line-height: 32px;
-		min-width: 32px;
-
-		&.unfocused {
-			color: var( --jp-black );
-			background: none;
-	
-			&:hover:not(:disabled) {
-				color: var( --jp-black );
-				background: none;
-			}
-		}
-	}
-}
diff --git a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js b/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
deleted file mode 100644
index de000288251ae..0000000000000
--- a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import {
-	plugins as pluginsIcon,
-	wordpress as coreIcon,
-	color as themesIcon,
-	code as filesIcon,
-	grid as databaseIcon,
-} from '@wordpress/icons';
-import { useEffect, useMemo, useState } from 'react';
-import useProtectData from '../../hooks/use-protect-data';
-
-const sortThreats = ( a, b ) => b.severity - a.severity;
-
-/**
- * Flatten threats data
- *
- * Merges threat category data with each threat it contains, plus any additional data provided.
- *
- * @param {object} data    - The threat category data, i.e. "core", "plugins", "themes", etc.
- * @param {object} newData - Additional data to add to each threat.
- * @return {object[]} Array of threats with additional properties from the threat category and function argument.
- */
-const flattenThreats = ( data, newData ) => {
-	// If "data" is an empty object
-	if ( typeof data === 'object' && Object.keys( data ).length === 0 ) {
-		return [];
-	}
-
-	// If "data" has multiple entries, recursively flatten each one.
-	if ( Array.isArray( data ) ) {
-		return data.map( extension => flattenThreats( extension, newData ) ).flat();
-	}
-
-	// Merge the threat category data with each threat it contains, plus any additional data provided.
-	return data?.threats.map( threat => ( {
-		...threat,
-		...data,
-		...newData,
-	} ) );
-};
-
-/**
- * Threats List Hook
- *
- * @param    {object}   args        - Arguments for the hook.
- * @param    {string}   args.source - "scan" or "history".
- * @param    {string}   args.status - "all", "fixed", or "ignored".
- *                                  ---
- * @typedef {object} UseThreatsList
- * @property {object}   item        - The selected threat category.
- * @property {object[]} list        - The list of threats to display.
- * @property {string}   selected    - The selected threat category.
- * @property {Function} setSelected - Sets the selected threat category.
- *                                  ---
- * @return {UseThreatsList} useThreatsList hook.
- */
-const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' } ) => {
-	const [ selected, setSelected ] = useState( 'all' );
-	const {
-		results: { plugins, themes, core, files, database },
-	} = useProtectData( {
-		sourceType: source,
-		filter: { status, key: selected },
-	} );
-
-	const { unsortedList, item } = useMemo( () => {
-		// If a specific threat category is selected, filter for and flatten the category's threats.
-		if ( selected && selected !== 'all' ) {
-			// Core, files, and database data threats are already grouped together,
-			// so we just need to flatten them and add the appropriate icon.
-			switch ( selected ) {
-				case 'core':
-					return {
-						unsortedList: flattenThreats( core, { icon: coreIcon } ),
-						item: core,
-					};
-				case 'files':
-					return {
-						unsortedList: flattenThreats( { threats: files }, { icon: filesIcon } ),
-						item: files,
-					};
-				case 'database':
-					return {
-						unsortedList: flattenThreats( { threats: database }, { icon: databaseIcon } ),
-						item: database,
-					};
-				default:
-					break;
-			}
-
-			// Extensions (i.e. plugins and themes) have entries for each individual extension,
-			// so we need to check for a matching threat in each extension.
-			const selectedPlugin = plugins.find( plugin => plugin?.name === selected );
-			if ( selectedPlugin ) {
-				return {
-					unsortedList: flattenThreats( selectedPlugin, { icon: pluginsIcon } ),
-					item: selectedPlugin,
-				};
-			}
-			const selectedTheme = themes.find( theme => theme?.name === selected );
-			if ( selectedTheme ) {
-				return {
-					unsortedList: flattenThreats( selectedTheme, { icon: themesIcon } ),
-					item: selectedTheme,
-				};
-			}
-		}
-
-		// Otherwise, return all threats.
-		return {
-			unsortedList: [
-				...flattenThreats( core, { icon: coreIcon } ),
-				...flattenThreats( plugins, { icon: pluginsIcon } ),
-				...flattenThreats( themes, { icon: themesIcon } ),
-				...flattenThreats( { threats: files }, { icon: filesIcon } ),
-				...flattenThreats( { threats: database }, { icon: databaseIcon } ),
-			],
-			item: null,
-		};
-	}, [ core, database, files, plugins, selected, themes ] );
-
-	const getLabel = threat => {
-		if ( threat.name && threat.version ) {
-			// Extension threat i.e. "Woocommerce (3.0.0)"
-			return `${ threat.name } (${ threat.version })`;
-		}
-
-		if ( threat.filename ) {
-			// File threat i.e. "index.php"
-			return threat.filename.split( '/' ).pop();
-		}
-
-		if ( threat.table ) {
-			// Database threat i.e. "wp_posts"
-			return threat.table;
-		}
-	};
-
-	const list = useMemo( () => {
-		return unsortedList
-			.sort( sortThreats )
-			.map( threat => ( { label: getLabel( threat ), ...threat } ) );
-	}, [ unsortedList ] );
-
-	useEffect( () => {
-		if ( selected !== 'all' && status !== 'all' && list.length === 0 ) {
-			setSelected( 'all' );
-		}
-	}, [ selected, status, item, list ] );
-
-	return {
-		item,
-		list,
-		selected,
-		setSelected,
-	};
-};
-
-export default useThreatsList;
diff --git a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
index 81f1eabb27d5b..7f1ef3652bb85 100644
--- a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
+++ b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx
@@ -1,4 +1,5 @@
 import { Button, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useState } from 'react';
@@ -7,9 +8,14 @@ import useModal from '../../hooks/use-modal';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 
-const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
+const UnignoreThreatModal = ( { threat } ) => {
 	const { setModal } = useModal();
+
+	const icon = getThreatIcon( threat );
+
+	const [ isUnignoring, setIsUnignoring ] = useState( false );
 	const unignoreThreatMutation = useUnIgnoreThreatMutation();
+
 	const handleCancelClick = () => {
 		return event => {
 			event.preventDefault();
@@ -17,13 +23,11 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 		};
 	};
 
-	const [ isUnignoring, setIsUnignoring ] = useState( false );
-
 	const handleUnignoreClick = () => {
 		return async event => {
 			event.preventDefault();
 			setIsUnignoring( true );
-			await unignoreThreatMutation.mutateAsync( id );
+			await unignoreThreatMutation.mutateAsync( threat.id );
 			setModal( { type: null } );
 			setIsUnignoring( false );
 		};
@@ -40,12 +44,12 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
 				<Icon icon={ icon } className={ styles.threat__icon } />
 				<div className={ styles.threat__summary }>
 					<Text className={ styles.threat__summary__label } mb={ 1 }>
-						{ label }
+						{ getThreatSubtitle( threat ) }
 					</Text>
-					<Text className={ styles.threat__summary__title }>{ title }</Text>
+					<Text className={ styles.threat__summary__title }>{ threat.title }</Text>
 				</div>
 				<div className={ styles.threat__severity }>
-					<ThreatSeverityBadge severity={ severity } />
+					<ThreatSeverityBadge severity={ threat.severity } />
 				</div>
 			</div>
 
diff --git a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
deleted file mode 100644
index 2338d306e6780..0000000000000
--- a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { type ExtensionStatus, type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import useHistoryQuery from '../../data/scan/use-history-query';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
-import useProductDataQuery from '../../data/use-product-data-query';
-
-type ThreatFilterKey = 'all' | 'core' | 'files' | 'database' | string;
-
-type Filter = { key: ThreatFilterKey; status: ThreatStatus | 'all' };
-
-// Valid "key" values for filtering.
-const KEY_FILTERS = [ 'all', 'core', 'plugins', 'themes', 'files', 'database' ];
-
-/**
- * Filter Extension Threats
- *
- * @param {Array}  threats       - The threats to filter.
- * @param {object} filter        - The filter to apply to the data.
- * @param {string} filter.status - The status to filter: 'all', 'current', 'fixed', or 'ignored'.
- * @param {string} filter.key    - The key to filter: 'all', 'core', 'files', 'database', or an extension name.
- * @param {string} key           - The threat's key: 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {Array} The filtered threats.
- */
-const filterThreats = ( threats: Threat[], filter: Filter, key: ThreatFilterKey ): Threat[] => {
-	if ( ! Array.isArray( threats ) ) {
-		return [];
-	}
-
-	return threats.filter( threat => {
-		if ( filter.status && filter.status !== 'all' && threat.status !== filter.status ) {
-			return false;
-		}
-		if ( filter.key && filter.key !== 'all' && filter.key !== key ) {
-			return false;
-		}
-		return true;
-	} );
-};
-
-/**
- * Get parsed data from the initial state
- *
- * @param {object} options            - The options to use when getting the data.
- * @param {string} options.sourceType - 'scan' or 'history'.
- * @param {object} options.filter     - The filter to apply to the data.
- *                                    _param {string} options.filter.status - 'all', 'fixed', or 'ignored'.
- *                                    _param {string} options.filter.key    - 'all', 'core', 'files', 'database', or an extension name.
- *
- * @return {object} The information available in Protect's initial state.
- */
-export default function useProtectData(
-	{ sourceType, filter } = {
-		sourceType: 'scan',
-		filter: { status: null, key: null },
-	}
-) {
-	const { data: status } = useScanStatusQuery();
-	const { data: scanHistory } = useHistoryQuery();
-	const { data: jetpackScan } = useProductDataQuery();
-
-	const { counts, results, error, lastChecked, hasUncheckedItems } = useMemo( () => {
-		// This hook can provide data from two sources: the current scan or the scan history.
-		const data = sourceType === 'history' ? { ...scanHistory } : { ...status };
-
-		// Prepare the result object.
-		const result = {
-			results: {
-				core: [],
-				plugins: [],
-				themes: [],
-				files: [],
-				database: [],
-			},
-			counts: {
-				all: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-				current: {
-					threats: 0,
-					core: 0,
-					plugins: 0,
-					themes: 0,
-					files: 0,
-					database: 0,
-				},
-			},
-			error: null,
-			lastChecked: data.lastChecked || null,
-			hasUncheckedItems: data.hasUncheckedItems || false,
-		};
-
-		// Loop through the provided extensions, and update the result object.
-		const processExtensions = ( extensions: Array< ExtensionStatus >, key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( extensions ) ) {
-				return [];
-			}
-			extensions.forEach( extension => {
-				// Update the total counts.
-				result.counts.all[ key ] += extension?.threats?.length || 0;
-				result.counts.all.threats += extension?.threats?.length || 0;
-
-				// Filter the extension's threats based on the current filters.
-				const filteredThreats = filterThreats(
-					extension?.threats || [],
-					filter,
-					KEY_FILTERS.includes( filter.key ) ? key : extension?.name
-				);
-
-				// Update the result object with the extension and its filtered threats.
-				result.results[ key ].push( { ...extension, threats: filteredThreats } );
-
-				// Update the current counts.
-				result.counts.current[ key ] += filteredThreats.length;
-				result.counts.current.threats += filteredThreats.length;
-			} );
-		};
-
-		// Loop through the provided threats, and update the result object.
-		const processThreats = ( threatsToProcess: Threat[], key: ThreatFilterKey ) => {
-			if ( ! Array.isArray( threatsToProcess ) ) {
-				return [];
-			}
-
-			result.counts.all[ key ] += threatsToProcess.length;
-			result.counts.all.threats += threatsToProcess.length;
-
-			const filteredThreats = filterThreats( threatsToProcess, filter, key );
-
-			result.results[ key ] = [ ...result.results[ key ], ...filteredThreats ];
-			result.counts.current[ key ] += filteredThreats.length;
-			result.counts.current.threats += filteredThreats.length;
-		};
-
-		// Core data may be either a single object or an array of multiple objects.
-		let cores = Array.isArray( data.core ) ? data.core : [];
-		if ( data?.core?.threats ) {
-			cores = [ data.core ];
-		}
-
-		// Process the data
-		processExtensions( cores, 'core' );
-		processExtensions( data?.plugins, 'plugins' );
-		processExtensions( data?.themes, 'themes' );
-		processThreats( data?.files, 'files' );
-		processThreats( data?.database, 'database' );
-
-		// Handle errors
-		if ( data.error ) {
-			result.error = {
-				message: data.errorMessage || __( 'An error occurred.', 'jetpack-protect' ),
-				code: data.errorCode || 500,
-			};
-		}
-
-		return result;
-	}, [ scanHistory, sourceType, status, filter ] );
-
-	return {
-		results,
-		counts,
-		error,
-		lastChecked,
-		hasUncheckedItems,
-		jetpackScan,
-	};
-}
diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx
index b8983d65bb836..2b91f4b090b92 100644
--- a/projects/plugins/protect/src/js/index.tsx
+++ b/projects/plugins/protect/src/js/index.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as WPElement from '@wordpress/element';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { HashRouter, Routes, Route, useLocation, Navigate } from 'react-router-dom';
 import Modal from './components/modal';
 import PaidPlanGate from './components/paid-plan-gate';
@@ -12,7 +12,6 @@ import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
 import ScanRoute from './routes/scan';
-import ScanHistoryRoute from './routes/scan/history';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
 
@@ -62,7 +61,7 @@ function render() {
 											path="/scan/history"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
@@ -70,7 +69,7 @@ function render() {
 											path="/scan/history/:filter"
 											element={
 												<PaidPlanGate>
-													<ScanHistoryRoute />
+													<ScanRoute />
 												</PaidPlanGate>
 											}
 										/>
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
index 0a3c26782790a..9604ef495811f 100644
--- a/projects/plugins/protect/src/js/routes/firewall/index.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -22,7 +22,6 @@ import useWafUpgradeSeenMutation from '../../data/waf/use-waf-upgrade-seen-mutat
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
-import ScanFooter from '../scan/scan-footer';
 import FirewallAdminSectionHero from './firewall-admin-section-hero';
 import FirewallFooter from './firewall-footer';
 import styles from './styles.module.scss';
@@ -597,7 +596,7 @@ const FirewallPage = () => {
 					</div>
 				</Col>
 			</Container>
-			{ wafSupported ? <FirewallFooter /> : <ScanFooter /> }
+			{ wafSupported && <FirewallFooter /> }
 		</AdminPage>
 	);
 };
diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
deleted file mode 100644
index 141c51cde284a..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Text } from '@automattic/jetpack-components';
-import { dateI18n } from '@wordpress/date';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import AdminSectionHero from '../../../components/admin-section-hero';
-import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useProtectData from '../../../hooks/use-protect-data';
-import styles from './styles.module.scss';
-
-const HistoryAdminSectionHero: React.FC = () => {
-	const { filter = 'all' } = useParams();
-	const { list } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const oldestFirstDetected = useMemo( () => {
-		if ( ! list.length ) {
-			return null;
-		}
-
-		return list.reduce( ( oldest, current ) => {
-			return new Date( current.firstDetected ) < new Date( oldest.firstDetected )
-				? current
-				: oldest;
-		} ).firstDetected;
-	}, [ list ] );
-
-	if ( error ) {
-		return (
-			<ErrorAdminSectionHero
-				baseErrorMessage={ __( 'We are having problems loading your history.', 'jetpack-protect' ) }
-				errorMessage={ error?.message }
-				errorCode={ error?.code }
-			/>
-		);
-	}
-
-	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Text>
-						{ oldestFirstDetected ? (
-							<span className={ styles[ 'subheading-content' ] }>
-								{ sprintf(
-									/* translators: %s: Oldest first detected date */
-									__( '%s - Today', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', oldestFirstDetected, false )
-								) }
-							</span>
-						) : (
-							__( 'Most recent results', 'jetpack-protect' )
-						) }
-					</Text>
-					<AdminSectionHero.Heading showIcon variant="success">
-						{ numAllThreats > 0
-							? sprintf(
-									/* translators: %s: Total number of threats  */
-									__( '%1$s previous %2$s', 'jetpack-protect' ),
-									numAllThreats,
-									numAllThreats === 1 ? 'threat' : 'threats'
-							  )
-							: __( 'No previous threats', 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<Text>
-							{ __( 'Here you can view all of your threats till this date.', 'jetpack-protect' ) }
-						</Text>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-		/>
-	);
-};
-
-export default HistoryAdminSectionHero;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx
deleted file mode 100644
index 723f9de9ab230..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useCallback } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
-import AdminPage from '../../../components/admin-page';
-import ProtectCheck from '../../../components/protect-check-icon';
-import ThreatsNavigation from '../../../components/threats-list/navigation';
-import PaidList from '../../../components/threats-list/paid-list';
-import useThreatsList from '../../../components/threats-list/use-threats-list';
-import useAnalyticsTracks from '../../../hooks/use-analytics-tracks';
-import usePlan from '../../../hooks/use-plan';
-import useProtectData from '../../../hooks/use-protect-data';
-import ScanFooter from '../scan-footer';
-import HistoryAdminSectionHero from './history-admin-section-hero';
-import StatusFilters from './status-filters';
-import styles from './styles.module.scss';
-
-const ScanHistoryRoute = () => {
-	// Track page view.
-	useAnalyticsTracks( { pageViewEventName: 'protect_scan_history' } );
-
-	const { hasPlan } = usePlan();
-	const { filter = 'all' } = useParams();
-
-	const { item, list, selected, setSelected } = useThreatsList( {
-		source: 'history',
-		status: filter,
-	} );
-
-	const { counts, error } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: filter },
-	} );
-	const { threats: numAllThreats } = counts.all;
-
-	const { counts: fixedCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'fixed', key: selected },
-	} );
-	const { threats: numFixed } = fixedCounts.current;
-
-	const { counts: ignoredCounts } = useProtectData( {
-		sourceType: 'history',
-		filter: { status: 'ignored', key: selected },
-	} );
-	const { threats: numIgnored } = ignoredCounts.current;
-
-	/**
-	 * Get the title for the threats list based on the selected filters and the amount of threats.
-	 */
-	const getTitle = useCallback( () => {
-		switch ( selected ) {
-			case 'all':
-				if ( list.length === 1 ) {
-					switch ( filter ) {
-						case 'fixed':
-							return __( 'All fixed threats', 'jetpack-protect' );
-						case 'ignored':
-							return __(
-								'All ignored threats',
-								'jetpack-protect',
-								/** dummy arg to avoid bad minification */ 0
-							);
-						default:
-							return __( 'All threats', 'jetpack-protect' );
-					}
-				}
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed threats found on the site. */
-							__( 'All %s fixed threats', 'jetpack-protect' ),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored threats found on the site. */
-							__( 'All %s ignored threats', 'jetpack-protect' ),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of threats found on the site. */
-							__( 'All %s threats', 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'core':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed WordPress threats found on the site. */
-							_n(
-								'%1$s fixed WordPress threat',
-								'%1$s fixed WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored WordPress threats found on the site. */
-							_n(
-								'%1$s ignored WordPress threat',
-								'%1$s ignored WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of WordPress threats found on the site. */
-							_n(
-								'%1$s WordPress threat',
-								'%1$s WordPress threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-				}
-			case 'files':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed file threats found on the site. */
-							_n(
-								'%1$s fixed file threat',
-								'%1$s fixed file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored file threats found on the site. */
-							_n(
-								'%1$s ignored file threat',
-								'%1$s ignored file threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of file threats found on the site. */
-							_n( '%1$s file threat', '%1$s file threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			case 'database':
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: placeholder is the amount of fixed database threats found on the site. */
-							_n(
-								'%1$s fixed database threat',
-								'%1$s fixed database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: placeholder is the amount of ignored database threats found on the site. */
-							_n(
-								'%1$s ignored database threat',
-								'%1$s ignored database threats',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length
-						);
-					default:
-						return sprintf(
-							/* translators: placeholder is the amount of database threats found on the site. */
-							_n( '%1$s database threat', '%1$s database threats', list.length, 'jetpack-protect' ),
-							list.length
-						);
-				}
-			default:
-				switch ( filter ) {
-					case 'fixed':
-						return sprintf(
-							/* translators: Translates to "123 fixed threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s fixed threat in %2$s %3$s',
-								'%1$s fixed threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					case 'ignored':
-						return sprintf(
-							/* translators: Translates to "123 ignored threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s ignored threat in %2$s %3$s',
-								'%1$s ignored threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-					default:
-						return sprintf(
-							/* translators: Translates to "123 threats in Example Plugin (1.2.3)" */
-							_n(
-								'%1$s threat in %2$s %3$s',
-								'%1$s threats in %2$s %3$s',
-								list.length,
-								'jetpack-protect'
-							),
-							list.length,
-							item?.name,
-							item?.version
-						);
-				}
-		}
-	}, [ selected, list.length, filter, item?.name, item?.version ] );
-
-	// Threat history is only available for paid plans.
-	if ( ! hasPlan ) {
-		return <Navigate to="/scan" />;
-	}
-
-	// Remove the filter if there are no threats to show.
-	if ( list.length === 0 && filter !== 'all' ) {
-		return <Navigate to="/scan/history" />;
-	}
-
-	return (
-		<AdminPage>
-			<HistoryAdminSectionHero />
-			{ ( ! error || numAllThreats ) && (
-				<AdminSection>
-					<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-						<Col>
-							<Container fluid horizontalSpacing={ 0 } horizontalGap={ 3 }>
-								<Col lg={ 4 }>
-									<ThreatsNavigation
-										selected={ selected }
-										onSelect={ setSelected }
-										sourceType="history"
-										statusFilter={ filter }
-									/>
-								</Col>
-								<Col lg={ 8 }>
-									{ list.length > 0 ? (
-										<div>
-											<div className={ styles[ 'list-header' ] }>
-												<Title className={ styles[ 'list-title' ] }>{ getTitle() }</Title>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters numFixed={ numFixed } numIgnored={ numIgnored } />
-												</div>
-											</div>
-											<PaidList list={ list } hideAutoFixColumn={ true } />
-										</div>
-									) : (
-										<>
-											<div className={ styles[ 'list-header' ] }>
-												<div className={ styles[ 'list-header__controls' ] }>
-													<StatusFilters />
-												</div>
-											</div>
-											<div className={ styles.empty }>
-												<ProtectCheck />
-												<H3 weight="bold" mt={ 8 }>
-													{ __( "Don't worry about a thing", 'jetpack-protect' ) }
-												</H3>
-												<Text mb={ 4 }>
-													{ sprintf(
-														/* translators: %s: Filter type */
-														__( 'There are no%sthreats in your scan history.', 'jetpack-protect' ),
-														'all' === filter ? ' ' : ` ${ filter } `
-													) }
-												</Text>
-											</div>
-										</>
-									) }
-								</Col>
-							</Container>
-						</Col>
-					</Container>
-				</AdminSection>
-			) }
-			<ScanFooter />
-		</AdminPage>
-	);
-};
-
-export default ScanHistoryRoute;
diff --git a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx b/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
deleted file mode 100644
index 1bc9668b11065..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import ButtonGroup from '../../../components/button-group';
-
-/**
- * Status Filters component.
- *
- * @param {object} props            - Component props.
- * @param {number} props.numFixed   - Number of fixed threats.
- * @param {number} props.numIgnored - Number of ignored threats.
- *
- * @return {React.ReactNode} StatusFilters component.
- */
-export default function StatusFilters( { numFixed, numIgnored } ) {
-	const navigate = useNavigate();
-	const { filter = 'all' } = useParams();
-	const navigateOnClick = useCallback( path => () => navigate( path ), [ navigate ] );
-
-	return (
-		<ButtonGroup>
-			<ButtonGroup.Button
-				variant={ 'all' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history' ) }
-			>
-				{ __( 'All', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'fixed' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/fixed' ) }
-				disabled={ ! numFixed }
-			>
-				{ __( 'Fixed', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-			<ButtonGroup.Button
-				variant={ 'ignored' === filter ? 'primary' : 'secondary' }
-				onClick={ navigateOnClick( '/scan/history/ignored' ) }
-				disabled={ ! numIgnored }
-			>
-				{ __( 'Ignored', 'jetpack-protect' ) }
-			</ButtonGroup.Button>
-		</ButtonGroup>
-	);
-}
diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
deleted file mode 100644
index d30f3e0ac3344..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.empty {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	justify-content: center;
-	max-height: 600px;
-	flex-direction: column;
-}
-
-.list-header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: flex-end;
-	margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px
-}
-
-.list-title {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.list-header__controls {
-	display: flex;
-	gap: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
-@media ( max-width: 599px ) {
-
-	.list-header {
-		margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px
-	}
-
-	.list-title {
-		display: none;
-	}
-}
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
index 1f3cdfdd7520f..c56ae3c747f3e 100644
--- a/projects/plugins/protect/src/js/routes/scan/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -1,14 +1,16 @@
 import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import { useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import AdminPage from '../../components/admin-page';
-import ThreatsList from '../../components/threats-list';
-import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import OnboardingPopover from '../../components/onboarding-popover';
+import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import { OnboardingContext } from '../../hooks/use-onboarding';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
 import onboardingSteps from './onboarding-steps';
 import ScanAdminSectionHero from './scan-admin-section-hero';
-import ScanFooter from './scan-footer';
+import ScanResultsDataView from './scan-results-data-view';
+import styles from './styles.module.scss';
 
 /**
  * Scan Page
@@ -19,23 +21,41 @@ import ScanFooter from './scan-footer';
  */
 const ScanPage = () => {
 	const { hasPlan } = usePlan();
-	const {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
+	const location = useLocation();
+	const { filter } = useParams();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 
+	const [ scanResultsAnchor, setScanResultsAnchor ] = useState( null );
+
 	let currentScanStatus;
 	if ( status.error ) {
 		currentScanStatus = 'error';
-	} else if ( ! lastChecked ) {
+	} else if ( ! status.lastChecked ) {
 		currentScanStatus = 'in_progress';
 	} else {
 		currentScanStatus = 'active';
 	}
 
+	const filters = useMemo( () => {
+		if ( location.pathname.includes( '/scan/history' ) ) {
+			return [
+				{
+					field: 'status',
+					value: filter ? [ filter ] : [ 'fixed', 'ignored' ],
+					operator: 'isAny',
+				},
+			];
+		}
+
+		return [
+			{
+				field: 'status',
+				value: [ 'current' ],
+				operator: 'isAny',
+			},
+		];
+	}, [ filter, location.pathname ] );
+
 	// Track view for Protect admin page.
 	useAnalyticsTracks( {
 		pageViewEventName: 'protect_admin',
@@ -49,16 +69,33 @@ const ScanPage = () => {
 		<OnboardingContext.Provider value={ onboardingSteps }>
 			<AdminPage>
 				<ScanAdminSectionHero />
-				{ ( ! status.error || numThreats ) && (
-					<AdminSection>
-						<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-							<Col>
-								<ThreatsList />
-							</Col>
-						</Container>
-					</AdminSection>
-				) }
-				<ScanFooter />
+				<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 left' }
+								/>
+							) }
+							{ !! status && ! isScanInProgress( status ) && hasPlan && (
+								<OnboardingPopover
+									id={ 'paid-understand-severity' }
+									anchor={ scanResultsAnchor }
+									position={ 'top right' }
+								/>
+							) }
+						</Col>
+					</Container>
+				</AdminSection>
 			</AdminPage>
 		</OnboardingContext.Provider>
 	);
diff --git a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
index 0e85aa56d9289..c29af26bcb409 100644
--- a/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/onboarding-steps.jsx
@@ -6,15 +6,6 @@ import usePlan from '../../hooks/use-plan';
 
 const { siteSuffix } = window.jetpackProtectInitialState;
 
-const scanResultsTitle = __( 'Your scan results', 'jetpack-protect' );
-const scanResultsDescription = (
-	<Text>
-		{ __(
-			'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files',
-			'jetpack-protect'
-		) }
-	</Text>
-);
 const UpgradeButton = props => {
 	const { upgradePlan } = usePlan();
 	const { recordEvent } = useAnalyticsTracks();
@@ -27,11 +18,6 @@ const UpgradeButton = props => {
 };
 
 export default [
-	{
-		id: 'free-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
-	},
 	{
 		id: 'free-daily-scans',
 		title: __( 'Daily automated scans', 'jetpack-protect' ),
@@ -49,10 +35,41 @@ export default [
 			</Text>
 		),
 	},
+	{
+		id: 'paid-daily-and-manual-scans',
+		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
+	{
+		id: 'free-scan-results',
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, and themes.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
+	},
 	{
 		id: 'paid-scan-results',
-		title: scanResultsTitle,
-		description: scanResultsDescription,
+		title: __( 'Your scan results', 'jetpack-protect' ),
+		description: (
+			<Text>
+				{ __(
+					'Navigate through the results of the scan on your WordPress installation, plugins, themes, and other files.',
+					'jetpack-protect'
+				) }
+			</Text>
+		),
 	},
 	{
 		id: 'paid-fix-all-threats',
@@ -97,16 +114,4 @@ export default [
 			</Text>
 		),
 	},
-	{
-		id: 'paid-daily-and-manual-scans',
-		title: __( 'Daily & manual scanning', 'jetpack-protect' ),
-		description: (
-			<Text>
-				{ __(
-					'We run daily automated scans but you can also run on-demand scans if you want to check the latest status.',
-					'jetpack-protect'
-				) }
-			</Text>
-		),
-	},
 ];
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 9e1b9c102a037..db76bac1b15b0 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
@@ -1,33 +1,41 @@
 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 { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';
-import useThreatsList from '../../components/threats-list/use-threats-list';
 import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query';
+import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useFixers from '../../hooks/use-fixers';
 import useModal from '../../hooks/use-modal';
 import usePlan from '../../hooks/use-plan';
-import useProtectData from '../../hooks/use-protect-data';
+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 {
-		counts: {
-			current: { threats: numThreats },
-		},
-		lastChecked,
-	} = useProtectData();
-	const { hasPlan } = usePlan();
+	const { recordEvent } = useAnalyticsTracks();
+	const { hasPlan, upgradePlan } = usePlan();
+	const { setModal } = useModal();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
 	const { data: status } = useScanStatusQuery();
-	const { list } = useThreatsList();
 	const { isThreatFixInProgress, isThreatFixStale } = useFixers();
-	const { setModal } = useModal();
+
+	const getScan = useCallback( () => {
+		recordEvent( 'jetpack_protect_scan_header_get_scan_link_click' );
+		upgradePlan();
+	}, [ recordEvent, upgradePlan ] );
+
+	const { globalStats } = useWafData();
+	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
+	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
+		? '50,000'
+		: totalVulnerabilities.toLocaleString();
+
+	const numThreats = status.threats.length;
 
 	// Popover anchor
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );
@@ -35,20 +43,20 @@ const ScanAdminSectionHero: React.FC = () => {
 
 	// List of fixable threats that do not have a fix in progress
 	const fixableList = useMemo( () => {
-		return list.filter( threat => {
-			const threatId = parseInt( threat.id );
+		return status.threats.filter( threat => {
+			const threatId = typeof threat.id === 'string' ? parseInt( threat.id ) : threat.id;
 			return (
 				threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId )
 			);
 		} );
-	}, [ list, isThreatFixInProgress, isThreatFixStale ] );
+	}, [ status.threats, isThreatFixInProgress, isThreatFixStale ] );
 
 	const scanning = isScanInProgress( status );
 
 	let lastCheckedLocalTimestamp = null;
-	if ( lastChecked ) {
+	if ( status.lastChecked ) {
 		// Convert the lastChecked UTC date to a local timestamp
-		lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime();
+		lastCheckedLocalTimestamp = new Date( status.lastChecked + ' UTC' ).getTime();
 	}
 
 	const handleShowAutoFixersClick = threatList => {
@@ -88,13 +96,11 @@ const ScanAdminSectionHero: React.FC = () => {
 							  )
 							: __( 'Most recent results', 'jetpack-protect' ) }
 					</Text>
-					{ ! hasPlan && (
-						<OnboardingPopover
-							id="free-daily-scans"
-							position={ isSm ? 'bottom' : 'middle right' }
-							anchor={ dailyScansPopoverAnchor }
-						/>
-					) }
+					<OnboardingPopover
+						id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
+						position={ isSm ? 'bottom' : 'middle right' }
+						anchor={ dailyScansPopoverAnchor }
+					/>
 					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
 						{ numThreats > 0
 							? sprintf(
@@ -105,48 +111,60 @@ const ScanAdminSectionHero: React.FC = () => {
 										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
 										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
 							  )
-							: sprintf(
-									/* translators: %s: Pluralized type of threat/vulnerability */
-									__( 'No active %s', 'jetpack-protect' ),
-									hasPlan
-										? __( 'threats', 'jetpack-protect' )
-										: __(
-												'vulnerabilities',
-												'jetpack-protect',
-												/* dummy arg to avoid bad minification */ 0
-										  )
-							  ) }
+							: __( "Don't worry about a thing", 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
 					<AdminSectionHero.Subheading>
 						<>
-							<Text className={ styles[ 'subheading-text' ] }>
-								{ __(
-									'We actively review your sites files line-by-line to identify threats and vulnerabilities.',
-									'jetpack-protect'
-								) }
-							</Text>
-							{ fixableList.length > 0 && (
+							{ hasPlan ? (
+								<Text>
+									{ __(
+										"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
+										'jetpack-protect'
+									) }
+								</Text>
+							) : (
 								<>
-									<Button
-										className={ styles[ 'auto-fixers' ] }
-										ref={ setShowAutoFixersPopoverAnchor }
-										variant="primary"
-										weight="regular"
-										onClick={ handleShowAutoFixersClick( fixableList ) }
-									>
+									<Text mb={ 4 }>
 										{ sprintf(
-											/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-											__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-											fixableList.length
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
 										) }
-									</Button>
-									{ ! scanning && (
-										<OnboardingPopover
-											id="paid-fix-all-threats"
-											position={ isSm ? 'bottom right' : 'middle left' }
-											anchor={ showAutoFixersPopoverAnchor }
-										/>
-									) }
+									</Text>
+									<Tooltip
+										text={ __(
+											'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
+											'jetpack-protect'
+										) }
+									>
+										<Button onClick={ getScan }>
+											{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
+										</Button>
+									</Tooltip>
+								</>
+							) }
+							{ fixableList.length > 0 && (
+								<>
+									<div ref={ setShowAutoFixersPopoverAnchor }>
+										<Button
+											className={ styles[ 'auto-fixers' ] }
+											onClick={ handleShowAutoFixersClick( fixableList ) }
+										>
+											{ sprintf(
+												/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+												__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+												fixableList.length
+											) }
+										</Button>
+									</div>
+									<OnboardingPopover
+										id="paid-fix-all-threats"
+										position={ isSm ? 'bottom right' : 'middle left' }
+										anchor={ showAutoFixersPopoverAnchor }
+									/>
 								</>
 							) }
 						</>
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx b/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
deleted file mode 100644
index 56d7ea1c14a7d..0000000000000
--- a/projects/plugins/protect/src/js/routes/scan/scan-footer.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-	Text,
-	Button,
-	Title,
-	getRedirectUrl,
-	ContextualUpgradeTrigger,
-	Col,
-	Container,
-} from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useCallback } from 'react';
-import SeventyFiveLayout from '../../components/seventy-five-layout';
-import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
-import usePlan from '../../hooks/use-plan';
-import useWafData from '../../hooks/use-waf-data';
-import styles from './styles.module.scss';
-
-const ProductPromotion = () => {
-	const { recordEvent } = useAnalyticsTracks();
-	const { hasPlan, upgradePlan } = usePlan();
-	const { siteSuffix, blogID } = window.jetpackProtectInitialState || {};
-
-	const getScan = useCallback( () => {
-		recordEvent( 'jetpack_protect_footer_get_scan_link_click' );
-		upgradePlan();
-	}, [ recordEvent, upgradePlan ] );
-
-	if ( hasPlan ) {
-		const goToCloudUrl = getRedirectUrl( 'jetpack-scan-dash', { site: blogID ?? siteSuffix } );
-
-		return (
-			<div className={ styles[ 'product-section' ] }>
-				<Title>{ __( 'Get access to our Cloud', 'jetpack-protect' ) }</Title>
-				<Text mb={ 3 }>
-					{ __(
-						'With your Protect upgrade, you have free access to scan your site on our Cloud, so you can be aware and fix your threats even if your site goes down.',
-						'jetpack-protect'
-					) }
-				</Text>
-
-				<Button variant="secondary" weight="regular" href={ goToCloudUrl }>
-					{ __( 'Go to Cloud', 'jetpack-protect' ) }
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<div className={ styles[ 'product-section' ] }>
-			<Title>{ __( 'Advanced scan results', 'jetpack-protect' ) }</Title>
-			<Text mb={ 3 }>
-				{ __(
-					'Upgrade Jetpack Protect to get advanced scan tools, including one-click fixes for most threats and malware scanning.',
-					'jetpack-protect'
-				) }
-			</Text>
-
-			<ContextualUpgradeTrigger
-				description={ __(
-					'Looking for advanced scan results and one-click fixes?',
-					'jetpack-protect'
-				) }
-				cta={ __( 'Upgrade Jetpack Protect now', 'jetpack-protect' ) }
-				onClick={ getScan }
-			/>
-		</div>
-	);
-};
-
-const FooterInfo = () => {
-	const { hasPlan } = usePlan();
-	const { globalStats } = useWafData();
-	const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities );
-	const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities )
-		? '50,000'
-		: totalVulnerabilities.toLocaleString();
-
-	if ( hasPlan ) {
-		const learnMoreScanUrl = getRedirectUrl( 'protect-footer-learn-more-scan' );
-
-		return (
-			<div className={ styles[ 'info-section' ] }>
-				<Title>{ __( 'Line-by-line scanning', 'jetpack-protect' ) }</Title>
-				<Text mb={ 2 }>
-					{ __(
-						'We actively review line-by-line of your site files to identify threats and vulnerabilities. Jetpack monitors millions of websites to keep your site secure all the time.',
-						'jetpack-protect'
-					) }{ ' ' }
-					<Button variant="link" target="_blank" weight="regular" href={ learnMoreScanUrl }>
-						{ __( 'Learn more', 'jetpack-protect' ) }
-					</Button>
-				</Text>
-			</div>
-		);
-	}
-
-	const learnMoreProtectUrl = getRedirectUrl( 'jetpack-protect-footer-learn-more' );
-
-	return (
-		<div className={ styles[ 'info-section' ] }>
-			<Title>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__( 'Over %s listed vulnerabilities', 'jetpack-protect' ),
-					totalVulnerabilitiesFormatted
-				) }
-			</Title>
-			<Text mb={ 3 }>
-				{ sprintf(
-					// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-					__(
-						'Every day we check your plugin, theme, and WordPress versions against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-						'jetpack-protect'
-					),
-					totalVulnerabilitiesFormatted
-				) }
-			</Text>
-
-			<Button variant="link" isExternalLink={ true } href={ learnMoreProtectUrl } weight="regular">
-				{ __( 'Learn more', 'jetpack-protect' ) }
-			</Button>
-		</div>
-	);
-};
-
-const ScanFooter = () => {
-	const { waf } = window.jetpackProtectInitialState || {};
-	return waf.wafSupported ? (
-		<SeventyFiveLayout
-			main={ <ProductPromotion /> }
-			secondary={ <FooterInfo /> }
-			preserveSecondaryOnMobile={ true }
-		/>
-	) : (
-		<Container horizontalSpacing={ 0 } horizontalGap={ 0 } fluid={ false }>
-			<Col>
-				<FooterInfo />
-			</Col>
-		</Container>
-	);
-};
-
-export default ScanFooter;
diff --git a/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
new file mode 100644
index 0000000000000..616f4e256ed44
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx
@@ -0,0 +1,56 @@
+import { ThreatsDataViews } from '@automattic/jetpack-components';
+import { Threat } from '@automattic/jetpack-scan';
+import { useCallback } from 'react';
+import useHistoryQuery from '../../data/scan/use-history-query';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import useModal from '../../hooks/use-modal';
+
+/**
+ * Scan Results Data View
+ *
+ * @param {object} props         - Component props.
+ * @param {Array}  props.filters - Default filters to apply to the data view.
+ *
+ * @return {JSX.Element} ScanResultDataView component.
+ */
+export default function ScanResultsDataView( {
+	filters = [],
+}: {
+	filters: React.ComponentProps< typeof ThreatsDataViews >[ 'filters' ];
+} ) {
+	const { setModal } = useModal();
+
+	const { data: scanStatus } = useScanStatusQuery();
+	const { data: history } = useHistoryQuery();
+
+	const onFixThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'FIX_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onIgnoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'IGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	const onUnignoreThreats = useCallback(
+		( threats: Threat[] ) => {
+			setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } );
+		},
+		[ setModal ]
+	);
+
+	return (
+		<ThreatsDataViews
+			data={ [ ...scanStatus.threats, ...( history ? history.threats : [] ) ] }
+			filters={ filters }
+			onFixThreats={ onFixThreats }
+			onIgnoreThreats={ onIgnoreThreats }
+			onUnignoreThreats={ onUnignoreThreats }
+		/>
+	);
+}
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 c214c52ff8892..4db4449b60119 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
@@ -3,7 +3,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import AdminSectionHero from '../../components/admin-section-hero';
 import InProgressAnimation from '../../components/in-progress-animation';
 import ProgressBar from '../../components/progress-bar';
-import ScanNavigation from '../../components/scan-navigation';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
@@ -35,20 +34,22 @@ const ScanningAdminSectionHero: React.FC = () => {
 								/>
 							) }
 							<Text>
-								{ sprintf(
-									// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-									__(
-										'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
-										'jetpack-protect'
-									),
-									totalVulnerabilitiesFormatted
-								) }
+								{ hasPlan
+									? __(
+											"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
+											'jetpack-protect'
+									  )
+									: sprintf(
+											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+											__(
+												'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
+												'jetpack-protect'
+											),
+											totalVulnerabilitiesFormatted
+									  ) }
 							</Text>
 						</>
 					</AdminSectionHero.Subheading>
-					<div className={ styles[ 'scan-navigation' ] }>
-						<ScanNavigation />
-					</div>
 				</>
 			}
 			secondary={ <InProgressAnimation /> }
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 908e34f6e71d7..163fd23248aaa 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,12 +1,14 @@
-.subheading-text {
-	white-space: nowrap;
+.auto-fixers {
+	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
-.product-section, .info-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
-}
+.scan-results-container {
+	padding-left: 0;
+	padding-right: 0;
+	overflow: hidden;
 
-.auto-fixers {
-	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
-}
\ No newline at end of file
+	> * {
+		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
+		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
+	}
+}
diff --git a/projects/plugins/protect/webpack.config.js b/projects/plugins/protect/webpack.config.js
index 2f6a45721b100..0c65dfec146a7 100644
--- a/projects/plugins/protect/webpack.config.js
+++ b/projects/plugins/protect/webpack.config.js
@@ -33,6 +33,24 @@ module.exports = [
 					includeNodeModules: [ '@automattic/jetpack-' ],
 				} ),
 
+				/**
+				 * Transpile @wordpress/dataviews in node_modules too.
+				 *
+				 * @see https://github.com/Automattic/jetpack/issues/39907
+				 */
+				jetpackWebpackConfig.TranspileRule( {
+					includeNodeModules: [ '@wordpress/dataviews/' ],
+					babelOpts: {
+						configFile: false,
+						plugins: [
+							[
+								require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
+								{ textdomain: 'jetpack-protect' },
+							],
+						],
+					},
+				} ),
+
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],

From c384d6933e305baa4aef5874174e69179f635563 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Thu, 5 Dec 2024 11:22:55 -0800
Subject: [PATCH 120/143] Components: Add ScanReport (#40419)

---
 .../changelog/components-add-scan-report      |   4 +
 .../components/scan-report/constants.ts       |  30 +++
 .../components/scan-report/index.tsx          | 197 ++++++++++++++++++
 .../scan-report/stories/index.stories.tsx     |  72 +++++++
 .../components/scan-report/styles.module.scss |  21 ++
 .../components/shield-icon/index.tsx          |  14 +-
 .../shield-icon/stories/index.stories.tsx     |   6 +-
 projects/js-packages/components/index.ts      |   1 +
 .../scan/changelog/components-add-scan-report |   4 +
 .../js-packages/scan/src/types/threats.ts     |  24 ++-
 10 files changed, 360 insertions(+), 13 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/components-add-scan-report
 create mode 100644 projects/js-packages/components/components/scan-report/constants.ts
 create mode 100644 projects/js-packages/components/components/scan-report/index.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/stories/index.stories.tsx
 create mode 100644 projects/js-packages/components/components/scan-report/styles.module.scss
 create mode 100644 projects/js-packages/scan/changelog/components-add-scan-report

diff --git a/projects/js-packages/components/changelog/components-add-scan-report b/projects/js-packages/components/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..ba0fbd4cce025
--- /dev/null
+++ b/projects/js-packages/components/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport component
diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
new file mode 100644
index 0000000000000..436eed91c5701
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	wordpress as coreIcon,
+} from '@wordpress/icons';
+
+export const TYPES = [
+	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
+];
+
+export const ICONS = {
+	plugins: pluginIcon,
+	themes: themeIcon,
+	core: coreIcon,
+	files: fileIcon,
+	default: shieldIcon,
+};
+
+export const FIELD_ICON = 'icon';
+export const FIELD_TYPE = 'type';
+export const FIELD_NAME = 'name';
+export const FIELD_STATUS = 'status';
+export const FIELD_UPDATE = 'update';
+export const FIELD_VERSION = 'version';
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
new file mode 100644
index 0000000000000..14795376f7d95
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -0,0 +1,197 @@
+import { type ScanReportExtension } from '@automattic/jetpack-scan';
+import { Tooltip } from '@wordpress/components';
+import {
+	type SupportedLayouts,
+	type View,
+	type Field,
+	DataViews,
+	filterSortAndPaginate,
+} from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import ShieldIcon from '../shield-icon';
+import {
+	FIELD_NAME,
+	FIELD_VERSION,
+	FIELD_ICON,
+	FIELD_STATUS,
+	FIELD_TYPE,
+	TYPES,
+	ICONS,
+} from './constants';
+import styles from './styles.module.scss';
+
+/**
+ * DataViews component for displaying a scan report.
+ *
+ * @param {object}   props                   - Component props.
+ * @param {Array}    props.data              - Scan report data.
+ * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
+ *
+ * @return {JSX.Element} The ScanReport component.
+ */
+export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
+	const baseView = {
+		search: '',
+		filters: [],
+		page: 1,
+		perPage: 20,
+	};
+
+	/**
+	 * DataView default layouts.
+	 *
+	 * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
+	 */
+	const defaultLayouts: SupportedLayouts = {
+		table: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_STATUS,
+			},
+		},
+		list: {
+			...baseView,
+			fields: [ FIELD_STATUS, FIELD_VERSION ],
+			layout: {
+				primaryField: FIELD_NAME,
+				mediaField: FIELD_ICON,
+			},
+		},
+	};
+
+	/**
+	 * DataView view object - configures how the dataset is visible to the user.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
+	 */
+	const [ view, setView ] = useState< View >( {
+		type: 'table',
+		...defaultLayouts.table,
+	} );
+
+	/**
+	 * DataView fields - describes the visible items for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object
+	 */
+	const fields = useMemo( () => {
+		const iconHeight = 20;
+		const result: Field< ScanReportExtension >[] = [
+			{
+				id: FIELD_STATUS,
+				label: __( 'Status', 'jetpack-components' ),
+				render( { item }: { item: ScanReportExtension } ) {
+					let variant: 'info' | 'warning' | 'success' = 'info';
+					let text = __(
+						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
+						'jetpack-components'
+					);
+
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							variant = 'warning';
+							text = __( 'Threat detected.', 'jetpack-components' );
+						} else {
+							variant = 'success';
+							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+						}
+					}
+
+					return (
+						<Tooltip className={ styles.tooltip } text={ text }>
+							<div className={ styles.icon }>
+								<ShieldIcon variant={ variant } height={ iconHeight } />
+							</div>
+						</Tooltip>
+					);
+				},
+			},
+			{
+				id: FIELD_TYPE,
+				label: __( 'Type', 'jetpack-components' ),
+				elements: TYPES,
+			},
+			{
+				id: FIELD_NAME,
+				label: __( 'Name', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.name ? item.name : '';
+				},
+			},
+			{
+				id: FIELD_VERSION,
+				label: __( 'Version', 'jetpack-components' ),
+				enableGlobalSearch: true,
+				getValue( { item }: { item: ScanReportExtension } ) {
+					return item.version ? item.version : '';
+				},
+			},
+			...( view.type === 'list'
+				? [
+						{
+							id: FIELD_ICON,
+							label: __( 'Icon', 'jetpack-components' ),
+							enableSorting: false,
+							enableHiding: false,
+							getValue( { item }: { item: ScanReportExtension } ) {
+								return ICONS[ item.type ] || '';
+							},
+							render( { item }: { item: ScanReportExtension } ) {
+								return (
+									<div className={ styles.threat__media }>
+										<Icon icon={ ICONS[ item.type ] } />
+									</div>
+								);
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		return result;
+	}, [ view ] );
+
+	/**
+	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dataviews/src/filter-and-sort-data-view.ts
+	 */
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ data, view, fields ] );
+
+	/**
+	 * Callback function to update the view state.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
+	 */
+	const onChangeView = useCallback( ( newView: View ) => {
+		setView( newView );
+	}, [] );
+
+	/**
+	 * DataView getItemId function - returns the unique ID for each record in the dataset.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function
+	 */
+	const getItemId = useCallback( ( item: ScanReportExtension ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+		/>
+	);
+}
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
new file mode 100644
index 0000000000000..63926908850de
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -0,0 +1,72 @@
+import ScanReport from '..';
+
+export default {
+	title: 'JS Packages/Components/Scan Report',
+	component: ScanReport,
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [ { name: 'light', value: 'white' } ],
+		},
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '100%', backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const Default = args => <ScanReport { ...args } />;
+Default.args = {
+	data: [
+		{
+			id: 1,
+			name: 'WordPress',
+			slug: null,
+			version: '6.7.1',
+			threats: [],
+			checked: true,
+			type: 'core',
+		},
+		{
+			id: 2,
+			name: 'Jetpack',
+			slug: 'jetpack/jetpack.php',
+			version: '14.1-a.7',
+			threats: [],
+			checked: false,
+			type: 'plugins',
+		},
+		{
+			id: 3,
+			name: 'Twenty Fifteen',
+			slug: 'twentyfifteen',
+			version: '1.1',
+			threats: [
+				{
+					id: 198352527,
+					signature: 'Vulnerable.WP.Extension',
+					description: 'Vulnerable WordPress extension',
+					severity: 3,
+				},
+			],
+			checked: true,
+			type: 'themes',
+		},
+		{
+			id: 4,
+			threats: [
+				{
+					id: 198352406,
+					signature: 'EICAR_AV_Test_Suspicious',
+					title: 'Malicious code found in file: jptt_eicar.php',
+					severity: 1,
+				},
+			],
+			checked: true,
+			type: 'files',
+		},
+	],
+};
diff --git a/projects/js-packages/components/components/scan-report/styles.module.scss b/projects/js-packages/components/components/scan-report/styles.module.scss
new file mode 100644
index 0000000000000..d313d4cb8898a
--- /dev/null
+++ b/projects/js-packages/components/components/scan-report/styles.module.scss
@@ -0,0 +1,21 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__media {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #EDFFEE;
+	border-color: #EDFFEE;
+
+	svg {
+		fill: var( --jp-black );
+	}
+}
+
+.tooltip {
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}
\ No newline at end of file
diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index fee9f4d70c463..b07b943b5e7fa 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 const COLORS = {
-	error: '#D63638',
-	warning: '#F0B849',
-	success: '#069E08',
 	default: '#1d2327',
+	info: '#A7AAAD',
+	success: '#069E08',
+	warning: '#F0B849',
+	error: '#D63638',
 };
 
 /**
@@ -32,11 +33,11 @@ export default function ShieldIcon( {
 }: {
 	className?: string;
 	contrast?: string;
-	fill?: 'default' | 'success' | 'warning' | 'error' | string;
+	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
 	icon?: 'success' | 'error';
 	outline?: boolean;
-	variant: 'default' | 'success' | 'warning' | 'error';
+	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
 	const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ];
 	const iconFill = outline ? shieldFill : contrast;
@@ -60,6 +61,9 @@ export default function ShieldIcon( {
 				}
 				fill={ shieldFill }
 			/>
+			{ 'info' === iconVariant && (
+				<path d="M33.7 69H41.5V45.6H33.7V69ZM33.7 37.8H41.5V30H33.7V37.8Z" fill={ iconFill } />
+			) }
 			{ 'success' === iconVariant && (
 				<path
 					fillRule="evenodd"
diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
index b5a16d4da4075..57bcb3802010c 100644
--- a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx
@@ -11,13 +11,13 @@ export default {
 			control: {
 				type: 'select',
 			},
-			options: [ 'default', 'success', 'warning', 'error' ],
+			options: [ 'default', 'info', 'success', 'warning', 'error' ],
 		},
 		icon: {
 			control: {
 				type: 'select',
 			},
-			options: [ 'success', 'error' ],
+			options: [ 'info', 'success', 'error' ],
 		},
 		fill: {
 			control: 'color',
@@ -39,12 +39,14 @@ export const Variants = () => {
 		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" />
+				<ShieldIcon variant="info" />
 				<ShieldIcon variant="success" />
 				<ShieldIcon variant="warning" />
 				<ShieldIcon variant="error" />
 			</div>
 			<div style={ { display: 'flex', gap: '8px' } }>
 				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="info" outline />
 				<ShieldIcon variant="success" outline />
 				<ShieldIcon variant="warning" outline />
 				<ShieldIcon variant="error" outline />
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 4b0f3612012e7..6df50ee7fdb61 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -48,6 +48,7 @@ export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as ThreatsDataViews } from './components/threats-data-views';
 export { default as ShieldIcon } from './components/shield-icon';
+export { default as ScanReport } from './components/scan-report';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
diff --git a/projects/js-packages/scan/changelog/components-add-scan-report b/projects/js-packages/scan/changelog/components-add-scan-report
new file mode 100644
index 0000000000000..eeb9c55de4a28
--- /dev/null
+++ b/projects/js-packages/scan/changelog/components-add-scan-report
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updates/adds scan types
diff --git a/projects/js-packages/scan/src/types/threats.ts b/projects/js-packages/scan/src/types/threats.ts
index 72428c209ee49..22f6b06477163 100644
--- a/projects/js-packages/scan/src/types/threats.ts
+++ b/projects/js-packages/scan/src/types/threats.ts
@@ -4,6 +4,23 @@ export type ThreatStatus = 'fixed' | 'ignored' | 'current';
 
 export type ThreatFixType = 'replace' | 'delete' | 'update' | string;
 
+export type ScanReportExtension = {
+	id: number;
+	checked: boolean;
+	slug?: string;
+	name?: string;
+	version?: string;
+	threats: Threat[];
+	type: 'plugins' | 'themes' | 'core' | 'files';
+};
+
+export type Extension = {
+	slug: string;
+	name: string;
+	version: string;
+	type: 'plugins' | 'themes' | 'core';
+};
+
 export type Threat = {
 	/** The threat's unique ID. */
 	id: string | number;
@@ -57,10 +74,5 @@ export type Threat = {
 	diff?: string;
 
 	/** The affected extension. */
-	extension?: {
-		slug: string;
-		name: string;
-		version: string;
-		type: 'plugins' | 'themes' | 'core';
-	};
+	extension?: Extension;
 };

From 68569f2c94c454c90d7369da8b8e07780fbff3d4 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 6 Dec 2024 12:05:11 -0700
Subject: [PATCH 121/143] Fix type errors

Protect: add HMR support

Revert "Protect: add HMR support"

This reverts commit 06497a05bb050c86e097b36038c8742af427388d.
---
 projects/js-packages/scan/src/utils/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 9e2e75bcd4d91..30a96cbd132d5 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -21,9 +21,9 @@ export const getThreatIcon = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return 'wordpress-alt';
-		case 'plugin':
+		case 'plugins':
 			return 'plugins';
-		case 'theme':
+		case 'themes':
 			return 'appearance';
 		case 'file':
 			return 'media-code';
@@ -36,9 +36,9 @@ export const getThreatSubtitle = ( threat: Threat ) => {
 	switch ( getThreatType( threat ) ) {
 		case 'core':
 			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
-		case 'plugin':
+		case 'plugins':
 			return __( 'Vulnerable Plugin', 'jetpack-scan' );
-		case 'theme':
+		case 'themes':
 			return __( 'Vulnerable Theme', 'jetpack-scan' );
 		case 'file':
 			return __( 'File Threat', 'jetpack-scan' );

From ae3af3b2cf12f27691864d35f541c58caac25583 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Thu, 14 Nov 2024 10:42:12 -0700
Subject: [PATCH 122/143] Init project branch


From 4b2a5d41b09dc0cf65360a9041d8f265f14a2ee4 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Wed, 4 Dec 2024 20:26:54 -0700
Subject: [PATCH 123/143] Protect: Add ShieldIcon Component (#40402)

---
 .../js-packages/components/components/shield-icon/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index b07b943b5e7fa..20147260db1fd 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -35,7 +35,7 @@ export default function ShieldIcon( {
 	contrast?: string;
 	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
-	icon?: 'success' | 'error';
+	icon?: 'success' | 'info' | 'error';
 	outline?: boolean;
 	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {

From cd166687ee4830e7b9041d570fe53f77c0985b71 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sat, 7 Dec 2024 19:35:16 -0700
Subject: [PATCH 124/143] Refactor AdminSectionHero component

---
 .../components/shield-icon/index.tsx          |   2 +-
 .../components/admin-section-hero/index.tsx   |  90 +++++-----
 .../stories/index.stories.jsx                 |  16 +-
 .../admin-section-hero/styles.module.scss     |  44 +++--
 .../error-admin-section-hero/index.tsx        |  30 ++--
 .../styles.module.scss                        |   6 +-
 .../firewall/firewall-admin-section-hero.tsx  |  22 +--
 .../js/routes/firewall/firewall-statcards.jsx |   2 +-
 .../src/js/routes/firewall/styles.module.scss |  45 ++---
 .../routes/scan/scan-admin-section-hero.tsx   | 164 +++++++++---------
 .../scan/scanning-admin-section-hero.tsx      |  70 ++++----
 .../src/js/routes/scan/styles.module.scss     |   4 +
 12 files changed, 242 insertions(+), 253 deletions(-)

diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx
index 20147260db1fd..b07b943b5e7fa 100644
--- a/projects/js-packages/components/components/shield-icon/index.tsx
+++ b/projects/js-packages/components/components/shield-icon/index.tsx
@@ -35,7 +35,7 @@ export default function ShieldIcon( {
 	contrast?: string;
 	fill?: 'default' | 'info' | 'success' | 'warning' | 'error' | string;
 	height?: number;
-	icon?: 'success' | 'info' | 'error';
+	icon?: 'success' | 'error';
 	outline?: boolean;
 	variant: 'default' | 'info' | 'success' | 'warning' | 'error';
 } ): JSX.Element {
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index 5ccf607698084..bbdf5e98ed699 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -2,67 +2,67 @@ import {
 	AdminSectionHero as JetpackAdminSectionHero,
 	H3,
 	ShieldIcon,
+	Container,
+	Col,
 } from '@automattic/jetpack-components';
-import SeventyFiveLayout from '../seventy-five-layout';
+import clsx from 'clsx';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
-interface AdminSectionHeroProps {
-	main: React.ReactNode;
-	secondary?: React.ReactNode;
-	preserveSecondaryOnMobile?: boolean;
-	spacing?: number;
-}
-
-interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< {
-		children: React.ReactNode;
-		showIcon?: boolean;
-		variant?: 'default' | 'success' | 'error';
-		outline?: boolean;
-	} >;
-	Subheading: React.FC< { children: React.ReactNode } >;
-}
-
-const AdminSectionHero: AdminSectionHeroComponent = ( {
-	main,
-	secondary,
-	preserveSecondaryOnMobile = true,
-	spacing = 7,
-} ) => {
+const AdminSectionHero = ( {
+	children,
+	...props
+}: React.ComponentProps< typeof JetpackAdminSectionHero > ) => {
 	return (
-		<JetpackAdminSectionHero>
+		<JetpackAdminSectionHero { ...props }>
 			<AdminSectionHeroNotices />
-			<SeventyFiveLayout
-				spacing={ spacing }
-				gap={ 0 }
-				main={ main }
-				mainClassName={ styles[ 'header-main' ] }
-				secondary={ secondary }
-				secondaryClassName={ styles[ 'header-secondary' ] }
-				preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
-				fluid={ false }
-			/>
+			<Container horizontalSpacing={ 0 }>
+				<Col>
+					<div className={ styles[ 'admin-section-hero' ] }>{ children }</div>
+				</Col>
+			</Container>
 		</JetpackAdminSectionHero>
 	);
 };
 
-AdminSectionHero.Heading = ( {
+AdminSectionHero.Main = ( {
 	children,
-	variant = 'default',
-	showIcon = false,
+	className,
+	...props
 }: {
 	children: React.ReactNode;
-	variant?: 'default' | 'success' | 'error';
-	showIcon?: boolean;
+	className?: string;
+	[ key: string ]: unknown;
+} ) => {
+	return (
+		<div className={ clsx( styles[ 'admin-section-hero__main' ], className ) } { ...props }>
+			{ children }
+		</div>
+	);
+};
+
+AdminSectionHero.Aside = ( { children, ...props }: React.ComponentProps< 'div' > ) => {
+	return (
+		<div className={ styles[ 'admin-section-hero__aside' ] } { ...props }>
+			{ children }
+		</div>
+	);
+};
+
+AdminSectionHero.Heading = ( {
+	children,
+	icon,
+	...props
+}: React.ComponentProps< typeof H3 > & {
+	icon?: 'default' | 'success' | 'error';
 } ) => {
 	return (
-		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
+		<H3 mb={ 1 } { ...props }>
 			{ children }
-			{ showIcon && (
+			{ !! icon && (
 				<ShieldIcon
 					height={ 38 }
-					variant={ variant }
+					variant={ icon }
 					outline
 					fill="default"
 					className={ styles[ 'heading-icon' ] }
@@ -72,8 +72,4 @@ AdminSectionHero.Heading = ( {
 	);
 };
 
-AdminSectionHero.Subheading = ( { children }: { children: React.ReactNode } ) => {
-	return <div className={ styles.subheading }>{ children }</div>;
-};
-
 export default AdminSectionHero;
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index ca2dfda7fc98e..59ed9086d6317 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -9,16 +9,16 @@ export default {
 
 export const Default = args => <AdminSectionHero { ...args } />;
 Default.args = {
-	main: (
+	children: (
 		<>
-			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon variant="success">
-				{ 'No threats found' }
-			</AdminSectionHero.Heading>
-			<AdminSectionHero.Subheading>
+			<AdminSectionHero.Main>
+				<Status status={ 'active' } label={ 'Active' } />
+				<AdminSectionHero.Heading icon="success">{ 'No threats found' }</AdminSectionHero.Heading>
 				<Text>{ 'Most recent results' }</Text>
-			</AdminSectionHero.Subheading>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>
+				<InProgressAnimation />
+			</AdminSectionHero.Aside>
 		</>
 	),
-	secondary: <InProgressAnimation />,
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index a414aa9216f5c..74cfe29aaaded 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -1,15 +1,39 @@
-.header-main {
+.admin-section-hero {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    gap: calc( var( --spacing-base ) * 6 ); // 48px
+    
+    max-width: var(--max-container-width);
+    padding: calc( var( --spacing-base ) * 6 ) 0; // 48px 0
+    margin: 0 auto;
+
+    @media (min-width: 600px) {
+        padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
+    }
+
+    @media (min-width: 600px) {
+        padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
+    }
+
+    @media ( min-width: 1100px ) {
+        flex-direction: row;
+        align-items: center;
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
+    }
 }
 
-.header-secondary {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
+.admin-section-hero__main {
+    flex: 2;
+}
+
+.admin-section-hero__aside {
+    flex: 1;
+    flex-shrink: 0;
+
+    @media ( min-width: 1200px ) {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 .heading-icon {
@@ -17,10 +41,6 @@
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
-.subheading {
-    width: fit-content;
-}
-
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
 }
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 1a9bc87387fa9..536d8f50de7d1 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,6 +1,5 @@
-import { Text } from '@automattic/jetpack-components';
+import { ShieldIcon, Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { Icon, warning } from '@wordpress/icons';
 import AdminSectionHero from '../admin-section-hero';
 import styles from './styles.module.scss';
 
@@ -19,22 +18,17 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 	displayErrorMessage += ' ' + __( 'Try again in a few minutes.', 'jetpack-protect' );
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<AdminSectionHero.Heading>
-						<div className={ styles.heading }>
-							<Icon className={ styles.warning } icon={ warning } size={ 54 } />
-							{ __( 'An error occurred', 'jetpack-protect' ) }
-						</div>
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<Text>{ displayErrorMessage }</Text>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-			preserveSecondaryOnMobile={ false }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<AdminSectionHero.Heading>
+					<div className={ styles.heading }>
+						{ __( 'An error occurred', 'jetpack-protect' ) }
+						<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
+					</div>
+				</AdminSectionHero.Heading>
+				<Text>{ displayErrorMessage }</Text>
+			</AdminSectionHero.Main>
+		</AdminSectionHero>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
index 6f0750abd02f8..1c89377d4b4b5 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
@@ -4,11 +4,7 @@
 }
 
 .warning {
-    width: 54px;
-    height: 54px;
-    fill: var( --jp-red );
-    margin-left: -8px;
-    margin-right: var( --spacing-base ); // 8px
+    margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
 }
 
 .scan-navigation {
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index 3f70a75509b76..115a94682d819 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -84,16 +84,18 @@ const FirewallAdminSectionHero = () => {
 	}, [ status ] );
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } />
-					<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>{ subheading }</AdminSectionHero.Subheading>
-				</>
-			}
-			secondary={ wafSupported && <FirewallStatCards /> }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } mb={ 2 } />
+				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
+				<Text>{ subheading }</Text>
+			</AdminSectionHero.Main>
+			{ wafSupported && (
+				<AdminSectionHero.Aside>
+					<FirewallStatCards />
+				</AdminSectionHero.Aside>
+			) }
+		</AdminSectionHero>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
index 15c80df763c18..1eebd67cb60d7 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx
@@ -93,7 +93,7 @@ const FirewallStatCards = () => {
 	);
 
 	return (
-		<div className={ styles[ 'stat-card-wrapper' ] }>
+		<div className={ styles[ 'stat-cards-wrapper' ] }>
 			<StatCard { ...currentDayArgs } />
 			<StatCard { ...thirtyDaysArgs } />
 		</div>
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index c0350ff100e6b..57e78abd77be3 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -145,14 +145,10 @@
     align-items: center;
 }
 
-.stat-card-wrapper {
+.stat-cards-wrapper {
     display: flex;
-    margin-left: auto;
-    flex-wrap: wrap;
-
-    >:first-child {
-        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
-    }
+    justify-content: flex-end;
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
 
     .disabled {
         opacity: 0.5;
@@ -171,27 +167,6 @@
     white-space: nowrap;
 }
 
-@media ( max-width: 1115px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-    }
-}
-
-@media ( max-width: 599px ) {
-    .stat-card-wrapper {
-        margin-top: calc( var( --spacing-base ) * 3 ); // 24px
-
-        >:first-child {
-            margin-right: 0;
-            margin-bottom: var( --spacing-base ); // 8px
-        }
-    }
-
-    .stat-card-icon {
-        margin-bottom: 0;
-    }
-}
-
 .footer-checkbox {
     display: flex;
     align-items: center;
@@ -231,7 +206,21 @@
     }
 }
 
+@media ( max-width: 1200px ) {
+    .stat-cards-wrapper {
+        justify-content: flex-start;
+    }
+}
+
 @media ( max-width: 599px ) {
+    .stat-cards-wrapper {
+        flex-direction: column;
+        gap: var( --spacing-base ); // 8px
+    }
+
+    .stat-card-icon {
+        margin-bottom: 0;
+    }
 
     .share-data-section {
         margin-top: 0;
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 db76bac1b15b0..e99573d192beb 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
@@ -84,94 +84,88 @@ const ScanAdminSectionHero: React.FC = () => {
 	}
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Text ref={ setDailyScansPopoverAnchor }>
-						{ lastCheckedLocalTimestamp
-							? sprintf(
-									// translators: %s: date and time of the last scan
-									__( '%s results', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
-							  )
-							: __( 'Most recent results', 'jetpack-protect' ) }
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<Text mb={ 2 } ref={ setDailyScansPopoverAnchor }>
+					{ lastCheckedLocalTimestamp
+						? sprintf(
+								// translators: %s: date and time of the last scan
+								__( '%s results', 'jetpack-protect' ),
+								dateI18n( 'F jS, g:i A', lastCheckedLocalTimestamp, false )
+						  )
+						: __( 'Most recent results', 'jetpack-protect' ) }
+				</Text>
+				<OnboardingPopover
+					id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
+					position={ isSm ? 'bottom' : 'middle right' }
+					anchor={ dailyScansPopoverAnchor }
+				/>
+				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
+					{ numThreats > 0
+						? sprintf(
+								/* translators: %s: Total number of threats/vulnerabilities */
+								__( '%1$s active %2$s', 'jetpack-protect' ),
+								numThreats,
+								hasPlan
+									? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
+									: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
+						  )
+						: __( "Don't worry about a thing", 'jetpack-protect' ) }
+				</AdminSectionHero.Heading>
+				{ hasPlan ? (
+					<Text>
+						{ __(
+							"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
+							'jetpack-protect'
+						) }
 					</Text>
-					<OnboardingPopover
-						id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
-						position={ isSm ? 'bottom' : 'middle right' }
-						anchor={ dailyScansPopoverAnchor }
-					/>
-					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
-						{ numThreats > 0
-							? sprintf(
-									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s active %2$s', 'jetpack-protect' ),
-									numThreats,
-									hasPlan
-										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
-										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
-							  )
-							: __( "Don't worry about a thing", 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<>
-							{ hasPlan ? (
-								<Text>
-									{ __(
-										"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
-										'jetpack-protect'
-									) }
-								</Text>
-							) : (
-								<>
-									<Text mb={ 4 }>
-										{ sprintf(
-											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-											__(
-												'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-												'jetpack-protect'
-											),
-											totalVulnerabilitiesFormatted
-										) }
-									</Text>
-									<Tooltip
-										text={ __(
-											'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
-											'jetpack-protect'
-										) }
-									>
-										<Button onClick={ getScan }>
-											{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
-										</Button>
-									</Tooltip>
-								</>
+				) : (
+					<>
+						<Text mb={ 4 }>
+							{ sprintf(
+								// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+								__(
+									'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
+									'jetpack-protect'
+								),
+								totalVulnerabilitiesFormatted
 							) }
-							{ fixableList.length > 0 && (
-								<>
-									<div ref={ setShowAutoFixersPopoverAnchor }>
-										<Button
-											className={ styles[ 'auto-fixers' ] }
-											onClick={ handleShowAutoFixersClick( fixableList ) }
-										>
-											{ sprintf(
-												/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-												__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-												fixableList.length
-											) }
-										</Button>
-									</div>
-									<OnboardingPopover
-										id="paid-fix-all-threats"
-										position={ isSm ? 'bottom right' : 'middle left' }
-										anchor={ showAutoFixersPopoverAnchor }
-									/>
-								</>
+						</Text>
+						<Tooltip
+							text={ __(
+								'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
+								'jetpack-protect'
 							) }
-						</>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-		/>
+						>
+							<Button onClick={ getScan }>
+								{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
+							</Button>
+						</Tooltip>
+					</>
+				) }
+				{ fixableList.length > 0 && (
+					<>
+						<div ref={ setShowAutoFixersPopoverAnchor }>
+							<Button
+								className={ styles[ 'auto-fixers' ] }
+								onClick={ handleShowAutoFixersClick( fixableList ) }
+							>
+								{ sprintf(
+									/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+									__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+									fixableList.length
+								) }
+							</Button>
+						</div>
+						<OnboardingPopover
+							id="paid-fix-all-threats"
+							position={ isSm ? 'bottom right' : 'middle left' }
+							anchor={ showAutoFixersPopoverAnchor }
+						/>
+					</>
+				) }
+			</AdminSectionHero.Main>
+		</AdminSectionHero>
 	);
 };
 
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 4db4449b60119..4383967d961f5 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
@@ -18,44 +18,38 @@ const ScanningAdminSectionHero: React.FC = () => {
 		: totalVulnerabilities.toLocaleString();
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<AdminSectionHero.Heading>
-						{ __( 'Your results will be ready soon', 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<>
-							{ hasPlan && (
-								<ProgressBar
-									className={ styles.progress }
-									value={ status?.currentProgress }
-									total={ 100 }
-								/>
-							) }
-							<Text>
-								{ hasPlan
-									? __(
-											"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
-											'jetpack-protect'
-									  )
-									: sprintf(
-											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-											__(
-												'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
-												'jetpack-protect'
-											),
-											totalVulnerabilitiesFormatted
-									  ) }
-							</Text>
-						</>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-			secondary={ <InProgressAnimation /> }
-			preserveSecondaryOnMobile={ false }
-			spacing={ 4 }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main className={ styles[ 'scanning-main' ] }>
+				<AdminSectionHero.Heading>
+					{ __( 'Your results will be ready soon', 'jetpack-protect' ) }
+				</AdminSectionHero.Heading>
+				{ hasPlan && (
+					<ProgressBar
+						className={ styles.progress }
+						value={ status?.currentProgress }
+						total={ 100 }
+					/>
+				) }
+				<Text>
+					{ hasPlan
+						? __(
+								"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
+								'jetpack-protect'
+						  )
+						: sprintf(
+								// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+								__(
+									'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
+									'jetpack-protect'
+								),
+								totalVulnerabilitiesFormatted
+						  ) }
+				</Text>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>
+				<InProgressAnimation />
+			</AdminSectionHero.Aside>
+		</AdminSectionHero>
 	);
 };
 
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 163fd23248aaa..99df6db318d52 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,3 +1,7 @@
+.scanning-main {
+	max-width: 512px;
+}
+
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }

From a84ee423eea0facf340f3a6f0d4779ede532dac6 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 11:41:17 -0800
Subject: [PATCH 125/143] Rebase on admin hero section refactor

---
 .../components/admin-section-hero/index.tsx   |  94 +++++----
 .../stories/index.stories.jsx                 |  16 +-
 .../admin-section-hero/styles.module.scss     |  42 +++-
 .../error-admin-section-hero/index.tsx        |  29 ++-
 .../components/seventy-five-layout/index.tsx  |  73 -------
 .../firewall/firewall-admin-section-hero.tsx  |  28 +--
 .../js/routes/firewall/firewall-footer.jsx    | 180 +++++++-----------
 .../src/js/routes/firewall/styles.module.scss |  44 ++---
 .../routes/home/home-admin-section-hero.tsx   |  61 +++---
 .../src/js/routes/home/styles.module.scss     |  15 +-
 .../routes/scan/scan-admin-section-hero.tsx   | 166 ++++++++--------
 .../scan/scanning-admin-section-hero.tsx      |  71 ++++---
 .../src/js/routes/scan/styles.module.scss     |  12 +-
 13 files changed, 346 insertions(+), 485 deletions(-)
 delete mode 100644 projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index cb11833a148af..bbdf5e98ed699 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -2,71 +2,67 @@ import {
 	AdminSectionHero as JetpackAdminSectionHero,
 	H3,
 	ShieldIcon,
+	Container,
+	Col,
 } from '@automattic/jetpack-components';
-import SeventyFiveLayout from '../seventy-five-layout';
+import clsx from 'clsx';
 import AdminSectionHeroNotices from './admin-section-hero-notices';
 import styles from './styles.module.scss';
 
-interface AdminSectionHeroProps {
-	main: React.ReactNode;
-	mainClassName?: string;
-	secondary?: React.ReactNode;
-	secondaryClassName?: string;
-	preserveSecondaryOnMobile?: boolean;
-	spacing?: number;
-}
-
-interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
-	Heading: React.FC< {
-		children: React.ReactNode;
-		showIcon?: boolean;
-		variant?: 'default' | 'success' | 'error';
-		outline?: boolean;
-	} >;
-	Subheading: React.FC< { children: React.ReactNode } >;
-}
-
-const AdminSectionHero: AdminSectionHeroComponent = ( {
-	main,
-	mainClassName,
-	secondary,
-	secondaryClassName,
-	preserveSecondaryOnMobile = true,
-	spacing = 7,
-} ) => {
+const AdminSectionHero = ( {
+	children,
+	...props
+}: React.ComponentProps< typeof JetpackAdminSectionHero > ) => {
 	return (
-		<JetpackAdminSectionHero>
+		<JetpackAdminSectionHero { ...props }>
 			<AdminSectionHeroNotices />
-			<SeventyFiveLayout
-				spacing={ spacing }
-				gap={ 0 }
-				main={ main }
-				mainClassName={ mainClassName }
-				secondary={ secondary }
-				secondaryClassName={ secondaryClassName }
-				preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
-				fluid={ false }
-			/>
+			<Container horizontalSpacing={ 0 }>
+				<Col>
+					<div className={ styles[ 'admin-section-hero' ] }>{ children }</div>
+				</Col>
+			</Container>
 		</JetpackAdminSectionHero>
 	);
 };
 
-AdminSectionHero.Heading = ( {
+AdminSectionHero.Main = ( {
 	children,
-	variant = 'default',
-	showIcon = false,
+	className,
+	...props
 }: {
 	children: React.ReactNode;
-	variant?: 'default' | 'success' | 'error';
-	showIcon?: boolean;
+	className?: string;
+	[ key: string ]: unknown;
+} ) => {
+	return (
+		<div className={ clsx( styles[ 'admin-section-hero__main' ], className ) } { ...props }>
+			{ children }
+		</div>
+	);
+};
+
+AdminSectionHero.Aside = ( { children, ...props }: React.ComponentProps< 'div' > ) => {
+	return (
+		<div className={ styles[ 'admin-section-hero__aside' ] } { ...props }>
+			{ children }
+		</div>
+	);
+};
+
+AdminSectionHero.Heading = ( {
+	children,
+	icon,
+	...props
+}: React.ComponentProps< typeof H3 > & {
+	icon?: 'default' | 'success' | 'error';
 } ) => {
 	return (
-		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
+		<H3 mb={ 1 } { ...props }>
 			{ children }
-			{ showIcon && (
+			{ !! icon && (
 				<ShieldIcon
 					height={ 38 }
-					variant={ variant }
+					variant={ icon }
 					outline
 					fill="default"
 					className={ styles[ 'heading-icon' ] }
@@ -76,8 +72,4 @@ AdminSectionHero.Heading = ( {
 	);
 };
 
-AdminSectionHero.Subheading = ( { children }: { children: React.ReactNode } ) => {
-	return <div className={ styles.subheading }>{ children }</div>;
-};
-
 export default AdminSectionHero;
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
index ca2dfda7fc98e..59ed9086d6317 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
@@ -9,16 +9,16 @@ export default {
 
 export const Default = args => <AdminSectionHero { ...args } />;
 Default.args = {
-	main: (
+	children: (
 		<>
-			<Status status={ 'active' } label={ 'Active' } />
-			<AdminSectionHero.Heading showIcon variant="success">
-				{ 'No threats found' }
-			</AdminSectionHero.Heading>
-			<AdminSectionHero.Subheading>
+			<AdminSectionHero.Main>
+				<Status status={ 'active' } label={ 'Active' } />
+				<AdminSectionHero.Heading icon="success">{ 'No threats found' }</AdminSectionHero.Heading>
 				<Text>{ 'Most recent results' }</Text>
-			</AdminSectionHero.Subheading>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>
+				<InProgressAnimation />
+			</AdminSectionHero.Aside>
 		</>
 	),
-	secondary: <InProgressAnimation />,
 };
diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
index 021b7cc028da0..74cfe29aaaded 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
@@ -1,12 +1,46 @@
+.admin-section-hero {
+    display: flex;
+    flex-direction: column;
+    gap: calc( var( --spacing-base ) * 6 ); // 48px
+    
+    max-width: var(--max-container-width);
+    padding: calc( var( --spacing-base ) * 6 ) 0; // 48px 0
+    margin: 0 auto;
+
+    @media (min-width: 600px) {
+        padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
+    }
+
+    @media (min-width: 600px) {
+        padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
+    }
+
+    @media ( min-width: 1100px ) {
+        flex-direction: row;
+        align-items: center;
+        gap: calc( var( --spacing-base ) * 3 ); // 24px
+    }
+}
+
+.admin-section-hero__main {
+    flex: 2;
+}
+
+.admin-section-hero__aside {
+    flex: 1;
+    flex-shrink: 0;
+
+    @media ( min-width: 1200px ) {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+
 .heading-icon {
     margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
     margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
 }
 
-.subheading {
-    width: fit-content;
-}
-
 .connection-error-col {
 	margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
 }
diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
index 95b03d6c7aa25..536d8f50de7d1 100644
--- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
@@ -1,4 +1,4 @@
-import { Text, ShieldIcon } from '@automattic/jetpack-components';
+import { ShieldIcon, Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import AdminSectionHero from '../admin-section-hero';
 import styles from './styles.module.scss';
@@ -18,22 +18,17 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
 	displayErrorMessage += ' ' + __( 'Try again in a few minutes.', 'jetpack-protect' );
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<AdminSectionHero.Heading>
-						<div className={ styles.heading }>
-							{ __( 'An error occurred', 'jetpack-protect' ) }
-							<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
-						</div>
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<Text>{ displayErrorMessage }</Text>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-			preserveSecondaryOnMobile={ false }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<AdminSectionHero.Heading>
+					<div className={ styles.heading }>
+						{ __( 'An error occurred', 'jetpack-protect' ) }
+						<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
+					</div>
+				</AdminSectionHero.Heading>
+				<Text>{ displayErrorMessage }</Text>
+			</AdminSectionHero.Main>
+		</AdminSectionHero>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx b/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
deleted file mode 100644
index 61458aa4d46e6..0000000000000
--- a/projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Container, Col, useBreakpointMatch } from '@automattic/jetpack-components';
-import React from 'react';
-
-// Define the props interface for the SeventyFiveLayout component
-interface SeventyFiveLayoutProps {
-	spacing?: number;
-	gap?: number;
-	main: React.ReactNode;
-	mainClassName?: string;
-	secondary: React.ReactNode;
-	secondaryClassName?: string;
-	preserveSecondaryOnMobile?: boolean;
-	fluid?: boolean;
-}
-
-/**
- * SeventyFive layout meta component
- * The component name references to
- * the sections disposition of the layout.
- * FiftyFifty, 75, thus 7|5 means the cols numbers
- * for main and secondary sections respectively,
- * in large lg viewport size.
- *
- * @param {object}          props                           - Component props
- * @param {number}          props.spacing                   - Horizontal spacing
- * @param {number}          props.gap                       - Horizontal gap
- * @param {React.ReactNode} props.main                      - Main section component
- * @param {string}          props.mainClassName             - Main section class name
- * @param {React.ReactNode} props.secondary                 - Secondary section component
- * @param {string}          props.secondaryClassName        - Secondary section class name
- * @param {boolean}         props.preserveSecondaryOnMobile - Whether to show secondary section on mobile
- * @param {boolean}         props.fluid                     - Whether to use fluid layout
- * @return {React.ReactNode} - React meta-component
- */
-const SeventyFiveLayout: React.FC< SeventyFiveLayoutProps > = ( {
-	spacing = 0,
-	gap = 0,
-	main,
-	mainClassName,
-	secondary,
-	secondaryClassName,
-	preserveSecondaryOnMobile = false,
-	fluid,
-} ) => {
-	// Ensure the correct typing for useBreakpointMatch
-	const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ] );
-
-	/*
-	 * By convention, secondary section is not shown when:
-	 * - preserveSecondaryOnMobile is false
-	 * - on mobile breakpoint (sm)
-	 */
-	const hideSecondarySection = ! preserveSecondaryOnMobile && isSmall;
-
-	return (
-		<Container horizontalSpacing={ spacing } horizontalGap={ gap } fluid={ fluid }>
-			{ ! hideSecondarySection && (
-				<>
-					<Col className={ mainClassName } sm={ 12 } md={ 4 } lg={ 6 }>
-						{ main }
-					</Col>
-					<Col lg={ 1 } />
-					<Col className={ secondaryClassName } sm={ 12 } md={ 4 } lg={ 5 }>
-						{ secondary }
-					</Col>
-				</>
-			) }
-			{ hideSecondarySection && <Col>{ main }</Col> }
-		</Container>
-	);
-};
-
-export default SeventyFiveLayout;
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index bc6c87002e849..872785c834f61 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -85,18 +85,22 @@ const FirewallAdminSectionHero = () => {
 	}, [ status ] );
 
 	return (
-		<AdminSectionHero
-			mainClassName={ styles[ 'home-header-main' ] }
-			main={
-				<>
-					<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } />
-					<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>{ subheading }</AdminSectionHero.Subheading>
-				</>
-			}
-			secondaryClassName={ styles[ 'home-header-main' ] }
-			secondary={ wafSupported && <FirewallStatCards /> }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<Status
+					className={ styles.status }
+					status={ 'on' === status ? 'active' : 'inactive' }
+					label={ statusLabel }
+				/>
+				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
+				<Text>{ subheading }</Text>
+			</AdminSectionHero.Main>
+			{ wafSupported && (
+				<AdminSectionHero.Aside>
+					<FirewallStatCards />
+				</AdminSectionHero.Aside>
+			) }
+		</AdminSectionHero>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
index 661a72684c376..14b621b08eb18 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -1,7 +1,6 @@
-import { Title, Text, Button, ToggleControl } from '@automattic/jetpack-components';
+import { Title, Text, Button, ToggleControl, Container, Col } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useCallback } from 'react';
-import AdminSectionHero from '../../components/admin-section-hero';
+import { useCallback } from 'react';
 import useModal from '../../hooks/use-modal';
 import useNotices from '../../hooks/use-notices';
 import useWafData from '../../hooks/use-waf-data';
@@ -20,14 +19,17 @@ const StandaloneMode = () => {
 	};
 
 	return (
-		<div className={ styles[ 'standalone-mode-section' ] }>
-			<Title>{ __( 'Standalone mode', 'jetpack-protect' ) }</Title>
-			<Text>
-				{ __(
-					'Learn how you can execute the firewall before WordPress initializes. This mode offers the most protection.',
-					'jetpack-protect'
-				) }
-			</Text>
+		<div className={ styles[ 'standalone-mode' ] }>
+			<Title mb={ 0 }>{ __( 'Standalone mode', 'jetpack-protect' ) }</Title>
+			<div>
+				<Text>
+					{ __(
+						'Learn how you can execute the firewall before WordPress initializes.',
+						'jetpack-protect'
+					) }
+				</Text>
+				<Text>{ __( 'This mode offers the most protection.', 'jetpack-protect' ) }</Text>
+			</div>
 			<Button
 				variant={ 'link' }
 				isExternalLink={ true }
@@ -40,97 +42,56 @@ const StandaloneMode = () => {
 	);
 };
 
-const ShareDebugData = () => {
-	const { config, isUpdating, toggleShareDebugData } = useWafData();
-	const { jetpackWafShareDebugData } = config || {};
-	const { showSuccessNotice, showErrorNotice } = useNotices();
-
-	const [ settings, setSettings ] = useState( {
-		jetpack_waf_share_debug_data: jetpackWafShareDebugData,
-	} );
-
-	const handleShareDebugDataChange = useCallback( () => {
-		setSettings( {
-			...settings,
-			jetpack_waf_share_debug_data: ! settings.jetpack_waf_share_debug_data,
-		} );
-		toggleShareDebugData()
-			.then( () => showSuccessNotice( __( 'Changes saved.', 'jetpack-protect' ) ) )
-			.catch( () => {
-				showErrorNotice();
-			} );
-	}, [ settings, toggleShareDebugData, showSuccessNotice, showErrorNotice ] );
-
-	useEffect( () => {
-		setSettings( {
-			jetpack_waf_share_debug_data: jetpackWafShareDebugData,
-		} );
-	}, [ jetpackWafShareDebugData ] );
-
-	return (
-		<div>
-			<Title>{ __( 'Share detailed data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'share-data-section' ] }>
-				<ToggleControl
-					className={ styles[ 'share-data-toggle' ] }
-					checked={ Boolean( settings.jetpack_waf_share_debug_data ) }
-					onChange={ handleShareDebugDataChange }
-					disabled={ isUpdating }
-					size="small"
-				/>
-				<Text>
-					{ __(
-						'Allow Jetpack to collect detailed data from blocked requests to enhance firewall protection and accuracy.',
-						'jetpack-protect'
-					) }
-				</Text>
-			</div>
-		</div>
-	);
-};
-
 const ShareData = () => {
-	const { config, isUpdating, toggleShareData } = useWafData();
-	const { jetpackWafShareData } = config || {};
+	const { config, isUpdating, toggleShareData, toggleShareDebugData } = useWafData();
+	const { jetpackWafShareData, jetpackWafShareDebugData } = config || {};
 	const { showSuccessNotice, showErrorNotice } = useNotices();
 
-	const [ settings, setSettings ] = useState( {
-		jetpack_waf_share_data: jetpackWafShareData,
-	} );
-
-	const handleShareDataChange = useCallback( () => {
-		setSettings( { ...settings, jetpack_waf_share_data: ! settings.jetpack_waf_share_data } );
-		toggleShareData()
-			.then( () => showSuccessNotice( __( 'Changes saved.', 'jetpack-protect' ) ) )
-			.catch( () => {
-				showErrorNotice();
-			} );
-	}, [ settings, toggleShareData, showSuccessNotice, showErrorNotice ] );
-
-	useEffect( () => {
-		setSettings( {
-			jetpack_waf_share_data: jetpackWafShareData,
-		} );
-	}, [ jetpackWafShareData ] );
+	const handleShareDataChange = useCallback( async () => {
+		try {
+			await toggleShareData();
+			showSuccessNotice( __( 'Changes saved.', 'jetpack-protect' ) );
+		} catch ( error ) {
+			showErrorNotice();
+		}
+	}, [ toggleShareData, showSuccessNotice, showErrorNotice ] );
+
+	const handleShareDebugDataChange = useCallback( async () => {
+		try {
+			await toggleShareDebugData();
+			showSuccessNotice( __( 'Changes saved.', 'jetpack-protect' ) );
+		} catch ( error ) {
+			showErrorNotice();
+		}
+	}, [ toggleShareDebugData, showSuccessNotice, showErrorNotice ] );
 
 	return (
-		<div>
-			<Title>{ __( 'Share basic data with Jetpack', 'jetpack-protect' ) }</Title>
-			<div className={ styles[ 'share-data-section' ] }>
-				<ToggleControl
-					className={ styles[ 'share-data-toggle' ] }
-					checked={ Boolean( settings.jetpack_waf_share_data ) }
-					onChange={ handleShareDataChange }
-					disabled={ isUpdating }
-					size="small"
-				/>
-				<Text>
-					{ __(
-						'Allow Jetpack to collect basic data from blocked requests to improve firewall protection and accuracy.',
-						'jetpack-protect'
-					) }
-				</Text>
-			</div>
+		<div className={ styles[ 'share-data' ] }>
+			<Title mb={ 0 }>{ __( 'Share data with Jetpack', 'jetpack-protect' ) }</Title>
+			<ToggleControl
+				className={ styles[ 'share-data-toggle' ] }
+				checked={ !! jetpackWafShareData }
+				onChange={ handleShareDataChange }
+				disabled={ isUpdating }
+				size="small"
+				label={ __( 'Share basic data', 'jetpack-protect' ) }
+				help={ __(
+					'Allow Jetpack to collect basic data from blocked requests to improve firewall protection and accuracy.',
+					'jetpack-protect'
+				) }
+			/>
+			<ToggleControl
+				className={ styles[ 'share-data-toggle' ] }
+				checked={ !! jetpackWafShareDebugData }
+				onChange={ handleShareDebugDataChange }
+				disabled={ isUpdating }
+				size="small"
+				label={ __( 'Share detailed data', 'jetpack-protect' ) }
+				help={ __(
+					'Allow Jetpack to collect detailed data from blocked requests to enhance firewall protection and accuracy.',
+					'jetpack-protect'
+				) }
+			/>
 		</div>
 	);
 };
@@ -139,23 +100,18 @@ const FirewallFooter = () => {
 	const { isEnabled } = useWafData();
 
 	return (
-		<AdminSectionHero
-			spacing={ 7 }
-			main={
-				<div className={ styles[ 'footer-main' ] }>
+		<div className={ styles.footer }>
+			<Container horizontalSpacing={ 8 } horizontalGap={ 7 }>
+				<Col sm={ 12 } md={ 6 } lg={ 7 }>
 					<StandaloneMode />
-				</div>
-			}
-			secondary={
-				isEnabled && (
-					<div className={ styles[ 'footer-secondary' ] }>
+				</Col>
+				{ isEnabled && (
+					<Col sm={ 12 } md={ 6 } lg={ 5 }>
 						<ShareData />
-						<ShareDebugData />
-					</div>
-				)
-			}
-			preserveSecondaryOnMobile={ true }
-		/>
+					</Col>
+				) }
+			</Container>
+		</div>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index 66d108ca1ec75..b8bfb4084eafe 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -148,10 +148,7 @@
 .stat-cards-wrapper {
     display: flex;
     justify-content: flex-end;
-
-    >:first-child {
-        margin-right: calc( var( --spacing-base ) * 3 ); // 24px
-    }
+    gap: calc( var( --spacing-base ) * 3 ); // 24px
 
     .disabled {
         opacity: 0.5;
@@ -185,38 +182,31 @@
     }
 }
 
-.footer-main {
-    margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+.status {
+    margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
 }
 
-.footer-secondary {
+.standalone-mode, .share-data {
     display: flex;
-    gap: calc( var( --spacing-base ) * 7 ); // 56px
     flex-direction: column;
-}
-
-.share-data-section {
-    display: flex;
+    gap: calc( var( --spacing-base ) * 2 ); // 16px
+    align-items: flex-start;
 
-    .share-data-toggle {
-        margin-top: calc( var( --spacing-base ) / 2 ); // 4px
-        margin-right: var( --spacing-base ); // 8px
+    :global {
+        .components-toggle-control__label {
+            font-size: var( --font-body );
+            font-weight: 500;
+        }
+        .components-base-control__help {
+            color: inherit;
+        }
     }
 }
 
 @media ( max-width: 1200px ) {
     .stat-cards-wrapper {
-        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
         justify-content: flex-start;
     }
-    
-    .home-header-main {
-        grid-column: 1 / -1;
-    }
-
-    .home-header-secondary {
-        grid-column: 1 / -1;
-    }
 }
 
 @media ( max-width: 599px ) {
@@ -228,8 +218,8 @@
     .stat-card-icon {
         margin-bottom: 0;
     }
+}
 
-    .footer-main {
-        margin-right: calc( var( --spacing-base ) * 4 ); // 32px
-    }
+.footer {
+    background-color: var( --jp-white-off );
 }
\ No newline at end of file
diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
index cc582cfea5ae5..5bb8207f750aa 100644
--- a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -15,46 +15,37 @@ const HomeAdminSectionHero: React.FC = () => {
 	}, [ navigate ] );
 
 	return (
-		<AdminSectionHero
-			mainClassName={ styles[ 'home-header-main' ] }
-			main={
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
 				<>
 					<AdminSectionHero.Heading>
 						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
 					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<>
-							<Text className={ styles[ 'subheading-text' ] }>
-								{ sprintf(
-									// translators: %s is replaced with "threats" or "vulnerabilities" depending on the user's plan.
-									__(
-										'We stay ahead of security %s to keep your site protected.',
-										'jetpack-protect'
-									),
-									hasPlan
-										? __( 'threats', 'jetpack-protect' )
-										: __(
-												'vulnerabilities',
-												'jetpack-protect',
-												/* dummy arg to avoid bad minification */ 0
-										  )
-								) }
-							</Text>
-							<Button
-								className={ styles[ 'scan-report' ] }
-								variant="primary"
-								weight="regular"
-								onClick={ handleScanReportClick }
-							>
-								{ __( 'View scan report', 'jetpack-protect' ) }
-							</Button>
-						</>
-					</AdminSectionHero.Subheading>
+					<Text>
+						{ sprintf(
+							// translators: %s is replaced with "threats" or "vulnerabilities" depending on the user's plan.
+							__( 'We stay ahead of security %s to keep your site protected.', 'jetpack-protect' ),
+							hasPlan
+								? __( 'threats', 'jetpack-protect' )
+								: __(
+										'vulnerabilities',
+										'jetpack-protect',
+										/* dummy arg to avoid bad minification */ 0
+								  )
+						) }
+					</Text>
+					<Button
+						className={ styles[ 'view-scan-report' ] }
+						variant="primary"
+						weight="regular"
+						onClick={ handleScanReportClick }
+					>
+						{ __( 'View scan report', 'jetpack-protect' ) }
+					</Button>
 				</>
-			}
-			secondaryClassName={ styles[ 'home-header-secondary' ] }
-			secondary={ <HomeStatCards /> }
-		/>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>{ <HomeStatCards /> }</AdminSectionHero.Aside>
+		</AdminSectionHero>
 	);
 };
 
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 14d68c2fccd4b..b99bead52dbdb 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -3,7 +3,7 @@
 	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
-.scan-report {
+.view-scan-report {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
 
@@ -56,19 +56,6 @@
 	text-align: left;
 }
 
-@media ( max-width: 1600px ) {
-    .stat-cards-wrapper {
-        margin-top: calc( var( --spacing-base ) * 4 ); // 32px
-    }
-    
-    .home-header-main {
-        grid-column: 1 / -1;
-    }
-
-    .home-header-secondary {
-        grid-column: 1 / -1;
-    }
-}
 
 @media ( max-width: 599px ) {
     .stat-cards-wrapper {
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 db76bac1b15b0..3af6aff0ce5f1 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
@@ -69,7 +69,7 @@ const ScanAdminSectionHero: React.FC = () => {
 		};
 	};
 
-	if ( scanning ) {
+	if ( ! scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 
@@ -84,94 +84,88 @@ const ScanAdminSectionHero: React.FC = () => {
 	}
 
 	return (
-		<AdminSectionHero
-			main={
-				<>
-					<Text ref={ setDailyScansPopoverAnchor }>
-						{ lastCheckedLocalTimestamp
-							? sprintf(
-									// translators: %s: date and time of the last scan
-									__( '%s results', 'jetpack-protect' ),
-									dateI18n( 'F jS g:i A', lastCheckedLocalTimestamp, false )
-							  )
-							: __( 'Most recent results', 'jetpack-protect' ) }
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<Text mb={ 2 } ref={ setDailyScansPopoverAnchor }>
+					{ lastCheckedLocalTimestamp
+						? sprintf(
+								// translators: %s: date and time of the last scan
+								__( '%s results', 'jetpack-protect' ),
+								dateI18n( 'F jS, g:i A', lastCheckedLocalTimestamp, false )
+						  )
+						: __( 'Most recent results', 'jetpack-protect' ) }
+				</Text>
+				<OnboardingPopover
+					id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
+					position={ isSm ? 'bottom' : 'middle right' }
+					anchor={ dailyScansPopoverAnchor }
+				/>
+				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
+					{ numThreats > 0
+						? sprintf(
+								/* translators: %s: Total number of threats/vulnerabilities */
+								__( '%1$s active %2$s', 'jetpack-protect' ),
+								numThreats,
+								hasPlan
+									? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
+									: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
+						  )
+						: __( "Don't worry about a thing", 'jetpack-protect' ) }
+				</AdminSectionHero.Heading>
+				{ hasPlan ? (
+					<Text>
+						{ __(
+							"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
+							'jetpack-protect'
+						) }
 					</Text>
-					<OnboardingPopover
-						id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
-						position={ isSm ? 'bottom' : 'middle right' }
-						anchor={ dailyScansPopoverAnchor }
-					/>
-					<AdminSectionHero.Heading showIcon variant={ numThreats > 0 ? 'error' : 'success' }>
-						{ numThreats > 0
-							? sprintf(
-									/* translators: %s: Total number of threats/vulnerabilities */
-									__( '%1$s active %2$s', 'jetpack-protect' ),
-									numThreats,
-									hasPlan
-										? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
-										: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
-							  )
-							: __( "Don't worry about a thing", 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<>
-							{ hasPlan ? (
-								<Text>
-									{ __(
-										"We actively review your site's files line-by-line to identify threats and vulnerabilities.",
-										'jetpack-protect'
-									) }
-								</Text>
-							) : (
-								<>
-									<Text mb={ 4 }>
-										{ sprintf(
-											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-											__(
-												'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
-												'jetpack-protect'
-											),
-											totalVulnerabilitiesFormatted
-										) }
-									</Text>
-									<Tooltip
-										text={ __(
-											'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
-											'jetpack-protect'
-										) }
-									>
-										<Button onClick={ getScan }>
-											{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
-										</Button>
-									</Tooltip>
-								</>
+				) : (
+					<>
+						<Text mb={ 4 }>
+							{ sprintf(
+								// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+								__(
+									'Every day we check your plugins, themes, and WordPress version against our %s listed vulnerabilities powered by WPScan, an Automattic brand.',
+									'jetpack-protect'
+								),
+								totalVulnerabilitiesFormatted
 							) }
-							{ fixableList.length > 0 && (
-								<>
-									<div ref={ setShowAutoFixersPopoverAnchor }>
-										<Button
-											className={ styles[ 'auto-fixers' ] }
-											onClick={ handleShowAutoFixersClick( fixableList ) }
-										>
-											{ sprintf(
-												/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
-												__( 'Show auto fixers (%s)', 'jetpack-protect' ),
-												fixableList.length
-											) }
-										</Button>
-									</div>
-									<OnboardingPopover
-										id="paid-fix-all-threats"
-										position={ isSm ? 'bottom right' : 'middle left' }
-										anchor={ showAutoFixersPopoverAnchor }
-									/>
-								</>
+						</Text>
+						<Tooltip
+							text={ __(
+								'Upgrade Jetpack Protect to get access to advanced malware scanning with one-click fixes for most threats.',
+								'jetpack-protect'
 							) }
-						</>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-		/>
+						>
+							<Button onClick={ getScan }>
+								{ __( 'Upgrade to unlock malware scanning', 'jetpack-protect' ) }
+							</Button>
+						</Tooltip>
+					</>
+				) }
+				{ fixableList.length > 0 && (
+					<>
+						<div ref={ setShowAutoFixersPopoverAnchor }>
+							<Button
+								className={ styles[ 'auto-fixers' ] }
+								onClick={ handleShowAutoFixersClick( fixableList ) }
+							>
+								{ sprintf(
+									/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
+									__( 'Show auto fixers (%s)', 'jetpack-protect' ),
+									fixableList.length
+								) }
+							</Button>
+						</div>
+						<OnboardingPopover
+							id="paid-fix-all-threats"
+							position={ isSm ? 'bottom right' : 'middle left' }
+							anchor={ showAutoFixersPopoverAnchor }
+						/>
+					</>
+				) }
+			</AdminSectionHero.Main>
+		</AdminSectionHero>
 	);
 };
 
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 95f2e7d10d0cc..4383967d961f5 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
@@ -18,45 +18,38 @@ const ScanningAdminSectionHero: React.FC = () => {
 		: totalVulnerabilities.toLocaleString();
 
 	return (
-		<AdminSectionHero
-			mainClassName={ styles[ 'scanning-header-main' ] }
-			main={
-				<>
-					<AdminSectionHero.Heading>
-						{ __( 'Your results will be ready soon', 'jetpack-protect' ) }
-					</AdminSectionHero.Heading>
-					<AdminSectionHero.Subheading>
-						<>
-							{ hasPlan && (
-								<ProgressBar
-									className={ styles.progress }
-									value={ status?.currentProgress }
-									total={ 100 }
-								/>
-							) }
-							<Text>
-								{ hasPlan
-									? __(
-											"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
-											'jetpack-protect'
-									  )
-									: sprintf(
-											// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
-											__(
-												'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
-												'jetpack-protect'
-											),
-											totalVulnerabilitiesFormatted
-									  ) }
-							</Text>
-						</>
-					</AdminSectionHero.Subheading>
-				</>
-			}
-			secondary={ <InProgressAnimation /> }
-			preserveSecondaryOnMobile={ false }
-			spacing={ 4 }
-		/>
+		<AdminSectionHero>
+			<AdminSectionHero.Main className={ styles[ 'scanning-main' ] }>
+				<AdminSectionHero.Heading>
+					{ __( 'Your results will be ready soon', 'jetpack-protect' ) }
+				</AdminSectionHero.Heading>
+				{ hasPlan && (
+					<ProgressBar
+						className={ styles.progress }
+						value={ status?.currentProgress }
+						total={ 100 }
+					/>
+				) }
+				<Text>
+					{ hasPlan
+						? __(
+								"Jetpack is actively scanning your site's files line-by-line to identify threats and vulnerabilities. This could take a minute or two.",
+								'jetpack-protect'
+						  )
+						: sprintf(
+								// translators: placeholder is the number of total vulnerabilities i.e. "22,000".
+								__(
+									'We are scanning for security threats from our more than %s listed vulnerabilities, powered by WPScan. This could take a minute or two.',
+									'jetpack-protect'
+								),
+								totalVulnerabilitiesFormatted
+						  ) }
+				</Text>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>
+				<InProgressAnimation />
+			</AdminSectionHero.Aside>
+		</AdminSectionHero>
 	);
 };
 
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 23bff251ed974..433bb2c510ee2 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,3 +1,7 @@
+.scanning-main {
+	max-width: 512px;
+}
+
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
 }
@@ -11,10 +15,4 @@
 		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
-}
-
-.scanning-header-main {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
+}
\ No newline at end of file

From 24e7118f0f97daaa08bd395549fa5d924525a205 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 11:46:03 -0800
Subject: [PATCH 126/143] Revert accidental type changes

---
 .../stories/index.stories.tsx                    |  4 ++--
 .../threat-modal/stories/index.stories.tsx       |  2 +-
 .../components/threats-data-views/constants.ts   |  4 ++--
 .../components/threats-data-views/index.tsx      |  5 ++---
 .../threats-data-views/stories/index.stories.tsx | 16 ++++++++--------
 .../threats-data-views/test/index.test.tsx       |  2 +-
 projects/js-packages/scan/src/utils/index.ts     |  1 -
 7 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
index 4f346d04d394b..49139a80f07a0 100644
--- a/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threat-fixer-button/stories/index.stories.tsx
@@ -23,13 +23,13 @@ Default.args = {
 
 export const DeletePlugin = args => <ThreatFixerButton { ...args } />;
 DeletePlugin.args = {
-	threat: { fixable: { fixer: 'delete' }, extension: { type: 'plugin' } },
+	threat: { fixable: { fixer: 'delete' }, extension: { type: 'plugins' } },
 	onClick: () => alert( 'Delete fixer callback triggered' ), // eslint-disable-line no-alert
 };
 
 export const DeleteTheme = args => <ThreatFixerButton { ...args } />;
 DeleteTheme.args = {
-	threat: { fixable: { fixer: 'delete' }, extension: { type: 'theme' } },
+	threat: { fixable: { fixer: 'delete' }, extension: { type: 'themes' } },
 	onClick: () => alert( 'Delete fixer callback triggered' ), // eslint-disable-line no-alert
 };
 
diff --git a/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx b/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
index bf1eff8fe8f99..eb799cb779b25 100644
--- a/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threat-modal/stories/index.stories.tsx
@@ -255,7 +255,7 @@ VulnerableExtension.args = {
 			name: 'WP Super Cache',
 			slug: 'wp-super-cache',
 			version: '1.6.3',
-			type: 'plugin',
+			type: 'plugins',
 		},
 	},
 	isUserConnected: true,
diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts
index 01b689d1ce141..59b79a7618453 100644
--- a/projects/js-packages/components/components/threats-data-views/constants.ts
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -15,8 +15,8 @@ export const THREAT_STATUSES: { value: string; label: string; variant?: 'success
 	];
 
 export const THREAT_TYPES = [
-	{ value: 'plugin', label: __( 'Plugin', 'jetpack-components' ) },
-	{ value: 'theme', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
 	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
 	{ value: 'file', label: __( 'File', 'jetpack-components' ) },
 ];
diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
index 7ccfd59bec0c3..0d81b8995060e 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -168,12 +168,12 @@ export default function ThreatsDataViews( {
 				// Extensions (Themes and Plugins)
 				if ( threat.extension ) {
 					switch ( threat.extension.type ) {
-						case 'theme':
+						case 'themes':
 							if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
 							break;
-						case 'plugin':
+						case 'plugins':
 							if ( ! acc.plugins.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.plugins.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
@@ -428,7 +428,6 @@ export default function ThreatsDataViews( {
 				id: THREAT_ACTION_FIX,
 				label: __( 'Auto-fix', 'jetpack-components' ),
 				isPrimary: true,
-				supportsBulk: true,
 				callback: onFixThreats,
 				isEligible( item ) {
 					if ( ! onFixThreats ) {
diff --git a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
index 52afdded5ad24..4839415084b80 100644
--- a/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/threats-data-views/stories/index.stories.tsx
@@ -96,7 +96,7 @@ Default.args = {
 				name: 'WP Super Cache',
 				slug: 'wp-super-cache',
 				version: '1.6.3',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 		{
@@ -142,7 +142,7 @@ Default.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.4.5',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 	],
@@ -197,7 +197,7 @@ FixerStatuses.args = {
 				name: 'Example Plugin',
 				slug: 'example-plugin',
 				version: '1.2.3',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 		{
@@ -216,7 +216,7 @@ FixerStatuses.args = {
 				name: 'Example Theme',
 				slug: 'example-theme',
 				version: '2.2.2',
-				type: 'theme',
+				type: 'themes',
 			},
 		},
 		{
@@ -235,7 +235,7 @@ FixerStatuses.args = {
 				name: 'Example Theme II',
 				slug: 'example-theme-2',
 				version: '3.3.3',
-				type: 'theme',
+				type: 'themes',
 			},
 		},
 		{
@@ -292,7 +292,7 @@ FreeResults.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.2.3',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 		{
@@ -307,7 +307,7 @@ FreeResults.args = {
 				name: 'WooCommerce',
 				slug: 'woocommerce',
 				version: '3.4.5',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 		{
@@ -321,7 +321,7 @@ FreeResults.args = {
 				name: 'WP Super Cache',
 				slug: 'wp-super-cache',
 				version: '1.6.3',
-				type: 'plugin',
+				type: 'plugins',
 			},
 		},
 	],
diff --git a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
index 2e7dfea35d673..e5154b472664d 100644
--- a/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
+++ b/projects/js-packages/components/components/threats-data-views/test/index.test.tsx
@@ -39,7 +39,7 @@ const data = [
 			name: 'WooCommerce',
 			slug: 'woocommerce',
 			version: '3.2.3',
-			type: 'plugin' as const,
+			type: 'plugins' as const,
 		},
 		fixedIn: '3.2.4',
 	},
diff --git a/projects/js-packages/scan/src/utils/index.ts b/projects/js-packages/scan/src/utils/index.ts
index 49dcceb177c94..30a96cbd132d5 100644
--- a/projects/js-packages/scan/src/utils/index.ts
+++ b/projects/js-packages/scan/src/utils/index.ts
@@ -114,7 +114,6 @@ export const getDetailedFixerAction = ( threat: Threat ) => {
 				return __( 'Update theme to newer version', 'jetpack-scan' );
 			}
 			return __( 'Update', 'jetpack-scan' );
-			break;
 		case 'replace':
 		case 'rollback':
 			if ( threat.filename ) {

From ea745cabbfaa8beb304756c75c06f3bd2db1ba4e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 11:48:53 -0800
Subject: [PATCH 127/143] Remove testing code

---
 .../protect/src/js/routes/scan/scan-admin-section-hero.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3af6aff0ce5f1..e99573d192beb 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
@@ -69,7 +69,7 @@ const ScanAdminSectionHero: React.FC = () => {
 		};
 	};
 
-	if ( ! scanning ) {
+	if ( scanning ) {
 		return <ScanningAdminSectionHero />;
 	}
 

From 01586324b772b4be63a0b3e74f235074025f4c67 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Mon, 9 Dec 2024 13:00:20 -0700
Subject: [PATCH 128/143] Use custom class name for status spacing style

---
 .../src/js/routes/firewall/firewall-admin-section-hero.tsx | 7 ++++++-
 .../protect/src/js/routes/firewall/styles.module.scss      | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index 115a94682d819..837f649c67f16 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -5,6 +5,7 @@ import AdminSectionHero from '../../components/admin-section-hero';
 import useWafData from '../../hooks/use-waf-data';
 import FirewallStatCards from './firewall-statcards';
 import FirewallSubheading from './firewall-subheading';
+import styles from './styles.module.scss';
 
 const FirewallAdminSectionHero = () => {
 	const {
@@ -86,7 +87,11 @@ const FirewallAdminSectionHero = () => {
 	return (
 		<AdminSectionHero>
 			<AdminSectionHero.Main>
-				<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } mb={ 2 } />
+				<Status
+					status={ 'on' === status ? 'active' : 'inactive' }
+					label={ statusLabel }
+					className={ styles.status }
+				/>
 				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
 				<Text>{ subheading }</Text>
 			</AdminSectionHero.Main>
diff --git a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
index 57e78abd77be3..06c41c479d172 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -3,6 +3,10 @@
     max-width: calc( 744px + ( var( --spacing-base ) * 6 ) ); // 744px + 48px (desired inner width + horizontal padding)
 }
 
+.status {
+    margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
+}
+
 .toggle-section {
     display: flex;
 

From a0d303d7d4bcf704ab7a73387047ba139bc40426 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Mon, 9 Dec 2024 13:06:39 -0700
Subject: [PATCH 129/143] Avoid translated string concat

---
 .../routes/scan/scan-admin-section-hero.tsx   | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

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 e99573d192beb..c14e0ad3fadc7 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
@@ -1,7 +1,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 { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from 'react';
 import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
@@ -59,6 +59,23 @@ const ScanAdminSectionHero: React.FC = () => {
 		lastCheckedLocalTimestamp = new Date( status.lastChecked + ' UTC' ).getTime();
 	}
 
+	let heading = __( "Don't worry about a thing", 'jetpack-protect' );
+	if ( numThreats > 0 ) {
+		if ( hasPlan ) {
+			heading = sprintf(
+				/* translators: %s: Total number of threats */
+				__( '%1$s active threats', 'jetpack-protect' ),
+				numThreats
+			);
+		} else {
+			heading = sprintf(
+				/* translators: %s: Total number of vulnerabilities */
+				__( '%1$s active vulnerabilities', 'jetpack-protect' ),
+				numThreats
+			);
+		}
+	}
+
 	const handleShowAutoFixersClick = threatList => {
 		return event => {
 			event.preventDefault();
@@ -101,16 +118,7 @@ const ScanAdminSectionHero: React.FC = () => {
 					anchor={ dailyScansPopoverAnchor }
 				/>
 				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
-					{ numThreats > 0
-						? sprintf(
-								/* translators: %s: Total number of threats/vulnerabilities */
-								__( '%1$s active %2$s', 'jetpack-protect' ),
-								numThreats,
-								hasPlan
-									? _n( 'threat', 'threats', numThreats, 'jetpack-protect' )
-									: _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' )
-						  )
-						: __( "Don't worry about a thing", 'jetpack-protect' ) }
+					{ heading }
 				</AdminSectionHero.Heading>
 				{ hasPlan ? (
 					<Text>

From 06550f14cbbf2a2546af5ed90a03e22328406c6a Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 12:43:36 -0800
Subject: [PATCH 130/143] Fix concatenating string translations

---
 .../components/scan-report/index.tsx          | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index bd060e163948d..c23a435a8edc1 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -7,7 +7,7 @@ import {
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import ShieldIcon from '../shield-icon';
@@ -97,35 +97,27 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					return 'unchecked';
 				},
 				render( { item }: { item: ScanReportExtension } ) {
-					// TODO: Fix concatenation of trnaslated strings
+					const hasStatus = item.threats.some( threat => threat.status !== null );
 					let variant: 'info' | 'warning' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
 						'jetpack-components'
 					);
-					let capitalizedType = __( 'Vulnerability', 'jetpack-components' );
-					let pluralType = __( 'vulnerabilities', 'jetpack-components' );
-
-					if ( item.threats.some( threat => threat.status !== null ) ) {
-						capitalizedType = __( 'Threat', 'jetpack-components' );
-						pluralType = __( 'threats', 'jetpack-components' );
-					}
 
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = sprintf(
-								// translators: %s: Threat or Vulnerability
-								__( '%s detected.', 'jetpack-components' ),
-								capitalizedType
-							);
+							text = hasStatus
+								? __( 'Threats detected.', 'jetpack-components' )
+								: __( 'Vulnerabilities detected.', 'jetpack-components' );
 						} else {
 							variant = 'success';
-							text = sprintf(
-								// translators: %s: threats or vulnerabilities
-								__( 'No known %s found that affect this version.', 'jetpack-components' ),
-								pluralType
-							);
+							text = hasStatus
+								? __( 'No known threats found that affect this version.', 'jetpack-components' )
+								: __(
+										'No known vulnerabilities found that affect this version.',
+										'jetpack-components'
+								  );
 						}
 					}
 

From 03dd6b3ee8339bf4bc218c2099bce3b7f386ae37 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Mon, 9 Dec 2024 13:48:55 -0700
Subject: [PATCH 131/143] Use _n for threat/threats
 vulnerability/vulnerabilities in header

---
 .../src/js/components/admin-section-hero/index.tsx    | 10 ++++++++--
 .../src/js/routes/scan/scan-admin-section-hero.tsx    | 11 ++++++++---
 .../js/routes/scan/scanning-admin-section-hero.tsx    |  2 +-
 .../protect/src/js/routes/scan/styles.module.scss     |  6 ++++++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
index bbdf5e98ed699..7638936db5139 100644
--- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
+++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
@@ -41,9 +41,15 @@ AdminSectionHero.Main = ( {
 	);
 };
 
-AdminSectionHero.Aside = ( { children, ...props }: React.ComponentProps< 'div' > ) => {
+AdminSectionHero.Aside = ( {
+	children,
+	className,
+	...props
+}: React.ComponentProps< 'div' > & {
+	className?: string;
+} ) => {
 	return (
-		<div className={ styles[ 'admin-section-hero__aside' ] } { ...props }>
+		<div className={ clsx( styles[ 'admin-section-hero__aside' ], className ) } { ...props }>
 			{ children }
 		</div>
 	);
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 c14e0ad3fadc7..4257c585351eb 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
@@ -1,7 +1,7 @@
 import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from 'react';
 import { useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
@@ -64,13 +64,18 @@ const ScanAdminSectionHero: React.FC = () => {
 		if ( hasPlan ) {
 			heading = sprintf(
 				/* translators: %s: Total number of threats */
-				__( '%1$s active threats', 'jetpack-protect' ),
+				_n( '%1$s active threat', '%1$s active threats', numThreats, 'jetpack-protect' ),
 				numThreats
 			);
 		} else {
 			heading = sprintf(
 				/* translators: %s: Total number of vulnerabilities */
-				__( '%1$s active vulnerabilities', 'jetpack-protect' ),
+				_n(
+					'%1$s active vulnerability',
+					'%1$s active vulnerabilities',
+					numThreats,
+					'jetpack-protect'
+				),
 				numThreats
 			);
 		}
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 4383967d961f5..ac9e0137cd170 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
@@ -46,7 +46,7 @@ const ScanningAdminSectionHero: React.FC = () => {
 						  ) }
 				</Text>
 			</AdminSectionHero.Main>
-			<AdminSectionHero.Aside>
+			<AdminSectionHero.Aside className={ styles[ 'progress-animation' ] }>
 				<InProgressAnimation />
 			</AdminSectionHero.Aside>
 		</AdminSectionHero>
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 99df6db318d52..5806ca5353863 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -16,3 +16,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.progress-animation {
+	@media (max-width: 1099px) {
+		display: none;
+	}
+}

From d3774c71c9f2a7d3079b17346ec279688f49c12e Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 13:45:16 -0800
Subject: [PATCH 132/143] Fix FirewallSubheading console errors

---
 .../src/js/routes/firewall/firewall-admin-section-hero.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
index 872785c834f61..c302f93dd8863 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx
@@ -93,7 +93,7 @@ const FirewallAdminSectionHero = () => {
 					label={ statusLabel }
 				/>
 				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
-				<Text>{ subheading }</Text>
+				{ subheading }
 			</AdminSectionHero.Main>
 			{ wafSupported && (
 				<AdminSectionHero.Aside>

From ceaaeccb6a259f9ccbe0aabaa035803d098888f3 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 14:07:11 -0800
Subject: [PATCH 133/143] Add hasPlan prop for string creation checks

---
 .../components/components/scan-report/index.tsx        | 10 +++++-----
 .../components/scan-report/stories/index.stories.tsx   |  1 +
 projects/plugins/protect/src/js/routes/home/index.jsx  |  4 +++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index c23a435a8edc1..a4c48bc264a76 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -27,12 +27,13 @@ import styles from './styles.module.scss';
  * DataViews component for displaying a scan report.
  *
  * @param {object}   props                   - Component props.
+ * @param {boolean}  props.hasPlan           - Whether the user has a plan.
  * @param {Array}    props.data              - Scan report data.
  * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
  *
  * @return {JSX.Element} The ScanReport component.
  */
-export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
+export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.Element {
 	const baseView = {
 		search: '',
 		filters: [],
@@ -97,7 +98,6 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					return 'unchecked';
 				},
 				render( { item }: { item: ScanReportExtension } ) {
-					const hasStatus = item.threats.some( threat => threat.status !== null );
 					let variant: 'info' | 'warning' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
@@ -107,12 +107,12 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = hasStatus
+							text = hasPlan
 								? __( 'Threats detected.', 'jetpack-components' )
 								: __( 'Vulnerabilities detected.', 'jetpack-components' );
 						} else {
 							variant = 'success';
-							text = hasStatus
+							text = hasPlan
 								? __( 'No known threats found that affect this version.', 'jetpack-components' )
 								: __(
 										'No known vulnerabilities found that affect this version.',
@@ -174,7 +174,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		];
 
 		return result;
-	}, [ view ] );
+	}, [ view, hasPlan ] );
 
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index 63926908850de..1970bac81f013 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -20,6 +20,7 @@ export default {
 
 export const Default = args => <ScanReport { ...args } />;
 Default.args = {
+	hasPlan: true,
 	data: [
 		{
 			id: 1,
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 41f38e3e5b7ad..366555bffc5f9 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,6 +1,7 @@
 import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
+import usePlan from '../../hooks/use-plan';
 import HomeAdminSectionHero from './home-admin-section-hero';
 
 /**
@@ -11,6 +12,7 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
+	const { hasPlan } = usePlan();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 	const { core, plugins, themes, files } = status;
 
@@ -29,7 +31,7 @@ const HomePage = () => {
 			<AdminSection>
 				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
 					<Col>
-						<ScanReport data={ data } />
+						<ScanReport hasPlan={ hasPlan } data={ data } />
 					</Col>
 				</Container>
 			</AdminSection>

From 62dff2ed208005a4aeeb7e3d48c6f28fb6ecda0c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 9 Dec 2024 15:01:47 -0800
Subject: [PATCH 134/143] Don't use ternaries for translation strings

---
 .../components/scan-report/index.tsx          | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index a4c48bc264a76..4bc88b03965c1 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -107,17 +107,24 @@ export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = hasPlan
-								? __( 'Threats detected.', 'jetpack-components' )
-								: __( 'Vulnerabilities detected.', 'jetpack-components' );
+							text = __( 'Vulnerabilities detected.', 'jetpack-components' );
+
+							if ( hasPlan ) {
+								text = __( 'Threats detected.', 'jetpack-components' );
+							}
 						} else {
 							variant = 'success';
-							text = hasPlan
-								? __( 'No known threats found that affect this version.', 'jetpack-components' )
-								: __(
-										'No known vulnerabilities found that affect this version.',
-										'jetpack-components'
-								  );
+							text = __(
+								'No known vulnerabilities found that affect this version.',
+								'jetpack-components'
+							);
+
+							if ( hasPlan ) {
+								text = __(
+									'No known threats found that affect this version.',
+									'jetpack-components'
+								);
+							}
 						}
 					}
 

From 3af206ab42d0bd63660cee227e08385d11b6a506 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 13:41:28 -0800
Subject: [PATCH 135/143] Remove extra changelog

---
 projects/js-packages/components/changelog/add-protect-home | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 projects/js-packages/components/changelog/add-protect-home

diff --git a/projects/js-packages/components/changelog/add-protect-home b/projects/js-packages/components/changelog/add-protect-home
deleted file mode 100644
index bbbcfa9454e78..0000000000000
--- a/projects/js-packages/components/changelog/add-protect-home
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: added
-
-Adds hideValue flag to StatCard

From 649f57cd4a53f70359a4dd3b8455e2bb10a8e7f7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 13:46:51 -0800
Subject: [PATCH 136/143] Reapply changelog

---
 projects/plugins/protect/changelog/prerelease#9 | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/protect/changelog/prerelease#9

diff --git a/projects/plugins/protect/changelog/prerelease#9 b/projects/plugins/protect/changelog/prerelease#9
new file mode 100644
index 0000000000000..3415d4df7dd84
--- /dev/null
+++ b/projects/plugins/protect/changelog/prerelease#9
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+

From d948ca9ae478020854f51763ed5670f71841e96c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 13:49:11 -0800
Subject: [PATCH 137/143] Add unknown to threat types constant

---
 .../components/components/threats-data-views/constants.ts        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/js-packages/components/components/threats-data-views/constants.ts b/projects/js-packages/components/components/threats-data-views/constants.ts
index 59b79a7618453..84c7c5cf7b0cd 100644
--- a/projects/js-packages/components/components/threats-data-views/constants.ts
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -19,6 +19,7 @@ export const THREAT_TYPES = [
 	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
 	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
 	{ value: 'file', label: __( 'File', 'jetpack-components' ) },
+	{ value: '', label: __( 'Unknown', 'jetpack-components' ) },
 ];
 
 export const THREAT_ICONS = {

From d5ad64025a67e6120189eace48a64727702d527c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 13:51:40 -0800
Subject: [PATCH 138/143] Fix

---
 projects/plugins/protect/changelog/prerelease#9 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/plugins/protect/changelog/prerelease#9 b/projects/plugins/protect/changelog/prerelease#9
index 3415d4df7dd84..9aa70e3ec1f75 100644
--- a/projects/plugins/protect/changelog/prerelease#9
+++ b/projects/plugins/protect/changelog/prerelease#9
@@ -2,3 +2,4 @@ Significance: patch
 Type: changed
 Comment: Updated composer.lock.
 
+

From f3f96f5867a9ede43f7c15b4add1b643762d49bd Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 14:19:58 -0800
Subject: [PATCH 139/143] Use dataSource over hasPlan

---
 .../components/components/scan-report/index.tsx       | 11 ++++++-----
 .../components/scan-report/stories/index.stories.tsx  |  2 +-
 projects/plugins/protect/src/js/routes/home/index.jsx |  4 +---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 4bc88b03965c1..2e8d75c84fe52 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -27,13 +27,13 @@ import styles from './styles.module.scss';
  * DataViews component for displaying a scan report.
  *
  * @param {object}   props                   - Component props.
- * @param {boolean}  props.hasPlan           - Whether the user has a plan.
+ * @param {string}   props.dataSource        - Data source.
  * @param {Array}    props.data              - Scan report data.
  * @param {Function} props.onChangeSelection - Callback function run when an item is selected.
  *
  * @return {JSX.Element} The ScanReport component.
  */
-export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.Element {
+export default function ScanReport( { dataSource, data, onChangeSelection } ): JSX.Element {
 	const baseView = {
 		search: '',
 		filters: [],
@@ -98,6 +98,7 @@ export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.
 					return 'unchecked';
 				},
 				render( { item }: { item: ScanReportExtension } ) {
+					const scanApi = 'scan_api' === dataSource;
 					let variant: 'info' | 'warning' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
@@ -109,7 +110,7 @@ export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.
 							variant = 'warning';
 							text = __( 'Vulnerabilities detected.', 'jetpack-components' );
 
-							if ( hasPlan ) {
+							if ( scanApi ) {
 								text = __( 'Threats detected.', 'jetpack-components' );
 							}
 						} else {
@@ -119,7 +120,7 @@ export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.
 								'jetpack-components'
 							);
 
-							if ( hasPlan ) {
+							if ( scanApi ) {
 								text = __(
 									'No known threats found that affect this version.',
 									'jetpack-components'
@@ -181,7 +182,7 @@ export default function ScanReport( { hasPlan, data, onChangeSelection } ): JSX.
 		];
 
 		return result;
-	}, [ view, hasPlan ] );
+	}, [ view, dataSource ] );
 
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index 1970bac81f013..838a8b71de232 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -20,7 +20,7 @@ export default {
 
 export const Default = args => <ScanReport { ...args } />;
 Default.args = {
-	hasPlan: true,
+	dataSource: 'scan_api',
 	data: [
 		{
 			id: 1,
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 366555bffc5f9..b7c1986b324ec 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,7 +1,6 @@
 import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
-import usePlan from '../../hooks/use-plan';
 import HomeAdminSectionHero from './home-admin-section-hero';
 
 /**
@@ -12,7 +11,6 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
-	const { hasPlan } = usePlan();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 	const { core, plugins, themes, files } = status;
 
@@ -31,7 +29,7 @@ const HomePage = () => {
 			<AdminSection>
 				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
 					<Col>
-						<ScanReport hasPlan={ hasPlan } data={ data } />
+						<ScanReport dataSource={ status.dataSource } data={ data } />
 					</Col>
 				</Container>
 			</AdminSection>

From a30c28d6d4a9a7eb430a97f82973c9d12f61110c Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 14:22:37 -0800
Subject: [PATCH 140/143] Use _n for plural translations

---
 .../components/components/scan-report/index.tsx  | 16 +++++++++++++---
 .../scan-report/stories/index.stories.tsx        |  6 ++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 2e8d75c84fe52..08efed8c12af4 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -7,7 +7,7 @@ import {
 	DataViews,
 	filterSortAndPaginate,
 } from '@wordpress/dataviews';
-import { __ } from '@wordpress/i18n';
+import { __, _n } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import ShieldIcon from '../shield-icon';
@@ -108,10 +108,20 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = __( 'Vulnerabilities detected.', 'jetpack-components' );
+							text = _n(
+								'Vulnerability detected.',
+								'Vulnerabilities detected.',
+								item.threats.length,
+								'jetpack-components'
+							);
 
 							if ( scanApi ) {
-								text = __( 'Threats detected.', 'jetpack-components' );
+								text = _n(
+									'Threat detected.',
+									'Threats detected.',
+									item.threats.length,
+									'jetpack-components'
+								);
 							}
 						} else {
 							variant = 'success';
diff --git a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
index 838a8b71de232..eebcbc428fb39 100644
--- a/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/scan-report/stories/index.stories.tsx
@@ -65,6 +65,12 @@ Default.args = {
 					title: 'Malicious code found in file: jptt_eicar.php',
 					severity: 1,
 				},
+				{
+					id: 198352407,
+					signature: 'EICAR_AV_Test_Suspicious',
+					title: 'Malicious code found in file: jptt_eicar.php',
+					severity: 1,
+				},
 			],
 			checked: true,
 			type: 'files',

From a3b254165d33fd055876f6a8bcdfd0a89c98ab29 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 10 Dec 2024 14:44:18 -0800
Subject: [PATCH 141/143] Add dummy arg for translation to fix build errors

---
 .../protect/src/js/routes/home/home-admin-section-hero.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
index 12d887e933f43..d695f05eea9cc 100644
--- a/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -29,7 +29,8 @@ const HomeAdminSectionHero: React.FC = () => {
 							  )
 							: __(
 									'We stay ahead of security vulnerabilities to keep your site protected.',
-									'jetpack-protect'
+									'jetpack-protect',
+									/* dummy arg to avoid bad minification */ 0
 							  ) }
 					</Text>
 					<Button

From de776fa61377be3bd6f6e171cfab23c9ca9643c1 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 11 Dec 2024 09:57:48 -0800
Subject: [PATCH 142/143] Disable version sorting

---
 projects/js-packages/components/components/scan-report/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 08efed8c12af4..4600ecf98d9db 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -164,6 +164,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 			{
 				id: FIELD_VERSION,
 				label: __( 'Version', 'jetpack-components' ),
+				enableSorting: false,
 				enableGlobalSearch: true,
 				getValue( { item }: { item: ScanReportExtension } ) {
 					return item.version ? item.version : '';

From 113a25b319312fb539d2e7bfb2055c385c8818f7 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 11 Dec 2024 10:07:49 -0800
Subject: [PATCH 143/143] Update HomePage container styling to match ScanPage

---
 .../plugins/protect/src/js/routes/home/index.jsx     |  7 ++++++-
 .../protect/src/js/routes/home/styles.module.scss    | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index b7c1986b324ec..cc188fa134e6e 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -2,6 +2,7 @@ import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-co
 import AdminPage from '../../components/admin-page';
 import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import HomeAdminSectionHero from './home-admin-section-hero';
+import styles from './styles.module.scss';
 
 /**
  * Home Page
@@ -27,7 +28,11 @@ const HomePage = () => {
 		<AdminPage>
 			<HomeAdminSectionHero />
 			<AdminSection>
-				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
+				<Container
+					className={ styles[ 'scan-report-container' ] }
+					horizontalSpacing={ 5 }
+					horizontalGap={ 4 }
+				>
 					<Col>
 						<ScanReport dataSource={ status.dataSource } data={ data } />
 					</Col>
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 525c531ef49ba..1f6e199cdd420 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -1,6 +1,12 @@
-.product-section, .info-section {
-	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
-	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+.scan-report-container {
+	padding-left: 0;
+	padding-right: 0;
+	overflow: hidden;
+
+	> * {
+		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
+		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
+	}
 }
 
 .view-scan-report {