Add ThreatsDataView

Add support for list view in threats data table

Minor adjustments

Add badge component and integrate with threats data view

Update stories and align auto-fix column

Update ThreatDataView list view fixer status (#39854)

Add ThreatsDataView

changelog

projects/js-packages/components/components/threats-data-view/constants.ts

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support';
+
+export const THREAT_STATUSES = [
+	{ value: 'current', label: __( 'Active', 'jetpack' ) },
+	{ value: 'fixed', label: __( 'Fixed', 'jetpack' ) },
+	{ 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' ) },
+	{ value: 'database', label: __( 'Database', 'jetpack' ) },
+];

projects/js-packages/components/components/threats-data-view/fixer-status.tsx

@@ -0,0 +1,156 @@
+import { ExternalLink, Spinner } from '@wordpress/components';
+import { View } from '@wordpress/dataviews';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { check, info } from '@wordpress/icons';
+import { PAID_PLUGIN_SUPPORT_URL } from './constants';
+import IconTooltip from './icon-tooltip';
+import styles from './styles.module.scss';
+import { ThreatFixStatus } from './types';
+import { fixerStatusIsStale } from './utils';
+
+/**
+ * Fixer Status component.
+ *
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {number}  props.size  - The size of the icon.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function FixerStatusIcon( {
+	fixer,
+	size = 24,
+}: {
+	fixer?: ThreatFixStatus;
+	size?: number;
+} ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ size }
+				text={ createInterpolateElement(
+					__(
+						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				text={ createInterpolateElement(
+					__(
+						'An error occurred auto-fixing this threat. Please try again or <supportLink>contact support</supportLink>.',
+						'jetpack'
+					),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			/>
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return (
+			<div className={ styles[ 'icon-spinner' ] }>
+				<Spinner color="black" />
+			</div>
+		);
+	}
+
+	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
+}
+
+/**
+ * FixerStatusText component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	if ( fixer && fixerStatusIsStale( fixer ) ) {
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'Fixer is taking longer than expected', 'jetpack' ) }
+			</span>
+		);
+	}
+
+	if ( fixer && 'error' in fixer && fixer.error ) {
+		return (
+			<span className={ styles[ 'info-spacer' ] }>
+				{ __( 'An error occurred auto-fixing this threat', 'jetpack' ) }
+			</span>
+		);
+	}
+
+	if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
+		return <span className={ styles[ 'spinner-spacer' ] }>{ __( 'Auto-fixing', 'jetpack' ) }</span>;
+	}
+
+	return <span className={ styles[ 'check-spacer' ] }>{ __( 'Auto-fixable', 'jetpack' ) }</span>;
+}
+
+/**
+ * FixerStatusBadge component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @return {string} The component.
+ */
+export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
+	return (
+		<div className={ styles[ 'fixer-status' ] }>
+			<FixerStatusIcon fixer={ fixer } />
+			<FixerStatusText fixer={ fixer } />
+		</div>
+	);
+}
+
+/**
+ * DataViewFixerStatus component.
+ * @param {object}  props       - Component props.
+ * @param {boolean} props.fixer - The fixer status.
+ * @param {object}  props.view  - The view.
+ * @return {string} The component.
+ */
+export function DataViewFixerStatus( {
+	fixer,
+	view,
+}: {
+	fixer?: ThreatFixStatus;
+	view: View;
+} ): JSX.Element {
+	if ( view.type === 'table' ) {
+		return (
+			<div className={ styles.threat__fixer }>
+				<FixerStatusIcon fixer={ fixer } />
+			</div>
+		);
+	}
+
+	return <FixerStatusBadge fixer={ fixer } />;
+}

projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx

@@ -0,0 +1,52 @@
+import { Text } from '@automattic/jetpack-components';
+import { Popover } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import React, { useCallback, useState } from 'react';
+import styles from './styles.module.scss';
+
+const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => {
+	const [ showPopover, setShowPopover ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
+	const handleEnter = useCallback( () => {
+		// Clear any existing timeout if user hovers back quickly
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+			setTimeoutId( null );
+		}
+		setShowPopover( true );
+	}, [ timeoutId ] );
+
+	const handleOut = useCallback( () => {
+		// Set a timeout to delay the hiding of the popover
+		const id = setTimeout( () => {
+			setShowPopover( false );
+			setTimeoutId( null ); // Clear the timeout ID after the popover is hidden
+		}, 100 );
+
+		setTimeoutId( id );
+	}, [] );
+
+	return (
+		<div
+			className={ styles[ 'icon-popover' ] }
+			onMouseLeave={ handleOut }
+			onMouseEnter={ handleEnter }
+			onClick={ handleEnter }
+			onFocus={ handleEnter }
+			onBlur={ handleOut }
+			role="presentation"
+		>
+			<Icon className={ iconClassName } icon={ icon } size={ iconSize } />
+			{ showPopover && (
+				<Popover noArrow={ false } offset={ 5 } inline={ true } position={ popoverPosition }>
+					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
+						{ text }
+					</Text>
+				</Popover>
+			) }
+		</div>
+	);
+};
+
+export default IconTooltip;