@automattic/jetpack-scan 0.5.9 → 1.0.0

package/src/components/threats-data-views/index.tsx

@@ -0,0 +1,533 @@
+import { Badge } from '@automattic/jetpack-components';
+import {
+	type Action,
+	type ActionButton,
+	type Field,
+	type FieldType,
+	type Filter,
+	type SortDirection,
+	type SupportedLayouts,
+	type View,
+	DataViews,
+	filterSortAndPaginate,
+} from '@wordpress/dataviews';
+import { dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useCallback, useMemo, useState } from 'react';
+import { ThreatSeverityBadge, getThreatType, type Threat } from '@automattic/jetpack-scan';
+import ThreatFixerButton from '../threat-fixer-button/index.tsx';
+import {
+	THREAT_ACTION_FIX,
+	THREAT_ACTION_IGNORE,
+	THREAT_ACTION_UNIGNORE,
+	THREAT_FIELD_AUTO_FIX,
+	THREAT_FIELD_DESCRIPTION,
+	THREAT_FIELD_EXTENSION,
+	THREAT_FIELD_FIRST_DETECTED,
+	THREAT_FIELD_FIXED_ON,
+	THREAT_FIELD_ICON,
+	THREAT_FIELD_PLUGIN,
+	THREAT_FIELD_SEVERITY,
+	THREAT_FIELD_SIGNATURE,
+	THREAT_FIELD_STATUS,
+	THREAT_FIELD_THEME,
+	THREAT_FIELD_TITLE,
+	THREAT_FIELD_TYPE,
+	THREAT_ICONS,
+	THREAT_STATUSES,
+	THREAT_TYPES,
+} from './constants.ts';
+import styles from './styles.module.scss';
+import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-control.tsx';
+
+/**
+ * DataViews component for displaying security threats.
+ *
+ * @param {object}   props                             - Component props.
+ * @param {Array}    props.data                        - Threats data.
+ * @param {Array}    props.filters                     - Initial DataView filters.
+ * @param {Function} props.onChangeSelection           - Callback function run when an item is selected.
+ * @param {Function} props.onFixThreats                - Threat fix action callback.
+ * @param {Function} props.onIgnoreThreats             - Threat ignore action callback.
+ * @param {Function} props.onUnignoreThreats           - Threat unignore action callback.
+ * @param {Function} props.isThreatEligibleForFix      - Function to determine if a threat is eligible for fixing.
+ * @param {Function} props.isThreatEligibleForIgnore   - Function to determine if a threat is eligible for ignoring.
+ * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring.
+ *
+ * @return {JSX.Element} The ThreatsDataViews component.
+ */
+export default function ThreatsDataViews( {
+	data,
+	filters,
+	onChangeSelection,
+	isThreatEligibleForFix,
+	isThreatEligibleForIgnore,
+	isThreatEligibleForUnignore,
+	onFixThreats,
+	onIgnoreThreats,
+	onUnignoreThreats,
+}: {
+	data: Threat[];
+	filters?: Filter[];
+	onChangeSelection?: ( selectedItemIds: string[] ) => void;
+	isThreatEligibleForFix?: ( threat: Threat ) => boolean;
+	isThreatEligibleForIgnore?: ( threat: Threat ) => boolean;
+	isThreatEligibleForUnignore?: ( threat: Threat ) => boolean;
+	onFixThreats?: ( threats: Threat[] ) => void;
+	onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
+	onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
+} ): JSX.Element {
+	const baseView = {
+		sort: {
+			field: 'severity',
+			direction: 'desc' as SortDirection,
+		},
+		search: '',
+		filters: 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: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
+			titleField: THREAT_FIELD_TITLE,
+			descriptionField: THREAT_FIELD_DESCRIPTION,
+			showMedia: false,
+		},
+		list: {
+			...baseView,
+			fields: [
+				THREAT_FIELD_SEVERITY,
+				THREAT_FIELD_TYPE,
+				THREAT_FIELD_EXTENSION,
+				THREAT_FIELD_SIGNATURE,
+			],
+			titleField: THREAT_FIELD_TITLE,
+			mediaField: THREAT_FIELD_ICON,
+			showMedia: true,
+		},
+	};
+
+	/**
+	 * 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,
+	} );
+
+	/**
+	 * Compute values from the provided threats data.
+	 *
+	 * @member {object[]} themes    - List of unique themes included in the threats data.
+	 * @member {object[]} plugins   - plugins included in the threats data.
+	 * @member {object[]} signatures - List of unique threat signatures.
+	 * @member {string[]}    dataFields - List of unique fields.
+	 */
+	const {
+		themes,
+		plugins,
+		signatures,
+		dataFields,
+	}: {
+		themes: { value: string; label: string }[];
+		plugins: { value: string; label: string }[];
+		signatures: { value: string; label: string }[];
+		dataFields: string[];
+	} = useMemo( () => {
+		return data.reduce(
+			( acc, threat ) => {
+				// Extensions (Themes and Plugins)
+				if ( threat.extension ) {
+					switch ( threat.extension.type ) {
+						case 'themes':
+							if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) {
+								acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } );
+							}
+							break;
+						case 'plugins':
+							if ( ! acc.plugins.find( ( { value } ) => value === threat.extension.slug ) ) {
+								acc.plugins.push( { value: threat.extension.slug, label: threat.extension.name } );
+							}
+							break;
+						default:
+							break;
+					}
+				}
+
+				// Signatures
+				if ( threat.signature ) {
+					if ( ! acc.signatures.find( ( { value } ) => value === threat.signature ) ) {
+						acc.signatures.push( { value: threat.signature, label: threat.signature } );
+					}
+				}
+
+				// Fields
+				const fields = Object.keys( threat );
+				fields.forEach( field => {
+					if (
+						! acc.dataFields.includes( field ) &&
+						threat[ field ] !== null &&
+						threat[ field ] !== undefined
+					) {
+						acc.dataFields.push( field );
+					}
+				} );
+
+				return acc;
+			},
+			{
+				themes: [],
+				plugins: [],
+				signatures: [],
+				dataFields: [],
+			}
+		);
+	}, [ data ] );
+
+	/**
+	 * 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 result: Field< Threat >[] = [
+			{
+				id: THREAT_FIELD_TITLE,
+				label: __( 'Threat', 'jetpack-scan' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render: ( { item }: { item: Threat } ) => (
+					<div className={ styles.threat__title }>{ item.title }</div>
+				),
+			},
+			{
+				id: THREAT_FIELD_DESCRIPTION,
+				label: __( 'Description', 'jetpack-scan' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render: ( { item }: { item: Threat } ) => (
+					<div className={ styles.threat__description }>{ item.description }</div>
+				),
+			},
+			{
+				id: THREAT_FIELD_ICON,
+				label: __( 'Icon', 'jetpack-scan' ),
+				enableHiding: false,
+				getValue( { item }: { item: Threat } ) {
+					return getThreatType( item );
+				},
+				render( { item }: { item: Threat } ) {
+					return (
+						<div className={ styles.threat__media }>
+							<Icon icon={ THREAT_ICONS[ getThreatType( item ) ] } size={ 20 } />
+						</div>
+					);
+				},
+			},
+			{
+				id: THREAT_FIELD_STATUS,
+				label: __( 'Status', 'jetpack-scan' ),
+				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-scan' ) }</Badge>;
+				},
+			},
+			{
+				id: THREAT_FIELD_TYPE,
+				label: __( 'Type', 'jetpack-scan' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: Threat } ) {
+					switch ( getThreatType( item ) ) {
+						case 'core':
+							return __( 'WordPress', 'jetpack-scan' );
+						case 'plugins':
+							return __( 'Plugin', 'jetpack-scan' );
+						case 'themes':
+							return __( 'Theme', 'jetpack-scan' );
+						case 'file':
+							return __( 'File', 'jetpack-scan' );
+						default:
+							return __( 'Unknown', 'jetpack-scan' );
+					}
+				},
+			},
+			{
+				id: THREAT_FIELD_EXTENSION,
+				label: __( 'Extension', 'jetpack-scan' ),
+				enableGlobalSearch: true,
+				enableHiding: true,
+				getValue( { item }: { item: Threat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+				render( { item }: { item: Threat } ) {
+					return item.extension ? item.extension.name : '';
+				},
+			},
+			{
+				id: THREAT_FIELD_PLUGIN,
+				label: __( 'Plugin', 'jetpack-scan' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				elements: plugins,
+				getValue( { item }: { item: Threat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			{
+				id: THREAT_FIELD_THEME,
+				label: __( 'Theme', 'jetpack-scan' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				elements: themes,
+				getValue( { item }: { item: Threat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			...( dataFields.includes( 'severity' )
+				? [
+						{
+							id: THREAT_FIELD_SEVERITY,
+							label: __( 'Severity', 'jetpack-scan' ),
+							type: 'integer' as FieldType,
+							getValue( { item }: { item: Threat } ) {
+								return item.severity ?? 0;
+							},
+							render( { item }: { item: Threat } ) {
+								return <ThreatSeverityBadge severity={ item.severity } />;
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'signature' )
+				? [
+						{
+							id: THREAT_FIELD_SIGNATURE,
+							label: __( 'Signature', 'jetpack-scan' ),
+							elements: signatures,
+							enableGlobalSearch: true,
+							getValue( { item }: { item: Threat } ) {
+								return item.signature || '';
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'firstDetected' )
+				? [
+						{
+							id: THREAT_FIELD_FIRST_DETECTED,
+							label: __( 'First Detected', 'jetpack-scan' ),
+							type: 'datetime' as FieldType,
+							getValue( { item }: { item: Threat } ) {
+								return item.firstDetected ? new Date( item.firstDetected ) : null;
+							},
+							render( { item }: { item: Threat } ) {
+								return item.firstDetected ? (
+									<span className={ styles.threat__firstDetected }>
+										{ dateI18n( 'F j Y', item.firstDetected, false ) }
+									</span>
+								) : null;
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixedOn' )
+				? [
+						{
+							id: THREAT_FIELD_FIXED_ON,
+							label: __( 'Fixed On', 'jetpack-scan' ),
+							type: 'datetime' as FieldType,
+							getValue( { item }: { item: Threat } ) {
+								return item.fixedOn ? new Date( item.fixedOn ) : null;
+							},
+							render( { item }: { item: Threat } ) {
+								return item.fixedOn ? (
+									<span className={ styles.threat__fixedOn }>
+										{ dateI18n( 'F j Y', item.fixedOn, false ) }
+									</span>
+								) : null;
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'fixable' )
+				? [
+						{
+							id: THREAT_FIELD_AUTO_FIX,
+							label: __( 'Auto-fix', 'jetpack-scan' ),
+							enableHiding: false,
+							elements: [
+								{
+									value: 'yes',
+									label: __( 'Yes', 'jetpack-scan' ),
+								},
+								{
+									value: 'no',
+									label: __( 'No', 'jetpack-scan' ),
+								},
+							],
+							getValue( { item }: { item: Threat } ) {
+								return item.fixable ? 'yes' : 'no';
+							},
+							render( { item }: { item: Threat } ) {
+								if ( ! item.fixable ) {
+									return null;
+								}
+
+								return <ThreatFixerButton threat={ item } onClick={ onFixThreats } />;
+							},
+						},
+				  ]
+				: [] ),
+		];
+
+		return result;
+	}, [ dataFields, plugins, themes, signatures, onFixThreats ] );
+
+	/**
+	 * DataView actions - collection of operations that can be performed upon each record.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#actions-object
+	 */
+	const actions = useMemo( () => {
+		const result: Action< Threat >[] = [];
+
+		if ( dataFields.includes( 'fixable' ) ) {
+			result.push( {
+				id: THREAT_ACTION_FIX,
+				label: __( 'Auto-fix', 'jetpack-scan' ),
+				isPrimary: true,
+				callback: onFixThreats,
+				isEligible( item ) {
+					if ( ! onFixThreats ) {
+						return false;
+					}
+					if ( isThreatEligibleForFix ) {
+						return isThreatEligibleForFix( item );
+					}
+					return !! item.fixable;
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: THREAT_ACTION_IGNORE,
+				label: __( 'Ignore', 'jetpack-scan' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onIgnoreThreats,
+				isEligible( item ) {
+					if ( ! onIgnoreThreats ) {
+						return false;
+					}
+					if ( isThreatEligibleForIgnore ) {
+						return isThreatEligibleForIgnore( item );
+					}
+					return item.status === 'current';
+				},
+			} );
+		}
+
+		if ( dataFields.includes( 'status' ) ) {
+			result.push( {
+				id: THREAT_ACTION_UNIGNORE,
+				label: __( 'Unignore', 'jetpack-scan' ),
+				isPrimary: true,
+				isDestructive: true,
+				callback: onUnignoreThreats,
+				isEligible( item ) {
+					if ( ! onUnignoreThreats ) {
+						return false;
+					}
+					if ( isThreatEligibleForUnignore ) {
+						return isThreatEligibleForUnignore( item );
+					}
+					return item.status === 'ignored';
+				},
+			} );
+		}
+
+		return result;
+	}, [
+		dataFields,
+		onFixThreats,
+		onIgnoreThreats,
+		onUnignoreThreats,
+		isThreatEligibleForFix,
+		isThreatEligibleForIgnore,
+		isThreatEligibleForUnignore,
+	] );
+
+	/**
+	 * 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: Threat ) => item.id.toString(), [] );
+
+	return (
+		<DataViews
+			actions={ actions }
+			data={ processedData }
+			defaultLayouts={ defaultLayouts }
+			fields={ fields }
+			getItemId={ getItemId }
+			onChangeSelection={ onChangeSelection }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			view={ view }
+			header={
+				<ThreatsStatusToggleGroupControl
+					data={ data }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			}
+		/>
+	);
+}

package/src/components/threats-data-views/styles.module.scss

@@ -0,0 +1,40 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
+.threat__title {
+	color: var( --jp-gray-80 );
+	font-weight: 510;
+	white-space: initial;
+}
+
+.threat__description {
+	color: var( --jp-gray-80 );
+	font-size: 12px;
+	white-space: initial;
+}
+
+.threat__fixedOn,
+.threat__firstDetected {
+	white-space: nowrap;
+}
+
+.threat__fixedOn {
+	color: var( --jp-green-70 );
+}
+
+.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 );
+	}
+}
+
+.toggle-group-control {
+	min-width: 300px;
+}

package/src/components/threats-data-views/test/index.test.jsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import ThreatsDataViews from '../index.tsx';
+
+const data = [
+	// Scan API Data
+	{
+		id: 185869885,
+		signature: 'EICAR_AV_Test',
+		title: 'Malicious code found in file: index.php',
+		description:
+			"This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.",
+		firstDetected: '2024-10-07T20:45:06.000Z',
+		fixedIn: null,
+		fixedOn: '2024-10-07T20:45:06.000Z',
+		fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' },
+		fixer: {
+			status: 'in_progress',
+			startedAt: '2024-10-07T20:45:06.000Z',
+			lastUpdated: '2024-10-07T20:45:06.000Z',
+		},
+		severity: 8,
+		status: 'current',
+		filename: '/var/www/html/wp-content/index.php',
+		context: {
+			1: 'echo <<<HTML',
+			2: 'X5O!P%@AP[4\\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*',
+			3: 'HTML;',
+			marks: {},
+		},
+	},
+	// Protect Report Data
+	{
+		id: '1d0470df-4671-47ac-8d87-a165e8f7d502',
+		title: 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection',
+		description:
+			'Versions 3.2.3 and earlier are affected by an issue where cached queries within shortcodes could lead to object injection. This is related to the recent WordPress 4.8.3 security release.This issue can only be exploited by users who can edit content and add shortcodes, but we still recommend all users running WooCommerce 3.x upgrade to 3.2 to mitigate this issue.',
+		source: 'https://wpscan.com/vulnerability/1d0470df-4671-47ac-8d87-a165e8f7d502',
+		extension: {
+			name: 'WooCommerce',
+			slug: 'woocommerce',
+			version: '3.2.3',
+			type: 'plugins',
+		},
+		fixedIn: '3.2.4',
+	},
+];
+
+describe( 'ThreatsDataViews', () => {
+	it( 'renders threat data', () => {
+		render( <ThreatsDataViews data={ data } /> );
+		expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument();
+		expect(
+			screen.getByText( 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection' )
+		).toBeInTheDocument();
+	} );
+} );