@automattic/jetpack-components 0.59.0 → 0.61.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.61.0] - 2024-11-18
+### Added
+- Gridicon Component: Add support for help-outline icon. [#39867]
+
+## [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]
@@ -10,9 +21,7 @@
 
 ### Changed
 - Add ToggleGroupControl to ThreatsDataViews for easily toggling between Active and Historical threats [#39901]
-- Updated package dependencies. [#39999]
-- Updated package dependencies. [#40000]
-- Updated package dependencies. [#40060]
+- Updated package dependencies. [#39999] [#40000] [#40060]
 
 ## [0.58.1] - 2024-11-04
 ### Added
@@ -182,9 +191,7 @@
 - Social | Wired up confirmation UI with connect button [#37295]
 
 ### Changed
-- Updated package dependencies. [#37379]
-- Updated package dependencies. [#37380]
-- Updated package dependencies. [#37382]
+- Updated package dependencies. [#37379] [#37380] [#37382]
 
 ## [0.53.2] - 2024-05-13
 ### Added
@@ -409,8 +416,7 @@
 
 ## [0.42.1] - 2023-09-04
 ### Changed
-- Updated package dependencies. [#32803]
-- Updated package dependencies. [#32804]
+- Updated package dependencies. [#32803] [#32804]
 
 ## [0.42.0] - 2023-09-01
 ### Added
@@ -460,8 +466,7 @@
 ## [0.40.1] - 2023-07-05
 ### Changed
 - Adjust component pricing slider border and box-shadow styling. [#31593]
-- Updated package dependencies. [#31659]
-- Updated package dependencies. [#31661]
+- Updated package dependencies. [#31659] [#31661]
 - Update storybook mdx to use `@storybook/blocks` directly rather than `@storybook/addon-docs`. [#31607]
 
 ### Fixed
@@ -739,8 +744,7 @@
 - Fix ProductPrice layout for long prices [#26595]
 - IconTooltip: Use click instead of mouseover for summoning [#26457]
 - Refactor props for structure consistency with JetpackLogo component. [#26510]
-- Updated package dependencies. [#26568]
-- Updated package dependencies. [#26583]
+- Updated package dependencies. [#26568] [#26583]
 
 ### Fixed
 - Components: fix the positio of TOS component of the PricingTable cmp [#26509]
@@ -1214,6 +1218,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.61.0]: https://github.com/Automattic/jetpack-components/compare/0.60.0...0.61.0
+[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/gridicon/index.tsx

@@ -24,6 +24,7 @@ class Gridicon extends Component< GridiconProps > {
 			'gridicons-calendar',
 			'gridicons-cart',
 			'gridicons-folder',
+			'gridicons-help-outline',
 			'gridicons-info',
 			'gridicons-info-outline',
 			'gridicons-posts',
@@ -66,6 +67,8 @@ class Gridicon extends Component< GridiconProps > {
 				return __( 'Toggle search filters.', 'jetpack' );
 			case 'gridicons-folder':
 				return __( 'Category', 'jetpack' );
+			case 'gridicons-help-outline':
+				return __( 'Help', 'jetpack' );
 			case 'gridicons-info':
 			case 'gridicons-info-outline':
 				return __( 'Information.', 'jetpack' );
@@ -181,6 +184,12 @@ class Gridicon extends Component< GridiconProps > {
 						<path d="M18 19H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2h7c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2z" />
 					</g>
 				);
+			case 'gridicons-help-outline':
+				return (
+					<g>
+						<path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-1.962-2v-.528c0-.4.082-.74.246-1.017.163-.276.454-.546.87-.808.333-.21.572-.397.717-.565.146-.168.22-.36.22-.577 0-.172-.078-.308-.234-.41-.156-.1-.358-.15-.608-.15-.62 0-1.34.22-2.168.658l-.854-1.67c1.02-.58 2.084-.872 3.194-.872.913 0 1.63.202 2.15.603.52.4.78.948.78 1.64 0 .495-.116.924-.347 1.287-.23.362-.6.705-1.11 1.03-.43.278-.7.48-.807.61-.108.13-.163.282-.163.458V13h-1.885z" />
+					</g>
+				);
 			case 'gridicons-image':
 				return (
 					<g>

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.61.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",