fix: add an explicit dependency on ts-jest to get tests passing

.github/workflows/ci.yml

@@ -9,10 +9,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [20, 24]
-    continue-on-error: ${{ matrix.node == 24 }}
     steps:
     - name: Checkout
       uses: actions/checkout@v4
@@ -21,7 +17,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

README.rst

@@ -35,7 +35,6 @@ Requirements
 
 This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx>`_
 
-As of version 7.x, consuming applications must support typescript.
 
 Environment Variables
 ====================
@@ -191,4 +190,4 @@ Please do not report security issues in public. Please email security@openedx.or
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release

package.json

@@ -14,7 +14,6 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage",
-    "test:dev": "fedx-scripts jest --watchAll",
     "types": "tsc --noEmit"
   },
   "files": [
@@ -40,7 +39,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^16.2.0",
-    "jest": "30.1.3",
+    "jest": "30.0.4",
     "jest-environment-jsdom": "^30.0.0",
     "prop-types": "15.8.1",
     "react": "^18.3.1",
@@ -49,7 +48,8 @@
     "react-router-dom": "6.30.1",
     "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.3.0",
+    "ts-jest": "^29.4.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -71,4 +71,3 @@
     "react-router-dom": "^6.14.2"
   }
 }
-

src/Header.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   APP_CONFIG_INITIALIZED,
@@ -47,10 +47,9 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  * See the documentation for the structure of user menu item.
  */
 const Header = ({
-  mainMenuItems, secondaryMenuItems, userMenuItems,
+  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
-  const intl = useIntl();
 
   const defaultMainMenu = [
     {
@@ -140,6 +139,7 @@ Header.defaultProps = {
 };
 
 Header.propTypes = {
+  intl: intlShape.isRequired,
   mainMenuItems: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.array,
@@ -159,4 +159,4 @@ Header.propTypes = {
   })),
 };
 
-export default Header;
+export default injectIntl(Header);

src/desktop-header/DesktopHeader.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
-import DesktopUserMenuToggleSlot
-  from '../plugin-slots/DesktopUserMenuToggleSlot';
 import { Menu, MenuTrigger, MenuContent } from '../Menu';
+import Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot';
 import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems';
@@ -20,74 +19,94 @@ import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
 import messages from '../Header.messages';
 
 // Assets
+import { CaretIcon } from '../Icons';
 
-const DesktopHeader = ({
-  mainMenu,
-  secondaryMenu,
-  userMenu,
-  loggedOutItems,
-  logo,
-  logoAltText,
-  logoDestination,
-  avatar,
-  username,
-  loggedIn,
-}) => {
-  const intl = useIntl();
+class DesktopHeader extends React.Component {
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
+    super(props);
+  }
 
-  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+    return <DesktopMainMenuSlot menu={mainMenu} />;
+  }
 
-  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
+  renderSecondaryMenu() {
+    const { secondaryMenu } = this.props;
+    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
+  }
 
-  const renderUserMenu = () => (
-    <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-      <MenuTrigger
-        tag="button"
-        aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-        className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-      >
-        <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
-      </MenuTrigger>
-      <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-        <DesktopUserMenuSlot menu={userMenu} />
-      </MenuContent>
-    </Menu>
-  );
+  renderUserMenu() {
+    const {
+      userMenu,
+      avatar,
+      username,
+      intl,
+    } = this.props;
 
-  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger
+          tag="button"
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+        >
+          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          <DesktopUserMenuSlot menu={userMenu} />
+        </MenuContent>
+      </Menu>
+    );
+  }
 
-  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
+  }
 
-  return (
-    <header className="site-header-desktop">
-      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-      <div className={`container-fluid ${logoClasses}`}>
-        <div className="nav-container position-relative d-flex align-items-center">
-          <LogoSlot {...logoProps} />
-          <nav
-            aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-            className="nav main-nav"
-          >
-            {renderMainMenu()}
-          </nav>
-          <nav
-            aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-            className="nav secondary-menu-container align-items-center ml-auto"
-          >
-            {loggedIn
-              ? (
-                <>
-                  {renderSecondaryMenu()}
-                  {renderUserMenu()}
-                </>
-              ) : renderLoggedOutItems()}
-          </nav>
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      intl,
+    } = this.props;
+    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+
+    return (
+      <header className="site-header-desktop">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        <div className={`container-fluid ${logoClasses}`}>
+          <div className="nav-container position-relative d-flex align-items-center">
+            <LogoSlot {...logoProps} />
+            <nav
+              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+              className="nav main-nav"
+            >
+              {this.renderMainMenu()}
+            </nav>
+            <nav
+              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+              className="nav secondary-menu-container align-items-center ml-auto"
+            >
+              {loggedIn
+                ? (
+                  <>
+                    {this.renderSecondaryMenu()}
+                    {this.renderUserMenu()}
+                  </>
+                ) : this.renderLoggedOutItems()}
+            </nav>
+          </div>
         </div>
-      </div>
-    </header>
-  );
-};
+      </header>
+    );
+  }
+}
 
 export const desktopHeaderDataShape = {
   mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -104,15 +123,18 @@ export const desktopHeaderDataShape = {
 
 DesktopHeader.propTypes = {
   mainMenu: desktopHeaderDataShape.mainMenu,
-  secondaryMenu: desktopHeaderDataShape.secondaryMenu,
-  userMenu: desktopHeaderDataShape.userMenu,
-  loggedOutItems: desktopHeaderDataShape.loggedOutItems,
-  logo: desktopHeaderDataShape.logo,
-  logoAltText: desktopHeaderDataShape.logoAltText,
-  logoDestination: desktopHeaderDataShape.logoDestination,
-  avatar: desktopHeaderDataShape.avatar,
-  username: desktopHeaderDataShape.username,
-  loggedIn: desktopHeaderDataShape.loggedIn,
+  secondaryMenu: desktopHeaderDataShape.secondaryMenumainMenu,
+  userMenu: desktopHeaderDataShape.userMenumainMenu,
+  loggedOutItems: desktopHeaderDataShape.loggedOutItemsmainMenu,
+  logo: desktopHeaderDataShape.logomainMenu,
+  logoAltText: desktopHeaderDataShape.logoAltTextmainMenu,
+  logoDestination: desktopHeaderDataShape.logoDestinationmainMenu,
+  avatar: desktopHeaderDataShape.avatarmainMenu,
+  username: desktopHeaderDataShape.usernamemainMenu,
+  loggedIn: desktopHeaderDataShape.loggedInmainMenu,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 DesktopHeader.defaultProps = {
@@ -128,4 +150,4 @@ DesktopHeader.defaultProps = {
   loggedIn: false,
 };
 
-export default DesktopHeader;
+export default injectIntl(DesktopHeader);

src/desktop-header/DesktopUserMenuToggle.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CaretIcon } from '../Icons';
-import Avatar from '../Avatar';
-
-const DesktopUserMenuToggle = ({ avatar, label }) => (
-  <>
-    <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-    {label} <CaretIcon role="img" aria-hidden focusable="false" />
-  </>
-);
-
-export const DesktopUserMenuTogglePropTypes = {
-  avatar: PropTypes.string,
-  label: PropTypes.string,
-};
-
-DesktopUserMenuToggle.propTypes = DesktopUserMenuTogglePropTypes;
-
-export default DesktopUserMenuToggle;

src/learning-header/AnonymousUserMenu.jsx

@@ -2,13 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';
 
 import genericMessages from '../generic/messages';
 
-const AnonymousUserMenu = () => {
-  const intl = useIntl();
+const AnonymousUserMenu = ({ intl }) => {
   const buttonsInfo = [
     {
       message: intl.formatMessage(genericMessages.registerSentenceCase),
@@ -24,4 +23,8 @@ const AnonymousUserMenu = () => {
   return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
 };
 
-export default AnonymousUserMenu;
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
-import LearningUserMenuToggleSlot from '../plugin-slots/LearningUserMenuToggleSlot';
 import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ username }) => {
-  const intl = useIntl();
+const AuthenticatedUserDropdown = ({ intl, username }) => {
   const dropdownItems = [
     {
       message: intl.formatMessage(messages.dashboard),
@@ -39,7 +38,10 @@ const AuthenticatedUserDropdown = ({ username }) => {
   return (
     <Dropdown className="user-dropdown ml-3">
       <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
-        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
+        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+        <span data-hj-suppress className="d-none d-md-inline">
+          {username}
+        </span>
       </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <LearningUserMenuSlot items={dropdownItems} />
@@ -49,7 +51,8 @@ const AuthenticatedUserDropdown = ({ username }) => {
 };
 
 AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
 };
 
-export default AuthenticatedUserDropdown;
+export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
@@ -13,12 +13,8 @@ import messages from './messages';
 import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
 
 const LearningHeader = ({
-  courseOrg,
-  courseNumber,
-  courseTitle,
-  showUserDropdown,
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
 }) => {
-  const intl = useIntl();
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
@@ -57,6 +53,7 @@ LearningHeader.propTypes = {
   courseOrg: courseInfoDataShape.courseOrg,
   courseNumber: courseInfoDataShape.courseNumber,
   courseTitle: courseInfoDataShape.courseTitle,
+  intl: intlShape.isRequired,
   showUserDropdown: PropTypes.bool,
 };
 
@@ -67,4 +64,4 @@ LearningHeader.defaultProps = {
   showUserDropdown: true,
 };
 
-export default LearningHeader;
+export default injectIntl(LearningHeader);

src/learning-header/LearningUserMenuToggle.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import PropTypes from 'prop-types';
-
-const LearningUserMenuToggle = ({
-  label,
-  icon,
-}) => (
-  <>
-    <FontAwesomeIcon icon={icon} className="d-md-none" size="lg" />
-    <span data-hj-suppress className="d-none d-md-inline">
-      {label}
-    </span>
-  </>
-);
-
-export const LearningUserMenuTogglePropTypes = {
-  label: PropTypes.string.isRequired,
-  // Full shape available by examining @fortawesome/fontawesome-common-types/index.d.ts.
-  icon: PropTypes.shape({
-    prefix: PropTypes.string.isRequired,
-    iconName: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-LearningUserMenuToggle.propTypes = LearningUserMenuTogglePropTypes;
-
-export default LearningUserMenuToggle;

src/mobile-header/MobileHeader.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
-import MobileUserMenuToggleSlot from '../plugin-slots/MobileUserMenuToggleSlot';
 import { Menu, MenuTrigger, MenuContent } from '../Menu';
+import Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import MobileLoggedOutItemsSlot from '../plugin-slots/MobileLoggedOutItemsSlot';
 import { mobileHeaderLoggedOutItemsDataShape } from './MobileLoggedOutItems';
@@ -20,84 +20,96 @@ import messages from '../Header.messages';
 // Assets
 import { MenuIcon } from '../Icons';
 
-const MobileHeader = ({
-  mainMenu,
-  secondaryMenu,
-  userMenu,
-  loggedOutItems,
-  logo,
-  logoAltText,
-  logoDestination,
-  avatar,
-  username,
-  loggedIn,
-  stickyOnMobile,
-}) => {
-  const intl = useIntl();
+class MobileHeader extends React.Component {
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
+    super(props);
+  }
 
-  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
+  renderMainMenu() {
+    const { mainMenu, secondaryMenu } = this.props;
+    return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
+  }
 
-  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;
+  renderUserMenuItems() {
+    const { userMenu } = this.props;
+    return <MobileUserMenuSlot menu={userMenu} />;
+  }
 
-  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+    return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
+  }
 
-  const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      avatar,
+      username,
+      stickyOnMobile,
+      intl,
+      mainMenu,
+      userMenu,
+      loggedOutItems,
+    } = this.props;
+    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
 
-  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-  const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
+    return (
+      <header
+        aria-label={intl.formatMessage(messages['header.label.main.header'])}
+        className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
+      >
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        {mainMenu.length > 0 ? (
+          <div className="w-100 d-flex justify-content-start">
 
-  return (
-    <header
-      aria-label={intl.formatMessage(messages['header.label.main.header'])}
-      className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
-    >
-      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-      {mainMenu.length > 0 ? (
-        <div className="w-100 d-flex justify-content-start">
-
-          <Menu className="position-static">
-            <MenuTrigger
-              tag="button"
-              className="icon-button"
-              aria-label={intl.formatMessage(messages['header.label.main.menu'])}
-              title={intl.formatMessage(messages['header.label.main.menu'])}
-            >
-              <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
-            </MenuTrigger>
-            <MenuContent
-              tag="nav"
-              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-              className="nav flex-column pin-left pin-right border-top shadow py-2"
-            >
-              {renderMainMenu()}
-            </MenuContent>
-          </Menu>
+            <Menu className="position-static">
+              <MenuTrigger
+                tag="button"
+                className="icon-button"
+                aria-label={intl.formatMessage(messages['header.label.main.menu'])}
+                title={intl.formatMessage(messages['header.label.main.menu'])}
+              >
+                <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
+              </MenuTrigger>
+              <MenuContent
+                tag="nav"
+                aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+                className="nav flex-column pin-left pin-right border-top shadow py-2"
+              >
+                {this.renderMainMenu()}
+              </MenuContent>
+            </Menu>
+          </div>
+        ) : null}
+        <div className={`w-100 d-flex ${logoClasses}`}>
+          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
         </div>
-      ) : null}
-      <div className={`w-100 d-flex ${logoClasses}`}>
-        <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
-      </div>
-      {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-        <div className="w-100 d-flex justify-content-end align-items-center">
-          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-            <MenuTrigger
-              tag="button"
-              className="icon-button"
-              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-              title={intl.formatMessage(messages['header.label.account.menu'])}
-            >
-              {renderUserMenuToggle()}
-            </MenuTrigger>
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-              {loggedIn ? renderUserMenuItems() : renderLoggedOutItems()}
-            </MenuContent>
-          </Menu>
-        </div>
-      ) : null}
-    </header>
-  );
-};
+        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+          <div className="w-100 d-flex justify-content-end align-items-center">
+            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+              <MenuTrigger
+                tag="button"
+                className="icon-button"
+                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+                title={intl.formatMessage(messages['header.label.account.menu'])}
+              >
+                <Avatar size="1.5rem" src={avatar} alt={username} />
+              </MenuTrigger>
+              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+              </MenuContent>
+            </Menu>
+          </div>
+        ) : null}
+      </header>
+    );
+  }
+}
 
 export const mobileHeaderDataShape = {
   mainMenu: mobileHeaderMainMenuDataShape,
@@ -125,6 +137,9 @@ MobileHeader.propTypes = {
   username: mobileHeaderDataShape.username,
   loggedIn: mobileHeaderDataShape.loggedIn,
   stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 MobileHeader.defaultProps = {
@@ -142,4 +157,4 @@ MobileHeader.defaultProps = {
 
 };
 
-export default MobileHeader;
+export default injectIntl(MobileHeader);

src/mobile-header/MobileUserMenuToggle.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Avatar from '../Avatar';
-
-const MobileUserMenuToggle = ({ avatar, username }) => <Avatar size="1.5rem" src={avatar} alt={username} />;
-
-export const MobileUserMenuTogglePropTypes = {
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-};
-
-MobileUserMenuToggle.propTypes = MobileUserMenuTogglePropTypes;
-
-export default MobileUserMenuToggle;

src/plugin-slots/DesktopHeaderSlot/README.md

@@ -41,4 +41,4 @@ const config = {
 }
 
 export default config;
-```
+```

src/plugin-slots/DesktopUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# Desktop User Menu Toggle Slot
-
-### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the contents of the user menu toggle button on desktop sized screens.
-
-## Examples
-
-### Modify Label Text
-
-The following `env.config.jsx` will modify the label text to be something more generic:
-
-![Screenshot of modified label](./images/desktop_user_menu_modified_toggle.png)
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import { faHouse } from '@fortawesome/free-solid-svg-icons';
-
-const modifyUserMenuToggle = ( widget ) => {
-  widget.content.label = "My Profile";
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: modifyUserMenuToggle,
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
-
-### Replace Menu toggle contents with Custom Component
-
-The following `env.config.jsx` will replace the contents of the learning user menu toggle button entirely (in this case with an emoji)
-
-![Screenshot of replaced with custom component](./images/desktop_user_menu_custom_component.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_desktop_user_menu_toggle',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <span>🦊</span>
-            ),
-          },
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```

