Merge branch 'feat/notification' into imprv/80112-serialize-actionUser-securely

# Conflicts:
#	packages/app/src/components/InAppNotification/NotificationContent.tsx

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

@@ -35,14 +35,24 @@ export const InAppNotification = (props: Props): JSX.Element => {
     return actionedUsers;
   };
 
-  const renderUserImage = (): JSX.Element => {
+  const renderUserPicture = (): JSX.Element => {
     const actionUsers = notification.actionUsers;
 
     if (actionUsers.length < 1) {
       return <></>;
     }
+    if (actionUsers.length === 1) {
+      return <UserPicture user={actionUsers[0]} size="md" noTooltip />;
+    }
+    return (
+      <div className="position-relative">
+        <UserPicture user={actionUsers[0]} size="md" noTooltip />
+        <div className="position-absolute" style={{ top: 10, left: 10 }}>
+          <UserPicture user={actionUsers[1]} size="md" noTooltip />
+        </div>
 
-    return <UserPicture user={actionUsers[0]} size="md" noTooltip />;
+      </div>
+    );
   };
 
   const componentName = `${notification.targetModel}:${notification.action}`;
@@ -67,8 +77,8 @@ export const InAppNotification = (props: Props): JSX.Element => {
   return (
     <>
       <div className="dropdown-item d-flex flex-row mb-3">
-        <div className="p-2 d-flex align-items-center">
-          {renderUserImage()}
+        <div className="p-2 mr-2 d-flex align-items-center">
+          {renderUserPicture()}
         </div>
         <div className="p-2">
           {renderInAppNotificationContent()}
@@ -76,5 +86,4 @@ export const InAppNotification = (props: Props): JSX.Element => {
       </div>
     </>
   );
-
 };

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

@@ -12,7 +12,6 @@ import SocketIoContainer from '../../client/services/SocketIoContainer';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
 
-
 type Props = {
   appContainer: AppContainer,
   socketIoContainer: SocketIoContainer,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PagePathLabel } from '@growi/ui';
 import { IInAppNotification } from '../../interfaces/in-app-notification';
 
 import FormattedDistanceDate from '../FormattedDistanceDate';
@@ -11,10 +12,12 @@ interface Props {
 
 export const PageCommentNotification = (props: Props): JSX.Element => {
 
+  const pagePath = { path: props.notification.target.path };
+
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+        <b>{props.actionUsers}</b> commented on  <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-comment-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
@@ -24,14 +27,15 @@ export const PageCommentNotification = (props: Props): JSX.Element => {
 
 export const PageUpdateNotification = (props: Props): JSX.Element => {
 
+  const pagePath = { path: props.notification.target.path };
+
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> page updated on {props.notification.target.path}
+        <b>{props.actionUsers}</b> page updated on <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-file-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
     </>
   );
-
 };