From 6368dad6c567fbb27806bca55f877fc3bc40bca2 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Thu, 19 Dec 2024 14:36:52 -0800 Subject: [PATCH] Reorg and remove unused Protect modals --- .../js/components/credentials-gate/README.md | 17 ---- .../js/components/credentials-gate/index.jsx | 35 -------- .../credentials-gate/styles.module.scss | 9 -- .../credentials-needed-modal/index.jsx | 83 ------------------ .../styles.module.scss | 4 - .../fix-all-threats-modal/index.jsx | 84 ------------------ .../fix-all-threats-modal/styles.module.scss | 8 -- .../js/components/fix-threat-modal/index.jsx | 56 ------------ .../fix-threat-modal/styles.module.scss | 8 -- .../components/ignore-threat-modal/index.jsx | 86 ------------------- .../ignore-threat-modal/styles.module.scss | 40 --------- .../protect/src/js/components/modal/index.jsx | 10 --- .../unignore-threat-modal/index.jsx | 68 --------------- .../unignore-threat-modal/styles.module.scss | 40 --------- .../components/user-connection-gate/index.jsx | 14 --- .../user-connection-gate/styles.module.scss | 9 -- .../user-connection-needed-modal/index.jsx | 66 -------------- .../styles.module.scss | 4 - .../routes/scan/scan-admin-section-hero.tsx | 79 ++++++++--------- 19 files changed, 40 insertions(+), 680 deletions(-) delete mode 100644 projects/plugins/protect/src/js/components/credentials-gate/README.md delete mode 100644 projects/plugins/protect/src/js/components/credentials-gate/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/credentials-gate/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/credentials-needed-modal/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/fix-all-threats-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/fix-all-threats-modal/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/fix-threat-modal/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/ignore-threat-modal/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/unignore-threat-modal/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/user-connection-gate/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/user-connection-gate/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/user-connection-needed-modal/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/user-connection-needed-modal/styles.module.scss diff --git a/projects/plugins/protect/src/js/components/credentials-gate/README.md b/projects/plugins/protect/src/js/components/credentials-gate/README.md deleted file mode 100644 index 2d3b72409c6c6..0000000000000 --- a/projects/plugins/protect/src/js/components/credentials-gate/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Credentials Gate - -The `` component blocks the rendering of its contents when the current site does not have credentials shared with Jetpack. - -When credentials are unavailable, the `` component is rendered instead. - -## Usage - -```jsx -import CredentialsGate from './components/credentials-gate'; - -const MyCredentialedCompnent = () = ( - -

Only users with credentials will see this message.

