chore: add experimental prepare npm script

chore: update paragon to 21.3.1
2023-10-04 20:38:13 +00:00 · 2023-10-04 18:36:57 +00:00
51 changed files with 12106 additions and 5633 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('eslint');
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,13 +11,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
@@ -33,7 +33,4 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,20 +3,19 @@ on:
  push:
    branches:
    - master
-    - alpha
 jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
      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@v3
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
@@ -30,10 +29,7 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: false
+      uses: codecov/codecov-action@v3
    - name: Build
      run: npm run build
    - name: Release
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,3 @@ module.config.js
 .idea/

 .vscode
-src/i18n/messages
--- a/.releaserc
+++ b/.releaserc
@@ -1,8 +1,5 @@
 {
-  "branches": [
-    "master",
-    {name: "alpha", prerelease: true}
-  ],
+  "branch": "master",
  "tagFormat": "v${version}",
  "verifyConditions": [
    "@semantic-release/npm",
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-component-header]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/22
+++ b/22
@@ -1,9 +1,12 @@
+export TRANSIFEX_RESOURCE = frontend-component-header
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 build:
 	rm -rf ./dist
@@ -14,7 +17,7 @@ build:
 	@rm -rf dist/__mocks__

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -32,6 +35,21 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,3 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('babel-preserve-modules');
--- a/docs/images/desktop_header.png
+++ b/docs/images/desktop_header.png
--- a/docs/images/mobile_main_menu.png
+++ b/docs/images/mobile_main_menu.png
--- a/docs/images/mobile_user_menu.png
+++ b/docs/images/mobile_user_menu.png
--- a/docs/using_custom_header.rst
+++ b/docs/using_custom_header.rst
@@ -1,111 +0,0 @@
-.. title:: Custom Header Component Documentation
-
-Custom Header Component
-=======================
-
-Overview
--------
-
-The ``Header`` component is used to display a header with a provided ``mainMenuItems``,
-``secondaryMenuItems``, and ``userMenuItems`` props. If props are provided, the component will use them; otherwise,
-if any of the props ``(mainMenuItems, secondaryMenuItems, userMenuItems)`` are not provided, default
-items will be displayed. This component provides flexibility in customization, making it suitable for a wide
-range of applications.
-
-Props Details
-------------
-
-The `Header` component accepts the following **optional** props for customization:
-
-``mainMenuItems``
-*****************
-
-The main menu items is a list of menu items objects. On desktop screens, these items are displayed on the left side next to the logo icon.
-On mobile screens, the main menu is displayed as a dropdown menu triggered by a hamburger icon. The main menu dropdown appears below the logo when opened.
-
-Example:
-::
-
-   [
-       { type: 'item', href: '/courses', content: 'Courses', isActive: true },
-       { type: 'item', href: '/programs', content: 'Programs' },
-       { type: 'item', href: '/discover', content: 'Discover New', disabled, true },
-       {
-           type: 'submenu',
-           content: 'Sub Menu Item',
-           submenuContent: (
-             <>
-                <div className="mb-1"><a rel="noopener" href="#">Submenu item 1</a></div>
-                <div className="mb-1"><a rel="noopener" href="#">Submenu item 2</a></div>
-             </>
-           ),
-       },
-   ]
-
-**Submenu Implementation**
-
-To implement a submenu, set the type to ``submenu`` and provide a ``submenuContent`` property.
-The submenuContent should be a React component (as shown in above example) that can be rendered.
-
-**Note:**
-
- The ``type`` should be ``item`` or ``submenu``. If type is ``submenu``, it should contain ``submenuContent`` instead of ``href``.
-
- If any item is to be disabled, we can pass optional ``disabled: true`` in that item object and
-
- If any item is to be active, we can pass optional ``isActive: true`` in that item object
-
-secondaryMenuItems
-******************
-
-The secondary menu items has same structure as ``mainMenuItems``. On desktop screen, these items are displayed on the right of header just before the userMenu avatar and on mobile screen,
-these items are displayed below the mainMenu items in dropdown.
-
-Example:
-::
-
-   [
-       { type: 'item', href: '/help', content: 'Help' },
-   ]
-
-userMenuItems
-*************
-
-The user menu items is list of objects. On desktop screens, these items are displayed as a dropdown menu on the most right side of the header. The dropdown is opened by clicking on the avatar icon, which is typically located at the far right of the header.
-On mobile screens, the user menu is also displayed as a dropdown menu, appearing under the avatar icon.
-
-Each object represents a group in the user menu. Each object contains the ``heading`` and
-list of menu items to be displayed in that group. Heading is optional and will be displayed only if passed. There can
-be multiple groups. For a normal user menu, a single group can be passed with empty heading.
-
-Example:
-::
-
-   [
-       {
-           heading: '',
-           items: [
-               { type: 'item', href: '/profile', content: 'Profile' },
-               { type: 'item', href: '/logout', content: 'Logout' }
-           ]
-       },
-   ]
-
-Screenshots
-***********
-
-Desktop:
-
-.. image:: ./images/desktop_header.png
-
-Mobile:
-
-.. image:: ./images/mobile_main_menu.png
-.. image:: ./images/mobile_user_menu.png
-
-Some Important Notes
--------------------
-
- Intl formatted strings should be passed in content attribute.
- Only menu items in the main menu can be disabled.
- Menu items in the main menu and user menu can have ``isActive`` prop.
--- a/example/index.js
+++ b/example/index.js
@@ -7,7 +7,6 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';

 import './index.scss';
-import StudioHeader from '../src/studio-header/StudioHeader';

 subscribe(APP_READY, () => {
  ReactDOM.render(
@@ -33,35 +32,7 @@ subscribe(APP_READY, () => {
      }}>
        <Header />
      </AppContext.Provider>
-      <h5 className="mt-2  mb-5">Logged in state</h5>
-      <AppContext.Provider value={{
-        authenticatedUser: {
-          userId: '123abc',
-          username: 'testuser',
-          roles: [],
-          administrator: false,
-        },
-        config: getConfig(),
-      }}>
-        <StudioHeader
-          number="run123"
-          org="testX"
-          title="Course Name"
-          isHiddenMainMenu={false}
-          mainMenuDropdowns={[
-            {
-              id: 'content-dropdown',
-              buttonTitle: 'Content',
-              items: [{
-                href: '#',
-                title: 'Outline',
-              }],
-            },
-          ]}
-          outlineLink="#"
-        />
-      </AppContext.Provider>
-      <h5 className="mt-2">Logged in state for Studio header</h5>
+      <h5 className="mt-2">Logged in state</h5>
    </AppProvider>,
    document.getElementById('root'),
  );
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,6 +1,6 @@
@import "@edx/brand/paragon/fonts";
@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
+@import "@edx/paragon/scss/core/core";
@import "@edx/brand/paragon/overrides";

@import "@edx/frontend-component-header/index";
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,11 +8,12 @@
  },
  "scripts": {
    "build": "make build",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --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",
+    "prepare": "npm run build"
  },
  "files": [
    "/dist"
@@ -33,15 +34,16 @@
  },
  "homepage": "https://github.com/openedx/frontend-component-header#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.1",
+    "@edx/frontend-build": "12.9.17",
+    "@edx/frontend-platform": "5.4.0",
    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.2",
-    "@openedx/paragon": "22.7.0",
-    "@testing-library/dom": "10.4.0",
+    "@testing-library/dom": "9.3.3",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "10.4.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "enzyme": "3.11.0",
    "husky": "8.0.3",
    "jest": "29.7.0",
    "jest-chain": "1.1.6",
@@ -49,26 +51,25 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.9",
-    "react-router-dom": "6.26.1",
+    "react-router-dom": "6.16.0",
    "react-test-renderer": "17.0.2",
    "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.2.3"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@edx/paragon": "21.3.1",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
-    "axios-mock-adapter": "1.22.0",
+    "axios-mock-adapter": "1.21.5",
    "babel-polyfill": "6.26.0",
-    "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",
+    "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.9.0 || ^17.0.0",
    "react-dom": "^16.9.0 || ^17.0.0"
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -19,39 +19,31 @@ class DesktopHeader extends React.Component {
    super(props);
  }

-  renderMenu(menu) {
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+
    // Nodes are accepted as a prop
-    if (!Array.isArray(menu)) {
-      return menu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
    }

-    return menu.map((menuItem) => {
+    return mainMenu.map((menuItem) => {
      const {
        type,
        href,
        content,
        submenuContent,
-        disabled,
-        isActive,
-        onClick,
      } = menuItem;

      if (type === 'item') {
        return (
-          <a
-            key={`${type}-${content}`}
-            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
-            {content}
-          </a>
+          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
        );
      }

      return (
        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
            {content} <CaretIcon role="img" aria-hidden focusable="false" />
          </MenuTrigger>
          <MenuContent className="pin-left pin-right shadow py-2">
@@ -62,14 +54,22 @@ class DesktopHeader extends React.Component {
    });
  }

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return this.renderMenu(mainMenu);
-  }
-
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return this.renderMenu(secondaryMenu);
+  // Renders an optional App Menu for
+  renderAppMenu() {
+    const { appMenu } = this.props;
+    const { content: appMenuContent, menuItems } = appMenu;
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
+          {appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {menuItems.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
  }

  renderUserMenu() {
@@ -91,24 +91,8 @@ class DesktopHeader extends React.Component {
          {username} <CaretIcon role="img" aria-hidden focusable="false" />
        </MenuTrigger>
        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenu.map((group, index) => (
-            // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
-            <React.Fragment key={index}>
-              {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
-              {group.items.map(({
-                type, content, href, disabled, isActive, onClick,
-              }) => (
-                <a
-                  className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
-                  key={`${type}-${content}`}
-                  href={href}
-                  onClick={onClick || null}
-                >
-                  {content}
-                </a>
-              ))}
-              {index < userMenu.length - 1 && <div className="dropdown-divider" role="separator" />}
-            </React.Fragment>
+          {userMenu.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
          ))}
        </MenuContent>
      </Menu>
@@ -136,6 +120,7 @@ class DesktopHeader extends React.Component {
      logoDestination,
      loggedIn,
      intl,
+      appMenu,
    } = this.props;
    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
@@ -152,17 +137,19 @@ class DesktopHeader extends React.Component {
            >
              {this.renderMainMenu()}
            </nav>
+            {appMenu ? (
+              <nav
+                aria-label={intl.formatMessage(messages['header.label.app.nav'])}
+                className="nav app-nav"
+              >
+                {this.renderAppMenu()}
+              </nav>
+            ) : null}
            <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()}
+              {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
            </nav>
          </div>
        </div>
@@ -176,19 +163,10 @@ DesktopHeader.propTypes = {
    PropTypes.node,
    PropTypes.array,
  ]),
-  secondaryMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.oneOf(['item', 'menu']),
-      href: PropTypes.string,
-      content: PropTypes.string,
-      isActive: PropTypes.bool,
-      onClick: PropTypes.func,
-    })),
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['item', 'menu']),
@@ -204,11 +182,24 @@ DesktopHeader.propTypes = {

  // i18n
  intl: intlShape.isRequired,
+
+  // appMenu
+  appMenu: PropTypes.shape(
+    {
+      content: PropTypes.string,
+      menuItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          href: PropTypes.string,
+          content: PropTypes.string,
+        }),
+      ),
+    },
+  ),
 };

 DesktopHeader.defaultProps = {
  mainMenu: [],
-  secondaryMenu: [],
  userMenu: [],
  loggedOutItems: [],
  logo: null,
@@ -217,6 +208,7 @@ DesktopHeader.defaultProps = {
  avatar: null,
  username: null,
  loggedIn: false,
+  appMenu: null,
 };

 export default injectIntl(DesktopHeader);
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -10,7 +10,6 @@ import {
  subscribe,
 } from '@edx/frontend-platform';

-import PropTypes from 'prop-types';
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';

@@ -31,68 +30,50 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'Header additional config');
 });

-/**
- * Header component for the application.
- * Displays a header with the provided main menu, secondary menu, and user menu when the user is authenticated.
- * If any of the props (mainMenuItems, secondaryMenuItems, userMenuItems) are not provided, default
- * items are displayed.
- * For more details on how to use this component, please refer to this document:
- * https://github.com/openedx/frontend-component-header/blob/master/docs/using_custom_header.rst
- *
- * @param {list} mainMenuItems - The list of main menu items to display.
- * See the documentation for the structure of main menu item.
- * @param {list} secondaryMenuItems - The list of secondary menu items to display.
- * See the documentation for the structure of secondary menu item.
- * @param {list} userMenuItems - The list of user menu items to display.
- * See the documentation for the structure of user menu item.
- */
-const Header = ({
-  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
-}) => {
+const Header = ({ intl }) => {
  const { authenticatedUser, config } = useContext(AppContext);

-  const defaultMainMenu = [
+  const mainMenu = [
    {
      type: 'item',
      href: `${config.LMS_BASE_URL}/dashboard`,
      content: intl.formatMessage(messages['header.links.courses']),
    },
  ];
-  const defaultUserMenu = authenticatedUser === null ? [] : [{
-    heading: '',
-    items: [
-      {
-        type: 'item',
-        href: `${config.LMS_BASE_URL}/dashboard`,
-        content: intl.formatMessage(messages['header.user.menu.dashboard']),
-      },
-      {
-        type: 'item',
-        href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
-        content: intl.formatMessage(messages['header.user.menu.profile']),
-      },
-      {
-        type: 'item',
-        href: config.ACCOUNT_SETTINGS_URL,
-        content: intl.formatMessage(messages['header.user.menu.account.settings']),
-      },
-      // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
-      ...(config.ORDER_HISTORY_URL ? [{
-        type: 'item',
-        href: config.ORDER_HISTORY_URL,
-        content: intl.formatMessage(messages['header.user.menu.order.history']),
-      }] : []),
-      {
-        type: 'item',
-        href: config.LOGOUT_URL,
-        content: intl.formatMessage(messages['header.user.menu.logout']),
-      },
-    ],
-  }];

-  const mainMenu = mainMenuItems || defaultMainMenu;
-  const secondaryMenu = secondaryMenuItems || [];
-  const userMenu = authenticatedUser === null ? [] : userMenuItems || defaultUserMenu;
+  const orderHistoryItem = {
+    type: 'item',
+    href: config.ORDER_HISTORY_URL,
+    content: intl.formatMessage(messages['header.user.menu.order.history']),
+  };
+
+  const userMenu = authenticatedUser === null ? [] : [
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/dashboard`,
+      content: intl.formatMessage(messages['header.user.menu.dashboard']),
+    },
+    {
+      type: 'item',
+      href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
+      content: intl.formatMessage(messages['header.user.menu.profile']),
+    },
+    {
+      type: 'item',
+      href: config.ACCOUNT_SETTINGS_URL,
+      content: intl.formatMessage(messages['header.user.menu.account.settings']),
+    },
+    {
+      type: 'item',
+      href: config.LOGOUT_URL,
+      content: intl.formatMessage(messages['header.user.menu.logout']),
+    },
+  ];
+
+  // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
+  if (config.ORDER_HISTORY_URL) {
+    userMenu.splice(-1, 0, orderHistoryItem);
+  }

  const loggedOutItems = [
    {
@@ -115,14 +96,13 @@ const Header = ({
    username: authenticatedUser !== null ? authenticatedUser.username : null,
    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
-    secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu,
    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
  };

  return (
    <>
-      <Responsive maxWidth={769}>
+      <Responsive maxWidth={768}>
        <MobileHeader {...props} />
      </Responsive>
      <Responsive minWidth={769}>
@@ -132,31 +112,8 @@ const Header = ({
  );
 };

-Header.defaultProps = {
-  mainMenuItems: null,
-  secondaryMenuItems: null,
-  userMenuItems: null,
-};
-
 Header.propTypes = {
  intl: intlShape.isRequired,
-  mainMenuItems: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  secondaryMenuItems: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  userMenuItems: PropTypes.arrayOf(PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.oneOf(['item', 'menu']),
-      href: PropTypes.string,
-      content: PropTypes.string,
-      isActive: PropTypes.bool,
-    })),
-  })),
 };

 export default injectIntl(Header);
--- a/src/Menu/Menu.jsx
+++ b/src/Menu/Menu.jsx
@@ -14,8 +14,7 @@ MenuTrigger.defaultProps = {
  tag: 'div',
  className: null,
 };
-const MenuTriggerComp = <MenuTrigger />;
-const MenuTriggerType = MenuTriggerComp.type;
+const MenuTriggerType = <MenuTrigger />.type;

 const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
  className: ['menu-content', className].join(' '),
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -19,31 +19,25 @@ class MobileHeader extends React.Component {
    super(props);
  }

-  renderMenu(menu) {
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+
    // Nodes are accepted as a prop
-    if (!Array.isArray(menu)) {
-      return menu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
    }

-    return menu.map((menuItem) => {
+    return mainMenu.map((menuItem) => {
      const {
        type,
        href,
        content,
        submenuContent,
-        disabled,
-        isActive,
-        onClick,
      } = menuItem;

      if (type === 'item') {
        return (
-          <a
-            key={`${type}-${content}`}
-            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
+          <a key={`${type}-${content}`} className="nav-link" href={href}>
            {content}
          </a>
        );
@@ -51,7 +45,7 @@ class MobileHeader extends React.Component {

      return (
        <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
+          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
            {content}
          </MenuTrigger>
          <MenuContent className="position-static pin-left pin-right py-2">
@@ -62,33 +56,13 @@ class MobileHeader extends React.Component {
    });
  }

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return this.renderMenu(mainMenu);
-  }
-
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return this.renderMenu(secondaryMenu);
-  }
-
  renderUserMenuItems() {
    const { userMenu } = this.props;

-    return userMenu.map((group) => (
-      group.items.map(({
-        type, content, href, disabled, isActive, onClick,
-      }) => (
-        <li className="nav-item" key={`${type}-${content}`}>
-          <a
-            className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
-            {content}
-          </a>
-        </li>
-      ))
+    return userMenu.map(({ type, href, content }) => (
+      <li className="nav-item" key={`${type}-${content}`}>
+        <a className="nav-link" href={href}>{content}</a>
+      </li>
    ));
  }

@@ -149,7 +123,6 @@ class MobileHeader extends React.Component {
                className="nav flex-column pin-left pin-right border-top shadow py-2"
              >
                {this.renderMainMenu()}
-                {this.renderSecondaryMenu()}
              </MenuContent>
            </Menu>
          </div>
@@ -184,19 +157,11 @@ MobileHeader.propTypes = {
    PropTypes.node,
    PropTypes.array,
  ]),
-  secondaryMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
+
  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.oneOf(['item', 'menu']),
-      href: PropTypes.string,
-      content: PropTypes.string,
-      isActive: PropTypes.bool,
-      onClick: PropTypes.func,
-    })),
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['item', 'menu']),
@@ -217,7 +182,6 @@ MobileHeader.propTypes = {

 MobileHeader.defaultProps = {
  mainMenu: [],
-  secondaryMenu: [],
  userMenu: [],
  loggedOutItems: [],
  logo: null,
--- a/src/snapshots/Header.test.jsx.snap
+++ b/src/snapshots/Header.test.jsx.snap
@@ -33,7 +33,6 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
        <a
          className="nav-link"
          href="http://localhost:18000/dashboard"
-          onClick={null}
        >
          Courses
        </a>
@@ -94,7 +93,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
          height="24px"
          role="img"
          style={
-            {
+            Object {
              "height": "1.5rem",
              "width": "1.5rem",
            }
@@ -164,7 +163,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
        <span
          className="avatar overflow-hidden d-inline-flex rounded-circle null"
          style={
-            {
+            Object {
              "height": "1.5rem",
              "width": "1.5rem",
            }
@@ -176,7 +175,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
            height="24px"
            role="img"
            style={
-              {
+              Object {
                "height": "1.5rem",
                "width": "1.5rem",
              }
@@ -230,7 +229,6 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
        <a
          className="nav-link"
          href="http://localhost:18000/dashboard"
-          onClick={null}
        >
          Courses
        </a>
@@ -255,7 +253,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
            <span
              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
              style={
-                {
+                Object {
                  "height": "1.5em",
                  "width": "1.5em",
                }
@@ -267,7 +265,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
                height="24px"
                role="img"
                style={
-                  {
+                  Object {
                    "height": "1.5em",
                    "width": "1.5em",
                  }
@@ -341,7 +339,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
          height="24px"
          role="img"
          style={
-            {
+            Object {
              "height": "1.5rem",
              "width": "1.5rem",
            }
@@ -411,7 +409,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
        <span
          className="avatar overflow-hidden d-inline-flex rounded-circle null"
          style={
-            {
+            Object {
              "height": "1.5rem",
              "width": "1.5rem",
            }
@@ -423,7 +421,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
            height="24px"
            role="img"
            style={
-              {
+              Object {
                "height": "1.5rem",
                "width": "1.5rem",
              }
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1 +1,28 @@
-export default {};
+import arMessages from './messages/ar.json';
+import frMessages from './messages/fr.json';
+import es419Messages from './messages/es_419.json';
+import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+// no need to import en messages-- they are in the defaultMessage field
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
+};
+
+export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "التسجيل",
+  "general.signIn.sentenceCase": "تسجيل الدخول",
+  "header.links.courses": "المساقات",
+  "header.links.programs": "البرامج",
+  "header.links.content.search": "اكتشف الجديد",
+  "header.links.schools": "المدارس و الشركاء",
+  "header.user.menu.dashboard": "لوحة المعلومات",
+  "header.user.menu.profile": "الملف الشخصي",
+  "header.user.menu.account.settings": "الحساب",
+  "header.user.menu.order.history": "سجل الطلبيات",
+  "header.user.menu.logout": "تسجيل الخروج",
+  "header.user.menu.login": "تسجيل الدخول",
+  "header.user.menu.register": "التسجيل",
+  "header.user.menu.studio.home": "صفحة الاستوديو الرئيسية",
+  "header.user.menu.studio.maintenance": "الصيانة",
+  "header.label.account.nav": "الحساب",
+  "header.label.account.menu": "قائمة الحساب",
+  "header.label.account.menu.for": "قائمة حساب المستخدم {username}",
+  "header.label.main.nav": "القا|مة الرئيسية",
+  "header.label.main.menu": "القائمة الرئيسية",
+  "header.label.main.header": "الرئيسية",
+  "header.label.secondary.nav": "القائمة الثانوية",
+  "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
+  "header.label.app.nav": "تطبيق",
+  "header.menu.dashboard.label": "لوحة المعلومات",
+  "header.help.label": "المساعدة",
+  "header.menu.profile.label": "الملف الشخصي",
+  "header.menu.account.label": "الحساب",
+  "header.menu.orderHistory.label": "سجل الطلبيات",
+  "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
+  "header.menu.signOut.label": "تسجيل الخروج"
+}
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Registrarse",
+  "general.signIn.sentenceCase": "Iniciar sesión",
+  "header.links.courses": "Cursos",
+  "header.links.programs": "Programas",
+  "header.links.content.search": "Encontrar nuevo",
+  "header.links.schools": "Escuelas y Socios",
+  "header.user.menu.dashboard": "Panel de Control",
+  "header.user.menu.profile": "Perfil",
+  "header.user.menu.account.settings": "Cuenta",
+  "header.user.menu.order.history": "Historial de órdenes",
+  "header.user.menu.logout": "Cerrar sesión",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Registrarse",
+  "header.user.menu.studio.home": "Inicio Studio",
+  "header.user.menu.studio.maintenance": "Mantenimiento",
+  "header.label.account.nav": "Cuenta",
+  "header.label.account.menu": "Menú de la cuenta",
+  "header.label.account.menu.for": "Menú de la cuenta para {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menú Principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Ir al contenido principal",
+  "header.label.app.nav": "Aplicación",
+  "header.menu.dashboard.label": "Panel de Control",
+  "header.help.label": "Ayuda",
+  "header.menu.profile.label": "Perfil",
+  "header.menu.account.label": "Cuenta",
+  "header.menu.orderHistory.label": "Historial de órdenes",
+  "header.navigation.skipNavLink": "Dirígete al contenido principal.",
+  "header.menu.signOut.label": "Cerrar sesión"
+}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "S'inscrire",
+  "general.signIn.sentenceCase": "Connectez-vous",
+  "header.links.courses": "Cours",
+  "header.links.programs": "Programmes",
+  "header.links.content.search": "Explorer les cours",
+  "header.links.schools": "Écoles et partenaires",
+  "header.user.menu.dashboard": "Tableau de bord",
+  "header.user.menu.profile": "Profil",
+  "header.user.menu.account.settings": "Compte",
+  "header.user.menu.order.history": "Historique des commandes",
+  "header.user.menu.logout": "Déconnexion",
+  "header.user.menu.login": "Connexion",
+  "header.user.menu.register": "S'inscrire",
+  "header.user.menu.studio.home": "Accueil Studio",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Compte",
+  "header.label.account.menu": "Menu du compte",
+  "header.label.account.menu.for": "Menu du compte pour {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menu Principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondaire",
+  "header.label.skip.nav": "Passer au contenu principal",
+  "header.label.app.nav": "Application",
+  "header.menu.dashboard.label": "Tableau de bord",
+  "header.help.label": "Aide",
+  "header.menu.profile.label": "Profil",
+  "header.menu.account.label": "Compte",
+  "header.menu.orderHistory.label": "Historique des commandes",
+  "header.navigation.skipNavLink": "Passer au contenu principal",
+  "header.menu.signOut.label": "Se déconnecter"
+}
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Inscription",
+  "general.signIn.sentenceCase": "Connexion",
+  "header.links.courses": "Cours",
+  "header.links.programs": "Programmes",
+  "header.links.content.search": "Découvrir les nouveautés",
+  "header.links.schools": "Écoles et Partenaires",
+  "header.user.menu.dashboard": "Tableau de bord",
+  "header.user.menu.profile": "Profil",
+  "header.user.menu.account.settings": "Compte",
+  "header.user.menu.order.history": "Historique des commandes",
+  "header.user.menu.logout": "Déconnexion",
+  "header.user.menu.login": "Connexion",
+  "header.user.menu.register": "S'inscrire",
+  "header.user.menu.studio.home": "Accueil Studio",
+  "header.user.menu.studio.maintenance": "Entretien",
+  "header.label.account.nav": "Compte",
+  "header.label.account.menu": "Menu de compte",
+  "header.label.account.menu.for": "Menu de compte pour {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menu principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondaire",
+  "header.label.skip.nav": "Passer au contenu de cette vue",
+  "header.label.app.nav": "Application",
+  "header.menu.dashboard.label": "Tableau de bord",
+  "header.help.label": "Aide",
+  "header.menu.profile.label": "Profil",
+  "header.menu.account.label": "Compte",
+  "header.menu.orderHistory.label": "Historique des commandes",
+  "header.navigation.skipNavLink": "Passer au contenu principal.",
+  "header.menu.signOut.label": "Se déconnecter"
+}
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Увійти",
+  "header.links.courses": "Курси",
+  "header.links.programs": "Програми",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Меню облікового запису",
+  "header.label.account.menu.for": "Меню облікового запису для {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Перейти до головного змісту",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Перейти до головного змісту.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,7 +3,7 @@ $blue: #007db8;
 $white: #fff;

@import './Menu/menu.scss';
-@import './studio-header/StudioHeader.scss';
+@import './studio-header/header.scss';

 .dropdown-item a {
  text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
  .user-dropdown {
    .btn {
      height: 3rem;
-      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-      //   padding: 0 0.5rem;
-      // }
+      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
    }
  }
 }
@@ -88,15 +88,6 @@ $white: #fff;
      height: 100%;
    }
  }
-  .secondary-menu-container {
-    .nav-link:hover,
-    .nav-link:focus,
-    .nav-link.active,
-    .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
-    }
-  }
  .main-nav {
    .nav-link {
      padding: 1.125rem 1rem;
--- a/src/learning-header/AnonymousUserMenu.jsx
+++ b/src/learning-header/AnonymousUserMenu.jsx
@@ -3,7 +3,7 @@ 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 { Button } from '@openedx/paragon';
+import { Button } from '@edx/paragon';

 import genericMessages from '../generic/messages';

--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -5,7 +5,7 @@ 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 { Dropdown } from '@openedx/paragon';
+import { Dropdown } from '@edx/paragon';

 import messages from './messages';

--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,7 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */

+import Enzyme from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';
@@ -15,6 +17,8 @@ import { IntlProvider } from 'react-intl';
 import AppProvider from '@edx/frontend-platform/react/AppProvider';
 import appMessages from './i18n';

+Enzyme.configure({ adapter: new Adapter() });
+
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
--- a/src/studio-header/CourseLockUp.jsx
+++ b/src/studio-header/CourseLockUp.jsx
@@ -4,7 +4,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  OverlayTrigger,
  Tooltip,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import messages from './messages';

 const CourseLockUp = ({
@@ -24,7 +24,7 @@ const CourseLockUp = ({
    )}
  >
    <a
-      className="course-title-lockup mr-2"
+      className="course-title-lockup w-25 mr-2"
      href={outlineLink}
      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
      data-testid="course-lock-up-block"
--- a/src/studio-header/HeaderBody.jsx
+++ b/src/studio-header/HeaderBody.jsx
@@ -1,22 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  ActionRow,
  Button,
  Container,
-  Icon,
-  IconButton,
  Nav,
  Row,
-} from '@openedx/paragon';
-import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { Close, MenuIcon } from '@edx/paragon/icons';

 import CourseLockUp from './CourseLockUp';
 import UserMenu from './UserMenu';
 import BrandNav from './BrandNav';
 import NavDropdownMenu from './NavDropdownMenu';
-import messages from './messages';

 const HeaderBody = ({
  logo,
@@ -36,10 +32,7 @@ const HeaderBody = ({
  isHiddenMainMenu,
  mainMenuDropdowns,
  outlineLink,
-  searchButtonAction,
 }) => {
-  const intl = useIntl();
-
  const renderBrandNav = (
    <BrandNav
      {...{
@@ -51,7 +44,7 @@ const HeaderBody = ({
  );

  return (
-    <Container size="xl" className="px-2.5">
+    <Container size="xl" className="px-4">
      <ActionRow as="header">
        {isHiddenMainMenu ? (
          <Row className="flex-nowrap ml-4">
@@ -71,19 +64,17 @@ const HeaderBody = ({
                Menu
              </Button>
            ) : (
-              <div className="w-25">
-                <Row className="m-0 flex-nowrap">
-                  {renderBrandNav}
-                  <CourseLockUp
-                    {...{
-                      outlineLink,
-                      number,
-                      org,
-                      title,
-                    }}
-                  />
-                </Row>
-              </div>
+              <Row className="flex-nowrap m-0">
+                {renderBrandNav}
+                <CourseLockUp
+                  {...{
+                    outlineLink,
+                    number,
+                    org,
+                    title,
+                  }}
+                />
+              </Row>
            )}
            {isMobile ? (
              <>
@@ -91,11 +82,11 @@ const HeaderBody = ({
                {renderBrandNav}
              </>
            ) : (
-              <Nav data-testid="desktop-menu" className="ml-2">
+              <Nav data-testid="desktop-menu" className="ml-4">
                {mainMenuDropdowns.map(dropdown => {
                  const { id, buttonTitle, items } = dropdown;
                  return (
-                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu {...{ id, buttonTitle, items }} />
                  );
                })}
              </Nav>
@@ -103,16 +94,6 @@ const HeaderBody = ({
          </>
        )}
        <ActionRow.Spacer />
-        {searchButtonAction && (
-          <Nav>
-            <IconButton
-              src={Search}
-              iconAs={Icon}
-              onClick={searchButtonAction}
-              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
-            />
-          </Nav>
-        )}
        <Nav>
          <UserMenu
            {...{
@@ -132,9 +113,9 @@ const HeaderBody = ({
 HeaderBody.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func,
-  toggleModalPopup: PropTypes.func,
-  isModalPopupOpen: PropTypes.bool,
+  setModalPopupTarget: PropTypes.func.isRequired,
+  toggleModalPopup: PropTypes.func.isRequired,
+  isModalPopupOpen: PropTypes.bool.isRequired,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
@@ -154,13 +135,9 @@ HeaderBody.propTypes = {
    })),
  })),
  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
 };

 HeaderBody.defaultProps = {
-  setModalPopupTarget: null,
-  toggleModalPopup: null,
-  isModalPopupOpen: false,
  logo: null,
  logoAltText: null,
  number: '',
@@ -173,7 +150,6 @@ HeaderBody.defaultProps = {
  isHiddenMainMenu: false,
  mainMenuDropdowns: [],
  outlineLink: null,
-  searchButtonAction: null,
 };

 export default HeaderBody;
--- a/src/studio-header/MobileHeader.jsx
+++ b/src/studio-header/MobileHeader.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useToggle, ModalPopup } from '@openedx/paragon';
+import { useToggle, ModalPopup } from '@edx/paragon';
 import HeaderBody from './HeaderBody';
 import MobileMenu from './MobileMenu';

@@ -38,6 +38,9 @@ const MobileHeader = ({
 MobileHeader.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
+  setModalPopupTarget: PropTypes.func.isRequired,
+  toggleModalPopup: PropTypes.func.isRequired,
+  isModalPopupOpen: PropTypes.bool.isRequired,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
--- a/src/studio-header/MobileMenu.jsx
+++ b/src/studio-header/MobileMenu.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Collapsible } from '@openedx/paragon';
+import { Collapsible } from '@edx/paragon';

 const MobileMenu = ({
  mainMenuDropdowns,
--- a/src/studio-header/NavDropdownMenu.jsx
+++ b/src/studio-header/NavDropdownMenu.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
  Dropdown,
  DropdownButton,
-} from '@openedx/paragon';
+} from '@edx/paragon';

 const NavDropdownMenu = ({
  id,
@@ -13,12 +13,10 @@ const NavDropdownMenu = ({
  <DropdownButton
    id={id}
    title={buttonTitle}
-    variant="outline-primary"
-    className="mr-2"
+    variant="tertiary"
  >
    {items.map(item => (
      <Dropdown.Item
-        key={`${item.title}-dropdown-item`}
        href={item.href}
        className="small"
      >
--- a/src/studio-header/StudioHeader.jsx
+++ b/src/studio-header/StudioHeader.jsx
@@ -16,7 +16,7 @@ ensureConfig([
 ], 'Studio Header component');

 const StudioHeader = ({
-  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
+  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink,
 }) => {
  const { authenticatedUser, config } = useContext(AppContext);
  const props = {
@@ -33,19 +33,17 @@ const StudioHeader = ({
    isHiddenMainMenu,
    mainMenuDropdowns,
    outlineLink,
-    searchButtonAction,
  };

  return (
-    <div className="studio-header">
-      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
-      <Responsive maxWidth={841}>
+    <>
+      <Responsive maxWidth={768}>
        <MobileHeader {...props} />
      </Responsive>
-      <Responsive minWidth={842}>
+      <Responsive minWidth={769}>
        <HeaderBody {...props} />
      </Responsive>
-    </div>
+    </>
  );
 };

@@ -63,7 +61,6 @@ StudioHeader.propTypes = {
    })),
  })),
  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
 };

 StudioHeader.defaultProps = {
@@ -72,7 +69,6 @@ StudioHeader.defaultProps = {
  isHiddenMainMenu: false,
  mainMenuDropdowns: [],
  outlineLink: null,
-  searchButtonAction: null,
 };

 export default StudioHeader;
--- a/src/studio-header/StudioHeader.scss
+++ b/src/studio-header/StudioHeader.scss
@@ -1,49 +0,0 @@
-$spacer: 1rem;
-$white: #FFFFFF;
-
-.studio-header {
-  position: relative;
-  z-index: 1000;
-
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
-
-  .btn-outline-primary {
-    border-color: $white;
-  }
-
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-
-  .course-title-lockup {
-    @media only screen and (min-width: 769px) {
-      padding: .5rem;
-      padding-right: $spacer;
-      border-right: 1px solid #E5E5E5;
-      width: 70%;
-    }
-  
-    overflow: hidden;
-  
-    span {
-      color: #333333;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 1.375rem;
-    }
-  }
-}
--- a/src/studio-header/StudioHeader.test.jsx
+++ b/src/studio-header/StudioHeader.test.jsx
@@ -69,7 +69,6 @@ const props = {
    },
  ],
  outlineLink: 'tEsTLInK',
-  searchButtonAction: null,
 };

 describe('Header', () => {
@@ -139,20 +138,6 @@ describe('Header', () => {

      expect(desktopMenu).toBeNull();
    });
-
-    it('should show search button', async () => {
-      const testProps = { ...props, searchButtonAction: () => undefined };
-      const { getByRole } = render(<RootWrapper {...testProps} />);
-      const searchButton = getByRole('button', { name: 'Search content' });
-
-      expect(searchButton).toBeVisible();
-    });
-
-    it('should not show search button', async () => {
-      const testProps = { ...props, searchButtonAction: null };
-      const { queryByRole } = render(<RootWrapper {...testProps} />);
-      expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
-    });
  });

  describe('mobile', () => {
--- a/src/studio-header/UserMenu.jsx
+++ b/src/studio-header/UserMenu.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Avatar,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import NavDropdownMenu from './NavDropdownMenu';
 import getUserMenuItems from './utils';

--- a/src/studio-header/header.scss
+++ b/src/studio-header/header.scss
@@ -0,0 +1,64 @@
+// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.btn-tertiary:hover {
+  color: white;
+  background-color: #00262B;
+}
+
+.course-title-lockup {
+  @media only screen and (max-width: 768px) {
+    padding-left: .5rem;
+    max-width: 70%;
+  }
+
+  @media only screen and (min-width: 769px) {
+    padding: .5rem;
+    padding-right: $spacer;
+    border-right: 1px solid #E5E5E5;
+    min-width: 70%;
+  }
+
+  overflow: hidden;
+
+  span {
+    color: #333333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.375rem;
+  }
+}
+
+.site-header-mobile,
+.site-header-desktop {
+  position: relative;
+  z-index: 1000;
+}
+
+.site-header-mobile {img {
+    height: 1.5rem;
+  }
+}
+
+.site-header-desktop {
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+}
--- a/src/studio-header/messages.js
+++ b/src/studio-header/messages.js
@@ -1,6 +1,106 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
+  'header.links.content': {
+    id: 'header.links.content',
+    defaultMessage: 'Content',
+    description: 'Label for Content menu trigger',
+  },
+  'header.links.settings': {
+    id: 'header.links.settings',
+    defaultMessage: 'Settings',
+    description: 'Label for Settings menu trigger',
+  },
+  'header.links.tools': {
+    id: 'header.links.content.tools',
+    defaultMessage: 'Tools',
+    description: 'Label for Tools menu trigger',
+  },
+  'header.links.outline': {
+    id: 'header.links.outline',
+    defaultMessage: 'Outline',
+    description: 'Link to Studio Outline page',
+  },
+  'header.links.updates': {
+    id: 'header.links.updates',
+    defaultMessage: 'Updates',
+    description: 'Link to Studio Updates page',
+  },
+  'header.links.pages': {
+    id: 'header.links.pages',
+    defaultMessage: 'Pages & Resources',
+    description: 'Link to Studio Pages page',
+  },
+  'header.links.filesAndUploads': {
+    id: 'header.links.filesAndUploads',
+    defaultMessage: 'Files & Uploads',
+    description: 'Link to Studio Files & Uploads page',
+  },
+  'header.links.textbooks': {
+    id: 'header.links.textbooks',
+    defaultMessage: 'Textbooks',
+    description: 'Link to Studio Textbooks page',
+  },
+  'header.links.videoUploads': {
+    id: 'header.links.videoUploads',
+    defaultMessage: 'Video Uploads',
+    description: 'Link to Studio Video Uploads page',
+  },
+  'header.links.scheduleAndDetails': {
+    id: 'header.links.scheduleAndDetails',
+    defaultMessage: 'Schedule & Details',
+    description: 'Link to Studio Schedule & Details page',
+  },
+  'header.links.grading': {
+    id: 'header.links.grading',
+    defaultMessage: 'Grading',
+    description: 'Link to Studio Grading page',
+  },
+  'header.links.courseTeam': {
+    id: 'header.links.courseTeam',
+    defaultMessage: 'Course Team',
+    description: 'Link to Studio Course Team page',
+  },
+  'header.links.groupConfigurations': {
+    id: 'header.links.groupConfigurations',
+    defaultMessage: 'Group Configurations',
+    description: 'Link to Studio Group Configurations page',
+  },
+  'header.links.proctoredExamSettings': {
+    id: 'header.links.proctoredExamSettings',
+    defaultMessage: 'Proctored Exam Settings',
+    description: 'Link to Studio Proctored Exam Settings page',
+  },
+  'header.links.advancedSettings': {
+    id: 'header.links.advancedSettings',
+    defaultMessage: 'Advanced Settings',
+    description: 'Link to Studio Advanced Settings page',
+  },
+  'header.links.certificates': {
+    id: 'header.links.certificates',
+    defaultMessage: 'Certificates',
+    description: 'Link to Studio Certificates page',
+  },
+  'header.links.publisher': {
+    id: 'header.links.publisher',
+    defaultMessage: 'Publisher',
+    description: 'Link to Publisher',
+  },
+  'header.links.import': {
+    id: 'header.links.import',
+    defaultMessage: 'Import',
+    description: 'Link to Studio Import page',
+  },
+  'header.links.export': {
+    id: 'header.links.export',
+    defaultMessage: 'Export',
+    description: 'Link to Studio Export page',
+  },
+  'header.links.checklists': {
+    id: 'header.links.checklists',
+    defaultMessage: 'Checklists',
+    description: 'Link to Studio Checklists page',
+  },
  'header.user.menu.studio': {
    id: 'header.user.menu.studio',
    defaultMessage: 'Studio Home',
@@ -51,11 +151,6 @@ const messages = defineMessages({
    defaultMessage: 'Back to course outline in Studio',
    description: 'The aria label for the link back to the Studio Course Outline',
  },
-  'header.label.search.nav': {
-    id: 'header.label.search.nav',
-    defaultMessage: 'Search content',
-    description: 'The aria label for the search content button nav',
-  },
 });

 export default messages;
--- a/src/studio-header/utils.js
+++ b/src/studio-header/utils.js
@@ -8,7 +8,7 @@ const getUserMenuItems = ({
 }) => {
  let items = [
    {
-      href: `${studioBaseUrl}`,
+      href: `${studioBaseUrl}}`,
      title: intl.formatMessage(messages['header.user.menu.studio']),
    }, {
      href: `${logoutUrl}`,
@@ -18,7 +18,7 @@ const getUserMenuItems = ({
  if (isAdmin) {
    items = [
      {
-        href: `${studioBaseUrl}`,
+        href: `${studioBaseUrl}}`,
        title: intl.formatMessage(messages['header.user.menu.studio']),
      }, {
        href: `${studioBaseUrl}/maintenance`,
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,10 +1,8 @@
 const path = require('path');
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('webpack-dev', {
-  entry: {
-    app: path.resolve(__dirname, 'example'),
-  },
+  entry: path.resolve(__dirname, 'example'),
  output: {
    path: path.resolve(__dirname, 'example/dist'),
    publicPath: '/',
Author	SHA1	Message	Date
Jesper Hodge	e93126c692	chore: add experimental prepare npm script	2023-10-04 20:38:13 +00:00
Jesper Hodge	24abdfc659	chore: update paragon to 21.3.1	2023-10-04 18:36:57 +00:00