Protect: React Query

changelog
Automattic · Aug 25, 2024 · 504a272 · 504a272
1 parent 18a6609
commit 504a272
Show file tree

Hide file tree

Showing 68 changed files with 1,306 additions and 1,909 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/plugins/protect/changelog/add-protect-tanstack-query b/projects/plugins/protect/changelog/add-protect-tanstack-query
@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Added react query, no user-facing impact.
+
+
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
@@ -29,9 +29,10 @@
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
+		"@tanstack/react-query": "5.20.5",
+		"@tanstack/react-query-devtools": "5.20.5",
 		"@wordpress/api-fetch": "7.5.0",
 		"@wordpress/components": "28.5.0",
-		"@wordpress/data": "10.5.0",
 		"@wordpress/date": "5.5.0",
 		"@wordpress/element": "6.5.0",
 		"@wordpress/i18n": "5.5.0",

diff --git a/projects/plugins/protect/src/class-jetpack-protect.php b/projects/plugins/protect/src/class-jetpack-protect.php
@@ -19,6 +19,7 @@
 use Automattic\Jetpack\My_Jetpack\Initializer as My_Jetpack_Initializer;
 use Automattic\Jetpack\My_Jetpack\Products as My_Jetpack_Products;
 use Automattic\Jetpack\Plugins_Installer;
+use Automattic\Jetpack\Protect\Credentials;
 use Automattic\Jetpack\Protect\Onboarding;
 use Automattic\Jetpack\Protect\REST_Controller;
 use Automattic\Jetpack\Protect\Scan_History;
