From d5227d407964afc73086d6048a248ced1361db95 Mon Sep 17 00:00:00 2001 From: Asad Iqbal Date: Tue, 21 Dec 2021 16:00:37 +0500 Subject: [PATCH] feat: configureable header links * Added user full name option * nit --- .env.development | 4 +++ README.rst | 10 ++++++-- src/Header.jsx | 25 +++++++++++++------ src/Header.messages.jsx | 9 +++++-- .../AuthenticatedUserDropdown.jsx | 11 ++++---- src/learning-header/LearningHeader.jsx | 9 ++++--- src/learning-header/messages.js | 5 ++++ src/setupTest.js | 4 +++ 8 files changed, 57 insertions(+), 20 deletions(-) diff --git a/.env.development b/.env.development index 9c59d0b86..adc41c8ad 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 ab9e4db72..093856adc 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/src/Header.jsx b/src/Header.jsx index bff801fe0..5271a3245 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -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, diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx index a5ff3a589..286e70075 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 9caadb412..a29d5eeca 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 373001d19..55aba46d1 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 03e85ea3a..d02b2efa6 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 95e0e5866..32d00244a 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, },