My Jetpack | Enable access to My Jetpack on WP multisite

projects/packages/my-jetpack/_inc/components/modules-list/index.tsx

@@ -1,3 +1,4 @@
+import { Badge } from '@automattic/ui';
 import { Flex, Tooltip } from '@wordpress/components';
 import { DataViews, Field } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
@@ -6,6 +7,7 @@ import { ModuleStatus } from '../module-status';
 import { ModuleToggle } from '../module-toggle';
 import { MyJetpackModule } from '../types';
 import styles from './styles.module.scss';
+import { getModuleStatus } from './utils';
 
 import './style.scss';
 
@@ -45,7 +47,11 @@ export function ModulesList( { modules }: ModulesListProps ) {
 				id: 'toggle',
 				label: __( 'Toggle', 'jetpack-my-jetpack' ),
 				render: ( { item } ) => {
-					return (
+					const { isAvailable, reason } = getModuleStatus( item );
+
+					return ! isAvailable ? (
+						<Badge intent="warning">{ reason }</Badge>
+					) : (
 						<Flex gap={ 4 } className={ styles[ 'toggle-wrap' ] }>
 							<ModuleStatus module={ item } />
 							<ModuleToggle module={ item } />

projects/packages/my-jetpack/_inc/components/modules-list/utils.ts

@@ -0,0 +1,26 @@
+import { getScriptData } from '@automattic/jetpack-script-data';
+import { __ } from '@wordpress/i18n';
+import { MyJetpackModule } from '../types';
+
+export const JETPACK_MODULES_NOT_FOR_MULTISITE = [ 'waf', 'wordads' ];
+
+/**
+ * Check if a module is supported on the current site.
+ *
+ * @param {MyJetpackModule} $module - The module to check.
+ *
+ * @return True if the module is supported, false otherwise.
+ */
+export function getModuleStatus( $module: MyJetpackModule ) {
+	// If the module is not supported on multisite, we set the availability to false and provide a reason.
+	if ( getScriptData().site.is_multisite ) {
+		if ( ! JETPACK_MODULES_NOT_FOR_MULTISITE.includes( $module.module ) ) {
+			return {
+				isAvailable: false,
+				reason: __( 'Not available on multisite', 'jetpack-my-jetpack' ),
+			};
+		}
+	}
+
+	return { isAvailable: true };
+}

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/constants.ts

@@ -18,10 +18,21 @@ export const JETPACK_PRODUCTS_WITHOUT_CARD = [
 	'newsletter',
 	'protect',
 	'related-posts',
+	'scan',
 	'security',
 	'site-accelerator',
 ] as const;
 
+export const JETPACK_PRODUCTS = [
+	...JETPACK_PRODUCTS_WITH_CARD,
+	...JETPACK_PRODUCTS_WITHOUT_CARD,
+] as const;
+
+export const JETPACK_PRODUCTS_NOT_FOR_MULTISITE: Array< ( typeof JETPACK_PRODUCTS )[ number ] > = [
+	'backup',
+	'scan',
+];
+
 export const PRODUCTS_MUST_HAVE_A_STANDALONE_PLUGIN = [ 'anti-spam', 'boost', 'crm' ];
 
 /**

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/product-card.tsx

@@ -1,11 +1,21 @@
-import { Card, CardBody, CardHeader, Flex, FlexBlock, FlexItem } from '@wordpress/components';
+import { Badge } from '@automattic/ui';
+import {
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	Flex,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
 import { ProductCamelCase } from '../../../data/types';
 import { ModuleStatus } from '../../module-status';
 import { ModuleToggle } from '../../module-toggle';
 import { MyJetpackModule } from '../../types';
 import { PRODUCT_ICONS } from './mappings';
 import { ProductCardAction } from './product-card-action';
 import styles from './styles.module.scss';
+import { getProductStatus } from './utils';
 
 export type ProductCardProps = {
 	product: ProductCamelCase;
@@ -25,6 +35,8 @@ export function ProductCard( { product, headingLevel = 3, module: $module }: Pro
 
 	const Icon = PRODUCT_ICONS[ product.slug ];
 
+	const { isAvailable, reason } = getProductStatus( product );
+
 	return (
 		<Card className={ styles[ 'product-card' ] }>
 			<CardHeader>
@@ -39,21 +51,29 @@ export function ProductCard( { product, headingLevel = 3, module: $module }: Pro
 							<Heading className={ styles[ 'card-title' ] }>{ product.name }</Heading>
 						</Flex>
 					</FlexBlock>
-					<FlexItem>
-						{ $module?.available ? (
-							<Flex gap={ 4 }>
-								<ModuleStatus module={ $module } />
-								<ModuleToggle module={ $module } />
-							</Flex>
-						) : (
-							<ProductCardAction product={ product } />
-						) }
-					</FlexItem>
+					{ isAvailable ? (
+						// Hide action buttons and status if not available.
+						<FlexItem>
+							{ $module?.available ? (
+								<Flex gap={ 4 }>
+									<ModuleStatus module={ $module } />
+									<ModuleToggle module={ $module } />
+								</Flex>
+							) : (
+								<ProductCardAction product={ product } />
+							) }
+						</FlexItem>
+					) : null }
 				</Flex>
 			</CardHeader>
 			<CardBody>
 				<span className={ styles[ 'card-description' ] }>{ product.description }</span>
 			</CardBody>
+			{ ! isAvailable ? (
+				<CardFooter>
+					<Badge intent="warning">{ reason }</Badge>
+				</CardFooter>
+			) : null }
 		</Card>
 	);
 }

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/styles.module.scss

@@ -119,6 +119,13 @@
 		padding-top: 1.5rem;
 	}
 
+	div[data-wp-component="CardFooter"] {
+		border-top: 0;
+		padding-top: 0;
+		padding-bottom: 1.5rem;
+		margin-top: -0.5rem;
+	}
+
 	div[data-wp-component="CardBody"] {
 		padding-bottom: 1.5rem;
 	}

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/utils.ts

@@ -1,5 +1,8 @@
+import { getScriptData } from '@automattic/jetpack-script-data';
 import { __ } from '@wordpress/i18n';
+import { ProductCamelCase } from '../../../data/types';
 import { MyJetpackModule } from '../../types';
+import { JETPACK_PRODUCTS_NOT_FOR_MULTISITE } from './constants';
 import { ProductFilter, ProductSection } from './types';
 
 /**
@@ -112,3 +115,28 @@ export function filterAndSortModules(
 
 	return $modules;
 }
+
+/**
+ * Get the status of a product based on its availability.
+ *
+ * @param {ProductCamelCase} product - The product to check.
+ *
+ * @return True if the product is supported, false otherwise.
+ */
+export function getProductStatus( product: ProductCamelCase ) {
+	// If the product is not supported on multisite, we set the available to false and provide a reason.
+	if ( getScriptData().site.is_multisite ) {
+		if (
+			! JETPACK_PRODUCTS_NOT_FOR_MULTISITE.includes(
+				product.slug as ( typeof JETPACK_PRODUCTS_NOT_FOR_MULTISITE )[ number ]
+			)
+		) {
+			return {
+				isAvailable: false,
+				reason: __( 'Not available on multisite', 'jetpack-my-jetpack' ),
+			};
+		}
+	}
+
+	return { isAvailable: true };
+}

projects/packages/my-jetpack/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Enabled My Jetpack access on WP Multisite.

projects/packages/my-jetpack/changelog/show-warning-for-products-unavailable-for-multisite

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Show warning for products and modules not available for multisite.

projects/packages/my-jetpack/src/class-initializer.php

@@ -515,10 +515,6 @@ public static function permissions_callback() {
 	public static function should_initialize() {
 		$should = true;
 
-		if ( is_multisite() ) {
-			$should = false;
-		}
-
 		// All options presented in My Jetpack require a connection to WordPress.com.
 		if ( ( new Status() )->is_offline_mode() ) {
 			$should = false;

projects/plugins/backup/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/boost/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/jetpack/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/jetpack/tests/php/sync/Jetpack_Sync_Functions_Test.php

@@ -923,10 +923,7 @@ public function test_plugin_action_links_get_synced() {
 			),
 		);
 
-		if (
-			! is_multisite()
-				&& ( ! defined( 'IS_ATOMIC' ) || ! IS_ATOMIC )
-		) {
+		if ( ! defined( 'IS_ATOMIC' ) || ! IS_ATOMIC ) {
 			$expected_array['jetpack/jetpack.php']['My Jetpack'] = admin_url( 'admin.php?page=my-jetpack' );
 		}
 

projects/plugins/protect/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/search/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/social/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/starter-plugin/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.

projects/plugins/videopress/changelog/fix-my-jetpack-multisite-access

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: Enabled access to My Jetpack on WP Multisite.