Social: Add Social Share Status modal for published posts

projects/js-packages/publicize-components/changelog/add-social-share-status-shares-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add share status log modal to published posts

projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx

@@ -1,7 +1,9 @@
-import { Button } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useCallback, useReducer } from 'react';
 import { store as socialStore } from '../../social-store';
+import { ShareList } from './share-list';
 import styles from './styles.module.scss';
 
 /**
@@ -10,6 +12,12 @@ import styles from './styles.module.scss';
  * @return {import('react').ReactNode} - Share status modal component.
  */
 export function ShareStatusModal() {
+	const [ isModalOpen, toggleModal ] = useReducer( state => ! state, false );
+
+	const handleOpenModal = useCallback( () => {
+		toggleModal();
+	}, [] );
+
 	const { featureFlags } = useSelect( select => {
 		const store = select( socialStore );
 		return {
@@ -23,7 +31,24 @@ export function ShareStatusModal() {
 
 	return (
 		<div className={ styles.wrapper }>
-			<Button variant="secondary">{ __( 'Review sharing status', 'jetpack' ) }</Button>{ ' ' }
+			{ isModalOpen && (
+				<Modal
+					onRequestClose={ toggleModal }
+					title={ __( 'Sharing status', 'jetpack' ) }
+					className={ styles.modal }
+				>
+					<ShareList />
+					<Button
+						className={ styles[ 'close-button' ] }
+						onClick={ toggleModal }
+						icon={ close }
+						label={ __( 'Close', 'jetpack' ) }
+					/>
+				</Modal>
+			) }
+			<Button variant="secondary" onClick={ handleOpenModal }>
+				{ __( 'Review sharing status', 'jetpack' ) }
+			</Button>
 		</div>
 	);
 }

projects/js-packages/publicize-components/src/components/share-status-modal/share-info.tsx

@@ -0,0 +1,38 @@
+import { getDate, humanTimeDiff } from '@wordpress/date';
+import ConnectionIcon from '../connection-icon';
+import { ShareStatusAction } from './share-status-action';
+import { ShareStatusLabel } from './share-status-label';
+import styles from './styles.module.scss';
+
+/**
+ *
+ * ShareInfo component
+ *
+ * @param {object} props       - component props
+ * @param {object} props.share - share object
+ * @return {import('react').ReactNode} - React element
+ */
+export function ShareInfo( { share } ) {
+	const { service, external_name, profile_picture, timestamp, status, message } = share;
+
+	return (
+		<div className={ styles[ 'share-item' ] }>
+			<ConnectionIcon
+				serviceName={ service }
+				label={ external_name }
+				profilePicture={ profile_picture }
+			/>
+			<div className={ styles[ 'share-item-name-wrapper' ] }>
+				<div className={ styles[ 'share-item-name' ] }>{ external_name }</div>
+			</div>
+			<div>
+				{
+					// @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp
+					humanTimeDiff( timestamp * 1000, getDate() )
+				}
+			</div>
+			<ShareStatusLabel status={ status } message={ message } />
+			<ShareStatusAction status={ status } shareLink={ 'success' === status ? message : '' } />
+		</div>
+	);
+}

projects/js-packages/publicize-components/src/components/share-status-modal/share-list.tsx

@@ -0,0 +1,46 @@
+import { Spinner } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { store as socialStore } from '../../social-store';
+import { ShareInfo } from './share-info';
+import styles from './styles.module.scss';
+
+/**
+ * ShareList component
+ *
+ * @return {import('react').ReactNode} - Share status modal component.
+ */
+export function ShareList() {
+	const { shareStatus } = useSelect( select => {
+		const store = select( socialStore );
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- `@wordpress/editor` is a nightmare to work with TypeScript
+		const _editorStore = select( editorStore ) as any;
+
+		return {
+			shareStatus: store.getPostShareStatus( _editorStore.getCurrentPostId() ),
+		};
+	}, [] );
+
+	return (
+		<div className="connection-management">
+			{ shareStatus.loading && (
+				<div className={ styles.spinner }>
+					<Spinner /> { __( 'Loading…', 'jetpack' ) }
+				</div>
+			) }
+			{ shareStatus.shares.length > 0 && (
+				<ul className={ styles[ 'share-log-list' ] }>
+					{ shareStatus.shares.map( ( share, idx ) => (
+						<li
+							key={ `${ share.external_id || share.connection_id }${ idx }}` }
+							className={ styles[ 'share-log-list-item' ] }
+						>
+							<ShareInfo share={ share } />
+						</li>
+					) ) }
+				</ul>
+			) }
+		</div>
+	);
+}

projects/js-packages/publicize-components/src/components/share-status-modal/share-status-action.tsx

@@ -0,0 +1,26 @@
+import { ExternalLink } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+/**
+ *
+ * Share status action component.
+ *
+ * @param {object}  props           - component props
+ * @param {boolean} props.status    - status of the share
+ * @param {string}  props.shareLink - link to the share
+ * @return {import('react').ReactNode} - React element
+ */
+export function ShareStatusAction( { status, shareLink } ) {
+	return (
+		<div className={ styles[ 'share-status-action-wrapper' ] }>
+			{ 'success' !== status ? (
+				<span>Retry</span>
+			) : (
+				<ExternalLink className={ styles[ 'profile-link' ] } href={ shareLink }>
+					{ __( 'View', 'jetpack' ) }
+				</ExternalLink>
+			) }
+		</div>
+	);
+}

projects/js-packages/publicize-components/src/components/share-status-modal/share-status-label.tsx

@@ -0,0 +1,44 @@
+import { IconTooltip, Text } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import clsx from 'clsx';
+import React from 'react';
+import styles from './styles.module.scss';
+
+/**
+ *
+ * Share status label component.
+ *
+ * @param {object}  props         - component props
+ * @param {boolean} props.status  - status of the share
+ * @param {string}  props.message - link to the share, or error message if failed
+ * @return {import('react').ReactNode} - React element
+ */
+export function ShareStatusLabel( { status, message } ) {
+	const isSuccessful = 'success' === status;
+
+	const icon = isSuccessful ? (
+		<Icon className={ styles[ 'share-status-icon' ] } icon={ check } />
+	) : (
+		<IconTooltip
+			title={ __( 'Sharing failed with the following message:', 'jetpack' ) }
+			className={ styles[ 'share-status-icon-tooltip' ] }
+		>
+			<Text variant="body-small">{ message }</Text>
+		</IconTooltip>
+	);
+
+	return (
+		<div
+			className={ clsx( styles[ 'share-status-wrapper' ], {
+				[ styles[ 'share-status-success' ] ]: isSuccessful,
+				[ styles[ 'share-status-failure' ] ]: ! isSuccessful,
+			} ) }
+		>
+			<div className={ styles[ 'share-status-icon' ] }>{ icon }</div>
+			<div className={ styles[ 'share-status-label' ] }>
+				{ isSuccessful ? __( 'Shared', 'jetpack' ) : __( 'Failed', 'jetpack' ) }
+			</div>
+		</div>
+	);
+}

projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss

@@ -1,4 +1,84 @@
 .wrapper {
 	margin-top: 1rem;
 	padding-block: 1rem;
+}
+
+.spinner{
+	margin: 0 1rem 1rem 1rem;
+}
+
+.modal {
+	width: 60rem;
+}
+
+.share-log-list {
+	outline: 1px solid var(--jp-gray-5);
+	border-radius: 4px;
+	margin: 0;
+	width: 100%;
+
+	.share-log-list-item {
+		margin-bottom: 0px;
+		padding: 0.8rem 1rem;
+
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--jp-gray-5);
+		}
+	}
+
+	.share-item {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+	}
+}
+
+.share-item-name-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	flex: 1;
+	overflow: auto;
+}
+
+.share-item-name {
+	display: flex;
+	align-items: center;
+}
+
+.share-status-wrapper {
+	display: flex;
+	align-items: center;
+	width: 5rem;
+
+	&.share-status-success {
+		color: var(--jp-green-50);
+	}
+
+	&.share-status-failure {
+		color: var(--jp-red-50);
+		height: 29px;
+	}
+}
+
+.share-status-label {
+	flex: 1;
+}
+
+.share-status-icon-tooltip {
+	width: 24px;
+	top: 2px;
+	margin-inline-start: 2px;
+
+	> button {
+		color: var(--jp-red-50) !important;
+	}
+}
+
+.share-status-icon {
+	fill: var(--jp-green-50);
+}
+
+.share-status-action-wrapper {
+	width: 3rem;
 }

projects/js-packages/publicize-components/src/social-store/resolvers.js

@@ -1,5 +1,6 @@
 import apiFetch from '@wordpress/api-fetch';
 import { store as editorStore } from '@wordpress/editor';
+import { normalizeShareStatus } from '../utils/share-status';
 import { setConnections } from './actions/connection-data';
 import { setJetpackSettings } from './actions/jetpack-settings';
 import { fetchPostShareStatus, receivePostShareStaus } from './actions/share-status';
@@ -75,10 +76,12 @@ export function getPostShareStatus( postId ) {
 
 		try {
 			dispatch( fetchPostShareStatus( postId ) );
-			const result = await apiFetch( {
+			let result = await apiFetch( {
 				path: `jetpack/v4/social/share-status/${ postId }`,
 			} );
 
+			result = normalizeShareStatus( result );
+
 			dispatch( receivePostShareStaus( result, postId ) );
 		} catch ( error ) {
 			dispatch( fetchPostShareStatus( postId, false ) );

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -41,6 +41,7 @@ export type ShareStatusItem = Pick<
 	timestamp: number;
 	service: string;
 	external_name: string;
+	external_id: string;
 };
 
 export type PostShareStatus = {

projects/js-packages/publicize-components/src/utils/share-status.ts

@@ -0,0 +1,34 @@
+/**
+ * Normalizes the share status object.
+ * TODO: Optimize this function to avoid unnecessary iterations.
+ *
+ * @param {import( './types' ).PostShareStatus} shareStatus - Share status object.
+ * @return {import( './types' ).PostShareStatus | undefined} - Normalized share status object.
+ */
+export function normalizeShareStatus( shareStatus ) {
+	if ( ! shareStatus || ! ( 'shares' in shareStatus ) || ! shareStatus.done ) {
+		return;
+	}
+	// Sort shares to show the latest shares on the top.
+	shareStatus.shares.sort( ( a, b ) => b.timestamp - a.timestamp );
+
+	// Remove failed shares that have a successful share later.
+	shareStatus.shares = shareStatus.shares.filter( share => {
+		const hasSuccessfulShareLater = shareStatus.shares.some( otherShare => {
+			return (
+				otherShare.timestamp > share.timestamp &&
+				'success' === otherShare.status &&
+				otherShare.external_id === share.external_id &&
+				share.external_id // We added external_id later to the object
+			);
+		} );
+
+		if ( 'failure' === share.status ) {
+			return ! hasSuccessfulShareLater;
+		}
+
+		return true;
+	} );
+
+	return shareStatus;
+}

projects/packages/publicize/changelog/add-social-share-status-shares-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add share status log modal to published posts

projects/packages/sync/changelog/add-social-share-status-shares-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add share status log modal to published posts