Compare commits
1 Commits
v2.4.2
...
revert-95-
| Author | SHA1 | Date | |
|---|---|---|---|
|
ea3a5683a9 |
@@ -6,7 +6,7 @@ ECOMMERCE_BASE_URL=http://localhost:18130
|
||||
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
|
||||
LMS_BASE_URL=http://localhost:18000
|
||||
LOGIN_URL=http://localhost:18000/login
|
||||
LOGOUT_URL=http://localhost:18000/logout
|
||||
LOGOUT_URL=http://localhost:18000/login
|
||||
MARKETING_SITE_BASE_URL=http://localhost:18000
|
||||
ORDER_HISTORY_URL=localhost:1996/orders
|
||||
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
|
||||
|
||||
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
@@ -1 +0,0 @@
|
||||
* @edx/community-engineering
|
||||
4
.github/workflows/ci.yml
vendored
4
.github/workflows/ci.yml
vendored
@@ -9,7 +9,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup Nodejs
|
||||
uses: actions/setup-node@v2
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 12
|
||||
- name: Install dependencies
|
||||
@@ -23,4 +23,4 @@ jobs:
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v2
|
||||
uses: codecov/codecov-action@v1
|
||||
|
||||
10
.github/workflows/commitlint.yml
vendored
10
.github/workflows/commitlint.yml
vendored
@@ -1,10 +0,0 @@
|
||||
# Run commitlint on the commit messages in a pull request.
|
||||
|
||||
name: Lint Commit Messages
|
||||
|
||||
on:
|
||||
- pull_request
|
||||
|
||||
jobs:
|
||||
commitlint:
|
||||
uses: edx/.github/.github/workflows/commitlint.yml@master
|
||||
8
.github/workflows/release.yml
vendored
8
.github/workflows/release.yml
vendored
@@ -13,7 +13,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v2
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 12
|
||||
- name: Install dependencies
|
||||
@@ -27,13 +27,11 @@ jobs:
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v2
|
||||
uses: codecov/codecov-action@v1
|
||||
- name: Build
|
||||
run: npm run build
|
||||
- name: Release
|
||||
uses: cycjimmy/semantic-release-action@v2
|
||||
with:
|
||||
semantic_version: 16
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
|
||||
run: npx semantic-release
|
||||
|
||||
73
README.rst
73
README.rst
@@ -1,76 +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/edx/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.
|
||||
* ``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/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
|
||||
* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
|
||||
|
||||
***********
|
||||
Development
|
||||
***********
|
||||
|
||||
Install dependencies::
|
||||
|
||||
npm i
|
||||
|
||||
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
|
||||
|
||||
3
commitlint.config.js
Normal file
3
commitlint.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
extends: ['@commitlint/config-angular'],
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('jest', {
|
||||
setupFilesAfterEnv: [
|
||||
setupFiles: [
|
||||
'<rootDir>/src/setupTest.js',
|
||||
],
|
||||
});
|
||||
|
||||
13194
package-lock.json
generated
13194
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
51
package.json
51
package.json
@@ -19,7 +19,8 @@
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
"pre-commit": "npm run lint",
|
||||
"commit-msg": "commitlint -e $GIT_PARAMS"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
@@ -33,42 +34,36 @@
|
||||
},
|
||||
"homepage": "https://github.com/edx/frontend-component-header#readme",
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "8.2.0",
|
||||
"@commitlint/config-angular": "8.2.0",
|
||||
"@commitlint/prompt": "8.2.0",
|
||||
"@commitlint/prompt-cli": "8.2.0",
|
||||
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
|
||||
"@edx/frontend-build": "5.6.14",
|
||||
"@edx/frontend-platform": "1.14.1",
|
||||
"@edx/paragon": "12.8.0",
|
||||
"codecov": "3.8.3",
|
||||
"enzyme": "3.11.0",
|
||||
"enzyme-adapter-react-16": "1.15.6",
|
||||
"husky": "7.0.4",
|
||||
"@edx/frontend-build": "5.4.0",
|
||||
"@edx/frontend-platform": "1.8.4",
|
||||
"@edx/paragon": "12.0.5",
|
||||
"codecov": "3.7.2",
|
||||
"enzyme": "3.10.0",
|
||||
"enzyme-adapter-react-16": "1.14.0",
|
||||
"husky": "3.0.9",
|
||||
"prop-types": "15.7.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react-redux": "7.2.6",
|
||||
"react-router-dom": "5.3.0",
|
||||
"react-test-renderer": "16.14.0",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
"react-redux": "7.1.3",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-test-renderer": "16.9.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.15.1",
|
||||
"jest": "27.3.1",
|
||||
"jest-chain": "1.1.5",
|
||||
"@testing-library/react": "10.3.0"
|
||||
"redux": "4.0.5",
|
||||
"redux-saga": "1.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-polyfill": "6.26.0",
|
||||
"react-responsive": "8.2.0",
|
||||
"react-transition-group": "4.4.2",
|
||||
"@fortawesome/fontawesome-svg-core": "1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14"
|
||||
"react-responsive": "8.0.3",
|
||||
"react-transition-group": "4.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@edx/frontend-platform": "^1.8.0",
|
||||
"@edx/paragon": ">= ^7.0.0 < 13.0.0",
|
||||
"@edx/paragon": "^7.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0"
|
||||
|
||||
@@ -1,28 +1,9 @@
|
||||
{
|
||||
"extends": [
|
||||
"config:base",
|
||||
"schedule:weekly",
|
||||
":automergeLinters",
|
||||
":automergeMinor",
|
||||
":automergeTesters",
|
||||
":enableVulnerabilityAlerts",
|
||||
":rebaseStalePrs",
|
||||
":semanticCommits",
|
||||
":updateNotScheduled"
|
||||
"config:base"
|
||||
],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchDepTypes": [
|
||||
"devDependencies"
|
||||
],
|
||||
"matchUpdateTypes": [
|
||||
"lockFileMaintenance",
|
||||
"minor",
|
||||
"patch",
|
||||
"pin"
|
||||
],
|
||||
"automerge": true
|
||||
}
|
||||
],
|
||||
"timezone": "America/New_York"
|
||||
"patch": {
|
||||
"automerge": true
|
||||
},
|
||||
"rebaseStalePrs": true
|
||||
}
|
||||
|
||||
@@ -108,7 +108,6 @@ class DesktopHeader extends React.Component {
|
||||
|
||||
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} />}
|
||||
|
||||
@@ -21,7 +21,6 @@ ensureConfig([
|
||||
'LOGIN_URL',
|
||||
'SITE_NAME',
|
||||
'LOGO_URL',
|
||||
'ORDER_HISTORY_URL',
|
||||
], 'Header component');
|
||||
|
||||
subscribe(APP_CONFIG_INITIALIZED, () => {
|
||||
@@ -41,12 +40,6 @@ function Header({ intl }) {
|
||||
},
|
||||
];
|
||||
|
||||
const orderHistoryItem = {
|
||||
type: 'item',
|
||||
href: config.ORDER_HISTORY_URL,
|
||||
content: intl.formatMessage(messages['header.user.menu.order.history']),
|
||||
};
|
||||
|
||||
const userMenu = authenticatedUser === null ? [] : [
|
||||
{
|
||||
type: 'item',
|
||||
@@ -70,11 +63,6 @@ function 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',
|
||||
@@ -91,6 +79,7 @@ function Header({ intl }) {
|
||||
const props = {
|
||||
logo: config.LOGO_URL,
|
||||
logoAltText: config.SITE_NAME,
|
||||
siteName: config.SITE_NAME,
|
||||
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
|
||||
loggedIn: authenticatedUser !== null,
|
||||
username: authenticatedUser !== null ? authenticatedUser.username : null,
|
||||
|
||||
@@ -91,11 +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.',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
|
||||
@@ -104,7 +104,6 @@ class MobileHeader extends React.Component {
|
||||
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">
|
||||
|
||||
|
||||
@@ -4,12 +4,6 @@ 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"
|
||||
>
|
||||
@@ -64,12 +58,6 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
|
||||
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"
|
||||
>
|
||||
@@ -200,12 +188,6 @@ 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"
|
||||
>
|
||||
@@ -310,12 +292,6 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
|
||||
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"
|
||||
>
|
||||
|
||||
@@ -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;
|
||||
@@ -1,13 +1,4 @@
|
||||
import arMessages from './messages/ar.json';
|
||||
|
||||
import caMessages from './messages/ca.json';
|
||||
import heMessages from './messages/he.json';
|
||||
import idMessages from './messages/id.json';
|
||||
import plMessages from './messages/pl.json';
|
||||
import ruMessages from './messages/ru.json';
|
||||
import thMessages from './messages/th.json';
|
||||
import ukMessages from './messages/uk.json';
|
||||
|
||||
// no need to import en messages-- they are in the defaultMessage field
|
||||
import es419Messages from './messages/es_419.json';
|
||||
import frMessages from './messages/fr.json';
|
||||
@@ -17,13 +8,6 @@ import zhcnMessages from './messages/zh_CN.json';
|
||||
|
||||
const messages = {
|
||||
ar: arMessages,
|
||||
ca: caMessages,
|
||||
he: heMessages,
|
||||
id: idMessages,
|
||||
pl: plMessages,
|
||||
ru: ruMessages,
|
||||
th: thMessages,
|
||||
uk: ukMessages,
|
||||
'es-419': es419Messages,
|
||||
fr: frMessages,
|
||||
'zh-cn': zhcnMessages,
|
||||
|
||||
@@ -1,30 +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.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.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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1,30 +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.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.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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +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.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.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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1,30 +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.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.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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import Header from './Header';
|
||||
import LearningHeader from './learning-header/LearningHeader';
|
||||
import messages from './i18n/index';
|
||||
|
||||
export { LearningHeader, messages };
|
||||
export { messages };
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -25,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;
|
||||
|
||||
@@ -1,34 +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';
|
||||
|
||||
function AnonymousUserMenu({ intl }) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="mr-3"
|
||||
variant="outline-primary"
|
||||
href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
|
||||
>
|
||||
{intl.formatMessage(genericMessages.registerSentenceCase)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
href={`${getLoginRedirectUrl(global.location.href)}`}
|
||||
>
|
||||
{intl.formatMessage(genericMessages.signInSentenceCase)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
AnonymousUserMenu.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(AnonymousUserMenu);
|
||||
@@ -1,57 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Dropdown } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function AuthenticatedUserDropdown({ intl, username }) {
|
||||
const dashboardMenuItem = (
|
||||
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
|
||||
{intl.formatMessage(messages.dashboard)}
|
||||
</Dropdown.Item>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
|
||||
<Dropdown className="user-dropdown">
|
||||
<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().LMS_BASE_URL}/u/${username}`}>
|
||||
{intl.formatMessage(messages.profile)}
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
|
||||
{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);
|
||||
@@ -1,81 +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 } from '@edx/frontend-platform/react';
|
||||
|
||||
import AnonymousUserMenu from './AnonymousUserMenu';
|
||||
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
|
||||
import messages from './messages';
|
||||
|
||||
function LinkedLogo({
|
||||
href,
|
||||
src,
|
||||
alt,
|
||||
...attributes
|
||||
}) {
|
||||
return (
|
||||
<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,
|
||||
};
|
||||
|
||||
function 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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
@@ -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.getByRole('button')).toHaveTextContent(authenticatedUser.username);
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
102
src/setupTest.js
102
src/setupTest.js
@@ -1,21 +1,8 @@
|
||||
/* 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() });
|
||||
|
||||
@@ -29,7 +16,7 @@ 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';
|
||||
@@ -40,90 +27,3 @@ 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
|
||||
} = {},
|
||||
) {
|
||||
function Wrapper({ children }) {
|
||||
return (
|
||||
// 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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user