@automattic/jetpack-components 0.60.0 → 0.62.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.62.0] - 2024-11-25
+### Added
+- Add Stats icon [#40236]
+- Adds ThreatModal component and stories [#40197]
+
+### Changed
+- Updated package dependencies. [#40288]
+
+## [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]
@@ -17,9 +29,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
@@ -189,9 +199,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
@@ -416,8 +424,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
@@ -467,8 +474,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
@@ -746,8 +752,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]
@@ -1221,6 +1226,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.62.0]: https://github.com/Automattic/jetpack-components/compare/0.61.0...0.62.0
+[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

package/components/diff-viewer/styles.module.scss

@@ -14,7 +14,7 @@
 	display: flex;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 	white-space: pre;
 }
 

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/icons/index.tsx

@@ -234,6 +234,18 @@ export const AiIcon: React.FC< BaseIconProps > = ( {
 	);
 };
 
+export const StatsIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => {
+	return (
+		<IconWrapper size={ size } opacity={ opacity } color={ color }>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M11.25 5H12.75V20H11.25V5ZM6 10H7.5V20H6V10ZM18 14H16.5V20H18V14Z"
+			/>
+		</IconWrapper>
+	);
+};
+
 const jetpackIcons = {
 	'anti-spam': AntiSpamIcon,
 	backup: BackupIcon,
@@ -249,6 +261,7 @@ const jetpackIcons = {
 	jetpack: JetpackIcon,
 	share: ShareIcon,
 	ai: AiIcon,
+	stats: StatsIcon,
 };
 
 const iconsMap = {

package/components/marked-lines/styles.module.scss

@@ -4,7 +4,7 @@
 	font-family: monospace;
 	display: flex;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 }
 
 .marked-lines__marked-line {

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

@@ -1,9 +1,9 @@
 import { Button } from '@automattic/jetpack-components';
 import {
 	type Threat,
-	fixerIsInError,
-	fixerIsInProgress,
-	fixerStatusIsStale,
+	getFixerState,
+	getFixerAction,
+	getFixerMessage,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -30,10 +30,7 @@ export default function ThreatFixerButton( {
 	className?: string;
 } ): JSX.Element {
 	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 };
+		return getFixerState( threat.fixer );
 	}, [ threat.fixer ] );
 
 	const tooltipText = useMemo( () => {
@@ -53,54 +50,7 @@ export default function ThreatFixerButton( {
 			return __( 'An auto-fixer is in progress.', '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 getFixerMessage( threat );
 	}, [ threat, fixerState ] );
 
 	const buttonText = useMemo( () => {
@@ -112,18 +62,8 @@ export default function ThreatFixerButton( {
 			return __( 'Error', 'jetpack' );
 		}
 
-		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 ] );
+		return getFixerAction( threat );
+	}, [ threat, fixerState.error ] );
 
 	const handleClick = useCallback(
 		( event: React.MouseEvent ) => {

package/components/threat-modal/credentials-gate.tsx

@@ -0,0 +1,65 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import React, { ReactElement } from 'react';
+import styles from './styles.module.scss';
+
+const CredentialsGate = ( {
+	siteCredentialsNeeded,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	children,
+}: {
+	siteCredentialsNeeded: boolean;
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	children: ReactElement;
+} ): JSX.Element => {
+	if ( ! siteCredentialsNeeded ) {
+		return children;
+	}
+
+	return (
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+				children={
+					<Text>
+						{ __(
+							'Before Jetpack can auto-fix threats on your site, it needs your server credentials.',
+							'jetpack'
+						) }
+					</Text>
+				}
+			/>
+
+			<Text>
+				{ __(
+					'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to perform fix threats detected on your site.',
+					'jetpack'
+				) }
+			</Text>
+
+			<Text>
+				{ __(
+					'Once you’ve entered server credentials, Jetpack will be fixing the selected threats.',
+					'jetpack'
+				) }
+			</Text>
+
+			<div className={ styles[ 'modal-actions' ] }>
+				<Button
+					isExternalLink={ true }
+					weight="regular"
+					href={ credentialsRedirectUrl }
+					isLoading={ credentialsIsFetching }
+				>
+					{ __( 'Enter server credentials', 'jetpack' ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default CredentialsGate;

package/components/threat-modal/index.tsx

@@ -0,0 +1,153 @@
+import { Button, ThreatSeverityBadge } from '@automattic/jetpack-components';
+import { type Threat, getFixerState } from '@automattic/jetpack-scan';
+import { Modal, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import Text from '../text';
+import CredentialsGate from './credentials-gate';
+import styles from './styles.module.scss';
+import ThreatActions from './threat-actions';
+import ThreatFixDetails from './threat-fix-details';
+import ThreatTechnicalDetails from './threat-technical-details';
+import UserConnectionGate from './user-connection-gate';
+
+/**
+ * ThreatModal component
+ *
+ * @param {object}   props                           - The props.
+ * @param {object}   props.threat                    - The threat.
+ * @param {boolean}  props.isUserConnected           - Whether the user is connected.
+ * @param {boolean}  props.hasConnectedOwner         - Whether the user has a connected owner.
+ * @param {boolean}  props.userIsConnecting          - Whether the user is connecting.
+ * @param {Function} props.handleConnectUser         - The handleConnectUser function.
+ * @param {object}   props.credentials               - The credentials.
+ * @param {boolean}  props.credentialsIsFetching     - Whether the credentials are fetching.
+ * @param {string}   props.credentialsRedirectUrl    - The credentials redirect URL.
+ * @param {Function} props.handleUpgradeClick        - The handleUpgradeClick function.
+ * @param {Function} props.handleFixThreatClick      - The handleFixThreatClick function.
+ * @param {Function} props.handleIgnoreThreatClick   - The handleIgnoreThreatClick function.
+ * @param {Function} props.handleUnignoreThreatClick - The handleUnignoreThreatClick function.
+ *
+ * @return {JSX.Element} The threat modal.
+ */
+export default function ThreatModal( {
+	threat,
+	isUserConnected,
+	hasConnectedOwner,
+	userIsConnecting,
+	handleConnectUser,
+	credentials,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	handleUpgradeClick,
+	handleFixThreatClick,
+	handleIgnoreThreatClick,
+	handleUnignoreThreatClick,
+	...modalProps
+}: {
+	threat: Threat;
+	isUserConnected: boolean;
+	hasConnectedOwner: boolean;
+	userIsConnecting: boolean;
+	handleConnectUser: () => void;
+	credentials: false | Record< string, unknown >[];
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	handleUpgradeClick?: () => void;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+} & React.ComponentProps< typeof Modal > ): JSX.Element {
+	const userConnectionNeeded = ! isUserConnected || ! hasConnectedOwner;
+	const siteCredentialsNeeded = ! credentials || credentials.length === 0;
+
+	const fixerState = useMemo( () => {
+		return getFixerState( threat.fixer );
+	}, [ threat.fixer ] );
+
+	const getModalTitle = useMemo( () => {
+		if ( userConnectionNeeded ) {
+			return <Text variant="title-small">{ __( 'User connection needed', 'jetpack' ) }</Text>;
+		}
+
+		if ( siteCredentialsNeeded ) {
+			return <Text variant="title-small">{ __( 'Site credentials needed', 'jetpack' ) }</Text>;
+		}
+
+		return (
+			<>
+				<Text variant="title-small">{ threat.title }</Text>
+				{ !! threat.severity && <ThreatSeverityBadge severity={ threat.severity } /> }
+			</>
+		);
+	}, [ userConnectionNeeded, siteCredentialsNeeded, threat.title, threat.severity ] );
+
+	return (
+		<Modal
+			size="large"
+			title={ <div className={ styles.title }>{ getModalTitle }</div> }
+			{ ...modalProps }
+		>
+			<div className={ styles[ 'threat-details' ] }>
+				<UserConnectionGate
+					userConnectionNeeded={ userConnectionNeeded }
+					userIsConnecting={ userIsConnecting }
+					handleConnectUser={ handleConnectUser }
+				>
+					<CredentialsGate
+						siteCredentialsNeeded={ siteCredentialsNeeded }
+						credentialsIsFetching={ credentialsIsFetching }
+						credentialsRedirectUrl={ credentialsRedirectUrl }
+					>
+						<>
+							{ fixerState.error && (
+								<Notice isDismissible={ false } status="error">
+									<Text>{ __( 'An error occurred auto-fixing this threat.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							{ fixerState.stale && (
+								<Notice isDismissible={ false } status="error">
+									<Text>{ __( 'The auto-fixer is taking longer than expected.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							{ fixerState.inProgress && ! fixerState.stale && (
+								<Notice isDismissible={ false } status="success">
+									<Text>{ __( 'The auto-fixer is in progress.', 'jetpack' ) }</Text>
+								</Notice>
+							) }
+							<div className={ styles.section }>
+								{ !! threat.description && <Text>{ threat.description }</Text> }
+
+								{ !! threat.source && (
+									<div>
+										<Button
+											variant="link"
+											isExternalLink={ true }
+											weight="regular"
+											href={ threat.source }
+										>
+											{ __( 'See more technical details of this threat', 'jetpack' ) }
+										</Button>
+									</div>
+								) }
+							</div>
+
+							<ThreatFixDetails threat={ threat } handleUpgradeClick={ handleUpgradeClick } />
+
+							<ThreatTechnicalDetails threat={ threat } />
+
+							<ThreatActions
+								threat={ threat }
+								closeModal={ modalProps.onRequestClose }
+								handleFixThreatClick={ handleFixThreatClick }
+								handleIgnoreThreatClick={ handleIgnoreThreatClick }
+								handleUnignoreThreatClick={ handleUnignoreThreatClick }
+								fixerState={ fixerState }
+							/>
+						</>
+					</CredentialsGate>
+				</UserConnectionGate>
+			</div>
+		</Modal>
+	);
+}

package/components/threat-modal/styles.module.scss

@@ -0,0 +1,35 @@
+.threat-details {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 3 ); // 24px
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 2 ); // 16px
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	gap: calc( var( --spacing-base ) * 1.5 ); // 12px
+}
+
+.filename {
+	background-color: var( --jp-gray-0 );
+	padding: calc( var( --spacing-base ) * 3 ); // 24px
+	overflow-x: auto;
+}
+
+.modal-actions {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
+	border-top: 1px solid var( --jp-gray-0 );
+
+	.threat-actions {
+		display: flex;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+}

package/components/threat-modal/threat-actions.tsx

@@ -0,0 +1,97 @@
+import { Button } from '@automattic/jetpack-components';
+import { Threat, getFixerAction } from '@automattic/jetpack-scan';
+import { __ } from '@wordpress/i18n';
+import React, { useCallback, useMemo } from 'react';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatActions component
+ *
+ * @param {object}   props                             - The component props.
+ * @param {object}   props.threat                      - The threat object containing action details.
+ * @param {Function} props.closeModal                  - Function to close the modal.
+ * @param {Function} [props.handleFixThreatClick]      - Function to handle fixing the threat.
+ * @param {Function} [props.handleIgnoreThreatClick]   - Function to handle ignoring the threat.
+ * @param {Function} [props.handleUnignoreThreatClick] - Function to handle unignoring the threat.
+ * @param {object}   props.fixerState                  - The state of the fixer (inProgress, error, stale).
+ * @param {boolean}  props.fixerState.inProgress       - Whether the fixer is in progress.
+ * @param {boolean}  props.fixerState.error            - Whether the fixer encountered an error.
+ * @param {boolean}  props.fixerState.stale            - Whether the fixer is stale.
+ *
+ * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
+ */
+const ThreatActions = ( {
+	threat,
+	closeModal,
+	handleFixThreatClick,
+	handleIgnoreThreatClick,
+	handleUnignoreThreatClick,
+	fixerState,
+}: {
+	threat: Threat;
+	closeModal: () => void;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+	fixerState: { inProgress: boolean; error: boolean; stale: boolean };
+} ): JSX.Element => {
+	const fixerAction = useMemo( () => getFixerAction( threat ), [ threat ] );
+
+	const onFixClick = useCallback( () => {
+		handleFixThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleFixThreatClick, closeModal ] );
+
+	const onIgnoreClick = useCallback( () => {
+		handleIgnoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleIgnoreThreatClick, closeModal ] );
+
+	const onUnignoreClick = useCallback( () => {
+		handleUnignoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleUnignoreThreatClick, closeModal ] );
+
+	if ( ! handleFixThreatClick && ! handleIgnoreThreatClick && ! handleUnignoreThreatClick ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'modal-actions' ] }>
+			<div className={ styles[ 'threat-actions' ] }>
+				{ threat.status === 'ignored' && handleUnignoreThreatClick && (
+					<Button isDestructive={ true } variant="secondary" onClick={ onUnignoreClick }>
+						{ __( 'Un-ignore', 'jetpack' ) }
+					</Button>
+				) }
+				{ threat.status === 'current' && (
+					<>
+						{ handleIgnoreThreatClick && (
+							<Button
+								isDestructive={ true }
+								variant="secondary"
+								onClick={ onIgnoreClick }
+								disabled={ fixerState.inProgress && ! fixerState.stale }
+							>
+								{ __( 'Ignore', 'jetpack' ) }
+							</Button>
+						) }
+						{ threat.fixable && handleFixThreatClick && (
+							<Button
+								isPrimary
+								disabled={ fixerState.inProgress && ! fixerState.stale }
+								onClick={ onFixClick }
+							>
+								{ fixerState.error || fixerState.stale
+									? __( 'Retry fix', 'jetpack' )
+									: fixerAction }
+							</Button>
+						) }
+					</>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ThreatActions;

package/components/threat-modal/threat-fix-details.tsx

@@ -0,0 +1,68 @@
+import { Threat, getFixerMessage } from '@automattic/jetpack-scan';
+import { __, sprintf } from '@wordpress/i18n';
+import React, { useMemo } from 'react';
+import ContextualUpgradeTrigger from '../contextual-upgrade-trigger';
+import Text from '../text';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatFixDetails component
+ *
+ * @param {object}   props                    - The component props.
+ * @param {object}   props.threat             - The threat object containing fix details.
+ * @param {Function} props.handleUpgradeClick - Function to handle upgrade click events.
+ *
+ * @return {JSX.Element | null} The rendered fix details or null if no fixable details are available.
+ */
+const ThreatFixDetails = ( {
+	threat,
+	handleUpgradeClick,
+}: {
+	threat: Threat;
+	handleUpgradeClick: () => void;
+} ): JSX.Element => {
+	const title = useMemo( () => {
+		if ( threat.status === 'fixed' ) {
+			return __( 'How did Jetpack fix it?', 'jetpack' );
+		}
+		if ( threat.status === 'current' && threat.fixable ) {
+			return __( 'How can Jetpack auto-fix this threat?', 'jetpack' );
+		}
+		return __( 'How to fix it?', 'jetpack' );
+	}, [ threat ] );
+
+	const fix = useMemo( () => {
+		// The threat has a fixed version available, but no auto-fix is available.
+		// The user needs to update the extension to the fixed version.
+		if ( ! threat.fixable && threat.fixedIn ) {
+			return sprintf(
+				/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
+				__( 'Update %1$s to version %2$s.', 'jetpack' ),
+				threat.extension.name,
+				threat.fixedIn
+			);
+		}
+		// The threat has an auto-fix available.
+		return getFixerMessage( threat );
+	}, [ threat ] );
+
+	if ( ! threat.fixable && ! threat.fixedIn ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<Text variant="title-small">{ title }</Text>
+			<Text>{ fix }</Text>
+			{ handleUpgradeClick && (
+				<ContextualUpgradeTrigger
+					description={ __( 'Looking for advanced scan results and one-click fixes?', 'jetpack' ) }
+					cta={ __( 'Upgrade Jetpack now', 'jetpack' ) }
+					onClick={ handleUpgradeClick }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default ThreatFixDetails;

package/components/threat-modal/threat-technical-details.tsx

@@ -0,0 +1,36 @@
+import { Threat } from '@automattic/jetpack-scan';
+import { __ } from '@wordpress/i18n';
+import DiffViewer from '../diff-viewer';
+import MarkedLines from '../marked-lines';
+import Text from '../text';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatTechnicalDetails component
+ *
+ * @param {object} props        - The component props.
+ * @param {object} props.threat - The threat object containing technical details.
+ *
+ * @return {JSX.Element | null} The rendered technical details or null if no details are available.
+ */
+const ThreatTechnicalDetails = ( { threat }: { threat: Threat } ): JSX.Element => {
+	if ( ! threat.filename && ! threat.context && ! threat.diff ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<Text variant="title-small">{ __( 'The technical details', 'jetpack' ) }</Text>
+			{ threat.filename && (
+				<>
+					<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
+					<pre className={ styles.filename }>{ threat.filename }</pre>
+				</>
+			) }
+			{ threat.context && <MarkedLines context={ threat.context } /> }
+			{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+		</div>
+	);
+};
+
+export default ThreatTechnicalDetails;

package/components/threat-modal/user-connection-gate.tsx

@@ -0,0 +1,64 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import React, { ReactElement } from 'react';
+import styles from './styles.module.scss';
+
+const UserConnectionGate = ( {
+	userConnectionNeeded,
+	userIsConnecting,
+	handleConnectUser,
+	children,
+}: {
+	userConnectionNeeded: boolean;
+	userIsConnecting: boolean;
+	handleConnectUser: () => void;
+	children: ReactElement;
+} ): JSX.Element => {
+	if ( ! userConnectionNeeded ) {
+		return children;
+	}
+	return (
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+				children={
+					<Text>
+						{ __(
+							'Before Jetpack can ignore and auto-fix threats on your site, a user connection is needed.',
+							'jetpack'
+						) }
+					</Text>
+				}
+			/>
+
+			<Text>
+				{ __(
+					'A user connection provides Jetpack the access necessary to perform these tasks.',
+					'jetpack'
+				) }
+			</Text>
+
+			<Text>
+				{ __(
+					'Once you’ve secured a user connection, all Jetpack features will be available for use.',
+					'jetpack'
+				) }
+			</Text>
+
+			<div className={ styles[ 'modal-actions' ] }>
+				<Button
+					isExternalLink={ true }
+					weight="regular"
+					isLoading={ userIsConnecting }
+					onClick={ handleConnectUser }
+				>
+					{ __( 'Connect your user account', 'jetpack' ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default UserConnectionGate;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.60.0",
+	"version": "0.62.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,29 +15,29 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.46",
-		"@automattic/jetpack-scan": "^0.2.0",
+		"@automattic/jetpack-boost-score-api": "^0.1.47",
+		"@automattic/jetpack-scan": "^0.3.0",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.11.0",
-		"@wordpress/components": "28.11.0",
-		"@wordpress/compose": "7.11.0",
-		"@wordpress/data": "10.11.0",
-		"@wordpress/dataviews": "4.7.0",
-		"@wordpress/date": "5.11.0",
-		"@wordpress/element": "6.11.0",
-		"@wordpress/i18n": "5.11.0",
-		"@wordpress/icons": "10.11.0",
-		"@wordpress/notices": "5.11.0",
+		"@wordpress/browserslist-config": "6.12.0",
+		"@wordpress/components": "28.12.0",
+		"@wordpress/compose": "7.12.0",
+		"@wordpress/data": "10.12.0",
+		"@wordpress/dataviews": "4.8.0",
+		"@wordpress/date": "5.12.0",
+		"@wordpress/element": "6.12.0",
+		"@wordpress/i18n": "5.12.0",
+		"@wordpress/icons": "10.12.0",
+		"@wordpress/notices": "5.12.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.12",
+		"social-logos": "^3.1.13",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.36",
+		"@automattic/jetpack-base-styles": "^0.6.37",
 		"@babel/core": "7.26.0",
 		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",