Protect: Integrate ScanReport

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' ) },

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'
+								);
+							}
 						}
 					}
 
@@ -155,7 +192,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.

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

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

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 ) ?? '';
 				},
 			},
 			{

projects/plugins/protect/changelog/update-protect-add-scan-report-to-home

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ScanReport to HomeRoute

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>

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,19 +71,19 @@ 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(
 		() => ( {
 			...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 (

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

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

@@ -1,5 +1,6 @@
-import { AdminSection, Container, Col } from '@automattic/jetpack-components';
+import { AdminSection, Container, Col, ScanReport } from '@automattic/jetpack-components';
 import AdminPage from '../../components/admin-page';
+import useScanStatusQuery from '../../data/scan/use-scan-status-query';
 import HomeAdminSectionHero from './home-admin-section-hero';
 
 /**
@@ -10,12 +11,26 @@ 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>
+					<Col>
+						<ScanReport dataSource={ status.dataSource } data={ data } />
+					</Col>
 				</Container>
 			</AdminSection>
 		</AdminPage>

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

@@ -56,7 +56,6 @@
 	text-align: left;
 }
 
-
 @media ( max-width: 599px ) {
     .stat-cards-wrapper {
         flex-direction: column;