fix: updating frontend-base to 3.0.0

Also locking package.json versions and updating associated @edx libraries

.env

@@ -0,0 +1,33 @@
+BASE_URL=localhost:1995
+SITE_NAME=Open edX
+LMS_BASE_URL=http://localhost:18000
+CREDENTIALS_BASE_URL=http://localhost:18150
+ECOMMERCE_BASE_URL=http://localhost:18130
+LOGIN_URL=http://localhost:18000/login
+LOGOUT_URL=http://localhost:18000/login
+CSRF_TOKEN_API_PATH=/csrf/api/v1/token
+REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
+SEGMENT_KEY=ul
+ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+USER_INFO_COOKIE_NAME=edx-user-info
+CSRF_COOKIE_NAME=csrftoken
+LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
+SITE_NAME=edX
+MARKETING_SITE_BASE_URL=http://localhost:18000
+ENTERPRISE_MARKETING_URL=http://example.com
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=my_campaign
+ENTERPRISE_MARKETING_UTM_SOURCE=edX profile
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=Footer
+SUPPORT_URL=http://localhost:18000/support
+CONTACT_URL=http://localhost:18000/contact
+OPEN_SOURCE_URL=http://localhost:18000/openedx
+TERMS_OF_SERVICE_URL=http://localhost:18000/terms-of-service
+PRIVACY_POLICY_URL=http://localhost:18000/privacy-policy
+FACEBOOK_URL=https://www.facebook.com
+TWITTER_URL=https://twitter.com
+YOU_TUBE_URL=https://www.youtube.com
+LINKED_IN_URL=https://www.linkedin.com
+REDDIT_URL=https://www.reddit.com
+APPLE_APP_STORE_URL=https://www.apple.com/ios/app-store/
+GOOGLE_PLAY_URL=https://play.google.com/store
+ORDER_HISTORY_URL=localhost:1996/orders

.env.development

@@ -1,22 +0,0 @@
-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
-ECOMMERCE_BASE_URL=http://localhost:18130
-LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
-LMS_BASE_URL=http://localhost:18000
-STUDIO_BASE_URL=http://localhost:18010
-LOGIN_URL=http://localhost:18000/login
-LOGOUT_URL=http://localhost:18000/logout
-MARKETING_SITE_BASE_URL=http://localhost:18000
-ORDER_HISTORY_URL=localhost:1996/orders
-REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
-SEGMENT_KEY=null
-SITE_NAME=Open edX
-USER_INFO_COOKIE_NAME=edx-user-info
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
-LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico

.eslintrc.js

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('eslint');

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+    "extends": "eslint-config-edx",
+    "parser": "babel-eslint",
+    "rules": {
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": [
+                    "webpack.config.js",
+                    "**/*.test.jsx",
+                    "**/*.test.js"
+                ]
+            }
+        ]
+    },
+    "env": {
+        "jest": true
+    }
+}

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -1,19 +0,0 @@
-# Run the workflow that adds new tickets that are either:
-# - labelled "DEPR"
-# - title starts with "[DEPR]"
-# - body starts with "Proposal Date" (this is the first template field)
-# to the org-wide DEPR project board
-
-name: Add newly created DEPR issues to the DEPR project board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  routeissue:
-    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
-    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 }}

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

.github/workflows/ci.yml

@@ -1,36 +0,0 @@
-name: Default CI
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-    branches:
-    - '**'
-jobs:
-  tests:
-    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 Nodejs
-      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: Build
-      run: npm run build
-    - name: i18n_extract
-      run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v3

.github/workflows/commitlint.yml

@@ -1,10 +0,0 @@
-# Run commitlint on the commit messages in a pull request.
-
-name: Lint Commit Messages
-
-on:
-  - pull_request
-
-jobs:
-  commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -1,13 +0,0 @@
-#check package-lock file version
-
-name: lockfileVersion check
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-
-jobs:
-  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/release.yml

@@ -1,41 +0,0 @@
-name: Release CI
-on:
-  push:
-    branches:
-    - 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 }}

.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

.gitignore

@@ -5,7 +5,3 @@ dist
 node_modules
 temp
 src/i18n/transifex_input.json
-module.config.js
-.idea/
-
-.vscode

.nvmrc

@@ -1 +0,0 @@
-18

.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+node_js: 12
+install:
+- npm install
+script:
+- npm run lint
+- npm run test
+- npm run build
+after_success:
+- npm run semantic-release
+- codecov
+env:
+  global:
+  # GH_TOKEN
+  - secure: CFN/uOByWC+7S+AAXECLQ0mNgoiyCDl1ZB5AT5+/qP+xEVs0ysFKDWrD9W8KeQqHqCMPUKNt23nrgxwvFCkSx+n1MAnxZmOdVJWbzGbUB9TsqrwVUALkqof1MrRB8UFVEzIRaO60iRN/L3zVXML+4GsycYX6rHyptbAypxplpljDyKrY8tc/mM7AGZ9eVFGSq+7CXXmdvkhP9kLkH1tIYvR7wjTKvZHbHf6YRjIVCiyzxM4S/E9l8JRnbERp02XosRD62PUJXXk6EJVn6Qoub6CaPnpew5crW0iRF1UJs54U29zWd/S+LuW66WkLfJu7rDq6AFJNMtMNusJxwVkOv4X+p0oJDWZEhojW+/Wm10UAu8/g5oAqeePZEGiSbT3Hp1VqOc4FY/kmOLiM+L6oq/AA2XX6iiE8lA64IH5R8ApQamF4GTUYTvKHeLPgXnGJH7A95Xy9/+jmX9I9wJREMrHrkyPjoX/NTRdG+RrebB1+An9Bt9vAbG862gbOZfgTcuWHDOlG5gcA964Fr7RqR5a62yr45Gw+Q0lTrLj5mGAjjSpMRIAQzi9e7oXmoMZnvenu/WJAe5M+u+/gv82HeXcMwLvNNGSvz+0i1xNUOoX1zHG046oGKiX0Zu+l0JfNwihJTO7vJlaITmjhfOyufwpk74xEyrhf8nLF9e5Frec=
+  # NPM_TOKEN
+  - secure: fuV04Ctf0mgbw6nTJhsTzGZ6dyafZtGVj30ZkvSWsB9hUU8KDtl7wWVW9EayCQsSyyFgPY9RVav5olgC/zljAjDGg0nfF7n8uKIABA0TXdP683WZd06bVOmDXfL26B3yM83aW2xgHZN6VCCvCE8bLP1V6eV8nsr38gDgxVbHa0YasDMmvtYrog+IjxwjcJx7fD0RbYyi7iJC++pdw9kcFqOad28Us7L/jCn+rC3CmUT4kOwPjP5g1v5sB2FA7ouN5s1hUUTKuttV32VJgRP7wbZzoHeHX5BRGSqijdXNSaK5UwzqRnM1sGZkuNDZhJbSB3q90SQrPRgV+fRizwN8zs8Htb+Kk8+wGY6zNhmi9C+lUIv7UpDYbstMWYIf39+P/24Oj+vJBjMY30M9NWB8gt1OQ0dJUoK53v1+BMVmDB0doL6I53xwzUjQetvqOF0Wm3E3OrqJP00OJdzIcAeh2DzcIRW1SrBhI4HAsl7QJZNpRw11QzJ3K2iQSiWNd8qIuX+XJjzQdn1v09gCstvbP33Vn8tP1x0XTSi8wIhTDqE0bII/Sc80Jh76nu0ItQ8pmX4lGsER4C0N3Dp7Zz51yW7E70AWWLsUrMNdF0oHoP437ZRGPhYs5OI6x5AM2jlU8fJ5aUroEsYFCwkH0OO37THohpAQpApe9zL10miTEbw=

.tx/config

@@ -1,9 +1,8 @@
 [main]
 host = https://www.transifex.com
 
-[o:open-edx:p:edx-platform:r:frontend-component-header]
+[edx-platform.frontend-component-header]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type        = KEYVALUEJSON
-
+type = KEYVALUEJSON

Makefile

@@ -1,16 +1,18 @@
-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,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
 
 build:
 	rm -rf ./dist
-	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
+	./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@rm -rf dist/**/*.test.jsx
 	@rm -rf dist/**/__snapshots__
@@ -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 --language=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,79 +1,11 @@
-#########################
 frontend-component-header
-#########################
+=========================
 
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-********
-Overview
-********
-
-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>`_
-
-Environment Variables
-=====================
-
-* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
-* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
-* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account.
-* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header.
-  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.
-
-************
-Installation
-************
-
-To install this header into your Open edX micro-frontend, run the following command in your MFE:
-
-``npm i --save @edx/frontend-component-header``
-
-This will make the component available to be imported into your application.
-
-*****
-Usage
-*****
-
-This library has the following exports:
-
-* ``(default)``: The header as a React component.
-* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
-* ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
-
-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>`_
-
-
-***********
-Development
-***********
-
-Install dependencies::
-
-  npm ci
-
-Start the development server::
-
-  npm start
-
-Build a production distribution::
-
-  npm run build
+This is the standard Open edX header for use in React applications. It has two exports:
+  - **default**: The Header Component
+  - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-component-header

babel.config.js

@@ -1,3 +1,33 @@
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('babel-preserve-modules');
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+  ],
+  env: {
+    i18n: {
+      plugins: [
+        [
+          'react-intl',
+          {
+            messagesDir: './temp/babel-plugin-react-intl',
+            moduleSourceName: '@edx/frontend-i18n',
+          },
+        ],
+      ],
+    },
+    test: {
+      presets: [
+        '@babel/preset-env',
+      ],
+    },
+  },
+};

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+};

example/.sassrc.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+// Resolve ~tilda paths used in paragon to
+// node_modules. This is used to reference
+// bootstrap specifically.
+module.exports = {
+  includePaths: [
+    path.resolve(__dirname, '../node_modules'),
+  ],
+};

example/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <title>Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>

example/index.js

@@ -2,36 +2,39 @@ import 'babel-polyfill';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-// import Header from '@edx/frontend-component-header';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-
+import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
+import { NewRelicLoggingService } from '@edx/frontend-logging';
 import './index.scss';
+import SiteHeader from '../src/';
 
-subscribe(APP_READY, () => {
+App.subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
       {/* We can fake out authentication by including another provider here with the data we want */}
       <AppContext.Provider value={{
-        authenticatedUser: null,
-        config: getConfig(),
+        authenticatedUser: {
+          userId: null,
+          username: null,
+          roles: [],
+          administrator: false,
+        },
+        config: App.config
       }}>
-        <Header />
+        <SiteHeader />
       </AppContext.Provider>
       <h5 className="mt-2 mb-5">Logged out state</h5>
 
       {/* We can fake out authentication by including another provider here with the data we want */}
       <AppContext.Provider value={{
         authenticatedUser: {
-          userId: '123abc',
+          userId: null,
           username: 'testuser',
           roles: [],
           administrator: false,
         },
-        config: getConfig(),
+        config: App.config
       }}>
-        <Header />
+        <SiteHeader />
       </AppContext.Provider>
       <h5 className="mt-2">Logged in state</h5>
     </AppProvider>,
@@ -39,6 +42,4 @@ subscribe(APP_READY, () => {
   );
 });
 
-initialize({
-  messages: []
-});
+App.initialize({ messages: [], loggingService: NewRelicLoggingService });

example/index.scss

@@ -1,6 +1,2 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
-
-@import "@edx/frontend-component-header/index";
+@import "~@edx/paragon/scss/core/core.scss";
+@import '../src/index.scss';

jest.config.js

@@ -1,7 +0,0 @@
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('jest', {
-  setupFilesAfterEnv: [
-    '<rootDir>/src/setupTest.js',
-  ],
-});

package.json

@@ -2,81 +2,96 @@
   "name": "@edx/frontend-component-header",
   "version": "1.0.0-semantically-released",
   "description": "The standard header for Open edX",
-  "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
   },
