feat(connections): jetpack sso settings wizard

includes/wizards/class-connections-wizard.php

@@ -66,7 +66,6 @@ public function enqueue_scripts_and_styles() {
 				'can_connect_fivetran' => OAuth::is_proxy_configured( 'fivetran' ),
 				'can_use_webhooks'     => defined( 'NEWSPACK_EXPERIMENTAL_WEBHOOKS' ) && NEWSPACK_EXPERIMENTAL_WEBHOOKS,
 				'can_use_everlit'      => Everlit_Configuration_Manager::is_enabled(),
-				'can_use_jetpack_sso'  => class_exists( 'Jetpack' ) && defined( 'NEWSPACK_MANAGER_FILE' ),
 			]
 		);
 		\wp_enqueue_script( 'newspack-connections-wizard' );

includes/wizards/newspack/class-newspack-settings.php

@@ -62,6 +62,11 @@ public function get_local_data() {
 							'googleOAuth' => OAuth::is_proxy_configured( 'google' ),
 						],
 					],
+					'jetpack_sso'  => [
+						'dependencies' => [
+							'jetpack_sso' => class_exists( 'Jetpack' ) && defined( 'NEWSPACK_MANAGER_FILE' ),
+						],
+					],
 					'recaptcha'    => [],
 					'analytics'    => [
 						'editLink'                    => $google_site_kit_url,

src/wizards/connections/views/main/index.js

@@ -14,7 +14,6 @@ import Plugins from './plugins';
 import GoogleAuth from './google';
 import Mailchimp from './mailchimp';
 import FivetranConnection from './fivetran';
-import JetpackSSO from './jetpack-sso';
 import Recaptcha from './recaptcha';
 import Webhooks from './webhooks';
 
@@ -40,7 +39,6 @@ const Main = () => {
 					/>
 				</>
 			) }
-			<JetpackSSO setError={ setErrorWithPrefix( __( 'Jetpack SSO: ', 'newspack-plugin' ) ) } />
 			<Recaptcha setError={ setErrorWithPrefix( __( 'reCAPTCHA: ', 'newspack-plugin' ) ) } />
 			{ newspack_connections_data.can_use_webhooks && <Webhooks /> }
 		</>

src/wizards/newspack/views/settings/connections/index.tsx

@@ -15,6 +15,7 @@ import Plugins from './plugins';
 import Webhooks from './webhooks';
 import Analytics from './analytics';
 import Recaptcha from './recaptcha';
+import JetpackSSO from './jetpack-sso';
 import Mailchimp from './mailchimp';
 import GoogleOAuth from './google-oauth';
 import CustomEvents from './custom-events';
