diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2806a378eb7dc..8a94cd0c7857f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1005,6 +1005,9 @@ importers: '@wordpress/data': specifier: 10.6.0 version: 10.6.0(react@18.3.1) + '@wordpress/dataviews': + specifier: 4.2.0 + version: 4.2.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@wordpress/date': specifier: 5.6.0 version: 5.6.0 diff --git a/projects/js-packages/publicize-components/changelog/update-social-share-status-modal-to-use-dataviews b/projects/js-packages/publicize-components/changelog/update-social-share-status-modal-to-use-dataviews new file mode 100644 index 0000000000000..9798ea6434d63 --- /dev/null +++ b/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 diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json index 86d0099c95f4b..4d314b1a9fec2 100644 --- a/projects/js-packages/publicize-components/package.json +++ b/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", diff --git a/projects/js-packages/publicize-components/src/components/share-status/share-info.tsx b/projects/js-packages/publicize-components/src/components/share-status/share-info.tsx deleted file mode 100644 index 001d9afab31a9..0000000000000 --- a/projects/js-packages/publicize-components/src/components/share-status/share-info.tsx +++ /dev/null @@ -1,43 +0,0 @@ -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, connection_id } = - share; - - return ( -
- -
-
{ external_name }
-
-
- { - // @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp - humanTimeDiff( timestamp * 1000, getDate() ) - } -
- - -
- ); -} diff --git a/projects/js-packages/publicize-components/src/components/share-status/share-list.tsx b/projects/js-packages/publicize-components/src/components/share-status/share-list.tsx index 8875e7fc1c772..03d93c2560b82 100644 --- a/projects/js-packages/publicize-components/src/components/share-status/share-list.tsx +++ b/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 ( -
+
{ shareStatus.loading && (
{ __( 'Loading…', 'jetpack' ) }
) } - { shareStatus.shares.length > 0 && ( - - ) } +
); } diff --git a/projects/js-packages/publicize-components/src/components/share-status/share-status-action.tsx b/projects/js-packages/publicize-components/src/components/share-status/share-status-action.tsx index c61a761de8195..cd6e556fee91c 100644 --- a/projects/js-packages/publicize-components/src/components/share-status/share-status-action.tsx +++ b/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
{ renderActions() }
; + return
{ renderActions() }
; } diff --git a/projects/js-packages/publicize-components/src/components/share-status/shares-dataview.tsx b/projects/js-packages/publicize-components/src/components/share-status/shares-dataview.tsx new file mode 100644 index 0000000000000..33ea861a6a460 --- /dev/null +++ b/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 ( +
+
+ + + + + + + + + + + { postShareStatus.shares.map( item => ( + + + + + + + ) ) } + +
{ __( 'Connection', 'jetpack' ) }{ __( 'Time', 'jetpack' ) }{ __( 'Status', 'jetpack' ) }{ __( 'Actions', 'jetpack' ) }
+
+
+ +
+
{ item.external_name }
+
+
+
+ 		+
+ { humanTimeDiff( + // @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp + item.timestamp * 1000, + getDate( null ) + ) } +
+ 		+
+ +
+ 		+
+ +
+
+
+
+ ); +} diff --git a/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss b/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss index 06857e2e28790..6182b0d3753d4 100644 --- a/projects/js-packages/publicize-components/src/components/share-status/styles.module.scss +++ b/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; + } }