+  "main": "dist/index.js",
   "scripts": {
     "build": "make build",
-    "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"
+    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
+    "lint": "eslint --ext .js --ext .jsx .",
+    "semantic-release": "semantic-release",
+    "start": "parcel ./example/index.html --no-source-maps --out-dir example/dist",
+    "test": "jest --coverage --passWithNoTests"
   },
   "files": [
-    "/dist"
+    "/dist",
+    "/src"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "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.57",
-    "@edx/frontend-platform": "4.5.1",
-    "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "10.4.9",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "husky": "8.0.3",
-    "jest": "29.5.0",
-    "jest-chain": "1.1.6",
-    "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-redux": "7.2.9",
-    "react-test-renderer": "16.14.0",
-    "redux": "4.2.1",
-    "redux-saga": "1.2.3"
+    "@babel/cli": "7.6.0",
+    "@babel/core": "7.6.0",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
+    "@babel/preset-env": "7.6.0",
+    "@babel/preset-react": "7.0.0",
+    "@edx/frontend-analytics": "3.0.0",
+    "@edx/frontend-auth": "7.0.1",
+    "@edx/frontend-base": "3.0.0",
+    "@edx/frontend-i18n": "3.0.3",
+    "@edx/frontend-logging": "3.0.1",
+    "@edx/paragon": "7.1.4",
+    "babel-eslint": "10.0.3",
+    "babel-plugin-react-intl": "4.1.18",
+    "dotenv": "8.1.0",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "eslint": "6.3.0",
+    "eslint-config-edx": "4.0.4",
+    "jest": "24.9.0",
+    "parcel-bundler": "1.12.3",
+    "prop-types": "15.7.2",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "react-redux": "7.1.1",
+    "react-router-dom": "5.0.1",
+    "react-test-renderer": "16.9.0",
+    "reactifex": "1.1.1",
+    "redux": "4.0.4",
+    "redux-saga": "1.0.5",
+    "sass": "1.22.12",
+    "semantic-release": "15.13.24"
   },
   "dependencies": {
-    "@edx/paragon": "20.44.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",
-    "@reduxjs/toolkit": "1.9.5",
-    "axios-mock-adapter": "1.21.5",
     "babel-polyfill": "6.26.0",
-    "classnames": "2.3.2",
-    "lodash": "4.17.21",
-    "react-redux": "7.2.9",
-    "react-responsive": "8.2.0",
-    "react-router-dom": "5.3.4",
-    "react-transition-group": "4.4.5",
-    "rosie": "2.1.0",
-    "timeago.js": "4.0.2"
+    "react-responsive": "8.0.1",
+    "react-transition-group": "4.3.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^4.0.0",
-    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "@edx/frontend-analytics": "^3.0.0",
+    "@edx/frontend-base": "^3.0.0",
+    "@edx/frontend-i18n": "^3.0.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.9.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!**/node_modules/**",
+      "!**/dist/**"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@edx)"
+    ],
+    "setupFiles": [
+      "./src/setupTest.js",
+      "dotenv/config"
+    ]
   }
 }

public/index.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en-us" dir="ltr">
-  <head>
-      <title>Header</title>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

renovate.json

@@ -1,33 +1,5 @@
 {
   "extends": [
-    "config:base",
-    "schedule:weekly",
-    ":automergeLinters",
-    ":automergeMinor",
-    ":automergeTesters",
-    ":enableVulnerabilityAlerts",
-    ":rebaseStalePrs",
-    ":semanticCommits",
-    ":updateNotScheduled"
-  ],
-  "packageRules": [
-    {
-      "matchDepTypes": [
-        "devDependencies"
-      ],
-      "matchUpdateTypes": [
-        "lockFileMaintenance",
-        "minor",
-        "patch",
-        "pin"
-      ],
-      "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
-    }
-  ],
-  "timezone": "America/New_York"
+    "config:base"
+  ]
 }

src/Avatar.jsx

@@ -3,16 +3,16 @@ 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} />
   ) : (
-    <AvatarIcon style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
+    <AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
   );
 
   return (
@@ -23,7 +23,7 @@ const Avatar = ({
       {avatar}
     </span>
   );
-};
+}
 
 Avatar.propTypes = {
   src: PropTypes.string,

src/DesktopHeader.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -9,7 +8,7 @@ import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
-import messages from './Header.messages';
+import messages from './SiteHeader.messages';
 
 // Assets
 import { CaretIcon } from './Icons';
@@ -23,9 +22,7 @@ class DesktopHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
-    }
+    if (!Array.isArray(mainMenu)) return mainMenu;
 
     return mainMenu.map((menuItem) => {
       const {
@@ -54,24 +51,6 @@ class DesktopHeader extends React.Component {
     });
   }
 
-  // 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() {
     const {
       userMenu,
@@ -85,7 +64,7 @@ class DesktopHeader extends React.Component {
         <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"
+          className="btn btn-light 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" />
@@ -120,31 +99,20 @@ 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;
 
     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="container-fluid">
           <div className="nav-container position-relative d-flex align-items-center">
-            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
+            { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
               className="nav main-nav"
             >
               {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"
@@ -182,20 +150,6 @@ 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 = {
@@ -208,7 +162,6 @@ DesktopHeader.defaultProps = {
   avatar: null,
   username: null,
   loggedIn: false,
-  appMenu: null,
 };
 
 export default injectIntl(DesktopHeader);

src/Header.test.jsx

@@ -1,118 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import TestRenderer from 'react-test-renderer';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-import { Context as ResponsiveContext } from 'react-responsive';
-import { initializeMockApp } from '@edx/frontend-platform';
-import store from './store';
-
-import Header from './index';
-
-const HeaderComponent = ({ width, contextValue }) => (
-  <ResponsiveContext.Provider value={width}>
-    <IntlProvider locale="en" messages={{}}>
-      <AppProvider store={store}>
-        <AppContext.Provider
-          value={contextValue}
-        >
-          <Header />
-        </AppContext.Provider>
-      </AppProvider>
-    </IntlProvider>
-  </ResponsiveContext.Provider>
-);
-
-describe('<Header />', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: '123abc',
-        username: 'testuser',
-        administrator: false,
-        roles: [],
-      },
-    });
-  });
-  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 wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  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 wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  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 wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  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 wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-});

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"

src/Logo.jsx

@@ -1,25 +1,30 @@
 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,

src/Menu/Menu.jsx

@@ -2,10 +2,13 @@ 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 +19,13 @@ 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,
@@ -29,17 +35,6 @@ MenuContent.defaultProps = {
   className: null,
 };
 