@@ -38,6 +39,13 @@ function Connections() {
 				<Mailchimp />
 			</WizardSection>
 
+			{ /* Jetpack SSO */ }
+			{ connections.sections.jetpack_sso.dependencies?.jetpack_sso ? (
+				<WizardSection title={ __( 'Jetpack SSO', 'newspack-plugin' ) }>
+					<JetpackSSO />
+				</WizardSection>
+			) : null }
+
 			{ /* reCAPTCHA */ }
 			<WizardSection title={ __( 'reCAPTCHA v3', 'newspack-plugin' ) }>
 				<Recaptcha />

src/wizards/connections/views/main/jetpack-sso.js → src/wizards/newspack/views/settings/connections/jetpack-sso.tsx

@@ -1,4 +1,3 @@
-/* globals newspack_connections_data */
 /**
  * WordPress dependencies
  */
@@ -15,55 +14,57 @@ import {
 	Button,
 	Grid,
 	Notice,
-	SectionHeader,
 	SelectControl,
-} from '../../../../components/src';
+} from '../../../../../components/src';
+
+const isValidError = ( e: unknown ): e is WpRestApiError => {
+	return e instanceof Error && 'message' in e;
+}
 
 const JetpackSSO = () => {
-	const [ error, setError ] = useState( null );
-	const [ isLoading, setIsLoading ] = useState( false );
-	const [ settings, setSettings ] = useState( {} );
-	const [ settingsToUpdate, setSettingsToUpdate ] = useState( {} );
+	const [ error, setError ] = useState<string>( '' );
+	const [ isLoading, setIsLoading ] = useState<boolean>( false );
+	const [ settings, setSettings ] = useState<JetpackSSOSettings>( {} );
+	const [ settingsToUpdate, setSettingsToUpdate ] = useState<JetpackSSOSettings>( {} );
+
+  const getCapLabel = ( cap: JetpackSSOCaps ): string | undefined =>
+    settings.available_caps ? settings.available_caps[ cap ] : undefined;
 
 	useEffect( () => {
 		const fetchSettings = async () => {
 			setIsLoading( true );
 			try {
-				const fetchedSettings = await apiFetch( { path: '/newspack-manager/v1/jetpack-sso' } );
+				const fetchedSettings = await apiFetch<JetpackSSOSettings>( { path: '/newspack-manager/v1/jetpack-sso' } );
 				setSettings( fetchedSettings );
 				setSettingsToUpdate( fetchedSettings );
-			} catch ( e ) {
-				setError( e.message || __( 'Error fetching settings.', 'newspack-plugin' ) );
+			} catch ( e: unknown ) {
+				setError( isValidError( e ) ? e.message : __( 'Error fetching settings.', 'newspack-plugin' ) );
 			} finally {
 				setIsLoading( false );
 			}
 		};
 		fetchSettings();
 	}, [] );
 
-	const updateSettings = async data => {
-		setError( null );
+	const updateSettings = async ( data: JetpackSSOSettings ) => {
+		setError( '' );
 		setIsLoading( true );
 		try {
-			const newSettings = await apiFetch( {
+			const newSettings = await apiFetch<JetpackSSOSettings>( {
 				path: '/newspack-manager/v1/jetpack-sso',
 				method: 'POST',
 				data,
 			} );
 			setSettings( newSettings );
 			setSettingsToUpdate( newSettings );
-		} catch ( e ) {
-			setError( e?.message || __( 'Error updating settings.', 'newspack-plugin' ) );
+		} catch ( e: unknown ) {
+      setError( isValidError( e ) ? e.message : __( 'Error updating settings.', 'newspack-plugin' ) );
 		} finally {
 			setIsLoading( false );
 		}
 	};
-	if ( ! newspack_connections_data.can_use_jetpack_sso ) {
-		return null;
-	}
 	return (
 		<>
-			<SectionHeader id="jetpack-sso" title={ __( 'Jetpack SSO', 'newspack-plugin' ) } />
 			<ActionCard
 				isMedium
 				title={ __( 'Force two-factor authentication', 'newspack-plugin' ) }
@@ -120,12 +121,12 @@ const JetpackSSO = () => {
 									label={ __( 'Capability', 'newspack-plugin' ) }
 									hideLabelFromVision
 									value={ settingsToUpdate?.force_2fa_cap || '' }
-									onChange={ value =>
+									onChange={ ( value: JetpackSSOCaps ) =>
 										setSettingsToUpdate( { ...settingsToUpdate, force_2fa_cap: value } )
 									}
 									options={
-										Object.keys( settings.available_caps || {} ).map( cap => ( {
-											label: settings.available_caps[ cap ],
+										Object.keys( settings.available_caps || {} ).map( ( cap: string ) => ( {
+											label: getCapLabel( cap as JetpackSSOCaps ),
 											value: cap,
 										} ) )
 									}

src/wizards/newspack/views/settings/types.d.ts

@@ -92,3 +92,15 @@ type RssData = {
 	module_enabled_rss: boolean;
 	'module_enabled_media-partners': boolean;
 };
+
+/** Jetpack SSO Caps */
+type JetpackSSOCaps = 'edit_posts' | 'publish_posts' | 'edit_others_posts' | 'manage_options';
+
+/** Jetpack SSO Settings */
+type JetpackSSOSettings = Partial<{
+	jetpack_sso_force_2fa: boolean;
+	force_2fa: boolean;
+	force_2fa_cap: JetpackSSOCaps;
+	obfuscate_account: boolean;
+	available_caps: { [key in JetpackSSOCaps]?: string };
+}>;

src/wizards/types/index.d.ts

@@ -14,6 +14,18 @@ type WizardApiFetch< T = {} > = (
 	callbacks?: ApiFetchCallbacks< any >
 ) => Promise< T >;
 
+/**
+ * WP REST API Error.
+ */
+type WpRestApiError = {
+	code: string;
+	message: string;
+	data: {
+		status: number;
+		params: Record< string, string >;
+	};
+};
+
 /**
  * Attachment object interface.
  */