@automattic/jetpack-components 0.62.0 → 0.63.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### 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]
@@ -1226,6 +1230,7 @@
 ### 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

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

@@ -3,7 +3,7 @@ import {
 	type Threat,
 	getFixerState,
 	getFixerAction,
-	getFixerMessage,
+	getFixerDescription,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -50,7 +50,7 @@ export default function ThreatFixerButton( {
 			return __( 'An auto-fixer is in progress.', 'jetpack' );
 		}
 
-		return getFixerMessage( threat );
+		return getFixerDescription( threat );
 	}, [ threat, fixerState ] );
 
 	const buttonText = useMemo( () => {

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

@@ -1,15 +1,26 @@
-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 { type Threat } from '@automattic/jetpack-scan';
+import { Modal } from '@wordpress/components';
+import { createContext } from 'react';
 import Text from '../text';
-import CredentialsGate from './credentials-gate';
+import ThreatSeverityBadge from '../threat-severity-badge';
 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';
+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
@@ -61,92 +72,36 @@ export default function ThreatModal( {
 	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
+			title={
+				<div className={ styles.title }>
+					<Text variant="title-small">{ threat.title }</Text>
+					{ !! threat.severity && <ThreatSeverityBadge severity={ threat.severity } /> }
+				</div>
+			}
 			size="large"
-			title={ <div className={ styles.title }>{ getModalTitle }</div> }
 			{ ...modalProps }
 		>
 			<div className={ styles[ 'threat-details' ] }>
-				<UserConnectionGate
-					userConnectionNeeded={ userConnectionNeeded }
-					userIsConnecting={ userIsConnecting }
-					handleConnectUser={ handleConnectUser }
+				<ThreatModalContext.Provider
+					value={ {
+						closeModal: modalProps.onRequestClose,
+						threat,
+						handleUpgradeClick,
+						userConnectionNeeded,
+						handleConnectUser,
+						userIsConnecting,
+						siteCredentialsNeeded,
+						credentialsIsFetching,
+						credentialsRedirectUrl,
+						handleFixThreatClick,
+						handleIgnoreThreatClick,
+						handleUnignoreThreatClick,
+					} }
 				>
-					<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>
+					<ThreatFixConfirmation />
+				</ThreatModalContext.Provider>
 			</div>
 		</Modal>
 	);

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

@@ -10,6 +10,20 @@
 	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;
@@ -22,14 +36,46 @@
 	overflow-x: auto;
 }
 
-.modal-actions {
-	display: flex;
-	justify-content: flex-end;
+.modal-footer {
 	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
-	border-top: 1px solid var( --jp-gray-0 );
+	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

@@ -1,41 +1,33 @@
 import { Button } from '@automattic/jetpack-components';
-import { Threat, getFixerAction } from '@automattic/jetpack-scan';
+import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
+import FixerStateNotice from './fixer-state-notice';
 import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
 
 /**
  * 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 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 ] );
@@ -52,39 +44,43 @@ const ThreatActions = ( {
 		closeModal();
 	}, [ threat, handleUnignoreThreatClick, closeModal ] );
 
-	if ( ! handleFixThreatClick && ! handleIgnoreThreatClick && ! handleUnignoreThreatClick ) {
+	if ( ! threat?.status || threat.status === 'fixed' ) {
 		return null;
 	}
 
 	return (
-		<div className={ styles[ 'modal-actions' ] }>
+		<div className={ styles[ 'modal-footer' ] }>
+			<FixerStateNotice fixerState={ fixerState } />
 			<div className={ styles[ 'threat-actions' ] }>
-				{ threat.status === 'ignored' && handleUnignoreThreatClick && (
-					<Button isDestructive={ true } variant="secondary" onClick={ onUnignoreClick }>
-						{ __( 'Un-ignore', 'jetpack' ) }
+				{ threat.status === 'ignored' && (
+					<Button
+						disabled={ disabled }
+						isDestructive={ true }
+						variant="secondary"
+						onClick={ onUnignoreClick }
+					>
+						{ __( 'Un-ignore threat', '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
+							isDestructive={ true }
+							variant="secondary"
+							onClick={ onIgnoreClick }
+							disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
+						>
+							{ __( 'Ignore threat', 'jetpack' ) }
+						</Button>
+						{ threat.fixable && (
 							<Button
 								isPrimary
-								disabled={ fixerState.inProgress && ! fixerState.stale }
+								disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
 								onClick={ onFixClick }
 							>
 								{ fixerState.error || fixerState.stale
-									? __( 'Retry fix', 'jetpack' )
-									: fixerAction }
+									? __( 'Retry fixer', 'jetpack' )
+									: detailedFixerAction }
 							</Button>
 						) }
 					</>

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

@@ -1,26 +1,19 @@
-import { Threat, getFixerMessage } from '@automattic/jetpack-scan';
+import { getFixerDescription } from '@automattic/jetpack-scan';
 import { __, sprintf } from '@wordpress/i18n';
-import React, { useMemo } from 'react';
+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
  *
- * @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 ThreatFixDetails = (): JSX.Element => {
+	const { threat, handleUpgradeClick } = useContext( ThreatModalContext );
+
 	const title = useMemo( () => {
 		if ( threat.status === 'fixed' ) {
 			return __( 'How did Jetpack fix it?', 'jetpack' );
@@ -42,8 +35,9 @@ const ThreatFixDetails = ( {
 				threat.fixedIn
 			);
 		}
+
 		// The threat has an auto-fix available.
-		return getFixerMessage( threat );
+		return getFixerDescription( threat );
 	}, [ threat ] );
 
 	if ( ! threat.fixable && ! threat.fixedIn ) {

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

@@ -1,34 +1,65 @@
-import { Threat } from '@automattic/jetpack-scan';
+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 Text from '../text';
 import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
 
 /**
  * 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 => {
+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 }>
-			<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>
-				</>
+			<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>
 			) }
-			{ threat.context && <MarkedLines context={ threat.context } /> }
-			{ threat.diff && <DiffViewer diff={ threat.diff } /> }
 		</div>
 	);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.62.0",
+	"version": "0.63.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -16,7 +16,7 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-boost-score-api": "^0.1.47",
-		"@automattic/jetpack-scan": "^0.3.0",
+		"@automattic/jetpack-scan": "^0.4.0",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.12.0",
 		"@wordpress/components": "28.12.0",

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

@@ -1,65 +0,0 @@
-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/user-connection-gate.tsx

@@ -1,64 +0,0 @@
-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;