Add ThreatsDataView

projects/js-packages/components/changelog/add-threats-data-view-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ThreatsDataView component

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,55 @@
+import { ExternalLink, Spinner } from '@wordpress/components';
+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';
+
+/**
+ * Fixer Status component.
+ *
+ * @param {object}  props                       - Component props.
+ * @param {boolean} props.isActiveFixInProgress - Whether an active fix is in progress.
+ * @param {boolean} props.isStaleFixInProgress  - Whether a stale fix is in progress.
+ *
+ * @return {JSX.Element} The component.
+ */
+export default function FixerStatus( {
+	isActiveFixInProgress,
+	isStaleFixInProgress,
+}: {
+	isActiveFixInProgress: boolean;
+	isStaleFixInProgress: boolean;
+} ): JSX.Element {
+	if ( isStaleFixInProgress ) {
+		return (
+			<IconTooltip
+				icon={ info }
+				iconClassName={ styles[ 'icon-info' ] }
+				iconSize={ 24 }
+				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 ( isActiveFixInProgress ) {
+		return <Spinner color="black" />;
+	}
+
+	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;
+}

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;