feat: display profile name in studio header if available

Author: ArturGaspar

src/studio-header/HeaderBody.jsx

@@ -21,6 +21,7 @@ const HeaderBody = ({
   org,
   title,
   username,
+  name,
   isAdmin,
   studioBaseUrl,
   logoutUrl,
@@ -100,6 +101,7 @@ const HeaderBody = ({
           <UserMenu
             {...{
               username,
+              name,
               studioBaseUrl,
               logoutUrl,
               authenticatedUserAvatar,
@@ -125,6 +127,7 @@ HeaderBody.propTypes = {
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   isAdmin: PropTypes.bool,
   isMobile: PropTypes.bool,
   isHiddenMainMenu: PropTypes.bool,
@@ -150,6 +153,7 @@ HeaderBody.defaultProps = {
   title: '',
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
   isAdmin: false,
   isMobile: false,
   isHiddenMainMenu: false,

src/studio-header/MobileHeader.jsx

@@ -45,6 +45,7 @@ MobileHeader.propTypes = {
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   isAdmin: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -65,6 +66,7 @@ MobileHeader.defaultProps = {
   title: null,
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
   isAdmin: false,
   mainMenuDropdowns: [],
   outlineLink: null,

src/studio-header/StudioHeader.jsx

@@ -26,6 +26,7 @@ const StudioHeader = ({
     org,
     title,
     username: authenticatedUser?.username,
+    name: authenticatedUser?.name,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
     studioBaseUrl: config.STUDIO_BASE_URL,

src/studio-header/UserMenu.jsx

@@ -9,6 +9,7 @@ import getUserMenuItems from './utils';
 
 const UserMenu = ({
   username,
+  name,
   studioBaseUrl,
   logoutUrl,
   authenticatedUserAvatar,
@@ -32,7 +33,7 @@ const UserMenu = ({
       data-testid="avatar-icon"
     />
   );
-  const title = isMobile ? avatar : <>{avatar}{username}</>;
+  const title = isMobile ? avatar : <>{avatar}{name || username}</>;
 
   return (
     <NavDropdownMenu
@@ -50,6 +51,7 @@ const UserMenu = ({
 
 UserMenu.propTypes = {
   username: PropTypes.string,
+  name: PropTypes.string,
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
   authenticatedUserAvatar: PropTypes.string,
@@ -64,6 +66,7 @@ UserMenu.defaultProps = {
   isAdmin: false,
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
 };
 
 export default injectIntl(UserMenu);