@automattic/jetpack-components 0.70.1 → 0.71.0

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

@@ -1,63 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
-import styles from './styles.module.scss';
-import ThreatNotice from './threat-notice.js';
-
-/**
- * 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,109 +0,0 @@
-import { type Threat } from '@automattic/jetpack-scan';
-import { Modal } from '@wordpress/components';
-import { createContext } from 'react';
-import Text from '../text/index.js';
-import ThreatSeverityBadge from '../threat-severity-badge/index.js';
-import styles from './styles.module.scss';
-import ThreatFixConfirmation from './threat-fix-confirmation.js';
-
-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

@@ -1,81 +0,0 @@
-.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

@@ -1,93 +0,0 @@
-import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan';
-import { __ } from '@wordpress/i18n';
-import { useCallback, useContext, useMemo } from 'react';
-import { Button } from '@automattic/jetpack-components';
-import FixerStateNotice from './fixer-state-notice.js';
-import styles from './styles.module.scss';
-import { ThreatModalContext } from './index.js';
-
-/**
- * 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-components' ) }
-					</Button>
-				) }
-				{ threat.status === 'current' && (
-					<>
-						<Button
-							isDestructive={ true }
-							variant="secondary"
-							onClick={ onIgnoreClick }
-							disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
-						>
-							{ __( 'Ignore threat', 'jetpack-components' ) }
-						</Button>
-						{ threat.fixable && (
-							<Button
-								isPrimary
-								disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
-								onClick={ onFixClick }
-							>
-								{ fixerState.error || fixerState.stale
-									? __( 'Retry fixer', 'jetpack-components' )
-									: detailedFixerAction }
-							</Button>
-						) }
-					</>
-				) }
-			</div>
-		</div>
-	);
-};
-
-export default ThreatActions;

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

@@ -1,54 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useContext } from 'react';
-import ThreatActions from './threat-actions.js';
-import ThreatFixDetails from './threat-fix-details.js';
-import ThreatNotice from './threat-notice.js';
-import ThreatSummary from './threat-summary.js';
-import ThreatTechnicalDetails from './threat-technical-details.js';
-import { ThreatModalContext } from './index.js';
-
-/**
- * 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,65 +0,0 @@
-import { getFixerDescription } from '@automattic/jetpack-scan';
-import { __, sprintf } from '@wordpress/i18n';
-import React, { useMemo, useContext } from 'react';
-import ContextualUpgradeTrigger from '../contextual-upgrade-trigger/index.js';
-import Text from '../text/index.js';
-import styles from './styles.module.scss';
-import { ThreatModalContext } from './index.js';
-
-/**
- * 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-components' );
-		}
-		if ( threat.status === 'current' && threat.fixable ) {
-			return __( 'How can Jetpack auto-fix this threat?', 'jetpack-components' );
-		}
-		return __( 'How to fix it?', 'jetpack-components' );
-	}, [ 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-components' ),
-				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-components'
-					) }
-					cta={ __( 'Upgrade Jetpack now', 'jetpack-components' ) }
-					onClick={ handleUpgradeClick }
-				/>
-			) }
-		</div>
-	);
-};
-
-export default ThreatFixDetails;

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

@@ -1,84 +0,0 @@
-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 './index.js';
-
-/**
- * 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;

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

@@ -1,30 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useContext } from 'react';
-import { Button } from '@automattic/jetpack-components';
-import Text from '../text/index.js';
-import styles from './styles.module.scss';
-import { ThreatModalContext } from './index.js';
-
-/**
- * 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-components' ) }
-					</Button>
-				</div>
-			) }
-		</div>
-	);
-};
-
-export default ThreatSummary;

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

@@ -1,67 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
-import { useState, useCallback, useContext } from 'react';
-import { Text, Button } from '@automattic/jetpack-components';
-import DiffViewer from '../diff-viewer/index.js';
-import MarkedLines from '../marked-lines/index.js';
-import styles from './styles.module.scss';
-import { ThreatModalContext } from './index.js';
-
-/**
- * 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-components' )
-								: __( 'Show the technical details', 'jetpack-components' ) }
-						</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-components' ) }</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/components/threat-severity-badge/index.tsx

@@ -1,26 +0,0 @@
-import { _x } from '@wordpress/i18n';
-import Badge from '../badge/index.js';
-
-const ThreatSeverityBadge = ( { severity } ) => {
-	if ( severity >= 5 ) {
-		return (
-			<Badge variant="danger">
-				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-components' ) }
-			</Badge>
-		);
-	}
-
-	if ( severity >= 3 && severity < 5 ) {
-		return (
-			<Badge variant="warning">
-				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack-components' ) }
-			</Badge>
-		);
-	}
-
-	return (
-		<Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack-components' ) }</Badge>
-	);
-};
-
-export default ThreatSeverityBadge;