feat: deprecate notification tray in learning header

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -6,26 +6,10 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
-import { useSelector, useDispatch } from 'react-redux';
-import Notifications from '../Notifications';
-import { selectShowNotificationTray, selectNotificationStatus } from '../Notifications/data/selectors';
-import { fetchAppsNotificationCount } from '../Notifications/data/thunks';
-import { RequestStatus } from '../Notifications/data/slice';
 
 import messages from './messages';
 
 const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const showNotificationsTray = useSelector(selectShowNotificationTray());
-  const notificationStatus = useSelector(selectNotificationStatus());
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (notificationStatus === RequestStatus.IDLE) {
-      dispatch(fetchAppsNotificationCount());
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -35,7 +19,6 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   return (
     <>
       <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      {showNotificationsTray && <Notifications />}
       <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />

src/learning-header/LearningHeader.jsx

@@ -2,12 +2,11 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
-import store from '../store';
 
 const LinkedLogo = ({
   href,
@@ -41,26 +40,24 @@ const LearningHeader = ({
   );
 
   return (
-    <AppProvider store={store}>
-      <header className="learning-header">
-        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-        <div className="container-xl py-2 d-flex align-items-center">
-          {headerLogo}
-          <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-            <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-            <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
-          </div>
-          {showUserDropdown && authenticatedUser && (
-            <AuthenticatedUserDropdown
-              username={authenticatedUser.username}
-            />
-          )}
-          {showUserDropdown && !authenticatedUser && (
-            <AnonymousUserMenu />
-          )}
+    <header className="learning-header">
+      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+      <div className="container-xl py-2 d-flex align-items-center">
+        {headerLogo}
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
         </div>
-      </header>
-    </AppProvider>
+        {showUserDropdown && authenticatedUser && (
+        <AuthenticatedUserDropdown
+          username={authenticatedUser.username}
+        />
+        )}
+        {showUserDropdown && !authenticatedUser && (
+        <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
   );
 };