fix: update release workflow

chore!: Dropped support for Node 12
2022-05-13 18:21:44 +05:00 · 2022-05-13 18:20:27 +05:00
45 changed files with 30800 additions and 9281 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,4 @@
 ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
-ACCOUNT_PROFILE_URL=http://localhost:1995
-ACCOUNT_SETTINGS_URL=http://localhost:1997
 BASE_URL=localhost:8080
 CREDENTIALS_BASE_URL=http://localhost:18150
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');

-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -16,4 +16,4 @@ jobs:
    secrets:
      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,24 +2,25 @@ name: Default CI
 on:
  push:
    branches:
-    - master
+      - 'master'
  pull_request:
    branches:
-    - '**'
+      - '**'
 jobs:
  tests:
    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [16]
    steps:
    - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v2
      with:
        fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v2
      with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
@@ -28,9 +29,7 @@ jobs:
      run: npm run lint
    - name: Test
      run: npm run test
-    - name: Build
-      run: npm run build
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v2
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -7,4 +7,4 @@ on:

 jobs:
  commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,5 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -2,40 +2,38 @@ name: Release CI
 on:
  push:
    branches:
-    - master
+      - master
 jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
-    - name: Checkout
-      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@v3
-      with:
-        node-version: ${{ env.NODE_VER }}
-    - 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: Test
-      run: npm run test
-    - name: i18n_extract
-      run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v3
-    - 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 }}
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - 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: Test
+        run: npm run test
+      - name: i18n_extract
+        run: npm run i18n_extract
+      - name: Coverage
+        uses: codecov/codecov-action@v2
+      - name: Build
+        run: npm run build
+      - name: Release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          semantic_version: 16
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
--- a/.github/workflows/self-assign-issue.yml
+++ b/.github/workflows/self-assign-issue.yml
@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,3 @@ temp
 src/i18n/transifex_input.json
 module.config.js
 .idea/
-
-.vscode
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-18
--- a/14
+++ b/14
@@ -1,9 +1,11 @@
-export TRANSIFEX_RESOURCE = frontend-component-header
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
+transifex_resource = frontend-component-header
+transifex_langs = "ar,fr,fr_CA,es_419,zh_CN"

 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/

 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
@@ -40,15 +42,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	$(transifex_utils) $(transifex_temp) --comments
 	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)

 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -14,7 +14,7 @@ A generic header for Open edX micro-frontend applications.
 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>`_
+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/edx/frontend-template-application/blob/master/src/index.jsx>`_

 Environment Variables
 =====================
@@ -26,8 +26,6 @@ Environment Variables
  Defaults to "localhost" in development.
 * ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
 * ``ORDER_HISTORY_URL`` - The URL of the order history page.
-* ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
-* ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings page.
 * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
  menu items when truthy.  This is intended to be used in micro-frontends like
  frontend-app-authentication in which these menus are considered distractions from the user's task.
@@ -55,8 +53,8 @@ This library has the following exports:
 Examples
 ========

