@automattic/jetpack-components 0.70.1 → 0.72.0

package/build/components/threats-data-views/threats-status-toggle-group-control.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { __experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
- } from '@wordpress/components';
-import { useMemo, useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import styles from './styles.module.scss';
-/**
- * ToggleGroupControl component for filtering threats by status.
- * @param {object}     props              - Component props.
- * @param { Threat[]}  props.data         - Threats data.
- * @param { View }     props.view         - The current view.
- * @param { Function } props.onChangeView - Callback function to handle view changes.
- * @return {JSX.Element|null} The component or null.
- */
-export default function ThreatsStatusToggleGroupControl({ data, view, onChangeView, }) {
-    /**
-     * Compute values from the provided threats data.
-     *
-     * @member {number} activeThreatsCount   - Count of active threats.
-     * @member {number} historicThreatsCount - Count of historic threats.
-     */
-    const { activeThreatsCount, historicThreatsCount, } = useMemo(() => {
-        return data.reduce((acc, threat) => {
-            if (threat.status) {
-                if (threat.status === 'current') {
-                    acc.activeThreatsCount++;
-                }
-                else {
-                    acc.historicThreatsCount++;
-                }
-            }
-            return acc;
-        }, {
-            activeThreatsCount: 0,
-            historicThreatsCount: 0,
-        });
-    }, [data]);
-    /**
-     * Callback function to handle the status change filter.
-     *
-     * @param {string} newStatus - The new status filter value.
-     */
-    const onStatusFilterChange = useCallback((newStatus) => {
-        const updatedFilters = view.filters.filter(filter => filter.field !== 'status');
-        if (newStatus === 'active') {
-            updatedFilters.push({
-                field: 'status',
-                operator: 'isAny',
-                value: ['current'],
-            });
-        }
-        else if (newStatus === 'historic') {
-            updatedFilters.push({
-                field: 'status',
-                operator: 'isAny',
-                value: ['fixed', 'ignored'],
-            });
-        }
-        onChangeView({
-            ...view,
-            filters: updatedFilters,
-        });
-    }, [view, onChangeView]);
-    /**
-     * Memoized function to determine if a status filter is selected.
-     *
-     * @param {Array} threatStatuses - List of threat statuses.
-     */
-    const isStatusFilterSelected = useMemo(() => (threatStatuses) => view.filters.some(filter => filter.field === 'status' &&
-        Array.isArray(filter.value) &&
-        filter.value.length === threatStatuses.length &&
-        threatStatuses.every(threatStatus => filter.value.includes(threatStatus))), [view.filters]);
-    const selectedValue = useMemo(() => {
-        if (isStatusFilterSelected(['current'])) {
-            return 'active';
-        }
-        if (isStatusFilterSelected(['fixed', 'ignored'])) {
-            return 'historic';
-        }
-        return '';
-    }, [isStatusFilterSelected]);
-    if (!(activeThreatsCount + historicThreatsCount)) {
-        return null;
-    }
-    try {
-        return (_jsx("div", { children: _jsx("div", { className: styles['toggle-group-control'], children: _jsxs(ToggleGroupControl, { value: selectedValue, onChange: onStatusFilterChange, isBlock: true, hideLabelFromVision: true, __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, children: [_jsx(ToggleGroupControlOption, { value: "active", label: sprintf(
-                            /* translators: %d: number of active threats */ __('Active threats (%d)', 'jetpack-components'), activeThreatsCount) }), _jsx(ToggleGroupControlOption, { value: "historic", label: sprintf(
-                            /* translators: %d: number of historic threats */
-                            __('History (%d)', 'jetpack-components'), historicThreatsCount) })] }) }) }));
-    }
-    catch {
-        return null;
-    }
-}

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

@@ -1,101 +0,0 @@
-import {
-	type Threat,
-	getFixerState,
-	getFixerAction,
-	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';
-
-/**
- * Threat Fixer Button component.
- *
- * @param {object}   props           - Component props.
- * @param {object}   props.threat    - The threat.
- * @param {Function} props.onClick   - The onClick function.
- * @param {string}   props.className - The className.
- *
- * @return {JSX.Element} The component.
- */
-export default function ThreatFixerButton( {
-	threat,
-	className,
-	onClick,
-}: {
-	threat: Threat;
-	onClick: ( items: Threat[] ) => void;
-	className?: string;
-} ): JSX.Element {
-	const fixerState = useMemo( () => {
-		return getFixerState( threat.fixer );
-	}, [ threat.fixer ] );
-
-	const tooltipText = useMemo( () => {
-		if ( ! threat.fixable ) {
-			return null;
-		}
-
-		if ( fixerState.error ) {
-			return __( 'An error occurred auto-fixing this threat.', 'jetpack-components' );
-		}
-
-		if ( fixerState.stale ) {
-			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-components' );
-		}
-
-		if ( fixerState.inProgress ) {
-			return __( 'An auto-fixer is in progress.', 'jetpack-components' );
-		}
-
-		return getFixerDescription( threat );
-	}, [ threat, fixerState ] );
-
-	const buttonText = useMemo( () => {
-		if ( ! threat.fixable ) {
-			return null;
-		}
-
-		if ( fixerState.error ) {
-			return __( 'Error', 'jetpack-components' );
-		}
-
-		return getFixerAction( threat );
-	}, [ threat, fixerState.error ] );
-
-	const handleClick = useCallback(
-		( event: React.MouseEvent ) => {
-			event.stopPropagation();
-			onClick( [ threat ] );
-		},
-		[ onClick, threat ]
-	);
-
-	if ( ! threat.fixable ) {
-		return null;
-	}
-
-	return (
-		<div>
-			<Tooltip className={ styles.tooltip } text={ tooltipText }>
-				<Button
-					size="small"
-					weight="regular"
-					variant="secondary"
-					onClick={ handleClick }
-					children={ buttonText }
-					className={ className }
-					isLoading={ fixerState.inProgress }
-					isDestructive={
-						( threat.fixable && threat.fixable.fixer === 'delete' ) ||
-						fixerState.error ||
-						fixerState.stale
-					}
-					style={ { minWidth: '72px' } }
-				/>
-			</Tooltip>
-		</div>
-	);
-}

package/components/threat-fixer-button/styles.module.scss

@@ -1,16 +0,0 @@
-.support-link {
-	color: inherit;
-
-	&:focus,
-	&:hover {
-		color: inherit;
-		box-shadow: none;
-	}
-}
-
-.tooltip {
-	margin-top: var( --spacing-base )	;
-	max-width: 240px;
-	border-radius: 4px;
-	text-align: left;
-}

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;