Social: Indicate that a connection is broken in the overview of the service

projects/js-packages/publicize-components/changelog/update-social-connections-show-broken-connections-in-service-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Added service status to broken connections for a service

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.54.6",
+	"version": "0.54.7-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/components/services/service-item-details.tsx

@@ -11,7 +11,7 @@ import { SupportedService } from './use-supported-services';
 
 export type ServicesItemDetailsProps = {
 	service: SupportedService;
-	serviceConnections?: Array< Connection >;
+	serviceConnections: Array< Connection >;
 };
 
 /**

projects/js-packages/publicize-components/src/components/services/service-item.tsx

@@ -1,10 +1,11 @@
 import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Panel, PanelBody } from '@wordpress/components';
 import { useReducer } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
 import { ConnectForm } from './connect-form';
 import { ServiceItemDetails, ServicesItemDetailsProps } from './service-item-details';
+import { ServiceStatus } from './service-status';
 import styles from './style.module.scss';
 
 export type ServicesItemProps = ServicesItemDetailsProps;
@@ -45,17 +46,11 @@ export function ServiceItem( { service, serviceConnections }: ServicesItemProps
 					{ ! isSmall && ! serviceConnections.length ? (
 						<span className={ styles.description }>{ service.description }</span>
 					) : null }
-					{ serviceConnections?.length > 0 ? (
-						<span className={ styles[ 'active-connection' ] }>
-							{ serviceConnections.length > 1
-								? sprintf(
-										// translators: %d: Number of connections
-										__( '%d connections', 'jetpack' ),
-										serviceConnections.length
-								  )
-								: __( 'Connected', 'jetpack' ) }
-						</span>
-					) : null }
+					<ServiceStatus
+						serviceConnections={ serviceConnections }
+						// If the panel is already open, we don't need the click handler
+						onClickBroken={ isPanelOpen ? undefined : togglePanel }
+					/>
 				</div>
 				<div className={ styles.actions }>
 					{ ! isMastodonPanelOpen ? (

projects/js-packages/publicize-components/src/components/services/service-status.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@automattic/jetpack-components';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { Connection } from '../../social-store/types';
+import styles from './style.module.scss';
+
+export type ServiceStatusProps = {
+	serviceConnections: Array< Connection >;
+	onClickBroken?: VoidFunction;
+};
+
+/**
+ * Service status component
+ *
+ * @param {ServiceStatusProps} props - Component props
+ *
+ * @returns {import('react').ReactNode} Service status component
+ */
+export function ServiceStatus( { serviceConnections, onClickBroken }: ServiceStatusProps ) {
+	if ( ! serviceConnections.length ) {
+		return null;
+	}
+
+	if ( serviceConnections.some( ( { status } ) => status === 'broken' ) ) {
+		return (
+			<span>
+				<Button
+					variant="link"
+					className={ styles[ 'broken-connection' ] }
+					onClick={ onClickBroken }
+				>
+					{ serviceConnections.length > 1
+						? __( 'Broken connections', 'jetpack' )
+						: _x( 'Broken connection', '', 'jetpack' ) }
+				</Button>
+			</span>
+		);
+	}
+
+	return (
+		<span className={ styles[ 'active-connection' ] }>
+			{ serviceConnections.length > 1
+				? sprintf(
+						// translators: %d: Number of connections
+						__( '%d connections', 'jetpack' ),
+						serviceConnections.length
+				  )
+				: __( 'Connected', 'jetpack' ) }
+		</span>
+	);
+}

projects/js-packages/publicize-components/src/components/services/style.module.scss

@@ -119,6 +119,18 @@
 		white-space: nowrap;
 	}
 
+	.broken-connection {
+		white-space: nowrap;
+		font-weight: 500;
+
+		// Add some specificity to override the default button styles
+		&:global(.components-button.is-link) {
+			color: var(--jp-yellow-40);
+			text-decoration: none;
+			font-size: inherit;
+		}
+	}
+
 	.service-connection-list {
 		border-top: 1px solid var(--jp-gray-5);
 		padding-top: 1rem;