-const menuPropTypes = {
-  tag: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  closeOnDocumentClick: PropTypes.bool,
-  respondToPointerEvents: PropTypes.bool,
-  className: PropTypes.string,
-  transitionTimeout: PropTypes.number,
-  transitionClassName: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
 
 class Menu extends React.Component {
   constructor(props) {
@@ -71,14 +66,10 @@ class Menu extends React.Component {
 
   // Event handlers
   onDocumentClick(e) {
-    if (!this.props.closeOnDocumentClick) {
-      return;
-    }
+    if (!this.props.closeOnDocumentClick) return;
 
     const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
-    if (clickIsInMenu) {
-      return;
-    }
+    if (clickIsInMenu) return;
 
     this.close();
   }
@@ -86,9 +77,7 @@ class Menu extends React.Component {
   onTriggerClick(e) {
     // Let the browser follow the link of the trigger if the menu
     // is already expanded and the trigger has an href attribute
-    if (this.state.expanded && e.target.getAttribute('href')) {
-      return;
-    }
+    if (this.state.expanded && e.target.getAttribute('href')) return;
 
     e.preventDefault();
     this.toggle();
@@ -100,9 +89,7 @@ class Menu extends React.Component {
   }
 
   onKeyDown(e) {
-    if (!this.state.expanded) {
-      return;
-    }
+    if (!this.state.expanded) return;
     switch (e.key) {
       case 'Escape': {
         e.preventDefault();
@@ -144,19 +131,16 @@ class Menu extends React.Component {
   }
 
   onMouseEnter() {
-    if (!this.props.respondToPointerEvents) {
-      return;
-    }
+    if (!this.props.respondToPointerEvents) return;
     this.open();
   }
 
   onMouseLeave() {
-    if (!this.props.respondToPointerEvents) {
-      return;
-    }
+    if (!this.props.respondToPointerEvents) return;
     this.close();
   }
 
+
   // Internal functions
 
   getFocusableElements() {
@@ -167,7 +151,7 @@ class Menu extends React.Component {
     // Any extra props are attributes for the menu
     const attributes = {};
     Object.keys(this.props)
-      .filter(property => menuPropTypes[property] === undefined)
+      .filter(property => Menu.propTypes[property] === undefined)
       .forEach((property) => {
         attributes[property] = this.props[property];
       });
@@ -189,9 +173,7 @@ class Menu extends React.Component {
   }
 
   open() {
-    if (this.props.onOpen) {
-      this.props.onOpen();
-    }
+    if (this.props.onOpen) this.props.onOpen();
     this.setState({ expanded: true });
     // Listen to touchend and click events to ensure the menu
     // can be closed on mobile, pointer, and mixed input devices
@@ -200,9 +182,7 @@ class Menu extends React.Component {
   }
 
   close() {
-    if (this.props.onClose) {
-      this.props.onClose();
-    }
+    if (this.props.onClose) this.props.onClose();
     this.setState({ expanded: false });
     document.removeEventListener('touchend', this.onDocumentClick, true);
     document.removeEventListener('click', this.onDocumentClick, true);
@@ -260,7 +240,18 @@ class Menu extends React.Component {
   }
 }
 
-Menu.propTypes = menuPropTypes;
+
+Menu.propTypes = {
+  tag: PropTypes.string,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  closeOnDocumentClick: PropTypes.bool,
+  respondToPointerEvents: PropTypes.bool,
+  className: PropTypes.string,
+  transitionTimeout: PropTypes.number,
+  transitionClassName: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
 Menu.defaultProps = {
   tag: 'div',
   className: null,
@@ -272,4 +263,5 @@ Menu.defaultProps = {
   transitionClassName: 'menu-content',
 };
 
+
 export { Menu, MenuTrigger, MenuContent };

src/MobileHeader.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -9,7 +8,7 @@ import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
-import messages from './Header.messages';
+import messages from './SiteHeader.messages';
 
 // Assets
 import { MenuIcon } from './Icons';
@@ -23,9 +22,7 @@ class MobileHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
-    }
+    if (!Array.isArray(mainMenu)) return mainMenu;
 
     return mainMenu.map((menuItem) => {
       const {
@@ -92,22 +89,17 @@ class MobileHeader extends React.Component {
       stickyOnMobile,
       intl,
       mainMenu,
-      userMenu,
-      loggedOutItems,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
 
     return (
       <header
         aria-label={intl.formatMessage(messages['header.label.main.header'])}
         className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
       >
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        {mainMenu.length > 0 ? (
-          <div className="w-100 d-flex justify-content-start">
-
+        <div className="w-100 d-flex justify-content-start">
+          {mainMenu.length > 0 ?
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -124,29 +116,26 @@ class MobileHeader extends React.Component {
               >
                 {this.renderMainMenu()}
               </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
+            </Menu> : null }
+        </div>
+        <div className="w-100 d-flex justify-content-center">
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
-        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-          <div className="w-100 d-flex justify-content-end align-items-center">
-            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-              <MenuTrigger
-                tag="button"
-                className="icon-button"
-                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-                title={intl.formatMessage(messages['header.label.account.menu'])}
-              >
-                <Avatar size="1.5rem" src={avatar} alt={username} />
-              </MenuTrigger>
-              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
+        <div className="w-100 d-flex justify-content-end align-items-center">
+          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+            <MenuTrigger
+              tag="button"
+              className="icon-button"
+              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+              title={intl.formatMessage(messages['header.label.account.menu'])}
+            >
+              <Avatar size="1.5rem" src={avatar} alt={username} />
+            </MenuTrigger>
+            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+              {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+            </MenuContent>
+          </Menu>
+        </div>
       </header>
     );
   }

src/Notifications/NotificationRowItem.jsx

@@ -1,71 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
-import { Icon } from '@edx/paragon';
-import { Link } from 'react-router-dom';
-import * as timeago from 'timeago.js';
-import { getIconByType } from './utils';
-import { markNotificationsAsRead } from './data/thunks';
-import messages from './messages';
-import timeLocale from '../common/time-locale';
-
-const NotificationRowItem = ({
-  id, type, contentUrl, content, courseName, createdAt, lastRead,
-}) => {
-  timeago.register('time-locale', timeLocale);
-  const intl = useIntl();
-  const dispatch = useDispatch();
-
-  const handleMarkAsRead = useCallback(() => {
-    dispatch(markNotificationsAsRead(id));
-  }, [dispatch, id]);
-
-  const { icon: iconComponent, class: iconClass } = getIconByType(type);
-
-  return (
-    <Link
-      target="_blank"
-      className="d-flex mb-2 align-items-center text-decoration-none"
-      to={contentUrl}
-      onClick={handleMarkAsRead}
-    >
-      <Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
-      <div className="d-flex w-100">
-        <div className="d-flex align-items-center w-100">
-          <div className="py-10px w-100 px-0 cursor-pointer">
-            <span
-              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: content }}
-            />
-            <div className="py-0 d-flex">
-              <span className="font-size-12 text-gray-500 line-height-20">
-                <span>{courseName}</span>
-                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
-                <span>{timeago.format(createdAt, 'time-locale')}</span>
-              </span>
-            </div>
-          </div>
-          {!lastRead && (
-            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
-              <span className="bg-brand-500 rounded unread" />
-            </div>
-          )}
-        </div>
-      </div>
-    </Link>
-  );
-};
-
-NotificationRowItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  contentUrl: PropTypes.string.isRequired,
-  content: PropTypes.node.isRequired,
-  courseName: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  lastRead: PropTypes.string.isRequired,
-};
-
-export default React.memo(NotificationRowItem);

src/Notifications/NotificationSections.jsx

@@ -1,81 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { Button } from '@edx/paragon';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import isEmpty from 'lodash/isEmpty';
-import messages from './messages';
-import NotificationRowItem from './NotificationRowItem';
-import { markAllNotificationsAsRead } from './data/thunks';
-import { selectNotificationsByIds, selectPaginationData, selectSelectedAppName } from './data/selectors';
-import { splitNotificationsByTime } from './utils';
-import { updatePaginationRequest } from './data/slice';
-
-const NotificationSections = () => {
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const selectedAppName = useSelector(selectSelectedAppName());
-  const notifications = useSelector(selectNotificationsByIds(selectedAppName));
-  const { currentPage, numPages } = useSelector(selectPaginationData());
-  const { today = [], earlier = [] } = useMemo(
-    () => splitNotificationsByTime(notifications),
-    [notifications],
-  );
-
-  const handleMarkAllAsRead = useCallback(() => {
-    dispatch(markAllNotificationsAsRead(selectedAppName));
-  }, [dispatch, selectedAppName]);
-
-  const updatePagination = useCallback(() => {
-    dispatch(updatePaginationRequest());
-  }, [dispatch]);
-
-  const renderNotificationSection = (section, items) => {
-    if (isEmpty(items)) { return null; }
-
-    return (
-      <div className="pb-2">
-        <div className="d-flex justify-content-between align-items-center py-10px mb-2">
-          <span className="text-gray-500 line-height-10">
-            {section === 'today' && intl.formatMessage(messages.notificationTodayHeading)}
-            {section === 'earlier' && intl.formatMessage(messages.notificationEarlierHeading)}
-          </span>
-          {notifications?.length > 0 && (section === 'earlier' ? today.length === 0 : true) && (
-            <Button
-              variant="link"
-              className="text-info-500 font-size-14 line-height-10 text-decoration-none p-0 border-0"
-              onClick={handleMarkAllAsRead}
-            >
-              {intl.formatMessage(messages.notificationMarkAsRead)}
-            </Button>
-          )}
-        </div>
-        {items.map((notification) => (
-          <NotificationRowItem
-            key={notification.id}
-            id={notification.id}
-            type={notification.type}
-            contentUrl={notification.contentUrl}
-            content={notification.content}
-            courseName={notification.courseName}
-            createdAt={notification.createdAt}
-            lastRead={notification.lastRead}
-          />
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <div className="mt-4 px-4">
-      {renderNotificationSection('today', today)}
-      {renderNotificationSection('earlier', earlier)}
-      {currentPage < numPages && (
-        <Button variant="primary" className="w-100 bg-primary-500" onClick={updatePagination}>
-          {intl.formatMessage(messages.loadMoreNotifications)}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(NotificationSections);

src/Notifications/NotificationTabs.jsx

@@ -1,52 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Tab, Tabs } from '@edx/paragon';
-import NotificationSections from './NotificationSections';
-import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
-import {
-  selectNotificationTabs, selectNotificationTabsCount, selectPaginationData, selectSelectedAppName,
-} from './data/selectors';
-import { updateAppNameRequest } from './data/slice';
-
-const NotificationTabs = () => {
-  const dispatch = useDispatch();
-  const selectedAppName = useSelector(selectSelectedAppName());
-  const notificationUnseenCounts = useSelector(selectNotificationTabsCount());
-  const notificationTabs = useSelector(selectNotificationTabs());
-  const { currentPage } = useSelector(selectPaginationData());
-
-  useEffect(() => {
-    dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage, pageSize: 10 }));
-    if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); }
-  }, [currentPage, selectedAppName]);
-
-  const handleActiveTab = useCallback((appName) => {
-    dispatch(updateAppNameRequest({ appName }));
-  }, []);
-
-  const tabArray = useMemo(() => notificationTabs?.map((appName) => (
-    <Tab
-      key={appName}
-      eventKey={appName}
-      title={appName}
-      notification={notificationUnseenCounts[appName]}
-      tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
-    >
-      {appName === selectedAppName && (<NotificationSections />)}
-    </Tab>
-  )), [notificationUnseenCounts, selectedAppName, notificationTabs]);
-
-  return (
-    <Tabs
-      variant="tabs"
-      defaultActiveKey={selectedAppName}
-      onSelect={handleActiveTab}
-      className="px-2.5 text-primary-500"
-    >
-      {tabArray}
-    </Tabs>
-  );
-};
-
-export default React.memo(NotificationTabs);

src/Notifications/data/__factories__/index.js

@@ -1 +0,0 @@
-import './notifications.factory';

src/Notifications/data/__factories__/notifications.factory.js

@@ -1,22 +0,0 @@
-import { Factory } from 'rosie';
-
-Factory.define('notificationsCount')
-  .attr('count', 45)
-  .attr('countByAppName', {
-    reminders: 10,
-    discussions: 20,
-    grades: 10,
-    authoring: 5,
-  })
-  .attr('showNotificationsTray', true);
-
-Factory.define('notification')
-  .sequence('id')
-  .attr('type', 'post')
-  .sequence('content', ['id'], (idx, notificationId) => `<p><b>User ${idx}</b> posts <b>Hello and welcome to SC0x
-  ${notificationId}!</b></p>`)
-  .attr('course_name', 'Supply Chain Analytics')
-  .sequence('content_url', (idx) => `https://example.com/${idx}`)
-  .attr('last_read', null)
-  .attr('last_seen', null)
-  .sequence('created_at', ['createdDate'], (idx, date) => date);

src/Notifications/data/api.js

@@ -1,44 +0,0 @@
-import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-
-export const getNotificationsCountApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/count/`;
-export const getNotificationsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`;
-export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-unseen/${appName}/`;
-export const markNotificationAsReadApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/read/`;
-
-export async function getNotifications(appName, page, pageSize) {
-  const params = snakeCaseObject({ page, pageSize });
-  const { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params });
-
-  const startIndex = (page - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-
-  const notifications = data.slice(startIndex, endIndex);
-  return { notifications, numPages: 2, currentPage: page };
-}
-
-export async function getNotificationCounts() {
-  const { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl());
-
-  return data;
-}
-
-export async function markNotificationSeen(appName) {
-  const { data } = await getAuthenticatedHttpClient().put(`${markNotificationsSeenApiUrl(appName)}`);
-
-  return data;
-}
-
-export async function markAllNotificationRead(appName) {
-  const params = snakeCaseObject({ appName });
-  const { data } = await getAuthenticatedHttpClient().put(markNotificationAsReadApiUrl(), { params });
-
-  return data;
-}
-
-export async function markNotificationRead(notificationId) {
-  const params = snakeCaseObject({ notificationId });
-  const { data } = await getAuthenticatedHttpClient().put(markNotificationAsReadApiUrl(), { params });
-
-  return { data, id: notificationId };
-}

src/Notifications/data/api.test.js

@@ -1,150 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import {
-  getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
-  getNotificationCounts, getNotifications, markNotificationSeen, markAllNotificationRead, markNotificationRead,
-} from './api';
-
-import './__factories__';
-
-const notificationCountsApiUrl = getNotificationsCountApiUrl();
-const notificationsApiUrl = getNotificationsApiUrl();
-const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions');
-const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
-
-let axiosMock = null;
-
-describe('Notifications API', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: '123abc',
-        username: 'testuser',
-        administrator: false,
-        roles: [],
-      },
-    });
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    Factory.resetAll();
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  it('Successfully get notification counts for different tabs.', async () => {
-    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
-
-    const { count, countByAppName } = await getNotificationCounts();
-
-    expect(count).toEqual(45);
-    expect(countByAppName.reminders).toEqual(10);
-    expect(countByAppName.discussions).toEqual(20);
-    expect(countByAppName.grades).toEqual(10);
-    expect(countByAppName.authoring).toEqual(5);
-  });
-
-  it.each([
-    { statusCode: 404, message: 'Failed to get notification counts.' },
-    { statusCode: 403, message: 'Denied to get notification counts.' },
-  ])('%s for notification counts API.', async ({ statusCode, message }) => {
-    axiosMock.onGet(notificationCountsApiUrl).reply(statusCode, { message });
-    try {
-      await getNotificationCounts();
-    } catch (error) {
-      expect(error.response.status).toEqual(statusCode);
-      expect(error.response.data.message).toEqual(message);
-    }
-  });
-
-  it('Successfully get notifications.', async () => {
-    axiosMock.onGet(notificationsApiUrl).reply(
-      200,
-      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
-    );
-
-    const { notifications } = await getNotifications('discussions', 1, 10);
-
-    expect(notifications).toHaveLength(2);
-  });
-
-  it.each([
-    { statusCode: 404, message: 'Failed to get notifications.' },
-    { statusCode: 403, message: 'Denied to get notifications.' },
-  ])('%s for notification API.', async ({ statusCode, message }) => {
-    axiosMock.onGet(notificationsApiUrl).reply(statusCode, { message });
-    try {
-      await getNotifications({ page: 1, pageSize: 10 });
-    } catch (error) {
-      expect(error.response.status).toEqual(statusCode);
-      expect(error.response.data.message).toEqual(message);
-    }
-  });
-
-  it('Successfully marked all notifications as seen for selected app.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200, { message: 'Notifications marked seen.' });
-
-    const { message } = await markNotificationSeen('discussions');
-
-    expect(message).toEqual('Notifications marked seen.');
-  });
-
-  it.each([
-    { statusCode: 404, message: 'Failed to mark all notifications as seen for selected app.' },
-    { statusCode: 403, message: 'Denied to mark all notifications as seen for selected app.' },
-  ])('%s for notification mark as seen API.', async ({ statusCode, message }) => {
-    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode, { message });
-    try {
-      await markNotificationSeen('discussions');
-    } catch (error) {
-      expect(error.response.status).toEqual(statusCode);
-      expect(error.response.data.message).toEqual(message);
-    }
-  });
-
-  it('Successfully marked all notifications as read for selected app.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
-
-    const { message } = await markAllNotificationRead('discussions');
-
-    expect(message).toEqual('Notifications marked read.');
-  });
-
-  it.each([
-    { statusCode: 404, message: 'Failed to mark all notifications as read for selected app.' },
-    { statusCode: 403, message: 'Denied to mark all notifications as read for selected app.' },
-  ])('%s for notification mark all as read API.', async ({ statusCode, message }) => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
-    try {
-      await markAllNotificationRead('discussions');
-    } catch (error) {
-      expect(error.response.status).toEqual(statusCode);
-      expect(error.response.data.message).toEqual(message);
-    }
-  });
-
-  it('Successfully marked notification as read.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
-
-    const { data } = await markNotificationRead(1);
-
-    expect(data.message).toEqual('Notification marked read.');
-  });
-
-  it.each([
-    { statusCode: 404, message: 'Failed to mark notification as read.' },
-    { statusCode: 403, message: 'Denied to mark notification as read.' },
-  ])('%s for notification mark as read API.', async ({ statusCode, message }) => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
-    try {
-      await markAllNotificationRead(1);
-    } catch (error) {
-      expect(error.response.status).toEqual(statusCode);
-      expect(error.response.data.message).toEqual(message);
-    }
-  });
-});

src/Notifications/data/hook.js

@@ -1,11 +0,0 @@
-import { breakpoints, useWindowSize } from '@edx/paragon';
-
-export function useIsOnMediumScreen() {
-  const windowSize = useWindowSize();
-  return breakpoints.large.maxWidth > windowSize.width && windowSize.width >= breakpoints.medium.minWidth;
-}
-
-export function useIsOnLargeScreen() {
-  const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.extraLarge.minWidth;
-}

src/Notifications/data/index.js

@@ -1 +0,0 @@
-export * from './slice';

src/Notifications/data/notifications.json

@@ -1,134 +0,0 @@
-{
-  "data": [
-    {
-      "id": 1,
-      "type": "post",
-      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:46:11.979531Z"
-    },
-    {
-      "id": 2,
-      "type": "help",
-      "content": "<p><b>MITx_Learner</b> asked <b>What grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 3,
-      "type": "post",
-      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:46:11.979531Z"
-    },
-    {
-      "id": 4,
-      "type": "respond",
-      "content": "<p><b>MITx_Learner</b> responded <b>Can't find linear regression in section 3 review</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 5,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b> response on a post your following <b>Can't find linear regression in section 3 review</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 6,
-      "type": "question",
-      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 7,
-      "type": "answer",
-      "content": "<p><b>MITx_Expert</b> answered <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-05T00:36:11.979531Z"
-    },
-    {
-      "id": 8,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 9,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b>what grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 10,
-      "type": "comment",
-      "content": "<p><b>MITx_Learner</b> commented on your response in <b>Convexity of f(x)=1/x , x>1</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 11,
-      "type": "answer",
-      "content": "<p><b>SCM_Lead’s</b> response has been marked as answer in your post <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 12,
-      "type": "endorsed",
-      "content": "<p>Your response has been endorsed in <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    },
-    {
-      "id": 13,
-      "type": "reported",
-      "content": "<p><b>MITx Learner’s</b> post has been reported <b>“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”</b></p>",
-      "course_name": "Supply Chain Analytics",
-      "content_url": "",
-      "last_read": null,
-      "last_seen": null,
-      "created_at": "2023-06-01T00:36:11.979531Z"
-    }
-  ]
-}

src/Notifications/data/redux.test.js

@@ -1,164 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import { initializeStore } from '../../store';
-import executeThunk from '../../test-utils';
-import {
-  getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
-} from './api';
-import {
-  fetchAppsNotificationCount, fetchNotificationList, markNotificationsAsRead, markAllNotificationsAsRead,
-  resetNotificationState, markNotificationsAsSeen,
-} from './thunks';
-
-import './__factories__';
-
-const notificationCountsApiUrl = getNotificationsCountApiUrl();
-const notificationsApiUrl = getNotificationsApiUrl();
-const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
-const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions');
-
-let axiosMock;
-let store;
-
-describe('Notification Redux', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: '123abc',
-        username: 'testuser',
-        administrator: false,
-        roles: [],
-      },
-    });
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    Factory.resetAll();
-    store = initializeStore();
-
-    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
-    axiosMock.onGet(notificationsApiUrl).reply(
-      200,
-      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
-    );
-    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
-    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  it('Successfully loaded initial notification states in the redux.', async () => {
-    executeThunk(resetNotificationState(), store.dispatch, store.getState);
-
-    const { notifications } = store.getState();
-
-    expect(notifications.notificationStatus).toEqual('idle');
-    expect(notifications.appName).toEqual('discussions');
-    expect(notifications.appsId).toHaveLength(0);
-    expect(notifications.apps).toEqual({});
-    expect(notifications.notifications).toEqual({});
-    expect(notifications.tabsCount).toEqual({});
-    expect(notifications.showNotificationsTray).toEqual(false);
-    expect(notifications.pagination.count).toEqual(10);
-    expect(notifications.pagination.numPages).toEqual(1);
-    expect(notifications.pagination.currentPage).toEqual(1);
-    expect(notifications.pagination.nextPage).toBeNull();
-  });
-
-  it('Successfully loaded notifications list in the redux.', async () => {
-    const { notifications: { notifications } } = store.getState();
-
-    expect(Object.keys(notifications)).toHaveLength(2);
-  });
-
-  it.each([
-    { statusCode: 404, status: 'failed' },
-    { statusCode: 403, status: 'denied' },
-  ])('%s to load notifications list in the redux.', async ({ statusCode, status }) => {
-    axiosMock.onGet(notificationsApiUrl).reply(statusCode);
-    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus } } = store.getState();
-
-    expect(notificationStatus).toEqual(status);
-  });
-
-  it('Successfully loaded notification counts in the redux.', async () => {
-    const { notifications: { tabsCount } } = store.getState();
-
-    expect(tabsCount.count).toEqual(25);
-    expect(tabsCount.reminders).toEqual(10);
-    expect(tabsCount.discussions).toEqual(0);
-    expect(tabsCount.grades).toEqual(10);
-    expect(tabsCount.authoring).toEqual(5);
-  });
-
-  it.each([
-    { statusCode: 404, status: 'failed' },
-    { statusCode: 403, status: 'denied' },
-  ])('%s to load notification counts in the redux.', async ({ statusCode, status }) => {
-    axiosMock.onGet(notificationCountsApiUrl).reply(statusCode);
-    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus } } = store.getState();
-
-    expect(notificationStatus).toEqual(status);
-  });
-
-  it('Successfully marked all notifications as seen for selected app.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200);
-    await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState);
-
-    expect(store.getState().notifications.notificationStatus).toEqual('successful');
-  });
-
-  it.each([
-    { statusCode: 404, status: 'failed' },
-    { statusCode: 403, status: 'denied' },
-  ])('%s to mark all notifications as seen for selected app.', async ({ statusCode, status }) => {
-    axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode);
-    await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus } } = store.getState();
-
-    expect(notificationStatus).toEqual(status);
-  });
-
-  it('Successfully marked all notifications as read for selected app in the redux.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200);
-    await executeThunk(markAllNotificationsAsRead('discussions'), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus, notifications } } = store.getState();
-    const firstNotification = Object.values(notifications)[0];
-
-    expect(notificationStatus).toEqual('successful');
-    expect(firstNotification.lastRead).not.toBeNull();
-  });
-
-  it('Successfully marked notification as read in the redux.', async () => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200);
-    await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus, notifications } } = store.getState();
-    const firstNotification = Object.values(notifications)[0];
-
-    expect(notificationStatus).toEqual('successful');
-    expect(firstNotification.lastRead).not.toBeNull();
-  });
-
-  it.each([
-    { statusCode: 404, status: 'failed' },
-    { statusCode: 403, status: 'denied' },
-  ])('%s to marked notification as read in the redux.', async ({ statusCode, status }) => {
-    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode);
-    await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
-
-    const { notifications: { notificationStatus } } = store.getState();
-
-    expect(notificationStatus).toEqual(status);
-  });
-});

