feat: added notification tray icon for learner dashboard (#608)

* feat: added notification tray icon for learner dashboard

* refactor: fixed suggestions and removed showTray state varaible

Author: sundasnoreen12

src/DesktopHeader.jsx

@@ -10,6 +10,8 @@ import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 import UserMenuItem from './common/UserMenuItem';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
+import withNotifications from './Notification/withNotifications';
+import Notifications from './Notification';
 
 // i18n
 import messages from './Header.messages';
@@ -153,6 +155,7 @@ class DesktopHeader extends React.Component {
       logoDestination,
       loggedIn,
       intl,
+      notificationAppData,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
@@ -177,6 +180,8 @@ class DesktopHeader extends React.Component {
                 ? (
                   <>
                     {this.renderSecondaryMenu()}
+                    {notificationAppData?.showNotificationsTray
+                     && <Notifications notificationAppData={notificationAppData} showLeftMargin={false} />}
                     {this.renderUserMenu()}
                   </>
                 ) : this.renderLoggedOutItems()}
@@ -220,7 +225,19 @@ DesktopHeader.propTypes = {
   name: PropTypes.string,
   email: PropTypes.string,
   loggedIn: PropTypes.bool,
-
+  notificationAppData: PropTypes.shape({
+    apps: PropTypes.objectOf(
+      PropTypes.arrayOf(PropTypes.string),
+    ).isRequired,
+    appsId: PropTypes.arrayOf(PropTypes.string).isRequired,
+    isNewNotificationViewEnabled: PropTypes.bool.isRequired,
+    notificationExpiryDays: PropTypes.number.isRequired,
+    notificationStatus: PropTypes.string.isRequired,
+    showNotificationsTray: PropTypes.bool.isRequired,
+    tabsCount: PropTypes.shape({
+      count: PropTypes.number.isRequired,
+    }).isRequired,
+  }),
   // i18n
   intl: intlShape.isRequired,
 };
@@ -237,6 +254,15 @@ DesktopHeader.defaultProps = {
   name: '',
   email: '',
   loggedIn: false,
+  notificationAppData: {
+    apps: { },
+    tabsCount: { },
+    appsId: [],
+    isNewNotificationViewEnabled: false,
+    notificationExpiryDays: 0,
+    notificationStatus: '',
+    showNotificationsTray: false,
+  },
 };
 
-export default injectIntl(DesktopHeader);
+export default injectIntl(withNotifications(DesktopHeader));

src/Header.jsx

@@ -26,13 +26,17 @@ ensureConfig([
   'MARKETING_SITE_BASE_URL',
   'ORDER_HISTORY_URL',
   'LOGO_URL',
+  'ACCOUNT_SETTINGS_URL',
+  'NOTIFICATION_FEEDBACK_URL',
 ], 'Header component');
 
 subscribe(APP_CONFIG_INITIALIZED, () => {
   mergeConfig({
     MINIMAL_HEADER: !!process.env.MINIMAL_HEADER,
     ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME,
     AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
+    ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL,
+    NOTIFICATION_FEEDBACK_URL: process.env.NOTIFICATION_FEEDBACK_URL,
   }, 'Header additional config');
 });
 

src/Header.test.jsx

@@ -7,9 +7,11 @@ import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router-dom';
 
 import { fireEvent, render, screen } from '@testing-library/react';
 import Header from './index';
+import { initializeMockApp } from './setupTest';
 
 jest.mock('@edx/frontend-platform');
 jest.mock('@edx/frontend-enterprise-utils');
@@ -26,22 +28,29 @@ const APP_CONTEXT_CONFIG = {
 };
 
 const HeaderContext = ({ width, contextValue }) => (
-  <ResponsiveContext.Provider value={width}>
-    <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
-    </IntlProvider>
-  </ResponsiveContext.Provider>
+  <MemoryRouter>
+    <ResponsiveContext.Provider value={width}>
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <Header />
+        </AppContext.Provider>
+      </IntlProvider>
+    </ResponsiveContext.Provider>
+  </MemoryRouter>
 );
 
 describe('<Header />', () => {
   beforeEach(() => {
     useEnterpriseConfig.mockReturnValue({});
   });
 
+  beforeAll(async () => {
+    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
+    await initializeMockApp();
+  });
+
   const mockUseEnterpriseConfig = () => {
     useEnterpriseConfig.mockReturnValue({
       enterpriseLearnerPortalLink: {

src/MobileHeader.jsx

@@ -10,7 +10,8 @@ import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
 import UserMenuItem from './common/UserMenuItem';
-
+import withNotifications from './Notification/withNotifications';
+import Notifications from './Notification';
 // i18n
 import messages from './Header.messages';
 
@@ -135,6 +136,7 @@ class MobileHeader extends React.Component {
       mainMenu,
       userMenu,
       loggedOutItems,
+      notificationAppData,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
@@ -173,6 +175,7 @@ class MobileHeader extends React.Component {
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
           <div className="w-100 d-flex justify-content-end align-items-center">
+            {notificationAppData?.showNotificationsTray && <Notifications notificationAppData={notificationAppData} />}
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
               <MenuTrigger
                 tag={AvatarButton}
@@ -227,7 +230,19 @@ MobileHeader.propTypes = {
   email: PropTypes.string,
   loggedIn: PropTypes.bool,
   stickyOnMobile: PropTypes.bool,
-
+  notificationAppData: PropTypes.shape({
+    apps: PropTypes.objectOf(
+      PropTypes.arrayOf(PropTypes.string),
+    ).isRequired,
+    appsId: PropTypes.arrayOf(PropTypes.string).isRequired,
+    isNewNotificationViewEnabled: PropTypes.bool.isRequired,
+    notificationExpiryDays: PropTypes.number.isRequired,
+    notificationStatus: PropTypes.string.isRequired,
+    showNotificationsTray: PropTypes.bool.isRequired,
+    tabsCount: PropTypes.shape({
+      count: PropTypes.number.isRequired,
+    }).isRequired,
+  }),
   // i18n
   intl: intlShape.isRequired,
 };
@@ -245,7 +260,15 @@ MobileHeader.defaultProps = {
   email: '',
   loggedIn: false,
   stickyOnMobile: true,
-
+  notificationAppData: {
+    apps: {},
+    tabsCount: {},
+    appsId: [],
+    isNewNotificationViewEnabled: false,
+    notificationExpiryDays: 0,
+    notificationStatus: '',
+    showNotificationsTray: false,
+  },
 };
 
-export default injectIntl(MobileHeader);
+export default injectIntl(withNotifications(MobileHeader));

src/Notification/NotificationSections.jsx

@@ -56,6 +56,7 @@ const NotificationSections = () => {
               variant="link"
               className="small line-height-10 text-decoration-none p-0 border-0 text-info-500"
               onClick={handleMarkAllAsRead}
+              size="sm"
               data-testid="mark-all-read"
             >
               {intl.formatMessage(messages.notificationMarkAsRead)}

src/Notification/data/hook.js

@@ -177,17 +177,15 @@ export function useNotification() {
 
 export function useAppNotifications() {
   const { authenticatedUser } = useContext(AppContext);
-  const [showTray, setShowTray] = useState();
   const [isNewNotificationView, setIsNewNotificationView] = useState(false);
   const [notificationAppData, setNotificationAppData] = useState();
   const { fetchAppsNotificationCount } = useNotification();
   const location = useLocation();
 
   const fetchNotificationData = useCallback(async () => {
     const data = await fetchAppsNotificationCount();
-    const { showNotificationsTray, isNewNotificationViewEnabled } = data;
+    const { isNewNotificationViewEnabled } = data;
 
-    setShowTray(showNotificationsTray);
     setIsNewNotificationView(isNewNotificationViewEnabled);
     setNotificationAppData(data);
   }, [fetchAppsNotificationCount]);
@@ -202,7 +200,6 @@ export function useAppNotifications() {
   }, [fetchNotificationData, authenticatedUser, location.pathname]);
 
   return {
-    showTray,
     isNewNotificationView,
     notificationAppData,
   };

src/Notification/withNotifications.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { useAppNotifications } from './data/hook';
+
+export default function withNotifications(Component) {
+  return function WrapperComponent(props) {
+    const { notificationAppData } = useAppNotifications();
+    return <Component {...props} notificationAppData={notificationAppData} />;
+  };
+}

src/learning-header/AuthenticatedUser.jsx

@@ -31,11 +31,11 @@ const AuthenticatedUser = ({
   enterpriseLearnerPortalLink,
 }) => {
   const { authenticatedUser } = useContext(AppContext);
-  const { showTray, notificationAppData } = useAppNotifications();
+  const { notificationAppData } = useAppNotifications();
 
   return (
     <BaseAuthenticatedUser>
-      {showTray && <Notifications notificationAppData={notificationAppData} />}
+      {notificationAppData?.showNotificationsTray && <Notifications notificationAppData={notificationAppData} />}
       {showUserDropdown && (
         <AuthenticatedUserDropdown
           enterpriseLearnerPortalLink={enterpriseLearnerPortalLink}