Merge pull request #4518 from weseek/imprv/78991-show-actionUser-images

show userPicture on notification popup

packages/app/src/components/InAppNotification/InAppNotification.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { UserPicture } from '@growi/ui';
 import { PageCommentNotification } from './PageCommentNotification';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
 
@@ -34,17 +35,15 @@ export const InAppNotification = (props: Props): JSX.Element => {
     return actionedUsers;
   };
 
-  // TODO show user image by #78702
-  const getUserImage = () => {
-    // const latestActionUsers = props.notification.actionUsers.slice(0, 3);
+  const renderUserImage = () => {
+    const actionUsers = notification.actionUsers;
 
-    // if (latestActionUsers.length < 1) {
+    if (actionUsers.length < 1) {
     // what is this case?
-    //   return '';
-    // }
+      return '';
+    }
 
-    // return <UserPicture user={latestActionUsers[0]} />;
-    return;
+    return <UserPicture user={actionUsers[0]} size="md" noTooltip />;
   };
 
   const componentName = `${notification.targetModel}:${notification.action}`;
@@ -55,7 +54,13 @@ export const InAppNotification = (props: Props): JSX.Element => {
 
   switch (componentName) {
     case 'Page:COMMENT':
-      return <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      return (
+        <>
+          {renderUserImage()}
+          <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />
+        </>
+
+      );
     default:
       return <></>;
   }

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -130,8 +130,8 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
-        <div className="my-2">
-          <InAppNotification key={notification._id} notification={notification} onClick={notificationClickHandler} />
+        <div className="my-2" key={notification._id}>
+          <InAppNotification notification={notification} onClick={notificationClickHandler} />
         </div>
       );
     });

packages/app/src/components/InAppNotification/PageCommentNotification.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
-// import PagePath from 'components/PageList/PagePath';
 
 interface Props {
   actionUsers: string