Read site features from the generic site object, stop querying them separately

client/components/data/query-memberships-settings/index.js

@@ -5,7 +5,7 @@ import { requestSettings } from 'calypso/state/memberships/settings/actions';
 
 class QueryMembershipsSettings extends Component {
 	static propTypes = {
-		siteId: PropTypes.number.isRequired,
+		siteId: PropTypes.number,
 		requestEarnings: PropTypes.func,
 		source: PropTypes.string,
 	};

client/components/data/query-memberships/index.js

@@ -5,7 +5,7 @@ import { requestProducts } from 'calypso/state/memberships/product-list/actions'
 
 class QueryMemberships extends Component {
 	static propTypes = {
-		siteId: PropTypes.number.isRequired,
+		siteId: PropTypes.number,
 		requestProducts: PropTypes.func,
 	};
 

client/components/jetpack/business-at-switch/index.tsx

@@ -1,13 +1,7 @@
 import { WPCOM_FEATURES_ATOMIC } from '@automattic/calypso-products';
-import { translate } from 'i18n-calypso';
 import { ComponentType } from 'react';
-import QuerySiteFeatures from 'calypso/components/data/query-site-features';
-import FormattedHeader from 'calypso/components/formatted-header';
 import WPCOMBusinessAT from 'calypso/components/jetpack/wpcom-business-at';
-import Main from 'calypso/components/main';
 import { useSelector } from 'calypso/state';
-import getFeaturesBySiteId from 'calypso/state/selectors/get-site-features';
-import isRequestingSiteFeatures from 'calypso/state/selectors/is-requesting-site-features';
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 
@@ -17,19 +11,6 @@ type Props = {
 	UpsellComponent: ComponentType;
 };
 
-const Placeholder = () => (
-	<>
-		<FormattedHeader
-			id="business-at-switch"
-			className="business-at-switch placeholder__header"
-			headerText={ translate( 'Loading…' ) }
-			align="left"
-		/>
-
-		<div className="business-at-switch placeholder__primary-promo"></div>
-	</>
-);
-
 /**
  * This component selects the right view for non-Jetpack plans.
  * If the plan is an Atomic plan, we show a component to activate the
@@ -38,24 +19,10 @@ const Placeholder = () => (
 const BusinessATSwitch = ( { UpsellComponent }: Props ) => {
 	const siteId = useSelector( getSelectedSiteId ) as number;
 
-	const featuresNotLoaded: boolean = useSelector(
-		( state ) =>
-			null === getFeaturesBySiteId( state, siteId ) && ! isRequestingSiteFeatures( state, siteId )
-	);
 	const canTransfer: boolean = useSelector( ( state ) =>
 		siteHasFeature( state, siteId, WPCOM_FEATURES_ATOMIC )
 	);
 
-	// If we're not sure, show a loading screen.
-	if ( featuresNotLoaded ) {
-		return (
-			<Main className="business-at-switch__loading">
-				<QuerySiteFeatures siteIds={ [ siteId ] } />
-				<Placeholder />
-			</Main>
-		);
-	}
-
 	// We know the site is not AT as it's not Jetpack,
 	// so show the activation for Atomic plans.
 	if ( canTransfer ) {

client/components/jetpack/sidebar/menu-items/jetpack-cloud.jsx

@@ -3,7 +3,6 @@ import { WPCOM_FEATURES_BACKUPS, WPCOM_FEATURES_SCAN } from '@automattic/calypso
 import { Icon, plugins } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useDispatch, useSelector } from 'react-redux';
-import QuerySiteFeatures from 'calypso/components/data/query-site-features';
 import SidebarItem from 'calypso/layout/sidebar/item';
 import {
 	settingsPath,
@@ -52,7 +51,6 @@ export default ( { path } ) => {
 
 	return (
 		<>
-			<QuerySiteFeatures siteIds={ [ siteId ] } />
 			<JetpackSidebarMenuItems
 				path={ path }
 				showIcons

client/jetpack-cloud/sections/landing/controller.tsx

@@ -4,7 +4,6 @@ import debugModule from 'debug';
 import { dashboardPath } from 'calypso/lib/jetpack/paths';
 import { isAgencyUser } from 'calypso/state/partner-portal/partner/selectors';
 import getPrimarySiteId from 'calypso/state/selectors/get-primary-site-id';
-import getFeaturesBySiteId from 'calypso/state/selectors/get-site-features';
 import getSelectedSiteId from 'calypso/state/ui/selectors/get-selected-site-id';
 import ManageSelectedSiteSidebar from '../sidebar-navigation/manage-selected-site';
 import Landing from './main';
@@ -29,8 +28,7 @@ const landForSiteId = ( siteId: number | null, context: Context, next: () => voi
 	// if this info isn't present, dip into an empty React page
 	// that will fetch it and then redirect using the same logic
 	const isEligible = isSiteEligibleForJetpackCloud( state, siteId as number );
-	const siteFeatures = getFeaturesBySiteId( state, siteId );
-	if ( isEligible === null || ! siteFeatures ) {
+	if ( isEligible === null ) {
 		debug( '[landForSiteId]: rendering interstitial Landing page' );
 
 		// To make the UI feel seamless transition, we want to have the sidebar appear on the interstitial page

client/jetpack-cloud/sections/landing/main.tsx

@@ -1,57 +1,14 @@
 import page from '@automattic/calypso-router';
 import debugModule from 'debug';
-import { useEffect, useRef } from 'react';
-import QuerySiteFeatures from 'calypso/components/data/query-site-features';
+import { useEffect } from 'react';
 import { useSelector } from 'calypso/state';
-import getFeaturesBySiteId from 'calypso/state/selectors/get-site-features';
-import isRequestingSiteFeatures from 'calypso/state/selectors/is-requesting-site-features';
 import { getLandingPath, isSiteEligibleForJetpackCloud } from './selectors';
-import type React from 'react';
 
 const debug = debugModule( 'calypso:jetpack-cloud:landing:main' );
 
-/**
- * Check whether or not we've asked for and received an API response
- * describing the features of the site with the given ID.
- * @param siteId The site for which features data should be requested.
- * @returns true if a request and response have taken place (success or failure);
- * false otherwise.
- */
-const useResolvedSiteFeatures = ( siteId: number ) => {
-	const hasSiteFeatures = useSelector(
-		( state ) => !! getFeaturesBySiteId( state, siteId )?.active
-	);
-	const requestedSiteFeatures = useRef( false );
-	const isFetchingSiteFeatures = useSelector( ( state ) =>
-		isRequestingSiteFeatures( state, siteId )
-	);
-	useEffect( () => {
-		if ( isFetchingSiteFeatures ) {
-			requestedSiteFeatures.current = true;
-		}
-	}, [ isFetchingSiteFeatures ] );
-
-	// If the site's features array is populated,
-	// we know a request happened at some point previously and was successful
-	if ( hasSiteFeatures ) {
-		return true;
-	}
-
-	// If the site's features array is unpopulated, but we know we sent a request for it,
-	// something must have failed; but we know an attempt was made and allowed to
-	// fully resolve.
-	if ( requestedSiteFeatures.current && ! isFetchingSiteFeatures ) {
-		debug( 'site features request seems to have failed' );
-		return true;
-	}
-
-	return false;
-};
-
 // This page should only ever load in a context where a site is already selected
-const Landing: React.FC< { siteId: number } > = ( { siteId } ) => {
+const Landing = ( { siteId }: { siteId: number } ) => {
 	const isEligible = useSelector( ( state ) => isSiteEligibleForJetpackCloud( state, siteId ) );
-	const resolvedSiteFeatures = useResolvedSiteFeatures( siteId );
 	const landingPath = useSelector( ( state ) => getLandingPath( state, siteId ) );
 
 	useEffect( () => {
@@ -63,21 +20,15 @@ const Landing: React.FC< { siteId: number } > = ( { siteId } ) => {
 			return;
 		}
 
-		// Before continuing, wait until we've fetched the selected site's features
-		if ( ! resolvedSiteFeatures ) {
-			debug( 'site features not yet resolved' );
-			return;
-		}
-
 		debug( 'site features resolved; redirecting to appropriate landing page', { landingPath } );
 
 		// By this point, we can assume that landingPath is defined;
 		// let's redirect people to the most appropriate page,
 		// based on the features available to the selected site
 		page.redirect( landingPath );
-	}, [ resolvedSiteFeatures, isEligible, landingPath ] );
+	}, [ isEligible, landingPath ] );
 
-	return <QuerySiteFeatures siteIds={ [ siteId ] } />;
+	return null;
 };
 
 export default Landing;

client/jetpack-cloud/sections/landing/selectors.ts

@@ -19,8 +19,7 @@ export const isSiteEligibleForJetpackCloud = ( state: AppState, siteId: number )
 	( ( isJetpackSite( state, siteId ) ||
 		isBackupPluginActive( state, siteId ) ||
 		isSearchPluginActive( state, siteId ) ) &&
-		( isSiteAtomic( state, siteId ) ||
-			( ! isSiteAtomic( state, siteId ) && ! isJetpackSiteMultiSite( state, siteId ) ) ) );
+		( isSiteAtomic( state, siteId ) || ! isJetpackSiteMultiSite( state, siteId ) ) );
 
 export const getLandingPath = ( state: AppState, siteId: number | null ) => {
 	// Landing requires a site ID;

client/jetpack-cloud/sections/sidebar-navigation/manage-selected-site.tsx

@@ -17,7 +17,6 @@ import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import QueryScanState from 'calypso/components/data/query-jetpack-scan';
-import QuerySiteFeatures from 'calypso/components/data/query-site-features';
 import JetpackIcons from 'calypso/components/jetpack/sidebar/menu-items/jetpack-icons';
 import GuidedTour from 'calypso/jetpack-cloud/components/guided-tour';
 import NewSidebar from 'calypso/jetpack-cloud/components/sidebar';
@@ -196,6 +195,7 @@ const useMenuItems = ( {
 			path,
 			shouldShowPurchases,
 			shouldShowSettings,
+			showScanHistory,
 			siteSlug,
 			translate,
 		]
@@ -212,7 +212,6 @@ const ManageSelectedSiteSidebar = ( { path }: { path: string } ) => {
 
 	return (
 		<>
-			<QuerySiteFeatures siteIds={ [ siteId ] } />
 			{ siteId && <QueryScanState siteId={ siteId } /> }
 			<NewSidebar
 				path="/"

client/jetpack-connect/authorize.js

@@ -15,7 +15,6 @@ import PropTypes from 'prop-types';
 import { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { formatSlugToURL } from 'calypso/blocks/importer/util';
-import QuerySiteFeatures from 'calypso/components/data/query-site-features';
 import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
 import QueryUserConnection from 'calypso/components/data/query-user-connection';
 import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
@@ -1275,7 +1274,6 @@ export class JetpackAuthorize extends Component {
 					} ) }
 				>
 					<div className="jetpack-connect__logged-in-form">
-						<QuerySiteFeatures siteIds={ [ authSiteId ] } />
 						<QuerySitePurchases siteId={ authSiteId } />
 						<QueryUserConnection
 							siteId={ authSiteId }

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -31,7 +31,6 @@ import { useRef, useState, useEffect } from 'react';
 import AsyncLoad from 'calypso/components/async-load';
 import QueryEligibility from 'calypso/components/data/query-atat-eligibility';
 import { useQueryProductsList } from 'calypso/components/data/query-products-list';
-import { useQuerySiteFeatures } from 'calypso/components/data/query-site-features';
 import { useQuerySitePurchases } from 'calypso/components/data/query-site-purchases';
 import { useQueryTheme } from 'calypso/components/data/query-theme';
 import { useQueryThemes } from 'calypso/components/data/query-themes';
@@ -374,7 +373,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 	} );
 	useQueryProductsList();
 	useQuerySitePurchases( site ? site.ID : -1 );
-	useQuerySiteFeatures( [ site?.ID ] );
 
 	const selectedDesignThemeId = selectedDesign ? getThemeIdFromDesign( selectedDesign ) : null;
 	// This is needed while the screenshots property is not being indexed on ElasticSearch