From c4714634857eada15cb8510b6ab5bd9d86e48816 Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Tue, 9 Apr 2024 15:56:00 +0530 Subject: [PATCH 1/3] feat: display profile name in navbar if available Display profile name if it is set, else fallback to username --- src/learning-header/AuthenticatedUserDropdown.jsx | 5 +++-- src/learning-header/LearningHeader.jsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 9caadb412..978676c5c 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/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 = ( {intl.formatMessage(messages.dashboard)} @@ -23,7 +23,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => { - {username} + {name || username} @@ -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..88dce7d7c 100644 --- a/src/learning-header/LearningHeader.jsx +++ b/src/learning-header/LearningHeader.jsx @@ -51,6 +51,7 @@ const LearningHeader = ({ {showUserDropdown && authenticatedUser && ( )} {showUserDropdown && !authenticatedUser && ( From 36ecf9fae8b83502dec580a1b52350eb796b13b6 Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Fri, 12 Apr 2024 15:55:06 +0530 Subject: [PATCH 2/3] feat: display profile name in non-learning header navbar --- src/DesktopHeader.jsx | 5 ++++- src/Header.jsx | 1 + src/MobileHeader.jsx | 5 ++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index 05cc9372d..9e02b163e 100644 --- a/src/DesktopHeader.jsx +++ b/src/DesktopHeader.jsx @@ -77,6 +77,7 @@ class DesktopHeader extends React.Component { userMenu, avatar, username, + name, intl, } = this.props; @@ -88,7 +89,7 @@ class DesktopHeader extends React.Component { className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3" > - {username} + {name || username} {userMenu.map((group, index) => ( @@ -200,6 +201,7 @@ DesktopHeader.propTypes = { logoDestination: PropTypes.string, avatar: PropTypes.string, username: PropTypes.string, + name: PropTypes.string, loggedIn: PropTypes.bool, // i18n @@ -216,6 +218,7 @@ DesktopHeader.defaultProps = { logoDestination: null, avatar: null, username: null, + name: null, loggedIn: false, }; diff --git a/src/Header.jsx b/src/Header.jsx index bff801fe0..73fb624e1 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -113,6 +113,7 @@ const Header = ({ logoDestination: `${config.LMS_BASE_URL}/dashboard`, loggedIn: authenticatedUser !== null, username: authenticatedUser !== null ? authenticatedUser.username : null, + name: authenticatedUser !== null ? authenticatedUser.name : null, avatar: authenticatedUser !== null ? authenticatedUser.avatar : null, mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu, secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu, diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx index f8c02fccf..d0b99bb5e 100644 --- a/src/MobileHeader.jsx +++ b/src/MobileHeader.jsx @@ -115,6 +115,7 @@ class MobileHeader extends React.Component { loggedIn, avatar, username, + name, stickyOnMobile, intl, mainMenu, @@ -166,7 +167,7 @@ class MobileHeader extends React.Component { aria-label={intl.formatMessage(messages['header.label.account.menu'])} title={intl.formatMessage(messages['header.label.account.menu'])} > - + {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()} @@ -208,6 +209,7 @@ MobileHeader.propTypes = { logoDestination: PropTypes.string, avatar: PropTypes.string, username: PropTypes.string, + name: PropTypes.string, loggedIn: PropTypes.bool, stickyOnMobile: PropTypes.bool, @@ -225,6 +227,7 @@ MobileHeader.defaultProps = { logoDestination: null, avatar: null, username: null, + name: null, loggedIn: false, stickyOnMobile: true, From c3cffff6ffa3541c426f5b97f7a12b8e55b2035b Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Fri, 17 May 2024 18:07:19 +0530 Subject: [PATCH 3/3] fix: use single prop in header for username and name --- example/index.js | 2 ++ src/DesktopHeader.jsx | 5 +---- src/Header.jsx | 3 +-- src/MobileHeader.jsx | 5 +---- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/example/index.js b/example/index.js index 2559c03d4..a6bdb6779 100644 --- a/example/index.js +++ b/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, }, diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index 9e02b163e..05cc9372d 100644 --- a/src/DesktopHeader.jsx +++ b/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" > - {name || username} + {username} {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, }; diff --git a/src/Header.jsx b/src/Header.jsx index 73fb624e1..f9e50f19d 100644 --- a/src/Header.jsx +++ b/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, diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx index d0b99bb5e..f8c02fccf 100644 --- a/src/MobileHeader.jsx +++ b/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'])} > - + {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,