Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: configureable header links #475

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .env.development
Original file line number Diff line number Diff line change
@@ -4,7 +4,9 @@ ACCOUNT_SETTINGS_URL=http://localhost:1997
BASE_URL=localhost:8080
CREDENTIALS_BASE_URL=http://localhost:18150
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
DASHBOARD_URL=null
ECOMMERCE_BASE_URL=http://localhost:18130
EXTERNAL_ACCOUNT_PROFILE_URL=null
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
LMS_BASE_URL=http://localhost:18000
STUDIO_BASE_URL=http://localhost:18010
@@ -14,6 +16,8 @@ MARKETING_SITE_BASE_URL=http://localhost:18000
ORDER_HISTORY_URL=localhost:1996/orders
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
SEGMENT_KEY=null
SHOW_FULLNAME='false'
SHOW_SETTINGS_LABEL='false'
SITE_NAME=Open edX
USER_INFO_COOKIE_NAME=edx-user-info
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
10 changes: 8 additions & 2 deletions README.rst
Original file line number Diff line number Diff line change
@@ -51,7 +51,13 @@ Environment Variables
* ``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.

* ``DASHBOARD_URL`` - The URL of the dashboard page. If not set the default ``<LMS_BASE_URL>/dashboard`` is used.
* ``EXTERNAL_ACCOUNT_PROFILE_URL`` - An optional URL to the external profile page. If not set then default
internal profile page ``<ACCOUNT_PROFILE_URL>/u/<username>`` is used.
* ``SHOW_FULLNAME`` - A boolean flag to display ``full name`` of the user in the header.
Defaults to ``false`` and ``username`` is displayed.
* ``SHOW_SETTINGS_LABEL`` - A boolean flag to use `Settings` label instead of `Account` for the Account Settings page.
Defaults to ``false`` and uses the ``Account`` label.
Installation
============

