Forms: explore using native dataviews media display

projects/packages/forms/changelog/add-forms-native-dataviews-media-display

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: use DataViews mediaField to display responders avatars

projects/packages/forms/src/dashboard/components/gravatar/index.tsx

@@ -5,6 +5,7 @@ import { Hovercards } from '@gravatar-com/hovercards';
 import '@gravatar-com/hovercards/dist/style.css';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
 import { sha256 } from 'js-sha256';
 import './style.scss';
 
@@ -23,6 +24,7 @@ type GravatarProps = {
 	email: string;
 	size?: number;
 	useHovercard?: boolean;
+	isRounded?: boolean;
 };
 
 /**
@@ -40,6 +42,7 @@ export default function Gravatar( {
 	email,
 	size = 48,
 	useHovercard = true,
+	isRounded = true,
 }: GravatarProps ): JSX.Element | null {
 	const profileImageRef = useRef( null );
 	const hovercardRef = useRef( null );
@@ -80,10 +83,14 @@ export default function Gravatar( {
 
 	const hashedEmail = sha256( email );
 
+	const classes = clsx( 'jp-forms__gravatar', {
+		'is-rounded': isRounded,
+	} );
+
 	return (
 		<img
 			alt={ displayName || '' }
-			className="jp-forms__gravatar"
+			className={ classes }
 			ref={ profileImageRef }
 			src={ `https://0.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }&name=${ displayName }` }
 			width={ size }

projects/packages/forms/src/dashboard/components/gravatar/style.scss

@@ -1,6 +1,9 @@
 .jp-forms__gravatar {
 	background-color: var(--jp-gray-5);
-	border-radius: 50%;
 	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers
 	overflow: hidden;
+
+	&.is-rounded {
+		border-radius: 50%;
+	}
 }

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -220,14 +220,42 @@ export default function InboxView() {
 	};
 	const fields = useMemo(
 		() => [
+			{
+				id: 'avatar',
+				label: __( 'Avatar', 'jetpack-forms' ),
+				render: ( { item } ) => {
+					const authorInfo = decodeEntities(
+						item.author_name || item.author_email || item.author_url || item.ip
+					);
+					const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp';
+
+					return (
+						<>
+							<Gravatar
+								email={ item.author_email || item.ip } // With IP we still return placeholder image
+								defaultImage={ defaultImage }
+								displayName={ authorInfo }
+								key={ item.id }
+								size={ 32 }
+								useHovercard={ false }
+								isRounded={ false }
+							/>
+						</>
+					);
+				},
+				enableSorting: false,
+				enableHiding: true,
+				globalSearch: false,
+				type: 'media',
+			},
 			{
 				id: 'from',
 				label: __( 'From', 'jetpack-forms' ),
 				render: ( { item } ) => {
 					const authorInfo = decodeEntities(
 						item.author_name || item.author_email || item.author_url || item.ip
 					);
-					const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp';
+
 					return (
 						<div className="jp-forms__inbox__author-field">
 							{ item.is_unread && (
@@ -238,14 +266,6 @@ export default function InboxView() {
 									●
 								</span>
 							) }
-							<Gravatar
-								email={ item.author_email || item.ip } // With IP we still return placeholder image
-								defaultImage={ defaultImage }
-								displayName={ authorInfo }
-								key={ item.id }
-								size={ 32 }
-								useHovercard={ false }
-							/>
 							{ wrapperUnread( item.is_unread, authorInfo ) }
 						</div>
 					);

projects/packages/forms/src/dashboard/inbox/dataviews/views.js

@@ -13,7 +13,9 @@ const defaultView = {
 	filters: [],
 	page: 1,
 	perPage: 20,
-	fields: [ 'from', 'date', 'source', 'ip' ],
+	fields: [ 'date', 'source', 'ip' ],
+	titleField: 'from',
+	mediaField: 'avatar',
 };
 
 export const defaultLayouts = {

projects/packages/forms/src/dashboard/inbox/style.scss

@@ -305,6 +305,13 @@
 			border-right: 1px solid var(--jp-gray-5);
 		}
 
+		// Override DataViews default max-width for media in primary column
+		// to better fit smaller avatars (24x24 instead of larger preview images)
+		.dataviews-column-primary__media {
+			max-width: 32px;
+		}
+
+
 		.dataviews__view-actions {
 			align-items: center;
 
@@ -356,7 +363,8 @@
 		color: #d63638;
 		font-size: 8px;
 		position: absolute;
-		left: -12px;
+		left: -10px;
+		top: 5px;
 		cursor: pointer;
 	}
 }