Protect: Integrate ThreatsDataViews Component

projects/js-packages/scan/changelog/add-additional-scan-types

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added more types for working with scan results.

projects/js-packages/scan/src/types/fixers.ts

@@ -15,3 +15,26 @@ export type ThreatFixStatusSuccess = {
 };
 
 export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess;
+
+/**
+ * Fixers Status
+ *
+ * Overall status of all fixers.
+ */
+type FixersStatusBase = {
+	ok: boolean; // Discriminator for overall success
+};
+
+export type FixersStatusError = FixersStatusBase & {
+	ok: false;
+	error: string;
+};
+
+export type FixersStatusSuccess = FixersStatusBase & {
+	ok: true;
+	threats: {
+		[ key: number ]: ThreatFixStatus;
+	};
+};
+
+export type FixersStatus = FixersStatusSuccess | FixersStatusError;

projects/js-packages/scan/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './fixers';
+export * from './status';
 export * from './threats';

projects/js-packages/scan/src/types/status.ts

@@ -0,0 +1,33 @@
+import { Threat } from '..';
+
+export type ScanStatus = {
+	/** The current status of the scanner. */
+	status: 'unavailable' | 'provisioning' | 'idle' | 'scanning' | 'scheduled';
+
+	/** The IDs of fixable threats. */
+	fixableThreatIds: number[];
+
+	/** The current scan progress, only available from the Scan API. */
+	currentProgress: number | null;
+
+	/** The data source for the scan status. */
+	dataSource: 'protect_report' | 'scan_api';
+
+	/** Whether the site currently has extensions not checked in the latest scan. */
+	hasUncheckedItems: boolean;
+
+	/** The time the last scan was checked, in YYYY-MM-DD HH:MM:SS format. */
+	lastChecked: string | null;
+
+	/** Whether there was an error in the scan results. */
+	error: boolean | null;
+
+	/** The error code. */
+	errorCode: string | null;
+
+	/** The error message. */
+	errorMessage: string | null;
+
+	/** The detected threats. */
+	threats: Threat[];
+};

projects/plugins/protect/changelog/add-threats-data-views

@@ -0,0 +1,5 @@
+Significance: minor
+Type: changed
+
+Added DataViews component for viewing scan results.
+

projects/plugins/protect/package.json

@@ -29,6 +29,7 @@
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
+		"@automattic/jetpack-scan": "workspace:*",
 		"@tanstack/react-query": "5.20.5",
 		"@tanstack/react-query-devtools": "5.20.5",
 		"@wordpress/api-fetch": "7.11.0",

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;

projects/plugins/protect/src/js/api.ts

@@ -1,7 +1,6 @@
+import { type FixersStatus, type ScanStatus } from '@automattic/jetpack-scan';
 import apiFetch from '@wordpress/api-fetch';
 import camelize from 'camelize';
-import { FixersStatus } from './types/fixers';
-import { ScanStatus } from './types/scans';
 import { WafStatus } from './types/waf';
 
 const API = {
@@ -72,7 +71,7 @@ const API = {
 			path: `jetpack-protect/v1/fix-threats`,
 			method: 'POST',
 			data: { threat_ids: threatIds },
-		} ),
+		} ).then( camelize ),
 
 	getFixersStatus: ( threatIds: number[] ): Promise< FixersStatus > => {
 		const path = threatIds.reduce( ( carryPath, threatId ) => {
@@ -82,7 +81,7 @@ const API = {
 		return apiFetch( {
 			path,
 			method: 'GET',
-		} );
+		} ).then( camelize );
 	},
 
 	ignoreThreat: ( threatId: number ) =>

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>

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 }

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