feat(ui): support mention notification on notification popover (#6395)

* feat(ui): support mention notification on notification popover

* move timer to constant

* update notification text

openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx

@@ -16,7 +16,10 @@ import { isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import AppState from '../../AppState';
 import { getFeedsWithFilter } from '../../axiosAPIs/feedsAPI';
-import { getUserPath } from '../../constants/constants';
+import {
+  getUserPath,
+  NOTIFICATION_READ_TIMER,
+} from '../../constants/constants';
 import { FeedFilter } from '../../enums/mydata.enum';
 import { NotificationTabsKey } from '../../enums/notification.enum';
 import { ThreadType } from '../../generated/api/feed/createThread';
@@ -115,7 +118,7 @@ const NotificationBox = ({
           key === NotificationTabsKey.TASK
             ? onMarkTaskNotificationRead()
             : onMarkMentionsNotificationRead();
-        }, 4000);
+        }, NOTIFICATION_READ_TIMER);
       }
     },
     [currentUser, hasTaskNotification, hasMentionNotification]
@@ -153,6 +156,7 @@ const NotificationBox = ({
         </div>
       ) : (
         <List
+          className="tw-min-h-64"
           dataSource={notificationDropDownList}
           footer={
             <Button block href={viewAllPath} type="link">

openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.utils.tsx

@@ -13,6 +13,7 @@
 
 import Icon from '@ant-design/icons';
 import React from 'react';
+import { ReactComponent as IconMentions } from '../../assets/svg/ic-mentions.svg';
 import { ReactComponent as IconTask } from '../../assets/svg/ic-task.svg';
 import { FeedFilter } from '../../enums/mydata.enum';
 import {
@@ -34,19 +35,18 @@ export const tabsInfo = [
       />
     ),
   },
-  // TODO: remove comments when Backend support for Mention is done
-  // {
-  //   name: NotificationTabsName.MENTION,
-  //   key: NotificationTabsKey.CONVERSATION,
-  //   icon: (
-  //     <Icon
-  //       component={IconMentions}
-  //       style={{
-  //         marginRight: '8px',
-  //       }}
-  //     />
-  //   ),
-  // },
+  {
+    name: NotificationTabsName.MENTION,
+    key: NotificationTabsKey.CONVERSATION,
+    icon: (
+      <Icon
+        component={IconMentions}
+        style={{
+          marginRight: '8px',
+        }}
+      />
+    ),
+  },
 ];
 
 export const getFilters = (activeTab: ThreadType) => ({

openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx

@@ -49,7 +49,7 @@ const NotificationFeedCard: FC<NotificationFeedProp> = ({
               <>{createdBy}</>
               {feedType === ThreadType.Conversation ? (
                 <>
-                  <span> posted on </span> <span>{entityType} </span>
+                  <span> mentioned you on the </span> <span>{entityType} </span>
                   <Link
                     className="tw-truncate"
                     to={prepareFeedLink(entityType, entityFQN)}>

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -17,7 +17,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link, NavLink, useHistory } from 'react-router-dom';
 import AppState from '../../AppState';
 import Logo from '../../assets/svg/logo-monogram.svg';
-import { ROUTES, SOCKET_EVENTS } from '../../constants/constants';
+import {
+  NOTIFICATION_READ_TIMER,
+  ROUTES,
+  SOCKET_EVENTS,
+} from '../../constants/constants';
 import {
   hasNotificationPermission,
   shouldRequestPermission,
@@ -103,7 +107,7 @@ const NavBar = ({
           hasTaskNotification &&
             setTimeout(() => {
               handleTaskNotificationRead();
-            }, 5000);
+            }, NOTIFICATION_READ_TIMER);
 
           break;
 
@@ -111,7 +115,7 @@ const NavBar = ({
           hasMentionNotification &&
             setTimeout(() => {
               handleMentionsNotificationRead();
-            }, 5000);
+            }, NOTIFICATION_READ_TIMER);
 
           break;
       }
@@ -125,8 +129,8 @@ const NavBar = ({
   const showBrowserNotification = (
     about: string,
     createdBy: string,
-    id: string,
-    type: string
+    type: string,
+    id?: string
   ) => {
     if (!hasNotificationPermission()) {
       return;
@@ -169,8 +173,8 @@ const NavBar = ({
           showBrowserNotification(
             activity.about,
             activity.createdBy,
-            activity.task.id,
-            activity.type
+            activity.type,
+            activity.task?.id
           );
         }
       });
@@ -182,8 +186,8 @@ const NavBar = ({
           showBrowserNotification(
             activity.about,
             activity.createdBy,
-            activity.task.id,
-            activity.type
+            activity.type,
+            activity.task?.id
           );
         }
       });
@@ -286,7 +290,9 @@ const NavBar = ({
                     />
                   }
                   overlayStyle={{
+                    zIndex: 9999,
                     width: '425px',
+                    minHeight: '375px',
                   }}
                   placement="bottomRight"
                   trigger={['click']}

openmetadata-ui/src/main/resources/ui/src/constants/constants.ts

@@ -451,3 +451,5 @@ export const TITLE_FOR_UPDATE_DESCRIPTION =
 export const configOptions = {
   headers: { 'Content-type': 'application/json-patch+json' },
 };
+
+export const NOTIFICATION_READ_TIMER = 2500;