Update ThreatsDataView to use js-packages IconTooltip

projects/js-packages/components/components/icon-tooltip/index.tsx

@@ -41,9 +41,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	wide = false,
 	inline = true,
 	shift = false,
+	hoverShow = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
+	const [ timeoutId, setTimeoutId ] = useState( null );
+
 	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 	const toggleTooltip = useCallback(
 		e => {
@@ -53,6 +56,26 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		[ isVisible, setIsVisible ]
 	);
 
+	const handleMouseEnter = useCallback( () => {
+		if ( hoverShow ) {
+			if ( timeoutId ) {
+				clearTimeout( timeoutId );
+				setTimeoutId( null );
+			}
+			setIsVisible( true );
+		}
+	}, [ hoverShow, timeoutId ] );
+
+	const handleMouseLeave = useCallback( () => {
+		if ( hoverShow ) {
+			const id = setTimeout( () => {
+				setIsVisible( false );
+				setTimeoutId( null );
+			}, 100 );
+			setTimeoutId( id );
+		}
+	}, [ hoverShow ] );
+
 	const args = {
 		// To be compatible with deprecating prop `position`.
 		position: placementsToPositions( placement ),
@@ -79,7 +102,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	const isForcedToShow = isAnchorWrapper && forceShow;
 
 	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 } />

projects/js-packages/components/components/icon-tooltip/stories/index.stories.tsx

@@ -46,6 +46,9 @@ export default {
 		wide: {
 			control: { type: 'boolean' },
 		},
+		hoverShow: {
+			control: { type: 'boolean' },
+		},
 	},
 };
 
@@ -106,3 +109,11 @@ Wide.args = {
 	wide: true,
 	placement: 'bottom-start',
 };
+
+export const HoverShow = Template.bind( {} );
+HoverShow.args = {
+	title: 'This is title!',
+	children: <div>This is a tooltip!</div>,
+	placement: 'bottom-start',
+	hoverShow: true,
+};

projects/js-packages/components/components/icon-tooltip/types.ts

@@ -83,4 +83,9 @@ export type IconTooltipProps = {
 	 * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
 	 */
 	shift?: boolean;
+
+	/**
+	 * Enables the Popover to show on hover.
+	 */
+	hoverShow?: boolean;
 };

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

@@ -3,9 +3,10 @@ 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 { check } from '@wordpress/icons';
+import IconTooltip from '../icon-tooltip';
+import Text from '../text';
 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';
@@ -15,62 +16,19 @@ import { fixerStatusIsStale } from './utils';
  *
  * @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 {
+export default function FixerStatusIcon( { fixer }: { fixer?: ThreatFixStatus } ): 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 }
-							/>
-						),
-					}
-				) }
-			/>
+			<InfoIconTooltip message={ __( 'The fixer is taking longer than expected.', 'jetpack' ) } />
 		);
 	}
 
 	if ( fixer && 'error' in fixer && fixer.error ) {
 		return (
-			<IconTooltip
-				icon={ info }
-				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ size }
-				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 }
-							/>
-						),
-					}
-				) }
-			/>
+			<InfoIconTooltip message={ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) } />
 		);
 	}
 
@@ -89,7 +47,7 @@ export default function FixerStatusIcon( {
  * FixerStatusText component.
  * @param {object}  props       - Component props.
  * @param {boolean} props.fixer - The fixer status.
- * @return {string} The component.
+ * @return {JSX.Element} The component.
  */
 function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	if ( fixer && fixerStatusIsStale( fixer ) ) {
@@ -124,7 +82,7 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element
 export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
 	return (
 		<div className={ styles[ 'fixer-status' ] }>
-			<FixerStatusIcon fixer={ fixer } size={ 20 } />
+			<FixerStatusIcon fixer={ fixer } />
 			<FixerStatusText fixer={ fixer } />
 		</div>
 	);
@@ -154,3 +112,43 @@ export function DataViewFixerStatus( {
 
 	return <FixerStatusBadge fixer={ fixer } />;
 }
+
+/**
+ * InfoIconTooltip component.
+ * @param {object}  props         - Component props.
+ * @param {boolean} props.message - The popover message.
+ * @param {object}  props.size    - The size of the icon.
+ * @return {JSX.Elenment} The component.
+ */
+export function InfoIconTooltip( {
+	message,
+	size = 20,
+}: {
+	message?: string;
+	size?: number;
+} ): JSX.Element {
+	return (
+		<IconTooltip
+			placement={ 'top' }
+			className={ styles[ 'icon-tooltip__container' ] }
+			iconClassName={ styles[ 'icon-tooltip__icon' ] }
+			iconSize={ size }
+			hoverShow={ true }
+		>
+			<Text variant={ 'body-small' }>
+				{ message }{ ' ' }
+				{ createInterpolateElement(
+					__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack' ),
+					{
+						supportLink: (
+							<ExternalLink
+								className={ styles[ 'support-link' ] }
+								href={ PAID_PLUGIN_SUPPORT_URL }
+							/>
+						),
+					}
+				) }
+			</Text>
+		</IconTooltip>
+	);
+}

projects/js-packages/components/components/threats-data-view/styles.module.scss

@@ -37,10 +37,6 @@
 	fill: var( --jp-green-40 );
 }
 
-.icon-info {
-	fill: var( --jp-red );
-}
-
 .support-link {
 	color: inherit;
 
@@ -127,5 +123,19 @@
 
 .threat__fixer {
 	min-width: 54px;
-	text-align: center;
+	display: flex;
+	justify-content: center;
+}
+
+.icon-tooltip {
+	width: fit-content;
+
+	&__container {
+		text-align: left;
+		height: 20px;
+	}
+
+	&__icon {
+		color: var( --jp-red );
+	}
 }