Merge pull request #4527 from weseek/imprv/79839-show-action-time-on-popup

Imprv/79839 show action time on popup

packages/app/src/components/FormattedDistanceDate.jsx

@@ -23,7 +23,7 @@ const FormattedDistanceDate = (props) => {
   return (
     <>
       <span id={elemId}>{formatDistanceStrict(date, baseDate)}</span>
-      <UncontrolledTooltip placement="bottom" fade={false} target={elemId}>{dateFormatted}</UncontrolledTooltip>
+      {props.isShowTooltip && <UncontrolledTooltip placement="bottom" fade={false} target={elemId}>{dateFormatted}</UncontrolledTooltip>}
     </>
   );
 };
@@ -34,9 +34,11 @@ FormattedDistanceDate.propTypes = {
   baseDate: PropTypes.instanceOf(Date),
   // the number(sec) from 'baseDate' to avoid format
   differenceForAvoidingFormat: PropTypes.number,
+  isShowTooltip: PropTypes.bool,
 };
 FormattedDistanceDate.defaultProps = {
   differenceForAvoidingFormat: 86400 * 3,
+  isShowTooltip: true,
 };
 
 export default FormattedDistanceDate;

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { UserPicture } from '@growi/ui';
 import { PageCommentNotification } from './PageCommentNotification';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+import FormattedDistanceDate from '../FormattedDistanceDate';
 
 interface Props {
   notification: IInAppNotification
@@ -35,12 +36,11 @@ export const InAppNotification = (props: Props): JSX.Element => {
     return actionedUsers;
   };
 
-  const renderUserImage = () => {
+  const renderUserImage = (): JSX.Element => {
     const actionUsers = notification.actionUsers;
 
     if (actionUsers.length < 1) {
-    // what is this case?
-      return '';
+      return <></>;
     }
 
     return <UserPicture user={actionUsers[0]} size="md" noTooltip />;
@@ -52,16 +52,25 @@ export const InAppNotification = (props: Props): JSX.Element => {
     ...props,
   };
 
-  switch (componentName) {
-    case 'Page:COMMENT':
-      return (
-        <>
-          {renderUserImage()}
-          <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />
-        </>
+  const renderInAppNotificationContent = (): JSX.Element => {
+    switch (componentName) {
+      case 'Page:COMMENT':
+        return <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <>
+      {/* TODO: notification popup adjustment by #79315 */}
+      <div>
+        {renderUserImage()}
+        {renderInAppNotificationContent()}
+      </div>
+      <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+    </>
+  );
+
 
-      );
-    default:
-      return <></>;
-  }
 };

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

@@ -155,7 +155,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
       <DropdownMenu right>
         <InAppNotificationContents />
         <DropdownItem divider />
-        {/* TODO: Able to show all notifications by GW-7534 */}
+        {/* TODO: Able to show all notifications by #79317 */}
         <a>See All</a>
       </DropdownMenu>
     </Dropdown>