feat: configureable header links

* Added user full name option

* nit

Author: asadiqbal08

.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

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 ``<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 [email protected]
 .. |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

package-lock.json

@@ -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,

src/Header.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',

src/Header.messages.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 = (
-    <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);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -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 />

src/learning-header/LearningHeader.jsx

@@ -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',

src/learning-header/messages.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,
     },