-* `An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
-* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
+* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_


 ***********
@@ -65,7 +63,7 @@ Development

 Install dependencies::

-  npm ci
+  npm i

 Start the development server::

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -24,52 +24,53 @@
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-header.git"
+    "url": "git+https://github.com/edx/frontend-component-header.git"
  },
  "author": "edX",
  "license": "AGPL-3.0",
  "bugs": {
-    "url": "https://github.com/openedx/frontend-component-header/issues"
+    "url": "https://github.com/edx/frontend-component-header/issues"
  },
-  "homepage": "https://github.com/openedx/frontend-component-header#readme",
+  "homepage": "https://github.com/edx/frontend-component-header#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.27",
-    "@edx/frontend-platform": "4.2.0",
-    "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "9.3.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "10.4.9",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "9.2.2",
+    "@edx/frontend-platform": "1.15.1",
+    "@edx/paragon": "19.20.0",
+    "codecov": "3.8.3",
    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "husky": "8.0.3",
-    "jest": "29.5.0",
-    "jest-chain": "1.1.6",
+    "enzyme-adapter-react-16": "1.15.6",
+    "husky": "7.0.4",
    "prop-types": "15.8.1",
    "react": "16.14.0",
    "react-dom": "16.14.0",
-    "react-redux": "7.2.9",
-    "react-router-dom": "5.3.4",
+    "react-redux": "7.2.8",
+    "react-router-dom": "5.3.1",
    "react-test-renderer": "16.14.0",
-    "redux": "4.2.1",
-    "redux-saga": "1.2.3"
+    "reactifex": "1.1.1",
+    "redux": "4.2.0",
+    "redux-saga": "1.1.3",
+    "@testing-library/dom": "7.31.2",
+    "@testing-library/jest-dom": "5.16.4",
+    "jest": "27.5.1",
+    "jest-chain": "1.1.5",
+    "@testing-library/react": "10.4.9"
  },
  "dependencies": {
-    "@edx/paragon": "20.36.0",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
    "babel-polyfill": "6.26.0",
    "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.14"
  },
  "peerDependencies": {
-    "@edx/frontend-platform": "^4.0.0",
+    "@edx/frontend-platform": "^1.8.0",
+    "@edx/paragon": ">= 7.0.0 < 20.0.0",
    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -22,11 +22,6 @@
        "pin"
      ],
      "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
    }
  ],
  "timezone": "America/New_York"
--- a/src/Avatar.jsx
+++ b/src/Avatar.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';

 import { AvatarIcon } from './Icons';

-const Avatar = ({
+function Avatar({
  size,
  src,
  alt,
  className,
-}) => {
+}) {
  const avatar = src ? (
    <img className="d-block w-100 h-100" src={src} alt={alt} />
  ) : (
@@ -23,7 +23,7 @@ const Avatar = ({
      {avatar}
    </span>
  );
-};
+}

 Avatar.propTypes = {
  src: PropTypes.string,
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -30,7 +30,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'Header additional config');
 });

-const Header = ({ intl }) => {
+function Header({ intl }) {
  const { authenticatedUser, config } = useContext(AppContext);

  const mainMenu = [
@@ -55,12 +55,12 @@ const Header = ({ intl }) => {
    },
    {
      type: 'item',
-      href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
+      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
      content: intl.formatMessage(messages['header.user.menu.profile']),
    },
    {
      type: 'item',
-      href: config.ACCOUNT_SETTINGS_URL,
+      href: `${config.LMS_BASE_URL}/account/settings`,
      content: intl.formatMessage(messages['header.user.menu.account.settings']),
    },
    {
@@ -110,7 +110,7 @@ const Header = ({ intl }) => {
      </Responsive>
    </>
  );
-};
+}

 Header.propTypes = {
  intl: intlShape.isRequired,
--- a/src/Header.test.jsx
+++ b/src/Header.test.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
@@ -7,31 +6,28 @@ import { Context as ResponsiveContext } from 'react-responsive';

 import Header from './index';

-const HeaderComponent = ({ width, contextValue }) => (
-  <ResponsiveContext.Provider value={width}>
-    <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
-    </IntlProvider>
-  </ResponsiveContext.Provider>
-);
-
 describe('<Header />', () => {
  it('renders correctly for anonymous desktop', () => {
-    const contextValue = {
-      authenticatedUser: null,
-      config: {
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-        SITE_NAME: process.env.SITE_NAME,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        LOGO_URL: process.env.LOGO_URL,
-      },
-    };
-    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );

    const wrapper = TestRenderer.create(component);

@@ -39,22 +35,31 @@ describe('<Header />', () => {
  });

  it('renders correctly for authenticated desktop', () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: {
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-        SITE_NAME: process.env.SITE_NAME,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        LOGO_URL: process.env.LOGO_URL,
-      },
-    };
-    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );

    const wrapper = TestRenderer.create(component);

@@ -62,17 +67,26 @@ describe('<Header />', () => {
  });

  it('renders correctly for anonymous mobile', () => {
-    const contextValue = {
-      authenticatedUser: null,
-      config: {
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-        SITE_NAME: process.env.SITE_NAME,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        LOGO_URL: process.env.LOGO_URL,
-      },
-    };
-    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );

    const wrapper = TestRenderer.create(component);

@@ -80,22 +94,31 @@ describe('<Header />', () => {
  });

  it('renders correctly for authenticated mobile', () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: {
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-        SITE_NAME: process.env.SITE_NAME,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        LOGO_URL: process.env.LOGO_URL,
-      },
-    };
-    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );

    const wrapper = TestRenderer.create(component);

--- a/src/Icons.jsx
+++ b/src/Icons.jsx
@@ -1,6 +1,6 @@
 import React from 'react';

-export const MenuIcon = (props) => (
+export const MenuIcon = props => (
  <svg
    width="24px"
    height="24px"
@@ -14,7 +14,7 @@ export const MenuIcon = (props) => (
  </svg>
 );

-export const AvatarIcon = (props) => (
+export const AvatarIcon = props => (
  <svg
    width="24px"
    height="24px"
@@ -29,7 +29,7 @@ export const AvatarIcon = (props) => (
  </svg>
 );

-export const CaretIcon = (props) => (
+export const CaretIcon = props => (
  <svg
    width="16px"
    height="16px"
--- a/src/Logo.jsx
+++ b/src/Logo.jsx
@@ -1,25 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-const Logo = ({ src, alt, ...attributes }) => (
-  <img src={src} alt={alt} {...attributes} />
-);
+function Logo({ src, alt, ...attributes }) {
+  return (
+    <img src={src} alt={alt} {...attributes} />
+  );
+}

 Logo.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
 };

-const LinkedLogo = ({
+function LinkedLogo({
  href,
  src,
  alt,
  ...attributes
-}) => (
-  <a href={href} {...attributes}>
-    <img className="d-block" src={src} alt={alt} />
-  </a>
-);
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}

 LinkedLogo.propTypes = {
  href: PropTypes.string.isRequired,
--- a/src/Menu/Menu.jsx
+++ b/src/Menu/Menu.jsx
@@ -2,10 +2,12 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';

-const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
-  className: `menu-trigger ${className}`,
-  ...attributes,
-});
+function MenuTrigger({ tag, className, ...attributes }) {
+  return React.createElement(tag, {
+    className: `menu-trigger ${className}`,
+    ...attributes,
+  });
+}
 MenuTrigger.propTypes = {
  tag: PropTypes.string,
  className: PropTypes.string,
@@ -16,10 +18,12 @@ MenuTrigger.defaultProps = {
 };
 const MenuTriggerType = <MenuTrigger />.type;

-const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
-  className: ['menu-content', className].join(' '),
-  ...attributes,
-});
+function MenuContent({ tag, className, ...attributes }) {
+  return React.createElement(tag, {
+    className: ['menu-content', className].join(' '),
+    ...attributes,
+  });
+}
 MenuContent.propTypes = {
  tag: PropTypes.string,
  className: PropTypes.string,
--- a/src/StudioHeader.jsx
+++ b/src/StudioHeader.jsx
@@ -5,17 +5,11 @@ import { AppContext } from '@edx/frontend-platform/react';
 import {
  APP_CONFIG_INITIALIZED,
  ensureConfig,
-  getConfig,
  mergeConfig,
  subscribe,
 } from '@edx/frontend-platform';
-import { ActionRow } from '@edx/paragon';

-import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
-
-import { CaretIcon } from './Icons';
+import DesktopHeader from './DesktopHeader';

 import messages from './Header.messages';

@@ -34,124 +28,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  }, 'StudioHeader additional config');
 });

-class StudioDesktopHeaderBase extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
-
-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
-
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger
-          tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-        >
-          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenu.map(({ type, href, content }) => (
-            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
-          ))}
-        </MenuContent>
-      </Menu>
-    );
-  }
-
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-
-    return loggedOutItems.map((item, i, arr) => (
-      <a
-        key={`${item.type}-${item.content}`}
-        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
-        href={item.href}
-      >
-        {item.content}
-      </a>
-    ));
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      loggedIn,
-      intl,
-      actionRowContent,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
-
-    return (
-      <header className="site-header-desktop">
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        <div className={`container-fluid ${logoClasses}`}>
-          <div className="nav-container position-relative d-flex align-items-center">
-            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
-            <ActionRow>
-              {actionRowContent}
-              <nav
-                aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-                className="nav secondary-menu-container align-items-center ml-auto"
-              >
-                {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
-              </nav>
-            </ActionRow>
-          </div>
-        </div>
-      </header>
-    );
-  }
-}
-
-StudioDesktopHeaderBase.propTypes = {
-  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-  loggedIn: PropTypes.bool,
-  actionRowContent: PropTypes.element,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-StudioDesktopHeaderBase.defaultProps = {
-  userMenu: [],
-  loggedOutItems: [],
-  logo: null,
-  logoAltText: null,
-  logoDestination: null,
-  avatar: null,
-  username: null,
-  loggedIn: false,
-  actionRowContent: null,
-};
-
-const StudioDesktopHeader = injectIntl(StudioDesktopHeaderBase);
-
-const StudioHeader = ({ intl, actionRowContent }) => {
+function StudioHeader({ intl, mainMenu, appMenu }) {
  const { authenticatedUser, config } = useContext(AppContext);

  const userMenu = authenticatedUser === null ? [] : [
@@ -179,22 +56,44 @@ const StudioHeader = ({ intl, actionRowContent }) => {
    loggedIn: authenticatedUser !== null,
    username: authenticatedUser !== null ? authenticatedUser.username : null,
    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    actionRowContent,
+    mainMenu,
    userMenu,
+    appMenu,
    loggedOutItems: [],
  };

-  return <StudioDesktopHeader {...props} />;
-};
+  return <DesktopHeader {...props} />;
+}

 StudioHeader.propTypes = {
  intl: intlShape.isRequired,
-  actionRowContent: PropTypes.element,
+  appMenu: PropTypes.shape(
+    {
+      content: PropTypes.string,
+      href: PropTypes.string,
+      menuItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          href: PropTypes.string,
+          content: PropTypes.string,
+        }),
+      ),
+    },
+  ),
+  mainMenu: PropTypes.arrayOf(
+    PropTypes.shape(
+      {
+        type: PropTypes.string,
+        href: PropTypes.string,
+        content: PropTypes.string,
+      },
+    ),
+  ),
 };

 StudioHeader.defaultProps = {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  actionRowContent: <></>,
+  appMenu: null,
+  mainMenu: [],
 };

 export default injectIntl(StudioHeader);
--- a/src/StudioHeader.test.jsx
+++ b/src/StudioHeader.test.jsx
@@ -1,105 +1,132 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
+import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-import {
-  ActionRow,
-  Button,
-  Dropdown,
-} from '@edx/paragon';

 import { StudioHeader } from './index';

-const StudioHeaderComponent = ({ contextValue, appMenu = null, mainMenu = [] }) => (
-  <IntlProvider locale="en" messages={{}}>
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <StudioHeader appMenu={appMenu} mainMenu={mainMenu} />
-    </AppContext.Provider>
-  </IntlProvider>
-);
-
-const StudioHeaderContext = ({ actionRowContent = null }) => {
-  const headerContextValue = useMemo(() => ({
-    authenticatedUser: {
-      userId: 'abc123',
-      username: 'edX',
-      roles: [],
-      administrator: false,
-    },
-    config: {
-      STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-      SITE_NAME: process.env.SITE_NAME,
-      LOGIN_URL: process.env.LOGIN_URL,
-      LOGOUT_URL: process.env.LOGOUT_URL,
-      LOGO_URL: process.env.LOGO_URL,
-    },
-  }), []);
-  return (
-    <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={headerContextValue}
-      >
-        <StudioHeader actionRowContent={actionRowContent} />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
 describe('<StudioHeader />', () => {
  it('renders correctly', () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: {
-        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-        SITE_NAME: process.env.SITE_NAME,
-        LOGIN_URL: process.env.LOGIN_URL,
-        LOGOUT_URL: process.env.LOGOUT_URL,
-        LOGO_URL: process.env.LOGO_URL,
-      },
-    };
-
-    const component = <StudioHeaderComponent contextValue={contextValue} />;
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader />
+        </AppContext.Provider>
+      </IntlProvider>
+    );

    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
  });

-  it('renders correctly with optional action row content', () => {
-    const actionRowContent = (
-      <>
-        <Dropdown>
-          <Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
-            Settings
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            <Dropdown.Item as={Link} to="#">Dropdown Item 1</Dropdown.Item>
-            <Dropdown.Item as={Link} to="#">Dropdown Item 2</Dropdown.Item>
-            <Dropdown.Item as={Link} to="#">Dropdown Item 3</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-        <ActionRow.Spacer />
-        <Button
-          variant="tertiary"
-          href="#"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="Help Button"
-        >Help
-        </Button>
-      </>
+  it('renders correctly with the optional app menu', () => {
+    const appMenu = {
+      content: 'App Menu',
+      menuItems: [
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 1',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 2',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 3',
+        },
+      ],
+    };
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader appMenu={appMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
    );

-    const component = <StudioHeaderContext actionRowContent={actionRowContent} />;
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with the optional main menu', () => {
+    const mainMenu = [
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 1',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 2',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 3',
+      },
+    ];
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader mainMenu={mainMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
+    );

    const wrapper = TestRenderer.create(component);

--- a/src/snapshots/StudioHeader.test.jsx.snap
+++ b/src/snapshots/StudioHeader.test.jsx.snap
@@ -21,83 +21,83 @@ exports[`<StudioHeader /> renders correctly 1`] = `
        className="logo"
        src="https://edx-cdn.org/v3/default/logo.svg"
      />
