feat: add notification center (#416)

Co-authored-by: Gabriel Tiburcio <v-gtiburcio@mparticle.com>
Co-authored-by: mparticle-automation <developers@mparticle.com>
Co-authored-by: Leobel Izquierdo <v-lizquierdo@mparticle.com>

CHANGELOG.md

@@ -1,3 +1,35 @@
+# [1.31.0-nav-disabled-interactions-poc.8](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.7...v1.31.0-nav-disabled-interactions-poc.8) (2024-09-16)
+
+### Bug Fixes
+
+- add Drawer component back ([4703322](https://github.com/mParticle/aquarium/commit/4703322b2cd0d836b0e2e63a7b7661f85ff32533))
+
+# [1.31.0-nav-disabled-interactions-poc.7](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.6...v1.31.0-nav-disabled-interactions-poc.7) (2024-09-16)
+
+# [1.31.0-nav-disabled-interactions-poc.6](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.5...v1.31.0-nav-disabled-interactions-poc.6) (2024-09-16)
+
+# [1.31.0-nav-disabled-interactions-poc.5](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.4...v1.31.0-nav-disabled-interactions-poc.5) (2024-09-13)
+
+# [1.31.0-nav-disabled-interactions-poc.4](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.3...v1.31.0-nav-disabled-interactions-poc.4) (2024-09-13)
+
+### Bug Fixes
+
+- avoid nested anchor when child is button ([1e179fa](https://github.com/mParticle/aquarium/commit/1e179fad102726029691f12582f5d7e0a4beed16))
+
+# [1.31.0-nav-disabled-interactions-poc.3](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.2...v1.31.0-nav-disabled-interactions-poc.3) (2024-09-13)
+
+# [1.31.0-nav-disabled-interactions-poc.2](https://github.com/mParticle/aquarium/compare/v1.31.0-nav-disabled-interactions-poc.1...v1.31.0-nav-disabled-interactions-poc.2) (2024-09-12)
+
+# [1.31.0-nav-disabled-interactions-poc.1](https://github.com/mParticle/aquarium/compare/v1.30.3...v1.31.0-nav-disabled-interactions-poc.1) (2024-09-12)
+
+### Bug Fixes
+
+- add more icon ([#403](https://github.com/mParticle/aquarium/issues/403)) ([3abc3b7](https://github.com/mParticle/aquarium/commit/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf))
+
+### Features
+
+- testing a disabled state to validate notifications project requirements ([440150c](https://github.com/mParticle/aquarium/commit/440150c3458d88873a058ad2755f73f59ca45e4b))
+
 ## [1.30.3](https://github.com/mParticle/aquarium/compare/v1.30.2...v1.30.3) (2024-09-10)
 
 ### Bug Fixes

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

@@ -1,12 +1,16 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, fn, screen, userEvent } from '@storybook/test'
 import React, { useState } from 'react'
-import { Button, Center, Flex, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components'
+import { Button, Center, Flex, GlobalNavigation, Icon, type INavigationCreateProps, Modal, Space } from 'src/components'
 import { Badge } from 'src/components/data-display/Badge/Badge'
 import {
   type IGlobalNavigationItem,
   type IGlobalNavigationLogo,
 } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import {
+  type INotificationCenterProps,
+  NotificationCenterZIndex,
+} from 'src/components/navigation/GlobalNavigation/NotificationCenter'
 import { generateOrgs } from 'src/components/navigation/GlobalNavigation/stories-utils'
 import { type INavigationOrg } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems'
 import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNewExperienceReminder'
@@ -113,6 +117,13 @@ const defaultOrgs: INavigationOrg[] = [
   },
 ]
 
+const defaultNotificationCenter: INotificationCenterProps = {
+  open: false,
+  content: () => <div></div>,
+  onClose: () => {},
+  onPreferencesClick: () => {},
+}
+
 const meta: Meta<typeof GlobalNavigation> = {
   title: 'Aquarium/Navigation/GlobalNavigation',
   component: props => (
@@ -126,6 +137,7 @@ const meta: Meta<typeof GlobalNavigation> = {
     tools: defaultTools,
     management: defaultManagement,
     orgs: defaultOrgs,
+    notificationCenter: defaultNotificationCenter,
     navigationButtonItemOptions: {
       label: 'Sign Out of mParticle',
       onClick: () => {
@@ -136,6 +148,17 @@ const meta: Meta<typeof GlobalNavigation> = {
       alert('Going to mP!')
     },
   },
+
+  argTypes: {
+    notificationCenter: {
+      content: {
+        control: 'string',
+        table: {
+          type: { summary: 'ReactNode or RenderFunction to render the content' },
+        },
+      },
+    },
+  },
 }
 export default meta
 
@@ -1296,3 +1319,246 @@ export const MPWithSuiteSelector: Story = {
     },
   },
 }
+
+export const MPWithNotificationCenter: Story = {
+  render: props => {
+    const [isNotificationCenterOpen, setIsNotificationCenterOpen] = useState(false)
+    return (
+      <div>
+        <GlobalNavigation
+          {...props}
+          notificationCenter={{
+            open: isNotificationCenterOpen,
+            onOpenChange: (newOpen: boolean) => {
+              setIsNotificationCenterOpen(newOpen)
+            },
+            content: () => (
+              <div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+              </div>
+            ),
+          }}
+          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>
+    )
+  },
+}
+
+export const MPWithNotificationCenterLongContent: Story = {
+  render: props => {
+    const [isNotificationCenterOpen, setIsNotificationCenterOpen] = useState(false)
+    return (
+      <div>
+        <GlobalNavigation
+          {...props}
+          notificationCenter={{
+            open: isNotificationCenterOpen,
+            onOpenChange: (newOpen: boolean) => {
+              setIsNotificationCenterOpen(newOpen)
+            },
+            content: () => (
+              <div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content</div>
+                <div>Content End</div>
+              </div>
+            ),
+          }}
+          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>
+    )
+  },
+}
+
+export const MPWithNotificationCenterMessageModal: Story = {
+  render: props => {
+    const [isNotificationCenterOpen, setIsNotificationCenterOpen] = useState(false)
+    const [isModalOpen, setIsModalOpen] = useState(false)
+    const [zIndex, setZIndex] = useState(NotificationCenterZIndex)
+    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>Message Description</p>
+          </div>
+        </Modal>
+        <GlobalNavigation
+          {...props}
+          notificationCenter={{
+            open: isNotificationCenterOpen,
+            zIndex: zIndex,
+            onOpenChange: (newOpen: boolean) => {
+              if (isModalOpen) {
+                return
+              }
+              setIsNotificationCenterOpen(newOpen)
+            },
+            content: () => (
+              <div>
+                <div
+                  onClick={() => {
+                    setZIndex(0)
+                    setIsModalOpen(true)
+                  }}>
+                  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/GlobalNavigation.tsx

@@ -22,6 +22,15 @@ import {
 import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem'
 import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNewExperienceReminder'
 import { HomeButton } from 'src/components/navigation/GlobalNavigation/HomeButton'
+import {
+  NotificationCenter,
+  type INotificationCenterProps,
+} from 'src/components/navigation/GlobalNavigation/NotificationCenter'
+
+export interface NotificationActions {
+  onClose?: () => void
+  onPreferencesClick?: () => void
+}
 
 export interface IGlobalNavigationProps {
   logo: IGlobalNavigationLogo
@@ -46,6 +55,7 @@ export interface IGlobalNavigationProps {
    * This will be removed once all the apps updated.
    */
   minimapOptions?: ISuiteSelectorOptions
+  notificationCenter?: INotificationCenterProps
 }
 
 export const GlobalNavWidth = 90 as const
@@ -69,6 +79,7 @@ export const GlobalNavigation = ({ showSuiteLogo = true, ...props }: IGlobalNavi
             <NavigationList items={props.tools} />
           </div>
           <div>
+            {props.notificationCenter && <NotificationCenter {...props.notificationCenter} />}
             <NavigationList items={props.management} />
             {props.orgs ? (
               <WorkspaceSelector

src/components/navigation/GlobalNavigation/NavigationList.tsx

@@ -34,11 +34,10 @@ function generateMenuItem(item: IGlobalNavigationItem, i: number) {
     { label: item.label, type: 'group', key: String(item.label) + '_groupTitle' },
   ]
   if (item.type === 'menu') {
-    const childrenWithExpandedIcons = item.children.map((child, index) => ({
+    const childrenWithExpandedIcons = item.children.map(({ hrefOptions, ...child }, index) => ({
       ...child,
-      expandIcon: null,
       key: `${String(child.label)}${index}`,
-      label: buildLinkFromHrefOptions(child.label, child.hrefOptions),
+      label: child.type === 'button' ? child.label : buildLinkFromHrefOptions(child.label, hrefOptions),
     }))
 
     childrenWithExpandedIcons.forEach((child, index) => {