- -); -``` \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/credentials-gate/index.jsx b/projects/plugins/protect/src/js/components/credentials-gate/index.jsx deleted file mode 100644 index d93e99bdc17d3..0000000000000 --- a/projects/plugins/protect/src/js/components/credentials-gate/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Spinner } from '@automattic/jetpack-components'; -import { __ } from '@wordpress/i18n'; -import useCredentialsQuery from '../../data/use-credentials-query'; -import CredentialsNeededModal from '../credentials-needed-modal'; -import styles from './styles.module.scss'; - -const CredentialsGate = ( { children } ) => { - const { data: credentials, isLoading: credentialsIsFetching } = useCredentialsQuery(); - - if ( credentialsIsFetching ) { - return ( -
- -

- { __( 'Checking credentials…', 'jetpack-protect' ) } -

-
- ); - } - - if ( ! credentials || credentials.length === 0 ) { - return ; - } - - return children; -}; - -export default CredentialsGate; diff --git a/projects/plugins/protect/src/js/components/credentials-gate/styles.module.scss b/projects/plugins/protect/src/js/components/credentials-gate/styles.module.scss deleted file mode 100644 index 12d6afe939dc3..0000000000000 --- a/projects/plugins/protect/src/js/components/credentials-gate/styles.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.loading { - text-align: center; - padding-top: calc( var( --spacing-base ) * 6 ); // 48px - padding-bottom: calc( var( --spacing-base ) * 6 ); // 48px - - &__message { - margin-bottom: 0; - } -} \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx b/projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx deleted file mode 100644 index fae5e28633d6e..0000000000000 --- a/projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import { Button, Text, getRedirectUrl } from '@automattic/jetpack-components'; -import { useQueryClient } from '@tanstack/react-query'; -import { __ } from '@wordpress/i18n'; -import { useEffect } from 'react'; -import { QUERY_CREDENTIALS_KEY } from '../../constants'; -import useCredentialsQuery from '../../data/use-credentials-query'; -import useModal from '../../hooks/use-modal'; -import Notice from '../notice'; -import styles from './styles.module.scss'; - -const CredentialsNeededModal = () => { - const queryClient = useQueryClient(); - const { setModal } = useModal(); - const { data: credentials } = useCredentialsQuery(); - const { siteSuffix, blogID } = window.jetpackProtectInitialState; - - const handleCancelClick = () => { - return event => { - event.preventDefault(); - setModal( { type: null } ); - }; - }; - - /** - * Poll credentials as long as the modal is open. - */ - useEffect( () => { - const interval = setInterval( () => { - if ( ! credentials || credentials.length === 0 ) { - queryClient.invalidateQueries( { queryKey: [ QUERY_CREDENTIALS_KEY ] } ); - } - }, 5_000 ); - - return () => clearInterval( interval ); - }, [ queryClient, credentials ] ); - - return ( - <> - - { __( 'Site credentials needed', 'jetpack-protect' ) } - - - - - - { __( - 'Your server credentials allow Jetpack Protect 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-protect' - ) } - - - - { __( - 'Once you’ve entered server credentials, Jetpack Protect will be fixing the selected threats.', - 'jetpack-protect' - ) } - - -
- - -
- - ); -}; - -export default CredentialsNeededModal; diff --git a/projects/plugins/protect/src/js/components/credentials-needed-modal/styles.module.scss b/projects/plugins/protect/src/js/components/credentials-needed-modal/styles.module.scss deleted file mode 100644 index 6b3271908224a..0000000000000 --- a/projects/plugins/protect/src/js/components/credentials-needed-modal/styles.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/components/fix-all-threats-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-all-threats-modal/index.jsx deleted file mode 100644 index 68ef496a610ff..0000000000000 --- a/projects/plugins/protect/src/js/components/fix-all-threats-modal/index.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Button, Text } from '@automattic/jetpack-components'; -import { __ } from '@wordpress/i18n'; -import { useCallback, useState } from 'react'; -import useFixers from '../../hooks/use-fixers'; -import useModal from '../../hooks/use-modal'; -import CredentialsGate from '../credentials-gate'; -import ThreatFixHeader from '../threat-fix-header'; -import UserConnectionGate from '../user-connection-gate'; -import styles from './styles.module.scss'; - -const FixAllThreatsModal = ( { threatList = [] } ) => { - const { setModal } = useModal(); - const { fixThreats, isLoading: isFixersLoading } = useFixers(); - - const [ threatIds, setThreatIds ] = useState( threatList.map( ( { id } ) => parseInt( id ) ) ); - - const handleCancelClick = useCallback( - event => { - event.preventDefault(); - setModal( { type: null } ); - }, - [ setModal ] - ); - - const handleFixClick = useCallback( - async event => { - event.preventDefault(); - - await fixThreats( threatIds ); - setModal( { type: null } ); - }, - [ fixThreats, setModal, threatIds ] - ); - - const handleCheckboxClick = useCallback( - ( checked, threat ) => { - if ( ! checked ) { - setThreatIds( threatIds.filter( id => id !== threat.id ) ); - } else { - setThreatIds( [ ...threatIds, threat.id ] ); - } - }, - [ threatIds ] - ); - - return ( - - - - { __( 'Fix all threats', 'jetpack-protect' ) } - - - { __( 'Jetpack will be fixing the selected threats:', 'jetpack-protect' ) } - - -
- { threatList.map( threat => ( - - ) ) } -
- -
- - -
- - - ); -}; - -export default FixAllThreatsModal; diff --git a/projects/plugins/protect/src/js/components/fix-all-threats-modal/styles.module.scss b/projects/plugins/protect/src/js/components/fix-all-threats-modal/styles.module.scss deleted file mode 100644 index ab09cfc81f47a..0000000000000 --- a/projects/plugins/protect/src/js/components/fix-all-threats-modal/styles.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.list { - margin-bottom: calc( var( --spacing-base ) * 5 ); // 40px -} - -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx deleted file mode 100644 index cbb49498c353f..0000000000000 --- a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Button, Text } from '@automattic/jetpack-components'; -import { __ } from '@wordpress/i18n'; -import useFixers from '../../hooks/use-fixers'; -import useModal from '../../hooks/use-modal'; -import CredentialsGate from '../credentials-gate'; -import ThreatFixHeader from '../threat-fix-header'; -import UserConnectionGate from '../user-connection-gate'; -import styles from './styles.module.scss'; - -const FixThreatModal = ( { threat } ) => { - const { setModal } = useModal(); - const { fixThreats, isLoading: isFixersLoading } = useFixers(); - - const handleCancelClick = () => { - return event => { - event.preventDefault(); - setModal( { type: null } ); - }; - }; - - const handleFixClick = () => { - return async event => { - event.preventDefault(); - await fixThreats( [ threat.id ] ); - setModal( { type: null } ); - }; - }; - - return ( - - - - { __( 'Fix Threat', 'jetpack-protect' ) } - - - { __( 'Jetpack will be fixing the selected threat:', 'jetpack-protect' ) } - - -
- -
- -
- - -
- - - ); -}; - -export default FixThreatModal; diff --git a/projects/plugins/protect/src/js/components/fix-threat-modal/styles.module.scss b/projects/plugins/protect/src/js/components/fix-threat-modal/styles.module.scss deleted file mode 100644 index ab09cfc81f47a..0000000000000 --- a/projects/plugins/protect/src/js/components/fix-threat-modal/styles.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.list { - margin-bottom: calc( var( --spacing-base ) * 5 ); // 40px -} - -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx deleted file mode 100644 index 1d6f4457b39a4..0000000000000 --- a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components'; -import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan'; -import { Icon } from '@wordpress/components'; -import { createInterpolateElement, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import useIgnoreThreatMutation from '../../data/scan/use-ignore-threat-mutation'; -import useModal from '../../hooks/use-modal'; -import useWafData from '../../hooks/use-waf-data'; -import UserConnectionGate from '../user-connection-gate'; -import styles from './styles.module.scss'; - -const IgnoreThreatModal = ( { threat } ) => { - const { wafSupported } = useWafData(); - const { setModal } = useModal(); - const ignoreThreatMutation = useIgnoreThreatMutation(); - const codeableURL = getRedirectUrl( 'jetpack-protect-codeable-referral' ); - const icon = getThreatIcon( threat ); - - const [ isIgnoring, setIsIgnoring ] = useState( false ); - - const handleCancelClick = () => { - return event => { - event.preventDefault(); - setModal( { type: null } ); - }; - }; - - const handleIgnoreClick = () => { - return async event => { - event.preventDefault(); - setIsIgnoring( true ); - await ignoreThreatMutation.mutateAsync( threat.id ); - setModal( { type: null } ); - setIsIgnoring( false ); - }; - }; - - return ( - - - { __( 'Do you really want to ignore this threat?', 'jetpack-protect' ) } - - { __( 'Jetpack will ignore the threat:', 'jetpack-protect' ) } - -
- -
- - { getThreatSubtitle( threat ) } - - { threat.title } -
-
- -
-
- - - { __( - 'By choosing to ignore this threat, you acknowledge that you have reviewed the detected code. You are accepting the risks of maintaining a potentially malicious or vulnerable file on your site.', - 'jetpack-protect' - ) }{ ' ' } - { wafSupported && - createInterpolateElement( - __( - 'If you are unsure, please request an estimate with Codeable.', - 'jetpack-protect' - ), - { - codeableLink: - - - - ); -}; - -export default IgnoreThreatModal; diff --git a/projects/plugins/protect/src/js/components/ignore-threat-modal/styles.module.scss b/projects/plugins/protect/src/js/components/ignore-threat-modal/styles.module.scss deleted file mode 100644 index d936392c844e5..0000000000000 --- a/projects/plugins/protect/src/js/components/ignore-threat-modal/styles.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -.threat { - border: 1px solid var( --jp-gray ); - border-radius: var( --jp-border-radius ); - padding: calc( var( --spacing-base ) * 2 ); // 16px - display: flex; - margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px - - &__icon { - margin-right: calc( var( --spacing-base ) * 2 ); // 16px - min-width: 24px; - } - - &__summary { - width: 100%; - } - - &__summary__label { - font-size: 18px; - line-height: 24px; - font-weight: 600; - margin-bottom: 0; - } - - &__summary__title { - font-size: 14px; - line-height: 21px; - color: var( --jp-gray-80 ); - } - - &__severity { - align-self: center; - margin-left: calc( var( --spacing-base ) * 2 ); // 16px - margin-right: var( --spacing-base ); // 8px - } -} - -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/components/modal/index.jsx b/projects/plugins/protect/src/js/components/modal/index.jsx index 2d8728964fb03..4d53ef95212c2 100644 --- a/projects/plugins/protect/src/js/components/modal/index.jsx +++ b/projects/plugins/protect/src/js/components/modal/index.jsx @@ -1,20 +1,10 @@ import { __ } from '@wordpress/i18n'; import { close as closeIcon, Icon } from '@wordpress/icons'; import useModal from '../../hooks/use-modal'; -import CredentialsNeededModal from '../credentials-needed-modal'; -import FixAllThreatsModal from '../fix-all-threats-modal'; -import FixThreatModal from '../fix-threat-modal'; -import IgnoreThreatModal from '../ignore-threat-modal'; import StandaloneModeModal from '../standalone-mode-modal'; -import UnignoreThreatModal from '../unignore-threat-modal'; import styles from './styles.module.scss'; const MODAL_COMPONENTS = { - IGNORE_THREAT: IgnoreThreatModal, - UNIGNORE_THREAT: UnignoreThreatModal, - FIX_THREAT: FixThreatModal, - FIX_ALL_THREATS: FixAllThreatsModal, - CREDENTIALS_NEEDED: CredentialsNeededModal, STANDALONE_MODE: StandaloneModeModal, }; diff --git a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx deleted file mode 100644 index 7f1ef3652bb85..0000000000000 --- a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Button, Text, ThreatSeverityBadge } from '@automattic/jetpack-components'; -import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan'; -import { __ } from '@wordpress/i18n'; -import { Icon } from '@wordpress/icons'; -import { useState } from 'react'; -import useUnIgnoreThreatMutation from '../../data/scan/use-unignore-threat-mutation'; -import useModal from '../../hooks/use-modal'; -import UserConnectionGate from '../user-connection-gate'; -import styles from './styles.module.scss'; - -const UnignoreThreatModal = ( { threat } ) => { - const { setModal } = useModal(); - - const icon = getThreatIcon( threat ); - - const [ isUnignoring, setIsUnignoring ] = useState( false ); - const unignoreThreatMutation = useUnIgnoreThreatMutation(); - - const handleCancelClick = () => { - return event => { - event.preventDefault(); - setModal( { type: null } ); - }; - }; - - const handleUnignoreClick = () => { - return async event => { - event.preventDefault(); - setIsUnignoring( true ); - await unignoreThreatMutation.mutateAsync( threat.id ); - setModal( { type: null } ); - setIsUnignoring( false ); - }; - }; - - return ( - - - { __( 'Do you really want to unignore this threat?', 'jetpack-protect' ) } - - { __( 'Jetpack will unignore the threat:', 'jetpack-protect' ) } - -
- -
- - { getThreatSubtitle( threat ) } - - { threat.title } -
-
- -
-
- -
- - -
- - ); -}; - -export default UnignoreThreatModal; diff --git a/projects/plugins/protect/src/js/components/unignore-threat-modal/styles.module.scss b/projects/plugins/protect/src/js/components/unignore-threat-modal/styles.module.scss deleted file mode 100644 index d936392c844e5..0000000000000 --- a/projects/plugins/protect/src/js/components/unignore-threat-modal/styles.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -.threat { - border: 1px solid var( --jp-gray ); - border-radius: var( --jp-border-radius ); - padding: calc( var( --spacing-base ) * 2 ); // 16px - display: flex; - margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px - - &__icon { - margin-right: calc( var( --spacing-base ) * 2 ); // 16px - min-width: 24px; - } - - &__summary { - width: 100%; - } - - &__summary__label { - font-size: 18px; - line-height: 24px; - font-weight: 600; - margin-bottom: 0; - } - - &__summary__title { - font-size: 14px; - line-height: 21px; - color: var( --jp-gray-80 ); - } - - &__severity { - align-self: center; - margin-left: calc( var( --spacing-base ) * 2 ); // 16px - margin-right: var( --spacing-base ); // 8px - } -} - -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/components/user-connection-gate/index.jsx b/projects/plugins/protect/src/js/components/user-connection-gate/index.jsx deleted file mode 100644 index cda8c2fc5aad5..0000000000000 --- a/projects/plugins/protect/src/js/components/user-connection-gate/index.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useConnection } from '@automattic/jetpack-connection'; -import UserConnectionNeededModal from '../user-connection-needed-modal'; - -const UserConnectionGate = ( { children } ) => { - const { isUserConnected, hasConnectedOwner } = useConnection(); - - if ( ! isUserConnected || ! hasConnectedOwner ) { - return ; - } - - return children; -}; - -export default UserConnectionGate; diff --git a/projects/plugins/protect/src/js/components/user-connection-gate/styles.module.scss b/projects/plugins/protect/src/js/components/user-connection-gate/styles.module.scss deleted file mode 100644 index 12d6afe939dc3..0000000000000 --- a/projects/plugins/protect/src/js/components/user-connection-gate/styles.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.loading { - text-align: center; - padding-top: calc( var( --spacing-base ) * 6 ); // 48px - padding-bottom: calc( var( --spacing-base ) * 6 ); // 48px - - &__message { - margin-bottom: 0; - } -} \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/user-connection-needed-modal/index.jsx b/projects/plugins/protect/src/js/components/user-connection-needed-modal/index.jsx deleted file mode 100644 index 47d551248eea5..0000000000000 --- a/projects/plugins/protect/src/js/components/user-connection-needed-modal/index.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Button, Text } from '@automattic/jetpack-components'; -import { useConnection } from '@automattic/jetpack-connection'; -import { __ } from '@wordpress/i18n'; -import useModal from '../../hooks/use-modal'; -import Notice from '../notice'; -import styles from './styles.module.scss'; - -const UserConnectionNeededModal = () => { - const { setModal } = useModal(); - const { userIsConnecting, handleConnectUser } = useConnection( { - redirectUri: 'admin.php?page=jetpack-protect', - } ); - - const handleCancelClick = () => { - return event => { - event.preventDefault(); - setModal( { type: null } ); - }; - }; - - return ( - <> - - { __( 'User connection needed', 'jetpack-protect' ) } - - - - - - { __( - 'A user connection provides Jetpack Protect the access necessary to perform these tasks.', - 'jetpack-protect' - ) } - - - - { __( - 'Once you’ve secured a user connection, all Jetpack Protect features will be available for use.', - 'jetpack-protect' - ) } - - -
- - -
- - ); -}; - -export default UserConnectionNeededModal; diff --git a/projects/plugins/protect/src/js/components/user-connection-needed-modal/styles.module.scss b/projects/plugins/protect/src/js/components/user-connection-needed-modal/styles.module.scss deleted file mode 100644 index 6b3271908224a..0000000000000 --- a/projects/plugins/protect/src/js/components/user-connection-needed-modal/styles.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.footer { - display: flex; - justify-content: space-between; -} diff --git a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx index c539710a86165..91922be65ffd1 100644 --- a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx +++ b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx @@ -29,41 +29,46 @@ import ScanningAdminSectionHero from './scanning-admin-section-hero'; import styles from './styles.module.scss'; const ScanAdminSectionHero: React.FC = ( { size = 'normal' }: { size?: 'normal' | 'large' } ) => { + const [ isSm ] = useBreakpointMatch( 'sm' ); + const { recordEvent } = useAnalyticsTracks(); const { hasPlan, upgradePlan } = usePlan(); - const [ isSm ] = useBreakpointMatch( 'sm' ); - const { data: status } = useScanStatusQuery(); - const { isThreatFixInProgress, isThreatFixStale } = useFixers(); + const queryClient = useQueryClient(); - const getScan = useCallback( () => { - recordEvent( 'jetpack_protect_scan_header_get_scan_link_click' ); - upgradePlan(); - }, [ recordEvent, upgradePlan ] ); + const { wafSupported, globalStats } = useWafData(); + const { data: status } = useScanStatusQuery(); - const { globalStats } = useWafData(); - const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities ); - const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities ) - ? '50,000' - : totalVulnerabilities.toLocaleString(); + const { fixThreats, isThreatFixInProgress, isThreatFixStale } = useFixers(); + const ignoreThreatMutation = useIgnoreThreatMutation(); + const unignoreThreatMutation = useUnIgnoreThreatMutation(); - const numThreats = status.threats.length; + const { data: credentials, isLoading: credentialsIsFetching } = useCredentialsQuery(); + const { isUserConnected, hasConnectedOwner, userIsConnecting, handleConnectUser } = useConnection( + { + redirectUri: 'admin.php?page=jetpack-protect', + from: 'scan', + autoTrigger: false, + skipUserConnection: false, + skipPricingPage: true, + } + ); // Popover anchor const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null ); const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null ); - // List of fixable threats that do not have a fix in progress - const fixableList = useMemo( () => { - return status.threats.filter( threat => { - const threatId = typeof threat.id === 'string' ? parseInt( threat.id ) : threat.id; - return ( - threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId ) - ); - } ); - }, [ status.threats, isThreatFixInProgress, isThreatFixStale ] ); + const [ showModal, setShowModal ] = useState( false ); + + const { siteSuffix, blogID } = window.jetpackProtectInitialState; + + const totalVulnerabilities = parseInt( globalStats?.totalVulnerabilities ); + const totalVulnerabilitiesFormatted = isNaN( totalVulnerabilities ) + ? '50,000' + : totalVulnerabilities.toLocaleString(); const scanning = isScanInProgress( status ); + const numThreats = status.threats.length; let lastCheckedLocalTimestamp = null; if ( status.lastChecked ) { @@ -93,24 +98,20 @@ const ScanAdminSectionHero: React.FC = ( { size = 'normal' }: { size?: 'normal' } } - const { siteSuffix, blogID } = window.jetpackProtectInitialState; - const [ showModal, setShowModal ] = useState( false ); - const { wafSupported } = useWafData(); - - const { fixThreats } = useFixers(); - const ignoreThreatMutation = useIgnoreThreatMutation(); - const unignoreThreatMutation = useUnIgnoreThreatMutation(); + // List of fixable threats that do not have a fix in progress + const fixableList = useMemo( () => { + return status.threats.filter( threat => { + const threatId = typeof threat.id === 'string' ? parseInt( threat.id ) : threat.id; + return ( + threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId ) + ); + } ); + }, [ status.threats, isThreatFixInProgress, isThreatFixStale ] ); - const { data: credentials, isLoading: credentialsIsFetching } = useCredentialsQuery(); - const { isUserConnected, hasConnectedOwner, userIsConnecting, handleConnectUser } = useConnection( - { - redirectUri: 'admin.php?page=jetpack-protect', - from: 'scan', - autoTrigger: false, - skipUserConnection: false, - skipPricingPage: true, - } - ); + const getScan = useCallback( () => { + recordEvent( 'jetpack_protect_scan_header_get_scan_link_click' ); + upgradePlan(); + }, [ recordEvent, upgradePlan ] ); const handleFixClick = useCallback( async ( threats: Threat[] ) => {