@automattic/jetpack-components 0.62.0 → 0.64.0

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

@@ -1,13 +1,13 @@
-import { Button } from '@automattic/jetpack-components';
 import {
 	type Threat,
 	getFixerState,
 	getFixerAction,
-	getFixerMessage,
+	getFixerDescription,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@automattic/jetpack-components';
 import styles from './styles.module.scss';
 
 /**
@@ -39,18 +39,18 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack-components' );
 		}
 
 		if ( fixerState.stale ) {
-			return __( 'The auto-fixer is taking longer than expected.', 'jetpack' );
+			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-components' );
 		}
 
 		if ( fixerState.inProgress ) {
-			return __( 'An auto-fixer is in progress.', 'jetpack' );
+			return __( 'An auto-fixer is in progress.', 'jetpack-components' );
 		}
 
-		return getFixerMessage( threat );
+		return getFixerDescription( threat );
 	}, [ threat, fixerState ] );
 
 	const buttonText = useMemo( () => {
@@ -59,7 +59,7 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'Error', 'jetpack' );
+			return __( 'Error', 'jetpack-components' );
 		}
 
 		return getFixerAction( threat );

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-components' ),
+				content: __(
+					'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
+					'jetpack-components'
+				),
+			};
+		}
+
+		if ( fixerState.stale ) {
+			return {
+				status: 'error' as const,
+				title: __( 'The auto-fixer is taking longer than expected', 'jetpack-components' ),
+				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-components'
+				),
+			};
+		}
+
+		if ( fixerState.inProgress ) {
+			return {
+				status: 'success' as const,
+				title: __( 'An auto-fixer is in progress', 'jetpack-components' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack-components' ),
+			};
+		}
+
+		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 { Button } from '@automattic/jetpack-components';
+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-components' ) }
 					</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-components' ) }
+						</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-components' )
+									: 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-components'
+					) }
+				/>
+			) }
+			{ ! siteCredentialsNeeded && userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'User connection needed', 'jetpack-components' ) }
+					content={ __(
+						'A user connection provides Jetpack the access necessary to ignore and auto-fix threats on your site.',
+						'jetpack-components'
+					) }
+				/>
+			) }
+			{ siteCredentialsNeeded && ! userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'Site credentials needed', 'jetpack-components' ) }
+					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-components'
+					) }
+				/>
+			) }
+			<ThreatActions />
+		</>
+	);
+};
+
+export default ThreatFixConfirmation;

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

@@ -1,34 +1,27 @@
-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' );
+			return __( 'How did Jetpack fix it?', 'jetpack-components' );
 		}
 		if ( threat.status === 'current' && threat.fixable ) {
-			return __( 'How can Jetpack auto-fix this threat?', 'jetpack' );
+			return __( 'How can Jetpack auto-fix this threat?', 'jetpack-components' );
 		}
-		return __( 'How to fix it?', 'jetpack' );
+		return __( 'How to fix it?', 'jetpack-components' );
 	}, [ threat ] );
 
 	const fix = useMemo( () => {
@@ -37,13 +30,14 @@ const ThreatFixDetails = ( {
 		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' ),
+				__( 'Update %1$s to version %2$s.', 'jetpack-components' ),
 				threat.extension.name,
 				threat.fixedIn
 			);
 		}
+
 		// The threat has an auto-fix available.
-		return getFixerMessage( threat );
+		return getFixerDescription( threat );
 	}, [ threat ] );
 
 	if ( ! threat.fixable && ! threat.fixedIn ) {
@@ -56,8 +50,11 @@ const ThreatFixDetails = ( {
 			<Text>{ fix }</Text>
 			{ handleUpgradeClick && (
 				<ContextualUpgradeTrigger
-					description={ __( 'Looking for advanced scan results and one-click fixes?', 'jetpack' ) }
-					cta={ __( 'Upgrade Jetpack now', 'jetpack' ) }
+					description={ __(
+						'Looking for advanced scan results and one-click fixes?',
+						'jetpack-components'
+					) }
+					cta={ __( 'Upgrade Jetpack now', 'jetpack-components' ) }
 					onClick={ handleUpgradeClick }
 				/>
 			) }

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

@@ -0,0 +1,84 @@
+import { Notice, Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+import { useContext } from 'react';
+import { Text, Button } from '@automattic/jetpack-components';
+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-components' ) }
+							</Button>
+						) }
+						{ siteCredentialsNeeded && (
+							<Button
+								className={ styles.notice__action }
+								isExternalLink={ true }
+								weight="regular"
+								href={ credentialsRedirectUrl }
+								isLoading={ credentialsIsFetching }
+							>
+								{ __( 'Enter server credentials', 'jetpack-components' ) }
+							</Button>
+						) }
+					</div>
+				</div>
+			}
+		/>
+	);
+};
+
+export default ThreatNotice;