@automattic/jetpack-components 0.58.1 → 0.59.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.59.0] - 2024-11-11
+### Added
+- Add ThreatsDataViews component [#39754]
+- Components: add ref for container component [#39850]
+- IconTooltip: add support for showing tooltip on hover. [#39916]
+
+### Changed
+- Add ToggleGroupControl to ThreatsDataViews for easily toggling between Active and Historical threats [#39901]
+- Updated package dependencies. [#39999]
+- Updated package dependencies. [#40000]
+- Updated package dependencies. [#40060]
+
 ## [0.58.1] - 2024-11-04
 ### Added
 - Enable test coverage. [#39961]
@@ -1202,6 +1214,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.59.0]: https://github.com/Automattic/jetpack-components/compare/0.58.1...0.59.0
 [0.58.1]: https://github.com/Automattic/jetpack-components/compare/0.58.0...0.58.1
 [0.58.0]: https://github.com/Automattic/jetpack-components/compare/0.57.0...0.58.0
 [0.57.0]: https://github.com/Automattic/jetpack-components/compare/0.56.3...0.57.0

package/components/badge/index.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './style.module.scss';
+
+type BadgeProps = {
+	children?: React.ReactNode;
+	className?: string;
+	variant?: 'success' | 'warning' | 'danger';
+	[ key: string ]: unknown;
+};
+
+/**
+ * Badge component
+ *
+ * @param {object}      props           - The component properties.
+ * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
+ * @param {JSX.Element} props.children  - Badge text or content.
+ * @param {string}      props.className - Additional class name to pass to the Badge component.
+ *
+ * @return {React.ReactElement} The `Badge` component.
+ */
+const Badge: React.FC< BadgeProps > = ( { children, className, variant = 'info', ...props } ) => {
+	const classes = clsx(
+		styles.badge,
+		{
+			[ styles[ 'is-success' ] ]: variant === 'success',
+			[ styles[ 'is-warning' ] ]: variant === 'warning',
+			[ styles[ 'is-danger' ] ]: variant === 'danger',
+		},
+		className
+	);
+	return (
+		<span className={ classes } { ...props }>
+			{ children }
+		</span>
+	);
+};
+
+export default Badge;

package/components/badge/style.module.scss

@@ -0,0 +1,25 @@
+.badge {
+	display: inline-block;
+	border-radius: 4px;
+	background-color: var(--jp-gray-0);
+	color: var(--jp-gray-80);
+	padding: 4px 8px;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 16px;
+
+	&.is-success {
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-50);
+	}
+
+    &.is-warning {
+		background-color: var(--jp-yellow-5);
+		color: var(--jp-yellow-60);
+	}
+
+    &.is-danger {
+		background-color: var(--jp-red-5);
+		color: var(--jp-red-70);
+	}
+}

package/components/icon-tooltip/index.tsx

@@ -38,12 +38,14 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	children,
 	popoverAnchorStyle = 'icon',
 	forceShow = false,
+	hoverShow = false,
 	wide = false,
 	inline = true,
 	shift = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
+	const [ hoverTimeout, setHoverTimeout ] = useState( null );
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(
 		e => {
@@ -78,8 +80,33 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 
 	const isForcedToShow = isAnchorWrapper && forceShow;
 
+	const handleMouseEnter = useCallback( () => {
+		if ( hoverShow ) {
+			if ( hoverTimeout ) {
+				clearTimeout( hoverTimeout );
+				setHoverTimeout( null );
+			}
+			setIsVisible( true );
+		}
+	}, [ hoverShow, hoverTimeout ] );
+
+	const handleMouseLeave = useCallback( () => {
+		if ( hoverShow ) {
+			const id = setTimeout( () => {
+				setIsVisible( false );
+				setHoverTimeout( null );
+			}, 100 );
+			setHoverTimeout( id );
+		}
+	}, [ hoverShow ] );
+
 	return (
-		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
+		<div
+			className={ wrapperClassNames }
+			data-testid="icon-tooltip_wrapper"
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
 			{ ! isAnchorWrapper && (
 				<Button variant="link" onMouseDown={ toggleTooltip }>
 					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />

package/components/icon-tooltip/types.ts

@@ -69,6 +69,11 @@ export type IconTooltipProps = {
 	 */
 	forceShow?: boolean;
 
+	/**
+	 * Enables the Popover to show on hover.
+	 */
+	hoverShow?: boolean;
+
 	/**
 	 * Uses a wider content area when enabled.
 	 */

package/components/layout/container/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { createElement, useMemo } from 'react';
+import { createElement, forwardRef, useMemo } from 'react';
 import { ContainerProps } from '../types';
 import styles from './style.module.scss';
 import type React from 'react';
@@ -7,17 +7,21 @@ import type React from 'react';
 /**
  * JP Container
  *
- * @param {ContainerProps} props - Component properties.
+ * @param {ContainerProps}         props - Component properties.
+ * @param {React.MutableRefObject} ref   - Ref to the component
  * @return {React.ReactElement}   Container component.
  */
-const Container: React.FC< ContainerProps > = ( {
-	children,
-	fluid = false,
-	tagName = 'div',
-	className,
-	horizontalGap = 1,
-	horizontalSpacing = 1,
-} ) => {
+const Container = (
+	{
+		children,
+		fluid = false,
+		tagName = 'div',
+		className,
+		horizontalGap = 1,
+		horizontalSpacing = 1,
+	}: ContainerProps,
+	ref: React.MutableRefObject< HTMLElement | null >
+): React.ReactElement => {
 	const containerStyle = useMemo( () => {
 		const padding = `calc( var(--horizontal-spacing) * ${ horizontalSpacing } )`;
 		const rowGap = `calc( var(--horizontal-spacing) * ${ horizontalGap } )`;
@@ -38,9 +42,10 @@ const Container: React.FC< ContainerProps > = ( {
 		{
 			className: containerClassName,
 			style: containerStyle,
+			ref,
 		},
 		children
 	);
 };
 
-export default Container;
+export default forwardRef< HTMLElement, ContainerProps >( Container );

package/components/text/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo, forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants';
 import styles from './style.module.scss';
 import type { H3Props, TextProps, TitleProps } from './types';
@@ -26,12 +26,11 @@ const Text = forwardRef< HTMLElement, TextProps >(
 			}, '' );
 		}, [ componentProps ] );
 
-		componentProps.ref = ref;
-
 		return (
 			<Component
 				className={ clsx( styles.reset, styles[ variant ], className, boxModelClasses ) }
 				{ ...componentProps }
+				ref={ ref }
 			>
 				{ children }
 			</Component>

package/components/text/types.ts

@@ -39,7 +39,6 @@ export type TextProps = {
 	children: React.ReactNode;
 	/** Force an specific tag (span, div) or use a custom component that will receive className and children */
 	component?: React.FC< { [ prop: string ]: unknown } > | React.ElementType;
-	[ prop: string ]: unknown;
 };
 
 export type H3Props = TextProps & {

package/components/threat-fixer-button/index.tsx

@@ -0,0 +1,142 @@
+import { Button, Text, ActionPopover } from '@automattic/jetpack-components';
+import { CONTACT_SUPPORT_URL, type Threat, fixerStatusIsStale } from '@automattic/jetpack-scan';
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement, useCallback, useMemo, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+/**
+ * Threat Fixer Button component.
+ *
+ * @param {object}   props           - Component props.
+ * @param {object}   props.threat    - The threat.
+ * @param {Function} props.onClick   - The onClick function.
+ * @param {string}   props.className - The className.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function ThreatFixerButton( {
+	threat,
+	className,
+	onClick,
+}: {
+	threat: Threat;
+	onClick: ( items: Threat[] ) => void;
+	className?: string;
+} ): JSX.Element {
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	const [ anchor, setAnchor ] = useState( null );
+
+	const children = useMemo( () => {
+		if ( ! threat.fixable ) {
+			return null;
+		}
+		if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) {
+			return __( 'Error', 'jetpack' );
+		}
+		if ( threat.fixer && 'status' in threat.fixer && threat.fixer.status === 'in_progress' ) {
+			return __( 'Fixing…', 'jetpack' );
+		}
+		if ( threat.fixable.fixer === 'delete' ) {
+			return __( 'Delete', 'jetpack' );
+		}
+		if ( threat.fixable.fixer === 'update' ) {
+			return __( 'Update', 'jetpack' );
+		}
+		return __( 'Fix', 'jetpack' );
+	}, [ threat.fixable, threat.fixer ] );
+
+	const errorMessage = useMemo( () => {
+		if ( threat.fixer && fixerStatusIsStale( threat.fixer ) ) {
+			return __( 'The fixer is taking longer than expected.', 'jetpack' );
+		}
+
+		if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) {
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
+		}
+
+		return null;
+	}, [ threat.fixer ] );
+
+	const handleClick = useCallback(
+		( event: React.MouseEvent ) => {
+			event.stopPropagation();
+			if ( errorMessage && ! isPopoverVisible ) {
+				setIsPopoverVisible( true );
+				return;
+			}
+			onClick( [ threat ] );
+		},
+		[ onClick, errorMessage, isPopoverVisible, threat ]
+	);
+
+	const closePopover = useCallback( () => {
+		setIsPopoverVisible( false );
+	}, [] );
+
+	if ( ! threat.fixable ) {
+		return null;
+	}
+
+	return (
+		<div>
+			<Button
+				size="small"
+				weight="regular"
+				variant="secondary"
+				onClick={ handleClick }
+				children={ children }
+				className={ className }
+				disabled={
+					threat.fixer &&
+					'status' in threat.fixer &&
+					threat.fixer.status === 'in_progress' &&
+					! errorMessage
+				}
+				isLoading={
+					threat.fixer && 'status' in threat.fixer && threat.fixer.status === 'in_progress'
+				}
+				isDestructive={
+					( threat.fixable && threat.fixable.fixer === 'delete' ) ||
+					( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) ||
+					( threat.fixer && fixerStatusIsStale( threat.fixer ) )
+				}
+				style={ { minWidth: '72px' } }
+				ref={ setAnchor }
+			/>
+			{ isPopoverVisible && (
+				<ActionPopover
+					anchor={ anchor }
+					buttonContent={ __( 'Retry Fix', 'jetpack' ) }
+					hideCloseButton={ true }
+					noArrow={ false }
+					onClick={ handleClick }
+					onClose={ closePopover }
+					title={ __( 'Auto-fix error', 'jetpack' ) }
+				>
+					<Text>
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: placeholder is an error message.  */
+								__(
+									'%s Please try again or <supportLink>contact support</supportLink>.',
+									'jetpack'
+								),
+								errorMessage
+							),
+							{
+								supportLink: (
+									<ExternalLink
+										href={ CONTACT_SUPPORT_URL }
+										className={ styles[ 'support-link' ] }
+									/>
+								),
+							}
+						) }
+					</Text>
+				</ActionPopover>
+			) }
+		</div>
+	);
+}

package/components/threat-fixer-button/styles.module.scss

@@ -0,0 +1,9 @@
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}

package/components/threat-severity-badge/index.tsx

@@ -1,34 +1,24 @@
 import { _x } from '@wordpress/i18n';
-import styles from './styles.module.scss';
+import Badge from '../badge';
 
-const severityClassNames = severity => {
+const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 5 ) {
-		return 'is-critical';
-	} else if ( severity >= 3 && severity < 5 ) {
-		return 'is-high';
+		return (
+			<Badge variant="danger">
+				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ) }
+			</Badge>
+		);
 	}
-	return 'is-low';
-};
 
-const severityText = severity => {
-	if ( severity >= 5 ) {
-		return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' );
-	} else if ( severity >= 3 && severity < 5 ) {
-		return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' );
+	if ( severity >= 3 && severity < 5 ) {
+		return (
+			<Badge variant="warning">
+				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ) }
+			</Badge>
+		);
 	}
-	return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' );
-};
 
-const ThreatSeverityBadge = ( { severity } ) => {
-	return (
-		<div
-			className={ `${ styles[ 'threat-severity-badge' ] } ${
-				styles[ severityClassNames( severity ) ]
-			}` }
-		>
-			{ severityText( severity ) }
-		</div>
-	);
+	return <Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) }</Badge>;
 };
 
 export default ThreatSeverityBadge;

package/components/threats-data-views/constants.ts

@@ -0,0 +1,49 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	wordpress as coreIcon,
+} from '@wordpress/icons';
+
+export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
+	[
+		{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
+		{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
+		{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
+	];
+
+export const THREAT_TYPES = [
+	{ value: 'plugin', label: __( 'Plugin', 'jetpack' ) },
+	{ value: 'theme', label: __( 'Theme', 'jetpack' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
+	{ value: 'file', label: __( 'File', 'jetpack' ) },
+];
+
+export const THREAT_ICONS = {
+	plugin: pluginIcon,
+	theme: themeIcon,
+	core: coreIcon,
+	file: fileIcon,
+	default: shieldIcon,
+};
+
+export const THREAT_FIELD_THREAT = 'threat';
+export const THREAT_FIELD_TITLE = 'title';
+export const THREAT_FIELD_DESCRIPTION = 'description';
+export const THREAT_FIELD_ICON = 'icon';
+export const THREAT_FIELD_STATUS = 'status';
+export const THREAT_FIELD_TYPE = 'type';
+export const THREAT_FIELD_EXTENSION = 'extension';
+export const THREAT_FIELD_PLUGIN = 'plugin';
+export const THREAT_FIELD_THEME = 'theme';
+export const THREAT_FIELD_SEVERITY = 'severity';
+export const THREAT_FIELD_SIGNATURE = 'signature';
+export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
+export const THREAT_FIELD_FIXED_ON = 'fixed-on';
+export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
+
+export const THREAT_ACTION_FIX = 'fix';
+export const THREAT_ACTION_IGNORE = 'ignore';
+export const THREAT_ACTION_UNIGNORE = 'unignore';

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

@@ -0,0 +1,539 @@
+import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+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 Badge from '../badge';
+import ThreatFixerButton from '../threat-fixer-button';
+import ThreatSeverityBadge from '../threat-severity-badge';
+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_THREAT,
+	THREAT_FIELD_TITLE,
+	THREAT_FIELD_TYPE,
+	THREAT_ICONS,
+	THREAT_STATUSES,
+	THREAT_TYPES,
+} from './constants';
+import styles from './styles.module.scss';
+import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-control';
+
+/**
+ * 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_THREAT,
+				THREAT_FIELD_TYPE,
+				THREAT_FIELD_AUTO_FIX,
+			],
+			layout: {
+				primaryField: THREAT_FIELD_SEVERITY,
+				combinedFields: [
+					{
+						id: THREAT_FIELD_THREAT,
+						label: __( 'Threat', 'jetpack' ),
+						children: [ THREAT_FIELD_TITLE, THREAT_FIELD_DESCRIPTION ],
+						direction: 'vertical',
+					},
+				],
+			},
+		},
+		list: {
+			...baseView,
+			fields: [
+				THREAT_FIELD_SEVERITY,
+				THREAT_FIELD_TYPE,
+				THREAT_FIELD_EXTENSION,
+				THREAT_FIELD_SIGNATURE,
+			],
+			layout: {
+				primaryField: THREAT_FIELD_TITLE,
+				mediaField: THREAT_FIELD_ICON,
+			},
+		},
+	};
+
+	/**
+	 * 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 'theme':
+							if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) {
+								acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } );
+							}
+							break;
+						case 'plugin':
+							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: __( 'Title', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render: ( { item }: { item: Threat } ) => (
+					<div className={ styles.threat__title }>{ item.title }</div>
+				),
+			},
+			{
+				id: THREAT_FIELD_DESCRIPTION,
+				label: __( 'Description', 'jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				render: ( { item }: { item: Threat } ) => (
+					<div className={ styles.threat__description }>{ item.description }</div>
+				),
+			},
+			{
+				id: THREAT_FIELD_ICON,
+				label: __( 'Icon', 'jetpack' ),
+				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' ),
+				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' ) }</Badge>;
+				},
+			},
+			{
+				id: THREAT_FIELD_TYPE,
+				label: __( 'Type', 'jetpack' ),
+				elements: THREAT_TYPES,
+				getValue( { item }: { item: Threat } ) {
+					return getThreatType( item ) ?? '';
+				},
+			},
+			{
+				id: THREAT_FIELD_EXTENSION,
+				label: __( 'Extension', 'jetpack' ),
+				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' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				elements: plugins,
+				getValue( { item }: { item: Threat } ) {
+					return item.extension ? item.extension.slug : '';
+				},
+			},
+			{
+				id: THREAT_FIELD_THEME,
+				label: __( 'Theme', 'jetpack' ),
+				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' ),
+							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' ),
+							elements: signatures,
+							enableGlobalSearch: true,
+							getValue( { item }: { item: Threat } ) {
+								return item.signature || '';
+							},
+						},
+				  ]
+				: [] ),
+			...( dataFields.includes( 'firstDetected' )
+				? [
+						{
+							id: THREAT_FIELD_FIRST_DETECTED,
+							label: __( 'First Detected', 'jetpack' ),
+							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' ),
+							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' ),
+							enableHiding: false,
+							elements: [
+								{
+									value: 'yes',
+									label: __( 'Yes', 'jetpack' ),
+								},
+								{
+									value: 'no',
+									label: __( 'No', 'jetpack' ),
+								},
+							],
+							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' ),
+				isPrimary: true,
+				supportsBulk: 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' ),
+				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' ),
+				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/components/threats-data-views/styles.module.scss

@@ -0,0 +1,41 @@
+@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__option {
+	white-space: nowrap;
+	padding: 0 12px;
+}

package/components/threats-data-views/threats-status-toggle-group-control.tsx

@@ -0,0 +1,160 @@
+import { type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { type View } from '@wordpress/dataviews';
+import { useMemo, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+/**
+ * ToggleGroupControl component for filtering threats by status.
+ * @param {object}     props              - Component props.
+ * @param { Threat[]}  props.data         - Threats data.
+ * @param { View }     props.view         - The current view.
+ * @param { Function } props.onChangeView - Callback function to handle view changes.
+ * @return {JSX.Element|null} The component or null.
+ */
+export default function ThreatsStatusToggleGroupControl( {
+	data,
+	view,
+	onChangeView,
+}: {
+	data: Threat[];
+	view: View;
+	onChangeView: ( newView: View ) => void;
+} ): JSX.Element {
+	/**
+	 * Compute values from the provided threats data.
+	 *
+	 * @member {number} activeThreatsCount   - Count of active threats.
+	 * @member {number} historicThreatsCount - Count of historic threats.
+	 */
+	const {
+		activeThreatsCount,
+		historicThreatsCount,
+	}: {
+		activeThreatsCount: number;
+		historicThreatsCount: number;
+	} = useMemo( () => {
+		return data.reduce(
+			( acc, threat ) => {
+				if ( threat.status ) {
+					if ( threat.status === 'current' ) {
+						acc.activeThreatsCount++;
+					} else {
+						acc.historicThreatsCount++;
+					}
+				}
+				return acc;
+			},
+			{
+				activeThreatsCount: 0,
+				historicThreatsCount: 0,
+			}
+		);
+	}, [ data ] );
+
+	/**
+	 * Callback function to handle the status change filter.
+	 *
+	 * @param {string} newStatus - The new status filter value.
+	 */
+	const onStatusFilterChange = useCallback(
+		( newStatus: string ) => {
+			const updatedFilters = view.filters.filter( filter => filter.field !== 'status' );
+
+			if ( newStatus === 'active' ) {
+				updatedFilters.push( {
+					field: 'status',
+					operator: 'isAny',
+					value: [ 'current' ],
+				} );
+			} else if ( newStatus === 'historic' ) {
+				updatedFilters.push( {
+					field: 'status',
+					operator: 'isAny',
+					value: [ 'fixed', 'ignored' ],
+				} );
+			}
+
+			onChangeView( {
+				...view,
+				filters: updatedFilters,
+			} );
+		},
+		[ view, onChangeView ]
+	);
+
+	/**
+	 * Memoized function to determine if a status filter is selected.
+	 *
+	 * @param {Array} threatStatuses - List of threat statuses.
+	 */
+	const isStatusFilterSelected = useMemo(
+		() => ( threatStatuses: ThreatStatus[] ) =>
+			view.filters.some(
+				filter =>
+					filter.field === 'status' &&
+					Array.isArray( filter.value ) &&
+					filter.value.length === threatStatuses.length &&
+					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
+			),
+		[ view.filters ]
+	);
+
+	const selectedValue = useMemo( () => {
+		if ( isStatusFilterSelected( [ 'current' ] ) ) {
+			return 'active' as const;
+		}
+		if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) {
+			return 'historic' as const;
+		}
+		return '' as const;
+	}, [ isStatusFilterSelected ] );
+
+	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
+		return null;
+	}
+
+	try {
+		return (
+			<ToggleGroupControl
+				className={ styles[ 'toggle-group-control' ] }
+				value={ selectedValue }
+				onChange={ onStatusFilterChange }
+				__nextHasNoMarginBottom
+			>
+				<ToggleGroupControlOption
+					value="active"
+					label={
+						<span className={ styles[ 'toggle-group-control__option' ] }>
+							{ sprintf(
+								/* translators: %d: number of active threats */ __(
+									'Active threats (%d)',
+									'jetpack'
+								),
+								activeThreatsCount
+							) }
+						</span>
+					}
+				/>
+				<ToggleGroupControlOption
+					value="historic"
+					label={
+						<span className={ styles[ 'toggle-group-control__option' ] }>
+							{ sprintf(
+								/* translators: %d: number of historic threats */
+								__( 'History (%d)', 'jetpack' ),
+								historicThreatsCount
+							) }
+						</span>
+					}
+				/>
+			</ToggleGroupControl>
+		);
+	} catch ( error ) {
+		return null;
+	}
+}

package/index.ts

@@ -44,7 +44,9 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard';
 export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
+export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataViews } from './components/threats-data-views';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.58.1",
+	"version": "0.59.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,29 +15,31 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.44",
+		"@automattic/jetpack-boost-score-api": "^0.1.45",
+		"@automattic/jetpack-scan": "^0.1.0",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.9.0",
-		"@wordpress/components": "28.9.0",
-		"@wordpress/compose": "7.9.0",
-		"@wordpress/data": "10.9.0",
-		"@wordpress/date": "5.9.0",
-		"@wordpress/element": "6.9.0",
-		"@wordpress/i18n": "5.9.0",
-		"@wordpress/icons": "10.9.0",
-		"@wordpress/notices": "5.9.0",
+		"@wordpress/browserslist-config": "6.11.0",
+		"@wordpress/components": "28.11.0",
+		"@wordpress/compose": "7.11.0",
+		"@wordpress/data": "10.11.0",
+		"@wordpress/dataviews": "4.7.0",
+		"@wordpress/date": "5.11.0",
+		"@wordpress/element": "6.11.0",
+		"@wordpress/i18n": "5.11.0",
+		"@wordpress/icons": "10.11.0",
+		"@wordpress/notices": "5.11.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.10",
+		"social-logos": "^3.1.11",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.34",
-		"@babel/core": "7.24.7",
-		"@babel/preset-react": "7.24.7",
+		"@automattic/jetpack-base-styles": "^0.6.35",
+		"@babel/core": "7.26.0",
+		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",
 		"@storybook/addon-actions": "8.3.5",
 		"@storybook/blocks": "8.3.5",
@@ -47,8 +49,8 @@
 		"@testing-library/user-event": "14.5.2",
 		"@types/jest": "29.5.12",
 		"@types/qrcode.react": "1.0.5",
-		"@types/react": "18.3.3",
-		"@types/react-dom": "18.3.0",
+		"@types/react": "18.3.12",
+		"@types/react-dom": "18.3.1",
 		"@types/react-slider": "1.3.6",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",