fix: use single prop in header for username and name

Author: navinkarkera

example/index.js

@@ -26,6 +26,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           username: 'testuser',
+          username: 'Test user',
           roles: [],
           administrator: false,
         },
@@ -38,6 +39,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           username: 'testuser',
+          username: 'Test user',
           roles: [],
           administrator: false,
         },

src/DesktopHeader.jsx

@@ -77,7 +77,6 @@ class DesktopHeader extends React.Component {
       userMenu,
       avatar,
       username,
-      name,
       intl,
     } = this.props;
 
@@ -89,7 +88,7 @@ class DesktopHeader extends React.Component {
           className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
           <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {name || username} <CaretIcon role="img" aria-hidden focusable="false" />
+          {username} <CaretIcon role="img" aria-hidden focusable="false" />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
           {userMenu.map((group, index) => (
@@ -201,7 +200,6 @@ DesktopHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
-  name: PropTypes.string,
   loggedIn: PropTypes.bool,
 
   // i18n
@@ -218,7 +216,6 @@ DesktopHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
-  name: null,
   loggedIn: false,
 };
 

src/Header.jsx

@@ -112,8 +112,7 @@ const Header = ({
     logoAltText: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
-    name: authenticatedUser !== null ? authenticatedUser.name : null,
+    username: authenticatedUser !== null ? authenticatedUser.name || authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
     secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu,

src/MobileHeader.jsx

@@ -115,7 +115,6 @@ class MobileHeader extends React.Component {
       loggedIn,
       avatar,
       username,
-      name,
       stickyOnMobile,
       intl,
       mainMenu,
@@ -167,7 +166,7 @@ class MobileHeader extends React.Component {
                 aria-label={intl.formatMessage(messages['header.label.account.menu'])}
                 title={intl.formatMessage(messages['header.label.account.menu'])}
               >
-                <Avatar size="1.5rem" src={avatar} alt={name || username} />
+                <Avatar size="1.5rem" src={avatar} alt={username} />
               </MenuTrigger>
               <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
@@ -209,7 +208,6 @@ MobileHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
-  name: PropTypes.string,
   loggedIn: PropTypes.bool,
   stickyOnMobile: PropTypes.bool,
 
@@ -227,7 +225,6 @@ MobileHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
-  name: null,
   loggedIn: false,
   stickyOnMobile: true,