feat: Remove Studio Maintenance link (empty commit for release CI)

This was already merged in
6d424edbd5,
but we are pushing this empty commit with BREAKING CHANGE message
in order to trigger the release of a new semantic version.

BREAKING CHANGE: The Studio "Maintenance" link has been removed
as part of https://github.com/openedx/edx-platform/issues/36263

.github/workflows/ci.yml

@@ -11,11 +11,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
       with:
         fetch-depth: 0
     - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
       with:
         node-version-file: '.nvmrc'
     - name: Install dependencies
@@ -24,6 +24,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: Build

.github/workflows/release.yml

@@ -10,13 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
       with:
         fetch-depth: 0
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
@@ -25,6 +25,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: i18n_extract

.nvmrc

@@ -1 +1 @@
-20
+24

README.rst

@@ -35,6 +35,7 @@ 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
 ====================
@@ -71,9 +72,9 @@ Cloning and Startup
 
     ``git clone https://github.com/openedx/frontend-component-header.git``
 
-  2. Use node v18.x.
+  2. Use node v24.x.
 
-    The current version of the micro-frontend build scripts support node 18.
+    The current version of the micro-frontend build scripts support node 24.
     Using other major versions of node *may* work, but this is unsupported.  For
     convenience, this repository includes an .nvmrc file to help in setting the
     correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -190,4 +191,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

example/index.js

@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';

package.json

@@ -10,18 +10,16 @@
     "build": "make build",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "test:dev": "fedx-scripts jest --watchAll",
+    "types": "tsc --noEmit"
   },
   "files": [
     "/dist"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-component-header.git"
@@ -36,35 +34,31 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "^8.3.1",
-    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.2.2",
+    "@openedx/frontend-build": "^14.3.2",
     "@openedx/paragon": "^23.0.0",
-    "@testing-library/dom": "10.4.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
-    "husky": "8.0.3",
-    "jest": "29.7.0",
-    "jest-chain": "1.1.6",
+    "@testing-library/react": "^16.2.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "^30.0.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.28.1",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "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.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
@@ -72,8 +66,8 @@
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
     "@openedx/paragon": ">= 22.0.0 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.14.2"
   }
 }

src/Header.jsx

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

src/Header.messages.jsx

@@ -61,11 +61,6 @@ const messages = defineMessages({
     defaultMessage: 'Studio Home',
     description: 'Link to the Studio Home',
   },
-  'header.user.menu.studio.maintenance': {
-    id: 'header.user.menu.studio.maintenance',
-    defaultMessage: 'Maintenance',
-    description: 'Link to the Studio Maintenance',
-  },
   'header.label.account.nav': {
     id: 'header.label.account.nav',
     defaultMessage: 'Account',

src/Header.test.jsx

@@ -33,6 +33,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -56,6 +57,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -74,6 +76,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();

src/desktop-header/DesktopHeader.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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';
@@ -19,94 +20,74 @@ import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
 import messages from '../Header.messages';
 
 // Assets
-import { CaretIcon } from '../Icons';
 
-class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
+const DesktopHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();
 
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return <DesktopMainMenuSlot menu={mainMenu} />;
-  }
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
 
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-  }
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
 
-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
+  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>
+  );
 
-    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 renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
 
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
 
-  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>
+  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>
         </div>
