Protect: Update fixer UI to handle long running fixers

projects/plugins/protect/changelog/update-protect-fixer-ui-to-handle-long-running-fixers

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds handling for long running fixers

projects/plugins/protect/src/js/components/firewall-header/index.jsx

@@ -7,13 +7,14 @@ import {
 	Button,
 	Status,
 } from '@automattic/jetpack-components';
-import { Spinner, Popover } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, help } from '@wordpress/icons';
-import React, { useState, useCallback } from 'react';
+import { help } from '@wordpress/icons';
+import React, { useCallback } from 'react';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
+import IconTooltip from '../icon-tooltip';
 import styles from './styles.module.scss';
 
 const UpgradePrompt = () => {
@@ -44,51 +45,21 @@ const UpgradePrompt = () => {
 	);
 };
 
-const FirewallSubheadingPopover = ( {
-	children = __(
-		'The free version of the firewall does not receive updates to automatic security rules.',
-		'jetpack-protect'
-	),
-} ) => {
-	const [ showPopover, setShowPopover ] = useState( false );
-
-	const handleEnter = useCallback( () => {
-		setShowPopover( true );
-	}, [] );
-
-	const handleOut = useCallback( () => {
-		setShowPopover( false );
-	}, [] );
-
-	return (
-		<div
-			className={ styles[ 'icon-popover' ] }
-			onMouseLeave={ handleOut }
-			onMouseEnter={ handleEnter }
-			onClick={ handleEnter }
-			onFocus={ handleEnter }
-			onBlur={ handleOut }
-			role="presentation"
-		>
-			<Icon icon={ help } />
-			{ showPopover && (
-				<Popover noArrow={ false } offset={ 5 } inline={ true }>
-					<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
-						{ children }
-					</Text>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-const FirewallSubheadingContent = ( { className, text = '', popover = false, children } ) => {
+const FirewallSubheadingContent = ( { className, text = '', popover = false } ) => {
 	return (
 		<div className={ styles[ 'firewall-subheading__content' ] }>
 			<Text className={ styles[ className ] } weight={ 600 }>
 				{ text }
 			</Text>
-			{ popover && <FirewallSubheadingPopover children={ children } /> }
+			{ popover && (
+				<IconTooltip
+					icon={ help }
+					text={ __(
+						'The free version of the firewall does not receive updates to automatic security rules.',
+						'jetpack-protect'
+					) }
+				/>
+			) }
 		</div>
 	);
 };

projects/plugins/protect/src/js/components/firewall-header/styles.module.scss

@@ -17,12 +17,6 @@ svg.spinner {
 
     &__content {
         display: flex;
-
-        > .icon-popover {
-            display: flex;
-            margin-left: calc( var( --spacing-base ) / 2 ); // 4px
-            fill: var( --jp-gray-20 );
-        }
     }
 }
 
@@ -47,11 +41,6 @@ svg.spinner {
     }
 }
 
-.popover-text {
-	width: 250px;
-	padding: calc( var( --spacing-base ) * 2 ); // 16px
-}
-
 .loading-text {
     font-size: 18px;
 }

projects/plugins/protect/src/js/components/fix-all-threats-modal/index.jsx

@@ -14,21 +14,23 @@ const FixAllThreatsModal = ( { threatList = [] } ) => {
 
 	const [ threatIds, setThreatIds ] = useState( threatList.map( ( { id } ) => parseInt( id ) ) );
 
-	const handleCancelClick = useCallback( () => {
-		return event => {
+	const handleCancelClick = useCallback(
+		event => {
 			event.preventDefault();
 			setModal( { type: null } );
-		};
-	}, [ setModal ] );
+		},
+		[ setModal ]
+	);
 
-	const handleFixClick = useCallback( () => {
-		return async event => {
+	const handleFixClick = useCallback(
+		async event => {
 			event.preventDefault();
 
 			await fixThreats( threatIds );
 			setModal( { type: null } );
-		};
-	}, [ fixThreats, setModal, threatIds ] );
+		},
+		[ fixThreats, setModal, threatIds ]
+	);
 
 	const handleCheckboxClick = useCallback(
 		( checked, threat ) => {
@@ -63,12 +65,12 @@ const FixAllThreatsModal = ( { threatList = [] } ) => {
 				</div>
 
 				<div className={ styles.footer }>
-					<Button variant="secondary" onClick={ handleCancelClick() }>
+					<Button variant="secondary" onClick={ handleCancelClick }>
 						{ __( 'Cancel', 'jetpack-protect' ) }
 					</Button>
 					<Button
 						isLoading={ isFixersLoading }
-						onClick={ handleFixClick() }
+						onClick={ handleFixClick }
 						disabled={ ! threatIds.length }
 					>
 						{ __( 'Fix all threats', 'jetpack-protect' ) }

projects/plugins/protect/src/js/components/icon-tooltip/index.jsx

@@ -0,0 +1,51 @@
+import { Text } from '@automattic/jetpack-components';
+import { Icon, Popover } from '@wordpress/components';
+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;

projects/plugins/protect/src/js/components/icon-tooltip/styles.module.scss

@@ -0,0 +1,11 @@
+.icon-popover {
+	display: flex;
+	margin-left: calc( var( --spacing-base ) / 2 ); // 4px
+	fill: var( --jp-gray-20 );
+}
+
+.popover-text {
+	width: 250px;
+	padding: calc( var( --spacing-base ) * 2 ); // 16px
+	cursor: default;
+}