Revert "feat: added notification tray for common header/learner dashboard (#592)" (#594)

This reverts commit 82d3c19.

Author: jsnwesson

src/DesktopHeader.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import { AvatarButton, Dropdown } from '@openedx/paragon';
@@ -12,8 +10,6 @@ import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 import UserMenuItem from './common/UserMenuItem';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
-import Notifications from './Notifications';
-import { mapDispatchToProps, mapStateToProps } from './data/selectors';
 
 // i18n
 import messages from './Header.messages';
@@ -24,20 +20,6 @@ import { CaretIcon } from './Icons';
 class DesktopHeader extends React.Component {
   constructor(props) { // eslint-disable-line no-useless-constructor
     super(props);
-    this.state = {
-      locationHref: window.location.href,
-    };
-  }
-
-  componentDidMount() {
-    this.props.fetchAppsNotificationCount();
-  }
-
-  componentDidUpdate() {
-    if (window.location.href !== this.state.locationHref) {
-      this.setState({ locationHref: window.location.href });
-      this.props.fetchAppsNotificationCount();
-    }
   }
 
   renderMenu(menu) {
@@ -170,7 +152,6 @@ class DesktopHeader extends React.Component {
       logoAltText,
       logoDestination,
       loggedIn,
-      showNotificationsTray,
       intl,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
@@ -196,7 +177,6 @@ class DesktopHeader extends React.Component {
                 ? (
                   <>
                     {this.renderSecondaryMenu()}
-                    {showNotificationsTray && <Notifications showLeftMargin={false} />}
                     {this.renderUserMenu()}
                   </>
                 ) : this.renderLoggedOutItems()}
@@ -240,8 +220,7 @@ DesktopHeader.propTypes = {
   name: PropTypes.string,
   email: PropTypes.string,
   loggedIn: PropTypes.bool,
-  showNotificationsTray: PropTypes.bool,
-  fetchAppsNotificationCount: PropTypes.func.isRequired,
+
   // i18n
   intl: intlShape.isRequired,
 };
@@ -258,7 +237,6 @@ DesktopHeader.defaultProps = {
   name: '',
   email: '',
   loggedIn: false,
-  showNotificationsTray: false,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DesktopHeader));
+export default injectIntl(DesktopHeader);

src/Header.jsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import { AppContext } from '@edx/frontend-platform/react';
 import { Badge } from '@openedx/paragon';
 import {
   APP_CONFIG_INITIALIZED,
@@ -16,7 +16,6 @@ import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
 import PropTypes from 'prop-types';
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
-import store from './store';
 
 import messages from './Header.messages';
 
@@ -27,17 +26,13 @@ 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');
 });
 
@@ -199,14 +194,14 @@ const Header = ({
   }
 
   return (
-    <AppProvider store={store} wrapWithRouter={false}>
+    <>
       <Responsive maxWidth={769}>
         <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
         <DesktopHeader {...props} />
       </Responsive>
-    </AppProvider>
+    </>
   );
 };
 

src/Header.test.jsx

@@ -7,9 +7,8 @@ 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 { fireEvent, render, screen } from '@testing-library/react';
 
-import { initializeMockApp } from './setupTest';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Header from './index';
 
 jest.mock('@edx/frontend-platform');
@@ -42,10 +41,6 @@ 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({

src/MobileHeader.jsx

@@ -1,19 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import { AvatarButton } from '@openedx/paragon';
 
 // Local Components
+import { AvatarButton } from '@openedx/paragon';
 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 Notifications from './Notifications';
-import { mapDispatchToProps, mapStateToProps } from './data/selectors';
+
 // i18n
 import messages from './Header.messages';
 
@@ -23,20 +20,6 @@ import { MenuIcon } from './Icons';
 class MobileHeader extends React.Component {
   constructor(props) { // eslint-disable-line no-useless-constructor
     super(props);
-    this.state = {
-      locationHref: window.location.href,
-    };
-  }
-
-  componentDidMount() {
-    this.props.fetchAppsNotificationCount();
-  }
-
-  componentDidUpdate() {
-    if (window.location.href !== this.state.locationHref) {
-      this.setState({ locationHref: window.location.href });
-      this.props.fetchAppsNotificationCount();
-    }
   }
 
   renderMenu(menu) {
@@ -152,7 +135,6 @@ class MobileHeader extends React.Component {
       mainMenu,
       userMenu,
       loggedOutItems,
-      showNotificationsTray,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
@@ -191,7 +173,6 @@ class MobileHeader extends React.Component {
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
           <div className="w-100 d-flex justify-content-end align-items-center">
-            {showNotificationsTray && loggedIn && <Notifications />}
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
               <MenuTrigger
                 tag={AvatarButton}
@@ -246,8 +227,7 @@ MobileHeader.propTypes = {
   email: PropTypes.string,
   loggedIn: PropTypes.bool,
   stickyOnMobile: PropTypes.bool,
-  showNotificationsTray: PropTypes.bool,
-  fetchAppsNotificationCount: PropTypes.func.isRequired,
+
   // i18n
   intl: intlShape.isRequired,
 };
@@ -265,7 +245,7 @@ MobileHeader.defaultProps = {
   email: '',
   loggedIn: false,
   stickyOnMobile: true,
-  showNotificationsTray: false,
+
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MobileHeader));
+export default injectIntl(MobileHeader);

src/Notifications/index.jsx

@@ -6,7 +6,6 @@ import React, {
 
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -27,7 +26,7 @@ import NotificationTabs from './NotificationTabs';
 
 import './notification.scss';
 
-const Notifications = ({ showLeftMargin }) => {
+const Notifications = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const popoverRef = useRef(null);
@@ -145,9 +144,7 @@ const Notifications = ({ showLeftMargin }) => {
             iconAs={Icon}
             variant="light"
             iconClassNames="text-primary-500"
-            className={classNames('mr-1 notification-button', {
-              'ml-4': showLeftMargin,
-            })}
+            className="ml-4 mr-1 notification-button"
             data-testid="notification-bell-icon"
           />
           {notificationCounts?.count > 0 && (
@@ -171,12 +168,4 @@ const Notifications = ({ showLeftMargin }) => {
   );
 };
 
-Notifications.propTypes = {
-  showLeftMargin: PropTypes.bool,
-};
-
-Notifications.defaultProps = {
-  showLeftMargin: true,
-};
-
 export default Notifications;