@@ -184,4 +190,4 @@ Please do not report security issues in public. Please email security@openedx.or
.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
:target: @edx/frontend-component-header
.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
:target: https://github.com/semantic-release/semantic-release
:target: https://github.com/semantic-release/semantic-release
25 changes: 18 additions & 7 deletions src/Header.jsx
Original file line number Diff line number Diff line change
@@ -28,6 +28,10 @@ ensureConfig([
subscribe(APP_CONFIG_INITIALIZED, () => {
mergeConfig({
AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
DASHBOARD_URL: process.env.DASHBOARD_URL,
EXTERNAL_ACCOUNT_PROFILE_URL: process.env.EXTERNAL_ACCOUNT_PROFILE_URL,
SHOW_FULLNAME: process.env.SHOW_FULLNAME,
SHOW_SETTINGS_LABEL: process.env.SHOW_SETTINGS_LABEL,
}, 'Header additional config');
});

@@ -50,11 +54,11 @@ const Header = ({
intl, mainMenuItems, secondaryMenuItems, userMenuItems,
}) => {
const { authenticatedUser, config } = useContext(AppContext);

const dashboardURL = config.DASHBOARD_URL ? config.DASHBOARD_URL : `${config.LMS_BASE_URL}/dashboard`;
const defaultMainMenu = [
{
type: 'item',
href: `${config.LMS_BASE_URL}/dashboard`,
href: dashboardURL,
content: intl.formatMessage(messages['header.links.courses']),
},
];
@@ -63,18 +67,18 @@ const Header = ({
items: [
{
type: 'item',
href: `${config.LMS_BASE_URL}/dashboard`,
href: dashboardURL,
content: intl.formatMessage(messages['header.user.menu.dashboard']),
},
{
type: 'item',
href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
href: config.EXTERNAL_ACCOUNT_PROFILE_URL ? config.EXTERNAL_ACCOUNT_PROFILE_URL : `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
content: intl.formatMessage(messages['header.user.menu.profile']),
},
{
type: 'item',
href: config.ACCOUNT_SETTINGS_URL,
content: intl.formatMessage(messages['header.user.menu.account.settings']),
content: config.SHOW_SETTINGS_LABEL === 'true' ? intl.formatMessage(messages['header.user.menu.settings']) : intl.formatMessage(messages['header.user.menu.account']),
},
// Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
...(config.ORDER_HISTORY_URL ? [{
@@ -107,12 +111,19 @@ const Header = ({
},
];

let name = null;
if (authenticatedUser !== null && config.SHOW_FULLNAME === 'true') {
name = authenticatedUser.name;
} else if (authenticatedUser !== null) {
name = authenticatedUser.username;
}

const props = {
logo: config.LOGO_URL,
logoAltText: config.SITE_NAME,
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
logoDestination: config.DASHBOARD_URL ? config.DASHBOARD_URL : `${config.LMS_BASE_URL}/dashboard`,
loggedIn: authenticatedUser !== null,
username: authenticatedUser !== null ? authenticatedUser.username : null,
username: name,
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu,
9 changes: 7 additions & 2 deletions src/Header.messages.jsx
Original file line number Diff line number Diff line change
@@ -31,11 +31,16 @@ const messages = defineMessages({
defaultMessage: 'Profile',
description: 'Link to the user profile',
},
'header.user.menu.account.settings': {
id: 'header.user.menu.account.settings',
'header.user.menu.account': {
id: 'header.user.menu.account',
defaultMessage: 'Account',
description: 'Link to account settings',
},
'header.user.menu.settings': {
id: 'header.user.menu.settings',
defaultMessage: 'Settings',
description: 'Link to account settings',
},
'header.user.menu.order.history': {
id: 'header.user.menu.order.history',
defaultMessage: 'Order History',
11 changes: 6 additions & 5 deletions src/learning-header/AuthenticatedUserDropdown.jsx
Original file line number Diff line number Diff line change
@@ -9,9 +9,9 @@ import { Dropdown } from '@openedx/paragon';

import messages from './messages';

const AuthenticatedUserDropdown = ({ intl, username }) => {
const AuthenticatedUserDropdown = ({ intl, username, name }) => {
const dashboardMenuItem = (
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
<Dropdown.Item href={getConfig().DASHBOARD_URL ? getConfig().DASHBOARD_URL : `${getConfig().LMS_BASE_URL}/dashboard`}>
{intl.formatMessage(messages.dashboard)}
</Dropdown.Item>
);
@@ -23,16 +23,16 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
<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}
{getConfig().SHOW_FULLNAME === 'true' ? name : username}
</span>
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-right">
{dashboardMenuItem}
<Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
<Dropdown.Item href={getConfig().EXTERNAL_ACCOUNT_PROFILE_URL ? getConfig().EXTERNAL_ACCOUNT_PROFILE_URL : `${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
{intl.formatMessage(messages.profile)}
</Dropdown.Item>
<Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
{intl.formatMessage(messages.account)}
{getConfig().SHOW_SETTINGS_LABEL === 'true' ? intl.formatMessage(messages.settings) : intl.formatMessage(messages.account)}
</Dropdown.Item>
{ getConfig().ORDER_HISTORY_URL && (
<Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
@@ -51,6 +51,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
AuthenticatedUserDropdown.propTypes = {
intl: intlShape.isRequired,
username: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
};

export default injectIntl(AuthenticatedUserDropdown);
9 changes: 5 additions & 4 deletions src/learning-header/LearningHeader.jsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ const LearningHeader = ({
const headerLogo = (
<LinkedLogo
className="logo"
href={`${getConfig().LMS_BASE_URL}/dashboard`}
href={getConfig().DASHBOARD_URL ? getConfig().DASHBOARD_URL : `${getConfig().LMS_BASE_URL}/dashboard`}
src={getConfig().LOGO_URL}
alt={getConfig().SITE_NAME}
/>
@@ -49,9 +49,10 @@ const LearningHeader = ({
<span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
</div>
{showUserDropdown && authenticatedUser && (
<AuthenticatedUserDropdown
username={authenticatedUser.username}
/>
<AuthenticatedUserDropdown
username={authenticatedUser.username}
name={authenticatedUser.name}
/>
)}
{showUserDropdown && !authenticatedUser && (
<AnonymousUserMenu />
5 changes: 5 additions & 0 deletions src/learning-header/messages.js
Original file line number Diff line number Diff line change
@@ -21,6 +21,11 @@ const messages = defineMessages({
defaultMessage: 'Account',
description: 'The text for the user menu Account navigation link.',
},
settings: {
id: 'header.menu.settings.label',
defaultMessage: 'Settings',
description: 'The text for the user menu Settings navigation link.',
},
orderHistory: {
id: 'header.menu.orderHistory.label',
defaultMessage: 'Order History',
4 changes: 4 additions & 0 deletions src/setupTest.js
Original file line number Diff line number Diff line change
@@ -32,6 +32,7 @@ process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
process.env.SEGMENT_KEY = 'segment_whoa';
process.env.SHOW_FULLNAME = false;
process.env.SITE_NAME = 'edX';
process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
@@ -48,6 +49,7 @@ class MockLoggingService {
export const authenticatedUser = {
userId: 'abc123',
username: 'Mock User',
name: 'Mock User Name',
roles: [],
administrator: false,
};
@@ -66,10 +68,12 @@ export function initializeMockApp() {
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,
SHOW_FULLNAME: process.env.SHOW_FULLNAME || null,

authenticatedUser: {
userId: 'abc123',
username: 'Mock User',
name: 'Mock User Name',
roles: [],
administrator: false,
},