My Jetpack: Add a Protect 'needs-attention' status when Threats are detected.

projects/packages/my-jetpack/_inc/components/product-card/action-button.tsx

@@ -216,18 +216,62 @@ const ActionButton: FC< ActionButtonProps > = ( {
 						PRODUCT_STATUSES.EXPIRED in primaryActionOverride &&
 						primaryActionOverride[ PRODUCT_STATUSES.EXPIRED ] ),
 				};
-			case PRODUCT_STATUSES.NEEDS_ATTENTION:
-				return {
+			case PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR: {
+				const defaultButton: Partial< SecondaryButtonProps > = {
+					...buttonState,
+					href: manageUrl,
+					variant: 'primary',
+					label: __( 'Troubleshoot', 'jetpack-my-jetpack' ),
+					...( primaryActionOverride &&
+						PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR in primaryActionOverride &&
+						primaryActionOverride[ PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR ] ),
+				};
+				switch ( slug ) {
+					case 'backup':
+						return {
+							...defaultButton,
+							href: troubleshootBackupsUrl,
+						};
+					case 'protect':
+						return {
+							...defaultButton,
+							label: __( 'Fix threats', 'jetpack-my-jetpack' ),
+						};
+					default:
+						return {
+							...defaultButton,
+						};
+				}
+			}
+			case PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING: {
+				const defaultButton: Partial< SecondaryButtonProps > = {
 					...buttonState,
-					href: troubleshootBackupsUrl,
+					href: manageUrl,
 					variant: 'primary',
 					label: __( 'Troubleshoot', 'jetpack-my-jetpack' ),
 					...( primaryActionOverride &&
-						PRODUCT_STATUSES.NEEDS_ATTENTION in primaryActionOverride &&
-						primaryActionOverride[ PRODUCT_STATUSES.NEEDS_ATTENTION ] ),
+						PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING in primaryActionOverride &&
+						primaryActionOverride[ PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING ] ),
 				};
+				switch ( slug ) {
+					case 'protect':
+						return {
+							...defaultButton,
+							label: __( 'Fix threats', 'jetpack-my-jetpack' ),
+						};
+					default:
+						return {
+							...defaultButton,
+						};
+				}
+			}
 			default:
