@automattic/jetpack-components 0.59.0 → 0.60.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.60.0] - 2024-11-14
+### Added
+- Adds tooltips for each ThreatFixerButton state [#40111]
+
+### Fixed
+- Fixes the loading placeholder that didn't disappear when the price loads. [#40157]
+
 ## [0.59.0] - 2024-11-11
 ### Added
 - Add ThreatsDataViews component [#39754]
@@ -1214,6 +1221,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.60.0]: https://github.com/Automattic/jetpack-components/compare/0.59.0...0.60.0
 [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

package/components/pricing-card/index.tsx

@@ -55,7 +55,8 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 			) }
 			<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
 			<div className="jp-components__pricing-card__pricing">
-				{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 ? (
+				{ props.priceAfter === 0 && <LoadingPlaceholder width="100%" height={ 48 } /> }
+				{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 && (
 					<div className="jp-components__pricing-card__price-before">
 						<span className="jp-components__pricing-card__currency">
 							{ currencyObjectBefore.symbol }
@@ -71,8 +72,6 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 						) }
 						<div className="jp-components__pricing-card__price-strikethrough"></div>
 					</div>
-				) : (
-					<LoadingPlaceholder width="100%" height={ 48 } />
 				) }
 				{ props.priceAfter > 0 && (
 					<>

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

@@ -1,8 +1,13 @@
-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 { Button } from '@automattic/jetpack-components';
+import {
+	type Threat,
+	fixerIsInError,
+	fixerIsInProgress,
+	fixerStatusIsStale,
+} from '@automattic/jetpack-scan';
+import { Tooltip } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import styles from './styles.module.scss';
 
 /**
@@ -24,119 +29,133 @@ export default function ThreatFixerButton( {
 	onClick: ( items: Threat[] ) => void;
 	className?: string;
 } ): JSX.Element {
-	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
-
-	const [ anchor, setAnchor ] = useState( null );
+	const fixerState = useMemo( () => {
+		const inProgress = threat.fixer && fixerIsInProgress( threat.fixer );
+		const error = threat.fixer && fixerIsInError( threat.fixer );
+		const stale = threat.fixer && fixerStatusIsStale( threat.fixer );
+		return { inProgress, error, stale };
+	}, [ threat.fixer ] );
 
-	const children = useMemo( () => {
+	const tooltipText = useMemo( () => {
 		if ( ! threat.fixable ) {
 			return null;
 		}
-		if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) {
-			return __( 'Error', 'jetpack' );
+
+		if ( fixerState.error ) {
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
 		}
-		if ( threat.fixer && 'status' in threat.fixer && threat.fixer.status === 'in_progress' ) {
-			return __( 'Fixing…', 'jetpack' );
+
+		if ( fixerState.stale ) {
+			return __( 'The auto-fixer is taking longer than expected.', 'jetpack' );
 		}
-		if ( threat.fixable.fixer === 'delete' ) {
-			return __( 'Delete', 'jetpack' );
+
+		if ( fixerState.inProgress ) {
+			return __( 'An auto-fixer is in progress.', 'jetpack' );
 		}
-		if ( threat.fixable.fixer === 'update' ) {
-			return __( 'Update', 'jetpack' );
+
+		switch ( threat.fixable.fixer ) {
+			case 'delete':
+				if ( threat.filename ) {
+					if ( threat.filename.endsWith( '/' ) ) {
+						return __( 'Deletes the directory that the infected file is in.', 'jetpack' );
+					}
+
+					if ( threat.signature === 'Core.File.Modification' ) {
+						return __( 'Deletes the unexpected file in a core WordPress directory.', 'jetpack' );
+					}
+
+					return __( 'Deletes the infected file.', 'jetpack' );
+				}
+
+				if ( threat.extension?.type === 'plugin' ) {
+					return __( 'Deletes the plugin directory to fix the threat.', 'jetpack' );
+				}
+
+				if ( threat.extension?.type === 'theme' ) {
+					return __( 'Deletes the theme directory to fix the threat.', 'jetpack' );
+				}
+				break;
+			case 'update':
+				return __( 'Upgrades the plugin or theme to a newer version.', 'jetpack' );
+			case 'replace':
+			case 'rollback':
+				if ( threat.filename ) {
+					return threat.signature === 'Core.File.Modification'
+						? __(
+								'Replaces the modified core WordPress file with the original clean version from the WordPress source code.',
+								'jetpack'
+						  )
+						: __(
+								'Replaces the infected file with a previously backed up version that is clean.',
+								'jetpack'
+						  );
+				}
+
+				if ( threat.signature === 'php_hardening_WP_Config_NoSalts_001' ) {
+					return __(
+						'Replaces the default salt keys in wp-config.php with unique ones.',
+						'jetpack'
+					);
+				}
+				break;
+			default:
+				return __( 'An auto-fixer is available.', 'jetpack' );
 		}
-		return __( 'Fix', 'jetpack' );
-	}, [ threat.fixable, threat.fixer ] );
+	}, [ threat, fixerState ] );
 
-	const errorMessage = useMemo( () => {
-		if ( threat.fixer && fixerStatusIsStale( threat.fixer ) ) {
-			return __( 'The fixer is taking longer than expected.', 'jetpack' );
+	const buttonText = useMemo( () => {
+		if ( ! threat.fixable ) {
+			return null;
 		}
 
-		if ( threat.fixer && 'error' in threat.fixer && threat.fixer.error ) {
-			return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
+		if ( fixerState.error ) {
+			return __( 'Error', 'jetpack' );
 		}
 
-		return null;
-	}, [ threat.fixer ] );
+		switch ( threat.fixable.fixer ) {
+			case 'delete':
+				return __( 'Delete', 'jetpack' );
+			case 'update':
+				return __( 'Update', 'jetpack' );
+			case 'replace':
+			case 'rollback':
+				return __( 'Replace', 'jetpack' );
+			default:
+				return __( 'Fix', 'jetpack' );
+		}
+	}, [ threat.fixable, fixerState.error ] );
 
 	const handleClick = useCallback(
 		( event: React.MouseEvent ) => {
 			event.stopPropagation();
-			if ( errorMessage && ! isPopoverVisible ) {
-				setIsPopoverVisible( true );
-				return;
-			}
 			onClick( [ threat ] );
 		},
-		[ onClick, errorMessage, isPopoverVisible, threat ]
+		[ onClick, 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 }
+			<Tooltip className={ styles.tooltip } text={ tooltipText }>
+				<Button
+					size="small"
+					weight="regular"
+					variant="secondary"
 					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>
-			) }
+					children={ buttonText }
+					className={ className }
+					isLoading={ fixerState.inProgress }
+					isDestructive={
+						( threat.fixable && threat.fixable.fixer === 'delete' ) ||
+						fixerState.error ||
+						fixerState.stale
+					}
+					style={ { minWidth: '72px' } }
+				/>
+			</Tooltip>
 		</div>
 	);
 }

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

@@ -7,3 +7,10 @@
 		box-shadow: none;
 	}
 }
+
+.tooltip {
+	margin-top: var( --spacing-base )	;
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}

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

@@ -385,7 +385,7 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_AUTO_FIX,
-							label: __( 'Auto-Fix', 'jetpack' ),
+							label: __( 'Auto-fix', 'jetpack' ),
 							enableHiding: false,
 							elements: [
 								{
@@ -426,7 +426,7 @@ export default function ThreatsDataViews( {
 		if ( dataFields.includes( 'fixable' ) ) {
 			result.push( {
 				id: THREAT_ACTION_FIX,
-				label: __( 'Auto-Fix', 'jetpack' ),
+				label: __( 'Auto-fix', 'jetpack' ),
 				isPrimary: true,
 				supportsBulk: true,
 				callback: onFixThreats,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.59.0",
+	"version": "0.60.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,8 +15,8 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.45",
-		"@automattic/jetpack-scan": "^0.1.0",
+		"@automattic/jetpack-boost-score-api": "^0.1.46",
+		"@automattic/jetpack-scan": "^0.2.0",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.11.0",
 		"@wordpress/components": "28.11.0",
@@ -32,12 +32,12 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.11",
+		"social-logos": "^3.1.12",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.35",
+		"@automattic/jetpack-base-styles": "^0.6.36",
 		"@babel/core": "7.26.0",
 		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",