From a79cda8b905295f93aecdedaad2a93d5e82f40c4 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 7 Nov 2024 13:07:23 -0700 Subject: [PATCH] Protect: Integrate ThreatsDataViews --- pnpm-lock.yaml | 3 + .../scan/changelog/add-additional-scan-types | 4 + projects/js-packages/scan/src/types/fixers.ts | 23 ++ projects/js-packages/scan/src/types/index.ts | 1 + projects/js-packages/scan/src/types/status.ts | 33 ++ .../protect/changelog/add-threats-data-views | 5 + projects/plugins/protect/package.json | 1 + .../protect/src/class-scan-history.php | 30 +- projects/plugins/protect/src/js/api.ts | 7 +- .../src/js/components/admin-page/index.jsx | 12 +- .../js/components/fix-threat-modal/index.jsx | 9 +- .../js/components/free-accordion/index.jsx | 64 ---- .../free-accordion/stories/index.stories.jsx | 120 ------- .../free-accordion/styles.module.scss | 79 ----- .../components/ignore-threat-modal/index.jsx | 12 +- .../src/js/components/navigation/badge.jsx | 101 ------ .../src/js/components/navigation/group.jsx | 51 --- .../src/js/components/navigation/index.jsx | 73 ----- .../src/js/components/navigation/item.jsx | 85 ----- .../src/js/components/navigation/label.jsx | 24 -- .../components/navigation/styles.module.scss | 142 --------- .../navigation/use-menu-navigation.js | 92 ------ .../js/components/paid-accordion/index.jsx | 187 ----------- .../stories/broken/index.stories.jsx | 120 ------- .../paid-accordion/styles.module.scss | 191 ----------- .../src/js/components/pricing-table/index.jsx | 4 +- .../js/components/threat-fix-header/index.jsx | 3 +- .../src/js/components/threats-list/empty.jsx | 140 -------- .../js/components/threats-list/free-list.jsx | 125 -------- .../src/js/components/threats-list/index.jsx | 194 ----------- .../js/components/threats-list/navigation.jsx | 130 -------- .../js/components/threats-list/pagination.jsx | 142 --------- .../js/components/threats-list/paid-list.jsx | 253 --------------- .../threats-list/styles.module.scss | 129 -------- .../threats-list/use-threats-list.js | 158 --------- .../unignore-threat-modal/index.jsx | 18 +- .../src/js/data/scan/use-fixers-query.ts | 8 +- .../src/js/data/scan/use-history-query.ts | 2 +- .../src/js/data/scan/use-scan-status-query.ts | 2 +- .../src/js/data/use-connection-mutation.ts | 2 +- .../protect/src/js/hooks/use-fixers.ts | 4 +- .../src/js/hooks/use-protect-data/index.ts | 174 ---------- projects/plugins/protect/src/js/index.tsx | 7 +- .../history/history-admin-section-hero.tsx | 86 ----- .../src/js/routes/scan/history/index.jsx | 301 ------------------ .../js/routes/scan/history/status-filters.jsx | 44 --- .../js/routes/scan/history/styles.module.scss | 45 --- .../protect/src/js/routes/scan/index.jsx | 51 +-- .../routes/scan/scan-admin-section-hero.tsx | 13 +- .../js/routes/scan/scan-results-data-view.tsx | 56 ++++ .../src/js/routes/scan/styles.module.scss | 9 +- .../plugins/protect/src/js/types/fixers.ts | 40 --- .../plugins/protect/src/js/types/global.d.ts | 2 +- .../plugins/protect/src/js/types/scans.ts | 81 ----- .../plugins/protect/src/js/types/threats.ts | 59 ---- projects/plugins/protect/webpack.config.js | 11 +- 56 files changed, 229 insertions(+), 3533 deletions(-) create mode 100644 projects/js-packages/scan/changelog/add-additional-scan-types create mode 100644 projects/js-packages/scan/src/types/status.ts create mode 100644 projects/plugins/protect/changelog/add-threats-data-views delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx delete mode 100644 projects/plugins/protect/src/js/components/free-accordion/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/navigation/badge.jsx delete mode 100644 projects/plugins/protect/src/js/components/navigation/group.jsx delete mode 100644 projects/plugins/protect/src/js/components/navigation/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/navigation/item.jsx delete mode 100644 projects/plugins/protect/src/js/components/navigation/label.jsx delete mode 100644 projects/plugins/protect/src/js/components/navigation/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx delete mode 100644 projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/threats-list/empty.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/free-list.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/navigation.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/pagination.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/paid-list.jsx delete mode 100644 projects/plugins/protect/src/js/components/threats-list/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/threats-list/use-threats-list.js delete mode 100644 projects/plugins/protect/src/js/hooks/use-protect-data/index.ts delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/index.jsx delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx delete mode 100644 projects/plugins/protect/src/js/routes/scan/history/styles.module.scss create mode 100644 projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx delete mode 100644 projects/plugins/protect/src/js/types/fixers.ts delete mode 100644 projects/plugins/protect/src/js/types/scans.ts delete mode 100644 projects/plugins/protect/src/js/types/threats.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36f9ec51ec15c..b25211a65fdb7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4243,6 +4243,9 @@ importers: '@automattic/jetpack-connection': specifier: workspace:* version: link:../../js-packages/connection + '@automattic/jetpack-scan': + specifier: workspace:* + version: link:../../js-packages/scan '@tanstack/react-query': specifier: 5.20.5 version: 5.20.5(react@18.3.1) diff --git a/projects/js-packages/scan/changelog/add-additional-scan-types b/projects/js-packages/scan/changelog/add-additional-scan-types new file mode 100644 index 0000000000000..ea8bf89070b85 --- /dev/null +++ b/projects/js-packages/scan/changelog/add-additional-scan-types @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added more types for working with scan results. diff --git a/projects/js-packages/scan/src/types/fixers.ts b/projects/js-packages/scan/src/types/fixers.ts index 6991e02fba167..6a77dd90f3190 100644 --- a/projects/js-packages/scan/src/types/fixers.ts +++ b/projects/js-packages/scan/src/types/fixers.ts @@ -15,3 +15,26 @@ export type ThreatFixStatusSuccess = { }; export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess; + +/** + * Fixers Status + * + * Overall status of all fixers. + */ +type FixersStatusBase = { + ok: boolean; // Discriminator for overall success +}; + +export type FixersStatusError = FixersStatusBase & { + ok: false; + error: string; +}; + +export type FixersStatusSuccess = FixersStatusBase & { + ok: true; + threats: { + [ key: number ]: ThreatFixStatus; + }; +}; + +export type FixersStatus = FixersStatusSuccess | FixersStatusError; diff --git a/projects/js-packages/scan/src/types/index.ts b/projects/js-packages/scan/src/types/index.ts index 7f9ff96cb85c5..c85bbdc37a927 100644 --- a/projects/js-packages/scan/src/types/index.ts +++ b/projects/js-packages/scan/src/types/index.ts @@ -1,2 +1,3 @@ export * from './fixers'; +export * from './status'; export * from './threats'; diff --git a/projects/js-packages/scan/src/types/status.ts b/projects/js-packages/scan/src/types/status.ts new file mode 100644 index 0000000000000..d27bc9c96d5c9 --- /dev/null +++ b/projects/js-packages/scan/src/types/status.ts @@ -0,0 +1,33 @@ +import { Threat } from '..'; + +export type ScanStatus = { + /** The current status of the scanner. */ + status: 'unavailable' | 'provisioning' | 'idle' | 'scanning' | 'scheduled'; + + /** The IDs of fixable threats. */ + fixableThreatIds: number[]; + + /** The current scan progress, only available from the Scan API. */ + currentProgress: number | null; + + /** The data source for the scan status. */ + dataSource: 'protect_report' | 'scan_api'; + + /** Whether the site currently has extensions not checked in the latest scan. */ + hasUncheckedItems: boolean; + + /** The time the last scan was checked, in YYYY-MM-DD HH:MM:SS format. */ + lastChecked: string | null; + + /** Whether there was an error in the scan results. */ + error: boolean | null; + + /** The error code. */ + errorCode: string | null; + + /** The error message. */ + errorMessage: string | null; + + /** The detected threats. */ + threats: Threat[]; +}; diff --git a/projects/plugins/protect/changelog/add-threats-data-views b/projects/plugins/protect/changelog/add-threats-data-views new file mode 100644 index 0000000000000..e15bd6a461a71 --- /dev/null +++ b/projects/plugins/protect/changelog/add-threats-data-views @@ -0,0 +1,5 @@ +Significance: minor +Type: changed + +Added DataViews component for viewing scan results. + diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json index 6d6ad821bb3be..52366fa826ce8 100644 --- a/projects/plugins/protect/package.json +++ b/projects/plugins/protect/package.json @@ -29,6 +29,7 @@ "@automattic/jetpack-base-styles": "workspace:*", "@automattic/jetpack-components": "workspace:*", "@automattic/jetpack-connection": "workspace:*", + "@automattic/jetpack-scan": "workspace:*", "@tanstack/react-query": "5.20.5", "@tanstack/react-query-devtools": "5.20.5", "@wordpress/api-fetch": "7.11.0", diff --git a/projects/plugins/protect/src/class-scan-history.php b/projects/plugins/protect/src/class-scan-history.php index bd034c375caf9..8ea1dec7156e7 100644 --- a/projects/plugins/protect/src/class-scan-history.php +++ b/projects/plugins/protect/src/class-scan-history.php @@ -207,43 +207,19 @@ public static function fetch_from_api() { * Normalize API Data * Formats the payload from the Scan API into an instance of History_Model. * - * @phan-suppress PhanDeprecatedProperty -- Maintaining backwards compatibility. - * * @param object $scan_data The data returned by the scan API. * @return History_Model */ private static function normalize_api_data( $scan_data ) { - $history = new History_Model(); - $history->num_threats = 0; - $history->num_core_threats = 0; - $history->num_plugins_threats = 0; - $history->num_themes_threats = 0; - + $history = new History_Model(); $history->last_checked = $scan_data->last_checked; if ( empty( $scan_data->threats ) || ! is_array( $scan_data->threats ) ) { return $history; } - foreach ( $scan_data->threats as $threat ) { - if ( isset( $threat->extension->type ) ) { - if ( 'plugin' === $threat->extension->type ) { - self::handle_extension_threats( $threat, $history, 'plugin' ); - continue; - } - - if ( 'theme' === $threat->extension->type ) { - self::handle_extension_threats( $threat, $history, 'theme' ); - continue; - } - } - - if ( 'Vulnerable.WP.Core' === $threat->signature ) { - self::handle_core_threats( $threat, $history ); - continue; - } - - self::handle_additional_threats( $threat, $history ); + foreach ( $scan_data->threats as $source_threat ) { + $history->threats[] = new Threat_Model( $source_threat ); } return $history; diff --git a/projects/plugins/protect/src/js/api.ts b/projects/plugins/protect/src/js/api.ts index 9d95ab07279fc..97d11fd5c0f2b 100644 --- a/projects/plugins/protect/src/js/api.ts +++ b/projects/plugins/protect/src/js/api.ts @@ -1,7 +1,6 @@ +import { type FixersStatus, type ScanStatus } from '@automattic/jetpack-scan'; import apiFetch from '@wordpress/api-fetch'; import camelize from 'camelize'; -import { FixersStatus } from './types/fixers'; -import { ScanStatus } from './types/scans'; import { WafStatus } from './types/waf'; const API = { @@ -72,7 +71,7 @@ const API = { path: `jetpack-protect/v1/fix-threats`, method: 'POST', data: { threat_ids: threatIds }, - } ), + } ).then( camelize ), getFixersStatus: ( threatIds: number[] ): Promise< FixersStatus > => { const path = threatIds.reduce( ( carryPath, threatId ) => { @@ -82,7 +81,7 @@ const API = { return apiFetch( { path, method: 'GET', - } ); + } ).then( camelize ); }, ignoreThreat: ( threatId: number ) => diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx index 4579831b5f0a5..212ee5ede82c1 100644 --- a/projects/plugins/protect/src/js/components/admin-page/index.jsx +++ b/projects/plugins/protect/src/js/components/admin-page/index.jsx @@ -7,8 +7,8 @@ import { useConnection } from '@automattic/jetpack-connection'; import { __, sprintf } from '@wordpress/i18n'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import useScanStatusQuery from '../../data/scan/use-scan-status-query'; import useNotices from '../../hooks/use-notices'; -import useProtectData from '../../hooks/use-protect-data'; import useWafData from '../../hooks/use-waf-data'; import Notice from '../notice'; import Tabs, { Tab } from '../tabs'; @@ -19,11 +19,7 @@ const AdminPage = ( { children } ) => { const { isRegistered } = useConnection(); const { isSeen: wafSeen } = useWafData(); const navigate = useNavigate(); - const { - counts: { - current: { threats: numThreats }, - }, - } = useProtectData(); + const { data: status } = useScanStatusQuery(); // Redirect to the setup page if the site is not registered. useEffect( () => { @@ -48,11 +44,11 @@ const AdminPage = ( { children } ) => { link="/scan" label={ - { numThreats > 0 + { status.threats.length > 0 ? sprintf( // translators: %d is the number of threats found. __( 'Scan (%d)', 'jetpack-protect' ), - numThreats + status.threats.length ) : __( 'Scan', 'jetpack-protect' ) } 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 index e1274e8e29a17..cbb49498c353f 100644 --- a/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx +++ b/projects/plugins/protect/src/js/components/fix-threat-modal/index.jsx @@ -7,7 +7,7 @@ import ThreatFixHeader from '../threat-fix-header'; import UserConnectionGate from '../user-connection-gate'; import styles from './styles.module.scss'; -const FixThreatModal = ( { id, fixable, label, icon, severity } ) => { +const FixThreatModal = ( { threat } ) => { const { setModal } = useModal(); const { fixThreats, isLoading: isFixersLoading } = useFixers(); @@ -21,7 +21,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => { const handleFixClick = () => { return async event => { event.preventDefault(); - await fixThreats( [ id ] ); + await fixThreats( [ threat.id ] ); setModal( { type: null } ); }; }; @@ -37,10 +37,7 @@ const FixThreatModal = ( { id, fixable, label, icon, severity } ) => {
- +
diff --git a/projects/plugins/protect/src/js/components/free-accordion/index.jsx b/projects/plugins/protect/src/js/components/free-accordion/index.jsx deleted file mode 100644 index e801d9374fd33..0000000000000 --- a/projects/plugins/protect/src/js/components/free-accordion/index.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { Icon, chevronDown, chevronUp } from '@wordpress/icons'; -import clsx from 'clsx'; -import React, { useState, useCallback, useContext } from 'react'; -import styles from './styles.module.scss'; - -const FreeAccordionContext = React.createContext(); - -export const FreeAccordionItem = ( { id, title, label, icon, children, onOpen } ) => { - const accordionData = useContext( FreeAccordionContext ); - const open = accordionData?.open === id; - const setOpen = accordionData?.setOpen; - - const bodyClassNames = clsx( styles[ 'accordion-body' ], { - [ styles[ 'accordion-body-open' ] ]: open, - [ styles[ 'accordion-body-close' ] ]: ! open, - } ); - - const handleClick = useCallback( () => { - if ( ! open ) { - onOpen?.(); - } - setOpen( current => { - return current === id ? null : id; - } ); - }, [ open, onOpen, setOpen, id ] ); - - return ( -
- -
- { children } -
-
- ); -}; - -const FreeAccordion = ( { children } ) => { - const [ open, setOpen ] = useState(); - - return ( - -
{ children }
- - ); -}; - -export default FreeAccordion; diff --git a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx deleted file mode 100644 index 43ad41e2501eb..0000000000000 --- a/projects/plugins/protect/src/js/components/free-accordion/stories/index.stories.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { wordpress, plugins } from '@wordpress/icons'; -import React from 'react'; -import FreeAccordion, { FreeAccordionItem } from '..'; - -export default { - title: 'Plugins/Protect/Free Accordion', - component: FreeAccordion, - parameters: { - layout: 'centered', - }, - decorators: [ - Story => ( -
- -
- ), - ], -}; - -// eslint-disable-next-line no-unused-vars -export const Default = args => ( - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - -); diff --git a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss deleted file mode 100644 index 5278f6eff39f4..0000000000000 --- a/projects/plugins/protect/src/js/components/free-accordion/styles.module.scss +++ /dev/null @@ -1,79 +0,0 @@ -.accordion { - border-radius: var( --jp-border-radius ); - border: 1px solid var( --jp-gray ); - - & > *:not(:last-child) { - border-bottom: 1px solid var( --jp-gray ); - } -} - -.accordion-item { - background-color: var( --jp-white ); -} - -.accordion-header { - margin: 0; - display: grid; - grid-template-columns: repeat(9, 1fr); - cursor: pointer; - box-sizing: border-box; - background: none; - border: none; - width: 100%; - align-items: center; - outline-color: var( --jp-black ); - padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px - text-align: start; - - >:first-of-type { - grid-column: 1/8; - } - - >:last-of-type { - grid-column: 9; - } - - &:hover { - background: var( --jp-gray-0 ); - } -} - -.accordion-header-label { - display: flex; - align-items: center; - font-size: var( --font-body-small ); - font-weight: normal; -} - -.accordion-header-label-icon { - margin-right: var( --spacing-base ); // 8px -} - -.accordion-header-description { - font-weight: 600; - margin-left: calc( var( --spacing-base ) * 4 ); // 32px - margin-bottom: var( --spacing-base ); // 8px -} - -.accordion-header-button { - align-items: center; -} - -.accordion-body { - transform-origin: top center; - overflow: hidden; - - &-close { - transition: all .1s; - max-height: 0; - padding: 0; - transform: scaleY(0); - } - - &-open { - transition: max-height .3s, transform .2s; - padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px - max-height: 1000px; - transform: scaleY(1); - } -} 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 index 7e8113b6f38ab..591e90c6146b6 100644 --- a/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx +++ b/projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx @@ -1,4 +1,5 @@ import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components'; +import { getThreatIcon, getThreatSubtitle } from '@automattic/jetpack-scan'; import { createInterpolateElement, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/icons'; @@ -7,10 +8,11 @@ import useModal from '../../hooks/use-modal'; import UserConnectionGate from '../user-connection-gate'; import styles from './styles.module.scss'; -const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => { +const IgnoreThreatModal = ( { threat } ) => { const { setModal } = useModal(); const ignoreThreatMutation = useIgnoreThreatMutation(); const codeableURL = getRedirectUrl( 'jetpack-protect-codeable-referral' ); + const icon = getThreatIcon( threat ); const [ isIgnoring, setIsIgnoring ] = useState( false ); @@ -25,7 +27,7 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => { return async event => { event.preventDefault(); setIsIgnoring( true ); - await ignoreThreatMutation.mutateAsync( id ); + await ignoreThreatMutation.mutateAsync( threat.id ); setModal( { type: null } ); setIsIgnoring( false ); }; @@ -42,12 +44,12 @@ const IgnoreThreatModal = ( { id, title, label, icon, severity } ) => {
- { label } + { getThreatSubtitle( threat ) } - { title } + { threat.title }
- +
diff --git a/projects/plugins/protect/src/js/components/navigation/badge.jsx b/projects/plugins/protect/src/js/components/navigation/badge.jsx deleted file mode 100644 index 93ebecf7235ef..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/badge.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { Popover, Spinner } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { Icon, check, info } from '@wordpress/icons'; -import PropTypes from 'prop-types'; -import React, { useState, useCallback, useMemo } from 'react'; -import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query'; -import styles from './styles.module.scss'; - -/** - * Gets the Badge element - * - * @param {number} count - The number of threats found for this item. - * @param {boolean} checked - Whether this item was checked for threats yet. - * @return {object} The badge element - */ -const getBadgeElement = ( count, checked ) => { - if ( ! checked ) { - return { - popoverText: __( - 'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.', - 'jetpack-protect' - ), - badgeElement: ( - - ), - }; - } - - if ( count === 0 ) { - return { - popoverText: __( 'No known threats found to affect this version', 'jetpack-protect' ), - badgeElement: ( - - ), - }; - } - - return { - popoverText: null, - badgeElement: ( - - { count } - - ), - }; -}; - -const ItemBadge = ( { count, checked } ) => { - const { data: status } = useScanStatusQuery(); - - const { popoverText, badgeElement } = getBadgeElement( count, checked ); - const [ showPopover, setShowPopover ] = useState( false ); - - const inProgress = useMemo( () => isScanInProgress( status ), [ status ] ); - - const handleEnter = useCallback( () => { - if ( inProgress ) { - return; - } - - setShowPopover( true ); - }, [ inProgress ] ); - - const handleOut = useCallback( () => { - setShowPopover( false ); - }, [] ); - - return ( -
- { ! inProgress ? badgeElement : } - { showPopover && ( - - - { popoverText } - - - ) } -
- ); -}; - -ItemBadge.propTypes = { - /* The number of threats found for this item */ - count: PropTypes.number, - /* Whether this item was checked for threats yet */ - checked: PropTypes.bool, -}; - -export default ItemBadge; diff --git a/projects/plugins/protect/src/js/components/navigation/group.jsx b/projects/plugins/protect/src/js/components/navigation/group.jsx deleted file mode 100644 index 9352ae5c63d67..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/group.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Button } from '@automattic/jetpack-components'; -import { __, sprintf } from '@wordpress/i18n'; -import React, { useState, useCallback, useContext } from 'react'; -import ItemLabel from './label'; -import styles from './styles.module.scss'; -import { NavigationContext } from './use-menu-navigation'; - -const MAX_ITEMS = 8; - -const NavigationGroup = ( { icon, label, children } ) => { - const [ collapsed, setCollapsed ] = useState( true ); - const { mode } = useContext( NavigationContext ); - const needsTruncate = - Array.isArray( children ) && children?.length >= MAX_ITEMS && mode === 'list'; - const content = needsTruncate && collapsed ? children.slice( 0, MAX_ITEMS ) : children; - const totalHideItems = needsTruncate ? children?.length - MAX_ITEMS : 0; - - const handleCollapsedToggle = useCallback( () => { - setCollapsed( current => ! current ); - }, [] ); - - return ( -
  • - - { label } - -
    -
      { content }
    - { needsTruncate && ( -
    - -
    - ) } -
    -
    • - ); -}; - -export default NavigationGroup; diff --git a/projects/plugins/protect/src/js/components/navigation/index.jsx b/projects/plugins/protect/src/js/components/navigation/index.jsx deleted file mode 100644 index bd30dfbdad964..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/index.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { Popover } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { Icon, chevronDown, chevronUp } from '@wordpress/icons'; -import React, { useState, useRef, useCallback } from 'react'; -import NavigationGroup from './group'; -import NavigationItem from './item'; -import styles from './styles.module.scss'; -import useMenuNavigation, { NavigationContext } from './use-menu-navigation'; - -const NavigationList = ( { children } ) => ( -
      - { children } -
    -); - -const NavigationDropdown = ( { children, data } ) => { - const ref = useRef( undefined ); - const [ listOpen, setListOpen ] = useState( false ); - const item = data?.items?.find( navItem => navItem?.id === data?.selectedItem ) ?? { - label: __( 'See all results', 'jetpack-protect' ), - }; - const { label, icon } = item; - - const handleOpen = useCallback( () => { - setListOpen( open => ! open ); - }, [] ); - - return ( - - ); -}; - -const getNavigationComponent = mode => { - switch ( mode ) { - case 'list': - return NavigationList; - case 'dropdown': - return NavigationDropdown; - default: - return NavigationList; - } -}; - -const Navigation = ( { children, selected, onSelect, mode = 'list' } ) => { - const data = useMenuNavigation( { selected, onSelect } ); - const Component = getNavigationComponent( mode ); - - return ( - - { children } - - ); -}; - -export default Navigation; -export { NavigationItem, NavigationGroup }; diff --git a/projects/plugins/protect/src/js/components/navigation/item.jsx b/projects/plugins/protect/src/js/components/navigation/item.jsx deleted file mode 100644 index d902625c3997d..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/item.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import clsx from 'clsx'; -import React, { useContext, useEffect, useCallback } from 'react'; -import ItemBadge from './badge'; -import ItemLabel from './label'; -import styles from './styles.module.scss'; -import { NavigationContext } from './use-menu-navigation'; - -const NavigationItem = ( { - id, - label, - icon, - badge, - disabled, - onClick, - onKeyDown, - onFocus, - checked, -} ) => { - const context = useContext( NavigationContext ); - - const selected = context?.selectedItem === id; - const registerItem = context?.registerItem; - const registerRef = context?.registerRef; - const handleClickItem = context?.handleClickItem; - const handleKeyDownItem = context?.handleKeyDownItem; - const handleFocusItem = context?.handleFocusItem; - - const wrapperClassName = clsx( styles[ 'navigation-item' ], { - [ styles.clickable ]: ! disabled, - [ styles.selected ]: selected, - } ); - - const handleClick = useCallback( - evt => { - onClick?.( evt ); - handleClickItem?.( id ); - }, - [ handleClickItem, id, onClick ] - ); - - const handleKeyDown = useCallback( - evt => { - onKeyDown?.( evt ); - handleKeyDownItem?.( evt ); - }, - [ handleKeyDownItem, onKeyDown ] - ); - - const handleRef = useCallback( - ref => { - registerRef( ref, id ); - }, - [ registerRef, id ] - ); - - const handleFocus = useCallback( - evt => { - onFocus?.( evt ); - handleFocusItem?.( id ); - }, - [ handleFocusItem, id, onFocus ] - ); - - useEffect( () => { - registerItem( { id, disabled, label, icon } ); - // eslint-disable-next-line - }, [] ); - - return ( -
  • - { label } - -
    • - ); -}; - -export default NavigationItem; diff --git a/projects/plugins/protect/src/js/components/navigation/label.jsx b/projects/plugins/protect/src/js/components/navigation/label.jsx deleted file mode 100644 index 8f075caae020a..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/label.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { Icon } from '@wordpress/icons'; -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import React from 'react'; -import styles from './styles.module.scss'; - -const ItemLabel = ( { icon, children, className } ) => { - return ( - - { icon && } - { children } - - ); -}; - -ItemLabel.propTypes = { - /* An icon that will be rendered before text */ - icon: PropTypes.node, - /* Label text that will be rendered */ - children: PropTypes.node.isRequired, -}; - -export default ItemLabel; diff --git a/projects/plugins/protect/src/js/components/navigation/styles.module.scss b/projects/plugins/protect/src/js/components/navigation/styles.module.scss deleted file mode 100644 index df9e3ef1f8a25..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/styles.module.scss +++ /dev/null @@ -1,142 +0,0 @@ -.navigation { - background-color: var( --jp-white ); - box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08); - border-radius: var( --jp-border-radius ); - margin: 0; -} - -.navigation-item { - display: flex; - padding: calc( var( --spacing-base ) * 2 ); // 16px; - align-items: center; - justify-content: space-between; - margin: 0; - text-align: left; - - // Clickable State - &.clickable { - cursor: pointer; - outline-color: var( --jp-black ); - - // Focus/Hover State - &:hover:not(.selected), - &:focus:not(.selected) { - background-color: var( --jp-gray-0 ); - } - } - - // Selected State - &.selected { - background-color: var( --jp-black ); - - & .navigation-item-label { - color: var( --jp-white ) - } - - & .navigation-item-icon { - fill: var( --jp-white ); - } - - & .navigation-item-badge { - border: 1px solid var( --jp-red ); - background-color: var( --jp-red ); - color: var( --jp-white ); - } - } - - // CHILDRENS - - // .navigation-item-label - &-label { - display: flex; - align-items: center; - padding-right: var( --spacing-base ); // 8px - overflow-x: hidden; - } - - // .navigation-item-label-content - &-label-text { - display: block; - overflow-x: hidden; - text-overflow: ellipsis; - } - - // .navigation-item-icon - &-icon { - margin-right: calc( var( --spacing-base ) * 2); // 16px - } - - // .navigation-item-badge - &-badge { - border: 1px solid var( --jp-red-60 ); - color: var( --jp-red-60 ); - border-radius: 50%; - padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px - min-width: 30px; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - } - - &-check-badge { - fill: var( --jp-green-50 ); - } - - &-info-badge { - fill: var( --jp-gray-20 ); - } -} - -.navigation-group { - --icon-size: 28px; - --item-spacing: calc( var( --spacing-base ) * 2 ); // 16px - --left-spacing: calc( var( --icon-size ) + var( --item-spacing ) ); // 28px + 16px - - list-style: none; - - &-label { - padding: calc( var( --spacing-base ) * 2 ); // 16px - } - - &-content { - padding: 0; - } - - &-list { - margin-left: var( --left-spacing ) ; - } - - &-truncate { - padding: calc( var( --spacing-base ) * 2 ); // 16px - display: flex; - justify-content: flex-start; - } -} - -.popover-text { - width: 250px; - padding: calc( var( --spacing-base ) * 2 ); // 16px -} - -.navigation-dropdown { - &-button { - display: flex; - border: 1px solid var( --jp-gray-10 ); - border-radius: var( --jp-border-radius ); - padding: calc( var( --spacing-base ) * 2 ); // 16px - background-color: var( --jp-white ); - justify-content: space-between; - align-items: center; - width: 100%; - } - - &-label { - display: flex; - justify-content: flex-start; - } - - &-icon { - margin-right: var( --spacing-base ); // 8px - } -} diff --git a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js b/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js deleted file mode 100644 index 2972dac06b572..0000000000000 --- a/projects/plugins/protect/src/js/components/navigation/use-menu-navigation.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { useState } from 'react'; - -export const NavigationContext = React.createContext(); - -const useMenuNavigation = ( { selected, onSelect } ) => { - const [ items, setItems ] = useState( [] ); - const [ refs, setRef ] = useState( [] ); - const [ focusedItem, setFocusedItem ] = useState(); - - const handleClickItem = id => { - onSelect( id ); - }; - - const handleFocusItem = id => { - setFocusedItem( id ); - }; - - const getPrevItem = ( current, last ) => { - const startMinusOne = current - 1; - const prevIndex = startMinusOne < 0 ? last : startMinusOne; - const prevItem = items[ prevIndex ]; - return prevItem?.disabled ? getPrevItem( prevIndex, last ) : prevItem; - }; - - const getNextItem = ( current, last ) => { - const startPlusOne = current + 1; - const nextIndex = startPlusOne > last ? 0 : startPlusOne; - const nextItem = items[ nextIndex ]; - return nextItem?.disabled ? getNextItem( nextIndex, last ) : nextItem; - }; - - const handleKeyDownItem = input => { - const code = input?.code; - const current = items.findIndex( item => item?.id === selected ); - const lastIndex = items.length - 1; - - let nextId; - - if ( code === 'ArrowUp' ) { - const prevItem = getPrevItem( current, lastIndex ); - nextId = prevItem?.id; - } else if ( code === 'ArrowDown' ) { - const nextItem = getNextItem( current, lastIndex ); - nextId = nextItem?.id; - } else if ( ( code === 'Enter' || code === 'Space' ) && focusedItem ) { - nextId = focusedItem; - } - - if ( nextId ) { - const element = refs[ nextId ]; - element?.focus(); - onSelect( nextId ); - } - }; - - const registerRef = ( ref, id ) => { - setRef( allRefs => { - if ( ! allRefs[ id ] && ref ) { - return { ...allRefs, [ id ]: ref }; - } - return allRefs; - } ); - }; - - const registerItem = data => { - setItems( allItems => { - const newItems = [ ...allItems ]; - const id = data?.id; - const currentIdx = newItems.findIndex( item => item?.id === id ); - - if ( currentIdx >= 0 ) { - newItems[ currentIdx ] = data; - } else { - newItems.push( data ); - } - - return newItems; - } ); - }; - - return { - selectedItem: selected, - handleClickItem, - handleKeyDownItem, - handleFocusItem, - registerRef, - registerItem, - items, - }; -}; - -export default useMenuNavigation; diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx deleted file mode 100644 index d4a6fa5d3f0ba..0000000000000 --- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx +++ /dev/null @@ -1,187 +0,0 @@ -import { - Spinner, - Text, - ThreatSeverityBadge, - useBreakpointMatch, -} from '@automattic/jetpack-components'; -import { ExternalLink } from '@wordpress/components'; -import { dateI18n } from '@wordpress/date'; -import { createInterpolateElement } from '@wordpress/element'; -import { sprintf, __ } from '@wordpress/i18n'; -import { Icon, check, chevronDown, chevronUp, info } from '@wordpress/icons'; -import clsx from 'clsx'; -import React, { useState, useCallback, useContext, useMemo } from 'react'; -import { PAID_PLUGIN_SUPPORT_URL } from '../../constants'; -import useFixers from '../../hooks/use-fixers'; -import IconTooltip from '../icon-tooltip'; -import styles from './styles.module.scss'; - -// Extract context provider for clarity and reusability -const PaidAccordionContext = React.createContext(); - -// Component for displaying threat dates -const ScanHistoryDetails = ( { firstDetected, fixedOn, status } ) => { - const statusText = useMemo( () => { - if ( status === 'fixed' ) { - return sprintf( - /* translators: %s: Fixed on date */ - __( 'Threat fixed %s', 'jetpack-protect' ), - dateI18n( 'M j, Y', fixedOn ) - ); - } - if ( status === 'ignored' ) { - return __( 'Threat ignored', 'jetpack-protect' ); - } - return null; - }, [ status, fixedOn ] ); - - return ( - firstDetected && ( - <> - - { sprintf( - /* translators: %s: First detected date */ - __( 'Threat found %s', 'jetpack-protect' ), - dateI18n( 'M j, Y', firstDetected ) - ) } - { statusText && ( - <> - - { statusText } - - ) } - - { [ 'fixed', 'ignored' ].includes( status ) && } - - ) - ); -}; - -// Badge for displaying the status (fixed or ignored) -const StatusBadge = ( { status } ) => ( -
    - { status === 'fixed' - ? __( 'Fixed', 'jetpack-protect' ) - : __( 'Ignored', 'jetpack-protect', /* dummy arg to avoid bad minification */ 0 ) } -
    -); - -const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => { - if ( isStaleFixInProgress ) { - return ( - contact support.', - 'jetpack-protect' - ), - { - supportLink: ( - - ), - } - ) } - /> - ); - } - - if ( isActiveFixInProgress ) { - return ; - } - - return ; -}; - -export const PaidAccordionItem = ( { - id, - title, - label, - icon, - fixable, - severity, - children, - firstDetected, - fixedOn, - onOpen, - status, - hideAutoFixColumn = false, -} ) => { - const { open, setOpen } = useContext( PaidAccordionContext ); - const isOpen = open === id; - - const { isThreatFixInProgress, isThreatFixStale } = useFixers(); - - const handleClick = useCallback( () => { - if ( ! isOpen ) { - onOpen?.(); - } - setOpen( current => ( current === id ? null : id ) ); - }, [ isOpen, onOpen, setOpen, id ] ); - - const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] ); - - return ( -
    - -
    - { children } -
    -
    - ); -}; - -const PaidAccordion = ( { children } ) => { - const [ open, setOpen ] = useState(); - - return ( - -
    { children }
    -     - ); -}; - -export default PaidAccordion; diff --git a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx b/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx deleted file mode 100644 index 252f22b2bad77..0000000000000 --- a/projects/plugins/protect/src/js/components/paid-accordion/stories/broken/index.stories.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Text } from '@automattic/jetpack-components'; -import { wordpress, plugins } from '@wordpress/icons'; -import React from 'react'; -import PaidAccordion, { PaidAccordionItem } from '..'; - -export default { - title: 'Plugins/Protect/Paid Accordion', - component: PaidAccordion, - parameters: { - layout: 'centered', - }, - decorators: [ - Story => ( -
    - -
    - ), - ], -}; - -// eslint-disable-next-line no-unused-vars -export const Default = args => ( - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - - - What is the problem? - - - Post authors are able to bypass KSES restrictions in WordPress { '>' }= 5.9 (and or - Gutenberg { '>' }= 9.8.0) due to the order filters are executed, which could allow them to - perform to Stored Cross-Site Scripting attacks - - - How to fix it? - - Update to WordPress 5.9.2 - - -); diff --git a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss b/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss deleted file mode 100644 index 3e88a5f9f7ccb..0000000000000 --- a/projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss +++ /dev/null @@ -1,191 +0,0 @@ -.accordion { - display: inline-block; - width: 100%; - border-radius: var( --jp-border-radius ); - border: 1px solid var( --jp-gray ); - - & > *:not(:last-child) { - border-bottom: 1px solid var( --jp-gray ); - } -} - -.accordion-item { - background-color: var( --jp-white ); -} - -.accordion-header { - margin: 0; - display: grid; - grid-template-columns: repeat(9, 1fr); - cursor: pointer; - box-sizing: border-box; - background: none; - border: none; - width: 100%; - align-items: center; - outline-color: var( --jp-black ); - padding: calc( var( --spacing-base ) * 2) calc( var( --spacing-base ) * 3); // 16px | 24px - text-align: start; - - >:first-of-type { - grid-column: 1/7; - } - - >:last-of-type { - grid-column: 9; - } - - >:not( :first-child ) { - margin: auto; - } - - &:hover { - background: var( --jp-gray-0 ); - } -} - -.accordion-header-label { - display: flex; - align-items: center; - font-size: var( --font-body-small ); - font-weight: normal; -} - -.accordion-header-label-icon { - margin-right: var( --spacing-base ); // 8px -} - -.accordion-header-description { - font-weight: 600; - margin-left: calc( var( --spacing-base ) * 4 ); // 32px - margin-bottom: var( --spacing-base ); // 8px -} - -.accordion-header-status { - font-size: var( --font-body-small ); - font-weight: normal; - margin-left: calc( var( --spacing-base ) * 4 ); // 32px - margin-bottom: var( --spacing-base ); // 8px -} - -.accordion-header-status-separator { - display: inline-block; - height: 4px; - margin: 2px 12px; - width: 4px; - background-color: var( --jp-gray-50 ); -} - -.accordion-header-button { - align-items: center; -} - -.accordion-body { - transform-origin: top center; - overflow: hidden; - - &-close { - transition: all .1s; - max-height: 0; - padding: 0; - transform: scaleY(0); - } - - &-open { - transition: max-height .3s, transform .2s; - padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 7 ); // 32 px | 56px - max-height: 1000px; - transform: scaleY(1); - } -} - -.icon-check { - fill: var( --jp-green-40 ); -} - -.icon-info { - fill: var( --jp-red ); -} - -.status-badge { - border-radius: 32px; - flex-shrink: 0; - font-size: 12px; - font-style: normal; - font-weight: 600; - line-height: 16px; - padding: calc( var( --spacing-base ) / 2 ); // 4px - position: relative; - text-align: center; - width: 60px; - margin-left: calc( var( --spacing-base ) * 4 ); // 32px - - &.fixed { - color: var( --jp-white ); - background-color: #008a20; - } - - &.ignored { - color: var( --jp-white ); - background-color: var( --jp-gray-50 ); - } -} - -.is-fixed { - color: #008a20; -} - -.support-link { - color: inherit; - - &:focus, - &:hover { - color: inherit; - box-shadow: none; - } -} - -@media ( max-width: 599px ) { - .accordion-header { - display: grid; - grid-auto-rows: minmax( auto, auto ); - - >:first-child { - grid-column: 1/8; - grid-row: 1; - } - - >:nth-child( 2 ) { - padding-left: calc( var( --spacing-base ) * 4 ); // 32px - grid-row: 2; - } - - >:nth-child( 3 ) { - grid-row: 2; - } - - >:nth-child( 3 ) span { - position: absolute; - margin-top: var( --spacing-base ); // 8px - } - - >:last-child { - grid-column: 10; - grid-row: 1/3; - } - } - - .status-badge { - display: none; - } -} - -@media ( max-width: 1200px ) { - .accordion-header-status { - display: grid; - } - - .accordion-header-status-separator { - display: none; - } -} diff --git a/projects/plugins/protect/src/js/components/pricing-table/index.jsx b/projects/plugins/protect/src/js/components/pricing-table/index.jsx index 3edd7911a0b6a..0f857430d92d8 100644 --- a/projects/plugins/protect/src/js/components/pricing-table/index.jsx +++ b/projects/plugins/protect/src/js/components/pricing-table/index.jsx @@ -11,9 +11,9 @@ import { __ } from '@wordpress/i18n'; import React, { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import useConnectSiteMutation from '../../data/use-connection-mutation'; +import useProductDataQuery from '../../data/use-product-data-query'; import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; import usePlan from '../../hooks/use-plan'; -import useProtectData from '../../hooks/use-protect-data'; /** * Product Detail component. @@ -30,7 +30,7 @@ const ConnectedPricingTable = () => { } ); // Access paid protect product data - const { jetpackScan } = useProtectData(); + const { data: jetpackScan } = useProductDataQuery(); const { pricingForUi } = jetpackScan; const { introductoryOffer, currencyCode: currency = 'USD' } = pricingForUi; diff --git a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx index bc5e0107cea80..d1cfd7dadd15a 100644 --- a/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx +++ b/projects/plugins/protect/src/js/components/threat-fix-header/index.jsx @@ -1,4 +1,5 @@ import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components'; +import { getThreatSubtitle } from '@automattic/jetpack-scan'; import { __, sprintf } from '@wordpress/i18n'; import { Icon } from '@wordpress/icons'; import React, { useState, useCallback } from 'react'; @@ -68,7 +69,7 @@ export default function ThreatFixHeader( { threat, fixAllDialog, onCheckFix } )
    - { threat.label } + { getThreatSubtitle( threat ) } { getFixerMessage( threat.fixable ) } diff --git a/projects/plugins/protect/src/js/components/threats-list/empty.jsx b/projects/plugins/protect/src/js/components/threats-list/empty.jsx deleted file mode 100644 index 2d493b11e64a4..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/empty.jsx +++ /dev/null @@ -1,140 +0,0 @@ -import { H3, Text } from '@automattic/jetpack-components'; -import { createInterpolateElement } from '@wordpress/element'; -import { sprintf, __, _n } from '@wordpress/i18n'; -import { useMemo, useState } from 'react'; -import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query'; -import usePlan from '../../hooks/use-plan'; -import useProtectData from '../../hooks/use-protect-data'; -import OnboardingPopover from '../onboarding-popover'; -import ScanButton from '../scan-button'; -import styles from './styles.module.scss'; - -const ProtectCheck = () => ( - - - - -); - -/** - * Time Since - * - * @param {string} date - The past date to compare to the current date. - * @return {string} - A description of the amount of time between a date and now, i.e. "5 minutes ago". - */ -const timeSince = date => { - const now = new Date(); - const offset = now.getTimezoneOffset() * 60000; - - const seconds = Math.floor( ( new Date( now.getTime() + offset ).getTime() - date ) / 1000 ); - - let interval = seconds / 31536000; // 364 days - if ( interval > 1 ) { - return sprintf( - // translators: placeholder is a number amount of years i.e. "5 years ago". - _n( '%s year ago', '%s years ago', Math.floor( interval ), 'jetpack-protect' ), - Math.floor( interval ) - ); - } - - interval = seconds / 2592000; // 30 days - if ( interval > 1 ) { - return sprintf( - // translators: placeholder is a number amount of months i.e. "5 months ago". - _n( '%s month ago', '%s months ago', Math.floor( interval ), 'jetpack-protect' ), - Math.floor( interval ) - ); - } - - interval = seconds / 86400; // 1 day - if ( interval > 1 ) { - return sprintf( - // translators: placeholder is a number amount of days i.e. "5 days ago". - _n( '%s day ago', '%s days ago', Math.floor( interval ), 'jetpack-protect' ), - Math.floor( interval ) - ); - } - - interval = seconds / 3600; // 1 hour - if ( interval > 1 ) { - return sprintf( - // translators: placeholder is a number amount of hours i.e. "5 hours ago". - _n( '%s hour ago', '%s hours ago', Math.floor( interval ), 'jetpack-protect' ), - Math.floor( interval ) - ); - } - - interval = seconds / 60; // 1 minute - if ( interval > 1 ) { - return sprintf( - // translators: placeholder is a number amount of minutes i.e. "5 minutes ago". - _n( '%s minute ago', '%s minutes ago', Math.floor( interval ), 'jetpack-protect' ), - Math.floor( interval ) - ); - } - - return __( 'a few seconds ago', 'jetpack-protect' ); -}; - -const EmptyList = () => { - const { lastChecked } = useProtectData(); - const { hasPlan } = usePlan(); - const { data: status } = useScanStatusQuery(); - - const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] = - useState( null ); - - const timeSinceLastScan = useMemo( () => { - return lastChecked ? timeSince( Date.parse( lastChecked ) ) : null; - }, [ lastChecked ] ); - - return ( -
    - -

    - { __( "Don't worry about a thing", 'jetpack-protect' ) } -

    - - { timeSinceLastScan - ? createInterpolateElement( - sprintf( - // translators: placeholder is the amount of time since the last scan, i.e. "5 minutes ago". - __( - 'The last Protect scan ran %s and everything looked great.', - 'jetpack-protect' - ), - timeSinceLastScan - ), - { - strong: , - } - ) - : __( 'No threats have been detected by the current scan.', 'jetpack-protect' ) } - - { hasPlan && ( - <> - - { ! isScanInProgress( status ) && ( -
    - ); -}; - -export default EmptyList; diff --git a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx b/projects/plugins/protect/src/js/components/threats-list/free-list.jsx deleted file mode 100644 index 88d4a92f9bac5..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/free-list.jsx +++ /dev/null @@ -1,125 +0,0 @@ -import { Text, Button, ContextualUpgradeTrigger } from '@automattic/jetpack-components'; -import { __, sprintf } from '@wordpress/i18n'; -import React, { useCallback } from 'react'; -import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; -import usePlan from '../../hooks/use-plan'; -import FreeAccordion, { FreeAccordionItem } from '../free-accordion'; -import Pagination from './pagination'; -import styles from './styles.module.scss'; - -const ThreatAccordionItem = ( { - description, - fixedIn, - icon, - id, - label, - name, - source, - title, - type, -} ) => { - const { recordEvent } = useAnalyticsTracks(); - const { upgradePlan } = usePlan(); - - const getScan = useCallback( () => { - recordEvent( 'jetpack_protect_threat_list_get_scan_link_click' ); - upgradePlan(); - }, [ recordEvent, upgradePlan ] ); - - const learnMoreButton = source ? ( - - ) : null; - - return ( - { - if ( ! [ 'core', 'plugin', 'theme' ].includes( type ) ) { - return; - } - recordEvent( `jetpack_protect_${ type }_threat_open` ); - }, [ recordEvent, type ] ) } - > - { description && ( -
    - - { __( 'What is the problem?', 'jetpack-protect' ) } - - { description } - { learnMoreButton } -
    - ) } - { fixedIn && ( -
    - - { __( 'How to fix it?', 'jetpack-protect' ) } - - - { - /* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */ - sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn ) - } - - -
    - ) } - { ! description &&
    { learnMoreButton }
    } -     - ); -}; - -const FreeList = ( { list } ) => { - return ( - - { ( { currentItems } ) => ( - - { currentItems.map( - ( { - description, - fixedIn, - icon, - id, - label, - name, - source, - table, - title, - type, - version, - } ) => ( - - ) - ) } - - ) } - - ); -}; - -export default FreeList; diff --git a/projects/plugins/protect/src/js/components/threats-list/index.jsx b/projects/plugins/protect/src/js/components/threats-list/index.jsx deleted file mode 100644 index 2823a804c1412..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/index.jsx +++ /dev/null @@ -1,194 +0,0 @@ -import { - Container, - Col, - Title, - Button, - useBreakpointMatch, - Text, -} from '@automattic/jetpack-components'; -import { __, sprintf } from '@wordpress/i18n'; -import React, { useCallback, useMemo, useState } from 'react'; -import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query'; -import useFixers from '../../hooks/use-fixers'; -import useModal from '../../hooks/use-modal'; -import usePlan from '../../hooks/use-plan'; -import OnboardingPopover from '../onboarding-popover'; -import ScanButton from '../scan-button'; -import EmptyList from './empty'; -import FreeList from './free-list'; -import ThreatsNavigation from './navigation'; -import PaidList from './paid-list'; -import styles from './styles.module.scss'; -import useThreatsList from './use-threats-list'; - -const ThreatsList = () => { - const { hasPlan } = usePlan(); - const { item, list, selected, setSelected } = useThreatsList(); - const [ isSm ] = useBreakpointMatch( 'sm' ); - const { isThreatFixInProgress, isThreatFixStale } = useFixers(); - - const { data: status } = useScanStatusQuery(); - const scanning = isScanInProgress( status ); - - // List of fixable threats that do not have a fix in progress - const fixableList = useMemo( () => { - return list.filter( threat => { - const threatId = parseInt( threat.id ); - return ( - threat.fixable && ! isThreatFixInProgress( threatId ) && ! isThreatFixStale( threatId ) - ); - } ); - }, [ list, isThreatFixInProgress, isThreatFixStale ] ); - - // Popover anchors - const [ yourScanResultsPopoverAnchor, setYourScanResultsPopoverAnchor ] = useState( null ); - const [ understandSeverityPopoverAnchor, setUnderstandSeverityPopoverAnchor ] = useState( null ); - const [ showAutoFixersPopoverAnchor, setShowAutoFixersPopoverAnchor ] = useState( null ); - const [ dailyAndManualScansPopoverAnchor, setDailyAndManualScansPopoverAnchor ] = - useState( null ); - - const { setModal } = useModal(); - - const handleShowAutoFixersClick = threatList => { - return event => { - event.preventDefault(); - setModal( { - type: 'FIX_ALL_THREATS', - props: { threatList }, - } ); - }; - }; - - const getTitle = useCallback( () => { - switch ( selected ) { - case 'all': - if ( list.length === 1 ) { - return __( 'All threats', 'jetpack-protect' ); - } - return sprintf( - /* translators: placeholder is the amount of threats found on the site. */ - __( 'All %s threats', 'jetpack-protect' ), - list.length - ); - case 'core': - return sprintf( - /* translators: placeholder is the amount of WordPress threats found on the site. */ - __( '%1$s WordPress %2$s', 'jetpack-protect' ), - list.length, - list.length === 1 ? 'threat' : 'threats' - ); - case 'files': - return sprintf( - /* translators: placeholder is the amount of file threats found on the site. */ - __( '%1$s file %2$s', 'jetpack-protect' ), - list.length, - list.length === 1 ? 'threat' : 'threats' - ); - case 'database': - return sprintf( - /* translators: placeholder is the amount of database threats found on the site. */ - __( '%1$s database %2$s', 'jetpack-protect' ), - list.length, - list.length === 1 ? 'threat' : 'threats' - ); - default: - return sprintf( - /* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */ - __( '%1$s %2$s in %3$s %4$s', 'jetpack-protect' ), - list.length, - list.length === 1 ? 'threat' : 'threats', - item?.name, - item?.version - ); - } - }, [ selected, list, item ] ); - - return ( - - -
    - -
    - { ! scanning && ( - - ) } - - - { list?.length > 0 ? ( - <> -
    - { getTitle() } - { hasPlan && ( -
    - { fixableList.length > 0 && ( - <> - - { ! scanning && ( -
    - ) } -
    - { hasPlan ? ( - <> -
    - -
    - - { __( - 'If you have manually fixed any of the threats listed above, you can run a manual scan now or wait for Jetpack to scan your site later today.', - 'jetpack-protect' - ) } - - -
    -
    - { ! scanning && ( -     - ); -}; - -export default ThreatsList; diff --git a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx b/projects/plugins/protect/src/js/components/threats-list/navigation.jsx deleted file mode 100644 index 9befe85a78612..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/navigation.jsx +++ /dev/null @@ -1,130 +0,0 @@ -import { useBreakpointMatch } from '@automattic/jetpack-components'; -import { __ } from '@wordpress/i18n'; -import { - wordpress as coreIcon, - plugins as pluginsIcon, - warning as warningIcon, - color as themesIcon, - code as filesIcon, -} from '@wordpress/icons'; -import { useCallback, useMemo } from 'react'; -import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; -import usePlan from '../../hooks/use-plan'; -import useProtectData from '../../hooks/use-protect-data'; -import Navigation, { NavigationItem, NavigationGroup } from '../navigation'; - -const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFilter = 'all' } ) => { - const { hasPlan } = usePlan(); - const { - results: { plugins, themes }, - counts: { - current: { threats: numThreats, core: numCoreThreats, files: numFilesThreats }, - }, - } = useProtectData( { sourceType, filter: { status: statusFilter } } ); - - const { recordEvent } = useAnalyticsTracks(); - const [ isSmallOrLarge ] = useBreakpointMatch( 'lg', '<' ); - - const trackNavigationClickAll = useCallback( () => { - recordEvent( 'jetpack_protect_navigation_all_click' ); - }, [ recordEvent ] ); - - const trackNavigationClickCore = useCallback( () => { - recordEvent( 'jetpack_protect_navigation_core_click' ); - }, [ recordEvent ] ); - - const trackNavigationClickPlugin = useCallback( () => { - recordEvent( 'jetpack_protect_navigation_plugin_click' ); - }, [ recordEvent ] ); - - const trackNavigationClickTheme = useCallback( () => { - recordEvent( 'jetpack_protect_navigation_theme_click' ); - }, [ recordEvent ] ); - - const trackNavigationClickFiles = useCallback( () => { - recordEvent( 'jetpack_protect_navigation_file_click' ); - }, [ recordEvent ] ); - - const allLabel = useMemo( () => { - if ( statusFilter === 'fixed' ) { - return __( 'All fixed threats', 'jetpack-protect' ); - } - if ( statusFilter === 'ignored' ) { - return __( - 'All ignored threats', - 'jetpack-protect', - /** dummy arg to avoid bad minification */ 0 - ); - } - return __( 'All threats', 'jetpack-protect' ); - }, [ statusFilter ] ); - - return ( - - - - - { plugins.map( ( { name, threats, checked } ) => ( - - ) ) } - - - { themes.map( ( { name, threats, checked } ) => ( - - ) ) } - - { hasPlan && ( - <> - - - ) } - - ); -}; - -export default ThreatsNavigation; diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx deleted file mode 100644 index 3e17bed0eeac4..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx +++ /dev/null @@ -1,142 +0,0 @@ -import { Button, useBreakpointMatch } from '@automattic/jetpack-components'; -import { __, sprintf } from '@wordpress/i18n'; -import { chevronLeft, chevronRight } from '@wordpress/icons'; -import React, { useCallback, useState, useMemo } from 'react'; -import styles from './styles.module.scss'; - -const PaginationButton = ( { pageNumber, currentPage, onPageChange } ) => { - const isCurrentPage = useMemo( () => currentPage === pageNumber, [ currentPage, pageNumber ] ); - - const handleClick = useCallback( () => { - onPageChange( pageNumber ); - }, [ onPageChange, pageNumber ] ); - - return ( - - ); -}; - -const Pagination = ( { list, itemPerPage = 10, children } ) => { - const [ isSm ] = useBreakpointMatch( 'sm' ); - - const [ currentPage, setCurrentPage ] = useState( 1 ); - - const handlePreviousPageClick = useCallback( - () => setCurrentPage( currentPage - 1 ), - [ currentPage, setCurrentPage ] - ); - const handleNextPageClick = useCallback( - () => setCurrentPage( currentPage + 1 ), - [ currentPage, setCurrentPage ] - ); - - const totalPages = useMemo( () => Math.ceil( list.length / itemPerPage ), [ list, itemPerPage ] ); - - const currentItems = useMemo( () => { - const indexOfLastItem = currentPage * itemPerPage; - const indexOfFirstItem = indexOfLastItem - itemPerPage; - return list.slice( indexOfFirstItem, indexOfLastItem ); - }, [ currentPage, list, itemPerPage ] ); - - const pageNumbers = useMemo( () => { - if ( isSm ) { - return [ currentPage ]; - } - - const result = [ 1 ]; - if ( currentPage > 3 && totalPages > 4 ) { - result.push( '…' ); - } - - if ( currentPage === 1 ) { - // Current page is the first page. - // i.e. [ 1 ] 2 3 4 ... 10 - result.push( currentPage + 1, currentPage + 2, currentPage + 3 ); - } else if ( currentPage === 2 ) { - // Current page is the second to first page. - // i.e. 1 [ 2 ] 3 4 ... 10 - result.push( currentPage, currentPage + 1, currentPage + 2 ); - } else if ( currentPage < totalPages - 1 ) { - // Current page is positioned in the middle of the pagination. - // i.e. 1 ... 3 [ 4 ] 5 ... 10 - result.push( currentPage - 1, currentPage, currentPage + 1 ); - } else if ( currentPage === totalPages - 1 ) { - // Current page is the second to last page. - // i.e. 1 ... 7 8 [ 9 ] 10 - currentPage > 3 && result.push( currentPage - 2 ); - currentPage > 2 && result.push( currentPage - 1 ); - result.push( currentPage ); - } else if ( currentPage === totalPages ) { - // Current page is the last page. - // i.e. 1 ... 7 8 9 [ 10 ] - currentPage >= 5 && result.push( currentPage - 3 ); - currentPage >= 4 && result.push( currentPage - 2 ); - result.push( currentPage - 1 ); - } - - if ( result[ result.length - 1 ] < totalPages - 1 ) { - result.push( '…' ); - result.push( totalPages ); - } else if ( result[ result.length - 1 ] < totalPages ) { - result.push( totalPages ); - } - - return result.filter( pageNumber => pageNumber <= totalPages || isNaN( pageNumber ) ); - }, [ currentPage, isSm, totalPages ] ); - - return ( - <> - { children( { currentItems } ) } - { totalPages > 1 && ( - - ) } - - ); -}; - -export default Pagination; diff --git a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx b/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx deleted file mode 100644 index baedf8dfa5184..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/paid-list.jsx +++ /dev/null @@ -1,253 +0,0 @@ -import { - Text, - Button, - DiffViewer, - MarkedLines, - useBreakpointMatch, -} from '@automattic/jetpack-components'; -import { __, sprintf } from '@wordpress/i18n'; -import React, { useCallback } from 'react'; -import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; -import useFixers from '../../hooks/use-fixers'; -import useModal from '../../hooks/use-modal'; -import PaidAccordion, { PaidAccordionItem } from '../paid-accordion'; -import Pagination from './pagination'; -import styles from './styles.module.scss'; - -const ThreatAccordionItem = ( { - context, - description, - diff, - filename, - firstDetected, - fixedIn, - fixedOn, - icon, - fixable, - id, - label, - name, - source, - title, - type, - severity, - status, - hideAutoFixColumn = false, -} ) => { - const { setModal } = useModal(); - const { recordEvent } = useAnalyticsTracks(); - - const { isThreatFixInProgress, isThreatFixStale } = useFixers(); - const isActiveFixInProgress = isThreatFixInProgress( id ); - const isStaleFixInProgress = isThreatFixStale( id ); - - const learnMoreButton = source ? ( - - ) : null; - - const handleIgnoreThreatClick = () => { - return event => { - event.preventDefault(); - setModal( { - type: 'IGNORE_THREAT', - props: { id, label, title, icon, severity }, - } ); - }; - }; - - const handleUnignoreThreatClick = () => { - return event => { - event.preventDefault(); - setModal( { - type: 'UNIGNORE_THREAT', - props: { id, label, title, icon, severity }, - } ); - }; - }; - - const handleFixThreatClick = () => { - return event => { - event.preventDefault(); - setModal( { - type: 'FIX_THREAT', - props: { id, fixable, label, icon, severity }, - } ); - }; - }; - - return ( - { - if ( ! [ 'core', 'plugin', 'theme', 'file', 'database' ].includes( type ) ) { - return; - } - recordEvent( `jetpack_protect_${ type }_threat_open` ); - }, [ recordEvent, type ] ) } - hideAutoFixColumn={ hideAutoFixColumn } - > - { description && ( -
    - - { status !== 'fixed' - ? __( 'What is the problem?', 'jetpack-protect' ) - : __( - 'What was the problem?', - 'jetpack-protect', - /** dummy arg to avoid bad minification */ 0 - ) } - - { description } - { learnMoreButton } -
    - ) } - { ( filename || context || diff ) && ( - - { __( 'The technical details', 'jetpack-protect' ) } - - ) } - { filename && ( - <> - - { - /* translators: filename follows in separate line; e.g. "PHP.Injection.5 in: `post.php`" */ - __( 'Threat found in file:', 'jetpack-protect' ) - } - - 
    { filename }
    - - ) } - { context && } - { diff && } - { fixedIn && status !== 'fixed' && ( -
    - - { __( 'How to fix it?', 'jetpack-protect' ) } - - - { - /* translators: Translates to Update to. %1$s: Name. %2$s: Fixed version */ - sprintf( __( 'Update to %1$s %2$s', 'jetpack-protect' ), name, fixedIn ) - } - -
    - ) } - { ! description &&
    { learnMoreButton }
    } - { [ 'ignored', 'current' ].includes( status ) && ( -
    - { 'ignored' === status && ( - - ) } - { 'current' === status && ( - <> - - { fixable && ( - - ) } - - ) } -
    - ) } -     - ); -}; - -const PaidList = ( { list, hideAutoFixColumn = false } ) => { - const [ isSmall ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] ); - - return ( - <> - { ! isSmall && ( -
    - { __( 'Details', 'jetpack-protect' ) } - { __( 'Severity', 'jetpack-protect' ) } - { ! hideAutoFixColumn && { __( 'Auto-fix', 'jetpack-protect' ) } } - -
    - ) } - - { ( { currentItems } ) => ( - - { currentItems.map( - ( { - context, - description, - diff, - filename, - firstDetected, - fixedIn, - fixedOn, - icon, - fixable, - id, - label, - name, - severity, - source, - table, - title, - type, - version, - status, - } ) => ( - - ) - ) } - - ) } - - - ); -}; - -export default PaidList; diff --git a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss deleted file mode 100644 index 4a50d87b2562b..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss +++ /dev/null @@ -1,129 +0,0 @@ -.empty { - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - max-height: 600px; - flex-direction: column; -} - -.threat-section + .threat-section { - margin-top: calc( var( --spacing-base ) * 5 ); // 40px -} - -.threat-filename { - background-color: var( --jp-gray-0 ); - padding: calc( var( --spacing-base ) * 3 ); // 24px - overflow-x: scroll; -} - -.threat-footer { - display: flex; - justify-content: flex-end; - border-top: 1px solid var( --jp-gray ); - padding-top: calc( var( --spacing-base ) * 3 ); // 24px - margin-top: calc( var( --spacing-base ) * 3 ); // 24px -} -.threat-item-cta { - margin-top: calc( var( --spacing-base ) * 4 ); // 36px -} - -.list-header { - display: flex; - align-items: flex-end; - margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px -} - -.list-title { - flex: 1; - margin-bottom: 0; -} - -.list-header__controls { - display: flex; - gap: calc( var( --spacing-base ) * 2 ); // 16px -} - -.threat-footer { - width: 100%; - display: flex; - justify-content: right; - padding-top: calc( var( --spacing-base ) * 4 ); // 32px - border-top: 1px solid var( --jp-gray ); - - > :last-child { - margin-left: calc( var( --spacing-base ) * 2 ); // 16px - } -} - -.accordion-header { - display: grid; - grid-template-columns: repeat( 9, 1fr ); - background-color: white; - padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ); // 16px | 24px - border: 1px solid var( --jp-gray ); - border-bottom: none; - color: var( --jp-gray-50 ); - width: 100%; - - > span:first-child { - grid-column: 1 / 7; - } - - > span:not( :first-child ) { - text-align: center; - } -} - -.manual-scan { - margin: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 8 ); // 32px | 64px - text-align: center; -} - -@media ( max-width: 599px ) { - - .list-header { - margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px - } - - .list-title { - display: none; - } - - .threat-footer { - justify-content: center; - - > * { - width: 50%; - } - } -} - -.pagination-container { - display: flex; - justify-content: center; - align-items: center; - gap: 4px; - margin-top: calc( var( --spacing-base ) * 4 ); // 24px - margin-bottom: calc(var(--spacing-base) * 2); // 16px - - button { - font-size: var( --font-body ); - width: auto; - height: auto; - padding: 0 var( --spacing-base ); // 0 | 8px - line-height: 32px; - min-width: 32px; - - &.unfocused { - color: var( --jp-black ); - background: none; - - &:hover:not(:disabled) { - color: var( --jp-black ); - background: none; - } - } - } -} diff --git a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js b/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js deleted file mode 100644 index de000288251ae..0000000000000 --- a/projects/plugins/protect/src/js/components/threats-list/use-threats-list.js +++ /dev/null @@ -1,158 +0,0 @@ -import { - plugins as pluginsIcon, - wordpress as coreIcon, - color as themesIcon, - code as filesIcon, - grid as databaseIcon, -} from '@wordpress/icons'; -import { useEffect, useMemo, useState } from 'react'; -import useProtectData from '../../hooks/use-protect-data'; - -const sortThreats = ( a, b ) => b.severity - a.severity; - -/** - * Flatten threats data - * - * Merges threat category data with each threat it contains, plus any additional data provided. - * - * @param {object} data - The threat category data, i.e. "core", "plugins", "themes", etc. - * @param {object} newData - Additional data to add to each threat. - * @return {object[]} Array of threats with additional properties from the threat category and function argument. - */ -const flattenThreats = ( data, newData ) => { - // If "data" is an empty object - if ( typeof data === 'object' && Object.keys( data ).length === 0 ) { - return []; - } - - // If "data" has multiple entries, recursively flatten each one. - if ( Array.isArray( data ) ) { - return data.map( extension => flattenThreats( extension, newData ) ).flat(); - } - - // Merge the threat category data with each threat it contains, plus any additional data provided. - return data?.threats.map( threat => ( { - ...threat, - ...data, - ...newData, - } ) ); -}; - -/** - * Threats List Hook - * - * @param {object} args - Arguments for the hook. - * @param {string} args.source - "scan" or "history". - * @param {string} args.status - "all", "fixed", or "ignored". - * --- - * @typedef {object} UseThreatsList - * @property {object} item - The selected threat category. - * @property {object[]} list - The list of threats to display. - * @property {string} selected - The selected threat category. - * @property {Function} setSelected - Sets the selected threat category. - * --- - * @return {UseThreatsList} useThreatsList hook. - */ -const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' } ) => { - const [ selected, setSelected ] = useState( 'all' ); - const { - results: { plugins, themes, core, files, database }, - } = useProtectData( { - sourceType: source, - filter: { status, key: selected }, - } ); - - const { unsortedList, item } = useMemo( () => { - // If a specific threat category is selected, filter for and flatten the category's threats. - if ( selected && selected !== 'all' ) { - // Core, files, and database data threats are already grouped together, - // so we just need to flatten them and add the appropriate icon. - switch ( selected ) { - case 'core': - return { - unsortedList: flattenThreats( core, { icon: coreIcon } ), - item: core, - }; - case 'files': - return { - unsortedList: flattenThreats( { threats: files }, { icon: filesIcon } ), - item: files, - }; - case 'database': - return { - unsortedList: flattenThreats( { threats: database }, { icon: databaseIcon } ), - item: database, - }; - default: - break; - } - - // Extensions (i.e. plugins and themes) have entries for each individual extension, - // so we need to check for a matching threat in each extension. - const selectedPlugin = plugins.find( plugin => plugin?.name === selected ); - if ( selectedPlugin ) { - return { - unsortedList: flattenThreats( selectedPlugin, { icon: pluginsIcon } ), - item: selectedPlugin, - }; - } - const selectedTheme = themes.find( theme => theme?.name === selected ); - if ( selectedTheme ) { - return { - unsortedList: flattenThreats( selectedTheme, { icon: themesIcon } ), - item: selectedTheme, - }; - } - } - - // Otherwise, return all threats. - return { - unsortedList: [ - ...flattenThreats( core, { icon: coreIcon } ), - ...flattenThreats( plugins, { icon: pluginsIcon } ), - ...flattenThreats( themes, { icon: themesIcon } ), - ...flattenThreats( { threats: files }, { icon: filesIcon } ), - ...flattenThreats( { threats: database }, { icon: databaseIcon } ), - ], - item: null, - }; - }, [ core, database, files, plugins, selected, themes ] ); - - const getLabel = threat => { - if ( threat.name && threat.version ) { - // Extension threat i.e. "Woocommerce (3.0.0)" - return `${ threat.name } (${ threat.version })`; - } - - if ( threat.filename ) { - // File threat i.e. "index.php" - return threat.filename.split( '/' ).pop(); - } - - if ( threat.table ) { - // Database threat i.e. "wp_posts" - return threat.table; - } - }; - - const list = useMemo( () => { - return unsortedList - .sort( sortThreats ) - .map( threat => ( { label: getLabel( threat ), ...threat } ) ); - }, [ unsortedList ] ); - - useEffect( () => { - if ( selected !== 'all' && status !== 'all' && list.length === 0 ) { - setSelected( 'all' ); - } - }, [ selected, status, item, list ] ); - - return { - item, - list, - selected, - setSelected, - }; -}; - -export default useThreatsList; 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 index 81f1eabb27d5b..7f1ef3652bb85 100644 --- a/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx +++ b/projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx @@ -1,4 +1,5 @@ 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'; @@ -7,9 +8,14 @@ import useModal from '../../hooks/use-modal'; import UserConnectionGate from '../user-connection-gate'; import styles from './styles.module.scss'; -const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => { +const UnignoreThreatModal = ( { threat } ) => { const { setModal } = useModal(); + + const icon = getThreatIcon( threat ); + + const [ isUnignoring, setIsUnignoring ] = useState( false ); const unignoreThreatMutation = useUnIgnoreThreatMutation(); + const handleCancelClick = () => { return event => { event.preventDefault(); @@ -17,13 +23,11 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => { }; }; - const [ isUnignoring, setIsUnignoring ] = useState( false ); - const handleUnignoreClick = () => { return async event => { event.preventDefault(); setIsUnignoring( true ); - await unignoreThreatMutation.mutateAsync( id ); + await unignoreThreatMutation.mutateAsync( threat.id ); setModal( { type: null } ); setIsUnignoring( false ); }; @@ -40,12 +44,12 @@ const UnignoreThreatModal = ( { id, title, label, icon, severity } ) => {
    - { label } + { getThreatSubtitle( threat ) } - { title } + { threat.title }
    - +
    diff --git a/projects/plugins/protect/src/js/data/scan/use-fixers-query.ts b/projects/plugins/protect/src/js/data/scan/use-fixers-query.ts index 99bfc63fa51e4..b91f22c2cfdb1 100644 --- a/projects/plugins/protect/src/js/data/scan/use-fixers-query.ts +++ b/projects/plugins/protect/src/js/data/scan/use-fixers-query.ts @@ -1,4 +1,5 @@ import { useConnection } from '@automattic/jetpack-connection'; +import { type FixersStatus, type ThreatFixStatus } from '@automattic/jetpack-scan'; import { useQuery, useQueryClient, type UseQueryResult } from '@tanstack/react-query'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useCallback, useEffect } from 'react'; @@ -6,7 +7,6 @@ import API from '../../api'; import { QUERY_FIXERS_KEY, QUERY_HISTORY_KEY, QUERY_SCAN_STATUS_KEY } from '../../constants'; import { fixerTimestampIsStale } from '../../hooks/use-fixers'; import useNotices from '../../hooks/use-notices'; -import { FixersStatus, ThreatFixStatus } from '../../types/fixers'; const initialData: FixersStatus = window.jetpackProtectInitialState?.fixerStatus || { ok: true, @@ -91,8 +91,8 @@ export default function useFixersQuery( { if ( cachedThreat && cachedThreat.status === 'in_progress' ) { if ( threat.status === 'in_progress' ) { if ( - ! fixerTimestampIsStale( cachedThreat.last_updated ) && - fixerTimestampIsStale( threat.last_updated ) + ! fixerTimestampIsStale( cachedThreat.lastUpdated ) && + fixerTimestampIsStale( threat.lastUpdated ) ) { failures.push( threatId ); } @@ -128,7 +128,7 @@ export default function useFixersQuery( { ( threat: ThreatFixStatus ) => 'status' in threat && threat.status === 'in_progress' && - ! fixerTimestampIsStale( threat.last_updated ) + ! fixerTimestampIsStale( threat.lastUpdated ) ); // Refetch while any threats are still in progress and not stale. diff --git a/projects/plugins/protect/src/js/data/scan/use-history-query.ts b/projects/plugins/protect/src/js/data/scan/use-history-query.ts index 5c728f60fe057..93067ce5fa8b6 100644 --- a/projects/plugins/protect/src/js/data/scan/use-history-query.ts +++ b/projects/plugins/protect/src/js/data/scan/use-history-query.ts @@ -1,9 +1,9 @@ import { useConnection } from '@automattic/jetpack-connection'; +import { type ScanStatus } from '@automattic/jetpack-scan'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import camelize from 'camelize'; import API from '../../api'; import { QUERY_HISTORY_KEY } from '../../constants'; -import { ScanStatus } from '../../types/scans'; /** * Use History Query diff --git a/projects/plugins/protect/src/js/data/scan/use-scan-status-query.ts b/projects/plugins/protect/src/js/data/scan/use-scan-status-query.ts index 848b4395e6baf..22df11b48dd71 100644 --- a/projects/plugins/protect/src/js/data/scan/use-scan-status-query.ts +++ b/projects/plugins/protect/src/js/data/scan/use-scan-status-query.ts @@ -1,4 +1,5 @@ import { useConnection } from '@automattic/jetpack-connection'; +import { ScanStatus } from '@automattic/jetpack-scan'; import { useQuery, UseQueryResult, useQueryClient } from '@tanstack/react-query'; import camelize from 'camelize'; import API from '../../api'; @@ -7,7 +8,6 @@ import { SCAN_STATUS_IDLE, SCAN_STATUS_UNAVAILABLE, } from '../../constants'; -import { ScanStatus } from '../../types/scans'; import { QUERY_SCAN_STATUS_KEY } from './../../constants'; export const isRequestedScanNotStarted = ( status: ScanStatus ) => { diff --git a/projects/plugins/protect/src/js/data/use-connection-mutation.ts b/projects/plugins/protect/src/js/data/use-connection-mutation.ts index 90d8481f65edd..e8f40011336d0 100644 --- a/projects/plugins/protect/src/js/data/use-connection-mutation.ts +++ b/projects/plugins/protect/src/js/data/use-connection-mutation.ts @@ -1,4 +1,5 @@ import { useConnection } from '@automattic/jetpack-connection'; +import { ScanStatus } from '@automattic/jetpack-scan'; import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query'; import { __ } from '@wordpress/i18n'; import { @@ -10,7 +11,6 @@ import { SCAN_STATUS_OPTIMISTICALLY_SCANNING, } from '../constants'; import useNotices from '../hooks/use-notices'; -import { ScanStatus } from '../types/scans'; /** * Connect Site Mutation diff --git a/projects/plugins/protect/src/js/hooks/use-fixers.ts b/projects/plugins/protect/src/js/hooks/use-fixers.ts index fc92792a443eb..254320367b885 100644 --- a/projects/plugins/protect/src/js/hooks/use-fixers.ts +++ b/projects/plugins/protect/src/js/hooks/use-fixers.ts @@ -1,8 +1,8 @@ +import { FixersStatus, ThreatFixStatus } from '@automattic/jetpack-scan'; import { useCallback } from 'react'; import useFixersMutation from '../data/scan/use-fixers-mutation'; import useFixersQuery from '../data/scan/use-fixers-query'; import useScanStatusQuery from '../data/scan/use-scan-status-query'; -import { FixersStatus, ThreatFixStatus } from '../types/fixers'; const FIXER_IS_STALE_THRESHOLD = 1000 * 60 * 60 * 24; // 24 hours @@ -16,7 +16,7 @@ export const fixerStatusIsStale = ( fixerStatus: ThreatFixStatus ) => { return ( 'status' in fixerStatus && fixerStatus.status === 'in_progress' && - fixerTimestampIsStale( fixerStatus.last_updated ) + fixerTimestampIsStale( fixerStatus.lastUpdated ) ); }; diff --git a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts b/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts deleted file mode 100644 index d560cff20ef86..0000000000000 --- a/projects/plugins/protect/src/js/hooks/use-protect-data/index.ts +++ /dev/null @@ -1,174 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { useMemo } from 'react'; -import useHistoryQuery from '../../data/scan/use-history-query'; -import useScanStatusQuery from '../../data/scan/use-scan-status-query'; -import useProductDataQuery from '../../data/use-product-data-query'; -import { ExtensionStatus } from '../../types/scans'; -import { Threat, ThreatStatus } from '../../types/threats'; - -type ThreatFilterKey = 'all' | 'core' | 'files' | 'database' | string; - -type Filter = { key: ThreatFilterKey; status: ThreatStatus | 'all' }; - -// Valid "key" values for filtering. -const KEY_FILTERS = [ 'all', 'core', 'plugins', 'themes', 'files', 'database' ]; - -/** - * Filter Extension Threats - * - * @param {Array} threats - The threats to filter. - * @param {object} filter - The filter to apply to the data. - * @param {string} filter.status - The status to filter: 'all', 'current', 'fixed', or 'ignored'. - * @param {string} filter.key - The key to filter: 'all', 'core', 'files', 'database', or an extension name. - * @param {string} key - The threat's key: 'all', 'core', 'files', 'database', or an extension name. - * - * @return {Array} The filtered threats. - */ -const filterThreats = ( threats: Threat[], filter: Filter, key: ThreatFilterKey ): Threat[] => { - if ( ! Array.isArray( threats ) ) { - return []; - } - - return threats.filter( threat => { - if ( filter.status && filter.status !== 'all' && threat.status !== filter.status ) { - return false; - } - if ( filter.key && filter.key !== 'all' && filter.key !== key ) { - return false; - } - return true; - } ); -}; - -/** - * Get parsed data from the initial state - * - * @param {object} options - The options to use when getting the data. - * @param {string} options.sourceType - 'scan' or 'history'. - * @param {object} options.filter - The filter to apply to the data. - * _param {string} options.filter.status - 'all', 'fixed', or 'ignored'. - * _param {string} options.filter.key - 'all', 'core', 'files', 'database', or an extension name. - * - * @return {object} The information available in Protect's initial state. - */ -export default function useProtectData( - { sourceType, filter } = { - sourceType: 'scan', - filter: { status: null, key: null }, - } -) { - const { data: status } = useScanStatusQuery(); - const { data: scanHistory } = useHistoryQuery(); - const { data: jetpackScan } = useProductDataQuery(); - - const { counts, results, error, lastChecked, hasUncheckedItems } = useMemo( () => { - // This hook can provide data from two sources: the current scan or the scan history. - const data = sourceType === 'history' ? { ...scanHistory } : { ...status }; - - // Prepare the result object. - const result = { - results: { - core: [], - plugins: [], - themes: [], - files: [], - database: [], - }, - counts: { - all: { - threats: 0, - core: 0, - plugins: 0, - themes: 0, - files: 0, - database: 0, - }, - current: { - threats: 0, - core: 0, - plugins: 0, - themes: 0, - files: 0, - database: 0, - }, - }, - error: null, - lastChecked: data.lastChecked || null, - hasUncheckedItems: data.hasUncheckedItems || false, - }; - - // Loop through the provided extensions, and update the result object. - const processExtensions = ( extensions: Array< ExtensionStatus >, key: ThreatFilterKey ) => { - if ( ! Array.isArray( extensions ) ) { - return []; - } - extensions.forEach( extension => { - // Update the total counts. - result.counts.all[ key ] += extension?.threats?.length || 0; - result.counts.all.threats += extension?.threats?.length || 0; - - // Filter the extension's threats based on the current filters. - const filteredThreats = filterThreats( - extension?.threats || [], - filter, - KEY_FILTERS.includes( filter.key ) ? key : extension?.name - ); - - // Update the result object with the extension and its filtered threats. - result.results[ key ].push( { ...extension, threats: filteredThreats } ); - - // Update the current counts. - result.counts.current[ key ] += filteredThreats.length; - result.counts.current.threats += filteredThreats.length; - } ); - }; - - // Loop through the provided threats, and update the result object. - const processThreats = ( threatsToProcess: Threat[], key: ThreatFilterKey ) => { - if ( ! Array.isArray( threatsToProcess ) ) { - return []; - } - - result.counts.all[ key ] += threatsToProcess.length; - result.counts.all.threats += threatsToProcess.length; - - const filteredThreats = filterThreats( threatsToProcess, filter, key ); - - result.results[ key ] = [ ...result.results[ key ], ...filteredThreats ]; - result.counts.current[ key ] += filteredThreats.length; - result.counts.current.threats += filteredThreats.length; - }; - - // Core data may be either a single object or an array of multiple objects. - let cores = Array.isArray( data.core ) ? data.core : []; - if ( data?.core?.threats ) { - cores = [ data.core ]; - } - - // Process the data - processExtensions( cores, 'core' ); - processExtensions( data?.plugins, 'plugins' ); - processExtensions( data?.themes, 'themes' ); - processThreats( data?.files, 'files' ); - processThreats( data?.database, 'database' ); - - // Handle errors - if ( data.error ) { - result.error = { - message: data.errorMessage || __( 'An error occurred.', 'jetpack-protect' ), - code: data.errorCode || 500, - }; - } - - return result; - }, [ scanHistory, sourceType, status, filter ] ); - - return { - results, - counts, - error, - lastChecked, - hasUncheckedItems, - jetpackScan, - }; -} diff --git a/projects/plugins/protect/src/js/index.tsx b/projects/plugins/protect/src/js/index.tsx index b8983d65bb836..2b91f4b090b92 100644 --- a/projects/plugins/protect/src/js/index.tsx +++ b/projects/plugins/protect/src/js/index.tsx @@ -2,7 +2,7 @@ import { ThemeProvider } from '@automattic/jetpack-components'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import * as WPElement from '@wordpress/element'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { HashRouter, Routes, Route, useLocation, Navigate } from 'react-router-dom'; import Modal from './components/modal'; import PaidPlanGate from './components/paid-plan-gate'; @@ -12,7 +12,6 @@ import { OnboardingRenderedContextProvider } from './hooks/use-onboarding'; import { CheckoutProvider } from './hooks/use-plan'; import FirewallRoute from './routes/firewall'; import ScanRoute from './routes/scan'; -import ScanHistoryRoute from './routes/scan/history'; import SetupRoute from './routes/setup'; import './styles.module.scss'; @@ -62,7 +61,7 @@ function render() { path="/scan/history" element={ - + } /> @@ -70,7 +69,7 @@ function render() { path="/scan/history/:filter" element={ - + } /> diff --git a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx deleted file mode 100644 index 9c8f30b7b8067..0000000000000 --- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Status, Text } from '@automattic/jetpack-components'; -import { dateI18n } from '@wordpress/date'; -import { __, sprintf } from '@wordpress/i18n'; -import { useMemo } from 'react'; -import { useParams } from 'react-router-dom'; -import AdminSectionHero from '../../../components/admin-section-hero'; -import ErrorAdminSectionHero from '../../../components/error-admin-section-hero'; -import ScanNavigation from '../../../components/scan-navigation'; -import useThreatsList from '../../../components/threats-list/use-threats-list'; -import useProtectData from '../../../hooks/use-protect-data'; -import styles from './styles.module.scss'; - -const HistoryAdminSectionHero: React.FC = () => { - const { filter = 'all' } = useParams(); - const { list } = useThreatsList( { - source: 'history', - status: filter, - } ); - const { counts, error } = useProtectData( { - sourceType: 'history', - filter: { status: filter }, - } ); - const { threats: numAllThreats } = counts.all; - - const oldestFirstDetected = useMemo( () => { - if ( ! list.length ) { - return null; - } - - return list.reduce( ( oldest, current ) => { - return new Date( current.firstDetected ) < new Date( oldest.firstDetected ) - ? current - : oldest; - } ).firstDetected; - }, [ list ] ); - - if ( error ) { - return ( - - ); - } - - return ( - - - - { numAllThreats > 0 - ? sprintf( - /* translators: %s: Total number of threats */ - __( '%1$s previously active %2$s', 'jetpack-protect' ), - numAllThreats, - numAllThreats === 1 ? 'threat' : 'threats' - ) - : __( 'No previously active threats', 'jetpack-protect' ) } - - - - { oldestFirstDetected ? ( - - { sprintf( - /* translators: %s: Oldest first detected date */ - __( '%s - Today', 'jetpack-protect' ), - dateI18n( 'F jS g:i A', oldestFirstDetected, false ) - ) } - - ) : ( - __( 'Most recent results', 'jetpack-protect' ) - ) } - - -
    - -
    - - } - /> - ); -}; - -export default HistoryAdminSectionHero; diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx deleted file mode 100644 index 723f9de9ab230..0000000000000 --- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx +++ /dev/null @@ -1,301 +0,0 @@ -import { AdminSection, Container, Col, H3, Text, Title } from '@automattic/jetpack-components'; -import { __, _n, sprintf } from '@wordpress/i18n'; -import { useCallback } from 'react'; -import { Navigate, useParams } from 'react-router-dom'; -import AdminPage from '../../../components/admin-page'; -import ProtectCheck from '../../../components/protect-check-icon'; -import ThreatsNavigation from '../../../components/threats-list/navigation'; -import PaidList from '../../../components/threats-list/paid-list'; -import useThreatsList from '../../../components/threats-list/use-threats-list'; -import useAnalyticsTracks from '../../../hooks/use-analytics-tracks'; -import usePlan from '../../../hooks/use-plan'; -import useProtectData from '../../../hooks/use-protect-data'; -import ScanFooter from '../scan-footer'; -import HistoryAdminSectionHero from './history-admin-section-hero'; -import StatusFilters from './status-filters'; -import styles from './styles.module.scss'; - -const ScanHistoryRoute = () => { - // Track page view. - useAnalyticsTracks( { pageViewEventName: 'protect_scan_history' } ); - - const { hasPlan } = usePlan(); - const { filter = 'all' } = useParams(); - - const { item, list, selected, setSelected } = useThreatsList( { - source: 'history', - status: filter, - } ); - - const { counts, error } = useProtectData( { - sourceType: 'history', - filter: { status: filter }, - } ); - const { threats: numAllThreats } = counts.all; - - const { counts: fixedCounts } = useProtectData( { - sourceType: 'history', - filter: { status: 'fixed', key: selected }, - } ); - const { threats: numFixed } = fixedCounts.current; - - const { counts: ignoredCounts } = useProtectData( { - sourceType: 'history', - filter: { status: 'ignored', key: selected }, - } ); - const { threats: numIgnored } = ignoredCounts.current; - - /** - * Get the title for the threats list based on the selected filters and the amount of threats. - */ - const getTitle = useCallback( () => { - switch ( selected ) { - case 'all': - if ( list.length === 1 ) { - switch ( filter ) { - case 'fixed': - return __( 'All fixed threats', 'jetpack-protect' ); - case 'ignored': - return __( - 'All ignored threats', - 'jetpack-protect', - /** dummy arg to avoid bad minification */ 0 - ); - default: - return __( 'All threats', 'jetpack-protect' ); - } - } - switch ( filter ) { - case 'fixed': - return sprintf( - /* translators: placeholder is the amount of fixed threats found on the site. */ - __( 'All %s fixed threats', 'jetpack-protect' ), - list.length - ); - case 'ignored': - return sprintf( - /* translators: placeholder is the amount of ignored threats found on the site. */ - __( 'All %s ignored threats', 'jetpack-protect' ), - list.length - ); - default: - return sprintf( - /* translators: placeholder is the amount of threats found on the site. */ - __( 'All %s threats', 'jetpack-protect' ), - list.length - ); - } - case 'core': - switch ( filter ) { - case 'fixed': - return sprintf( - /* translators: placeholder is the amount of fixed WordPress threats found on the site. */ - _n( - '%1$s fixed WordPress threat', - '%1$s fixed WordPress threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - case 'ignored': - return sprintf( - /* translators: placeholder is the amount of ignored WordPress threats found on the site. */ - _n( - '%1$s ignored WordPress threat', - '%1$s ignored WordPress threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - default: - return sprintf( - /* translators: placeholder is the amount of WordPress threats found on the site. */ - _n( - '%1$s WordPress threat', - '%1$s WordPress threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - } - case 'files': - switch ( filter ) { - case 'fixed': - return sprintf( - /* translators: placeholder is the amount of fixed file threats found on the site. */ - _n( - '%1$s fixed file threat', - '%1$s fixed file threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - case 'ignored': - return sprintf( - /* translators: placeholder is the amount of ignored file threats found on the site. */ - _n( - '%1$s ignored file threat', - '%1$s ignored file threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - default: - return sprintf( - /* translators: placeholder is the amount of file threats found on the site. */ - _n( '%1$s file threat', '%1$s file threats', list.length, 'jetpack-protect' ), - list.length - ); - } - case 'database': - switch ( filter ) { - case 'fixed': - return sprintf( - /* translators: placeholder is the amount of fixed database threats found on the site. */ - _n( - '%1$s fixed database threat', - '%1$s fixed database threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - case 'ignored': - return sprintf( - /* translators: placeholder is the amount of ignored database threats found on the site. */ - _n( - '%1$s ignored database threat', - '%1$s ignored database threats', - list.length, - 'jetpack-protect' - ), - list.length - ); - default: - return sprintf( - /* translators: placeholder is the amount of database threats found on the site. */ - _n( '%1$s database threat', '%1$s database threats', list.length, 'jetpack-protect' ), - list.length - ); - } - default: - switch ( filter ) { - case 'fixed': - return sprintf( - /* translators: Translates to "123 fixed threats in Example Plugin (1.2.3)" */ - _n( - '%1$s fixed threat in %2$s %3$s', - '%1$s fixed threats in %2$s %3$s', - list.length, - 'jetpack-protect' - ), - list.length, - item?.name, - item?.version - ); - case 'ignored': - return sprintf( - /* translators: Translates to "123 ignored threats in Example Plugin (1.2.3)" */ - _n( - '%1$s ignored threat in %2$s %3$s', - '%1$s ignored threats in %2$s %3$s', - list.length, - 'jetpack-protect' - ), - list.length, - item?.name, - item?.version - ); - default: - return sprintf( - /* translators: Translates to "123 threats in Example Plugin (1.2.3)" */ - _n( - '%1$s threat in %2$s %3$s', - '%1$s threats in %2$s %3$s', - list.length, - 'jetpack-protect' - ), - list.length, - item?.name, - item?.version - ); - } - } - }, [ selected, list.length, filter, item?.name, item?.version ] ); - - // Threat history is only available for paid plans. - if ( ! hasPlan ) { - return ; - } - - // Remove the filter if there are no threats to show. - if ( list.length === 0 && filter !== 'all' ) { - return ; - } - - return ( - - - { ( ! error || numAllThreats ) && ( - - - - - - - - - { list.length > 0 ? ( -
    -
    - { getTitle() } -
    - -
    -
    - -
    - ) : ( - <> -
    -
    - -
    -
    -
    - -

    - { __( "Don't worry about a thing", 'jetpack-protect' ) } -

    - - { sprintf( - /* translators: %s: Filter type */ - __( 'There are no%sthreats in your scan history.', 'jetpack-protect' ), - 'all' === filter ? ' ' : ` ${ filter } ` - ) } - -
    - - ) } - -     - -     -     - ) } - -     - ); -}; - -export default ScanHistoryRoute; diff --git a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx b/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx deleted file mode 100644 index 1bc9668b11065..0000000000000 --- a/projects/plugins/protect/src/js/routes/scan/history/status-filters.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import React, { useCallback } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; -import ButtonGroup from '../../../components/button-group'; - -/** - * Status Filters component. - * - * @param {object} props - Component props. - * @param {number} props.numFixed - Number of fixed threats. - * @param {number} props.numIgnored - Number of ignored threats. - * - * @return {React.ReactNode} StatusFilters component. - */ -export default function StatusFilters( { numFixed, numIgnored } ) { - const navigate = useNavigate(); - const { filter = 'all' } = useParams(); - const navigateOnClick = useCallback( path => () => navigate( path ), [ navigate ] ); - - return ( - - - { __( 'All', 'jetpack-protect' ) } - - - { __( 'Fixed', 'jetpack-protect' ) } - - - { __( 'Ignored', 'jetpack-protect' ) } - - - ); -} diff --git a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss deleted file mode 100644 index f66602e59a9e9..0000000000000 --- a/projects/plugins/protect/src/js/routes/scan/history/styles.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -.empty { - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - max-height: 600px; - flex-direction: column; -} - -.subheading-content { - font-weight: bold; -} - -.list-header { - display: flex; - justify-content: flex-end; - align-items: flex-end; - margin-bottom: calc( var( --spacing-base ) * 2.25 ); // 18px -} - -.list-title { - flex: 1; - margin-bottom: 0; -} - -.list-header__controls { - display: flex; - gap: calc( var( --spacing-base ) * 2 ); // 16px -} - -@media ( max-width: 599px ) { - - .list-header { - margin-bottom: calc( var( --spacing-base ) * 3 ); // 24px - } - - .list-title { - display: none; - } -} - -.scan-navigation { - margin-top: calc( var( --spacing-base ) * 3 ); // 24px -} \ No newline at end of file diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx index 1f3cdfdd7520f..95edd0acf78a6 100644 --- a/projects/plugins/protect/src/js/routes/scan/index.jsx +++ b/projects/plugins/protect/src/js/routes/scan/index.jsx @@ -1,14 +1,15 @@ import { AdminSection, Container, Col } from '@automattic/jetpack-components'; +import { useMemo } from 'react'; +import { useLocation, useParams } from 'react-router-dom'; import AdminPage from '../../components/admin-page'; -import ThreatsList from '../../components/threats-list'; import useScanStatusQuery from '../../data/scan/use-scan-status-query'; import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; import { OnboardingContext } from '../../hooks/use-onboarding'; import usePlan from '../../hooks/use-plan'; -import useProtectData from '../../hooks/use-protect-data'; import onboardingSteps from './onboarding-steps'; import ScanAdminSectionHero from './scan-admin-section-hero'; import ScanFooter from './scan-footer'; +import ScanResultsDataView from './scan-results-data-view'; /** * Scan Page @@ -19,23 +20,39 @@ import ScanFooter from './scan-footer'; */ const ScanPage = () => { const { hasPlan } = usePlan(); - const { - counts: { - current: { threats: numThreats }, - }, - lastChecked, - } = useProtectData(); + const location = useLocation(); + const { filter } = useParams(); const { data: status } = useScanStatusQuery( { usePolling: true } ); let currentScanStatus; if ( status.error ) { currentScanStatus = 'error'; - } else if ( ! lastChecked ) { + } else if ( ! status.lastChecked ) { currentScanStatus = 'in_progress'; } else { currentScanStatus = 'active'; } + const filters = useMemo( () => { + if ( location.pathname.includes( '/scan/history' ) ) { + return [ + { + field: 'status', + value: filter ? [ filter ] : [ 'fixed', 'ignored' ], + operator: 'isAny', + }, + ]; + } + + return [ + { + field: 'status', + value: 'current', + operator: 'is', + }, + ]; + }, [ filter, location.pathname ] ); + // Track view for Protect admin page. useAnalyticsTracks( { pageViewEventName: 'protect_admin', @@ -49,15 +66,13 @@ const ScanPage = () => { - { ( ! status.error || numThreats ) && ( - - - - - - - - ) } + + + + + + + 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 60d484cd4a16f..44babe871b0e2 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 @@ -8,28 +8,23 @@ import OnboardingPopover from '../../components/onboarding-popover'; import ScanNavigation from '../../components/scan-navigation'; import useScanStatusQuery, { isScanInProgress } from '../../data/scan/use-scan-status-query'; import usePlan from '../../hooks/use-plan'; -import useProtectData from '../../hooks/use-protect-data'; import ScanningAdminSectionHero from './scanning-admin-section-hero'; import styles from './styles.module.scss'; const ScanAdminSectionHero: React.FC = () => { const { hasPlan } = usePlan(); const [ isSm ] = useBreakpointMatch( 'sm' ); - const { - counts: { - current: { threats: numThreats }, - }, - lastChecked, - } = useProtectData(); + const { data: status } = useScanStatusQuery(); + const numThreats = status.threats.length; // Popover anchor const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null ); let lastCheckedLocalTimestamp = null; - if ( lastChecked ) { + if ( status.lastChecked ) { // Convert the lastChecked UTC date to a local timestamp - lastCheckedLocalTimestamp = new Date( lastChecked + ' UTC' ).getTime(); + lastCheckedLocalTimestamp = new Date( status.lastChecked + ' UTC' ).getTime(); } if ( isScanInProgress( status ) ) { diff --git a/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx new file mode 100644 index 0000000000000..616f4e256ed44 --- /dev/null +++ b/projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx @@ -0,0 +1,56 @@ +import { ThreatsDataViews } from '@automattic/jetpack-components'; +import { Threat } from '@automattic/jetpack-scan'; +import { useCallback } from 'react'; +import useHistoryQuery from '../../data/scan/use-history-query'; +import useScanStatusQuery from '../../data/scan/use-scan-status-query'; +import useModal from '../../hooks/use-modal'; + +/** + * Scan Results Data View + * + * @param {object} props - Component props. + * @param {Array} props.filters - Default filters to apply to the data view. + * + * @return {JSX.Element} ScanResultDataView component. + */ +export default function ScanResultsDataView( { + filters = [], +}: { + filters: React.ComponentProps< typeof ThreatsDataViews >[ 'filters' ]; +} ) { + const { setModal } = useModal(); + + const { data: scanStatus } = useScanStatusQuery(); + const { data: history } = useHistoryQuery(); + + const onFixThreats = useCallback( + ( threats: Threat[] ) => { + setModal( { type: 'FIX_THREAT', props: { threat: threats[ 0 ] } } ); + }, + [ setModal ] + ); + + const onIgnoreThreats = useCallback( + ( threats: Threat[] ) => { + setModal( { type: 'IGNORE_THREAT', props: { threat: threats[ 0 ] } } ); + }, + [ setModal ] + ); + + const onUnignoreThreats = useCallback( + ( threats: Threat[] ) => { + setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } ); + }, + [ setModal ] + ); + + return ( + + ); +} diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 8651420159fa1..678b7a953f45e 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -9,4 +9,11 @@ .scan-navigation { margin-top: calc( var( --spacing-base ) * 3 ); // 24px -} \ No newline at end of file +} + +:global { + .dataviews-wrapper { + margin-left: -48px; + margin-right: -48px; + } +} diff --git a/projects/plugins/protect/src/js/types/fixers.ts b/projects/plugins/protect/src/js/types/fixers.ts deleted file mode 100644 index b99a93def29a4..0000000000000 --- a/projects/plugins/protect/src/js/types/fixers.ts +++ /dev/null @@ -1,40 +0,0 @@ -export type FixerStatus = 'not_started' | 'in_progress' | 'fixed' | 'not_fixed'; - -/** - * Threat Fix Status - * - * Individual fixer status for a threat. - */ -export type ThreatFixStatusError = { - error: string; -}; - -export type ThreatFixStatusSuccess = { - status: FixerStatus; - last_updated: string; -}; - -export type ThreatFixStatus = ThreatFixStatusError | ThreatFixStatusSuccess; - -/** - * Fixers Status - * - * Overall status of all fixers. - */ -type FixersStatusBase = { - ok: boolean; // Discriminator for overall success -}; - -export type FixersStatusError = FixersStatusBase & { - ok: false; - error: string; -}; - -export type FixersStatusSuccess = FixersStatusBase & { - ok: true; - threats: { - [ key: number ]: ThreatFixStatus; - }; -}; - -export type FixersStatus = FixersStatusSuccess | FixersStatusError; diff --git a/projects/plugins/protect/src/js/types/global.d.ts b/projects/plugins/protect/src/js/types/global.d.ts index d844820616d06..826b133869a7a 100644 --- a/projects/plugins/protect/src/js/types/global.d.ts +++ b/projects/plugins/protect/src/js/types/global.d.ts @@ -1,6 +1,6 @@ +import { type ScanStatus } from '@automattic/jetpack-scan'; import { PluginData, ThemeData } from './installed-extensions'; import { ProductData } from './products'; -import { ScanStatus } from './scans'; import { WafStatus } from './waf'; declare module '*.scss'; diff --git a/projects/plugins/protect/src/js/types/scans.ts b/projects/plugins/protect/src/js/types/scans.ts deleted file mode 100644 index 98cf04de3fb3a..0000000000000 --- a/projects/plugins/protect/src/js/types/scans.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Threat } from './threats'; - -export type ExtensionStatus = { - /** The name of the extension. */ - name: string; - - /** The slug of the extension. */ - slug: string; - - /** The version of the extension. */ - version: string; - - /** The threats found in the extension. */ - threats: Threat[]; - - /** The type of extension. */ - type: 'plugins' | 'themes'; - - /** Whether the extension was checked in the latest scan. */ - checked: boolean; -}; - -export type ScanStatus = { - /** The current status of the scanner. */ - status: 'unavailable' | 'provisioning' | 'idle' | 'scanning' | 'scheduled'; - - /** The IDs of fixable threats. */ - fixableThreatIds: number[]; - - /** The current scan progress, only available from the Scan API. */ - currentProgress: number | null; - - /** The data source for the scan status. */ - dataSource: 'protect_report' | 'scan_api'; - - /** Whether the site currently has extensions not checked in the latest scan. */ - hasUncheckedItems: boolean; - - /** The time the last scan was checked, in YYYY-MM-DD HH:MM:SS format. */ - lastChecked: string | null; - - /** The number of plugin threats found in the latest status. */ - numPluginsThreats: number; - - /** The number of theme threats found in the latest status. */ - numThemesThreats: number; - - /** The total number of threats found in the latest status. */ - numThreats: number; - - /** Whether there was an error in the scan results. */ - error: boolean | null; - - /** The error code. */ - errorCode: string | null; - - /** The error message. */ - errorMessage: string | null; - - /** WordPress Core Status */ - core: { - checked: boolean; - name: string; - slug: string; - threats: Threat[]; - type: 'core'; - version: string; - } | null; - - /** Plugins Status */ - plugins: ExtensionStatus[]; - - /** Themes Status */ - themes: ExtensionStatus[]; - - /** File Threats */ - files: Threat[]; - - /** Database Threats */ - database: Threat[]; -}; diff --git a/projects/plugins/protect/src/js/types/threats.ts b/projects/plugins/protect/src/js/types/threats.ts deleted file mode 100644 index 757503972fa0c..0000000000000 --- a/projects/plugins/protect/src/js/types/threats.ts +++ /dev/null @@ -1,59 +0,0 @@ -export type ThreatStatus = 'fixed' | 'ignored' | 'current'; - -export type ThreatFixType = 'replace' | 'delete' | 'update' | string; - -export type Threat = { - /** The threat's unique ID. */ - id: number; - - /** The threat's signature. */ - signature: string; - - /** The threat's title. */ - title: string; - - /** The threat's description. */ - description: string; - - /** The threat's current status. */ - status: ThreatStatus; - - /** The threat's severity level (0-10). */ - severity: number; - - /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */ - firstDetected: string; - - /** The version the threat is fixed in. */ - fixedIn?: string | null; - - /** The date the threat was fixed, in YYYY-MM-DDTHH:MM:SS.000Z format. */ - fixedOn?: string | null; - - /** The fixable details. */ - fixable: - | { - fixer: ThreatFixType; - target?: string | null; - extensionStatus?: string | null; - } - | false; - - /** The threat's source. */ - source?: string; - - /** The threat's context. */ - context?: Record< string, unknown > | null; - - /** The name of the affected file. */ - filename: string | null; - - /** The rows affected by the database threat. */ - rows?: unknown; - - /** The table name of the database threat. */ - table?: string; - - /** The diff showing the threat's modified file contents. */ - diff?: string; -}; diff --git a/projects/plugins/protect/webpack.config.js b/projects/plugins/protect/webpack.config.js index 2f6a45721b100..f9eef35a4fddd 100644 --- a/projects/plugins/protect/webpack.config.js +++ b/projects/plugins/protect/webpack.config.js @@ -19,7 +19,11 @@ module.exports = [ ...jetpackWebpackConfig.resolve, }, node: false, - plugins: [ ...jetpackWebpackConfig.StandardPlugins() ], + plugins: [ + ...jetpackWebpackConfig.StandardPlugins( { + I18nCheckPlugin: { warnOnly: true }, // to do: handle i18n warnings from @automattic/jetpack-components/node_modules/@wordpress/dataviews + } ), + ], module: { strictExportPresence: true, rules: [ @@ -33,6 +37,11 @@ module.exports = [ includeNodeModules: [ '@automattic/jetpack-' ], } ), + // Transpile @wordpress/dataviews in node_modules too. + jetpackWebpackConfig.TranspileRule( { + includeNodeModules: [ '@wordpress/dataviews' ], + } ), + // Handle CSS. jetpackWebpackConfig.CssRule( { extensions: [ 'css', 'sass', 'scss' ],