Merge pull request #3571 from Automattic/feat/ia-dashboard

refactor(ia): dashboard site status etc.

src/wizards/newspack/components/site-statuses/index.tsx

@@ -21,20 +21,22 @@ const {
 const actions: Statuses = {
 	readerActivation: {
 		...siteStatuses.readerActivation,
-		then( { config: { enabled = false } }: { config: { enabled: boolean } } ) {
-			return enabled;
+		then( { config } ) {
+			return Boolean( config?.enabled );
 		},
 	},
 	googleAnalytics: {
 		...siteStatuses.googleAnalytics,
-		then( { propertyID = '' }: { propertyID: string } ) {
+		then( { propertyID = '' } ) {
 			return propertyID !== '';
 		},
 	},
 	googleAdManager: {
 		...siteStatuses.googleAdManager,
 		then( { services: { google_ad_manager } } ) {
-			return google_ad_manager.available && google_ad_manager.enabled === '1';
+			return (
+				google_ad_manager.available && google_ad_manager.enabled === '1'
+			);
 		},
 	},
 } as const;

src/wizards/newspack/components/site-statuses/site-status.tsx

@@ -22,41 +22,55 @@ const defaultStatuses = {
 	error: __( 'Disconnected', 'newspack-plugin' ),
 	'error-dependencies': undefined,
 	'error-preflight': undefined,
+	'error-request': undefined,
 };
 
 const SiteStatus = ( {
 	label = '',
 	isPreflightValid = true,
-	dependencies: dependenciesProp = null,
+	dependencies: dependenciesProp,
 	statuses,
 	endpoint,
 	configLink,
 	then,
 }: Status ) => {
-	const parsedStatusLabels = { ...defaultStatuses, ...statuses };
+	const parsedStatusLabels: Record< StatusLabels, string > = {
+		...defaultStatuses,
+		...statuses,
+	};
+
+	const [ requestCode, setRequestCode ] = useState( 200 );
 
-	const [ requestStatus, setRequestStatus ] = useState< StatusLabels >( 'idle' );
-	const [ failedDependencies, setFailedDependencies ] = useState< string[] >( [] );
+	const [ requestStatus, setRequestStatus ] =
+		useState< StatusLabels >( 'idle' );
+	const [ failedDependencies, setFailedDependencies ] = useState< string[] >(
+		[]
+	);
 	const [ isModalVisible, setIsModalVisible ] = useState( false );
 
-	const dependencies = structuredClone( dependenciesProp ) as Dependencies;
+	const dependencies = structuredClone< Dependencies | undefined >(
+		dependenciesProp
+	);
 
 	useEffect( () => {
 		makeRequest();
 	}, [] );
 
-	const makeRequest = ( pluginInfo = {} ) => {
+	function makeRequest( pluginInfo = {} ) {
 		// When/if a dependency is activated update reference.
 		if ( dependencies && Object.keys( pluginInfo ).length > 0 ) {
 			for ( const [ pluginName ] of Object.entries( pluginInfo ) ) {
 				dependencies[ pluginName ].isActive = true;
 			}
 		}
-		return new Promise( ( resolve, reject ) => {
+		return new Promise< void | boolean >( resolve => {
 			// Dependency check
 			if ( dependencies && Object.keys( dependencies ).length > 0 ) {
 				const failedDeps: string[] = [];
-				for ( const [ dependencyName, dependencyInfo ] of Object.entries( dependencies ) ) {
+				for ( const [
+					dependencyName,
+					dependencyInfo,
+				] of Object.entries( dependencies ) ) {
 					// Don't process active
 					if ( dependencyInfo.isActive ) {
 						continue;
@@ -80,19 +94,26 @@ const SiteStatus = ( {
 			setRequestStatus( 'pending' );
 			apiFetch( {
 				path: endpoint,
+				parse: false,
 			} )
-				.then( data => {
+				.then( async res => {
+					const response = res as Response;
+					setRequestCode( response.status );
+					const data = await response.json();
 					const apiRequest = then( data );
 					setRequestStatus( apiRequest ? 'success' : 'error' );
 					resolve( apiRequest );
 				} )
-				.catch( () => {
-					then( false );
-					setRequestStatus( 'error' );
-					reject();
+				.catch( err => {
+					const status = err?.status ?? 500;
+					setRequestStatus(
+						status > 399 ? 'error-request' : 'error'
+					);
+					setRequestCode( status );
+					resolve();
 				} );
 		} );
-	};
+	}
 
 	const classes = `newspack-site-status newspack-site-status__${ requestStatus }`;
 
@@ -107,23 +128,34 @@ const SiteStatus = ( {
 			) }
 			{ /* Error UI, link user to config */ }
 			{ requestStatus === 'error' && (
-				<Tooltip text={ __( 'Click to navigate to configuration', 'newspack-plugin' ) }>
+				<Tooltip
+					text={ __(
+						'Click to navigate to configuration',
+						'newspack-plugin'
+					) }
+				>
 					<a href={ configLink } className={ classes }>
-						{ label }: <span>{ parsedStatusLabels[ requestStatus ] }</span>
+						{ label }:{ ' ' }
+						<span>{ parsedStatusLabels[ requestStatus ] }</span>
 						<span className="hidden">{ __( 'Configure?' ) }</span>
 					</a>
 				</Tooltip>
 			) }
 			{ /* Error Dependencies, dependencies install modal */ }
-			{ requestStatus === 'error-dependencies' && (
+			{ requestStatus === 'error-dependencies' && dependencies && (
 				<Tooltip
 					text={ sprintf(
 						// translators: %s is a comma separated list of needed dependencies.
 						__( '%s must be installed & activated!' ),
-						failedDependencies.map( dep => dependencies[ dep ].label ).join( ', ' )
+						failedDependencies
+							.map( dep => dependencies[ dep ].label )
+							.join( ', ' )
 					) }
 				>
-					<button onClick={ () => setIsModalVisible( true ) } className={ classes }>
+					<button
+						onClick={ () => setIsModalVisible( true ) }
+						className={ classes }
+					>
 						{ label }:{ ' ' }
 						<span>
 							{ _n(
@@ -145,9 +177,27 @@ const SiteStatus = ( {
 				</Tooltip>
 			) }
 			{ /* Display standard UI for the rest */ }
-			{ [ 'error-preflight', 'success', 'idle', 'pending' ].includes( requestStatus ) && (
+			{ [
+				'error-preflight',
+				'success',
+				'idle',
+				'pending',
+				'error-request',
+			].includes( requestStatus ) && (
 				<div className={ classes }>
-					{ label }: <span>{ parsedStatusLabels[ requestStatus ] }</span>
+					{ label }:{ ' ' }
+					<span>
+						{ requestStatus === 'error-request'
+							? sprintf(
+									/* translators: %d is the HTTP status code */
+									__(
+										'Request failed - %d',
+										'newspack-plugin'
+									),
+									requestCode
+							  )
+							: parsedStatusLabels[ requestStatus ] }
+					</span>
 				</div>
 			) }
 		</>

src/wizards/newspack/types/site-statuses.d.ts

@@ -5,6 +5,7 @@ type StatusLabels =
 	| 'error'
 	| 'error-dependencies'
 	| 'error-preflight'
+	| 'error-request' // 404, 500
 	| 'pending'
 	| 'pending-install'
 	| 'idle';
@@ -15,7 +16,7 @@ type Status = {
 	isPreflightValid?: boolean;
 	configLink: string;
 	endpoint: string;
-	dependencies?: Dependencies | null;
+	dependencies?: Dependencies;
 	then: ( args: any ) => boolean;
 };