Populate the modal

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

@@ -1,6 +1,7 @@
-import { useSelect } from '@wordpress/data';
-import { store } from '../../social-store';
+import moment from 'moment';
 import ConnectionIcon from '../connection-icon';
+import { ShareStatusAction } from './share-status-action';
+import { ShareStatusLabel } from './share-status-label';
 import styles from './styles.module.scss';
 
 /**
@@ -12,21 +13,21 @@ import styles from './styles.module.scss';
  * @return {import('react').ReactNode} - React element
  */
 export function ShareInfo( { share } ) {
-	const { connections } = useSelect( select => {
-		return {
-			connections: select( store ).getConnections(),
-		};
-	}, [] );
-
-	console.log( { share, connections } );
+	const { service, external_name, profile_picture, timestamp, status, message } = share;
 
 	return (
 		<div className={ styles[ 'share-item' ] }>
-			{ /* <ConnectionIcon
-				serviceName={ connection.service_name }
-				label={ connection.display_name || connection.external_display }
-				profilePicture={ connection.profile_picture }
-			/> */ }
+			<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>{ moment.unix( timestamp ).fromNow() }</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-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

@@ -3,6 +3,10 @@
 	padding-block: 1rem;
 }
 
+.modal {
+	width: 45rem;
+}
+
 .share-log-list {
 	outline: 1px solid var(--jp-gray-5);
 	border-radius: 4px;
@@ -11,7 +15,7 @@
 
 	.share-log-list-item {
 		margin-bottom: 0px;
-		padding: 1rem;
+		padding: 0.8rem 1rem;
 
 		&:not(:last-child) {
 			border-bottom: 1px solid var(--jp-gray-5);
@@ -23,4 +27,54 @@
 		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;
 }