feat!: added notifications plugin slot (#641)

feat!: added notifications plugin slot (#641)

Breaking Change: Added notification slot and remove notification tray

Author: muhammadadeeltajamul

package-lock.json

@@ -61,17 +61,12 @@
     "@openedx/frontend-plugin-framework": "^1.2.1",
     "@openedx/paragon": "^21.11.0",
     "@reduxjs/toolkit": "1.9.7",
-    "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
     "classnames": "2.5.1",
     "core-js": "3.40.0",
-    "dompurify": "^3.1.7",
-    "lodash": "4.17.21",
     "react-responsive": "^10.0.0",
     "react-transition-group": "4.4.5",
-    "regenerator-runtime": "0.14.1",
-    "rosie": "2.1.1",
-    "timeago.js": "4.0.2"
+    "regenerator-runtime": "0.14.1"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.1 || ^8.0.0",

package.json

@@ -5,13 +5,12 @@ import { getConfig } from '@edx/frontend-platform';
 import { AvatarButton, Dropdown } from '@openedx/paragon';
 
 // Local Components
+import NotificationsSlot from './plugin-slots/NotificationsSlot';
 import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
 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';
@@ -155,7 +154,6 @@ 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;
@@ -180,8 +178,7 @@ class DesktopHeader extends React.Component {
                 ? (
                   <>
                     {this.renderSecondaryMenu()}
-                    {notificationAppData?.showNotificationsTray
-                     && <Notifications notificationAppData={notificationAppData} showLeftMargin={false} />}
+                    <NotificationsSlot />
                     {this.renderUserMenu()}
                   </>
                 ) : this.renderLoggedOutItems()}
@@ -265,4 +262,4 @@ DesktopHeader.defaultProps = {
   },
 };
 
-export default injectIntl(withNotifications(DesktopHeader));
+export default injectIntl(DesktopHeader);

src/DesktopHeader.jsx

@@ -5,13 +5,13 @@ import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { AvatarButton } from '@openedx/paragon';
+import NotificationsSlot from './plugin-slots/NotificationsSlot';
 import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 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';
 
@@ -136,7 +136,6 @@ class MobileHeader extends React.Component {
       mainMenu,
       userMenu,
       loggedOutItems,
-      notificationAppData,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
@@ -175,7 +174,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} />}
+            <NotificationsSlot />
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
               <MenuTrigger
                 tag={AvatarButton}
@@ -271,4 +270,4 @@ MobileHeader.defaultProps = {
   },
 };
 
-export default injectIntl(withNotifications(MobileHeader));
+export default injectIntl(MobileHeader);