@@ -213,6 +214,7 @@ public function initial_state() {
 			'apiRoot'            => esc_url_raw( rest_url() ),
 			'apiNonce'           => wp_create_nonce( 'wp_rest' ),
 			'registrationNonce'  => wp_create_nonce( 'jetpack-registration-nonce' ),
+			'credentials'        => Credentials::get_credential_array(),
 			'status'             => Status::get_status( $refresh_status_from_wpcom ),
 			'scanHistory'        => Scan_History::get_scan_history( $refresh_status_from_wpcom ),
 			'installedPlugins'   => Plugins_Installer::get_plugins(),
@@ -231,8 +233,6 @@ public function initial_state() {
 				'upgradeIsSeen'       => self::get_waf_upgrade_seen_status(),
 				'displayUpgradeBadge' => self::get_waf_upgrade_badge_display_status(),
 				'isEnabled'           => Waf_Runner::is_enabled(),
-				'isToggling'          => false,
-				'isUpdating'          => false,
 				'config'              => Waf_Runner::get_config(),
 				'stats'               => self::get_waf_stats(),
 				'globalStats'         => Waf_Stats::get_global_stats(),

diff --git a/projects/plugins/protect/src/class-rest-controller.php b/projects/plugins/protect/src/class-rest-controller.php
@@ -10,8 +10,10 @@
 namespace Automattic\Jetpack\Protect;
 
 use Automattic\Jetpack\Connection\Rest_Authentication as Connection_Rest_Authentication;
+use Automattic\Jetpack\IP\Utils as IP_Utils;
 use Automattic\Jetpack\Protect_Status\REST_Controller as Protect_Status_REST_Controller;
 use Automattic\Jetpack\Waf\Waf_Runner;
+use Automattic\Jetpack\Waf\Waf_Stats;
 use Jetpack_Protect;
 use WP_Error;
 use WP_REST_Request;
@@ -380,10 +382,15 @@ public static function api_get_waf() {
 
 		return new WP_REST_Response(
 			array(
-				'is_seen'    => Jetpack_Protect::get_waf_seen_status(),
-				'is_enabled' => Waf_Runner::is_enabled(),
-				'config'     => Waf_Runner::get_config(),
-				'stats'      => Jetpack_Protect::get_waf_stats(),
+				'wafSupported'        => Waf_Runner::is_supported_environment(),
+				'currentIp'           => IP_Utils::get_ip(),
+				'isSeen'              => Jetpack_Protect::get_waf_seen_status(),
+				'upgradeIsSeen'       => Jetpack_Protect::get_waf_upgrade_seen_status(),
+				'displayUpgradeBadge' => Jetpack_Protect::get_waf_upgrade_badge_display_status(),
+				'isEnabled'           => Waf_Runner::is_enabled(),
+				'config'              => Waf_Runner::get_config(),
+				'stats'               => Jetpack_Protect::get_waf_stats(),
+				'globalStats'         => Waf_Stats::get_global_stats(),
 			)
 		);
 	}

diff --git a/projects/plugins/protect/src/js/api.js b/projects/plugins/protect/src/js/api.js
@@ -2,7 +2,7 @@ import apiFetch from '@wordpress/api-fetch';
 import camelize from 'camelize';
 
 const API = {
-	fetchWaf: () =>
+	getWaf: () =>
 		apiFetch( {
 			path: 'jetpack-protect/v1/waf',
 			method: 'GET',
@@ -19,7 +19,7 @@ const API = {
 			method: 'POST',
 			path: 'jetpack/v4/waf',
 			data,
-		} ),
+		} ).then( camelize ),
 
 	wafSeen: () =>
 		apiFetch( {
@@ -33,7 +33,7 @@ const API = {
 			method: 'POST',
 		} ),
 
-	fetchOnboardingProgress: () =>
+	getOnboardingProgress: () =>
 		apiFetch( {
 			path: 'jetpack-protect/v1/onboarding-progress',
 			method: 'GET',
@@ -46,11 +46,71 @@ const API = {
 			data: { step_ids: stepIds },
 		} ),
 
-	fetchScanHistory: () =>
+	getScanHistory: () =>
 		apiFetch( {
 			path: 'jetpack-protect/v1/scan-history',
 			method: 'GET',
+		} ).then( camelize ),
+
+	scan: () =>
+		apiFetch( {
+			path: `jetpack-protect/v1/scan`,
+			method: 'POST',
 		} ),
+
+	getScanStatus: () =>
+		apiFetch( {
+			path: 'jetpack-protect/v1/status?hard_refresh=true',
+			method: 'GET',
+		} ).then( camelize ),
+
+	fixThreats: threatIds =>
+		apiFetch( {
+			path: `jetpack-protect/v1/fix-threats`,
+			method: 'POST',
+			data: { threatIds },
+		} ),
+
+	getFixersStatus: threatIds => {
+		const path = threatIds.reduce( ( carryPath, threatId ) => {
+			return `${ carryPath }threat_ids[]=${ threatId }&`;
+		}, 'jetpack-protect/v1/fix-threats-status?' );
+
+		return apiFetch( {
+			path,
+			method: 'GET',
+		} );
+	},
+
+	ignoreThreat: threatId =>
+		apiFetch( {
+			path: `jetpack-protect/v1/ignore-threat?threat_id=${ threatId }`,
+			method: 'POST',
+		} ),
+
+	unIgnoreThreat: threatId =>
+		apiFetch( {
+			path: `jetpack-protect/v1/unignore-threat?threat_id=${ threatId }`,
+			method: 'POST',
+		} ),
+
+	checkCredentials: () =>
+		apiFetch( {
+			path: 'jetpack-protect/v1/check-credentials',
+			method: 'POST',
+		} ),
+
+	checkPlan: () =>
+		apiFetch( {
+			path: 'jetpack-protect/v1/check-plan',
+			method: 'GET',
+		} ),
+
+	getProductData: () =>
+		apiFetch( {
+			path: '/my-jetpack/v1/site/products/scan',
+			method: 'GET',
+		} ).then( camelize ),
 };
 
 export default API;
diff --git a/projects/plugins/protect/src/js/components/admin-page/index.jsx b/projects/plugins/protect/src/js/components/admin-page/index.jsx
@@ -1,62 +1,26 @@
 import { AdminPage as JetpackAdminPage, Container } from '@automattic/jetpack-components';
-import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
-import apiFetch from '@wordpress/api-fetch';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useConnection } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
-import { addQueryArgs, getQueryArg } from '@wordpress/url';
-import React, { useEffect } from 'react';
-import { JETPACK_SCAN_SLUG } from '../../constants';
+import useNotices from '../../hooks/use-notices';
 import useWafData from '../../hooks/use-waf-data';
-import { STORE_ID } from '../../state/store';
 import InterstitialPage from '../interstitial-page';
 import Logo from '../logo';
 import Notice from '../notice';
 import Tabs, { Tab } from '../tabs';
 import styles from './styles.module.scss';
-import useRegistrationWatcher from './use-registration-watcher';
 
 const AdminPage = ( { children } ) => {
-	useRegistrationWatcher();
-
+	const { notice } = useNotices();
+	const { isRegistered } = useConnection();
 	const { isSeen: wafSeen } = useWafData();
-	const notice = useSelect( select => select( STORE_ID ).getNotice() );
-	const { refreshPlan, startScanOptimistically, refreshStatus, refreshScanHistory } =
-		useDispatch( STORE_ID );
-	const { adminUrl } = window.jetpackProtectInitialState || {};
-	const { run, isRegistered, hasCheckoutStarted } = useProductCheckoutWorkflow( {
-		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: addQueryArgs( adminUrl, { checkPlan: true } ),
-		siteProductAvailabilityHandler: async () =>
-			apiFetch( {
-				path: 'jetpack-protect/v1/check-plan',
-				method: 'GET',
-			} ).then( hasRequiredPlan => hasRequiredPlan ),
-		useBlogIdSuffix: true,
-	} );
-
-	useEffect( () => {
-		if ( getQueryArg( window.location.search, 'checkPlan' ) ) {
-			startScanOptimistically();
-			setTimeout( () => {
-				refreshPlan();
-				refreshStatus( true );
-				refreshScanHistory();
-			}, 5000 );
-		}
-	}, [ refreshPlan, refreshStatus, refreshScanHistory, startScanOptimistically ] );
 
-	/*
-	 * Show interstital page when
-	 * - Site is not registered
-	 * - Checkout workflow has started
-	 */
-	if ( ! isRegistered || hasCheckoutStarted ) {
-		return <InterstitialPage onScanAdd={ run } />;
+	if ( ! isRegistered ) {
+		return <InterstitialPage />;
 	}
 
 	return (
 		<JetpackAdminPage moduleName={ __( 'Jetpack Protect', 'jetpack-protect' ) } header={ <Logo /> }>
-			{ notice.message && <Notice floating={ true } dismissable={ true } { ...notice } /> }
+			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
 				<Tabs className={ styles.navigation }>
 					<Tab link="/scan" label={ __( 'Scan', 'jetpack-protect' ) } />

diff --git a/projects/plugins/protect/src/js/components/admin-page/use-registration-watcher.js b/projects/plugins/protect/src/js/components/admin-page/use-registration-watcher.js
diff --git a/projects/plugins/protect/src/js/components/credentials-gate/index.jsx b/projects/plugins/protect/src/js/components/credentials-gate/index.jsx
@@ -1,23 +1,13 @@
 import { Spinner } from '@automattic/jetpack-components';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { STORE_ID } from '../../state/store';
+import useCredentialsQuery from '../../data/use-credentials-query';
 import CredentialsNeededModal from '../credentials-needed-modal';
 import styles from './styles.module.scss';
 
 const CredentialsGate = ( { children } ) => {
-	const { checkCredentials } = useDispatch( STORE_ID );
+	const { data: credentials, isLoading: credentialsIsFetching } = useCredentialsQuery();
 
-	const { credentials, credentialsIsFetching } = useSelect( select => ( {
-		credentials: select( STORE_ID ).getCredentials(),
-		credentialsIsFetching: select( STORE_ID ).getCredentialsIsFetching(),
-	} ) );
-
-	if ( ! credentials && ! credentialsIsFetching ) {
-		checkCredentials();
-	}
-
-	if ( ! credentials ) {
+	if ( credentialsIsFetching ) {
 		return (
 			<div className={ styles.loading }>
 				<Spinner
@@ -35,7 +25,7 @@ const CredentialsGate = ( { children } ) => {
 		);
 	}
 
-	if ( credentials.length === 0 ) {
+	if ( ! credentials || credentials.length === 0 ) {
 		return <CredentialsNeededModal />;
 	}
 

diff --git a/projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx b/projects/plugins/protect/src/js/components/credentials-needed-modal/index.jsx
@@ -1,18 +1,19 @@
 import { Button, Text, getRedirectUrl } from '@automattic/jetpack-components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useQueryClient } from '@tanstack/react-query';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { STORE_ID } from '../../state/store';
+import { QUERY_CREDENTIALS_KEY } from '../../constants';
+import useCredentialsQuery from '../../data/use-credentials-query';
+import useModal from '../../hooks/use-modal';
 import Notice from '../notice';
 import styles from './styles.module.scss';
 
 const CredentialsNeededModal = () => {
-	const { setModal } = useDispatch( STORE_ID );
+	const queryClient = useQueryClient();
+	const { setModal } = useModal();
+	const { data: credentials } = useCredentialsQuery();
 	const { siteSuffix, blogID } = window.jetpackProtectInitialState;
 
-	const { checkCredentials } = useDispatch( STORE_ID );
-	const credentials = useSelect( select => select( STORE_ID ).getCredentials() );
-
 	const handleCancelClick = () => {
 		return event => {
 			event.preventDefault();
@@ -26,12 +27,12 @@ const CredentialsNeededModal = () => {
 	useEffect( () => {
 		const interval = setInterval( () => {
 			if ( ! credentials || credentials.length === 0 ) {
-				checkCredentials();
+				queryClient.invalidateQueries( { queryKey: [ QUERY_CREDENTIALS_KEY ] } );
 			}
-		}, 3000 );
+		}, 5_000 );
 
 		return () => clearInterval( interval );
-	}, [ checkCredentials, credentials ] );
+	}, [ queryClient, credentials ] );
 
 	return (
 		<>