@automattic/jetpack-components 0.61.0 → 0.63.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.63.0] - 2024-11-26
+### Changed
+- Updates ThreatModal flow [#40214]
+
+## [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]
@@ -1218,6 +1230,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.63.0]: https://github.com/Automattic/jetpack-components/compare/0.62.0...0.63.0
+[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

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/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,
+	getFixerDescription,
 } 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 getFixerDescription( 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/fixer-state-notice.tsx

@@ -0,0 +1,63 @@
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import styles from './styles.module.scss';
+import ThreatNotice from './threat-notice';
+
+/**
+ * FixerStateNotice component
+ *
+ * @param {object}  props                       - The component props.
+ * @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 fixer notice or null if no notice is available.
+ */
+const FixerStateNotice = ( {
+	fixerState,
+}: {
+	fixerState: { inProgress: boolean; error: boolean; stale: boolean };
+} ) => {
+	const { status, title, content } = useMemo( () => {
+		if ( fixerState.error ) {
+			return {
+				status: 'error' as const,
+				title: __( 'An error occurred auto-fixing this threat', 'jetpack' ),
+				content: __(
+					'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
+					'jetpack'
+				),
+			};
+		}
+
+		if ( fixerState.stale ) {
+			return {
+				status: 'error' as const,
+				title: __( 'The auto-fixer is taking longer than expected', 'jetpack' ),
+				content: __(
+					'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
+					'jetpack'
+				),
+			};
+		}
+
+		if ( fixerState.inProgress ) {
+			return {
+				status: 'success' as const,
+				title: __( 'An auto-fixer is in progress', 'jetpack' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' ),
+			};
+		}
+
+		return {};
+	}, [ fixerState ] );
+
+	return title ? (
+		<div className={ styles[ 'fixer-notice' ] }>
+			<ThreatNotice status={ status } title={ title } content={ content } />
+		</div>
+	) : null;
+};
+
+export default FixerStateNotice;

package/components/threat-modal/index.tsx

@@ -0,0 +1,108 @@
+import { type Threat } from '@automattic/jetpack-scan';
+import { Modal } from '@wordpress/components';
+import { createContext } from 'react';
+import Text from '../text';
+import ThreatSeverityBadge from '../threat-severity-badge';
+import styles from './styles.module.scss';
+import ThreatFixConfirmation from './threat-fix-confirmation';
+interface ThreatModalContextType {
+	closeModal: () => void;
+	threat: Threat;
+	handleUpgradeClick?: () => void;
+	userConnectionNeeded: boolean;
+	handleConnectUser: () => void;
+	userIsConnecting: boolean;
+	siteCredentialsNeeded: boolean;
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+}
+
+export const ThreatModalContext = createContext< ThreatModalContextType | null >( null );
+
+/**
+ * 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;
+
+	return (
+		<Modal
+			title={
+				<div className={ styles.title }>
+					<Text variant="title-small">{ threat.title }</Text>
+					{ !! threat.severity && <ThreatSeverityBadge severity={ threat.severity } /> }
+				</div>
+			}
+			size="large"
+			{ ...modalProps }
+		>
+			<div className={ styles[ 'threat-details' ] }>
+				<ThreatModalContext.Provider
+					value={ {
+						closeModal: modalProps.onRequestClose,
+						threat,
+						handleUpgradeClick,
+						userConnectionNeeded,
+						handleConnectUser,
+						userIsConnecting,
+						siteCredentialsNeeded,
+						credentialsIsFetching,
+						credentialsRedirectUrl,
+						handleFixThreatClick,
+						handleIgnoreThreatClick,
+						handleUnignoreThreatClick,
+					} }
+				>
+					<ThreatFixConfirmation />
+				</ThreatModalContext.Provider>
+			</div>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,81 @@
+.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
+}
+
+.section .section__toggle {
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	&__content {
+		display: flex;
+		gap: calc( var( --spacing-base ) / 2 ); // 4px
+		align-items: center;
+	}
+}
+
+.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-footer {
+	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
+	border-top: 1px solid var( --jp-gray-5 );
+
+	.threat-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}	
+}
+
+.fixer-notice {
+	padding-bottom: calc( var( --spacing-base ) * 3 ); // 24px
+}
+
+.notice {
+	&__title {
+		display: flex;
+		gap: calc( var( --spacing-base ) / 2 ); // 4px
+
+		p {
+			font-weight: bold;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+
+	&__action {
+		margin-top: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+}
+
+svg.spinner {
+	color: var( --jp-black );
+	height: 20px;
+	width: 20px;
+	margin-left: calc( var( --spacing-base ) / 2 ); // 4px;
+	margin-right: 6px;
+
+}

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

@@ -0,0 +1,93 @@
+import { Button } from '@automattic/jetpack-components';
+import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useContext, useMemo } from 'react';
+import FixerStateNotice from './fixer-state-notice';
+import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatActions component
+ *
+ * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
+ */
+const ThreatActions = (): JSX.Element => {
+	const {
+		closeModal,
+		threat,
+		handleFixThreatClick,
+		handleIgnoreThreatClick,
+		handleUnignoreThreatClick,
+		userConnectionNeeded,
+		siteCredentialsNeeded,
+	} = useContext( ThreatModalContext );
+	const disabled = userConnectionNeeded || siteCredentialsNeeded;
+
+	const fixerState = useMemo( () => {
+		return getFixerState( threat.fixer );
+	}, [ threat.fixer ] );
+
+	const detailedFixerAction = useMemo( () => getDetailedFixerAction( 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 ( ! threat?.status || threat.status === 'fixed' ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'modal-footer' ] }>
+			<FixerStateNotice fixerState={ fixerState } />
+			<div className={ styles[ 'threat-actions' ] }>
+				{ threat.status === 'ignored' && (
+					<Button
+						disabled={ disabled }
+						isDestructive={ true }
+						variant="secondary"
+						onClick={ onUnignoreClick }
+					>
+						{ __( 'Un-ignore threat', 'jetpack' ) }
+					</Button>
+				) }
+				{ threat.status === 'current' && (
+					<>
+						<Button
+							isDestructive={ true }
+							variant="secondary"
+							onClick={ onIgnoreClick }
+							disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
+						>
+							{ __( 'Ignore threat', 'jetpack' ) }
+						</Button>
+						{ threat.fixable && (
+							<Button
+								isPrimary
+								disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
+								onClick={ onFixClick }
+							>
+								{ fixerState.error || fixerState.stale
+									? __( 'Retry fixer', 'jetpack' )
+									: detailedFixerAction }
+							</Button>
+						) }
+					</>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ThreatActions;

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

@@ -0,0 +1,54 @@
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import ThreatActions from './threat-actions';
+import ThreatFixDetails from './threat-fix-details';
+import ThreatNotice from './threat-notice';
+import ThreatSummary from './threat-summary';
+import ThreatTechnicalDetails from './threat-technical-details';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatFixConfirmation component
+ *
+ * @return {JSX.Element} The rendered fix confirmation.
+ */
+const ThreatFixConfirmation = () => {
+	const { userConnectionNeeded, siteCredentialsNeeded } = useContext( ThreatModalContext );
+	return (
+		<>
+			<ThreatSummary />
+			<ThreatTechnicalDetails />
+			<ThreatFixDetails />
+			{ siteCredentialsNeeded && userConnectionNeeded && (
+				<ThreatNotice
+					title={ 'Additional connections needed' }
+					content={ __(
+						'A user connection and server credentials provide Jetpack the access necessary to ignore and auto-fix threats on your site.',
+						'jetpack'
+					) }
+				/>
+			) }
+			{ ! siteCredentialsNeeded && userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'User connection needed', 'jetpack' ) }
+					content={ __(
+						'A user connection provides Jetpack the access necessary to ignore and auto-fix threats on your site.',
+						'jetpack'
+					) }
+				/>
+			) }
+			{ siteCredentialsNeeded && ! userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'Site credentials needed', 'jetpack' ) }
+					content={ __(
+						'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to ignore and auto-fix threats detected on your site.',
+						'jetpack'
+					) }
+				/>
+			) }
+			<ThreatActions />
+		</>
+	);
+};
+
+export default ThreatFixConfirmation;

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

