Reapply history routes

projects/plugins/protect/src/js/index.tsx

@@ -13,6 +13,7 @@ import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
 import HomeRoute from './routes/home';
 import ScanRoute from './routes/scan';
+import HistoryRoute from './routes/scan/history';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
 
@@ -63,15 +64,15 @@ function render() {
 											path="/scan/history"
 											element={
 												<PaidPlanGate>
-													<ScanRoute />
+													<HistoryRoute />
 												</PaidPlanGate>
 											}
 										/>
 										<Route
 											path="/scan/history/:filter"
 											element={
 												<PaidPlanGate>
-													<ScanRoute />
+													<HistoryRoute />
 												</PaidPlanGate>
 											}
 										/>

projects/plugins/protect/src/js/routes/scan/history-admin-section-hero.tsx → projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx

@@ -3,9 +3,9 @@ import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import AdminSectionHero from '../../components/admin-section-hero';
-import ErrorAdminSectionHero from '../../components/error-admin-section-hero';
-import useHistoryQuery from '../../data/scan/use-history-query';
+import AdminSectionHero from '../../../components/admin-section-hero';
+import ErrorAdminSectionHero from '../../../components/error-admin-section-hero';
+import useHistoryQuery from '../../../data/scan/use-history-query';
 import styles from './styles.module.scss';
 
 const HistoryAdminSectionHero: React.FC = ( {

projects/plugins/protect/src/js/routes/scan/scan-history-data-view.tsx → projects/plugins/protect/src/js/routes/scan/history/history-data-views.tsx

@@ -1,22 +1,22 @@
 import { ThreatsDataViews } from '@automattic/jetpack-components';
-import { Threat } from '@automattic/jetpack-scan';
+import { type Threat } from '@automattic/jetpack-scan';
 import { useCallback } from 'react';
-import useHistoryQuery from '../../data/scan/use-history-query';
-import useModal from '../../hooks/use-modal';
+import useHistoryQuery from '../../../data/scan/use-history-query';
+import useModal from '../../../hooks/use-modal';
 
 /**
- * Scan History Data View
+ * Scan Results Data View
  *
  * @param {object}      props        - Component props.
  * @param {JSX.Element} props.header - Header component.
  *
- * @return {JSX.Element} ScanHistoryDataView component.
+ * @return {JSX.Element} ScanResultDataView component.
  */
-export default function ScanHistoryDataView( { header }: { header: JSX.Element } ) {
-	const { setModal } = useModal();
-
+export default function HistoryDataViews( { header }: { header?: JSX.Element } ) {
 	const { data: history } = useHistoryQuery();
 
+	const { setModal } = useModal();
+
 	const onUnignoreThreats = useCallback(
 		( threats: Threat[] ) => {
 			setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } );
@@ -27,7 +27,6 @@ export default function ScanHistoryDataView( { header }: { header: JSX.Element }
 	return (
 		<ThreatsDataViews
 			data={ history ? history.threats : [] }
-			filters={ [] }
 			onUnignoreThreats={ onUnignoreThreats }
 			header={ header }
 		/>

projects/plugins/protect/src/js/routes/scan/history/index.jsx

@@ -0,0 +1,46 @@
+import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import AdminPage from '../../../components/admin-page';
+import useHistoryQuery from '../../../data/scan/use-history-query';
+import useScanStatusQuery from '../../../data/scan/use-scan-status-query';
+import HistoryAdminSectionHero from './history-admin-section-hero';
+import HistoryDataViews from './history-data-views';
+// import StatusToggleGroupControl from './status-toggle-group-control';
+import styles from './styles.module.scss';
+
+/**
+ * History Page
+ *
+ * The entry point for the History page.
+ *
+ * @return {Component} The root component for the scan page.
+ */
+const HistoryPage = () => {
+	const { data: status } = useScanStatusQuery();
+	const { data: history } = useHistoryQuery();
+
+	const hasActiveThreats = status && status.threats.length;
+	const hasHistory = history && history.threats.length;
+	const showResults = hasActiveThreats || hasHistory;
+
+	return (
+		<AdminPage>
+			<HistoryAdminSectionHero size={ hasHistory ? 'normal' : 'large' } />
+			{ showResults && (
+				<AdminSection>
+					<Container
+						className={ styles[ 'history-container' ] }
+						horizontalSpacing={ 5 }
+						horizontalGap={ 4 }
+					>
+						<Col>
+							{ /* TODO: Pass header */ }
+							<HistoryDataViews />
+						</Col>
+					</Container>
+				</AdminSection>
+			) }
+		</AdminPage>
+	);
+};
+
+export default HistoryPage;

projects/plugins/protect/src/js/routes/scan/history/styles.module.scss

@@ -0,0 +1,20 @@
+.hero-main {
+	max-width: 550px;
+}
+
+.hero-main--large {
+	flex: 1 auto;
+	align-content: center;
+	height: calc( 100vh - 408px );
+}
+
+.history-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
+	}
+}

projects/plugins/protect/src/js/routes/scan/index.jsx

@@ -1,6 +1,5 @@
 import { AdminSection, Container, Col } from '@automattic/jetpack-components';
-import { useMemo, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useState } from 'react';
 import AdminPage from '../../components/admin-page';
 import OnboardingPopover from '../../components/onboarding-popover';
 import useHistoryQuery from '../../data/scan/use-history-query';
@@ -22,8 +21,6 @@ import styles from './styles.module.scss';
  */
 const ScanPage = () => {
 	const { hasPlan } = usePlan();
-	const location = useLocation();
-	const { filter } = useParams();
 	const { data: status } = useScanStatusQuery( { usePolling: true } );
 	const { data: history } = useHistoryQuery();
 
@@ -42,26 +39,6 @@ const ScanPage = () => {
 	const hasHistory = history && history.threats.length;
 	const showResults = hasActiveThreats || hasHistory;
 
-	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',

projects/plugins/protect/src/js/routes/scan/scan-results-data-views.tsx

@@ -0,0 +1,42 @@
+import { ThreatsDataViews } from '@automattic/jetpack-components';
+import { type Threat } from '@automattic/jetpack-scan';
+import { useCallback } from 'react';
+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 {JSX.Element} props.header - Header component.
+ *
+ * @return {JSX.Element} ScanResultDataView component.
+ */
+export default function ScanResultsDataViews( { header }: { header: JSX.Element } ) {
+	const { data: status } = useScanStatusQuery( { usePolling: true } );
+
+	const { setModal } = useModal();
+
+	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 ]
+	);
+
+	return (
+		<ThreatsDataViews
+			data={ status ? status.threats : [] }
+			onFixThreats={ onFixThreats }
+			onIgnoreThreats={ onIgnoreThreats }
+			header={ header }
+		/>
+	);
+}

projects/plugins/protect/src/js/routes/scan/status-toggle-group-control.tsx

@@ -3,33 +3,36 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import useHistoryQuery from '../../data/scan/use-history-query';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import styles from './styles.module.scss';
 
 /**
  * ToggleGroupControl component for filtering threats by status.
  * @param {object}   props                      - Component props.
- * @param {number}   props.activeThreatsCount   - Count of active threats.
- * @param {number}   props.historicThreatsCount - Count of historic threats.
- * @param {string}   props.selectedValue        - The selected value.
+ * @param {boolean}  props.viewingHistory       - Whether the user is viewing the history.
  * @param {Function} props.onStatusFilterChange - Callback function to handle status filter changes.
  *
  * @return {JSX.Element|null} The component or null.
  */
 export default function StatusToggleGroupControl( {
-	activeThreatsCount = 1,
-	historicThreatsCount = 1,
-	selectedValue = 'active',
+	viewingHistory = true,
 	onStatusFilterChange,
 }: {
-	activeThreatsCount?: number;
-	historicThreatsCount?: number;
-	selectedValue?: string;
+	viewingHistory?: boolean;
 	onStatusFilterChange?: ( newStatus: string ) => void;
 } ): JSX.Element {
-	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
+	const { data: status } = useScanStatusQuery();
+	const { data: history } = useHistoryQuery();
+	const numActiveThreats = status ? status.threats.length : 0;
+	const numHistoricThreats = history ? history.threats.length : 0;
+
+	if ( ! ( numHistoricThreats + numActiveThreats ) ) {
 		return null;
 	}
 
+	const selectedValue = viewingHistory === true ? 'historic' : 'active';
+
 	try {
 		return (
 			<div>
@@ -49,15 +52,15 @@ export default function StatusToggleGroupControl( {
 									'Active threats (%d)',
 									'jetpack-protect'
 								),
-								activeThreatsCount
+								numActiveThreats
 							) }
 						/>
 						<ToggleGroupControlOption
 							value={ 'historic' }
 							label={ sprintf(
 								/* translators: %d: number of historic threats */
 								__( 'History (%d)', 'jetpack-protect' ),
-								historicThreatsCount
+								numHistoricThreats
 							) }
 						/>
 					</ToggleGroupControl>

projects/plugins/protect/src/js/routes/scan/styles.module.scss

@@ -1,5 +1,5 @@
 .hero-main {
-	max-width: 512px;
+	max-width: 550px;
 }
 
 .hero-main--large {