-				return null;
+				return {
+					...buttonState,
+					href: purchaseUrl || `#/add-${ slug }`,
+					label: __( 'Learn more', 'jetpack-my-jetpack' ),
+					onClick: onAdd,
+				};
 		}
 	}, [
 		status,

projects/packages/my-jetpack/_inc/components/product-card/index.tsx

@@ -73,8 +73,10 @@ const ProductCard: FC< ProductCardProps > = props => {
 	const isOwned = ownedProducts?.includes( slug );
 
 	const isError =
-		status === PRODUCT_STATUSES.EXPIRED || status === PRODUCT_STATUSES.NEEDS_ATTENTION;
-	const isWarning = status === PRODUCT_STATUSES.EXPIRING_SOON;
+		status === PRODUCT_STATUSES.EXPIRED || status === PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR;
+	const isWarning =
+		status === PRODUCT_STATUSES.EXPIRING_SOON ||
+		status === PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING;
 	const isAbsent =
 		status === PRODUCT_STATUSES.ABSENT || status === PRODUCT_STATUSES.ABSENT_WITH_PLAN;
 	const isPurchaseRequired = status === PRODUCT_STATUSES.NEEDS_PLAN;
@@ -219,6 +221,7 @@ const ProductCard: FC< ProductCardProps > = props => {
 						) }
 					</div>
 					<Status
+						slug={ slug }
 						status={ status }
 						isFetching={ isLoading }
 						isInstallingStandalone={ isInstallingStandalone }

projects/packages/my-jetpack/_inc/components/product-card/status.tsx

@@ -6,15 +6,20 @@ import styles from './style.module.scss';
 import type { FC } from 'react';
 
 interface StatusProps {
+	slug: JetpackModule;
 	status: ProductStatus;
 	isFetching: boolean;
 	isInstallingStandalone: boolean;
 	isOwned: boolean;
 }
 
-type StatusStateFunction = ( status: ProductStatus, isOwned: boolean ) => string;
+type StatusStateFunction = (
+	slug: JetpackModule,
+	status: ProductStatus,
+	isOwned: boolean
+) => string;
 
-const getStatusLabel: StatusStateFunction = ( status, isOwned ) => {
+const getStatusLabel: StatusStateFunction = ( slug, status, isOwned ) => {
 	switch ( status ) {
 		case PRODUCT_STATUSES.ACTIVE:
 		case PRODUCT_STATUSES.CAN_UPGRADE:
@@ -40,14 +45,18 @@ const getStatusLabel: StatusStateFunction = ( status, isOwned ) => {
 			const inactiveText = __( 'Inactive', 'jetpack-my-jetpack' );
 			return isOwned ? needsPlanText : inactiveText;
 		}
-		case PRODUCT_STATUSES.NEEDS_ATTENTION:
+		case PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING:
+		case PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR:
+			if ( slug === 'protect' ) {
+				return __( 'Active', 'jetpack-my-jetpack' );
+			}
 			return __( 'Needs attention', 'jetpack-my-jetpack' );
 		default:
 			return __( 'Inactive', 'jetpack-my-jetpack' );
 	}
 };
 
-const getStatusClassName: StatusStateFunction = ( status, isOwned ) => {
+const getStatusClassName: StatusStateFunction = ( slug, status, isOwned ) => {
 	switch ( status ) {
 		case PRODUCT_STATUSES.ACTIVE:
 		case PRODUCT_STATUSES.CAN_UPGRADE:
@@ -64,16 +73,30 @@ const getStatusClassName: StatusStateFunction = ( status, isOwned ) => {
 		case PRODUCT_STATUSES.NEEDS_PLAN:
 			return isOwned ? styles.warning : styles.inactive;
 		case PRODUCT_STATUSES.EXPIRED:
-		case PRODUCT_STATUSES.NEEDS_ATTENTION:
+		case PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING:
+			if ( slug === 'protect' ) {
+				return styles.active;
+			}
+			return styles.warning;
+		case PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR:
+			if ( slug === 'protect' ) {
+				return styles.active;
+			}
 			return styles.error;
 		default:
 			return styles.inactive;
 	}
 };
 
-const Status: FC< StatusProps > = ( { status, isFetching, isInstallingStandalone, isOwned } ) => {
-	const flagLabel = getStatusLabel( status, isOwned );
-	const statusClassName = clsx( styles.status, getStatusClassName( status, isOwned ), {
+const Status: FC< StatusProps > = ( {
+	slug,
+	status,
+	isFetching,
+	isInstallingStandalone,
+	isOwned,
+} ) => {
+	const flagLabel = getStatusLabel( slug, status, isOwned );
+	const statusClassName = clsx( styles.status, getStatusClassName( slug, status, isOwned ), {
 		[ styles[ 'is-fetching' ] ]: isFetching || isInstallingStandalone,
 	} );
 

projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx

@@ -145,7 +145,7 @@ const BackupCard = props => {
 	return (
 		// eslint-disable-next-line react/jsx-no-bind
 		<ProductCard slug={ productSlug } Description={ noDescription } { ...props }>
-			{ status === PRODUCT_STATUSES.NEEDS_ATTENTION && backupFailure && (
+			{ status === PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR && backupFailure && (
 				<div className={ styles.backupErrorContainer }>
 					<div className={ styles.iconContainer }>
 						<Gridicon icon="notice" size={ 16 } className={ styles.iconError } />

projects/packages/my-jetpack/_inc/constants.ts

@@ -42,5 +42,6 @@ export const PRODUCT_STATUSES = {
 	CAN_UPGRADE: 'can_upgrade',
 	EXPIRING_SOON: 'expiring',
 	EXPIRED: 'expired',
-	NEEDS_ATTENTION: 'needs_attention',
+	NEEDS_ATTENTION__ERROR: 'needs_attention_error',
+	NEEDS_ATTENTION__WARNING: 'needs_attention_warning',
 };

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-backup-needs-attention-notice.tsx

@@ -16,7 +16,10 @@ const useBackupNeedsAttentionNotice = ( redBubbleAlerts: RedBubbleAlerts ) => {
 	const { recordEvent } = useAnalytics();
 	const { setNotice } = useContext( NoticeContext );
 
-	const { status, last_updated: lastUpdated } = redBubbleAlerts?.backup_failure || {};
+	const {
+		type,
+		data: { status, last_updated: lastUpdated },
+	} = redBubbleAlerts?.backup_failure || { type: 'error', data: {} };
 	const { text: errorDescription } = useGetReadableFailedBackupReason() || {};
 
 	const {
@@ -79,7 +82,7 @@ const useBackupNeedsAttentionNotice = ( redBubbleAlerts: RedBubbleAlerts ) => {
 
 		const noticeOptions: NoticeOptions = {
 			id: 'backup-needs-attention-notice',
-			level: 'error',
+			level: type,
 			actions: [
 				{
 					label: __( 'Read troubleshooting guide', 'jetpack-my-jetpack' ),
@@ -108,6 +111,7 @@ const useBackupNeedsAttentionNotice = ( redBubbleAlerts: RedBubbleAlerts ) => {
 		onSecondaryCtaClick,
 		noticeTitle,
 		backupStatusLastUpdatedDate,
+		type,
 		errorDescription,
 	] );
 };

projects/packages/my-jetpack/changelog/add-protect-fix-threats-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+My Jetpack: Added a new status for when Protect detects threats on the site.

projects/packages/my-jetpack/global.d.ts

@@ -388,9 +388,12 @@ interface Window {
 				};
 			};
 			backup_failure?: {
-				source: 'rewind' | 'last_backup';
-				status: RewindStatus | BackupStatus;
-				last_updated: string;
+				type: 'warning' | 'error';
+				data: {
+					source: 'rewind' | 'last_backup';
+					status: RewindStatus | BackupStatus;
+					last_updated: string;
+				};
 			};
 			[ key: `${ string }--plan_expired` ]: {
 				product_slug: string;

projects/packages/my-jetpack/src/class-initializer.php

@@ -21,7 +21,6 @@
 use Automattic\Jetpack\Licensing;
 use Automattic\Jetpack\Modules;
 use Automattic\Jetpack\Plugins_Installer;
-use Automattic\Jetpack\Protect_Status\Status as Protect_Status;
 use Automattic\Jetpack\Status;
 use Automattic\Jetpack\Status\Host as Status_Host;
 use Automattic\Jetpack\Sync\Functions as Sync_Functions;
@@ -234,7 +233,7 @@ public static function enqueue_scripts() {
 			$previous_score = $speed_score_history->latest( 1 );
 		}
 		$latest_score['previousScores'] = $previous_score['scores'] ?? array();
-		$scan_data                      = Protect_Status::get_status();
+		$scan_data                      = Products\Protect::get_protect_data();
 		self::update_historically_active_jetpack_modules();
 
 		$waf_config = array();
@@ -1045,7 +1044,7 @@ public static function alert_if_paid_plan_expiring( array $red_bubble_slugs ) {
 	 * @return array
 	 */
 	public static function alert_if_last_backup_failed( array $red_bubble_slugs ) {
-		// Make sure we're dealing with the backup product only
+		// Make sure we're dealing with the Backup product only
 		if ( ! Products\Backup::has_paid_plan_for_product() ) {
 			return $red_bubble_slugs;
 		}

projects/packages/my-jetpack/src/class-products.php

@@ -29,7 +29,8 @@ class Products {
 	const STATUS_NEEDS_PLAN                  = 'needs_plan';
 	const STATUS_NEEDS_ACTIVATION            = 'needs_activation';
 	const STATUS_NEEDS_FIRST_SITE_CONNECTION = 'needs_first_site_connection';
-	const STATUS_NEEDS_ATTENTION             = 'needs_attention';
+	const STATUS_NEEDS_ATTENTION__WARNING    = 'needs_attention_warning';
+	const STATUS_NEEDS_ATTENTION__ERROR      = 'needs_attention_error';
 
 	/**
 	 * List of statuses that display the module as disabled
@@ -67,7 +68,8 @@ class Products {
 		self::STATUS_USER_CONNECTION_ERROR,
 		self::STATUS_PLUGIN_ABSENT_WITH_PLAN,
 		self::STATUS_NEEDS_PLAN,
-		self::STATUS_NEEDS_ATTENTION,
+		self::STATUS_NEEDS_ATTENTION__ERROR,
+		self::STATUS_NEEDS_ATTENTION__WARNING,
 	);
 
 	/**
@@ -109,7 +111,8 @@ class Products {
 		self::STATUS_NEEDS_PLAN,
 		self::STATUS_NEEDS_ACTIVATION,
 		self::STATUS_NEEDS_FIRST_SITE_CONNECTION,
-		self::STATUS_NEEDS_ATTENTION,
+		self::STATUS_NEEDS_ATTENTION__WARNING,
+		self::STATUS_NEEDS_ATTENTION__ERROR,
 	);
 
 	/**

projects/packages/my-jetpack/src/products/class-backup.php

@@ -249,9 +249,12 @@ public static function does_module_need_attention() {
 		if ( ! is_wp_error( $rewind_state ) ) {
 			if ( $rewind_state->state !== 'active' && $rewind_state->state !== 'provisioning' && $rewind_state->state !== 'awaiting_credentials' ) {
 				$backup_failed_status = array(
-					'source'       => 'rewind',
-					'status'       => isset( $rewind_state->reason ) && ! empty( $rewind_state->reason ) ? $rewind_state->reason : $rewind_state->state,
-					'last_updated' => $rewind_state->last_updated,
+					'type' => 'error',
+					'data' => array(
+						'source'       => 'rewind',
+						'status'       => isset( $rewind_state->reason ) && ! empty( $rewind_state->reason ) ? $rewind_state->reason : $rewind_state->state,
+						'last_updated' => $rewind_state->last_updated,
+					),
 				);
 			}
 		}
@@ -270,9 +273,12 @@ public static function does_module_need_attention() {
 			if ( $last_backup && isset( $last_backup->status ) ) {
 				if ( $last_backup->status !== 'started' && ! preg_match( '/-will-retry$/', $last_backup->status ) && $last_backup->status !== 'finished' ) {
 					$backup_failed_status = array(
-						'source'       => 'last_backup',
-						'status'       => $last_backup->status,
-						'last_updated' => $last_backup->last_updated,
+						'type' => 'error',
+						'data' => array(
+							'source'       => 'last_backup',
+							'status'       => $last_backup->status,
+							'last_updated' => $last_backup->last_updated,
+						),
 					);
 				}
 			}

projects/packages/my-jetpack/src/products/class-product.php

@@ -10,7 +10,6 @@
 use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Modules;
-use Automattic\Jetpack\My_Jetpack\Products\Backup;
 use Automattic\Jetpack\Plugins_Installer;
 use Automattic\Jetpack\Status;
 use Jetpack_Options;
@@ -717,8 +716,12 @@
 			} elseif ( static::$requires_user_connection && ! ( new Connection_Manager() )->has_connected_owner() ) {
 				$status = Products::STATUS_USER_CONNECTION_ERROR;
 			} elseif ( static::has_paid_plan_for_product() ) {
-				if ( static::$slug === 'backup' && Backup::does_module_need_attention() ) {
-					$status = Products::STATUS_NEEDS_ATTENTION;
+				$needs_attention = static::does_module_need_attention();
+				if ( $needs_attention ) {
+					$status = Products::STATUS_NEEDS_ATTENTION__WARNING;
+					if ( isset( $needs_attention['type'] ) && 'error' === $needs_attention['type'] ) {
+						$status = Products::STATUS_NEEDS_ATTENTION__ERROR;
+					}
 				}
 				if ( static::is_paid_plan_expired() ) {
 					$status = Products::STATUS_EXPIRED;