@@ -0,0 +1,62 @@
+import { getFixerDescription } from '@automattic/jetpack-scan';
+import { __, sprintf } from '@wordpress/i18n';
+import React, { useMemo, useContext } from 'react';
+import ContextualUpgradeTrigger from '../contextual-upgrade-trigger';
+import Text from '../text';
+import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatFixDetails component
+ *
+ * @return {JSX.Element | null} The rendered fix details or null if no fixable details are available.
+ */
+const ThreatFixDetails = (): JSX.Element => {
+	const { threat, handleUpgradeClick } = useContext( ThreatModalContext );
+
+	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 getFixerDescription( 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-notice.tsx

@@ -0,0 +1,84 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice, Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+import { useContext } from 'react';
+import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatNotice component
+ *
+ * @param {object} props         - The component props.
+ * @param {string} props.status  - The status of the notice.
+ * @param {string} props.title   - The title of the notice.
+ * @param {string} props.content - The content of the notice.
+ *
+ * @return {JSX.Element} The rendered ThreatNotice component.
+ */
+const ThreatNotice = ( {
+	status = 'warning',
+	title,
+	content,
+}: {
+	status?: 'warning' | 'error' | 'success' | undefined;
+	title: string;
+	content: string;
+} ): JSX.Element => {
+	const {
+		userConnectionNeeded,
+		userIsConnecting,
+		handleConnectUser,
+		siteCredentialsNeeded,
+		credentialsRedirectUrl,
+		credentialsIsFetching,
+	} = useContext( ThreatModalContext );
+
+	return (
+		<Notice
+			status={ status }
+			isDismissible={ false }
+			children={
+				<div className={ styles.notice }>
+					<div className={ styles.notice__title }>
+						{ status === 'success' ? (
+							<Spinner className={ styles.spinner } />
+						) : (
+							<Icon icon={ warning } size={ 30 } />
+						) }
+						<Text variant="title-small" mb={ 2 }>
+							{ title }
+						</Text>
+					</div>
+					<Text>{ content }</Text>
+					<div className={ styles.notice__actions }>
+						{ userConnectionNeeded && (
+							<Button
+								className={ styles.notice__action }
+								isExternalLink={ true }
+								weight="regular"
+								isLoading={ userIsConnecting }
+								onClick={ handleConnectUser }
+							>
+								{ __( 'Connect your user account', 'jetpack' ) }
+							</Button>
+						) }
+						{ siteCredentialsNeeded && (
+							<Button
+								className={ styles.notice__action }
+								isExternalLink={ true }
+								weight="regular"
+								href={ credentialsRedirectUrl }
+								isLoading={ credentialsIsFetching }
+							>
+								{ __( 'Enter server credentials', 'jetpack' ) }
+							</Button>
+						) }
+					</div>
+				</div>
+			}
+		/>
+	);
+};
+
+export default ThreatNotice;

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

@@ -0,0 +1,30 @@
+import { Button } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import Text from '../text';
+import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatSummary component
+ *
+ * @return {JSX.Element} The rendered threat summary.
+ */
+const ThreatSummary = (): JSX.Element => {
+	const { threat } = useContext( ThreatModalContext );
+
+	return (
+		<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>
+	);
+};
+
+export default ThreatSummary;

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

@@ -0,0 +1,67 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
+import { useState, useCallback, useContext } from 'react';
+import DiffViewer from '../diff-viewer';
+import MarkedLines from '../marked-lines';
+import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
+
+/**
+ * ThreatTechnicalDetails component
+ *
+ * @return {JSX.Element | null} The rendered technical details or null if no details are available.
+ */
+const ThreatTechnicalDetails = (): JSX.Element => {
+	const { threat } = useContext( ThreatModalContext );
+
+	const [ open, setOpen ] = useState( false );
+
+	const toggleOpen = useCallback( () => {
+		setOpen( ! open );
+	}, [ open ] );
+
+	if ( ! threat.filename && ! threat.context && ! threat.diff ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<div className={ styles.section__title }>
+				<Button
+					variant="link"
+					className={ styles.section__toggle }
+					aria-expanded={ open }
+					aria-controls={ `threat-details-${ threat.id }` }
+					onClick={ toggleOpen }
+				>
+					<div className={ styles.section__toggle__content }>
+						<Text variant="title-small" mb={ 0 }>
+							{ open
+								? __( 'Hide the technical details', 'jetpack' )
+								: __( 'Show the technical details', 'jetpack' ) }
+						</Text>
+						<Icon icon={ open ? chevronUp : chevronDown } size={ 24 } />
+					</div>
+				</Button>
+			</div>
+			{ open && (
+				<div
+					className={ open ? styles.section__open : styles.section__closed }
+					id={ `threat-details-${ threat.id }` }
+				>
+					{ 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>
+			) }
+		</div>
+	);
+};
+
+export default ThreatTechnicalDetails;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.61.0",
+	"version": "0.63.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.4.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",