Merge b8c7555 into 6681c40

Author: ivan-ottinger

src/hooks/tests/get-sync-support.test.ts

@@ -81,17 +81,27 @@ describe( 'getSyncSupport', () => {
 	} );
 
 	it( 'returns "already-connected" if site ID is in connectedSiteIds', () => {
-		const site = { ...baseSite, ID: 42, is_wpcom_atomic: true };
+		const site = { ...baseSite, ID: 42, is_wpcom_atomic: true, jetpack: true };
 		expect( getSyncSupport( site, [ 42 ] ) ).toBe( 'already-connected' );
 	} );
 
 	it( 'returns "syncable" for Atomic site', () => {
-		const site = { ...baseSite, is_wpcom_atomic: true };
+		const site = { ...baseSite, is_wpcom_atomic: true, jetpack: true };
 		expect( getSyncSupport( site, [] ) ).toBe( 'syncable' );
 	} );
 
 	it( 'returns "syncable" for Pressable site', () => {
-		const site = { ...baseSite, hosting_provider_guess: 'pressable' };
+		const site = { ...baseSite, hosting_provider_guess: 'pressable', jetpack: true };
 		expect( getSyncSupport( site, [] ) ).toBe( 'syncable' );
 	} );
+
+	it( 'returns "jetpack-disconnected" for Pressable site with broken Jetpack connection', () => {
+		const site = { ...baseSite, hosting_provider_guess: 'pressable', jetpack: false };
+		expect( getSyncSupport( site, [] ) ).toBe( 'jetpack-disconnected' );
+	} );
+
+	it( 'returns "jetpack-disconnected" for Atomic site with broken Jetpack connection', () => {
+		const site = { ...baseSite, is_wpcom_atomic: true, jetpack: false };
+		expect( getSyncSupport( site, [] ) ).toBe( 'jetpack-disconnected' );
+	} );
 } );

src/hooks/use-fetch-wpcom-sites/index.tsx

@@ -92,6 +92,9 @@ export function getSyncSupport( site: SitesEndpointSite, connectedSiteIds: numbe
 	if ( needsTransfer( site ) ) {
 		return 'needs-transfer';
 	}
+	if ( ! site.jetpack ) {
+		return 'jetpack-disconnected';
+	}
 	if ( connectedSiteIds.some( ( id ) => id === site.ID ) ) {
 		return 'already-connected';
 	}

src/hooks/use-fetch-wpcom-sites/types.ts

@@ -5,7 +5,8 @@ export type SyncSupport =
 	| 'already-connected'
 	| 'needs-upgrade'
 	| 'deleted'
-	| 'missing-permissions';
+	| 'missing-permissions'
+	| 'jetpack-disconnected';
 
 export type SyncSite = {
 	id: number;

src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -155,10 +155,11 @@ const getSortedSites = ( sites: SyncSite[] ) => {
 		syncable: 1,
 		'already-connected': 2,
 		deleted: 3,
-		'missing-permissions': 4,
-		'needs-transfer': 5,
-		'needs-upgrade': 6,
-		unsupported: 7,
+		'jetpack-disconnected': 4,
+		'missing-permissions': 5,
+		'needs-transfer': 6,
+		'needs-upgrade': 7,
+		unsupported: 8,
 	};
 
 	return [ ...sites ].sort( ( a, b ) => order[ a.syncSupport ] - order[ b.syncSupport ] );
@@ -199,15 +200,18 @@ function SiteItem( {
 	onClick: () => void;
 } ) {
 	const { __ } = useI18n();
+	const locale = useI18nLocale();
 	const isAlreadyConnected = site.syncSupport === 'already-connected';
 	const isSyncable = site.syncSupport === 'syncable';
 	const isNeedsTransfer = site.syncSupport === 'needs-transfer';
 	const isMissingPermissions = site.syncSupport === 'missing-permissions';
 	const needsUpgrade = site.syncSupport === 'needs-upgrade';
 	const isDeleted = site.syncSupport === 'deleted';
+	const isJetpackDisconnected = site.syncSupport === 'jetpack-disconnected';
 	const isUnsupported = site.syncSupport === 'unsupported';
 	const isPressable = site.isPressable;
-	const isDisabled = isDeleted || isUnsupported || needsUpgrade || isMissingPermissions;
+	const isDisabled =
+		isDeleted || isJetpackDisconnected || isUnsupported || needsUpgrade || isMissingPermissions;
 
 	return (
 		<div
@@ -323,6 +327,17 @@ function SiteItem( {
 					{ __( 'Deleted' ) }
 				</div>
 			) }
+			{ isJetpackDisconnected && (
+				<div className="a8c-body-small text-a8c-gray-30 shrink-0 text-right">
+					<Button
+						variant="link"
+						onClick={ () => getIpcApi().openURL( getLocalizedLink( locale, 'docsSync' ) ) }
+					>
+						{ __( 'Check connection' ) }
+						<ArrowIcon />
+					</Button>
+				</div>
+			) }
 			{ isUnsupported && (
 				<div className="a8c-body-small text-a8c-gray-30 shrink-0">{ __( 'Unsupported site' ) }</div>
 			) }