-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Components: Add ThreatModal (#40197)
* Add ThreatDetailsModal component and stories * changelog * Fix type error * Fix child component overflow-x styling * Update scan package changelog * Add util for fixerState and separate subcomponents * Generalize component name * Updates after renaming * Ensure close button exists for vulns modal * Fixes and improvements * ThreatModal: Add user connection gate (#40204) * Add user connection gate * Fix stories * ThreatModal: Add credentials gate (#40205) * Add credentials gate * Fix stories * Fix credentials type * Fix build issues, and add early returns for gates Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11919780318 Upstream-Ref: Automattic/jetpack@c783873
- Loading branch information
Showing
12 changed files
with
534 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| 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 Text from '../text'; | ||
| import CredentialsGate from './credentials-gate'; | ||
| 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'; | ||
|
|
||
| /** | ||
| * 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; | ||
|
|
||
| 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 | ||
| size="large" | ||
| title={ <div className={ styles.title }>{ getModalTitle }</div> } | ||
| { ...modalProps } | ||
| > | ||
| <div className={ styles[ 'threat-details' ] }> | ||
| <UserConnectionGate | ||
| userConnectionNeeded={ userConnectionNeeded } | ||
| userIsConnecting={ userIsConnecting } | ||
| handleConnectUser={ handleConnectUser } | ||
| > | ||
| <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> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } |
Oops, something went wrong.