Social: Update share status modal to use Dataviews component

projects/js-packages/publicize-components/changelog/update-social-share-status-modal-to-use-dataviews

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Updated share status modal to use dataviews 

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

@@ -32,6 +32,7 @@
 		"@wordpress/components": "28.6.0",
 		"@wordpress/compose": "7.6.0",
 		"@wordpress/data": "10.6.0",
+		"@wordpress/dataviews": "4.2.0",
 		"@wordpress/date": "5.6.0",
 		"@wordpress/edit-post": "8.6.1",
 		"@wordpress/editor": "14.6.0",

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

@@ -1,9 +1,8 @@
 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 { SharesDataView } from './shares-dataview';
 import styles from './styles.module.scss';
 
 /**
@@ -12,35 +11,16 @@ import styles from './styles.module.scss';
  * @return {import('react').ReactNode} - Share status modal component.
  */
 export function ShareList() {
-	const { shareStatus } = useSelect( select => {
-		const store = select( socialStore );
-		const _editorStore = select( editorStore );
-
-		return {
-			// @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript
-			shareStatus: store.getPostShareStatus( _editorStore.getCurrentPostId() ),
-		};
-	}, [] );
+	const shareStatus = useSelect( select => select( socialStore ).getPostShareStatus(), [] );
 
 	return (
-		<div className="connection-management">
+		<div>
 			{ 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>
-			) }
+			<SharesDataView postShareStatus={ shareStatus } />
 		</div>
 	);
 }

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

@@ -11,7 +11,7 @@ import styles from './styles.module.scss';
 type ShareStatusActionProps = {
 	status: string;
 	shareLink: string;
-	connectionId: number;
+	connectionId: number | string;
 };
 
 /**
@@ -67,5 +67,5 @@ export function ShareStatusAction( { connectionId, status, shareLink }: ShareSta
 		);
 	};
 
-	return <div className={ styles[ 'share-status-action-wrapper' ] }>{ renderActions() }</div>;
+	return <div>{ renderActions() }</div>;
 }

projects/js-packages/publicize-components/src/components/share-status/shares-dataview.tsx

@@ -0,0 +1,84 @@
+import { getDate, humanTimeDiff } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import { PostShareStatus, ShareStatusItem } from '../../social-store/types';
+import ConnectionIcon from '../connection-icon';
+import { ShareStatusAction } from './share-status-action';
+import { ShareStatusLabel } from './share-status-label';
+import styles from './styles.module.scss';
+
+const getItemId = ( item: ShareStatusItem ) => {
+	return `${ item.external_id || item.connection_id }:${ item.timestamp }`;
+};
+
+type SharesDataViewProps = {
+	postShareStatus: PostShareStatus;
+};
+
+/**
+ * The component for the shares data view.
+ *
+ * @param {SharesDataViewProps} props - The component props.
+ *
+ * @return {import('react').ReactNode} - The shares data view component.
+ */
+export function SharesDataView( { postShareStatus }: SharesDataViewProps ) {
+	return (
+		<div className={ styles[ 'dataview-wrapper' ] }>
+			<div className="dataviews-wrapper">
+				<table className="dataviews-view-table">
+					<thead>
+						<tr className="dataviews-view-table__row">
+							<th>{ __( 'Connection', 'jetpack' ) }</th>
+							<th>{ __( 'Time', 'jetpack' ) }</th>
+							<th>{ __( 'Status', 'jetpack' ) }</th>
+							<th>{ __( 'Actions', 'jetpack' ) }</th>
+						</tr>
+					</thead>
+					<tbody>
+						{ postShareStatus.shares.map( item => (
+							<tr key={ getItemId( item ) } className="dataviews-view-table__row">
+								<td>
+									<div className="dataviews-view-table__cell-content-wrapper">
+										<div className={ styles[ 'connection-name' ] }>
+											<ConnectionIcon
+												serviceName={ item.service }
+												label={ item.external_name }
+												profilePicture={ item.profile_picture }
+											/>
+											<div className={ styles[ 'share-item-name-wrapper' ] }>
+												<div className={ styles[ 'share-item-name' ] }>{ item.external_name }</div>
+											</div>
+										</div>
+									</div>
+								</td>
+								<td>
+									<div className="dataviews-view-table__cell-content-wrapper">
+										{ humanTimeDiff(
+											// @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp
+											item.timestamp * 1000,
+											getDate( null )
+										) }
+									</div>
+								</td>
+								<td>
+									<div className="dataviews-view-table__cell-content-wrapper">
+										<ShareStatusLabel status={ item.status } message={ item.message } />
+									</div>
+								</td>
+								<td>
+									<div className="dataviews-view-table__cell-content-wrapper">
+										<ShareStatusAction
+											connectionId={ item.connection_id }
+											status={ item.status }
+											shareLink={ 'success' === item.status ? item.message : '' }
+										/>
+									</div>
+								</td>
+							</tr>
+						) ) }
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}

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

@@ -1,3 +1,5 @@
+@import '@wordpress/dataviews/build-style/style.css';
+
 .trigger-wrapper {
 	margin-top: 1rem;
 	padding-block: 1rem;
@@ -8,7 +10,7 @@
 	padding-block: 1rem;
 }
 
-.spinner{
+.spinner {
 	margin: 0 1rem 1rem 1rem;
 }
 
@@ -31,12 +33,6 @@
 			border-bottom: 1px solid var(--jp-gray-5);
 		}
 	}
-
-	.share-item {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
 }
 
 .share-item-name-wrapper {
@@ -55,7 +51,6 @@
 .share-status-wrapper {
 	display: flex;
 	align-items: center;
-	width: 5rem;
 
 	&.share-status-success {
 		color: var(--jp-green-50);
@@ -85,10 +80,39 @@
 	fill: var(--jp-green-50);
 }
 
-.share-status-action-wrapper {
-	width: 3rem;
+.disconnected-icon {
+	display: block;
 }
 
-.disconnected-icon{
-	display: block;
+.dataview-wrapper {
+
+	// Hide the table actions
+	:global(.dataviews__view-actions) {
+		display: none;
+	}
+
+	// Make the table header buttons unclickable
+	:global(.dataviews-view-table-header-button) {
+		pointer-events: none;
+	}
+
+	// Make the actions column right-aligned
+	:global(.dataviews-view-table__row th:last-child),
+	:global(.dataviews-view-table__row td:last-child) {
+		text-align: end;
+	}
+	:global(.dataviews-view-table__row td:last-child) {
+		width: 1%;
+	}
+
+	.connection-name {
+		display: flex;
+		align-items: center;
+	}
+
+	// Reset link styles
+	:global(.components-external-link) {
+		color: #2271b1; // $blue-50 from WP common CSS.
+		font-weight: normal;
+	}
 }