From c075a5cc0d365adbac3b761355e27694c0559c60 Mon Sep 17 00:00:00 2001 From: Zainab Amir Date: Sat, 10 Feb 2024 13:59:16 +0500 Subject: [PATCH 1/2] feat: add functionality to remove username from header * Added a new environment variable that controls whether we want to remove username from header * Updated header component to hide username VAN-1805 --- .env | 1 + .env.development | 1 + .env.test | 1 + src/index.jsx | 1 + src/supportHeader/DesktopHeader.jsx | 18 +- src/supportHeader/Header.jsx | 2 + src/supportHeader/Header.test.jsx | 75 +++ src/supportHeader/MobileHeader.jsx | 11 +- .../__snapshots__/Header.test.jsx.snap | 457 ++++++++++++++++++ 9 files changed, 561 insertions(+), 6 deletions(-) create mode 100644 src/supportHeader/Header.test.jsx create mode 100644 src/supportHeader/__snapshots__/Header.test.jsx.snap diff --git a/.env b/.env index eb03380d0..61bf87a69 100644 --- a/.env +++ b/.env @@ -27,3 +27,4 @@ USER_INFO_COOKIE_NAME=null PUBLISHER_BASE_URL='' APP_ID='' MFE_CONFIG_API_URL='' +HIDE_USERNAME_FROM_HEADER='' diff --git a/.env.development b/.env.development index d362f9738..914305ae2 100644 --- a/.env.development +++ b/.env.development @@ -31,3 +31,4 @@ USER_INFO_COOKIE_NAME='edx-user-info' PUBLISHER_BASE_URL='http://localhost:18400' APP_ID='support-tools' MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1' +HIDE_USERNAME_FROM_HEADER='' diff --git a/.env.test b/.env.test index 642dcbf25..bc4c4b3e8 100644 --- a/.env.test +++ b/.env.test @@ -20,3 +20,4 @@ SUBSIDY_BASE_URL='http://localhost:18280' USER_INFO_COOKIE_NAME='edx-user-info' APP_ID='' MFE_CONFIG_API_URL='' +HIDE_USERNAME_FROM_HEADER='' diff --git a/src/index.jsx b/src/index.jsx index 076c22405..b1254186d 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -106,6 +106,7 @@ initialize({ FEATURE_CONFIGURATION_ENTERPRISE_PROVISION: process.env.FEATURE_CONFIGURATION_ENTERPRISE_PROVISION || hasFeatureFlagEnabled('FEATURE_CONFIGURATION_ENTERPRISE_PROVISION') || null, FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: process.env.FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION || hasFeatureFlagEnabled('FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION') || null, SUBSIDY_BASE_URL: process.env.SUBSIDY_BASE_URL || null, + HIDE_USERNAME_FROM_HEADER: process.env.HIDE_USERNAME_FROM_HEADER || false, }); }, }, diff --git a/src/supportHeader/DesktopHeader.jsx b/src/supportHeader/DesktopHeader.jsx index a4f0ca084..7407a4c8e 100644 --- a/src/supportHeader/DesktopHeader.jsx +++ b/src/supportHeader/DesktopHeader.jsx @@ -47,14 +47,22 @@ export default class DesktopHeader extends React.Component { const { loggedIn, avatar, + name, username, + hideUsername, } = this.props; return ( - - {username} - + {hideUsername ? ( + + {name} + + ) : ( + + {username} + + )} {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()} @@ -131,7 +139,9 @@ DesktopHeader.propTypes = { logoDestination: PropTypes.string, avatar: PropTypes.string, username: PropTypes.string, + name: PropTypes.string, loggedIn: PropTypes.bool, + hideUsername: PropTypes.bool, }; DesktopHeader.defaultProps = { @@ -143,5 +153,7 @@ DesktopHeader.defaultProps = { logoDestination: null, avatar: null, username: null, + name: null, loggedIn: false, + hideUsername: false, }; diff --git a/src/supportHeader/Header.jsx b/src/supportHeader/Header.jsx index ca9d31a7d..83ceebbce 100644 --- a/src/supportHeader/Header.jsx +++ b/src/supportHeader/Header.jsx @@ -172,8 +172,10 @@ export default function Header() { logoDestination: getConfig().MINIMAL_HEADER ? null : `${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().MINIMAL_HEADER ? [] : mainMenu, + hideUsername: !!getConfig().HIDE_USERNAME_FROM_HEADER, userMenu, loggedOutItems, }; diff --git a/src/supportHeader/Header.test.jsx b/src/supportHeader/Header.test.jsx new file mode 100644 index 000000000..7497df828 --- /dev/null +++ b/src/supportHeader/Header.test.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { mergeConfig } from '@edx/frontend-platform'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; +import { render } from '@testing-library/react'; +import { Context as ResponsiveContext } from 'react-responsive'; +import { AppContext } from '@edx/frontend-platform/react'; + +import Header from './Header'; + +describe('
', () => { + const appContextValue = { + authenticatedUser: { + userId: '123', + username: 'abc', + name: 'full name', + }, + config: { + LMS_BASE_URL: process.env.LMS_BASE_URL, + LOGO_URL: 'logo_url.jpg', + }, + }; + + it('renders correctly for authenticated desktop', () => { + const component = ( + + + +
+ + + + ); + + const { container: wrapper } = render(component); + expect(wrapper).toMatchSnapshot(); + }); + + it('renders correctly for authenticated desktop when HIDE_USERNAME_FROM_HEADER is set to true', () => { + mergeConfig({ + HIDE_USERNAME_FROM_HEADER: true, + }); + + const component = ( + + + +
+ + + + ); + + const { container: wrapper } = render(component); + expect(wrapper).toMatchSnapshot(); + + mergeConfig({ + HIDE_USERNAME_FROM_HEADER: '', + }); + }); + + it('renders correctly for authenticated mobile', () => { + const component = ( + + + +
+ + + + ); + + const { container: wrapper } = render(component); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/supportHeader/MobileHeader.jsx b/src/supportHeader/MobileHeader.jsx index b94361a05..802be5db3 100644 --- a/src/supportHeader/MobileHeader.jsx +++ b/src/supportHeader/MobileHeader.jsx @@ -49,13 +49,15 @@ export default class MobileHeader extends React.Component { const { loggedIn, avatar, + name, username, + hideUsername, } = this.props; return ( - - {username} + + {hideUsername ? name : username} @@ -151,8 +153,10 @@ MobileHeader.propTypes = { logoDestination: PropTypes.string, avatar: PropTypes.string, username: PropTypes.string, + name: PropTypes.string, loggedIn: PropTypes.bool, stickyOnMobile: PropTypes.bool, + hideUsername: PropTypes.bool, }; MobileHeader.defaultProps = { @@ -164,7 +168,8 @@ MobileHeader.defaultProps = { logoDestination: null, avatar: null, username: null, + name: null, loggedIn: false, stickyOnMobile: true, - + hideUsername: false, }; diff --git a/src/supportHeader/__snapshots__/Header.test.jsx.snap b/src/supportHeader/__snapshots__/Header.test.jsx.snap new file mode 100644 index 000000000..1fa597e64 --- /dev/null +++ b/src/supportHeader/__snapshots__/Header.test.jsx.snap @@ -0,0 +1,457 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`
renders correctly for authenticated desktop 1`] = ` + +`; + +exports[`
renders correctly for authenticated desktop when HIDE_USERNAME_FROM_HEADER is set to true 1`] = ` + +`; + +exports[`
renders correctly for authenticated mobile 1`] = ` +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+`; From 7486c8c7401c811cbd680c1cfdd6256e08398d50 Mon Sep 17 00:00:00 2001 From: Zainab Amir Date: Tue, 13 Feb 2024 18:57:47 +0500 Subject: [PATCH 2/2] feat: update jest config --- jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jest.config.js b/jest.config.js index 4dd958e1e..714427bb0 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,6 +7,7 @@ module.exports = createConfig('jest', { coveragePathIgnorePatterns: [ '/node_modules/', 'src/setupTest.js', + 'src/index.jsx', 'src/i18n', 'src/users/v2/UserPage.jsx', 'src/supportHeader/ToggleVersion.jsx',