From 3903fe0efa8869953bb55dbc7ec7b37e429d55e4 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Wed, 26 Jun 2024 10:58:47 +0530 Subject: [PATCH 1/4] Social: Indicate that that a connection is broken in the overview of the service. --- .../services/service-item-details.tsx | 2 +- .../src/components/services/service-item.tsx | 19 +++---- .../components/services/service-status.tsx | 50 +++++++++++++++++++ .../src/components/services/style.module.scss | 12 +++++ 4 files changed, 70 insertions(+), 13 deletions(-) create mode 100644 projects/js-packages/publicize-components/src/components/services/service-status.tsx diff --git a/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx b/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx index a54137eb0cc49..59a40597c9923 100644 --- a/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx +++ b/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 >; }; /** diff --git a/projects/js-packages/publicize-components/src/components/services/service-item.tsx b/projects/js-packages/publicize-components/src/components/services/service-item.tsx index e7151e195a48a..9e3971d183c0a 100644 --- a/projects/js-packages/publicize-components/src/components/services/service-item.tsx +++ b/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 ? ( { service.description } ) : null } - { serviceConnections?.length > 0 ? ( - - { serviceConnections.length > 1 - ? sprintf( - // translators: %d: Number of connections - __( '%d connections', 'jetpack' ), - serviceConnections.length - ) - : __( 'Connected', 'jetpack' ) } - - ) : null } +
{ ! isMastodonPanelOpen ? ( diff --git a/projects/js-packages/publicize-components/src/components/services/service-status.tsx b/projects/js-packages/publicize-components/src/components/services/service-status.tsx new file mode 100644 index 0000000000000..27555397e5452 --- /dev/null +++ b/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 ( + + + + ); + } + + return ( + + { serviceConnections.length > 1 + ? sprintf( + // translators: %d: Number of connections + __( '%d connections', 'jetpack' ), + serviceConnections.length + ) + : __( 'Connected', 'jetpack' ) } + + ); +} diff --git a/projects/js-packages/publicize-components/src/components/services/style.module.scss b/projects/js-packages/publicize-components/src/components/services/style.module.scss index 874b54e533f37..169eb9a62a344 100644 --- a/projects/js-packages/publicize-components/src/components/services/style.module.scss +++ b/projects/js-packages/publicize-components/src/components/services/style.module.scss @@ -119,6 +119,18 @@ white-space: nowrap; } + .broken-connection { + color: var(--jp-yellow-40); + white-space: nowrap; + font-weight: 500; + + // Add some specificity to override the default button styles + &:global(.components-button.is-link) { + text-decoration: none; + font-size: inherit; + } + } + .service-connection-list { border-top: 1px solid var(--jp-gray-5); padding-top: 1rem; From 52f0f7c07183cccf89a7a6ea931de6d748c6536a Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Wed, 26 Jun 2024 11:00:49 +0530 Subject: [PATCH 2/4] Add changelog --- ...cial-connections-show-broken-connections-in-service-status | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-connections-show-broken-connections-in-service-status diff --git a/projects/js-packages/publicize-components/changelog/update-social-connections-show-broken-connections-in-service-status b/projects/js-packages/publicize-components/changelog/update-social-connections-show-broken-connections-in-service-status new file mode 100644 index 0000000000000..c466f090dc06f --- /dev/null +++ b/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 From ea56a53af96aec167d8533723236513ab9e83bec Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Wed, 26 Jun 2024 11:15:36 +0530 Subject: [PATCH 3/4] Override button text color on Jetpack settings page --- .../src/components/services/style.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/publicize-components/src/components/services/style.module.scss b/projects/js-packages/publicize-components/src/components/services/style.module.scss index 169eb9a62a344..2f4a6bc91c2bd 100644 --- a/projects/js-packages/publicize-components/src/components/services/style.module.scss +++ b/projects/js-packages/publicize-components/src/components/services/style.module.scss @@ -120,12 +120,12 @@ } .broken-connection { - color: var(--jp-yellow-40); 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; } From 56ec827ac273c9d2d33f9d397b32b62d95451ba1 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 27 Jun 2024 08:45:30 +0530 Subject: [PATCH 4/4] Fix up versions --- projects/js-packages/publicize-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json index 23138d05489e8..946c5767bfc99 100644 --- a/projects/js-packages/publicize-components/package.json +++ b/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": {