feat: add badge indicator

src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -119,6 +119,7 @@ const defaultOrgs: INavigationOrg[] = [
 
 const defaultNotificationCenter: INotificationCenterProps = {
   open: false,
+  unreadMessages: 0,
   content: () => <div></div>,
   onClose: () => {},
   onPreferencesClick: () => {},
@@ -1566,3 +1567,105 @@ export const MPWithNotificationCenterMessageModal: Story = {
     )
   },
 }
+
+export const MPWithNotificationCenterUnreadNotifications: Story = {
+  args: {
+    notificationCenter: {
+      ...defaultNotificationCenter,
+      unreadMessages: 1,
+    },
+  },
+
+  render: props => {
+    const [isNotificationCenterOpen, setIsNotificationCenterOpen] = useState(false)
+    const [isModalOpen, setIsModalOpen] = useState(false)
+    const [zIndex, setZIndex] = useState(NotificationCenterZIndex)
+    const [unreadMessages, setUnreadMessages] = useState(1)
+    return (
+      <div>
+        <Modal
+          open={isModalOpen}
+          maskClosable={false}
+          destroyOnClose={true}
+          onCancel={() => {
+            setIsModalOpen(false)
+          }}
+          onOk={() => {
+            setIsModalOpen(false)
+          }}
+          afterClose={() => {
+            setZIndex(NotificationCenterZIndex)
+          }}
+          centered={true}>
+          <div>
+            <p>Message Title</p>
+            <p>Unread Messages: {unreadMessages}</p>
+          </div>
+        </Modal>
+        <GlobalNavigation
+          {...props}
+          notificationCenter={{
+            open: isNotificationCenterOpen,
+            zIndex: zIndex,
+            unreadMessages: unreadMessages,
+            onOpenChange: (newOpen: boolean) => {
+              if (isModalOpen) {
+                return
+              }
+              setIsNotificationCenterOpen(newOpen)
+            },
+            content: () => (
+              <div>
+                <div
+                  onClick={() => {
+                    setZIndex(0)
+                    setIsModalOpen(true)
+                    setUnreadMessages(prev => (prev > 0 ? prev - 1 : 0))
+                  }}>
+                  Open Modal
+                </div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+              </div>
+            ),
+            onClose: () => {
+              setIsNotificationCenterOpen(false)
+            },
+            onPreferencesClick: () => {
+              setIsNotificationCenterOpen(false)
+            },
+          }}
+          logo={defaultLogo}
+          tools={defaultTools}
+          management={defaultManagement}
+          orgs={defaultOrgs}
+          showSuiteLogo={true}
+          onSearchClick={() => {
+            alert('Searching!')
+          }}
+          suiteSelectorOptions={{
+            overviewHref: '/',
+            onLinkClick: link => {
+              alert(link.href)
+            },
+            onUnauthorizedClick: link => {
+              alert(`unauthorized ${link?.href} `)
+            },
+            unauthorizedLinks: ['dataPlatform'],
+            activeLink: 'oversight',
+            links: [
+              { linkId: 'oversight', href: '/oversight' },
+              { linkId: 'dataPlatform', href: '/data-platform' },
+              { linkId: 'customer360', href: '/customer-360' },
+              { linkId: 'predictions', href: '/predictions' },
+              { linkId: 'analytics', href: '/analytics' },
+              { linkId: 'segmentation', href: '/segmentation' },
+            ],
+          }}
+        />
+      </div>
+    )
+  },
+}

src/components/navigation/GlobalNavigation/NotificationCenter.tsx

@@ -1,16 +1,23 @@
 import { Flex, Typography, Space, Button } from 'antd'
-import { type IButtonProps, Icon, type IPopoverProps, Popover } from 'src/components'
+import { Badge, type IButtonProps, Icon, type IPopoverProps, Popover } from 'src/components'
 import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem'
 
 export interface INotificationCenterProps
   extends Omit<IPopoverProps, 'key' | 'trigger' | 'placement' | 'arrow' | 'overlayClassName' | 'title'> {
+  unreadMessages?: number
   onClose?: IButtonProps['onClick']
   onPreferencesClick?: IButtonProps['onClick']
 }
 
 export const NotificationCenterZIndex = 9999
 
-export function NotificationCenter({ zIndex, onClose, onPreferencesClick, ...props }: INotificationCenterProps) {
+export function NotificationCenter({
+  zIndex,
+  onClose,
+  onPreferencesClick,
+  unreadMessages,
+  ...props
+}: INotificationCenterProps) {
   return (
     <Popover
       trigger="click"
@@ -35,7 +42,11 @@ export function NotificationCenter({ zIndex, onClose, onPreferencesClick, ...pro
           key="notificationCenter"
           type="link"
           isActive={props?.open}
-          icon={<Icon name="notification" />}
+          icon={
+            <Badge dot count={Math.max(unreadMessages ?? 0, 0)}>
+              <Icon name="notification" />
+            </Badge>
+          }
         />
       </div>
     </Popover>