-      </header>
-    );
-  }
-}
+      </div>
+    </header>
+  );
+};
 
 export const desktopHeaderDataShape = {
   mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -123,18 +104,15 @@ export const desktopHeaderDataShape = {
 
 DesktopHeader.propTypes = {
   mainMenu: desktopHeaderDataShape.mainMenu,
-  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,
+  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,
 };
 
 DesktopHeader.defaultProps = {
@@ -150,4 +128,4 @@ DesktopHeader.defaultProps = {
   loggedIn: false,
 };
 
-export default injectIntl(DesktopHeader);
+export default DesktopHeader;

src/desktop-header/DesktopUserMenuToggle.jsx

@@ -0,0 +1,20 @@
+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/frontend-platform.d.ts

@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}

src/learning-header/AnonymousUserMenu.jsx

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

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,17 +1,18 @@
 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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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 = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ username }) => {
+  const intl = useIntl();
   const dropdownItems = [
     {
       message: intl.formatMessage(messages.dashboard),
@@ -37,11 +38,8 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <Dropdown className="user-dropdown ml-3">
-      <Dropdown.Toggle variant="outline-primary">
-        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-        <span data-hj-suppress className="d-none d-md-inline">
-          {username}
-        </span>
+      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
+        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
       </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <LearningUserMenuSlot items={dropdownItems} />
@@ -51,8 +49,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 };
 
 AuthenticatedUserDropdown.propTypes = {
-  intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AuthenticatedUserDropdown);
+export default 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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
@@ -13,8 +13,12 @@ import messages from './messages';
 import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
 
 const LearningHeader = ({
-  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+  courseOrg,
+  courseNumber,
+  courseTitle,
+  showUserDropdown,
 }) => {
+  const intl = useIntl();
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
@@ -53,7 +57,6 @@ LearningHeader.propTypes = {
   courseOrg: courseInfoDataShape.courseOrg,
   courseNumber: courseInfoDataShape.courseNumber,
   courseTitle: courseInfoDataShape.courseTitle,
-  intl: intlShape.isRequired,
   showUserDropdown: PropTypes.bool,
 };
 
@@ -64,4 +67,4 @@ LearningHeader.defaultProps = {
   showUserDropdown: true,
 };
 
-export default injectIntl(LearningHeader);
+export default LearningHeader;

src/learning-header/LearningUserMenuToggle.jsx

@@ -0,0 +1,28 @@
+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/learning-header/messages.js

@@ -36,6 +36,11 @@ const messages = defineMessages({
     defaultMessage: 'Sign Out',
     description: 'The label for the user menu Sign Out action.',
   },
+  userOptionsDropdownLabel: {
+    id: 'header.menu.aria-label',
+    defaultMessage: 'User Options',
+    description: 'The aria-label for the user options dropdown.',
+  },
 });
 
 export default messages;

src/mobile-header/MobileHeader.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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,96 +20,84 @@ import messages from '../Header.messages';
 // Assets
 import { MenuIcon } from '../Icons';
 
-class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
+const MobileHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+  stickyOnMobile,
+}) => {
+  const intl = useIntl();
 
-  renderMainMenu() {
-    const { mainMenu, secondaryMenu } = this.props;
-    return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
-  }
+  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
 
-  renderUserMenuItems() {
-    const { userMenu } = this.props;
-    return <MobileUserMenuSlot menu={userMenu} />;
-  }
+  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;
 
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;
 
-  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 renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
 
-    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">
+  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';
 
-            <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" />
+  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>
         </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'])}
-              >
-                <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>
-    );
-  }
-}
+      ) : 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>
+  );
+};
 
 export const mobileHeaderDataShape = {
   mainMenu: mobileHeaderMainMenuDataShape,
@@ -137,9 +125,6 @@ MobileHeader.propTypes = {
   username: mobileHeaderDataShape.username,
   loggedIn: mobileHeaderDataShape.loggedIn,
   stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
-
-  // i18n
-  intl: intlShape.isRequired,
 };
 
 MobileHeader.defaultProps = {
@@ -157,4 +142,4 @@ MobileHeader.defaultProps = {
 
 };
 
-export default injectIntl(MobileHeader);
+export default MobileHeader;

src/mobile-header/MobileUserMenuToggle.jsx

@@ -0,0 +1,14 @@
+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/CourseInfoSlot/README.md

@@ -1,6 +1,9 @@
 # Course Info Slot
 
-### Slot ID: `course_info_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_course_info.v1`
+
+### Slot ID Aliases
+* `course_info_slot`
 
 ## Description
 
@@ -24,7 +27,7 @@ const replaceCourseTitle = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -51,7 +54,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -83,7 +86,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/CourseInfoSlot/index.jsx

@@ -9,7 +9,8 @@ const CourseInfoSlot = ({
   ...attributes
 }) => (
   <PluginSlot
-    id="course_info_slot"
+    id="org.openedx.frontend.layout.header_learning_course_info.v1"
+    idAliases={['course_info_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopHeaderSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Header Slot
 
-### Slot ID: `desktop_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop.v1`
+
+### Slot ID Aliases
+* `desktop_header_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_header_slot: {
+    'org.openedx.frontend.layout.header_desktop.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -38,4 +41,4 @@ const config = {
 }
 
 export default config;
-```
+```

src/plugin-slots/DesktopHeaderSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopHeaderSlot = ({
   props,
 }) => (
   <PluginSlot
-    id="desktop_header_slot"
+    id="org.openedx.frontend.layout.header_desktop.v1"
+    idAliases={['desktop_header_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Logged Out Items Slot
 
-### Slot ID: `desktop_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_logged_out_items.v1`
+
+### Slot ID Aliases
+* `desktop_logged_out_items_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopLoggedOutItemsSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="desktop_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_desktop_logged_out_items.v1"
+    idAliases={['desktop_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopMainMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Main Menu Slot
 
-### Slot ID: `desktop_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_main_menu.v1`
+
+### Slot ID Aliases
+* `desktop_main_menu_slot`
 
 ## Description
 
@@ -10,9 +13,11 @@ This slot is used to replace/modify/hide the desktop main menu.
 
 ### Modify Items
 
-The following `env.config.jsx` will modify the items in the desktop main menu.
+#### Replace All Items
 
-![Screenshot of modified items](./images/desktop_main_menu_modify_items.png)
+The following `env.config.jsx` will replace all items in the desktop main menu.
+
+![Screenshot of modified items](./images/desktop_main_menu_replace_all_items.png)
 
 ```jsx
 import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
@@ -40,7 +45,59 @@ const modifyMainMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyMainMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+#### Add Items
+
+The following `env.config.jsx` will add items in the desktop main menu.
+
+![Screenshot of custom marketing links](./images/desktop_main_menu_add_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = (widget) => {
+  const existingMenu = widget.RenderWidget.props.menu || [];
+
+  const newMarketingLinks = [
+    {
+      type: 'item',
+      href: 'https://example.com/how-it-works',
+      content: 'How it works',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/courses',
+      content: 'Courses',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/schools',
+      content: 'Schools',
+    }
+  ];
+
+  widget.content.menu = [...existingMenu, ...newMarketingLinks];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +124,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +156,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -131,4 +188,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/DesktopMainMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopMainMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_main_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_main_menu.v1"
+    idAliases={['desktop_main_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Secondary Menu Slot
 
-### Slot ID: `desktop_secondary_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+
+### Slot ID Aliases
+* `desktop_secondary_menu_slot`
 
 ## Description
 
@@ -35,7 +38,7 @@ const modifySecondaryMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -62,7 +65,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -94,7 +97,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopSecondaryMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_secondary_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_secondary_menu.v1"
+    idAliases={['desktop_secondary_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop User Menu Slot
 
-### Slot ID: `desktop_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu.v1`
+
+### Slot ID Aliases
+* `desktop_user_menu_slot`
 
 ## Description
 
@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopUserMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_user_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_user_menu.v1"
+    idAliases={['desktop_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# 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

@@ -0,0 +1,21 @@
+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/LearningHelpSlot/README.md

@@ -1,6 +1,9 @@
 # Learning Help Slot
 
-### Slot ID: `learning_help_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_help.v1`
+
+### Slot ID Aliases
+* `learning_help_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_help_slot: {
+    'org.openedx.frontend.layout.header_learning_help.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/LearningHelpSlot/index.jsx

@@ -3,7 +3,7 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
 
 const LearningHelpSlot = () => (
-  <PluginSlot id="learning_help_slot">
+  <PluginSlot id="org.openedx.frontend.layout.header_learning_help.v1" idAliases={['learning_help_slot']}>
     <LearningHeaderHelpLink />
   </PluginSlot>
 );

src/plugin-slots/LearningLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Learning Logged Out Items Slot
 
-### Slot ID: `learning_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_logged_out_items.v1`
+
+### Slot ID Aliases
+* `learning_logged_out_items_slot`
 
 ## Description
 
@@ -38,7 +41,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -65,7 +68,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -97,7 +100,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const LearningLoggedOutItemsSlot = ({
   buttonsInfo,
 }) => (
   <PluginSlot
-    id="learning_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_learning_logged_out_items.v1"
+    idAliases={['learning_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/LearningUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Learning User Menu Slot
 
-### Slot ID: `learning_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu.v1`
+
+### Slot ID Aliases
+* `learning_user_menu_slot`
 
 ## Description
 
@@ -37,7 +40,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -64,7 +67,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -96,7 +99,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/LearningUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const LearningUserMenuSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="learning_user_menu_slot"
+    id="org.openedx.frontend.layout.header_learning_user_menu.v1"
+    idAliases={['learning_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/LearningUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# 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

@@ -0,0 +1,22 @@
+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/LogoSlot/README.md

@@ -1,6 +1,9 @@
 # Logo Slot
 
-### Slot ID: `logo_slot`
+### Slot ID: `org.openedx.frontend.layout.header_logo.v1`
+
+### Slot ID Aliases
+* `logo_slot`
 
 ## Description
 
@@ -22,7 +25,7 @@ const modifyLogoHref = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -47,7 +50,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/LogoSlot/index.jsx

@@ -6,7 +6,8 @@ const LogoSlot = ({
   href, src, alt, ...attributes
 }) => (
   <PluginSlot
-    id="logo_slot"
+    id="org.openedx.frontend.layout.header_logo.v1"
+    idAliases={['logo_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileHeaderSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Header Slot
 
-### Slot ID: `mobile_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile.v1`
+
+### Slot ID Aliases
+* `mobile_header_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_header_slot: {
+    'org.openedx.frontend.layout.header_mobile.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/MobileHeaderSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileHeaderSlot = ({
   props,
 }) => (
   <PluginSlot
-    id="mobile_header_slot"
+    id="org.openedx.frontend.layout.header_mobile.v1"
+    idAliases={['mobile_header_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Logged Out Items Slot
 
-### Slot ID: `mobile_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_logged_out_items.v1`
+
+### Slot ID Aliases
+* `mobile_logged_out_items_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -131,4 +134,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileLoggedOutItemsSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="mobile_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_mobile_logged_out_items.v1"
+    idAliases={['mobile_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileMainMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Main Menu Slot
 
-### Slot ID: `mobile_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_main_menu.v1`
+
+### Slot ID Aliases
+* `mobile_main_menu_slot`
 
 ## Description
 
@@ -10,9 +13,11 @@ This slot is used to replace/modify/hide the mobile main menu.
 
 ### Modify Items
 
-The following `env.config.jsx` will modify the items in the mobile main menu.
+#### Replace All Items
 
-![Screenshot of modified items](./images/mobile_main_menu_modify_items.png)
+The following `env.config.jsx` will replace all items in the mobile main menu.
+
+![Screenshot of modified items](./images/mobile_main_menu_replace_all_items.png)
 
 ```jsx
 import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
@@ -40,7 +45,59 @@ const modifyMainMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyMainMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+#### Add Items
+
+The following `env.config.jsx` will add items in the mobile main menu.
+
+![Screenshot of custom marketing links](./images/mobile_main_menu_add_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = (widget) => {
+  const existingMenu = widget.RenderWidget.props.menu || [];
+
+  const newMarketingLinks = [
+    {
+      type: 'item',
+      href: 'https://example.com/how-it-works',
+      content: 'How it works',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/courses',
+      content: 'Courses',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/schools',
+      content: 'Schools',
+    }
+  ];
+
+  widget.content.menu = [...existingMenu, ...newMarketingLinks];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +124,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +156,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -131,4 +188,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileMainMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileMainMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="mobile_main_menu_slot"
+    id="org.openedx.frontend.layout.header_mobile_main_menu.v1"
+    idAliases={['mobile_main_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile User Menu Slot
 
-### Slot ID: `mobile_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu.v1`
+
+### Slot ID Aliases
+* `mobile_user_menu_slot`
 
 ## Description
 
@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -139,4 +142,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileUserMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="mobile_user_menu_slot"
+    id="org.openedx.frontend.layout.header_mobile_user_menu.v1"
+    idAliases={['mobile_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# 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

@@ -0,0 +1,23 @@
+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

@@ -1,15 +1,26 @@
 # `frontend-component-header` Plugin Slots
 
-* [`logo_slot`](./LogoSlot/)
-* [`desktop_main_menu_slot`](./DesktopMainMenuSlot/)
-* [`desktop_secondary_menu_slot`](./DesktopSecondaryMenuSlot/)
-* [`mobile_main_menu_slot`](./MobileMainMenuSlot/)
-* [`course_info_slot`](./CourseInfoSlot/)
-* [`learning_help_slot`](./LearningHelpSlot/)
-* [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/)
-* [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
-* [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
-* [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
-* [`learning_user_menu_slot`](./LearningUserMenuSlot/)
-* [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
-* [`desktop_header_slot`](./DesktopHeaderSlot/)
+### Shared
+* [`org.openedx.frontend.layout.header_logo.v1`](./LogoSlot/)
+
+### Desktop Header
+* [`org.openedx.frontend.layout.header_desktop.v1`](./DesktopHeaderSlot/)
+* [`org.openedx.frontend.layout.header_desktop_logged_out_items.v1`](./DesktopLoggedOutItemsSlot/)
+* [`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/setupTest.js

@@ -4,8 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import 'babel-polyfill';
-import 'jest-chain';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureLogging } from '@edx/frontend-platform/logging';
 import { configure as configureI18n } from '@edx/frontend-platform/i18n';

src/studio-header/BrandNav.test.tsx

@@ -34,7 +34,7 @@ describe('BrandNav Component', () => {
   it('displays a link that navigates to studioBaseUrl', () => {
     render(<RootWrapper />);
 
-    const link = screen.getByRole('link');
+    const link = screen.getByRole('link') as HTMLAnchorElement;
     expect(link.href).toBe(studioBaseUrl);
   });
 });

src/studio-header/CourseLockUp.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  OverlayTrigger,
-  Tooltip,
-} from '@openedx/paragon';
-import { Link } from 'react-router-dom';
-
-import messages from './messages';
-
-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"
-    >
-      <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 = {
-  number: null,
-  org: null,
-  title: null,
-  outlineLink: null,
-};
-
-export default injectIntl(CourseLockUp);

src/studio-header/CourseLockUp.test.tsx

@@ -16,7 +16,7 @@ const mockProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <CourseLockUp {...props} />
     </IntlProvider>
   </MemoryRouter>
@@ -52,7 +52,8 @@ describe('CourseLockUp Component', () => {
   it('navigates to an absolute URL when clicked', () => {
     render(<RootWrapper {...mockProps} />);
 
-    const link = screen.getByTestId('course-lock-up-block');
+    // FIXME: don't use testId - https://testing-library.com/docs/queries/about#priority
+    const link = screen.getByTestId('course-lock-up-block') as HTMLAnchorElement;
     expect(link.href).toBe(mockProps.outlineLink);
   });
 });

src/studio-header/CourseLockUp.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  OverlayTrigger,
+  Tooltip,
+} from '@openedx/paragon';
+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>
+      )}
+    >
+      <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>
+  );
+};
+
+CourseLockUp.propTypes = {
+  number: PropTypes.string,
+  org: PropTypes.string,
+  title: PropTypes.string,
+  outlineLink: PropTypes.string,
+};
+
+CourseLockUp.defaultProps = {
+  number: null,
+  org: null,
+  title: null,
+  outlineLink: null,
+};
+
+export default CourseLockUp;

src/studio-header/HeaderBody.test.tsx

@@ -35,7 +35,7 @@ const defaultProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <HeaderBody {...props} />
     </IntlProvider>
   </MemoryRouter>

src/studio-header/HeaderBody.tsx

@@ -135,6 +135,7 @@ const HeaderBody = ({
               logoutUrl,
               authenticatedUserAvatar,
               isAdmin,
+              isMobile,
             }}
           />
         </Nav>

src/studio-header/MobileHeader.tsx

@@ -13,6 +13,7 @@ const MobileHeader = ({
 
   return (
     <>
+      {/* @ts-expect-error The type of 'props' is any until we convert from propTypes to TypeScript interface/types */}
       <HeaderBody
         {...props}
         isMobile
@@ -36,16 +37,16 @@ const MobileHeader = ({
 };
 
 MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
+  studioBaseUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  logoutUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  number: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  org: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  title: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logo: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logoAltText: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  authenticatedUserAvatar: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  username: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  isAdmin: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     buttonTitle: PropTypes.node,
@@ -54,7 +55,7 @@ MobileHeader.propTypes = {
       title: PropTypes.node,
     })),
   })),
-  outlineLink: PropTypes.string,
+  outlineLink: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
 };
 
 MobileHeader.defaultProps = {

src/studio-header/StudioHeader.test.tsx

@@ -12,7 +12,6 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import { MemoryRouter } from 'react-router-dom';
 
 import StudioHeader from './StudioHeader';
-import messages from './messages';
 
 const authenticatedUser = {
   userId: 3,
@@ -26,7 +25,7 @@ let screenWidth = 1280;
 
 const RootWrapper = ({
   ...props
-}) => {
+}: React.ComponentProps<typeof StudioHeader>) => {
   const appContextValue = useMemo(() => ({
     authenticatedUser: currentUser,
     config: {
@@ -55,7 +54,7 @@ const RootWrapper = ({
   );
 };
 
-const props = {
+const props: React.ComponentProps<typeof StudioHeader> = {
   number: '123',
   org: 'Ed',
   title: 'test',
@@ -74,6 +73,10 @@ const props = {
   outlineLink: 'tEsTLInK',
   searchButtonAction: null,
   isNewHomePage: true,
+  // These default values shouldn't be needed but typescript is confused by propTypes; can remove after converting
+  // from propTypes to TypeScript:
+  containerProps: {},
+  isHiddenMainMenu: false,
 };
 
 describe('Header', () => {
@@ -115,16 +118,6 @@ describe('Header', () => {
       expect(dropdownOption).toBeVisible();
     });
 
-    it('maintenance should not be in user menu', async () => {
-      currentUser = { ...authenticatedUser, administrator: false };
-      const { getAllByRole, queryByText } = render(<RootWrapper {...props} />);
-      const userMenu = getAllByRole('button')[1];
-      await waitFor(() => fireEvent.click(userMenu));
-      const maintenanceButton = queryByText(messages['header.user.menu.maintenance'].defaultMessage);
-
-      expect(maintenanceButton).toBeNull();
-    });
-
     it('user menu should use avatar icon', async () => {
       currentUser = { ...authenticatedUser, avatar: null };
       const { getByTestId } = render(<RootWrapper {...props} />);
@@ -186,15 +179,6 @@ describe('Header', () => {
       expect(desktopMenu).toBeNull();
     });
 
-    it('maintenance should be in user menu', async () => {
-      const { getAllByRole, getByText } = render(<RootWrapper {...props} />);
-      const userMenu = getAllByRole('button')[1];
-      await waitFor(() => fireEvent.click(userMenu));
-      const maintenanceButton = getByText(messages['header.user.menu.maintenance'].defaultMessage);
-
-      expect(maintenanceButton).toBeVisible();
-    });
-
     it('user menu should use avatar image', async () => {
       const { getByTestId } = render(<RootWrapper {...props} />);
       const avatarImage = getByTestId('avatar-image');

src/studio-header/StudioHeader.tsx

@@ -19,6 +19,7 @@ const StudioHeader = ({
   number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
   outlineLink, searchButtonAction, isNewHomePage,
 }) => {
+  // @ts-expect-error - frontend-platform doesn't yet have type information :/
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
     logo: config.LOGO_URL,

src/studio-header/UserMenu.tsx

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

src/studio-header/messages.ts

@@ -6,11 +6,6 @@ const messages = defineMessages({
     defaultMessage: 'Studio Home',
     description: 'Link to Studio Home',
   },
-  'header.user.menu.maintenance': {
-    id: 'header.user.menu.maintenance',
-    defaultMessage: 'Maintenance',
-    description: 'Link to the Studio maintenance page',
-  },
   'header.user.menu.logout': {
     id: 'header.user.menu.logout',
     defaultMessage: 'Logout',

src/studio-header/utils.ts

@@ -1,4 +1,3 @@
-import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 const getUserMenuItems = ({
@@ -21,9 +20,6 @@ const getUserMenuItems = ({
       {
         href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
-      }, {
-        href: `${getConfig().STUDIO_BASE_URL}/maintenance`,
-        title: intl.formatMessage(messages['header.user.menu.maintenance']),
       }, {
         href: `${logoutUrl}`,
         title: intl.formatMessage(messages['header.user.menu.logout']),

tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "noEmit": true,
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}