feat: display profile name in navbar if available

Display profile name if it is set, else fallback to username

Author: navinkarkera

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -9,7 +9,7 @@ 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`}>
       {intl.formatMessage(messages.dashboard)}
@@ -23,7 +23,7 @@ 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}
+            {name || username}
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
@@ -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/LearningHeader.jsx

@@ -51,6 +51,7 @@ const LearningHeader = ({
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown
           username={authenticatedUser.username}
+          name={authenticatedUser.name}
         />
         )}
         {showUserDropdown && !authenticatedUser && (