Protect: Integrate ThreatsDataViews

Transpile textdomain from @wordpress/dataviews

Run tools/check-intra-monorepo-deps.sh -u

Minor adjustments

Add upgrade prompt to scan header

Add ShieldIcon component

Fix typo

Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com>

Fix typo

Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com>

Update copy

Co-authored-by: dkmyta <43220201+dkmyta@users.noreply.github.com>

Improve mobile styling of scan page header

Fix typo

Add tooltip to header upgrade prompt

changelog

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

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

@@ -17,6 +17,36 @@ export const getThreatType = ( threat: Threat ) => {
 	return null;
 };
 
+export const getThreatIcon = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return 'wordpress-alt';
+		case 'plugin':
+			return 'plugins';
+		case 'theme':
+			return 'appearance';
+		case 'file':
+			return 'media-code';
+		default:
+			return 'shield-alt';
+	}
+};
+
+export const getThreatSubtitle = ( threat: Threat ) => {
+	switch ( getThreatType( threat ) ) {
+		case 'core':
+			return __( 'Vulnerable WordPress Version', 'jetpack-scan' );
+		case 'plugin':
+			return __( 'Vulnerable Plugin', 'jetpack-scan' );
+		case 'theme':
+			return __( 'Vulnerable Theme', 'jetpack-scan' );
+		case 'file':
+			return __( 'File Threat', 'jetpack-scan' );
+		default:
+			return __( 'Threat', 'jetpack-scan' );
+	}
+};
+
 export const fixerTimestampIsStale = ( lastUpdatedTimestamp: string ) => {
 	const now = new Date();
 	const lastUpdated = new Date( lastUpdatedTimestamp );
@@ -124,7 +154,7 @@ export const getFixerDescription = ( threat: Threat ) => {
 			}
 			break;
 		case 'update':
-			if ( threat.fixedIn && threat.extension.name ) {
+			if ( threat.fixedIn && threat.extension?.name ) {
 				return sprintf(
 					/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
 					__( 'Update %1$s to version %2$s', 'jetpack-scan' ),

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

@@ -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",

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,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 > =>

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

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