src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';
-
-const DesktopUserMenuToggleSlot = ({
-  avatar,
-  label,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <DesktopUserMenuToggle avatar={avatar} label={label} />
-  </PluginSlot>
-);
-
-DesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;
-
-export default DesktopUserMenuToggleSlot;

src/plugin-slots/LearningUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# Learning User Menu Toggle Slot
-
-### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the contents of the learning user menu toggle button.
-
-## Examples
-
-### Modify Icon
-
-The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.
-
-![Screenshot of modified items](./images/learning_user_menu_toggle_modified_items.png)
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import { faHouse } from '@fortawesome/free-solid-svg-icons';
-
-const modifyUserMenuToggle = ( widget ) => {
-  widget.content.icon = faHouse;
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: modifyUserMenuToggle,
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
-
-### Replace Menu toggle contents with Custom Component
-
-The following `env.config.jsx` will replace the contents of the learning user menu toggle button's contents entirely (in this case with an emoji)
-
-![Screenshot of replaced with custom component](./images/learning_user_menu_toggle_custom_component.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_learning_user_menu_toggle',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <span>🦊</span>
-            ),
-          },
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```

src/plugin-slots/LearningUserMenuToggleSlot/index.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import LearningUserMenuToggle, {
-  LearningUserMenuTogglePropTypes,
-} from '../../learning-header/LearningUserMenuToggle';
-
-const LearningUserMenuToggleSlot = ({
-  label, icon,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_learning_user_menu_toggle.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <LearningUserMenuToggle label={label} icon={icon} />
-  </PluginSlot>
-);
-
-LearningUserMenuToggleSlot.propTypes = LearningUserMenuTogglePropTypes;
-
-export default LearningUserMenuToggleSlot;

src/plugin-slots/MobileUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# Mobile User Menu Toggle Slot
-
-### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the contents of the user menu toggle button on mobile screens.
-
-## Examples
-
-### Modify Avatar
-
-The following `env.config.jsx` will modify the icon for the user menu toggle button on mobile.
-
-![Screenshot of modified items](./images/mobile_user_menu_toggle_modified_items.png)
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const modifyUserMenuToggle = ( widget ) => {
-  // Shows a dummy image with the resolution marker '30x30'.
-  widget.content.avatar = "https://dummyimage.com/30x30"
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: modifyUserMenuToggle,
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
-
-### Replace Menu toggle contents with Custom Component
-
-The following `env.config.jsx` will replace the contents of the user menu toggle button's contents entirely (in this case with an emoji).
-
-![Screenshot of replaced with custom component](./images/mobile_user_menu_toggle_custom_component.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_mobile_user_menu_toggle',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <span>🦊</span>
-            ),
-          },
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```

src/plugin-slots/MobileUserMenuToggleSlot/index.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import MobileUserMenuToggle, {
-  MobileUserMenuTogglePropTypes,
-} from '../../mobile-header/MobileUserMenuToggle';
-
-const MobileUserMenuToggleSlot = ({
-  avatar,
-  label,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <MobileUserMenuToggle avatar={avatar} label={label} />
-  </PluginSlot>
-);
-
-MobileUserMenuToggleSlot.propTypes = MobileUserMenuTogglePropTypes;
-
-export default MobileUserMenuToggleSlot;

src/plugin-slots/README.md

@@ -9,18 +9,15 @@
 * [`org.openedx.frontend.layout.header_desktop_main_menu.v1`](./DesktopMainMenuSlot/)
 * [`org.openedx.frontend.layout.header_desktop_secondary_menu.v1`](./DesktopSecondaryMenuSlot/)
 * [`org.openedx.frontend.layout.header_desktop_user_menu.v1`](./DesktopUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`](./DesktopUserMenuToggleSlot/)
 
 ### Learning Header
 * [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
 * [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
 * [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
 * [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
 
 ### Mobile Header
 * [`org.openedx.frontend.layout.header_mobile.v1`](./MobileHeaderSlot/)
 * [`org.openedx.frontend.layout.header_mobile_logged_out_items.v1`](./MobileLoggedOutItemsSlot/)
 * [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
 * [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)
-* [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)

src/studio-header/CourseLockUp.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   OverlayTrigger,
   Tooltip,
@@ -9,43 +9,41 @@ import { Link } from 'react-router-dom';
 
 import messages from './messages';
 
-const CourseLockUp = (
-  {
-    outlineLink,
-    org,
-    number,
-    title,
-  },
-) => {
-  const intl = useIntl();
-
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={(
-        <Tooltip id="course-lock-up">
-          {title}
-        </Tooltip>
-      )}
+const CourseLockUp = ({
+  outlineLink,
+  org,
+  number,
+  title,
+  // injected
+  intl,
+}) => (
+  <OverlayTrigger
+    placement="bottom"
+    overlay={(
+      <Tooltip id="course-lock-up">
+        {title}
+      </Tooltip>
+    )}
+  >
+    <Link
+      className="course-title-lockup mr-2"
+      to={outlineLink}
+      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
+      data-testid="course-lock-up-block"
     >
-      <Link
-        className="course-title-lockup mr-2"
-        to={outlineLink}
-        aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
-        data-testid="course-lock-up-block"
-      >
-        <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
-        <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
-      </Link>
-    </OverlayTrigger>
-  );
-};
+      <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
+      <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
+    </Link>
+  </OverlayTrigger>
+);
 
 CourseLockUp.propTypes = {
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,
   outlineLink: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 CourseLockUp.defaultProps = {
@@ -55,4 +53,4 @@ CourseLockUp.defaultProps = {
   outlineLink: null,
 };
 
-export default CourseLockUp;
+export default injectIntl(CourseLockUp);

src/studio-header/UserMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Avatar,
 } from '@openedx/paragon';
@@ -14,8 +14,9 @@ const UserMenu = ({
   authenticatedUserAvatar,
   isMobile,
   isAdmin,
+  // injected
+  intl,
 }) => {
-  const intl = useIntl();
   const avatar = authenticatedUserAvatar ? (
     <img
       className="d-block w-100 h-100"
@@ -54,6 +55,8 @@ UserMenu.propTypes = {
   authenticatedUserAvatar: PropTypes.string,
   isMobile: PropTypes.bool,
   isAdmin: PropTypes.bool,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 UserMenu.defaultProps = {
@@ -63,4 +66,4 @@ UserMenu.defaultProps = {
   username: null,
 };
 
-export default UserMenu;
+export default injectIntl(UserMenu);