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

@@ -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,99 @@
+import { DataViews } from '@wordpress/dataviews';
+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 }`;
+};
+
+const noop = () => {};
+
+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' ] }>
+			<DataViews
+				isLoading={ postShareStatus.loading }
+				getItemId={ getItemId }
+				fields={ [
+					{
+						id: 'connection',
+						label: __( 'Connection', 'jetpack' ),
+						render: ( { item } ) => (
+							<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>
+						),
+						enableSorting: false,
+						enableHiding: false,
+					},
+					{
+						id: 'timestamp',
+						label: __( 'Time', 'jetpack' ),
+						render: ( { item } ) => {
+							return humanTimeDiff(
+								// @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp
+								item.timestamp * 1000,
+								getDate( null )
+							);
+						},
+						enableSorting: false,
+						enableHiding: false,
+					},
+					{
+						id: 'status',
+						label: __( 'Status', 'jetpack' ),
+						render: ( { item } ) => (
+							<ShareStatusLabel status={ item.status } message={ item.message } />
+						),
+						enableSorting: false,
+						enableHiding: false,
+					},
+					{
+						id: 'actions',
+						label: __( 'Actions', 'jetpack' ),
+						render: ( { item } ) => (
+							<ShareStatusAction
+								connectionId={ item.connection_id }
+								status={ item.status }
+								shareLink={ 'success' === item.status ? item.message : '' }
+							/>
+						),
+						enableSorting: false,
+						enableHiding: false,
+					},
+				] }
+				data={ postShareStatus.shares }
+				view={ { type: 'table' } }
+				defaultLayouts={ { table: {} } }
+				onChangeView={ noop }
+				paginationInfo={ {
+					totalItems: postShareStatus.shares.length,
+					totalPages: 1,
+				} }
+			/>
+		</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,33 @@
 	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;
+	}
 }