diff --git a/.env.development b/.env.development index 9c59d0b86c..adc41c8ad6 100644 --- a/.env.development +++ b/.env.development @@ -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 diff --git a/README.rst b/README.rst index ab9e4db72f..093856adce 100644 --- a/README.rst +++ b/README.rst @@ -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 ``/dashboard`` is used. +* ``EXTERNAL_ACCOUNT_PROFILE_URL`` - An optional URL to the external profile page. If not set then default + internal profile page ``/u/`` 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 \ No newline at end of file + :target: https://github.com/semantic-release/semantic-release diff --git a/package-lock.json b/package-lock.json index 456c863a46..6f127c562f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,6 @@ "@fortawesome/free-regular-svg-icons": "6.5.1", "@fortawesome/free-solid-svg-icons": "6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", - "@openedx/brand-openedx": "^1.2.3", "axios-mock-adapter": "1.22.0", "babel-polyfill": "6.26.0", "react-responsive": "8.2.0", @@ -4233,11 +4232,6 @@ "node": ">= 8" } }, - "node_modules/@openedx/brand-openedx": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@openedx/brand-openedx/-/brand-openedx-1.2.3.tgz", - "integrity": "sha512-Dn9CtpC8fovh++Xi4NF5NJoeR9yU2yXZnV9IujxIyGd/dn0Phq5t6dzJVfupwq09mpDnzJv7egA8Znz/3ljO+w==" - }, "node_modules/@openedx/frontend-build": { "version": "13.1.0", "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-13.1.0.tgz", diff --git a/src/Header.jsx b/src/Header.jsx index c0db257c72..a74dfe7c73 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -27,16 +27,21 @@ 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'); }); const Header = ({ intl }) => { const { authenticatedUser, config } = useContext(AppContext); + const dashboardURL = config.DASHBOARD_URL ? config.DASHBOARD_URL : `${config.LMS_BASE_URL}/dashboard`; const mainMenu = [ { type: 'item', - href: `${config.LMS_BASE_URL}/dashboard`, + href: dashboardURL, content: intl.formatMessage(messages['header.links.courses']), }, ]; @@ -50,18 +55,18 @@ const Header = ({ intl }) => { const userMenu = authenticatedUser === null ? [] : [ { 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']), }, { type: 'item', @@ -88,12 +93,19 @@ const Header = ({ intl }) => { }, ]; + 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, userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu, diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx index a5ff3a5896..286e700753 100644 --- a/src/Header.messages.jsx +++ b/src/Header.messages.jsx @@ -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', diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 9caadb412f..a29d5eecaa 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/src/learning-header/AuthenticatedUserDropdown.jsx @@ -9,9 +9,9 @@ import { Dropdown } from '@openedx/paragon'; import messages from './messages'; -const AuthenticatedUserDropdown = ({ intl, username }) => { +const AuthenticatedUserDropdown = ({ intl, username, name }) => { const dashboardMenuItem = ( - + {intl.formatMessage(messages.dashboard)} ); @@ -23,16 +23,16 @@ const AuthenticatedUserDropdown = ({ intl, username }) => { - {username} + {getConfig().SHOW_FULLNAME === 'true' ? name : username} {dashboardMenuItem} - + {intl.formatMessage(messages.profile)} - {intl.formatMessage(messages.account)} + {getConfig().SHOW_SETTINGS_LABEL === 'true' ? intl.formatMessage(messages.settings) : intl.formatMessage(messages.account)} { 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); diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx index 373001d190..55aba46d16 100644 --- a/src/learning-header/LearningHeader.jsx +++ b/src/learning-header/LearningHeader.jsx @@ -33,7 +33,7 @@ const LearningHeader = ({ const headerLogo = ( @@ -49,9 +49,10 @@ const LearningHeader = ({ {courseTitle} {showUserDropdown && authenticatedUser && ( - + )} {showUserDropdown && !authenticatedUser && ( diff --git a/src/learning-header/messages.js b/src/learning-header/messages.js index 03e85ea3a4..d02b2efa6b 100644 --- a/src/learning-header/messages.js +++ b/src/learning-header/messages.js @@ -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', diff --git a/src/setupTest.js b/src/setupTest.js index 95e0e5866d..32d00244ab 100644 --- a/src/setupTest.js +++ b/src/setupTest.js @@ -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, },