Forms: add gravatars on dashboard rows (#45555)

* changelog

* allow gravatar component receive size as prop

* use gravatar component on dataviews rows

* adjust dataviews cell content wrapper gap and tweak unread marker to continue to work well

Author: CGastrell

projects/packages/forms/changelog/add-forms-dashboard-dataviews-gravatar

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: show gravatar on dataviews list

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

@@ -11,6 +11,7 @@ import './style.scss';
 type GravatarProps = {
 	displayName?: string;
 	email: string;
+	size?: number;
 };
 
 /**
@@ -22,7 +23,11 @@ type GravatarProps = {
  * @param {GravatarProps} props - The component props.
  * @return {JSX.Element} The Gravatar component
  */
-export default function Gravatar( { displayName, email }: GravatarProps ): JSX.Element | null {
+export default function Gravatar( {
+	displayName,
+	email,
+	size = 48,
+}: GravatarProps ): JSX.Element | null {
 	const profileImageRef = useRef( null );
 	const hovercardRef = useRef( null );
 
@@ -68,6 +73,8 @@ export default function Gravatar( { displayName, email }: GravatarProps ): JSX.E
 			className="jp-forms__gravatar"
 			ref={ profileImageRef }
 			src={ `https://0.gravatar.com/avatar/${ hashedEmail }?d=initials&name=${ displayName }` }
+			width={ size }
+			height={ size }
 		/>
 	);
 }

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

@@ -2,7 +2,5 @@
 	background-color: var(--jp-gray-5);
 	border-radius: 50%;
 	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers
-	height: 48px;
 	overflow: hidden;
-	width: 48px;
 }

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

@@ -17,6 +17,7 @@ import { useSearchParams } from 'react-router';
 /**
  * Internal dependencies
  */
+import Gravatar from '../../components/gravatar';
 import InboxStatusToggle from '../../components/inbox-status-toggle';
 import { ResponseMobileView, SingleResponseView } from '../../components/response-view';
 import useInboxData from '../../hooks/use-inbox-data';
@@ -231,6 +232,14 @@ export default function InboxView() {
 									●
 								</span>
 							) }
+							{ item.author_email && (
+								<Gravatar
+									email={ item.author_email }
+									displayName={ authorInfo }
+									key={ decodeEntities( item.author_email ) }
+									size={ 32 }
+								/>
+							) }
 							{ wrapperUnread( item.is_unread, authorInfo ) }
 						</>
 					);

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

@@ -377,6 +377,10 @@
 			width: calc(100% - var(--forms-admin-sidebar-width, variables.$admin-sidebar-width));
 		}
 	}
+
+	.dataviews-view-table__cell-content-wrapper {
+		gap: 16px;
+	}
 }
 
 /*
@@ -560,4 +564,5 @@ body.jetpack_page_jetpack-forms-admin {
 	margin-right: 4.5px;
 	margin-left: -12px;
 	vertical-align: middle;
+	position: absolute;
 }