chore(deps): update actions/setup-node action to v6

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -9,24 +9,23 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
     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@v6
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
       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

@@ -4,19 +4,26 @@ on:
     branches:
     - master
     - alpha
+permissions:
+  contents: read # for checkout
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for trusted publishing and npm provenance
     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@v6
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
@@ -25,6 +32,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
@@ -37,9 +46,6 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
-      uses: cycjimmy/semantic-release-action@v3
-      with:
-        semantic_version: 16
       env:
         GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+      run: npx semantic-release@25

.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>`_.

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-header"
+  description: "A generic header for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

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';

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
-@import "@edx/brand/paragon/variables";
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
 
 @import "@edx/frontend-component-header/index";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

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"
@@ -35,44 +33,41 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-platform": "^8.3.1",
-    "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "^14.3.2",
-    "@openedx/frontend-build": "14.1.5",
+    "@openedx/paragon": "^23.0.0",
-    "@openedx/paragon": "22.9.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",
+    "@testing-library/react": "^16.2.0",
-    "husky": "8.0.3",
+    "jest": "30.2.0",
-    "jest": "29.7.0",
+    "jest-environment-jsdom": "^30.0.0",
-    "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
-    "react-redux": "7.2.9",
+    "react-redux": "^8.1.1",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.30.2",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.4.2",
+    "ts-jest": "^29.4.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.3.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
     "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": ">= 22.0.0 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.9.0 || ^17.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/Menu/menu.scss

@@ -1,45 +1,45 @@
 .menu {
   position: relative;
 }
+
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white, #fff);
   min-width: 10rem;
+
   &.pin-left {
     left: 0;
   }
+
   &.pin-right {
     right: 0;
   }
 }
 
-
 .menu-dropdown-enter {
   opacity: 0;
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
 }
+
 .menu-dropdown-enter-active {
   transform-origin: 75% 0;
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
-.menu-dropdown-enter-done {
-}
 
 .menu-dropdown-exit {
   transform-origin: 75% 0;
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
+
 .menu-dropdown-exit-active {
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
   transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
   opacity: 0;
 }
-.menu-dropdown-exit-done {
-}

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 {
+const DesktopHeader = ({
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  mainMenu,
-    super(props);
+  secondaryMenu,
-  }
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();
 
-  renderMainMenu() {
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
-    const { mainMenu } = this.props;
-    return <DesktopMainMenuSlot menu={mainMenu} />;
-  }
 
-  renderSecondaryMenu() {
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-    const { secondaryMenu } = this.props;
-    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-  }
 
-  renderUserMenu() {
+  const renderUserMenu = () => (
-    const {
+    <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-      userMenu,
+      <MenuTrigger
-      avatar,
+        tag="button"
-      username,
+        aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-      intl,
+        className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-    } = this.props;
+      >
+        <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 (
+  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-      <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>
-    );
-  }
 
-  renderLoggedOutItems() {
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const { loggedOutItems } = this.props;
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
-    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-  }
 
-  render() {
+  return (
-    const {
+    <header className="site-header-desktop">
-      logo,
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-      logoAltText,
+      <div className={`container-fluid ${logoClasses}`}>
-      logoDestination,
+        <div className="nav-container position-relative d-flex align-items-center">
-      loggedIn,
+          <LogoSlot {...logoProps} />
-      intl,
+          <nav
-    } = this.props;
+            aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+            className="nav main-nav"
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+          >
-
+            {renderMainMenu()}
-    return (
+          </nav>
-      <header className="site-header-desktop">
+          <nav
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+            aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-        <div className={`container-fluid ${logoClasses}`}>
+            className="nav secondary-menu-container align-items-center ml-auto"
-          <div className="nav-container position-relative d-flex align-items-center">
+          >
-            <LogoSlot {...logoProps} />
+            {loggedIn
-            <nav
+              ? (
-              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+                <>
-              className="nav main-nav"
+                  {renderSecondaryMenu()}
-            >
+                  {renderUserMenu()}
-              {this.renderMainMenu()}
+                </>
-            </nav>
+              ) : renderLoggedOutItems()}
-            <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>
-      </header>
+      </div>
-    );
+    </header>
-  }
+  );
-}
+};
 
 export const desktopHeaderDataShape = {
   mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -123,18 +104,15 @@ export const desktopHeaderDataShape = {
 
 DesktopHeader.propTypes = {
   mainMenu: desktopHeaderDataShape.mainMenu,
-  secondaryMenu: desktopHeaderDataShape.secondaryMenumainMenu,
+  secondaryMenu: desktopHeaderDataShape.secondaryMenu,
-  userMenu: desktopHeaderDataShape.userMenumainMenu,
+  userMenu: desktopHeaderDataShape.userMenu,
-  loggedOutItems: desktopHeaderDataShape.loggedOutItemsmainMenu,
+  loggedOutItems: desktopHeaderDataShape.loggedOutItems,
-  logo: desktopHeaderDataShape.logomainMenu,
+  logo: desktopHeaderDataShape.logo,
-  logoAltText: desktopHeaderDataShape.logoAltTextmainMenu,
+  logoAltText: desktopHeaderDataShape.logoAltText,
-  logoDestination: desktopHeaderDataShape.logoDestinationmainMenu,
+  logoDestination: desktopHeaderDataShape.logoDestination,
-  avatar: desktopHeaderDataShape.avatarmainMenu,
+  avatar: desktopHeaderDataShape.avatar,
-  username: desktopHeaderDataShape.usernamemainMenu,
+  username: desktopHeaderDataShape.username,
-  loggedIn: desktopHeaderDataShape.loggedInmainMenu,
+  loggedIn: desktopHeaderDataShape.loggedIn,
-
-  // i18n
-  intl: intlShape.isRequired,
 };
 
 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/index.scss

@@ -1,6 +1,9 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
+$component-active-bg: #0A3055FF !default;
+$component-active-color: $white !default;
+$rounded-pill: 50rem  !default;
 
 @import './Menu/menu.scss';
 @import './studio-header/StudioHeader.scss';
@@ -21,8 +24,9 @@ $white: #fff;
   padding: .75rem;
   justify-content: center;
   align-items:center;
+
   &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
   }
 }
 
@@ -36,17 +40,12 @@ $white: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
     }
   }
 
-  .user-dropdown {
+  .user-dropdown .btn {
-    .btn {
+    height: 3rem;
-      height: 3rem;
-      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-      //   padding: 0 0.5rem;
-      // }
-    }
   }
 }
 
@@ -63,6 +62,7 @@ $white: #fff;
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
@@ -70,19 +70,22 @@ $white: #fff;
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
-  background: $white;
+  background: var(--pgn-color-white, $white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
-    margin-right: 1rem;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+
     img {
       display: block;
       height: 100%;
@@ -93,38 +96,42 @@ $white: #fff;
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
+      background: var(--pgn-color-bg-active, $component-active-bg);
-      color: $component-active-color;
+      color: var(--pgn-color-active, $component-active-color);
     }
   }
   .main-nav {
     .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
+      background: var(--pgn-color-bg-active, $component-active-bg);
-      color: $component-active-color;
+      color: var(--pgn-color-active, $component-active-color);
     }
+
     .menu {
       position: static;
+
       .menu-content {
-        border-top: solid 2px $component-active-bg;
+        border-top: solid 2px var(--pgn-color-bg-active);
         left: 0;
         right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base, $spacer);
       }
     }
   }
+
   .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
   }
 }

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 = {
+export default AnonymousUserMenu;
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(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">
+      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
-        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
-        <span data-hj-suppress className="d-none d-md-inline">
-          {username}
-        </span>
       </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 {
+const MobileHeader = ({
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  mainMenu,
-    super(props);
+  secondaryMenu,
-  }
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+  stickyOnMobile,
+}) => {
+  const intl = useIntl();
 
-  renderMainMenu() {
+  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
-    const { mainMenu, secondaryMenu } = this.props;
-    return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
-  }
 
-  renderUserMenuItems() {
+  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;
-    const { userMenu } = this.props;
-    return <MobileUserMenuSlot menu={userMenu} />;
-  }
 
-  renderLoggedOutItems() {
+  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;
-    const { loggedOutItems } = this.props;
-    return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
-  }
 
-  render() {
+  const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
-    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';
 
-    return (
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-      <header
+  const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-        aria-label={intl.formatMessage(messages['header.label.main.header'])}
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
-        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">
+  return (
-              <MenuTrigger
+    <header
-                tag="button"
+      aria-label={intl.formatMessage(messages['header.label.main.header'])}
-                className="icon-button"
+      className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
-                aria-label={intl.formatMessage(messages['header.label.main.menu'])}
+    >
-                title={intl.formatMessage(messages['header.label.main.menu'])}
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-              >
+      {mainMenu.length > 0 ? (
-                <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
+        <div className="w-100 d-flex justify-content-start">
-              </MenuTrigger>
+
-              <MenuContent
+          <Menu className="position-static">
-                tag="nav"
+            <MenuTrigger
-                aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+              tag="button"
-                className="nav flex-column pin-left pin-right border-top shadow py-2"
+              className="icon-button"
-              >
+              aria-label={intl.formatMessage(messages['header.label.main.menu'])}
-                {this.renderMainMenu()}
+              title={intl.formatMessage(messages['header.label.main.menu'])}
-              </MenuContent>
+            >
-            </Menu>
+              <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
-          </div>
+            </MenuTrigger>
-        ) : null}
+            <MenuContent
-        <div className={`w-100 d-flex ${logoClasses}`}>
+              tag="nav"
-          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+              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 ? (
+      ) : null}
-          <div className="w-100 d-flex justify-content-end align-items-center">
+      <div className={`w-100 d-flex ${logoClasses}`}>
-            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+        <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
-              <MenuTrigger
+      </div>
-                tag="button"
+      {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-                className="icon-button"
+        <div className="w-100 d-flex justify-content-end align-items-center">
-                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-                title={intl.formatMessage(messages['header.label.account.menu'])}
+            <MenuTrigger
-              >
+              tag="button"
-                <Avatar size="1.5rem" src={avatar} alt={username} />
+              className="icon-button"
-              </MenuTrigger>
+              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+              title={intl.formatMessage(messages['header.label.account.menu'])}
-                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+            >
-              </MenuContent>
+              {renderUserMenuToggle()}
-            </Menu>
+            </MenuTrigger>
-          </div>
+            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-        ) : null}
+              {loggedIn ? renderUserMenuItems() : renderLoggedOutItems()}
-      </header>
+            </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,10 +9,16 @@ 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,
     }}
+    pluginProps={{
+      courseOrg,
+      courseNumber,
+      courseTitle,
+    }}
   >
     <LearningHeaderCourseInfo
       courseOrg={courseOrg}

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: [
         {

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

src/plugin-slots/StudioHeaderSearchButtonSlot/README.md

@@ -0,0 +1,89 @@
+# Studio Header Search Button Slot
+
+### Slot ID: `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the search button in the studio header.
+
+## Examples
+
+### Replace search with custom component
+
+The following `env.config.jsx` will replace the search button entirely (in this case with a custom emoji icon):
+
+![Search button being replaced](./images/studio_header_search_button_replace.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: "custom_notification_tray",
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```
+
+### Add custom component before and after search button
+
+The following `env.config.jsx` will insert emoji after and before the search button
+
+![Add custom component before and after search button](./images/studio_header_search_button_before_after.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 10,
+            id: 'custom_notification_tray_before',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 90,
+            id: 'custom_notification_tray_after',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔕</span>,
+          },
+        },
+      ],
+  },
+};
+
+export default config;
+```
+
+## API
+
+- **Slot ID:** `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+- **Component:** Uses the [PluginSlot](https://github.com/openedx/frontend-plugin-framework#pluginslot) from the Open edX Frontend Plugin Framework for plugin injection.

src/plugin-slots/StudioHeaderSearchButtonSlot/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { Nav, IconButton, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../../studio-header/messages';
+
+const StudioHeaderSearchButtonSlot = ({ searchButtonAction }) => {
+  const intl = useIntl();
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.layout.studio_header_search_button_slot.v1"
+    >
+      {searchButtonAction && (
+        <Nav>
+          <IconButton
+            src={Search}
+            iconAs={Icon}
+            onClick={searchButtonAction}
+            aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+            alt={intl.formatMessage(messages['header.label.search.nav'])}
+          />
+        </Nav>
+      )}
+    </PluginSlot>
+  );
+};
+
+StudioHeaderSearchButtonSlot.propTypes = {
+  searchButtonAction: PropTypes.func,
+};
+
+export default StudioHeaderSearchButtonSlot;

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.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const BrandNav = ({
-  studioBaseUrl,
-  logo,
-  logoAltText,
-}) => (
-  <a href={studioBaseUrl}>
-    <img
-      src={logo}
-      alt={logoAltText}
-      className="d-block logo"
-    />
-  </a>
-);
-
-BrandNav.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logo: PropTypes.string.isRequired,
-  logoAltText: PropTypes.string.isRequired,
-};
-
-export default BrandNav;

src/studio-header/BrandNav.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+
+import BrandNav from './BrandNav';
+
+const studioBaseUrl = 'https://example.com/';
+const logo = 'logo.png';
+const logoAltText = 'Example Logo';
+
+const RootWrapper = () => (
+  <MemoryRouter>
+    <BrandNav
+      studioBaseUrl={studioBaseUrl}
+      logo={logo}
+      logoAltText={logoAltText}
+    />
+  </MemoryRouter>
+);
+
+describe('BrandNav Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the logo with the correct alt text', () => {
+    render(<RootWrapper />);
+
+    const img = screen.getByAltText(logoAltText);
+    expect(img).toHaveAttribute('src', logo);
+  });
+
+  it('displays a link that navigates to studioBaseUrl', () => {
+    render(<RootWrapper />);
+
+    const link = screen.getByRole('link') as HTMLAnchorElement;
+    expect(link.href).toBe(studioBaseUrl);
+  });
+});

src/studio-header/BrandNav.tsx

@@ -0,0 +1,24 @@
+import React, { type FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  studioBaseUrl: string;
+  logo: string;
+  logoAltText: string;
+}
+
+const BrandNav: FunctionComponent<Props> = ({
+  studioBaseUrl,
+  logo,
+  logoAltText,
+}) => (
+  <Link to={studioBaseUrl}>
+    <img
+      src={logo}
+      alt={logoAltText}
+      className="d-block logo"
+    />
+  </Link>
+);
+
+export default BrandNav;

src/studio-header/CourseLockUp.jsx

@@ -1,54 +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 messages from './messages';
-
-const CourseLockUp = ({
-  outlineLink,
-  org,
-  number,
-  title,
-  // injected
-  intl,
-}) => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={(
-      <Tooltip id="course-lock-up">
-        {title}
-      </Tooltip>
-    )}
-  >
-    <a
-      className="course-title-lockup mr-2"
-      href={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>
-    </a>
-  </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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
+
+import CourseLockUp from './CourseLockUp';
+import messages from './messages';
+
+const mockProps = {
+  number: '101',
+  org: 'EDX',
+  title: 'Course Title',
+  outlineLink: 'https://example.com/course-outline',
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseLockUp {...props} />
+    </IntlProvider>
+  </MemoryRouter>
+);
+
+describe('CourseLockUp Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders course org, number, and title', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const courseOrgNumber = screen.getByTestId('course-org-number');
+    const courseTitle = screen.getByTestId('course-title');
+
+    expect(courseOrgNumber).toBeInTheDocument();
+    expect(courseOrgNumber).toHaveTextContent(`${mockProps.org} ${mockProps.number}`);
+    expect(courseTitle).toBeInTheDocument();
+    expect(courseTitle).toHaveTextContent(mockProps.title);
+  });
+
+  it('renders the link with correct aria-label', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const link = screen.getByTestId('course-lock-up-block');
+    expect(link).toHaveAttribute(
+      'aria-label',
+      messages['header.label.courseOutline'].defaultMessage,
+    );
+  });
+
+  it('navigates to an absolute URL when clicked', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    // 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,48 @@
+import React, { type FunctionComponent } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  OverlayTrigger,
+  Tooltip,
+} from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
+import messages from './messages';
+
+interface Props {
+  outlineLink?: string;
+  org?: string;
+  number?: string;
+  title?: string;
+}
+
+const CourseLockUp: FunctionComponent<Props> = ({
+  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>
+  );
+};
+
+export default CourseLockUp;

src/studio-header/HeaderBody.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
+
+import HeaderBody from './HeaderBody';
+import messages from './messages';
+
+const mockOnNavigate = jest.fn();
+const mockSearchButtonAction = jest.fn();
+const mockToggleModalPopup = jest.fn();
+const mockSetModalPopupTarget = jest.fn();
+
+const defaultProps = {
+  studioBaseUrl: 'https://example.com',
+  logoutUrl: 'https://example.com/logout',
+  onNavigate: mockOnNavigate,
+  setModalPopupTarget: mockSetModalPopupTarget,
+  toggleModalPopup: mockToggleModalPopup,
+  searchButtonAction: mockSearchButtonAction,
+  username: 'testuser',
+  authenticatedUserAvatar: 'avatar.png',
+  isAdmin: true,
+  isMobile: false,
+  isHiddenMainMenu: false,
+  mainMenuDropdowns: [],
+  logo: 'logo.png',
+  logoAltText: 'Test Logo',
+  number: '101',
+  org: 'EDX',
+  title: 'Test Course',
+  outlineLink: '/courses/edx/course-101',
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <IntlProvider locale="en" messages={{}}>
+      <HeaderBody {...props} />
+    </IntlProvider>
+  </MemoryRouter>
+);
+
+describe('HeaderBody Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the logo and brand navigation', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const logoImage = screen.getByAltText(defaultProps.logoAltText);
+    expect(logoImage).toBeInTheDocument();
+    expect(logoImage).toHaveAttribute('src', defaultProps.logo);
+  });
+
+  it('renders course lockup information', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const courseTitle = screen.getByText(defaultProps.title);
+    const courseOrgNumber = screen.getByText(`${defaultProps.org} ${defaultProps.number}`);
+
+    expect(courseTitle).toBeInTheDocument();
+    expect(courseOrgNumber).toBeInTheDocument();
+  });
+
+  it('renders a course lock-up link with the correct outline URL', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const courseLockUpLink = screen.getByTestId('course-lock-up-block');
+    expect(courseLockUpLink.getAttribute('href')).toBe(defaultProps.outlineLink);
+  });
+
+  it('displays search button and triggers searchButtonAction on click', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const searchButton = screen.getByLabelText(messages['header.label.search.nav'].defaultMessage);
+    expect(searchButton).toBeInTheDocument();
+
+    fireEvent.click(searchButton);
+    expect(mockSearchButtonAction).toHaveBeenCalled();
+  });
+
+  it('displays user menu with username and avatar', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const userMenu = screen.getByText(defaultProps.username);
+    const avatarImage = screen.getByAltText(defaultProps.username);
+
+    expect(userMenu).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('src', defaultProps.authenticatedUserAvatar);
+  });
+
+  it('toggles mobile menu popup when button is clicked in mobile view', () => {
+    render(<RootWrapper {...defaultProps} isMobile isModalPopupOpen={false} />);
+
+    const menuButton = screen.getByTestId('mobile-menu-button');
+    fireEvent.click(menuButton);
+
+    expect(mockToggleModalPopup).toHaveBeenCalled();
+  });
+});

src/studio-header/HeaderBody.tsx

@@ -1,23 +1,45 @@
-import React from 'react';
+import React, { type ReactNode, type ComponentProps } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import {
   ActionRow,
   Button,
   Container,
-  Icon,
-  IconButton,
   Nav,
   Row,
 } from '@openedx/paragon';
-import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
+import { Close, MenuIcon } from '@openedx/paragon/icons';
 
 import CourseLockUp from './CourseLockUp';
 import UserMenu from './UserMenu';
 import BrandNav from './BrandNav';
 import NavDropdownMenu from './NavDropdownMenu';
-import messages from './messages';
+import StudioHeaderSearchButtonSlot from '../plugin-slots/StudioHeaderSearchButtonSlot';
+
+export interface HeaderBodyProps {
+  studioBaseUrl: string;
+  logoutUrl: string;
+  setModalPopupTarget?: ((instance: HTMLButtonElement | null) => void) | null;
+  toggleModalPopup?: React.MouseEventHandler<HTMLButtonElement>;
+  isModalPopupOpen?: boolean;
+  number?: string;
+  org?: string;
+  title: string;
+  logo: string;
+  logoAltText: string;
+  authenticatedUserAvatar?: string;
+  username?: string;
+  isAdmin?: boolean;
+  isMobile?: boolean;
+  isHiddenMainMenu?: boolean;
+  mainMenuDropdowns?: {
+    id: string;
+    buttonTitle: ReactNode;
+    items: { title: ReactNode; href: string; }[];
+  }[];
+  outlineLink?: string;
+  searchButtonAction?: React.MouseEventHandler<HTMLButtonElement>;
+  containerProps?: Omit<ComponentProps<typeof Container>, 'children'>;
+}
 
 const HeaderBody = ({
   logo,
@@ -31,16 +53,15 @@ const HeaderBody = ({
   logoutUrl,
   authenticatedUserAvatar,
   isMobile,
-  setModalPopupTarget,
+  setModalPopupTarget = null,
   toggleModalPopup,
-  isModalPopupOpen,
+  isModalPopupOpen = false,
-  isHiddenMainMenu,
+  isHiddenMainMenu = false,
-  mainMenuDropdowns,
+  mainMenuDropdowns = [],
   outlineLink,
   searchButtonAction,
-  containerProps,
+  containerProps = {},
-}) => {
+}: HeaderBodyProps) => {
-  const intl = useIntl();
 
   const renderBrandNav = (
     <BrandNav
@@ -52,7 +73,7 @@ const HeaderBody = ({
     />
   );
 
-  const { className: containerClassName, ...restContainerProps } = containerProps || {};
+  const { className: containerClassName, ...restContainerProps } = containerProps;
 
   return (
     <Container
@@ -103,7 +124,12 @@ const HeaderBody = ({
                 {mainMenuDropdowns.map(dropdown => {
                   const { id, buttonTitle, items } = dropdown;
                   return (
-                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu
+                      key={id}
+                      {...{
+                        id, buttonTitle, items,
+                      }}
+                    />
                   );
                 })}
               </Nav>
@@ -111,17 +137,9 @@ const HeaderBody = ({
           </>
         )}
         <ActionRow.Spacer />
-        {searchButtonAction && (
+        <StudioHeaderSearchButtonSlot
-          <Nav>
+          searchButtonAction={searchButtonAction}
-            <IconButton
+        />
-              src={Search}
-              iconAs={Icon}
-              onClick={searchButtonAction}
-              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
-              alt={intl.formatMessage(messages['header.label.search.nav'])}
-            />
-          </Nav>
-        )}
         <Nav>
           <UserMenu
             {...{
@@ -130,6 +148,7 @@ const HeaderBody = ({
               logoutUrl,
               authenticatedUserAvatar,
               isAdmin,
+              isMobile,
             }}
           />
         </Nav>
@@ -138,53 +157,4 @@ const HeaderBody = ({
   );
 };
 
-HeaderBody.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func,
-  toggleModalPopup: PropTypes.func,
-  isModalPopupOpen: PropTypes.bool,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-HeaderBody.defaultProps = {
-  setModalPopupTarget: null,
-  toggleModalPopup: null,
-  isModalPopupOpen: false,
-  logo: null,
-  logoAltText: null,
-  number: '',
-  org: '',
-  title: '',
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  isMobile: false,
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-  containerProps: {},
-};
-
 export default HeaderBody;

src/studio-header/MobileHeader.jsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useToggle, ModalPopup } from '@openedx/paragon';
-import HeaderBody from './HeaderBody';
-import MobileMenu from './MobileMenu';
-
-const MobileHeader = ({
-  mainMenuDropdowns,
-  ...props
-}) => {
-  const [isOpen, , close, toggle] = useToggle(false);
-  const [target, setTarget] = useState(null);
-
-  return (
-    <>
-      <HeaderBody
-        {...props}
-        isMobile
-        setModalPopupTarget={setTarget}
-        toggleModalPopup={toggle}
-        isModalPopupOpen={isOpen}
-      />
-      <ModalPopup
-        hasArrow
-        placement="bottom"
-        positionRef={target}
-        isOpen={isOpen}
-        onClose={close}
-        onEscapeKey={close}
-        className="mobile-menu-container"
-      >
-        <MobileMenu {...{ mainMenuDropdowns }} />
-      </ModalPopup>
-    </>
-  );
-};
-
-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,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-};
-
-MobileHeader.defaultProps = {
-  logo: null,
-  logoAltText: null,
-  number: null,
-  org: null,
-  title: null,
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-};
-
-export default MobileHeader;

src/studio-header/MobileHeader.tsx

@@ -0,0 +1,52 @@
+import React, { type FunctionComponent, useState } from 'react';
+import { useToggle, ModalPopup } from '@openedx/paragon';
+import HeaderBody, { type HeaderBodyProps } from './HeaderBody';
+import MobileMenu from './MobileMenu';
+
+type Props = Pick<HeaderBodyProps,
+| 'studioBaseUrl'
+| 'logoutUrl'
+| 'number'
+| 'org'
+| 'title'
+| 'logo'
+| 'logoAltText'
+| 'authenticatedUserAvatar'
+| 'username'
+| 'isAdmin'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+>;
+
+const MobileHeader: FunctionComponent<Props> = ({
+  mainMenuDropdowns,
+  ...props
+}) => {
+  const [isOpen, , close, toggle] = useToggle(false);
+  const [target, setTarget] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <>
+      <HeaderBody
+        {...props}
+        isMobile
+        setModalPopupTarget={setTarget}
+        toggleModalPopup={toggle}
+        isModalPopupOpen={isOpen}
+      />
+      <ModalPopup
+        hasArrow
+        placement="bottom"
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+        onEscapeKey={close}
+        className="mobile-menu-container"
+      >
+        <MobileMenu {...{ mainMenuDropdowns }} />
+      </ModalPopup>
+    </>
+  );
+};
+
+export default MobileHeader;

src/studio-header/MobileMenu.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import '@testing-library/jest-dom/extend-expect';
+import MobileMenu from './MobileMenu';
+
+const mockOnNavigate = jest.fn();
+
+const defaultProps = {
+  mainMenuDropdowns: [
+    {
+      id: 'menu1',
+      buttonTitle: 'Menu 1',
+      items: [
+        { href: '/menu1/item1', title: 'Item 1' },
+        { href: '/menu1/item2', title: 'Item 2' },
+      ],
+    },
+    {
+      id: 'menu2',
+      buttonTitle: 'Menu 2',
+      items: [
+        { href: 'https://external-link.com', title: 'External Link' },
+      ],
+    },
+  ],
+  onNavigate: mockOnNavigate,
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <MobileMenu {...props} />
+  </MemoryRouter>
+);
+
+describe('MobileMenu Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the mobile menu with dropdowns and items', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu1Title = screen.getByText('Menu 1');
+    const menu2Title = screen.getByText('Menu 2');
+
+    expect(menu1Title).toBeInTheDocument();
+    expect(menu2Title).toBeInTheDocument();
+  });
+
+  test('navigates to internal URL when item is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu1Title = screen.getByText(defaultProps.mainMenuDropdowns[0].buttonTitle);
+    fireEvent.click(menu1Title);
+
+    const menuItem = screen.getByText(defaultProps.mainMenuDropdowns[0].items[0].title);
+    expect(menuItem.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[0].items[0].href);
+  });
+
+  test('navigates to an external URL when external link is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const menu2Title = screen.getByText(defaultProps.mainMenuDropdowns[1].buttonTitle);
+    fireEvent.click(menu2Title);
+
+    const externalLink = screen.getByText(defaultProps.mainMenuDropdowns[1].items[0].title);
+    expect(externalLink.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[1].items[0].href);
+  });
+
+  test('renders empty state when there are no dropdowns', () => {
+    render(<RootWrapper mainMenuDropdowns={[]} onNavigate={mockOnNavigate} />);
+
+    const mobileMenu = screen.getByTestId('mobile-menu');
+    expect(mobileMenu).toBeInTheDocument();
+
+    const menuItems = screen.queryAllByRole('listitem');
+    expect(menuItems.length).toBe(0);
+  });
+});

src/studio-header/MobileMenu.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
 
-const MobileMenu = ({
+const MobileMenu = ({ mainMenuDropdowns }) => (
-  mainMenuDropdowns,
-}) => (
   <div
     className="ml-4 p-2 bg-light-100 border border-gray-200 small rounded"
     data-testid="mobile-menu"
@@ -21,9 +20,9 @@ const MobileMenu = ({
             <ul className="p-0" style={{ listStyleType: 'none' }}>
               {items.map(item => (
                 <li className="mobile-menu-item">
-                  <a href={item.href}>
+                  <Link to={item.href}>
                     {item.title}
-                  </a>
+                  </Link>
                 </li>
               ))}
             </ul>

src/studio-header/NavDropdownMenu.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+
+import NavDropdownMenu from './NavDropdownMenu';
+
+const defaultProps = {
+  id: 'menu-id',
+  buttonTitle: 'Menu',
+  items: [
+    { href: '/item1', title: 'Item 1' },
+    { href: 'https://external.com', title: 'External Link' },
+  ],
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <NavDropdownMenu {...props} />
+  </MemoryRouter>
+);
+
+describe('NavDropdownMenu Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the dropdown button with correct title', () => {
+    render(<NavDropdownMenu {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    expect(dropdownButton).toBeInTheDocument();
+  });
+
+  test('renders all dropdown items', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const item1 = screen.getByText(defaultProps.items[0].title);
+    const externalLink = screen.getByText(defaultProps.items[1].title);
+
+    expect(item1).toBeInTheDocument();
+    expect(externalLink).toBeInTheDocument();
+  });
+
+  test('calls onNavigate with the correct URL for internal link', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const item1 = screen.getByText(defaultProps.items[0].title);
+    expect(item1.getAttribute('href')).toBe(defaultProps.items[0].href);
+  });
+
+  test('navigates to external URL when external link is clicked', () => {
+    render(<RootWrapper {...defaultProps} />);
+
+    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
+    fireEvent.click(dropdownButton);
+
+    const externalLink = screen.getByText(defaultProps.items[1].title);
+    expect(externalLink.getAttribute('href')).toBe(defaultProps.items[1].href);
+  });
+});

src/studio-header/NavDropdownMenu.tsx

@@ -1,15 +1,21 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import {
   Dropdown,
   DropdownButton,
 } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  id: string;
+  buttonTitle: ReactNode;
+  items: { title: ReactNode; href: string; }[];
+}
 
 const NavDropdownMenu = ({
   id,
   buttonTitle,
   items,
-}) => (
+}: Props) => (
   <DropdownButton
     id={id}
     title={buttonTitle}
@@ -18,8 +24,9 @@ const NavDropdownMenu = ({
   >
     {items.map(item => (
       <Dropdown.Item
+        as={Link}
         key={`${item.title}-dropdown-item`}
-        href={item.href}
+        to={item.href}
         className="small"
       >
         {item.title}
@@ -28,13 +35,4 @@ const NavDropdownMenu = ({
   </DropdownButton>
 );
 
-NavDropdownMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.node.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    href: PropTypes.string,
-    title: PropTypes.node,
-  })).isRequired,
-};
-
 export default NavDropdownMenu;

src/studio-header/StudioHeader.scss

@@ -7,10 +7,10 @@ $white: #FFFFFF;
 
   height: 3.75rem;
   box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
+  background: var(--pgn-color-white, $white);
 
   .btn-outline-primary {
-    border-color: $white;
+    border-color: var(--pgn-color-white, $white);
   }
 
   .logo {
@@ -19,8 +19,8 @@ $white: #FFFFFF;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: $spacer 0;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
-    margin-right: $spacer;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
 
     img {
       display: block;
@@ -29,17 +29,17 @@ $white: #FFFFFF;
   }
 
   .course-title-lockup {
+    overflow: hidden;
+
     @media only screen and (min-width: 769px) {
       padding: .5rem;
-      padding-right: $spacer;
+      padding-right: var(--pgn-spacing-spacer-base, $spacer);
       border-right: 1px solid #E5E5E5;
       width: 70%;
     }
   
-    overflow: hidden;
-  
     span {
-      color: #333333;
+      color: var(--pgn-color-gray-800, #333333);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/studio-header/StudioHeader.test.tsx

@@ -9,9 +9,9 @@ import {
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 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,
@@ -25,7 +25,7 @@ let screenWidth = 1280;
 
 const RootWrapper = ({
   ...props
-}) => {
+}: React.ComponentProps<typeof StudioHeader>) => {
   const appContextValue = useMemo(() => ({
     authenticatedUser: currentUser,
     config: {
@@ -40,19 +40,21 @@ const RootWrapper = ({
 
   return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values, react/prop-types
-    <IntlProvider locale="en">
+    <MemoryRouter>
-      <AppContext.Provider value={appContextValue}>
+      <IntlProvider locale="en">
-        <ResponsiveContext.Provider value={responsiveContextValue}>
+        <AppContext.Provider value={appContextValue}>
-          <StudioHeader
+          <ResponsiveContext.Provider value={responsiveContextValue}>
-            {...props}
+            <StudioHeader
-          />
+              {...props}
-        </ResponsiveContext.Provider>
+            />
-      </AppContext.Provider>
+          </ResponsiveContext.Provider>
-    </IntlProvider>
+        </AppContext.Provider>
+      </IntlProvider>
+    </MemoryRouter>
   );
 };
 
-const props = {
+const props: React.ComponentProps<typeof StudioHeader> = {
   number: '123',
   org: 'Ed',
   title: 'test',
@@ -69,7 +71,8 @@ const props = {
     },
   ],
   outlineLink: 'tEsTLInK',
-  searchButtonAction: null,
+  searchButtonAction: undefined,
+  isNewHomePage: true,
 };
 
 describe('Header', () => {
@@ -111,16 +114,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} />);
@@ -149,7 +142,7 @@ describe('Header', () => {
     });
 
     it('should not show search button', async () => {
-      const testProps = { ...props, searchButtonAction: null };
+      const testProps = { ...props, searchButtonAction: undefined };
       const { queryByRole } = render(<RootWrapper {...testProps} />);
       expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
     });
@@ -182,15 +175,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

@@ -1,11 +1,10 @@
-import React, { useContext } from 'react';
+import React, { type FunctionComponent, useContext } from 'react';
-import PropTypes from 'prop-types';
 import Responsive from 'react-responsive';
 import { AppContext } from '@edx/frontend-platform/react';
 import { ensureConfig } from '@edx/frontend-platform';
 
 import MobileHeader from './MobileHeader';
-import HeaderBody from './HeaderBody';
+import HeaderBody, { HeaderBodyProps } from './HeaderBody';
 
 ensureConfig([
   'STUDIO_BASE_URL',
@@ -15,9 +14,31 @@ ensureConfig([
   'LOGO_URL',
 ], 'Studio Header component');
 
-const StudioHeader = ({
+type Props = Pick<HeaderBodyProps,
-  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
+| 'number'
+| 'org'
+| 'title'
+| 'containerProps'
+| 'isHiddenMainMenu'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+| 'searchButtonAction'
+> & {
+  isNewHomePage: boolean;
+};
+
+const StudioHeader: FunctionComponent<Props> = ({
+  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,
@@ -29,7 +50,7 @@ const StudioHeader = ({
     username: authenticatedUser?.username,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
-    studioBaseUrl: config.STUDIO_BASE_URL,
+    studioBaseUrl: isNewHomePage ? '/home' : config.STUDIO_BASE_URL,
     logoutUrl: config.LOGOUT_URL,
     isHiddenMainMenu,
     mainMenuDropdowns,
@@ -50,32 +71,4 @@ const StudioHeader = ({
   );
 };
 
-StudioHeader.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  containerProps: HeaderBody.propTypes.containerProps,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-};
-
-StudioHeader.defaultProps = {
-  number: '',
-  org: '',
-  containerProps: {},
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-};
-
 export default StudioHeader;

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

@@ -20,9 +20,6 @@ const getUserMenuItems = ({
       {
         href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
-      }, {
-        href: `${studioBaseUrl}/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"]
+}

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',