-      <div
-        className="pgn__action-row"
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      />
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
      >
-        <nav
-          aria-label="Secondary"
-          className="nav secondary-menu-container align-items-center ml-auto"
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
        >
-          <div
-            className="menu null"
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
+          <button
+            aria-expanded={false}
+            aria-haspopup="menu"
+            aria-label="Account menu for edX"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            onClick={[Function]}
          >
-            <button
-              aria-expanded={false}
-              aria-haspopup="menu"
-              aria-label="Account menu for edX"
-              className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-              onClick={[Function]}
+            <span
+              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              style={
+                Object {
+                  "height": "1.5em",
+                  "width": "1.5em",
+                }
+              }
            >
-              <span
-                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="24px"
+                role="img"
                style={
                  Object {
                    "height": "1.5em",
                    "width": "1.5em",
                  }
                }
-              >
-                <svg
-                  aria-hidden={true}
-                  focusable="false"
-                  height="24px"
-                  role="img"
-                  style={
-                    Object {
-                      "height": "1.5em",
-                      "width": "1.5em",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                >
-                  <path
-                    d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              edX
-               
-              <svg
-                aria-hidden={true}
-                focusable="false"
-                height="16px"
-                role="img"
                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
+                viewBox="0 0 24 24"
+                width="24px"
              >
                <path
-                  d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
                  fill="currentColor"
-                  transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
                />
              </svg>
-            </button>
-          </div>
-        </nav>
-      </div>
+            </span>
+            edX
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </button>
+        </div>
+      </nav>
    </div>
  </div>
 </header>
 `;

-exports[`<StudioHeader /> renders correctly with optional action row content 1`] = `
+exports[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
 <header
  className="site-header-desktop"
 >
@@ -118,108 +118,307 @@ exports[`<StudioHeader /> renders correctly with optional action row content 1`]
        className="logo"
        src="https://edx-cdn.org/v3/default/logo.svg"
      />
-      <div
-        className="pgn__action-row"
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      />
+      <nav
+        aria-label="App"
+        className="nav app-nav"
      >
        <div
-          className="pgn__dropdown pgn__dropdown-light dropdown"
-          data-testid="dropdown"
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            onClick={[Function]}
+          >
+            App Menu
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
        >
          <button
            aria-expanded={false}
-            aria-haspopup={true}
-            className="dropdown-toggle btn btn-outline-primary"
-            disabled={false}
-            id="library-header-menu-dropdown"
+            aria-haspopup="menu"
+            aria-label="Account menu for edX"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
            onClick={[Function]}
-            type="button"
          >
-            Settings
-          </button>
-        </div>
-        <span
-          className="pgn__action-row-spacer"
-        />
-        <a
-          className="btn btn-tertiary"
-          href="#"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          rel="noopener noreferrer"
-          role="button"
-          target="_blank"
-          title="Help Button"
-        >
-          Help
-        </a>
-        <nav
-          aria-label="Secondary"
-          className="nav secondary-menu-container align-items-center ml-auto"
-        >
-          <div
-            className="menu null"
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup="menu"
-              aria-label="Account menu for edX"
-              className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-              onClick={[Function]}
+            <span
+              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              style={
+                Object {
+                  "height": "1.5em",
+                  "width": "1.5em",
+                }
+              }
            >
-              <span
-                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="24px"
+                role="img"
                style={
                  Object {
                    "height": "1.5em",
                    "width": "1.5em",
                  }
                }
-              >
-                <svg
-                  aria-hidden={true}
-                  focusable="false"
-                  height="24px"
-                  role="img"
-                  style={
-                    Object {
-                      "height": "1.5em",
-                      "width": "1.5em",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                >
-                  <path
-                    d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              edX
-               
-              <svg
-                aria-hidden={true}
-                focusable="false"
-                height="16px"
-                role="img"
                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
+                viewBox="0 0 24 24"
+                width="24px"
              >
                <path
-                  d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
                  fill="currentColor"
-                  transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
                />
              </svg>
-            </button>
-          </div>
-        </nav>
-      </div>
+            </span>
+            edX
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`<StudioHeader /> renders correctly with the optional main menu 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 1
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 2
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 3
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup="menu"
+            aria-label="Account menu for edX"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            onClick={[Function]}
+          >
+            <span
+              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              style={
+                Object {
+                  "height": "1.5em",
+                  "width": "1.5em",
+                }
+              }
+            >
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="24px"
+                role="img"
+                style={
+                  Object {
+                    "height": "1.5em",
+                    "width": "1.5em",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="24px"
+              >
+                <path
+                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            edX
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </button>
+        </div>
+      </nav>
    </div>
  </div>
 </header>
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,28 +1,34 @@
 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 caMessages from './messages/ca.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import plMessages from './messages/pl.json';
 import ruMessages from './messages/ru.json';
-import hiMessages from './messages/hi.json';
-import frCAMessages from './messages/fr_CA.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
 // no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import kokrMessages from './messages/ko_KR.json';
+import ptbrMessages from './messages/pt_BR.json';
+import zhcnMessages from './messages/zh_CN.json';

 const messages = {
  ar: arMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  pl: plMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
  'es-419': es419Messages,
  fr: frMessages,
  'zh-cn': zhcnMessages,
-  pt: ptMessages,
-  it: itMessages,
-  de: deMessages,
-  hi: hiMessages,
-  'fr-ca': frCAMessages,
-  ru: ruMessages,
-  uk: ukMessages,
+  'ko-kr': kokrMessages,
+  'pt-br': ptbrMessages,
 };

 export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,33 +1,33 @@
 {
  "general.register.sentenceCase": "التسجيل",
  "general.signIn.sentenceCase": "تسجيل الدخول",
-  "header.links.courses": "المساقات",
-  "header.links.programs": "البرامج",
-  "header.links.content.search": "اكتشف الجديد",
-  "header.links.schools": "المدارس و الشركاء",
+  "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.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.user.menu.register": "تسجيل ",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "حساب",
  "header.label.account.menu": "قائمة الحساب",
-  "header.label.account.menu.for": "قائمة حساب المستخدم {username}",
-  "header.label.main.nav": "القا|مة الرئيسية",
+  "header.label.account.menu.for": "قائمة الحساب للمستخدم {username}",
+  "header.label.main.nav": "الرئيسية",
  "header.label.main.menu": "القائمة الرئيسية",
  "header.label.main.header": "الرئيسية",
-  "header.label.secondary.nav": "القائمة الثانوية",
+  "header.label.secondary.nav": "فرعي",
  "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
-  "header.label.app.nav": "تطبيق",
+  "header.label.app.nav": "App",
  "header.menu.dashboard.label": "لوحة المعلومات",
-  "header.help.label": "المساعدة",
+  "header.help.label": "مساعدة",
  "header.menu.profile.label": "الملف الشخصي",
-  "header.menu.account.label": "الحساب",
-  "header.menu.orderHistory.label": "سجل الطلبيات",
+  "header.menu.account.label": "حساب",
+  "header.menu.orderHistory.label": "سجل الطلبات",
  "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
  "header.menu.signOut.label": "تسجيل الخروج"
 }
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1,33 +0,0 @@
-{
-  "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
@@ -12,8 +12,8 @@
  "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.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
  "header.label.account.nav": "Cuenta",
  "header.label.account.menu": "Menú de la cuenta",
  "header.label.account.menu.for": "Menú de la cuenta para {username}",
@@ -22,7 +22,7 @@
  "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.label.app.nav": "App",
  "header.menu.dashboard.label": "Panel de Control",
  "header.help.label": "Ayuda",
  "header.menu.profile.label": "Perfil",
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -1,33 +0,0 @@
-{
-  "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/id.json
+++ b/src/i18n/messages/id.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -1,33 +0,0 @@
-{
-  "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/ko_KR.json
+++ b/src/i18n/messages/ko_KR.json
@@ -0,0 +1,2 @@
+{
+}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1,33 +0,0 @@
-{
-  "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_BR.json
+++ b/src/i18n/messages/pt_BR.json
@@ -0,0 +1,2 @@
+{
+}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -1,33 +1 @@
-{
-  "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/th.json
+++ b/src/i18n/messages/th.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -1,33 +1 @@
-{
-  "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/learning-header/AnonymousUserMenu.jsx
+++ b/src/learning-header/AnonymousUserMenu.jsx
@@ -7,23 +7,25 @@ import { Button } from '@edx/paragon';

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

-const AnonymousUserMenu = ({ intl }) => (
-  <div>
-    <Button
-      className="mr-3"
-      variant="outline-primary"
-      href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
-    >
-      {intl.formatMessage(genericMessages.registerSentenceCase)}
-    </Button>
-    <Button
-      variant="primary"
-      href={`${getLoginRedirectUrl(global.location.href)}`}
-    >
-      {intl.formatMessage(genericMessages.signInSentenceCase)}
-    </Button>
-  </div>
-);
+function AnonymousUserMenu({ intl }) {
+  return (
+    <div>
+      <Button
+        className="mr-3"
+        variant="outline-primary"
+        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.registerSentenceCase)}
+      </Button>
+      <Button
+        variant="primary"
+        href={`${getLoginRedirectUrl(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.signInSentenceCase)}
+      </Button>
+    </div>
+  );
+}

 AnonymousUserMenu.propTypes = {
  intl: intlShape.isRequired,
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -10,7 +10,7 @@ import { Dropdown } from '@edx/paragon';

 import messages from './messages';

-const AuthenticatedUserDropdown = ({ intl, username }) => {
+function AuthenticatedUserDropdown({ intl, username }) {
  const dashboardMenuItem = (
    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
      {intl.formatMessage(messages.dashboard)}
@@ -29,10 +29,10 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
        </Dropdown.Toggle>
        <Dropdown.Menu className="dropdown-menu-right">
          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
            {intl.formatMessage(messages.profile)}
          </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
            {intl.formatMessage(messages.account)}
          </Dropdown.Item>
          { getConfig().ORDER_HISTORY_URL && (
@@ -47,7 +47,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
      </Dropdown>
    </>
  );
-};
+}

 AuthenticatedUserDropdown.propTypes = {
  intl: intlShape.isRequired,
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -8,16 +8,18 @@ import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';

-const LinkedLogo = ({
+function LinkedLogo({
  href,
  src,
  alt,
  ...attributes
-}) => (
-  <a href={href} {...attributes}>
-    <img className="d-block" src={src} alt={alt} />
-  </a>
-);
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}

 LinkedLogo.propTypes = {
  href: PropTypes.string.isRequired,
@@ -25,9 +27,9 @@ LinkedLogo.propTypes = {
  alt: PropTypes.string.isRequired,
 };

-const LearningHeader = ({
+function LearningHeader({
  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
-}) => {
+}) {
  const { authenticatedUser } = useContext(AppContext);

  const headerLogo = (
@@ -59,7 +61,7 @@ const LearningHeader = ({
      </div>
    </header>
  );
-};
+}

 LearningHeader.propTypes = {
  courseOrg: PropTypes.string,
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -22,8 +22,6 @@ 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';
-process.env.ACCOUNT_PROFILE_URL = 'http://localhost:1995';
-process.env.ACCOUNT_SETTINGS_URL = 'http://localhost:1997';
 process.env.BASE_URL = 'localhost:1995';
 process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
 process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
@@ -104,14 +102,16 @@ function render(
    ...renderOptions
  } = {},
 ) {
-  const Wrapper = ({ children }) => (
+  function Wrapper({ children }) {
+    return (
    // eslint-disable-next-line react/jsx-filename-extension
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        {children}
-      </AppProvider>
-    </IntlProvider>
-  );
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          {children}
+        </AppProvider>
+      </IntlProvider>
+    );
+  }

  Wrapper.propTypes = {
    children: PropTypes.node.isRequired,
Author	SHA1	Message	Date
Jawayria	916848577e	fix: update release workflow	2022-05-13 18:21:44 +05:00
Jawayria	eb1eb84f56	chore!: Dropped support for Node 12	2022-05-13 18:20:27 +05:00