src/Notifications/data/selector.test.jsx

@@ -1,126 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import { initializeStore } from '../../store';
-import executeThunk from '../../test-utils';
-import { getNotificationsApiUrl, getNotificationsCountApiUrl } from './api';
-import {
-  selectNotifications,
-  selectNotificationsByIds,
-  selectNotificationStatus,
-  selectNotificationTabs,
-  selectNotificationTabsCount,
-  selectPaginationData,
-  selectSelectedAppName,
-  selectSelectedAppNotificationIds,
-  selectShowNotificationTray,
-} from './selectors';
-import { fetchAppsNotificationCount, fetchNotificationList } from './thunks';
-
-import './__factories__';
-
-const notificationCountsApiUrl = getNotificationsCountApiUrl();
-const notificationsApiUrl = getNotificationsApiUrl();
-
-let axiosMock;
-let store;
-
-describe('Notification Selectors', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: '123abc',
-        username: 'testuser',
-        administrator: false,
-        roles: [],
-      },
-    });
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    Factory.resetAll();
-    store = initializeStore();
-
-    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
-    axiosMock.onGet(notificationsApiUrl).reply(
-      200,
-      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
-    );
-    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
-    await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  it('Should return notification status.', async () => {
-    const state = store.getState();
-    const status = selectNotificationStatus()(state);
-
-    expect(status).toEqual('successful');
-  });
-
-  it('Should return notification tabs count.', async () => {
-    const state = store.getState();
-    const tabsCount = selectNotificationTabsCount()(state);
-
-    expect(tabsCount.count).toEqual(25);
-    expect(tabsCount.reminders).toEqual(10);
-    expect(tabsCount.discussions).toEqual(0);
-    expect(tabsCount.grades).toEqual(10);
-    expect(tabsCount.authoring).toEqual(5);
-  });
-
-  it('Should return notification tabs.', async () => {
-    const state = store.getState();
-    const tabs = selectNotificationTabs()(state);
-
-    expect(tabs).toHaveLength(4);
-  });
-
-  it('Should return selected app notification ids.', async () => {
-    const state = store.getState();
-    const notificationIds = selectSelectedAppNotificationIds('discussions')(state);
-
-    expect(notificationIds).toHaveLength(2);
-  });
-
-  it('Should return show notification tray status.', async () => {
-    const state = store.getState();
-    const showNotificationTrayStatus = selectShowNotificationTray()(state);
-
-    expect(showNotificationTrayStatus).toEqual(true);
-  });
-
-  it('Should return notifications.', async () => {
-    const state = store.getState();
-    const notifications = selectNotifications()(state);
-
-    expect(Object.keys(notifications)).toHaveLength(2);
-  });
-
-  it('Should return notifications from Ids.', async () => {
-    const state = store.getState();
-    const notifications = selectNotificationsByIds('discussions')(state);
-
-    expect(notifications).toHaveLength(2);
-  });
-
-  it('Should return selected app name.', async () => {
-    const state = store.getState();
-    const appName = selectSelectedAppName()(state);
-
-    expect(appName).toEqual('discussions');
-  });
-
-  it('Should return pagination data.', async () => {
-    const state = store.getState();
-    const paginationData = selectPaginationData()(state);
-
-    expect(paginationData.count).toEqual(10);
-    expect(paginationData.currentPage).toEqual(1);
-    expect(paginationData.numPages).toEqual(2);
-  });
-});

src/Notifications/data/selectors.js

@@ -1,23 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-export const selectNotificationStatus = () => state => state.notifications.notificationStatus;
-
-export const selectNotificationTabsCount = () => state => state.notifications.tabsCount;
-
-export const selectNotificationTabs = () => state => state.notifications.appsId;
-
-export const selectSelectedAppNotificationIds = (appName) => state => state.notifications.apps[appName] ?? [];
-
-export const selectShowNotificationTray = () => state => state.notifications.showNotificationsTray;
-
-export const selectNotifications = () => state => state.notifications.notifications;
-
-export const selectNotificationsByIds = (appName) => createSelector(
-  selectNotifications(),
-  selectSelectedAppNotificationIds(appName),
-  (notifications, notificationIds) => notificationIds.map((notificationId) => notifications[notificationId]) || [],
-);
-
-export const selectSelectedAppName = () => state => state.notifications.appName;
-
-export const selectPaginationData = () => state => state.notifications.pagination;

src/Notifications/data/slice.js

@@ -1,154 +0,0 @@
-/* eslint-disable no-param-reassign */
-import { createSlice } from '@reduxjs/toolkit';
-
-export const RequestStatus = {
-  IDLE: 'idle',
-  LOADING: 'in-progress',
-  LOADED: 'successful',
-  FAILED: 'failed',
-  DENIED: 'denied',
-};
-
-const initialState = {
-  notificationStatus: 'idle',
-  appName: 'discussions',
-  appsId: [],
-  apps: {},
-  notifications: {},
-  tabsCount: {},
-  showNotificationsTray: false,
-  pagination: {
-    count: 10,
-    numPages: 1,
-    currentPage: 1,
-    nextPage: null,
-  },
-};
-const slice = createSlice({
-  name: 'notifications',
-  initialState,
-  reducers: {
-    fetchNotificationDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    fetchNotificationFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    fetchNotificationRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    fetchNotificationSuccess: (state, { payload }) => {
-      const {
-        newNotificationIds, notificationsKeyValuePair, numPages, currentPage,
-      } = payload;
-      const existingNotificationIds = state.apps[state.appName];
-
-      state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
-      state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
-      state.tabsCount.count -= state.tabsCount[state.appName];
-      state.tabsCount[state.appName] = 0;
-      state.notificationStatus = RequestStatus.LOADED;
-      state.pagination.numPages = numPages;
-      state.pagination.currentPage = currentPage;
-    },
-    fetchNotificationsCountDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    fetchNotificationsCountFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    fetchNotificationsCountRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    fetchNotificationsCountSuccess: (state, { payload }) => {
-      const {
-        countByAppName, appIds, apps, count, showNotificationsTray,
-      } = payload;
-      state.tabsCount = { count, ...countByAppName };
-      state.appsId = appIds;
-      state.apps = apps;
-      state.showNotificationsTray = showNotificationsTray;
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsSeenRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markNotificationsAsSeenSuccess: (state) => {
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsSeenDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markNotificationsAsSeenFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    markAllNotificationsAsReadRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markAllNotificationsAsReadSuccess: (state) => {
-      const updatedNotifications = Object.fromEntries(
-        Object.entries(state.notifications).map(([key, notification]) => [
-          key, { ...notification, lastRead: new Date().toISOString() },
-        ]),
-      );
-      state.notifications = updatedNotifications;
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markAllNotificationsAsReadDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markAllNotificationsAsReadFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    markNotificationsAsReadRequest: (state) => {
-      state.notificationStatus = RequestStatus.LOADING;
-    },
-    markNotificationsAsReadSuccess: (state, { payload }) => {
-      const date = new Date().toISOString();
-      state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
-      state.notificationStatus = RequestStatus.LOADED;
-    },
-    markNotificationsAsReadDenied: (state) => {
-      state.notificationStatus = RequestStatus.DENIED;
-    },
-    markNotificationsAsReadFailure: (state) => {
-      state.notificationStatus = RequestStatus.FAILED;
-    },
-    resetNotificationStateRequest: () => initialState,
-    updateAppNameRequest: (state, { payload }) => {
-      state.appName = payload.appName;
-      state.pagination.currentPage = 1;
-    },
-    updatePaginationRequest: (state) => {
-      state.pagination.currentPage += 1;
-    },
-  },
-});
-
-export const {
-  fetchNotificationDenied,
-  fetchNotificationFailure,
-  fetchNotificationRequest,
-  fetchNotificationSuccess,
-  fetchNotificationsCountDenied,
-  fetchNotificationsCountFailure,
-  fetchNotificationsCountRequest,
-  fetchNotificationsCountSuccess,
-  markNotificationsAsSeenRequest,
-  markNotificationsAsSeenSuccess,
-  markNotificationsAsSeenFailure,
-  markNotificationsAsSeenDenied,
-  markAllNotificationsAsReadDenied,
-  markAllNotificationsAsReadRequest,
-  markAllNotificationsAsReadSuccess,
-  markAllNotificationsAsReadFailure,
-  markNotificationsAsReadDenied,
-  markNotificationsAsReadRequest,
-  markNotificationsAsReadSuccess,
-  markNotificationsAsReadFailure,
-  resetNotificationStateRequest,
-  updateAppNameRequest,
-  updatePaginationRequest,
-} = slice.actions;
-
-export const notificationsReducer = slice.reducer;

src/Notifications/data/thunks.js

@@ -1,130 +0,0 @@
-import { camelCaseObject } from '@edx/frontend-platform';
-import {
-  fetchNotificationSuccess,
-  fetchNotificationRequest,
-  fetchNotificationFailure,
-  fetchNotificationDenied,
-  fetchNotificationsCountFailure,
-  fetchNotificationsCountRequest,
-  fetchNotificationsCountSuccess,
-  fetchNotificationsCountDenied,
-  markNotificationsAsSeenRequest,
-  markNotificationsAsSeenSuccess,
-  markNotificationsAsSeenFailure,
-  markNotificationsAsSeenDenied,
-  markNotificationsAsReadDenied,
-  resetNotificationStateRequest,
-  markAllNotificationsAsReadRequest,
-  markAllNotificationsAsReadSuccess,
-  markAllNotificationsAsReadFailure,
-  markAllNotificationsAsReadDenied,
-  markNotificationsAsReadRequest,
-  markNotificationsAsReadSuccess,
-  markNotificationsAsReadFailure,
-} from './slice';
-import {
-  getNotifications, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
-} from './api';
-import { getHttpErrorStatus } from '../utils';
-
-const normalizeNotificationCounts = ({ countByAppName, count, showNotificationsTray }) => {
-  const appIds = Object.keys(countByAppName);
-  const apps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
-  return {
-    countByAppName, appIds, apps, count, showNotificationsTray,
-  };
-};
-
-const normalizeNotifications = ({ notifications }) => {
-  const newNotificationIds = notifications.map(notification => notification.id.toString());
-  const notificationsKeyValuePair = notifications.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
-  return {
-    newNotificationIds, notificationsKeyValuePair,
-  };
-};
-
-export const fetchNotificationList = ({ appName, page, pageSize }) => (
-  async (dispatch) => {
-    try {
-      dispatch(fetchNotificationRequest({ appName }));
-      const data = await getNotifications(appName, page, pageSize);
-      const normalisedData = normalizeNotifications((camelCaseObject(data)));
-      dispatch(fetchNotificationSuccess({ ...normalisedData, numPages: data.numPages, currentPage: data.currentPage }));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(fetchNotificationDenied(appName));
-      } else {
-        dispatch(fetchNotificationFailure(appName));
-      }
-    }
-  }
-);
-
-export const fetchAppsNotificationCount = () => (
-  async (dispatch) => {
-    try {
-      dispatch(fetchNotificationsCountRequest());
-      const data = await getNotificationCounts();
-      const normalisedData = normalizeNotificationCounts((camelCaseObject(data)));
-      dispatch(fetchNotificationsCountSuccess({ ...normalisedData }));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(fetchNotificationsCountDenied());
-      } else {
-        dispatch(fetchNotificationsCountFailure());
-      }
-    }
-  }
-);
-
-export const markAllNotificationsAsRead = (appName) => (
-  async (dispatch) => {
-    try {
-      dispatch(markAllNotificationsAsReadRequest({ appName }));
-      const data = await markAllNotificationRead(appName);
-      dispatch(markAllNotificationsAsReadSuccess(camelCaseObject(data)));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markAllNotificationsAsReadDenied());
-      } else {
-        dispatch(markAllNotificationsAsReadFailure());
-      }
-    }
-  }
-);
-
-export const markNotificationsAsRead = (notificationId) => (
-  async (dispatch) => {
-    try {
-      dispatch(markNotificationsAsReadRequest({ notificationId }));
-      const data = await markNotificationRead(notificationId);
-      dispatch(markNotificationsAsReadSuccess(camelCaseObject(data)));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markNotificationsAsReadDenied());
-      } else {
-        dispatch(markNotificationsAsReadFailure());
-      }
-    }
-  }
-);
-
-export const markNotificationsAsSeen = (appName) => (
-  async (dispatch) => {
-    try {
-      dispatch(markNotificationsAsSeenRequest({ appName }));
-      const data = await markNotificationSeen(appName);
-      dispatch(markNotificationsAsSeenSuccess(camelCaseObject(data)));
-    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
-        dispatch(markNotificationsAsSeenDenied());
-      } else {
-        dispatch(markNotificationsAsSeenFailure());
-      }
-    }
-  }
-);
-
-export const resetNotificationState = () => (
-  async (dispatch) => { dispatch(resetNotificationStateRequest()); }
-);

src/Notifications/index.jsx

@@ -1,101 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, {
-  useCallback, useEffect, useRef, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import classNames from 'classnames';
-import {
-  Badge, Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
-import { NotificationsNone, Settings } from '@edx/paragon/icons';
-import { selectNotificationTabsCount } from './data/selectors';
-import { resetNotificationState } from './data/thunks';
-import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
-import NotificationTabs from './NotificationTabs';
-import messages from './messages';
-
-const Notifications = () => {
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const popoverRef = useRef(null);
-  const buttonRef = useRef(null);
-  const [enableNotificationTray, setEnableNotificationTray] = useState(false);
-  const notificationCounts = useSelector(selectNotificationTabsCount());
-  const isOnMediumScreen = useIsOnMediumScreen();
-  const isOnLargeScreen = useIsOnLargeScreen();
-
-  const hideNotificationTray = useCallback(() => {
-    setEnableNotificationTray(prevState => !prevState);
-  }, []);
-
-  const handleClickOutsideNotificationTray = useCallback((event) => {
-    if (!popoverRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
-      setEnableNotificationTray(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutsideNotificationTray);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
-      dispatch(resetNotificationState());
-    };
-  }, []);
-
-  return (
-    <OverlayTrigger
-      trigger="click"
-      key="bottom"
-      placement="bottom"
-      id="notificationTray"
-      show={enableNotificationTray}
-      overlay={(
-        <Popover
-          id="notificationTray"
-          data-testid="notificationTray"
-          className={classNames('overflow-auto rounded-0 border-0', {
-            'w-100': !isOnMediumScreen && !isOnLargeScreen,
-            'medium-screen': isOnMediumScreen,
-            'large-screen': isOnLargeScreen,
-          })}
-        >
-          <div ref={popoverRef}>
-            <Popover.Title as="h2" className="d-flex justify-content-between p-0 m-4 border-0 text-primary-500 font-size-18 line-height-24">
-              {intl.formatMessage(messages.notificationTitle)}
-              <Icon src={Settings} className="icon-size-20" />
-            </Popover.Title>
-            <Popover.Content className="notification-content p-0">
-              <NotificationTabs />
-            </Popover.Content>
-          </div>
-        </Popover>
-      )}
-    >
-      <div ref={buttonRef}>
-        <IconButton
-          isActive={enableNotificationTray}
-          alt="notification bell icon"
-          onClick={hideNotificationTray}
-          src={NotificationsNone}
-          iconAs={Icon}
-          variant="light"
-          iconClassNames="text-primary-500"
-          className="ml-4 mr-1 my-3 notification-button"
-        />
-        {notificationCounts?.count > 0 && (
-          <Badge
-            pill
-            variant="danger"
-            className="font-weight-normal px-1 notification-badge"
-          >
-            {notificationCounts.count}
-          </Badge>
-        )}
-      </div>
-    </OverlayTrigger>
-  );
-};
-
-export default Notifications;

src/Notifications/messages.js

@@ -1,36 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  notificationTitle: {
-    id: 'notification.title',
-    defaultMessage: 'Notifications',
-    description: 'Notifications',
-  },
-  notificationTodayHeading: {
-    id: 'notification.today.heading',
-    defaultMessage: 'Last 24 hours',
-    description: 'Today Notifications',
-  },
-  notificationEarlierHeading: {
-    id: 'notification.earlier.heading',
-    defaultMessage: 'Earlier',
-    description: 'Earlier Notifications',
-  },
-  notificationMarkAsRead: {
-    id: 'notification.mark.as.read',
-    defaultMessage: 'Mark all as read',
-    description: 'Mark all Notifications as read',
-  },
-  fullStop: {
-    id: 'notification.fullStop',
-    defaultMessage: '•',
-    description: 'Fullstop shown to users to indicate who edited a post.',
-  },
-  loadMoreNotifications: {
-    id: 'notification.load.more.notifications',
-    defaultMessage: 'Load more notifications',
-    description: 'Load more button to load more notifications',
-  },
-});
-
-export default messages;

src/Notifications/utils.js

@@ -1,52 +0,0 @@
-import {
-  CheckCircle, HelpOutline, QuestionAnswerOutline, Verified, Report, EditOutline, ThumbUpOutline, PostOutline,
-} from '@edx/paragon/icons';
-
-/**
- * Get HTTP Error status from generic error.
- * @param error Generic caught error.
- * @returns {number|null}
- */
-export const getHttpErrorStatus = error => error?.customAttributes?.httpErrorStatus ?? error?.response?.status;
-
-export const splitNotificationsByTime = (notificationList) => {
-  let splittedData = [];
-  if (notificationList.length > 0) {
-    const currentTime = Date.now();
-    const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000);
-
-    splittedData = notificationList.reduce(
-      (result, notification) => {
-        if (notification) {
-          const objectTime = new Date(notification.createdAt).getTime();
-          if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) {
-            result.today.push(notification);
-          } else {
-            result.earlier.push(notification);
-          }
-        }
-        return result;
-      },
-      { today: [], earlier: [] },
-    );
-  }
-  const { today, earlier } = splittedData;
-  return { today, earlier };
-};
-
-export const getIconByType = (type) => {
-  const iconMap = {
-    post: { icon: PostOutline, class: 'text-primary-500' },
-    help: { icon: HelpOutline, class: 'text-primary-500' },
-    respond: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    comment: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    question: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
-    answer: { icon: CheckCircle, class: 'text-success' },
-    endorsed: { icon: Verified, class: 'text-primary-500' },
-    reported: { icon: Report, class: 'text-danger-500' },
-    postLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
-    commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
-    edited: { icon: EditOutline, class: 'text-primary-500' },
-  };
-  return iconMap[type] || { icon: PostOutline, class: 'text-primary-500' };
-};

src/SiteHeader.jsx

@@ -1,36 +1,23 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import {
-  APP_CONFIG_INITIALIZED,
-  ensureConfig,
-  mergeConfig,
-  getConfig,
-  subscribe,
-} from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { App, AppContext } from '@edx/frontend-base';
 
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
 
-import messages from './Header.messages';
+import LogoSVG from './logo.svg';
 
-ensureConfig([
+import messages from './SiteHeader.messages';
+
+App.requireConfig([
   'LMS_BASE_URL',
   'LOGOUT_URL',
   'LOGIN_URL',
   'SITE_NAME',
-  'LOGO_URL',
-  'ORDER_HISTORY_URL',
 ], 'Header component');
 
-subscribe(APP_CONFIG_INITIALIZED, () => {
-  mergeConfig({
-    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
-  }, 'Header additional config');
-});
-
-const Header = ({ intl }) => {
+function SiteHeader({ intl }) {
   const { authenticatedUser, config } = useContext(AppContext);
 
   const mainMenu = [
@@ -41,13 +28,7 @@ const Header = ({ intl }) => {
     },
   ];
 
-  const orderHistoryItem = {
-    type: 'item',
-    href: config.ORDER_HISTORY_URL,
-    content: intl.formatMessage(messages['header.user.menu.order.history']),
-  };
-
-  const userMenu = authenticatedUser === null ? [] : [
+  const userMenu = [
     {
       type: 'item',
       href: `${config.LMS_BASE_URL}/dashboard`,
@@ -55,12 +36,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']),
     },
     {
@@ -70,11 +51,6 @@ const Header = ({ intl }) => {
     },
   ];
 
-  // 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 = [
     {
       type: 'item',
@@ -89,31 +65,32 @@ const Header = ({ intl }) => {
   ];
 
   const props = {
-    logo: config.LOGO_URL,
+    logo: LogoSVG,
     logoAltText: config.SITE_NAME,
+    siteName: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
-    loggedIn: authenticatedUser !== null,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
-    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
-    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
-    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
+    loggedIn: !!authenticatedUser.username,
+    username: authenticatedUser.username,
+    avatar: authenticatedUser.avatar,
+    mainMenu,
+    userMenu,
+    loggedOutItems,
   };
 
   return (
-    <>
+    <React.Fragment>
       <Responsive maxWidth={768}>
         <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
         <DesktopHeader {...props} />
       </Responsive>
-    </>
+    </React.Fragment>
   );
-};
+}
 
-Header.propTypes = {
+SiteHeader.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(Header);
+export default injectIntl(SiteHeader);

src/SiteHeader.messages.jsx

@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '@edx/frontend-i18n';
 
 const messages = defineMessages({
   'header.links.courses': {
@@ -56,16 +56,6 @@ const messages = defineMessages({
     defaultMessage: 'Sign Up',
     description: 'Link to registration',
   },
-  'header.user.menu.studio.home': {
-    id: 'header.user.menu.studio.home',
-    defaultMessage: 'Studio Home',
-    description: 'Link to the Studio Home',
-  },
-  'header.user.menu.studio.maintenance': {
-    id: 'header.user.menu.studio.maintenance',
-    defaultMessage: 'Maintenance',
-    description: 'Link to the Studio Maintenance',
-  },
   'header.label.account.nav': {
     id: 'header.label.account.nav',
     defaultMessage: 'Account',
@@ -77,7 +67,7 @@ const messages = defineMessages({
     description: 'The aria label for the account menu trigger',
   },
   'header.label.account.menu.for': {
-    id: 'header.label.account.menu.for',
+    id: 'header.label.account.menu',
     defaultMessage: 'Account menu for {username}',
     description: 'The aria label for the account menu trigger when the username is displayed in it',
   },
@@ -101,16 +91,6 @@ const messages = defineMessages({
     defaultMessage: 'Secondary',
     description: 'The aria label for the seconary nav',
   },
-  'header.label.skip.nav': {
-    id: 'header.label.skip.nav',
-    defaultMessage: 'Skip to main content',
-    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
-  },
-  'header.label.app.nav': {
-    id: 'header.label.app.nav',
-    defaultMessage: 'App',
-    description: 'The aria label for the app Nav',
-  },
 });
 
 export default messages;

src/SiteHeader.test.jsx

@@ -0,0 +1,70 @@
+
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-i18n';
+import TestRenderer from 'react-test-renderer';
+import { AppContext } from '@edx/frontend-base';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import SiteHeader from './index';
+
+describe('<SiteHeader />', () => {
+  it('renders correctly for desktop', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider value={{
+            authenticatedUser: {
+              userId: null,
+              username: null,
+              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,
+            },
+            }}
+          >
+            <SiteHeader />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly for mobile', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider value={{
+            authenticatedUser: {
+              userId: null,
+              username: null,
+              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,
+            },
+            }}
+          >
+            <SiteHeader />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

src/StudioHeader.jsx

@@ -1,200 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-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 messages from './Header.messages';
-
-ensureConfig([
-  'STUDIO_BASE_URL',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-  'SITE_NAME',
-  'LOGO_URL',
-  'ORDER_HISTORY_URL',
-], 'StudioHeader component');
-
-subscribe(APP_CONFIG_INITIALIZED, () => {
-  mergeConfig({
-    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
-  }, '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 }) => {
-  const { authenticatedUser, config } = useContext(AppContext);
-
-  const userMenu = authenticatedUser === null ? [] : [
-    {
-      type: 'item',
-      href: `${config.STUDIO_BASE_URL}`,
-      content: intl.formatMessage(messages['header.user.menu.studio.home']),
-    },
-    {
-      type: 'item',
-      href: `${config.STUDIO_BASE_URL}/maintenance`,
-      content: intl.formatMessage(messages['header.user.menu.studio.maintenance']),
-    },
-    {
-      type: 'item',
-      href: config.LOGOUT_URL,
-      content: intl.formatMessage(messages['header.user.menu.logout']),
-    },
-  ];
-
-  const props = {
-    logo: config.LOGO_URL,
-    logoAltText: config.SITE_NAME,
-    logoDestination: config.STUDIO_BASE_URL,
-    loggedIn: authenticatedUser !== null,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
-    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    actionRowContent,
-    userMenu,
-    loggedOutItems: [],
-  };
-
-  return <StudioDesktopHeader {...props} />;
-};
-
-StudioHeader.propTypes = {
-  intl: intlShape.isRequired,
-  actionRowContent: PropTypes.element,
-};
-
-StudioHeader.defaultProps = {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  actionRowContent: <></>,
-};
-
-export default injectIntl(StudioHeader);

src/StudioHeader.test.jsx

@@ -1,108 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } 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 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>
-      </>
-    );
-
-    const component = <StudioHeaderContext actionRowContent={actionRowContent} />;
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-});

src/__mocks__/fileMock.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';

src/__snapshots__/Header.test.jsx.snap

@@ -1,443 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Header /> renders correctly for anonymous desktop 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"
-    >
-      <a
-        className="logo"
-        href="http://localhost:18000/dashboard"
-      >
-        <img
-          alt="edX"
-          className="d-block"
-          src="https://edx-cdn.org/v3/default/logo.svg"
-        />
-      </a>
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      >
-        <a
-          className="nav-link"
-          href="http://localhost:18000/dashboard"
-        >
-          Courses
-        </a>
-      </nav>
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
-      >
-        <a
-          className="btn mr-2 btn-link"
-          href="http://localhost:18000/login"
-        >
-          Login
-        </a>
-        <a
-          className="btn mr-2 btn-outline-primary"
-          href="http://localhost:18000/register"
-        >
-          Sign Up
-        </a>
-      </nav>
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<Header /> renders correctly for anonymous mobile 1`] = `
-<header
-  aria-label="Main"
-  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
->
-  <a
-    className="nav-skip sr-only sr-only-focusable"
-    href="#main"
-  >
-    Skip to main content
-  </a>
-  <div
-    className="w-100 d-flex justify-content-start"
-  >
-    <div
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Main Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Main Menu"
-      >
-        <svg
-          aria-hidden={true}
-          focusable="false"
-          height="24px"
-          role="img"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
-          version="1.1"
-          viewBox="0 0 24 24"
-          width="24px"
-        >
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="5"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="11"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="17"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-center"
-  >
-    <a
-      className="logo"
-      href="http://localhost:18000/dashboard"
-      itemType="http://schema.org/Organization"
-    >
-      <img
-        alt="edX"
-        className="d-block"
-        src="https://edx-cdn.org/v3/default/logo.svg"
-      />
-    </a>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-end align-items-center"
-  >
-    <nav
-      aria-label="Secondary"
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Account Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Account Menu"
-      >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
-        >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            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>
-      </button>
-    </nav>
-  </div>
-</header>
-`;
-
-exports[`<Header /> renders correctly for authenticated desktop 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"
-    >
-      <a
-        className="logo"
-        href="http://localhost:18000/dashboard"
-      >
-        <img
-          alt="edX"
-          className="d-block"
-          src="https://edx-cdn.org/v3/default/logo.svg"
-        />
-      </a>
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      >
-        <a
-          className="nav-link"
-          href="http://localhost:18000/dashboard"
-        >
-          Courses
-        </a>
-      </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>
-`;
-
-exports[`<Header /> renders correctly for authenticated mobile 1`] = `
-<header
-  aria-label="Main"
-  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
->
-  <a
-    className="nav-skip sr-only sr-only-focusable"
-    href="#main"
-  >
-    Skip to main content
-  </a>
-  <div
-    className="w-100 d-flex justify-content-start"
-  >
-    <div
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Main Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Main Menu"
-      >
-        <svg
-          aria-hidden={true}
-          focusable="false"
-          height="24px"
-          role="img"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
-          version="1.1"
-          viewBox="0 0 24 24"
-          width="24px"
-        >
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="5"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="11"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="17"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-center"
-  >
-    <a
-      className="logo"
-      href="http://localhost:18000/dashboard"
-      itemType="http://schema.org/Organization"
-    >
-      <img
-        alt="edX"
-        className="d-block"
-        src="https://edx-cdn.org/v3/default/logo.svg"
-      />
-    </a>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-end align-items-center"
-  >
-    <nav
-      aria-label="Secondary"
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Account Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Account Menu"
-      >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
-        >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            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>
-      </button>
-    </nav>
-  </div>
-</header>
-`;

src/__snapshots__/SiteHeader.test.jsx.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SiteHeader /> renders correctly for desktop 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <div
+    className="container-fluid"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <a
+        className="logo"
+        href="http://localhost:18000/dashboard"
+      >
+        <img
+          alt="edX"
+          className="d-block"
+          src="test-file-stub"
+        />
+      </a>
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/dashboard"
+        >
+          Courses
+        </a>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <a
+          className="btn mr-2 btn-link"
+          href="http://localhost:18000/login"
+        >
+          Login
+        </a>
+        <a
+          className="btn mr-2 btn-outline-primary"
+          href="http://localhost:18000/register"
+        >
+          Sign Up
+        </a>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`<SiteHeader /> renders correctly for mobile 1`] = `
+<header
+  aria-label="Main"
+  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
+>
+  <div
+    className="w-100 d-flex justify-content-start"
+  >
+    <div
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Main Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Main Menu"
+      >
+        <svg
+          aria-hidden={true}
+          focusable="false"
+          height="24px"
+          role="img"
+          style={
+            Object {
+              "height": "1.5rem",
+              "width": "1.5rem",
+            }
+          }
+          version="1.1"
+          viewBox="0 0 24 24"
+          width="24px"
+        >
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="5"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="11"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="17"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-center"
+  >
+    <a
+      className="logo"
+      href="http://localhost:18000/dashboard"
+      itemType="http://schema.org/Organization"
+    >
+      <img
+        alt="edX"
+        className="d-block"
+        src="test-file-stub"
+      />
+    </a>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-end align-items-center"
+  >
+    <nav
+      aria-label="Secondary"
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Account Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Account Menu"
+      >
+        <span
+          className="avatar overflow-hidden d-inline-flex rounded-circle null"
+          style={
+            Object {
+              "height": "1.5rem",
+              "width": "1.5rem",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            className="text-muted"
+            focusable="false"
+            height="24px"
+            role="img"
+            style={
+              Object {
+                "height": "1.5rem",
+                "width": "1.5rem",
+              }
+            }
+            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>
+      </button>
+    </nav>
+  </div>
+</header>
+`;

src/__snapshots__/StudioHeader.test.jsx.snap

@@ -1,226 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StudioHeader /> renders correctly 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"
-      />
-      <div
-        className="pgn__action-row"
-      >
-        <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>
-  </div>
-</header>
-`;
-
-exports[`<StudioHeader /> renders correctly with optional action row content 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"
-      />
-      <div
-        className="pgn__action-row"
-      >
-        <div
-          className="pgn__dropdown pgn__dropdown-light dropdown"
-          data-testid="dropdown"
-        >
-          <button
-            aria-expanded={false}
-            aria-haspopup={true}
-            className="dropdown-toggle btn btn-outline-primary"
-            disabled={false}
-            id="library-header-menu-dropdown"
-            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",
-                  }
-                }
-              >
-                <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>
-  </div>
-</header>
-`;

src/common/time-locale.js

@@ -1,18 +0,0 @@
-export default function timeLocale(number, index) {
-  return [
-    ['just now', 'right now'],
-    ['%ss', 'in %s seconds'],
-    ['1m', 'in 1 minute'],
-    ['%sm', 'in %s minutes'],
-    ['1h', 'in 1 hour'],
-    ['%sh', 'in %s hours'],
-    ['1d', 'in 1 day'],
-    ['%sd', 'in %s days'],
-    ['1w', 'in 1 week'],
-    ['%sw', 'in %s weeks'],
-    ['4w', 'in 1 month'],
-    [`${number * 4}w`, 'in %s months'],
-    ['1y', 'in 1 year'],
-    ['%sy', 'in %s years'],
-  ][index];
-}

src/generic/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  registerSentenceCase: {
-    id: 'general.register.sentenceCase',
-    defaultMessage: 'Register',
-    description: 'Text in a button, prompting the user to register.',
-  },
-  signInSentenceCase: {
-    id: 'general.signIn.sentenceCase',
-    defaultMessage: 'Sign in',
-    description: 'Text in a button, prompting the user to log in.',
-  },
-});
-
-export default messages;

src/i18n/index.js

@@ -1,28 +1,18 @@
 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
+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,
   '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;

src/i18n/messages/ar.json

@@ -1,39 +1,2 @@
 {
-  "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": "تسجيل الخروج",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}
+}

src/i18n/messages/de.json

@@ -1,39 +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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/es_419.json

@@ -1,39 +1,2 @@
 {
-  "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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}
+}

src/i18n/messages/fr.json

@@ -1,39 +1,2 @@
 {
-  "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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}
+}

src/i18n/messages/fr_CA.json

@@ -1,39 +0,0 @@
-{
-  "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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Dernières 24 heures",
-  "notification.earlier.heading": "Plus tôt",
-  "notification.mark.as.read": "tout marquer comme lu",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Charger plus de notifications"
-}

src/i18n/messages/hi.json

@@ -1,39 +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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/it.json

@@ -1,39 +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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/ko_KR.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/pt.json

@@ -1,39 +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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/pt_BR.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/ru.json

@@ -1,39 +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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/uk.json

@@ -1,39 +0,0 @@
-{
-  "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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}

src/i18n/messages/zh_CN.json

@@ -1,39 +1,2 @@
 {
-  "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",
-  "notification.title": "Notifications",
-  "notification.today.heading": "Last 24 hours",
-  "notification.earlier.heading": "Earlier",
-  "notification.mark.as.read": "Mark all as read",
-  "notification.fullStop": "•",
-  "notification.load.more.notifications": "Load more notifications"
-}
+}

src/index.jsx

@@ -1,8 +1,6 @@
-import Header from './Header';
-import LearningHeader from './learning-header/LearningHeader';
+import SiteHeader from './SiteHeader';
 import messages from './i18n/index';
-import StudioHeader from './StudioHeader';
 
-export { LearningHeader, messages, StudioHeader };
+export { messages };
 
-export default Header;
+export default SiteHeader;

src/index.scss

@@ -1,10 +1,7 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+
 @import './Menu/menu.scss';
 
 .dropdown-item a {
@@ -28,30 +25,6 @@ $white: #fff;
   }
 }
 
-.learning-header {
-  min-width: 0;
-
-  .course-title-lockup {
-    min-width: 0;
-
-    span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
-    }
-  }
-
-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
-    }
-  }
-}
-
 .site-header-mobile,
 .site-header-desktop {
   position: relative;
@@ -59,8 +32,6 @@ $white: #fff;
 }
 
 .site-header-mobile {
-  height: 3rem;
-
   .nav-link {
     text-decoration: none;
     cursor: pointer;
@@ -72,6 +43,7 @@ $white: #fff;
 
 
 .site-header-desktop {
+  height: 3.75rem;
   box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
   background: $white;
   .nav-link {
@@ -121,135 +93,3 @@ $white: #fff;
     border-radius: $rounded-pill;
   }
 }
-
-.content {
-  b {
-    color: #00262B !important;
-    font-weight: 500 !important;
-  }
-}
-
-.font-size-18 {
-  font-size: 18px !important;
-}
-
-.font-size-12 {
-  font-size: 12px;
-}
-
-.font-size-14 {
-  font-size: 14px;
-}
-
-.py-10px {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.pb-10px {
-  padding-bottom: 10px;
-}
-
-.line-height-24 {
-  line-height: 24px;
-}
-
-.line-height-20 {
-  line-height: 20px;
-}
-
-.line-height-10 {
-  line-height: 10px !important;
-}
-
-.icon-size-20 {
-  width: 20px !important;
-  height: 20px !important;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.notification-button {
-  width: 36px;
-  height: 36px;
-}
-
-.notification-icon{
-  height: 23.33px !important;
-  width: 23.33px !important;
-}
-
-.notification-badge {
-  position: absolute;
-  margin-top: 18px;
-  margin-left: -21px;
-  border: 2px solid #FFFFFF;
-  font-size: 9px !important;
-}
-
-.popover {
-  max-height: calc(100% - 68px);
-  min-height: 1220px;
-  filter: none;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
-
-  &.medium-screen {
-    min-width: 24.313rem;
-  }
-
-  &.large-screen {
-    min-width: 34.313rem;
-  }
-
-  .dropdown-toggle::after {
-    display: none;
-  }
-
-  .expandable {
-    position: relative !important;
-    margin-left: 4px;
-    padding: 2px 5px;
-    border-radius: 10rem;
-    font-size: 9px;
-  }
-
-  .dropdown-toggle {
-    font-size: 14px;
-    padding-top: 0px !important;
-    padding-bottom: 12px !important;
-
-    div {
-      min-height: 6px !important;
-      min-width: 6px !important;
-    }
-  }
-
-  .dropdown-item {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .notification-content {
-    .notification-item-content {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      text-overflow: ellipsis;
-
-      p {
-        margin-bottom: 0px;
-      }
-
-      b {
-        color: #00262B;
-      }
-    }
-
-    .unread {
-      height: 10px;
-      width: 10px;
-    }
-  }
-}

src/learning-header/AnonymousUserMenu.jsx

@@ -1,32 +0,0 @@
-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 '@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>
-);
-
-AnonymousUserMenu.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AnonymousUserMenu);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Dropdown } from '@edx/paragon';
-import { useSelector, useDispatch } from 'react-redux';
-import Notifications from '../Notifications';
-import { selectShowNotificationTray, selectNotificationStatus } from '../Notifications/data/selectors';
-import { fetchAppsNotificationCount } from '../Notifications/data/thunks';
-import { RequestStatus } from '../Notifications/data/slice';
-
-import messages from './messages';
-
-const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const showNotificationsTray = useSelector(selectShowNotificationTray());
-  const notificationStatus = useSelector(selectNotificationStatus());
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (notificationStatus === RequestStatus.IDLE) {
-      dispatch(fetchAppsNotificationCount());
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notificationStatus]);
-
-  const dashboardMenuItem = (
-    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
-      {intl.formatMessage(messages.dashboard)}
-    </Dropdown.Item>
-  );
-
-  return (
-    <>
-      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      {showNotificationsTray && <Notifications />}
-      <Dropdown className="user-dropdown ml-3">
-        <Dropdown.Toggle variant="outline-primary">
-          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <span data-hj-suppress className="d-none d-md-inline">
-            {username}
-          </span>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="dropdown-menu-right">
-          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
-            {intl.formatMessage(messages.profile)}
-          </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
-            {intl.formatMessage(messages.account)}
-          </Dropdown.Item>
-          { getConfig().ORDER_HISTORY_URL && (
-            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
-              {intl.formatMessage(messages.orderHistory)}
-            </Dropdown.Item>
-          )}
-          <Dropdown.Item href={getConfig().LOGOUT_URL}>
-            {intl.formatMessage(messages.signOut)}
-          </Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
-  );
-};
-
-AuthenticatedUserDropdown.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -1,82 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-
-import AnonymousUserMenu from './AnonymousUserMenu';
-import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
-import messages from './messages';
-import store from '../store';
-
-const LinkedLogo = ({
-  href,
-  src,
-  alt,
-  ...attributes
-}) => (
-  <a href={href} {...attributes}>
-    <img className="d-block" src={src} alt={alt} />
-  </a>
-);
-
-LinkedLogo.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-const LearningHeader = ({
-  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
-}) => {
-  const { authenticatedUser } = useContext(AppContext);
-
-  const headerLogo = (
-    <LinkedLogo
-      className="logo"
-      href={`${getConfig().LMS_BASE_URL}/dashboard`}
-      src={getConfig().LOGO_URL}
-      alt={getConfig().SITE_NAME}
-    />
-  );
-
-  return (
-    <AppProvider store={store}>
-      <header className="learning-header">
-        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-        <div className="container-xl py-2 d-flex align-items-center">
-          {headerLogo}
-          <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-            <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-            <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
-          </div>
-          {showUserDropdown && authenticatedUser && (
-            <AuthenticatedUserDropdown
-              username={authenticatedUser.username}
-            />
-          )}
-          {showUserDropdown && !authenticatedUser && (
-            <AnonymousUserMenu />
-          )}
-        </div>
-      </header>
-    </AppProvider>
-  );
-};
-
-LearningHeader.propTypes = {
-  courseOrg: PropTypes.string,
-  courseNumber: PropTypes.string,
-  courseTitle: PropTypes.string,
-  intl: intlShape.isRequired,
-  showUserDropdown: PropTypes.bool,
-};
-
-LearningHeader.defaultProps = {
-  courseOrg: null,
-  courseNumber: null,
-  courseTitle: null,
-  showUserDropdown: true,
-};
-
-export default injectIntl(LearningHeader);

src/learning-header/LearningHeader.test.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {
-  authenticatedUser, initializeMockApp, render, screen,
-} from '../setupTest';
-import { LearningHeader as Header } from '../index';
-
-describe('Header', () => {
-  beforeAll(async () => {
-    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
-    await initializeMockApp();
-  });
-
-  it('displays user button', () => {
-    render(<Header />);
-    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
-  });
-
-  it('displays course data', () => {
-    const courseData = {
-      courseOrg: 'course-org',
-      courseNumber: 'course-number',
-      courseTitle: 'course-title',
-    };
-    render(<Header {...courseData} />);
-
-    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
-    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
-  });
-});

src/learning-header/messages.js

@@ -1,41 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  dashboard: {
-    id: 'header.menu.dashboard.label',
-    defaultMessage: 'Dashboard',
-    description: 'The text for the user menu Dashboard navigation link.',
-  },
-  help: {
-    id: 'header.help.label',
-    defaultMessage: 'Help',
-    description: 'The text for the link to the Help Center',
-  },
-  profile: {
-    id: 'header.menu.profile.label',
-    defaultMessage: 'Profile',
-    description: 'The text for the user menu Profile navigation link.',
-  },
-  account: {
-    id: 'header.menu.account.label',
-    defaultMessage: 'Account',
-    description: 'The text for the user menu Account navigation link.',
-  },
-  orderHistory: {
-    id: 'header.menu.orderHistory.label',
-    defaultMessage: 'Order History',
-    description: 'The text for the user menu Order History navigation link.',
-  },
-  skipNavLink: {
-    id: 'header.navigation.skipNavLink',
-    defaultMessage: 'Skip to main content.',
-    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
-  },
-  signOut: {
-    id: 'header.menu.signOut.label',
-    defaultMessage: 'Sign Out',
-    description: 'The label for the user menu Sign Out action.',
-  },
-});
-
-export default messages;

src/setupTest.js

@@ -1,129 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import Enzyme from 'enzyme';
-import React from 'react';
-import PropTypes from 'prop-types';
 import Adapter from 'enzyme-adapter-react-16';
-import '@testing-library/jest-dom';
-import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';
-import 'jest-chain';
-import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import { configure as configureLogging } from '@edx/frontend-platform/logging';
-import { configure as configureI18n } from '@edx/frontend-platform/i18n';
-import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
-import { render as rtlRender } from '@testing-library/react';
-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';
-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_COOKIE_NAME = 'csrftoken';
 process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
 process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
 process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
 process.env.LMS_BASE_URL = 'http://localhost:18000';
 process.env.LOGIN_URL = 'http://localhost:18000/login';
-process.env.LOGOUT_URL = 'http://localhost:18000/logout';
+process.env.LOGOUT_URL = 'http://localhost:18000/login';
 process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
 process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
 process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
 process.env.SEGMENT_KEY = 'segment_whoa';
 process.env.SITE_NAME = 'edX';
 process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
-process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
-process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
-process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
-process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';
-
-class MockLoggingService {
-  logInfo = jest.fn();
-
-  logError = jest.fn();
-}
-
-export const authenticatedUser = {
-  userId: 'abc123',
-  username: 'Mock User',
-  roles: [],
-  administrator: false,
-};
-
-export function initializeMockApp() {
-  mergeConfig({
-    INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
-    STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
-    TWITTER_URL: process.env.TWITTER_URL || null,
-    BASE_URL: process.env.BASE_URL || null,
-    LMS_BASE_URL: process.env.LMS_BASE_URL || null,
-    LOGIN_URL: process.env.LOGIN_URL || null,
-    LOGOUT_URL: process.env.LOGOUT_URL || null,
-    REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT || null,
-    ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME || null,
-    CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH || null,
-    LOGO_URL: process.env.LOGO_URL || null,
-    SITE_NAME: process.env.SITE_NAME || null,
-
-    authenticatedUser: {
-      userId: 'abc123',
-      username: 'Mock User',
-      roles: [],
-      administrator: false,
-    },
-  });
-
-  const loggingService = configureLogging(MockLoggingService, {
-    config: getConfig(),
-  });
-  const authService = configureAuth(MockAuthService, {
-    config: getConfig(),
-    loggingService,
-  });
-
-  // i18n doesn't have a service class to return.
-  configureI18n({
-    config: getConfig(),
-    loggingService,
-    messages: [appMessages],
-  });
-
-  return { loggingService, authService };
-}
-
-function render(
-  ui,
-  {
-    store = null,
-    ...renderOptions
-  } = {},
-) {
-  const Wrapper = ({ children }) => (
-    // eslint-disable-next-line react/jsx-filename-extension
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        {children}
-      </AppProvider>
-    </IntlProvider>
-  );
-
-  Wrapper.propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
-}
-
-// Re-export everything.
-export * from '@testing-library/react';
-
-// Override `render` method.
-export {
-  render,
-};

src/store.js

@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-
-import { notificationsReducer } from './Notifications/data';
-
-export function initializeStore(preloadedState = undefined) {
-  return configureStore({
-    reducer: {
-      notifications: notificationsReducer,
-    },
-    preloadedState,
-  });
-}
-
-const store = initializeStore();
-
-export default store;

src/test-utils.js

@@ -1,6 +0,0 @@
-const executeThunk = async (thunk, dispatch, getState) => {
-  await thunk(dispatch, getState);
-  await new Promise(setImmediate);
-};
-
-export default executeThunk;

webpack.dev.config.js

@@ -1,15 +0,0 @@
-const path = require('path');
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
-  output: {
-    path: path.resolve(__dirname, 'example/dist'),
-    publicPath: '/',
-  },
-  resolve: {
-    alias: {
-      '@edx/frontend-component-header': path.resolve(__dirname, 'src'),
-    },
-  },
-});