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


From be99f508195a44304f555773f6b56dd010d4b563 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 02/32] 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 8dd5ddec04819c96590e145137c42fbeb15f20c4 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 03/32] 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 90d6898a482356b03a112beb4164a45ae3c76e9b 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 04/32] 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 dd219135b600bb73dda0fe90e6122dbfdcb79e45 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 05/32] 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 19c083e928a402064ebafeab11ead2bea81b7d3f 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 06/32] 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 08cdcb26c40d063df52faf508817eb060a0ff43a 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 07/32] 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 57a36196e0416..01b39d0c6f7f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4220,6 +4220,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 1468fb40ba8cf..0dfd22468079e 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';
@@ -576,7 +575,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 0a9047edfb0d1311d51a71e32c08942fa075b0a7 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 08/32] 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 aa9b8a3e0584f26fcf0c52ef54ec8d6deea5c819 Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 6 Dec 2024 12:05:11 -0700
Subject: [PATCH 09/32] 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 08d8de31d17b6696d8a2abad56561ef5ac23ff86 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 9 Dec 2024 14:38:56 -0700
Subject: [PATCH 10/32] Protect: Refactor AdminSectionHero (#40516)

---
 .../components/admin-section-hero/index.tsx   |  96 +++++-----
 .../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  |  27 ++-
 .../js/routes/firewall/firewall-statcards.jsx |   2 +-
 .../src/js/routes/firewall/styles.module.scss |  31 ++-
 .../routes/scan/scan-admin-section-hero.tsx   | 177 +++++++++---------
 .../scan/scanning-admin-section-hero.tsx      |  70 ++++---
 .../src/js/routes/scan/styles.module.scss     |  10 +
 11 files changed, 278 insertions(+), 231 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 5ccf607698084..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
@@ -2,67 +2,73 @@ 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,
+	className,
+	...props
+}: React.ComponentProps< 'div' > & {
+	className?: string;
 } ) => {
 	return (
-		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
+		<div className={ clsx( styles[ 'admin-section-hero__aside' ], className ) } { ...props }>
 			{ children }
-			{ showIcon && (
+		</div>
+	);
+};
+
+AdminSectionHero.Heading = ( {
+	children,
+	icon,
+	...props
+}: React.ComponentProps< typeof H3 > & {
+	icon?: 'default' | 'success' | 'error';
+} ) => {
+	return (
+		<H3 mb={ 1 } { ...props }>
+			{ children }
+			{ !! icon && (
 				<ShieldIcon
 					height={ 38 }
-					variant={ variant }
+					variant={ icon }
 					outline
 					fill="default"
 					className={ styles[ 'heading-icon' ] }
@@ -72,8 +78,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..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 {
@@ -84,16 +85,22 @@ 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 }
+					className={ styles.status }
+				/>
+				<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 afcbc2ad69b30..9404db7b56f09 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;
 
@@ -145,14 +149,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;
@@ -220,6 +220,23 @@
     background-color: var( --jp-white-off );
 }
 
+@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;
+    }
+}
+
 .standalone-mode, .share-data {
     display: flex;
     flex-direction: column;
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..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
@@ -59,6 +59,28 @@ 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 */
+				_n( '%1$s active threat', '%1$s active threats', numThreats, 'jetpack-protect' ),
+				numThreats
+			);
+		} else {
+			heading = sprintf(
+				/* translators: %s: Total number of vulnerabilities */
+				_n(
+					'%1$s active vulnerability',
+					'%1$s active vulnerabilities',
+					numThreats,
+					'jetpack-protect'
+				),
+				numThreats
+			);
+		}
+	}
+
 	const handleShowAutoFixersClick = threatList => {
 		return event => {
 			event.preventDefault();
@@ -84,94 +106,79 @@ 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' }>
+					{ heading }
+				</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..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
@@ -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 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 163fd23248aaa..5806ca5353863 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
 }
@@ -12,3 +16,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.progress-animation {
+	@media (max-width: 1099px) {
+		display: none;
+	}
+}

From b33c95abd805c1b3797b3bd0058269303ad91bfa Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:04:08 -0800
Subject: [PATCH 11/32] Protect: Update Scan History extension types (#40548)

---
 .../protect/src/class-scan-history.php        |  4 +++
 .../js/routes/firewall/firewall-footer.jsx    |  2 --
 .../src/js/routes/firewall/styles.module.scss | 30 -------------------
 3 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php
index 8ea1dec7156e7..23019ccd634ad 100644
--- a/projects/plugins/protect/src/class-scan-history.php
+++ b/projects/plugins/protect/src/class-scan-history.php
@@ -219,6 +219,10 @@ private static function normalize_api_data( $scan_data ) {
 		}
 
 		foreach ( $scan_data->threats as $source_threat ) {
+			if ( ! empty( $source_threat->extension ) && in_array( $source_threat->extension->type, array( 'plugin', 'theme' ), true ) ) {
+				$source_threat->extension->type .= 's';
+			}
+
 			$history->threats[] = new Threat_Model( $source_threat );
 		}
 
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 0e28d7bae7c98..0c175b1cd651f 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -69,7 +69,6 @@ const ShareData = () => {
 		<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 }
@@ -81,7 +80,6 @@ const ShareData = () => {
 				) }
 			/>
 			<ToggleControl
-				className={ styles[ 'share-data-toggle' ] }
 				checked={ !! jetpackWafShareDebugData }
 				onChange={ handleShareDebugDataChange }
 				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 9404db7b56f09..3034aba82feb1 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -171,36 +171,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;
-    }
-}
-
-.share-data-section {
-    display: flex;
-
-    .share-data-toggle {
-        margin-top: calc( var( --spacing-base ) / 2 ); // 4px
-        margin-right: var( --spacing-base ); // 8px
-    }
-}
-
 .icon-tooltip {
     max-height: 20px;
     margin-left: calc( var( --spacing-base ) / 2 ); // 4px

From e13aa74c9969d0f59086b23357aba4f667ca28a9 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:25:25 -0800
Subject: [PATCH 12/32] Protect: Add Home page (#40317)

* Init project branch

* Protect: Add Go to Cloud and Scan now button to Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>

* 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>

* Protect: de-emphasize cloud link by using link variant (#40211)

* Protect: add ShieldIcon component

* Protect: Add ShieldIcon Component (#40402)

* Protect: Integrate ThreatsDataViews Component (#40076)

* Components: Add ScanReport (#40419)

* Fix type errors

* Protect: add home page

---------

Co-authored-by: Nate Weller <hello@nateweller.com>
Co-authored-by: Nate Weller <nate.weller@automattic.com>
Co-authored-by: Dean Kmyta <dkmyta@automattic.com>
---
 .../add-hide-value-prop-to-stat-card          |   4 +
 .../components/components/stat-card/index.tsx |  13 +-
 .../components/components/stat-card/types.ts  |   5 +
 .../protect/changelog/add-protect-home        |   4 +
 .../protect/src/class-jetpack-protect.php     |   3 +-
 .../src/js/components/admin-page/index.jsx    |   1 +
 .../src/js/components/pricing-table/index.jsx |   2 +-
 .../components/seventy-five-layout/index.tsx  |  73 -----
 .../seventy-five-layout/styles.module.scss    |  13 -
 .../plugins/protect/src/js/hooks/use-plan.tsx |   2 +-
 projects/plugins/protect/src/js/index.tsx     |   4 +-
 .../routes/home/home-admin-section-hero.tsx   |  50 ++++
 .../src/js/routes/home/home-statcards.jsx     | 274 ++++++++++++++++++
 .../protect/src/js/routes/home/index.jsx      |  25 ++
 .../src/js/routes/home/styles.module.scss     |  69 +++++
 15 files changed, 449 insertions(+), 93 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
 create mode 100644 projects/plugins/protect/changelog/add-protect-home
 delete mode 100644 projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
 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/changelog/add-hide-value-prop-to-stat-card b/projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
new file mode 100644
index 0000000000000..0d4002c768dd8
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Stat Card: add hideValue prop
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/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/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
deleted file mode 100644
index 19ee4309e55a5..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, isLarge ] = 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>
-					{ isLarge && <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/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/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..12d887e933f43
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -0,0 +1,50 @@
+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 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>
+			<AdminSectionHero.Main>
+				<>
+					<AdminSectionHero.Heading>
+						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
+					</AdminSectionHero.Heading>
+					<Text>
+						{ hasPlan
+							? __(
+									'We stay ahead of security threats to keep your site protected.',
+									'jetpack-protect'
+							  )
+							: __(
+									'We stay ahead of security vulnerabilities to keep your site protected.',
+									'jetpack-protect'
+							  ) }
+					</Text>
+					<Button
+						className={ styles[ 'view-scan-report' ] }
+						variant="primary"
+						weight="regular"
+						onClick={ handleScanReportClick }
+					>
+						{ __( 'View scan report', 'jetpack-protect' ) }
+					</Button>
+				</>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>{ <HomeStatCards /> }</AdminSectionHero.Aside>
+		</AdminSectionHero>
+	);
+};
+
+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..b99bead52dbdb
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -0,0 +1,69 @@
+.product-section, .info-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.view-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: 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 322819d1756fe6ff5702635d347ed14fdb43d298 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:17:14 -0800
Subject: [PATCH 13/32] Protect: Integrate ScanReport (#40420)

---
 .../components/scan-report/constants.ts       |  6 +++
 .../components/scan-report/index.tsx          | 48 +++++++++++++++++--
 .../scan-report/stories/index.stories.tsx     |  7 +++
 .../threats-data-views/constants.ts           |  1 +
 .../components/threats-data-views/index.tsx   | 13 +----
 .../update-protect-add-scan-report-to-home    |  4 ++
 .../firewall/firewall-admin-section-hero.tsx  |  4 +-
 .../js/routes/firewall/firewall-statcards.jsx | 22 ++++-----
 .../routes/home/home-admin-section-hero.tsx   |  3 +-
 .../protect/src/js/routes/home/index.jsx      | 26 ++++++++--
 .../src/js/routes/home/styles.module.scss     | 13 +++--
 11 files changed, 106 insertions(+), 41 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-add-scan-report-to-home

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 436eed91c5701..6a10d008b876f 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -7,6 +7,12 @@ import {
 	wordpress as coreIcon,
 } from '@wordpress/icons';
 
+export const STATUS_TYPES = [
+	{ value: 'checked', label: __( 'Checked', 'jetpack-components' ) },
+	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-components' ) },
+	{ value: 'threat', label: __( 'Threat', 'jetpack-components' ) },
+];
+
 export const TYPES = [
 	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
 	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 14795376f7d95..4600ecf98d9db 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';
@@ -17,6 +17,7 @@ import {
 	FIELD_ICON,
 	FIELD_STATUS,
 	FIELD_TYPE,
+	STATUS_TYPES,
 	TYPES,
 	ICONS,
 } from './constants';
@@ -26,12 +27,13 @@ import styles from './styles.module.scss';
  * DataViews component for displaying a scan report.
  *
  * @param {object}   props                   - Component props.
+ * @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( { data, onChangeSelection } ): JSX.Element {
+export default function ScanReport( { dataSource, data, onChangeSelection } ): JSX.Element {
 	const baseView = {
 		search: '',
 		filters: [],
@@ -84,8 +86,19 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		const result: Field< ScanReportExtension >[] = [
 			{
 				id: FIELD_STATUS,
+				elements: STATUS_TYPES,
 				label: __( 'Status', 'jetpack-components' ),
+				getValue( { item } ) {
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							return 'threat';
+						}
+						return 'checked';
+					}
+					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.',
@@ -95,10 +108,34 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = __( 'Threat detected.', 'jetpack-components' );
+							text = _n(
+								'Vulnerability detected.',
+								'Vulnerabilities detected.',
+								item.threats.length,
+								'jetpack-components'
+							);
+
+							if ( scanApi ) {
+								text = _n(
+									'Threat detected.',
+									'Threats detected.',
+									item.threats.length,
+									'jetpack-components'
+								);
+							}
 						} else {
 							variant = 'success';
-							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+							text = __(
+								'No known vulnerabilities found that affect this version.',
+								'jetpack-components'
+							);
+
+							if ( scanApi ) {
+								text = __(
+									'No known threats found that affect this version.',
+									'jetpack-components'
+								);
+							}
 						}
 					}
 
@@ -127,6 +164,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			{
 				id: FIELD_VERSION,
 				label: __( 'Version', 'jetpack-components' ),
+				enableSorting: false,
 				enableGlobalSearch: true,
 				getValue( { item }: { item: ScanReportExtension } ) {
 					return item.version ? item.version : '';
@@ -155,7 +193,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		];
 
 		return result;
-	}, [ view ] );
+	}, [ 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 63926908850de..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
@@ -20,6 +20,7 @@ export default {
 
 export const Default = args => <ScanReport { ...args } />;
 Default.args = {
+	dataSource: 'scan_api',
 	data: [
 		{
 			id: 1,
@@ -64,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',
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 = {
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..0d81b8995060e 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -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 ) ?? '';
 				},
 			},
 			{
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
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 837f649c67f16..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
@@ -88,12 +88,12 @@ const FirewallAdminSectionHero = () => {
 		<AdminSectionHero>
 			<AdminSectionHero.Main>
 				<Status
+					className={ styles.status }
 					status={ 'on' === status ? 'active' : 'inactive' }
 					label={ statusLabel }
-					className={ styles.status }
 				/>
 				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
-				<Text>{ subheading }</Text>
+				{ subheading }
 			</AdminSectionHero.Main>
 			{ wafSupported && (
 				<AdminSectionHero.Aside>
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 1eebd67cb60d7..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,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-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
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 718349caaac3f..cc188fa134e6e 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,6 +1,8 @@
-import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+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 HomeAdminSectionHero from './home-admin-section-hero';
+import styles from './styles.module.scss';
 
 /**
  * Home Page
@@ -10,12 +12,30 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
+	const { data: status } = useScanStatusQuery( { usePolling: true } );
+	const { core, plugins, themes, files } = status;
+
+	const data = [
+		core,
+		...plugins,
+		...themes,
+		{ checked: true, threats: files, type: 'files' },
+	].map( ( item, index ) => {
+		return { id: index + 1, ...item };
+	} );
+
 	return (
 		<AdminPage>
 			<HomeAdminSectionHero />
 			<AdminSection>
-				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-					<Col>{ /* TODO: Add ScanReport component here */ }</Col>
+				<Container
+					className={ styles[ 'scan-report-container' ] }
+					horizontalSpacing={ 5 }
+					horizontalGap={ 4 }
+				>
+					<Col>
+						<ScanReport dataSource={ status.dataSource } data={ data } />
+					</Col>
 				</Container>
 			</AdminSection>
 		</AdminPage>
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 b99bead52dbdb..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 {
@@ -56,7 +62,6 @@
 	text-align: left;
 }
 
-
 @media ( max-width: 599px ) {
     .stat-cards-wrapper {
         flex-direction: column;

From b3976569551fde07718a67fc717b9f55832d2094 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Wed, 11 Dec 2024 15:16:26 -0800
Subject: [PATCH 14/32] Add custom field set when viewing historic threats

---
 .../threats-data-views/constants.ts           | 26 ++++-
 .../components/threats-data-views/index.tsx   | 95 ++++++++++++++++---
 .../threats-status-toggle-group-control.tsx   | 32 +------
 3 files changed, 108 insertions(+), 45 deletions(-)

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 84c7c5cf7b0cd..1eeb816a8dc0c 100644
--- a/projects/js-packages/components/components/threats-data-views/constants.ts
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -23,8 +23,8 @@ export const THREAT_TYPES = [
 ];
 
 export const THREAT_ICONS = {
-	plugin: pluginIcon,
-	theme: themeIcon,
+	plugins: pluginIcon,
+	themes: themeIcon,
 	core: coreIcon,
 	file: fileIcon,
 	default: shieldIcon,
@@ -45,6 +45,28 @@ 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 BASE_TABLE_FIELDS = [
+	THREAT_FIELD_SEVERITY,
+	THREAT_FIELD_THREAT,
+	THREAT_FIELD_TYPE,
+	THREAT_FIELD_STATUS,
+];
+
+export const DEFAULT_TABLE_FIELDS = [ ...BASE_TABLE_FIELDS, THREAT_FIELD_AUTO_FIX ];
+
+export const HISTORY_TABLE_FIELDS = [
+	...BASE_TABLE_FIELDS,
+	THREAT_FIELD_FIRST_DETECTED,
+	THREAT_FIELD_FIXED_ON,
+];
+
+export const DEFAULT_LIST_FIELDS = [
+	THREAT_FIELD_SEVERITY,
+	THREAT_FIELD_TYPE,
+	THREAT_FIELD_EXTENSION,
+	THREAT_FIELD_SIGNATURE,
+];
+
 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/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
index 0d81b8995060e..b6f71229f0f00 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -1,4 +1,9 @@
-import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import {
+	getThreatType,
+	getFixerAction,
+	type Threat,
+	type ThreatStatus,
+} from '@automattic/jetpack-scan';
 import {
 	type Action,
 	type ActionButton,
@@ -19,6 +24,9 @@ import Badge from '../badge';
 import ThreatFixerButton from '../threat-fixer-button';
 import ThreatSeverityBadge from '../threat-severity-badge';
 import {
+	DEFAULT_TABLE_FIELDS,
+	HISTORY_TABLE_FIELDS,
+	DEFAULT_LIST_FIELDS,
 	THREAT_ACTION_FIX,
 	THREAT_ACTION_IGNORE,
 	THREAT_ACTION_UNIGNORE,
@@ -101,12 +109,7 @@ export default function ThreatsDataViews( {
 	const defaultLayouts: SupportedLayouts = {
 		table: {
 			...baseView,
-			fields: [
-				THREAT_FIELD_SEVERITY,
-				THREAT_FIELD_THREAT,
-				THREAT_FIELD_TYPE,
-				THREAT_FIELD_AUTO_FIX,
-			],
+			fields: DEFAULT_TABLE_FIELDS,
 			layout: {
 				primaryField: THREAT_FIELD_SEVERITY,
 				combinedFields: [
@@ -121,12 +124,7 @@ export default function ThreatsDataViews( {
 		},
 		list: {
 			...baseView,
-			fields: [
-				THREAT_FIELD_SEVERITY,
-				THREAT_FIELD_TYPE,
-				THREAT_FIELD_EXTENSION,
-				THREAT_FIELD_SIGNATURE,
-			],
+			fields: DEFAULT_LIST_FIELDS,
 			layout: {
 				primaryField: THREAT_FIELD_TITLE,
 				mediaField: THREAT_FIELD_ICON,
@@ -256,6 +254,7 @@ export default function ThreatsDataViews( {
 			{
 				id: THREAT_FIELD_STATUS,
 				label: __( 'Status', 'jetpack-components' ),
+				enableHiding: false,
 				elements: THREAT_STATUSES,
 				getValue( { item }: { item: Threat } ) {
 					if ( ! item.status ) {
@@ -278,6 +277,7 @@ export default function ThreatsDataViews( {
 			{
 				id: THREAT_FIELD_TYPE,
 				label: __( 'Type', 'jetpack-components' ),
+				enableHiding: false,
 				elements: THREAT_TYPES,
 				getValue( { item }: { item: Threat } ) {
 					return getThreatType( item ) ?? '';
@@ -423,10 +423,12 @@ export default function ThreatsDataViews( {
 	const actions = useMemo( () => {
 		const result: Action< Threat >[] = [];
 
-		if ( dataFields.includes( 'fixable' ) ) {
+		if ( dataFields.includes( 'fixable' ) && view.type === 'list' ) {
 			result.push( {
 				id: THREAT_ACTION_FIX,
-				label: __( 'Auto-fix', 'jetpack-components' ),
+				label: items => {
+					return getFixerAction( items[ 0 ] );
+				},
 				isPrimary: true,
 				callback: onFixThreats,
 				isEligible( item ) {
@@ -481,6 +483,7 @@ export default function ThreatsDataViews( {
 
 		return result;
 	}, [
+		view.type,
 		dataFields,
 		onFixThreats,
 		onIgnoreThreats,
@@ -499,12 +502,73 @@ export default function ThreatsDataViews( {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ data, view, fields ] );
 
+	/**
+	 * Check if a status filter is selected.
+	 *
+	 * @param {Filter[]} currentFilters       - The current DataView filters.
+	 * @param {ThreatStatus[]} threatStatuses - The threat statuses to check against.
+	 *
+	 * @return {boolean} True if the status filter is selected, false otherwise.
+	 */
+	const isStatusFilterSelected = useCallback(
+		( currentFilters: Filter[], threatStatuses: ThreatStatus[] ) =>
+			currentFilters.some(
+				filter =>
+					filter.field === 'status' &&
+					Array.isArray( filter.value ) &&
+					filter.value.length === threatStatuses.length &&
+					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
+			),
+		[]
+	);
+
+	/**
+	 * Get the selected status filters.
+	 *
+	 * @param {Filter[]} currentFilters - The current DataView filters.
+	 *
+	 * @return {string|null} The selected status filter.
+	 */
+	const selectedStatusFilter = useCallback(
+		( currentFilters: Filter[] ) => {
+			if ( isStatusFilterSelected( currentFilters, [ 'current' ] ) ) {
+				return 'active' as const;
+			}
+			if ( isStatusFilterSelected( currentFilters, [ 'fixed', 'ignored' ] ) ) {
+				return 'historic' as const;
+			}
+			if ( isStatusFilterSelected( currentFilters, [ 'fixed' ] ) ) {
+				return 'fixed' as const;
+			}
+			if ( isStatusFilterSelected( currentFilters, [ 'ignored' ] ) ) {
+				return 'ignored' as const;
+			}
+
+			return null;
+		},
+		[ isStatusFilterSelected ]
+	);
+
 	/**
 	 * 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 ) => {
+		const statusFilters = selectedStatusFilter( newView.filters );
+
+		if ( newView.type === 'table' ) {
+			if ( statusFilters === 'active' ) {
+				newView.fields = DEFAULT_TABLE_FIELDS;
+			} else if (
+				statusFilters === 'historic' ||
+				statusFilters === 'fixed' ||
+				statusFilters === 'ignored'
+			) {
+				newView.fields = HISTORY_TABLE_FIELDS;
+			}
+		}
+
 		setView( newView );
 	}, [] );
 
@@ -530,6 +594,7 @@ export default function ThreatsDataViews( {
 				<ThreatsStatusToggleGroupControl
 					data={ data }
 					view={ view }
+					selectedValue={ selectedStatusFilter( view.filters ) }
 					onChangeView={ onChangeView }
 				/>
 			}
diff --git a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
index be7b252b80c22..abb9ed4e918e2 100644
--- a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
+++ b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -13,16 +13,19 @@ import styles from './styles.module.scss';
  * @param {object}     props              - Component props.
  * @param { Threat[]}  props.data         - Threats data.
  * @param { View }     props.view         - The current view.
+ * @param { string|null } props.selectedValue - The selected value.
  * @param { Function } props.onChangeView - Callback function to handle view changes.
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {
 	data,
 	view,
+	selectedValue,
 	onChangeView,
 }: {
 	data: Threat[];
 	view: View;
+	selectedValue: string | null;
 	onChangeView: ( newView: View ) => void;
 } ): JSX.Element {
 	/**
@@ -87,33 +90,6 @@ export default function ThreatsStatusToggleGroupControl( {
 		[ view, onChangeView ]
 	);
 
-	/**
-	 * Memoized function to determine if a status filter is selected.
-	 *
-	 * @param {Array} threatStatuses - List of threat statuses.
-	 */
-	const isStatusFilterSelected = useMemo(
-		() => ( threatStatuses: ThreatStatus[] ) =>
-			view.filters.some(
-				filter =>
-					filter.field === 'status' &&
-					Array.isArray( filter.value ) &&
-					filter.value.length === threatStatuses.length &&
-					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
-			),
-		[ view.filters ]
-	);
-
-	const selectedValue = useMemo( () => {
-		if ( isStatusFilterSelected( [ 'current' ] ) ) {
-			return 'active' as const;
-		}
-		if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) {
-			return 'historic' as const;
-		}
-		return '' as const;
-	}, [ isStatusFilterSelected ] );
-
 	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
 		return null;
 	}
@@ -123,7 +99,7 @@ export default function ThreatsStatusToggleGroupControl( {
 			<div>
 				<div className={ styles[ 'toggle-group-control' ] }>
 					<ToggleGroupControl
-						value={ selectedValue }
+						value={ [ 'active', 'historic' ].includes( selectedValue ) ? selectedValue : null }
 						onChange={ onStatusFilterChange }
 						isBlock
 						hideLabelFromVision

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


From 8a3dc9bed3ec2c3a02f810a250e413973f174f0f 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 16/32] 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 1c4ba1e2f5290c2eff578767193a1b8b468e0ebf 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 17/32] 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 ef21cc47cc3ae5c1ed4f4a921fc264a4aede3428 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 18/32] 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 2f37bfc8c8261a8112835591723b6074d3fb08de Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 29 Nov 2024 21:00:37 -0700
Subject: [PATCH 19/32] 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 ffdc98cfaefd2f9f538a70f08a2745da8302e1ac 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 20/32] 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 71384f1b4dd8c41d4a1eb19aafcd92ee99385d32 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 21/32] 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 4af216da4b55c..eab430f03f5b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4225,6 +4225,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 e408077e068bf..1751df7e06f5a 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 1468fb40ba8cf..0dfd22468079e 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';
@@ -576,7 +575,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 4fccd4cf8bf431b69463a120a4a05f169ce1bb87 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 22/32] 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 f172be7c5cf906dee6224c20285299d9715e768c Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Fri, 6 Dec 2024 12:05:11 -0700
Subject: [PATCH 23/32] 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 d25db574f852857c0ed734089c60b4132cb1c202 Mon Sep 17 00:00:00 2001
From: Nate Weller <nate.weller@automattic.com>
Date: Mon, 9 Dec 2024 14:38:56 -0700
Subject: [PATCH 24/32] Protect: Refactor AdminSectionHero (#40516)

---
 .../components/admin-section-hero/index.tsx   |  96 +++++-----
 .../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  |  27 ++-
 .../js/routes/firewall/firewall-statcards.jsx |   2 +-
 .../src/js/routes/firewall/styles.module.scss |  31 ++-
 .../routes/scan/scan-admin-section-hero.tsx   | 177 +++++++++---------
 .../scan/scanning-admin-section-hero.tsx      |  70 ++++---
 .../src/js/routes/scan/styles.module.scss     |  10 +
 11 files changed, 278 insertions(+), 231 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 5ccf607698084..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
@@ -2,67 +2,73 @@ 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,
+	className,
+	...props
+}: React.ComponentProps< 'div' > & {
+	className?: string;
 } ) => {
 	return (
-		<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
+		<div className={ clsx( styles[ 'admin-section-hero__aside' ], className ) } { ...props }>
 			{ children }
-			{ showIcon && (
+		</div>
+	);
+};
+
+AdminSectionHero.Heading = ( {
+	children,
+	icon,
+	...props
+}: React.ComponentProps< typeof H3 > & {
+	icon?: 'default' | 'success' | 'error';
+} ) => {
+	return (
+		<H3 mb={ 1 } { ...props }>
+			{ children }
+			{ !! icon && (
 				<ShieldIcon
 					height={ 38 }
-					variant={ variant }
+					variant={ icon }
 					outline
 					fill="default"
 					className={ styles[ 'heading-icon' ] }
@@ -72,8 +78,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..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 {
@@ -84,16 +85,22 @@ 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 }
+					className={ styles.status }
+				/>
+				<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 afcbc2ad69b30..9404db7b56f09 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;
 
@@ -145,14 +149,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;
@@ -220,6 +220,23 @@
     background-color: var( --jp-white-off );
 }
 
+@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;
+    }
+}
+
 .standalone-mode, .share-data {
     display: flex;
     flex-direction: column;
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..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
@@ -59,6 +59,28 @@ 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 */
+				_n( '%1$s active threat', '%1$s active threats', numThreats, 'jetpack-protect' ),
+				numThreats
+			);
+		} else {
+			heading = sprintf(
+				/* translators: %s: Total number of vulnerabilities */
+				_n(
+					'%1$s active vulnerability',
+					'%1$s active vulnerabilities',
+					numThreats,
+					'jetpack-protect'
+				),
+				numThreats
+			);
+		}
+	}
+
 	const handleShowAutoFixersClick = threatList => {
 		return event => {
 			event.preventDefault();
@@ -84,94 +106,79 @@ 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' }>
+					{ heading }
+				</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..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
@@ -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 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 163fd23248aaa..5806ca5353863 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
 }
@@ -12,3 +16,9 @@
 		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
 	}
 }
+
+.progress-animation {
+	@media (max-width: 1099px) {
+		display: none;
+	}
+}

From e86cfe1552d34e8af3143c315fee3bc0fbf52a3a Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:04:08 -0800
Subject: [PATCH 25/32] Protect: Update Scan History extension types (#40548)

---
 .../protect/src/class-scan-history.php        |  4 +++
 .../js/routes/firewall/firewall-footer.jsx    |  2 --
 .../src/js/routes/firewall/styles.module.scss | 30 -------------------
 3 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php
index 8ea1dec7156e7..23019ccd634ad 100644
--- a/projects/plugins/protect/src/class-scan-history.php
+++ b/projects/plugins/protect/src/class-scan-history.php
@@ -219,6 +219,10 @@ private static function normalize_api_data( $scan_data ) {
 		}
 
 		foreach ( $scan_data->threats as $source_threat ) {
+			if ( ! empty( $source_threat->extension ) && in_array( $source_threat->extension->type, array( 'plugin', 'theme' ), true ) ) {
+				$source_threat->extension->type .= 's';
+			}
+
 			$history->threats[] = new Threat_Model( $source_threat );
 		}
 
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 0e28d7bae7c98..0c175b1cd651f 100644
--- a/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
+++ b/projects/plugins/protect/src/js/routes/firewall/firewall-footer.jsx
@@ -69,7 +69,6 @@ const ShareData = () => {
 		<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 }
@@ -81,7 +80,6 @@ const ShareData = () => {
 				) }
 			/>
 			<ToggleControl
-				className={ styles[ 'share-data-toggle' ] }
 				checked={ !! jetpackWafShareDebugData }
 				onChange={ handleShareDebugDataChange }
 				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 9404db7b56f09..3034aba82feb1 100644
--- a/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/firewall/styles.module.scss
@@ -171,36 +171,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;
-    }
-}
-
-.share-data-section {
-    display: flex;
-
-    .share-data-toggle {
-        margin-top: calc( var( --spacing-base ) / 2 ); // 4px
-        margin-right: var( --spacing-base ); // 8px
-    }
-}
-
 .icon-tooltip {
     max-height: 20px;
     margin-left: calc( var( --spacing-base ) / 2 ); // 4px

From 08d2ba17f58805f9180194ed1c55bed6be8c64e5 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:25:25 -0800
Subject: [PATCH 26/32] Protect: Add Home page (#40317)

* Init project branch

* Protect: Add Go to Cloud and Scan now button to Protect primary header (#40057)

Co-authored-by: Nate Weller <hello@nateweller.com>

* 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>

* Protect: de-emphasize cloud link by using link variant (#40211)

* Protect: add ShieldIcon component

* Protect: Add ShieldIcon Component (#40402)

* Protect: Integrate ThreatsDataViews Component (#40076)

* Components: Add ScanReport (#40419)

* Fix type errors

* Protect: add home page

---------

Co-authored-by: Nate Weller <hello@nateweller.com>
Co-authored-by: Nate Weller <nate.weller@automattic.com>
Co-authored-by: Dean Kmyta <dkmyta@automattic.com>
---
 .../add-hide-value-prop-to-stat-card          |   4 +
 .../components/components/stat-card/index.tsx |  13 +-
 .../components/components/stat-card/types.ts  |   5 +
 .../protect/changelog/add-protect-home        |   4 +
 .../protect/src/class-jetpack-protect.php     |   3 +-
 .../src/js/components/admin-page/index.jsx    |   1 +
 .../src/js/components/pricing-table/index.jsx |   2 +-
 .../components/seventy-five-layout/index.tsx  |  73 -----
 .../seventy-five-layout/styles.module.scss    |  13 -
 .../plugins/protect/src/js/hooks/use-plan.tsx |   2 +-
 projects/plugins/protect/src/js/index.tsx     |   4 +-
 .../routes/home/home-admin-section-hero.tsx   |  50 ++++
 .../src/js/routes/home/home-statcards.jsx     | 274 ++++++++++++++++++
 .../protect/src/js/routes/home/index.jsx      |  25 ++
 .../src/js/routes/home/styles.module.scss     |  69 +++++
 15 files changed, 449 insertions(+), 93 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
 create mode 100644 projects/plugins/protect/changelog/add-protect-home
 delete mode 100644 projects/plugins/protect/src/js/components/seventy-five-layout/index.tsx
 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/changelog/add-hide-value-prop-to-stat-card b/projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
new file mode 100644
index 0000000000000..0d4002c768dd8
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-hide-value-prop-to-stat-card
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Stat Card: add hideValue prop
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/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/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
deleted file mode 100644
index 19ee4309e55a5..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, isLarge ] = 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>
-					{ isLarge && <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/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/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..12d887e933f43
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx
@@ -0,0 +1,50 @@
+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 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>
+			<AdminSectionHero.Main>
+				<>
+					<AdminSectionHero.Heading>
+						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
+					</AdminSectionHero.Heading>
+					<Text>
+						{ hasPlan
+							? __(
+									'We stay ahead of security threats to keep your site protected.',
+									'jetpack-protect'
+							  )
+							: __(
+									'We stay ahead of security vulnerabilities to keep your site protected.',
+									'jetpack-protect'
+							  ) }
+					</Text>
+					<Button
+						className={ styles[ 'view-scan-report' ] }
+						variant="primary"
+						weight="regular"
+						onClick={ handleScanReportClick }
+					>
+						{ __( 'View scan report', 'jetpack-protect' ) }
+					</Button>
+				</>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>{ <HomeStatCards /> }</AdminSectionHero.Aside>
+		</AdminSectionHero>
+	);
+};
+
+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..b99bead52dbdb
--- /dev/null
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -0,0 +1,69 @@
+.product-section, .info-section {
+	margin-top: calc( var( --spacing-base ) * 7 ); // 56px
+	margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
+}
+
+.view-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: 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 48fba204645c558ccb90cec9aa8d8b2aa06f8812 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:17:14 -0800
Subject: [PATCH 27/32] Protect: Integrate ScanReport (#40420)

---
 .../components/scan-report/constants.ts       |  6 +++
 .../components/scan-report/index.tsx          | 48 +++++++++++++++++--
 .../scan-report/stories/index.stories.tsx     |  7 +++
 .../threats-data-views/constants.ts           |  1 +
 .../components/threats-data-views/index.tsx   | 13 +----
 .../update-protect-add-scan-report-to-home    |  4 ++
 .../firewall/firewall-admin-section-hero.tsx  |  4 +-
 .../js/routes/firewall/firewall-statcards.jsx | 22 ++++-----
 .../routes/home/home-admin-section-hero.tsx   |  3 +-
 .../protect/src/js/routes/home/index.jsx      | 26 ++++++++--
 .../src/js/routes/home/styles.module.scss     | 13 +++--
 11 files changed, 106 insertions(+), 41 deletions(-)
 create mode 100644 projects/plugins/protect/changelog/update-protect-add-scan-report-to-home

diff --git a/projects/js-packages/components/components/scan-report/constants.ts b/projects/js-packages/components/components/scan-report/constants.ts
index 436eed91c5701..6a10d008b876f 100644
--- a/projects/js-packages/components/components/scan-report/constants.ts
+++ b/projects/js-packages/components/components/scan-report/constants.ts
@@ -7,6 +7,12 @@ import {
 	wordpress as coreIcon,
 } from '@wordpress/icons';
 
+export const STATUS_TYPES = [
+	{ value: 'checked', label: __( 'Checked', 'jetpack-components' ) },
+	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-components' ) },
+	{ value: 'threat', label: __( 'Threat', 'jetpack-components' ) },
+];
+
 export const TYPES = [
 	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
 	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 14795376f7d95..4600ecf98d9db 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';
@@ -17,6 +17,7 @@ import {
 	FIELD_ICON,
 	FIELD_STATUS,
 	FIELD_TYPE,
+	STATUS_TYPES,
 	TYPES,
 	ICONS,
 } from './constants';
@@ -26,12 +27,13 @@ import styles from './styles.module.scss';
  * DataViews component for displaying a scan report.
  *
  * @param {object}   props                   - Component props.
+ * @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( { data, onChangeSelection } ): JSX.Element {
+export default function ScanReport( { dataSource, data, onChangeSelection } ): JSX.Element {
 	const baseView = {
 		search: '',
 		filters: [],
@@ -84,8 +86,19 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		const result: Field< ScanReportExtension >[] = [
 			{
 				id: FIELD_STATUS,
+				elements: STATUS_TYPES,
 				label: __( 'Status', 'jetpack-components' ),
+				getValue( { item } ) {
+					if ( item.checked ) {
+						if ( item.threats.length > 0 ) {
+							return 'threat';
+						}
+						return 'checked';
+					}
+					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.',
@@ -95,10 +108,34 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 					if ( item.checked ) {
 						if ( item.threats.length > 0 ) {
 							variant = 'warning';
-							text = __( 'Threat detected.', 'jetpack-components' );
+							text = _n(
+								'Vulnerability detected.',
+								'Vulnerabilities detected.',
+								item.threats.length,
+								'jetpack-components'
+							);
+
+							if ( scanApi ) {
+								text = _n(
+									'Threat detected.',
+									'Threats detected.',
+									item.threats.length,
+									'jetpack-components'
+								);
+							}
 						} else {
 							variant = 'success';
-							text = __( 'No known threats found that affect this version.', 'jetpack-components' );
+							text = __(
+								'No known vulnerabilities found that affect this version.',
+								'jetpack-components'
+							);
+
+							if ( scanApi ) {
+								text = __(
+									'No known threats found that affect this version.',
+									'jetpack-components'
+								);
+							}
 						}
 					}
 
@@ -127,6 +164,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 			{
 				id: FIELD_VERSION,
 				label: __( 'Version', 'jetpack-components' ),
+				enableSorting: false,
 				enableGlobalSearch: true,
 				getValue( { item }: { item: ScanReportExtension } ) {
 					return item.version ? item.version : '';
@@ -155,7 +193,7 @@ export default function ScanReport( { data, onChangeSelection } ): JSX.Element {
 		];
 
 		return result;
-	}, [ view ] );
+	}, [ 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 63926908850de..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
@@ -20,6 +20,7 @@ export default {
 
 export const Default = args => <ScanReport { ...args } />;
 Default.args = {
+	dataSource: 'scan_api',
 	data: [
 		{
 			id: 1,
@@ -64,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',
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 cc37c28c7b39b..40941b43ad032 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 = {
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 44efc998dc3ae..27cbfa23935fe 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -265,18 +265,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 ) ?? '';
 				},
 			},
 			{
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
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 837f649c67f16..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
@@ -88,12 +88,12 @@ const FirewallAdminSectionHero = () => {
 		<AdminSectionHero>
 			<AdminSectionHero.Main>
 				<Status
+					className={ styles.status }
 					status={ 'on' === status ? 'active' : 'inactive' }
 					label={ statusLabel }
-					className={ styles.status }
 				/>
 				<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
-				<Text>{ subheading }</Text>
+				{ subheading }
 			</AdminSectionHero.Main>
 			{ wafSupported && (
 				<AdminSectionHero.Aside>
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 1eebd67cb60d7..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,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-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
diff --git a/projects/plugins/protect/src/js/routes/home/index.jsx b/projects/plugins/protect/src/js/routes/home/index.jsx
index 718349caaac3f..cc188fa134e6e 100644
--- a/projects/plugins/protect/src/js/routes/home/index.jsx
+++ b/projects/plugins/protect/src/js/routes/home/index.jsx
@@ -1,6 +1,8 @@
-import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+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 HomeAdminSectionHero from './home-admin-section-hero';
+import styles from './styles.module.scss';
 
 /**
  * Home Page
@@ -10,12 +12,30 @@ import HomeAdminSectionHero from './home-admin-section-hero';
  * @return {Component} The root component for the scan page.
  */
 const HomePage = () => {
+	const { data: status } = useScanStatusQuery( { usePolling: true } );
+	const { core, plugins, themes, files } = status;
+
+	const data = [
+		core,
+		...plugins,
+		...themes,
+		{ checked: true, threats: files, type: 'files' },
+	].map( ( item, index ) => {
+		return { id: index + 1, ...item };
+	} );
+
 	return (
 		<AdminPage>
 			<HomeAdminSectionHero />
 			<AdminSection>
-				<Container horizontalSpacing={ 7 } horizontalGap={ 4 }>
-					<Col>{ /* TODO: Add ScanReport component here */ }</Col>
+				<Container
+					className={ styles[ 'scan-report-container' ] }
+					horizontalSpacing={ 5 }
+					horizontalGap={ 4 }
+				>
+					<Col>
+						<ScanReport dataSource={ status.dataSource } data={ data } />
+					</Col>
 				</Container>
 			</AdminSection>
 		</AdminPage>
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 b99bead52dbdb..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 {
@@ -56,7 +62,6 @@
 	text-align: left;
 }
 
-
 @media ( max-width: 599px ) {
     .stat-cards-wrapper {
         flex-direction: column;

From ef6e5d0348f91e495360f8047b3baeb42570e70c Mon Sep 17 00:00:00 2001
From: Nate Weller <hello@nateweller.com>
Date: Sat, 14 Dec 2024 20:36:28 -0700
Subject: [PATCH 28/32] Fix duplicate imports

---
 .../protect/src/js/routes/scan/scan-admin-section-hero.tsx     | 3 +--
 1 file changed, 1 insertion(+), 2 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 4257c585351eb..00215079d3fdf 100644
--- a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx
+++ b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx
@@ -2,8 +2,7 @@ import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components
 import { Tooltip } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useCallback, useState } from 'react';
-import { useMemo } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import AdminSectionHero from '../../components/admin-section-hero';
 import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
 import OnboardingPopover from '../../components/onboarding-popover';

From 62838d397bdd0dd29fe4ab0365256d2626435330 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Sat, 14 Dec 2024 19:38:11 -0800
Subject: [PATCH 29/32] ScanReport: Fix defaultLayout (#40603)

---
 .../components/components/scan-report/index.tsx    | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/projects/js-packages/components/components/scan-report/index.tsx b/projects/js-packages/components/components/scan-report/index.tsx
index 4600ecf98d9db..23810c1754832 100644
--- a/projects/js-packages/components/components/scan-report/index.tsx
+++ b/projects/js-packages/components/components/scan-report/index.tsx
@@ -51,18 +51,16 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 	const defaultLayouts: SupportedLayouts = {
 		table: {
 			...baseView,
-			fields: [ FIELD_STATUS, FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
-			layout: {
-				primaryField: FIELD_STATUS,
-			},
+			fields: [ FIELD_TYPE, FIELD_NAME, FIELD_VERSION ],
+			titleField: FIELD_STATUS,
+			showMedia: false,
 		},
 		list: {
 			...baseView,
 			fields: [ FIELD_STATUS, FIELD_VERSION ],
-			layout: {
-				primaryField: FIELD_NAME,
-				mediaField: FIELD_ICON,
-			},
+			titleField: FIELD_NAME,
+			mediaField: FIELD_ICON,
+			showMedia: true,
 		},
 	};
 

From a877b8c0c47c23f29c6646102625c299fba4ddb6 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Sun, 15 Dec 2024 10:39:23 -0800
Subject: [PATCH 30/32] Update onboarding popover placement (#40550)

---
 .../plugins/protect/src/js/routes/scan/index.jsx    |  4 ++--
 .../src/js/routes/scan/scan-admin-section-hero.tsx  | 13 +++++--------
 .../protect/src/js/routes/scan/styles.module.scss   |  5 +++++
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
index c56ae3c747f3e..aa1aea5581076 100644
--- a/projects/plugins/protect/src/js/routes/scan/index.jsx
+++ b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -83,14 +83,14 @@ const ScanPage = () => {
 								<OnboardingPopover
 									id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
 									anchor={ scanResultsAnchor }
-									position={ 'top left' }
+									position={ 'top' }
 								/>
 							) }
 							{ !! status && ! isScanInProgress( status ) && hasPlan && (
 								<OnboardingPopover
 									id={ 'paid-understand-severity' }
 									anchor={ scanResultsAnchor }
-									position={ 'top right' }
+									position={ 'top' }
 								/>
 							) }
 						</Col>
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 00215079d3fdf..f7ea5aa7305d0 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
@@ -107,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 	return (
 		<AdminSectionHero>
 			<AdminSectionHero.Main>
-				<Text mb={ 2 } ref={ setDailyScansPopoverAnchor }>
+				<Text className={ styles[ 'last-checked' ] } mb={ 2 } ref={ setDailyScansPopoverAnchor }>
 					{ lastCheckedLocalTimestamp
 						? sprintf(
 								// translators: %s: date and time of the last scan
@@ -118,7 +118,7 @@ const ScanAdminSectionHero: React.FC = () => {
 				</Text>
 				<OnboardingPopover
 					id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
-					position={ isSm ? 'bottom' : 'middle right' }
+					position={ isSm ? 'bottom right' : 'middle right' }
 					anchor={ dailyScansPopoverAnchor }
 				/>
 				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
@@ -157,11 +157,8 @@ const ScanAdminSectionHero: React.FC = () => {
 				) }
 				{ fixableList.length > 0 && (
 					<>
-						<div ref={ setShowAutoFixersPopoverAnchor }>
-							<Button
-								className={ styles[ 'auto-fixers' ] }
-								onClick={ handleShowAutoFixersClick( fixableList ) }
-							>
+						<div className={ styles[ 'auto-fixers' ] } ref={ setShowAutoFixersPopoverAnchor }>
+							<Button onClick={ handleShowAutoFixersClick( fixableList ) }>
 								{ sprintf(
 									/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
 									__( 'Show auto fixers (%s)', 'jetpack-protect' ),
@@ -171,7 +168,7 @@ const ScanAdminSectionHero: React.FC = () => {
 						</div>
 						<OnboardingPopover
 							id="paid-fix-all-threats"
-							position={ isSm ? 'bottom right' : 'middle left' }
+							position={ isSm ? 'bottom right' : 'middle right' }
 							anchor={ showAutoFixersPopoverAnchor }
 						/>
 					</>
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 5806ca5353863..c9d20d8928acd 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -4,6 +4,7 @@
 
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+	width: fit-content;
 }
 
 .scan-results-container {
@@ -22,3 +23,7 @@
 		display: none;
 	}
 }
+
+.last-checked {
+	width: fit-content;
+}
\ No newline at end of file

From 7a47485378a46ddc1045dacb93544e093acb6f8f Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Mon, 16 Dec 2024 12:44:03 -0800
Subject: [PATCH 31/32] Adjust approach

---
 .../threats-data-views/constants.ts           |  11 +-
 .../components/threats-data-views/index.tsx   | 153 +++++++-----------
 .../threats-status-toggle-group-control.tsx   |  32 +++-
 3 files changed, 84 insertions(+), 112 deletions(-)

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 1eeb816a8dc0c..903e9910a8b3c 100644
--- a/projects/js-packages/components/components/threats-data-views/constants.ts
+++ b/projects/js-packages/components/components/threats-data-views/constants.ts
@@ -45,19 +45,14 @@ 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 BASE_TABLE_FIELDS = [
+export const DEFAULT_TABLE_FIELDS = [
 	THREAT_FIELD_SEVERITY,
 	THREAT_FIELD_THREAT,
 	THREAT_FIELD_TYPE,
-	THREAT_FIELD_STATUS,
-];
-
-export const DEFAULT_TABLE_FIELDS = [ ...BASE_TABLE_FIELDS, THREAT_FIELD_AUTO_FIX ];
-
-export const HISTORY_TABLE_FIELDS = [
-	...BASE_TABLE_FIELDS,
 	THREAT_FIELD_FIRST_DETECTED,
 	THREAT_FIELD_FIXED_ON,
+	THREAT_FIELD_STATUS,
+	THREAT_FIELD_AUTO_FIX,
 ];
 
 export const DEFAULT_LIST_FIELDS = [
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 b6f71229f0f00..d783f74d2b4e1 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -1,9 +1,4 @@
-import {
-	getThreatType,
-	getFixerAction,
-	type Threat,
-	type ThreatStatus,
-} from '@automattic/jetpack-scan';
+import { getThreatType, getFixerAction, type Threat } from '@automattic/jetpack-scan';
 import {
 	type Action,
 	type ActionButton,
@@ -25,7 +20,6 @@ import ThreatFixerButton from '../threat-fixer-button';
 import ThreatSeverityBadge from '../threat-severity-badge';
 import {
 	DEFAULT_TABLE_FIELDS,
-	HISTORY_TABLE_FIELDS,
 	DEFAULT_LIST_FIELDS,
 	THREAT_ACTION_FIX,
 	THREAT_ACTION_IGNORE,
@@ -142,6 +136,28 @@ export default function ThreatsDataViews( {
 		...defaultLayouts.table,
 	} );
 
+	/**
+	 * Compute the status filters from the view filters.
+	 */
+	const statusFilters = useMemo(
+		() =>
+			view.filters.reduce( ( acc, filter ) => {
+				if ( filter.field === THREAT_FIELD_STATUS ) {
+					if ( Array.isArray( filter.value ) ) {
+						for ( const value of filter.value ) {
+							if ( ! acc.includes( value ) ) {
+								acc.push( value );
+							}
+						}
+					} else if ( ! acc.includes( filter.value ) ) {
+						acc.push( filter.value );
+					}
+				}
+				return acc;
+			}, [] ),
+		[ view.filters ]
+	);
+
 	/**
 	 * Compute values from the provided threats data.
 	 *
@@ -251,29 +267,6 @@ export default function ThreatsDataViews( {
 					);
 				},
 			},
-			{
-				id: THREAT_FIELD_STATUS,
-				label: __( 'Status', 'jetpack-components' ),
-				enableHiding: false,
-				elements: THREAT_STATUSES,
-				getValue( { item }: { item: Threat } ) {
-					if ( ! item.status ) {
-						return 'current';
-					}
-					return (
-						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
-					);
-				},
-				render( { item }: { item: Threat } ) {
-					if ( item.status ) {
-						const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
-						if ( status ) {
-							return <Badge variant={ status?.variant }>{ status.label }</Badge>;
-						}
-					}
-					return <Badge variant="warning">{ __( 'Active', 'jetpack-components' ) }</Badge>;
-				},
-			},
 			{
 				id: THREAT_FIELD_TYPE,
 				label: __( 'Type', 'jetpack-components' ),
@@ -315,6 +308,34 @@ export default function ThreatsDataViews( {
 					return item.extension ? item.extension.slug : '';
 				},
 			},
+			...( dataFields.includes( 'status' )
+				? [
+						{
+							id: THREAT_FIELD_STATUS,
+							label: __( 'Status', 'jetpack-components' ),
+							enableHiding: false,
+							elements: THREAT_STATUSES,
+							getValue( { item }: { item: Threat } ) {
+								if ( ! item.status ) {
+									return 'current';
+								}
+								return (
+									THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ??
+									item.status
+								);
+							},
+							render( { item }: { item: Threat } ) {
+								if ( item.status ) {
+									const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
+									if ( status ) {
+										return <Badge variant={ status?.variant }>{ status.label }</Badge>;
+									}
+								}
+								return <Badge variant="warning">{ __( 'Active', 'jetpack-components' ) }</Badge>;
+							},
+						},
+				  ]
+				: [] ),
 			...( dataFields.includes( 'severity' )
 				? [
 						{
@@ -343,7 +364,7 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'firstDetected' )
+			...( dataFields.includes( 'firstDetected' ) && statusFilters.includes( 'fixed' )
 				? [
 						{
 							id: THREAT_FIELD_FIRST_DETECTED,
@@ -362,7 +383,7 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'fixedOn' )
+			...( dataFields.includes( 'fixedOn' ) && statusFilters.includes( 'fixed' )
 				? [
 						{
 							id: THREAT_FIELD_FIXED_ON,
@@ -381,7 +402,8 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'fixable' )
+			...( dataFields.includes( 'fixable' ) &&
+			( statusFilters.includes( 'current' ) || ! statusFilters.length ) // TODO: Wouldn't need this latter part if we excluded fixable field properly
 				? [
 						{
 							id: THREAT_FIELD_AUTO_FIX,
@@ -413,7 +435,7 @@ export default function ThreatsDataViews( {
 		];
 
 		return result;
-	}, [ dataFields, plugins, themes, signatures, onFixThreats ] );
+	}, [ dataFields, plugins, themes, signatures, onFixThreats, statusFilters ] );
 
 	/**
 	 * DataView actions - collection of operations that can be performed upon each record.
@@ -502,73 +524,12 @@ export default function ThreatsDataViews( {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ data, view, fields ] );
 
-	/**
-	 * Check if a status filter is selected.
-	 *
-	 * @param {Filter[]} currentFilters       - The current DataView filters.
-	 * @param {ThreatStatus[]} threatStatuses - The threat statuses to check against.
-	 *
-	 * @return {boolean} True if the status filter is selected, false otherwise.
-	 */
-	const isStatusFilterSelected = useCallback(
-		( currentFilters: Filter[], threatStatuses: ThreatStatus[] ) =>
-			currentFilters.some(
-				filter =>
-					filter.field === 'status' &&
-					Array.isArray( filter.value ) &&
-					filter.value.length === threatStatuses.length &&
-					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
-			),
-		[]
-	);
-
-	/**
-	 * Get the selected status filters.
-	 *
-	 * @param {Filter[]} currentFilters - The current DataView filters.
-	 *
-	 * @return {string|null} The selected status filter.
-	 */
-	const selectedStatusFilter = useCallback(
-		( currentFilters: Filter[] ) => {
-			if ( isStatusFilterSelected( currentFilters, [ 'current' ] ) ) {
-				return 'active' as const;
-			}
-			if ( isStatusFilterSelected( currentFilters, [ 'fixed', 'ignored' ] ) ) {
-				return 'historic' as const;
-			}
-			if ( isStatusFilterSelected( currentFilters, [ 'fixed' ] ) ) {
-				return 'fixed' as const;
-			}
-			if ( isStatusFilterSelected( currentFilters, [ 'ignored' ] ) ) {
-				return 'ignored' as const;
-			}
-
-			return null;
-		},
-		[ isStatusFilterSelected ]
-	);
-
 	/**
 	 * 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 ) => {
-		const statusFilters = selectedStatusFilter( newView.filters );
-
-		if ( newView.type === 'table' ) {
-			if ( statusFilters === 'active' ) {
-				newView.fields = DEFAULT_TABLE_FIELDS;
-			} else if (
-				statusFilters === 'historic' ||
-				statusFilters === 'fixed' ||
-				statusFilters === 'ignored'
-			) {
-				newView.fields = HISTORY_TABLE_FIELDS;
-			}
-		}
-
 		setView( newView );
 	}, [] );
 
@@ -594,7 +555,7 @@ export default function ThreatsDataViews( {
 				<ThreatsStatusToggleGroupControl
 					data={ data }
 					view={ view }
-					selectedValue={ selectedStatusFilter( view.filters ) }
+					statusFilters={ statusFilters }
 					onChangeView={ onChangeView }
 				/>
 			}
diff --git a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
index abb9ed4e918e2..1373376aea121 100644
--- a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
+++ b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -10,22 +10,23 @@ import styles from './styles.module.scss';
 
 /**
  * ToggleGroupControl component for filtering threats by status.
- * @param {object}     props              - Component props.
- * @param { Threat[]}  props.data         - Threats data.
- * @param { View }     props.view         - The current view.
- * @param { string|null } props.selectedValue - The selected value.
- * @param { Function } props.onChangeView - Callback function to handle view changes.
+ * @param {object}           props               - Component props.
+ * @param { Threat[]}        props.data          - Threats data.
+ * @param { View }           props.view          - The current view.
+ * @param { ThreatStatus[] } statusFilters       - The current status filter value.
+ * @param { Function }       props.onChangeView  - Callback function to handle view changes.
+ * @param                    props.statusFilters
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {
 	data,
 	view,
-	selectedValue,
+	statusFilters,
 	onChangeView,
 }: {
 	data: Threat[];
 	view: View;
-	selectedValue: string | null;
+	statusFilters: ThreatStatus[];
 	onChangeView: ( newView: View ) => void;
 } ): JSX.Element {
 	/**
@@ -90,6 +91,21 @@ export default function ThreatsStatusToggleGroupControl( {
 		[ view, onChangeView ]
 	);
 
+	/**
+	 * Get the selected status filters.
+	 *
+	 * @return {string|null} The selected status filter.
+	 */
+	const selectedStatusFilterPreset = useMemo( () => {
+		if ( JSON.stringify( statusFilters ) === JSON.stringify( [ 'current' ] ) ) {
+			return 'active';
+		}
+		if ( JSON.stringify( statusFilters ) === JSON.stringify( [ 'fixed', 'ignored' ] ) ) {
+			return 'historic';
+		}
+		return null;
+	}, [ statusFilters ] );
+
 	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
 		return null;
 	}
@@ -99,7 +115,7 @@ export default function ThreatsStatusToggleGroupControl( {
 			<div>
 				<div className={ styles[ 'toggle-group-control' ] }>
 					<ToggleGroupControl
-						value={ [ 'active', 'historic' ].includes( selectedValue ) ? selectedValue : null }
+						value={ selectedStatusFilterPreset }
 						onChange={ onStatusFilterChange }
 						isBlock
 						hideLabelFromVision

From 130eaf4a416bc294e81165221328c26eb0a51d53 Mon Sep 17 00:00:00 2001
From: dkmyta <dkmyta10@gmail.com>
Date: Tue, 17 Dec 2024 12:41:27 -0800
Subject: [PATCH 32/32] Fix JSDocs

---
 .../components/components/threats-data-views/index.tsx        | 2 +-
 .../threats-status-toggle-group-control.tsx                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 b3e4d7f39a68c..53b68e574d334 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -393,7 +393,7 @@ export default function ThreatsDataViews( {
 				  ]
 				: [] ),
 			...( dataFields.includes( 'fixable' ) &&
-			( statusFilters.includes( 'current' ) || ! statusFilters.length ) // TODO: Wouldn't need this latter part if we excluded fixable field properly
+			( statusFilters.includes( 'current' ) || ! statusFilters.length )
 				? [
 						{
 							id: THREAT_FIELD_AUTO_FIX,
diff --git a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
index 1373376aea121..dc0b8ffb3ed70 100644
--- a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
+++ b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -13,9 +13,9 @@ import styles from './styles.module.scss';
  * @param {object}           props               - Component props.
  * @param { Threat[]}        props.data          - Threats data.
  * @param { View }           props.view          - The current view.
- * @param { ThreatStatus[] } statusFilters       - The current status filter value.
+ * @param { ThreatStatus[] } props.statusFilters - The current status filter value.
  * @param { Function }       props.onChangeView  - Callback function to handle view changes.
- * @param                    props.statusFilters
+ *
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {