feat: Add StudioHeader with optional AppMenu (#199 )

* feat: Add StudioHeader with optional AppMenu StudioHeader is a graft of Header with an additional optional AppMenu. Some Frontend Apps use Menus in their custom headers to provide more functionality in their apps. By adding this functionality in StudioHeader, it will be easier for frontend apps in Studio to adopt this component without it affecting the main Header component. * test: Add tests for StudioHeader and AppMenu * fix: Remove orderHistory * fix: Remove Responsive components * fix: Redefine User Menu for Studio The userMenu in StudioHeader will be used more for Studio related items such as Studio Home and Studio Maintenance. This requires new messages and reestablishing the url destinations of these menu items. * fix: Remove loggedOutItems * fix: Remove AUTHN_MINIMAL_HEADER items * fix: Remove unnecessary tests Anonymous sessions do not exist in the Studio. And Studio is not Mobile Ready. Tests of these kind are superfluous and have been removed. * feat: Turn mainMenu into an optional prop * test: Add test for optional mainMenu prop * feat: Update snapshots * fix: Remove ResponsiveContext * fix: Remove href and update appMenu prop Dropping the href because having a link that also works as a dropdown can be mildly confusing. Changing menu (type, href, content ) triplet to stick to the pattern; so we removed "menu". Also adding brackets around the triplet. Lastly, updating test and snapshot. Co-authored-by: Carlos Muniz <cmuniz@trcil.org>
chore(deps): update dependency react-router-dom to v5.3.1
2022-04-21 13:43:37 -04:00 · 2022-04-18 15:48:35 +00:00 · 2022-04-18 11:55:33 +00:00 · 2022-04-11 15:26:22 +00:00 · 2022-04-11 12:14:34 +00:00 · 2022-04-04 13:35:10 +00:00
11 changed files with 1105 additions and 239 deletions
--- a/.env.development
+++ b/.env.development
@@ -5,6 +5,7 @@ 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
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +0,0 @@
-* @edx/community-engineering
--- a/.tx/config
+++ b/.tx/config
@@ -1,8 +1,9 @@
 [main]
 host = https://www.transifex.com

-[edx-platform.frontend-component-header]
+[o:open-edx:p:edx-platform:r:frontend-component-header]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON
+
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,23 +20,23 @@
      },
      "devDependencies": {
        "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-        "@edx/frontend-build": "9.1.1",
+        "@edx/frontend-build": "9.1.4",
        "@edx/frontend-platform": "1.15.1",
        "@edx/paragon": "19.6.0",
        "@testing-library/dom": "7.31.2",
-        "@testing-library/jest-dom": "5.16.2",
+        "@testing-library/jest-dom": "5.16.4",
        "@testing-library/react": "10.4.9",
        "codecov": "3.8.3",
        "enzyme": "3.11.0",
        "enzyme-adapter-react-16": "1.15.6",
        "husky": "7.0.4",
-        "jest": "27.5.0",
+        "jest": "27.5.1",
        "jest-chain": "1.1.5",
        "prop-types": "15.8.1",
        "react": "16.14.0",
        "react-dom": "16.14.0",
-        "react-redux": "7.2.6",
-        "react-router-dom": "5.3.0",
+        "react-redux": "7.2.8",
+        "react-router-dom": "5.3.1",
        "react-test-renderer": "16.14.0",
        "reactifex": "1.1.1",
        "redux": "4.1.2",
@@ -44,7 +44,7 @@
      },
      "peerDependencies": {
        "@edx/frontend-platform": "^1.8.0",
-        "@edx/paragon": ">= ^7.0.0 < 20.0.0",
+        "@edx/paragon": ">= 7.0.0 < 20.0.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
@@ -1897,9 +1897,9 @@
      }
    },
    "node_modules/@edx/frontend-build": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-9.1.1.tgz",
-      "integrity": "sha512-D+qQILWu1S1K3kIntPw+T36DrxKPRdIUf0NqCS6jau9bGeEjOCFdh0/P6YZ00utDZxgK61abzW9RiAYia8H5AA==",
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-9.1.4.tgz",
+      "integrity": "sha512-Lw4EqZ8iMnIDLA/xlAEByPzzoyU9faStktYgnRGhPM9DPyQ504NQ0I/qv7vX6qWJ2wII458TNAgGzu9zr2hHWQ==",
      "dev": true,
      "dependencies": {
        "@babel/cli": "7.16.0",
@@ -1943,15 +1943,15 @@
        "react-dev-utils": "12.0.0",
        "react-refresh": "0.10.0",
        "resolve-url-loader": "5.0.0-beta.1",
-        "sass": "1.26.11",
-        "sass-loader": "10.0.5",
+        "sass": "1.49.9",
+        "sass-loader": "12.6.0",
        "source-map-loader": "0.2.4",
        "style-loader": "2.0.0",
        "url-loader": "4.1.1",
        "webpack": "5.50.0",
        "webpack-bundle-analyzer": "3.9.0",
        "webpack-cli": "4.9.1",
-        "webpack-dev-server": "4.6.0",
+        "webpack-dev-server": "4.7.3",
        "webpack-merge": "5.2.0"
      },
      "bin": {
@@ -5510,9 +5510,9 @@
      }
    },
    "node_modules/@testing-library/jest-dom": {
-      "version": "5.16.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.2.tgz",
-      "integrity": "sha512-6ewxs1MXWwsBFZXIk4nKKskWANelkdUehchEOokHsN8X7c2eKXGw+77aRV63UU8f/DTSVUPLaGxdrj4lN7D/ug==",
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.9.2",
@@ -5689,6 +5689,44 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/cookie": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
@@ -5721,6 +5759,29 @@
      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
      "dev": true
    },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
    "node_modules/@types/fs-extra": {
      "version": "9.0.13",
      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
@@ -5858,6 +5919,12 @@
      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
      "dev": true
    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
    "node_modules/@types/minimatch": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -5894,6 +5961,18 @@
      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
      "dev": true
    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
    "node_modules/@types/react": {
      "version": "17.0.39",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
@@ -5948,6 +6027,34 @@
        "schema-utils": "*"
      }
    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/source-list-map": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -6042,6 +6149,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/yargs": {
      "version": "15.0.14",
      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
@@ -8149,9 +8265,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001312",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
-      "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==",
+      "version": "1.0.30001313",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz",
+      "integrity": "sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==",
      "dev": true,
      "funding": {
        "type": "opencollective",
@@ -13796,6 +13912,12 @@
        "url": "https://opencollective.com/immer"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14847,14 +14969,14 @@
      }
    },
    "node_modules/jest": {
-      "version": "27.5.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.0.tgz",
-      "integrity": "sha512-sCMZhL9zy0fiFc4H0cKlXq7BcghMSxm5ZnEyaPWTteArU5ix6JjOKyOXSUBGLTQCmt5kuX9zEvQ9BSshHOPB3A==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
      "dev": true,
      "dependencies": {
-        "@jest/core": "^27.5.0",
+        "@jest/core": "^27.5.1",
        "import-local": "^3.0.2",
-        "jest-cli": "^27.5.0"
+        "jest-cli": "^27.5.1"
      },
      "bin": {
        "jest": "bin/jest.js"
@@ -19624,12 +19746,12 @@
      }
    },
    "node_modules/node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
      "dev": true,
      "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 6.13.0"
      }
    },
    "node_modules/node-int64": {
@@ -21705,16 +21827,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -22233,9 +22345,9 @@
      "dev": true
    },
    "node_modules/react-redux": {
-      "version": "7.2.6",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
-      "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
+      "version": "7.2.8",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
+      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.15.4",
@@ -22246,7 +22358,7 @@
        "react-is": "^17.0.2"
      },
      "peerDependencies": {
-        "react": "^16.8.3 || ^17"
+        "react": "^16.8.3 || ^17 || ^18"
      },
      "peerDependenciesMeta": {
        "react-dom": {
@@ -22349,9 +22461,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz",
+      "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.12.13",
@@ -22370,16 +22482,16 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz",
+      "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.12.13",
        "history": "^4.9.0",
        "loose-envify": "^1.3.1",
        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
+        "react-router": "5.3.1",
        "tiny-invariant": "^1.0.2",
        "tiny-warning": "^1.0.0"
      },
@@ -23346,34 +23458,33 @@
      }
    },
    "node_modules/sass": {
-      "version": "1.26.11",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz",
-      "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==",
+      "version": "1.49.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
+      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
      "dev": true,
      "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
      },
      "bin": {
        "sass": "sass.js"
      },
      "engines": {
-        "node": ">=8.9.0"
+        "node": ">=12.0.0"
      }
    },
    "node_modules/sass-loader": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.5.tgz",
-      "integrity": "sha512-2LqoNPtKkZq/XbXNQ4C64GFEleSEHKv6NPSI+bMC/l+jpEXGJhiRYkAQToO24MR7NU4JRY2RpLpJ/gjo2Uf13w==",
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
      "dev": true,
      "dependencies": {
        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
+        "neo-async": "^2.6.2"
      },
      "engines": {
-        "node": ">= 10.13.0"
+        "node": ">= 12.13.0"
      },
      "funding": {
        "type": "opencollective",
@@ -23381,9 +23492,10 @@
      },
      "peerDependencies": {
        "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
        "sass": "^1.3.0",
-        "webpack": "^4.36.0 || ^5.0.0"
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
      },
      "peerDependenciesMeta": {
        "fibers": {
@@ -23394,42 +23506,12 @@
        },
        "sass": {
          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
        }
      }
    },
-    "node_modules/sass-loader/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sass-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sass-loader/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
    "node_modules/saxes": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -23497,12 +23579,15 @@
      "dev": true
    },
    "node_modules/selfsigned": {
-      "version": "1.10.14",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
-      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
      "dev": true,
      "dependencies": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/semver": {
@@ -25313,9 +25398,9 @@
      "dev": true
    },
    "node_modules/tsconfig-paths": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
-      "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz",
+      "integrity": "sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==",
      "dev": true,
      "dependencies": {
        "@types/json5": "^0.0.29",
@@ -25659,16 +25744,6 @@
      "deprecated": "Please see https://github.com/lydell/urix#deprecated",
      "dev": true
    },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
    "node_modules/url-loader": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -25719,12 +25794,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-      "dev": true
-    },
    "node_modules/urlgrey": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
@@ -26329,11 +26398,16 @@
      }
    },
    "node_modules/webpack-dev-server": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz",
-      "integrity": "sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.3.tgz",
+      "integrity": "sha512-mlxq2AsIw2ag016nixkzUkdyOE8ST2GTy34uKSABp1c4nhjZvH90D5ZRR+UOLSsG4Z3TFahAi72a3ymRtfRm+Q==",
      "dev": true,
      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
        "ansi-html-community": "^0.0.8",
        "bonjour": "^3.5.0",
        "chokidar": "^3.5.2",
@@ -26351,13 +26425,12 @@
        "p-retry": "^4.5.0",
        "portfinder": "^1.0.28",
        "schema-utils": "^4.0.0",
-        "selfsigned": "^1.10.11",
+        "selfsigned": "^2.0.0",
        "serve-index": "^1.9.1",
        "sockjs": "^0.3.21",
        "spdy": "^4.0.2",
        "strip-ansi": "^7.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^5.2.1",
+        "webpack-dev-middleware": "^5.3.0",
        "ws": "^8.1.0"
      },
      "bin": {
@@ -28254,9 +28327,9 @@
      "requires": {}
    },
    "@edx/frontend-build": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-9.1.1.tgz",
-      "integrity": "sha512-D+qQILWu1S1K3kIntPw+T36DrxKPRdIUf0NqCS6jau9bGeEjOCFdh0/P6YZ00utDZxgK61abzW9RiAYia8H5AA==",
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-9.1.4.tgz",
+      "integrity": "sha512-Lw4EqZ8iMnIDLA/xlAEByPzzoyU9faStktYgnRGhPM9DPyQ504NQ0I/qv7vX6qWJ2wII458TNAgGzu9zr2hHWQ==",
      "dev": true,
      "requires": {
        "@babel/cli": "7.16.0",
@@ -28300,15 +28373,15 @@
        "react-dev-utils": "12.0.0",
        "react-refresh": "0.10.0",
        "resolve-url-loader": "5.0.0-beta.1",
-        "sass": "1.26.11",
-        "sass-loader": "10.0.5",
+        "sass": "1.49.9",
+        "sass-loader": "12.6.0",
        "source-map-loader": "0.2.4",
        "style-loader": "2.0.0",
        "url-loader": "4.1.1",
        "webpack": "5.50.0",
        "webpack-bundle-analyzer": "3.9.0",
        "webpack-cli": "4.9.1",
-        "webpack-dev-server": "4.6.0",
+        "webpack-dev-server": "4.7.3",
        "webpack-merge": "5.2.0"
      },
      "dependencies": {
@@ -30988,9 +31061,9 @@
      }
    },
    "@testing-library/jest-dom": {
-      "version": "5.16.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.2.tgz",
-      "integrity": "sha512-6ewxs1MXWwsBFZXIk4nKKskWANelkdUehchEOokHsN8X7c2eKXGw+77aRV63UU8f/DTSVUPLaGxdrj4lN7D/ug==",
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.9.2",
@@ -31130,6 +31203,44 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
    "@types/cookie": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
@@ -31162,6 +31273,29 @@
      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
      "dev": true
    },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
    "@types/fs-extra": {
      "version": "9.0.13",
      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
@@ -31292,6 +31426,12 @@
      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
      "dev": true
    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
    "@types/minimatch": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -31328,6 +31468,18 @@
      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
      "dev": true
    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
    "@types/react": {
      "version": "17.0.39",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
@@ -31381,6 +31533,34 @@
        "schema-utils": "*"
      }
    },
+    "@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/source-list-map": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -31472,6 +31652,15 @@
        }
      }
    },
+    "@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/yargs": {
      "version": "15.0.14",
      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
@@ -33152,9 +33341,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001312",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
-      "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==",
+      "version": "1.0.30001313",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz",
+      "integrity": "sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==",
      "dev": true
    },
    "capture-exit": {
@@ -37489,6 +37678,12 @@
      "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==",
      "dev": true
    },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
    "import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -38279,14 +38474,14 @@
      }
    },
    "jest": {
-      "version": "27.5.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.0.tgz",
-      "integrity": "sha512-sCMZhL9zy0fiFc4H0cKlXq7BcghMSxm5ZnEyaPWTteArU5ix6JjOKyOXSUBGLTQCmt5kuX9zEvQ9BSshHOPB3A==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
      "dev": true,
      "requires": {
-        "@jest/core": "^27.5.0",
+        "@jest/core": "^27.5.1",
        "import-local": "^3.0.2",
-        "jest-cli": "^27.5.0"
+        "jest-cli": "^27.5.1"
      }
    },
    "jest-chain": {
@@ -41972,9 +42167,9 @@
      }
    },
    "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
      "dev": true
    },
    "node-int64": {
@@ -43470,12 +43665,6 @@
        "strict-uri-encode": "^1.0.0"
      }
    },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
-    },
    "queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -43864,9 +44053,9 @@
      "dev": true
    },
    "react-redux": {
-      "version": "7.2.6",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
-      "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
+      "version": "7.2.8",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
+      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.15.4",
@@ -43942,9 +44131,9 @@
      }
    },
    "react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz",
+      "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.12.13",
@@ -43960,16 +44149,16 @@
      }
    },
    "react-router-dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz",
+      "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.12.13",
        "history": "^4.9.0",
        "loose-envify": "^1.3.1",
        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
+        "react-router": "5.3.1",
        "tiny-invariant": "^1.0.2",
        "tiny-warning": "^1.0.0"
      }
@@ -44736,51 +44925,24 @@
      }
    },
    "sass": {
-      "version": "1.26.11",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz",
-      "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==",
+      "version": "1.49.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
+      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
      "dev": true,
      "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
    "sass-loader": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.5.tgz",
-      "integrity": "sha512-2LqoNPtKkZq/XbXNQ4C64GFEleSEHKv6NPSI+bMC/l+jpEXGJhiRYkAQToO24MR7NU4JRY2RpLpJ/gjo2Uf13w==",
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
      "dev": true,
      "requires": {
        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "dev": true,
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
-        }
+        "neo-async": "^2.6.2"
      }
    },
    "saxes": {
@@ -44838,12 +45000,12 @@
      "dev": true
    },
    "selfsigned": {
-      "version": "1.10.14",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
-      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
      "dev": true,
      "requires": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1"
      }
    },
    "semver": {
@@ -46323,9 +46485,9 @@
      "dev": true
    },
    "tsconfig-paths": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
-      "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz",
+      "integrity": "sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==",
      "dev": true,
      "requires": {
        "@types/json5": "^0.0.29",
@@ -46603,24 +46765,6 @@
      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
      "dev": true
    },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
-        }
-      }
-    },
    "url-loader": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -47118,11 +47262,16 @@
      }
    },
    "webpack-dev-server": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz",
-      "integrity": "sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.3.tgz",
+      "integrity": "sha512-mlxq2AsIw2ag016nixkzUkdyOE8ST2GTy34uKSABp1c4nhjZvH90D5ZRR+UOLSsG4Z3TFahAi72a3ymRtfRm+Q==",
      "dev": true,
      "requires": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
        "ansi-html-community": "^0.0.8",
        "bonjour": "^3.5.0",
        "chokidar": "^3.5.2",
@@ -47140,13 +47289,12 @@
        "p-retry": "^4.5.0",
        "portfinder": "^1.0.28",
        "schema-utils": "^4.0.0",
-        "selfsigned": "^1.10.11",
+        "selfsigned": "^2.0.0",
        "serve-index": "^1.9.1",
        "sockjs": "^0.3.21",
        "spdy": "^4.0.2",
        "strip-ansi": "^7.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^5.2.1",
+        "webpack-dev-middleware": "^5.3.0",
        "ws": "^8.1.0"
      },
      "dependencies": {
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
  "homepage": "https://github.com/edx/frontend-component-header#readme",
  "devDependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "9.1.1",
+    "@edx/frontend-build": "9.1.4",
    "@edx/frontend-platform": "1.15.1",
    "@edx/paragon": "19.6.0",
    "codecov": "3.8.3",
@@ -44,15 +44,15 @@
    "prop-types": "15.8.1",
    "react": "16.14.0",
    "react-dom": "16.14.0",
-    "react-redux": "7.2.6",
-    "react-router-dom": "5.3.0",
+    "react-redux": "7.2.8",
+    "react-router-dom": "5.3.1",
    "react-test-renderer": "16.14.0",
    "reactifex": "1.1.1",
    "redux": "4.1.2",
    "redux-saga": "1.1.3",
    "@testing-library/dom": "7.31.2",
-    "@testing-library/jest-dom": "5.16.2",
-    "jest": "27.5.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "jest": "27.5.1",
    "jest-chain": "1.1.5",
    "@testing-library/react": "10.4.9"
  },
@@ -68,7 +68,7 @@
  },
  "peerDependencies": {
    "@edx/frontend-platform": "^1.8.0",
-    "@edx/paragon": ">= ^7.0.0 < 20.0.0",
+    "@edx/paragon": ">= 7.0.0 < 20.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -54,6 +54,24 @@ 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,
@@ -102,6 +120,7 @@ class DesktopHeader extends React.Component {
      logoDestination,
      loggedIn,
      intl,
+      appMenu,
    } = this.props;
    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
@@ -118,6 +137,14 @@ class DesktopHeader extends React.Component {
            >
              {this.renderMainMenu()}
            </nav>
+            {appMenu ? (
+              <nav
+                aria-label={intl.formatMessage(messages['header.label.app.nav'])}
+                className="nav app-nav"
+              >
+                {this.renderAppMenu()}
+              </nav>
+            ) : null}
            <nav
              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
              className="nav secondary-menu-container align-items-center ml-auto"
@@ -155,6 +182,20 @@ 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 = {
@@ -167,6 +208,7 @@ DesktopHeader.defaultProps = {
  avatar: null,
  username: null,
  loggedIn: false,
+  appMenu: null,
 };

 export default injectIntl(DesktopHeader);
--- a/src/Header.messages.jsx
+++ b/src/Header.messages.jsx
@@ -56,6 +56,16 @@ 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',
@@ -96,6 +106,11 @@ const messages = defineMessages({
    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;
--- a/src/StudioHeader.jsx
+++ b/src/StudioHeader.jsx
@@ -0,0 +1,99 @@
+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,
+  mergeConfig,
+  subscribe,
+} from '@edx/frontend-platform';
+
+import DesktopHeader from './DesktopHeader';
+
+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');
+});
+
+function StudioHeader({ intl, mainMenu, appMenu }) {
+  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,
+    mainMenu,
+    userMenu,
+    appMenu,
+    loggedOutItems: [],
+  };
+
+  return <DesktopHeader {...props} />;
+}
+
+StudioHeader.propTypes = {
+  intl: intlShape.isRequired,
+  appMenu: PropTypes.shape(
+    {
+      content: PropTypes.string,
+      href: PropTypes.string,
+      menuItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          href: PropTypes.string,
+          content: PropTypes.string,
+        }),
+      ),
+    },
+  ),
+  mainMenu: PropTypes.arrayOf(
+    PropTypes.shape(
+      {
+        type: PropTypes.string,
+        href: PropTypes.string,
+        content: PropTypes.string,
+      },
+    ),
+  ),
+};
+
+StudioHeader.defaultProps = {
+  appMenu: null,
+  mainMenu: [],
+};
+
+export default injectIntl(StudioHeader);
--- a/src/StudioHeader.test.jsx
+++ b/src/StudioHeader.test.jsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TestRenderer from 'react-test-renderer';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { StudioHeader } from './index';
+
+describe('<StudioHeader />', () => {
+  it('renders correctly', () => {
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with the optional app menu', () => {
+    const appMenu = {
+      content: 'App Menu',
+      menuItems: [
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 1',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 2',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 3',
+        },
+      ],
+    };
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader appMenu={appMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with the optional main menu', () => {
+    const mainMenu = [
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 1',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 2',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 3',
+      },
+    ];
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+              LOGO_URL: process.env.LOGO_URL,
+            },
+          }}
+        >
+          <StudioHeader mainMenu={mainMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
--- a/src/snapshots/StudioHeader.test.jsx.snap
+++ b/src/snapshots/StudioHeader.test.jsx.snap
@@ -0,0 +1,425 @@
+// 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"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-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[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      />
+      <nav
+        aria-label="App"
+        className="nav app-nav"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            onClick={[Function]}
+          >
+            App Menu
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup="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[`<StudioHeader /> renders correctly with the optional main menu 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 1
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 2
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 3
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </a>
+        </div>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup="menu"
+            aria-label="Account menu for edX"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            onClick={[Function]}
+          >
+            <span
+              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              style={
+                Object {
+                  "height": "1.5em",
+                  "width": "1.5em",
+                }
+              }
+            >
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="24px"
+                role="img"
+                style={
+                  Object {
+                    "height": "1.5em",
+                    "width": "1.5em",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="24px"
+              >
+                <path
+                  d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            edX
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,8 @@
 import Header from './Header';
 import LearningHeader from './learning-header/LearningHeader';
 import messages from './i18n/index';
+import StudioHeader from './StudioHeader';

-export { LearningHeader, messages };
+export { LearningHeader, messages, StudioHeader };

 export default Header;
Author	SHA1	Message	Date
Carlos Muniz	c35df7ef60	feat: Add StudioHeader with optional AppMenu (#199 ) * feat: Add StudioHeader with optional AppMenu StudioHeader is a graft of Header with an additional optional AppMenu. Some Frontend Apps use Menus in their custom headers to provide more functionality in their apps. By adding this functionality in StudioHeader, it will be easier for frontend apps in Studio to adopt this component without it affecting the main Header component. * test: Add tests for StudioHeader and AppMenu * fix: Remove orderHistory * fix: Remove Responsive components * fix: Redefine User Menu for Studio The userMenu in StudioHeader will be used more for Studio related items such as Studio Home and Studio Maintenance. This requires new messages and reestablishing the url destinations of these menu items. * fix: Remove loggedOutItems * fix: Remove AUTHN_MINIMAL_HEADER items * fix: Remove unnecessary tests Anonymous sessions do not exist in the Studio. And Studio is not Mobile Ready. Tests of these kind are superfluous and have been removed. * feat: Turn mainMenu into an optional prop * test: Add test for optional mainMenu prop * feat: Update snapshots * fix: Remove ResponsiveContext * fix: Remove href and update appMenu prop Dropping the href because having a link that also works as a dropdown can be mildly confusing. Changing menu (type, href, content ) triplet to stick to the pattern; so we removed "menu". Also adding brackets around the triplet. Lastly, updating test and snapshot. Co-authored-by: Carlos Muniz <cmuniz@trcil.org>	2022-04-21 13:43:37 -04:00
Renovate Bot	a8d5a0b62a	chore(deps): update dependency react-router-dom to v5.3.1	2022-04-18 15:48:35 +00:00
Renovate Bot	9ac38762eb	chore(deps): update dependency react-redux to v7.2.8	2022-04-18 11:55:33 +00:00
Renovate Bot	72077302c0	chore(deps): update dependency jest to v27.5.1	2022-04-11 15:26:22 +00:00
Renovate Bot	f1a54ededf	chore(deps): update dependency @testing-library/jest-dom to v5.16.4	2022-04-11 12:14:34 +00:00
Renovate Bot	709844a459	chore(deps): update dependency @edx/frontend-build to v9.1.4	2022-04-04 13:35:10 +00:00
Usama Sadiq	032c68edf2	Merge pull request #195 from openedx/jenkins/transifex-client-migration-541fe55 fix: transifex migration to new client	2022-04-04 14:10:03 +05:00
edX requirements bot	be8b6fba01	fix: transifex migration to new client	2022-03-17 08:56:54 -04:00
David Joy	541fe55d6e	build: delete CODEOWNERS file We no longer have a community-engineering team.	2022-03-04 10:42:58 -05:00
Jawayria	28a62cf263	Merge pull request #194 from openedx/jawayria/test-peer-dep fix: update peer dep	2022-03-04 20:33:55 +05:00
Jawayria	6e7584c89c	fix: update peer dep	2022-03-04 20:29:16 +05:00