+const ProfileSubtitle = ({ children }) => (
+
{children}
)
-ProfileEmail.propTypes = {
- children: PropTypes.string,
-}
-
-const ProfileEdit = ({ children }) => {
- const { baseUrl } = useConfig()
-
- return (
-
- {children}
-
-
-
- )
-}
-
-ProfileEdit.propTypes = {
+ProfileSubtitle.propTypes = {
children: PropTypes.string,
}
-const ProfileDetails = ({ name, email }) => (
+const ProfileDetails = ({ name, username }) => (
{name}
-
{email}
-
{i18n.t('Edit profile')}
+
{username}
@@ -86,26 +66,36 @@ const ProfileDetails = ({ name, email }) => (
)
ProfileDetails.propTypes = {
- email: PropTypes.string,
name: PropTypes.string,
+ username: PropTypes.string,
}
-export const ProfileHeader = ({ name, email, avatarId }) => (
+export const ProfileHeader = ({ name, avatarId, username }) => (
@@ -113,6 +103,6 @@ export const ProfileHeader = ({ name, email, avatarId }) => (
ProfileHeader.propTypes = {
avatarId: PropTypes.string,
- email: PropTypes.string,
name: PropTypes.string,
+ username: PropTypes.string,
}
diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
index f292d0c9d6..bffbace630 100755
--- a/components/header-bar/src/profile-menu/profile-menu.js
+++ b/components/header-bar/src/profile-menu/profile-menu.js
@@ -1,15 +1,14 @@
import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
-import { colors } from '@dhis2/ui-constants'
+import { colors, elevations } from '@dhis2/ui-constants'
import {
- IconSettings24,
- IconInfo24,
- IconLogOut24,
- IconUser24,
- IconQuestion24,
+ IconSettings16,
+ IconMore16,
+ IconLogOut16,
+ IconUser16,
+ IconQuestion16,
+ IconLock16,
} from '@dhis2/ui-icons'
-import { Card } from '@dhis2-ui/card'
import { Center } from '@dhis2-ui/center'
-import { Divider } from '@dhis2-ui/divider'
import { Layer } from '@dhis2-ui/layer'
import { CircularLoader } from '@dhis2-ui/loader'
import { MenuDivider, MenuItem } from '@dhis2-ui/menu'
@@ -35,87 +34,95 @@ const LoadingMask = () => (
const ProfileContents = ({
name,
- email,
avatarId,
helpUrl,
hideProfileMenu,
showDebugInfoModal,
+ username,
}) => {
const { baseUrl } = useConfig()
const [loading, setLoading] = useState(false)
return (
-
-
-
-
-
+
+
+
+ }
+ />
+ }
+ />
+ }
+ />
+
+ {helpUrl && (
}
+ dense
+ href={helpUrl}
+ label={i18n.t('Help')}
+ value="help"
+ icon={}
/>
- }
- />
- {helpUrl && (
- }
- />
+ )}
+ }
- />
-
-
{loading &&
}
@@ -123,6 +130,10 @@ const ProfileContents = ({
div {
width: 100%;
padding: 0;
+ box-shadow: ${elevations.e300};
+ border-radius: 3px;
+ border: 1px solid ${colors.grey300};
+ overflow: auto;
}
ul {
@@ -139,7 +150,7 @@ const ProfileContents = ({
display: block;
}
`}
-
+
{appName
- ? i18n.t('New {{appName}} version available', { appName })
- : i18n.t('New app version available')}
-
- {i18n.t('Click to reload')}
+ ? i18n.t(
+ 'New {{appName}} version available — Reload to update',
+ { appName }
+ )
+ : i18n.t('New app version available — Reload to update')}
)
return updateAvailable ? (
-
+ aria-label={i18n.t('New app version available — Reload to update')}
+ data-test="dhis2-ui-headerbar-updatenotification"
+ >
+ {updateNotificationLabel}
+
+
) : null
}
diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
index b610a814c6..5eeff392fe 100755
--- a/components/header-bar/src/profile.js
+++ b/components/header-bar/src/profile.js
@@ -6,7 +6,7 @@ import i18n from './locales/index.js'
import { useOnDocClick } from './profile/use-on-doc-click.js'
import { ProfileMenu } from './profile-menu/index.js'
-const Profile = ({ name, email, avatarId, helpUrl }) => {
+const Profile = ({ name, avatarId, helpUrl, username }) => {
const [showProfileMenu, setShowProfileMenu] = useState(false)
const [showDebugInfoModal, setShowDebugInfoModal] = useState(false)
const hideProfileMenu = useCallback(
@@ -45,7 +45,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
{
@@ -94,8 +94,8 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
Profile.propTypes = {
name: PropTypes.string.isRequired,
avatarId: PropTypes.string,
- email: PropTypes.string,
helpUrl: PropTypes.string,
+ username: PropTypes.string,
}
export default Profile
From 1a97d786e36af3aa10eb3c8e363fd6c63a2f6bdc Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Fri, 28 Feb 2025 13:27:43 +0100
Subject: [PATCH 2/5] fix(headerbar): remove profile menu user name prefix
---
components/header-bar/i18n/en.pot | 3 ---
.../header-bar/src/profile-menu/profile-header.js | 12 ++----------
2 files changed, 2 insertions(+), 13 deletions(-)
diff --git a/components/header-bar/i18n/en.pot b/components/header-bar/i18n/en.pot
index 509f053ee6..c15ea2634e 100644
--- a/components/header-bar/i18n/en.pot
+++ b/components/header-bar/i18n/en.pot
@@ -89,9 +89,6 @@ msgstr "Online"
msgid "Offline"
msgstr "Offline"
-msgid "Logged in as "
-msgstr "Logged in as "
-
msgid "Settings"
msgstr "Settings"
diff --git a/components/header-bar/src/profile-menu/profile-header.js b/components/header-bar/src/profile-menu/profile-header.js
index 279d48a070..1ae6582ca1 100755
--- a/components/header-bar/src/profile-menu/profile-header.js
+++ b/components/header-bar/src/profile-menu/profile-header.js
@@ -2,26 +2,18 @@ import { colors, spacers } from '@dhis2/ui-constants'
import { UserAvatar } from '@dhis2-ui/user-avatar'
import PropTypes from 'prop-types'
import React from 'react'
-import i18n from '../locales/index.js'
const ProfileName = ({ children }) => (
-
- {i18n.t('Logged in as ')}
- {children}
-
+ {children}
)
From c6d1c3077d1e97f21d721f94b2f01b1342b4cdfe Mon Sep 17 00:00:00 2001
From: Kai Vandivier
Date: Mon, 3 Mar 2025 10:22:37 +0100
Subject: [PATCH 3/5] test: fix debug info selector
---
.../the_headerbar_should_display_debug_version_infos/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js b/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
index 0a82d6b7ad..929f69c8f6 100644
--- a/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
+++ b/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
@@ -79,7 +79,7 @@ Then('the instance version should show as unknown', () => {
})
When('the user clicks the debug info menu item', () => {
- cy.get('[data-test="dhis2-ui-headerbar-debuginfo"] > a').click()
+ cy.get('[data-test="dhis2-ui-headerbar-debuginfo"]').click()
})
Then('the debug info modal should be shown', () => {
From fc38b84e0fec8c72f89fcec2f11f5ef548d76fbc Mon Sep 17 00:00:00 2001
From: Kai Vandivier
Date: Mon, 3 Mar 2025 10:40:20 +0100
Subject: [PATCH 4/5] test: fix user data mock
---
components/header-bar/src/__e2e__/stories/common.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/components/header-bar/src/__e2e__/stories/common.js b/components/header-bar/src/__e2e__/stories/common.js
index ee553a1355..c8494307c5 100644
--- a/components/header-bar/src/__e2e__/stories/common.js
+++ b/components/header-bar/src/__e2e__/stories/common.js
@@ -94,6 +94,7 @@ export const dataProviderData = {
me: {
name: 'John Doe',
email: 'john_doe@dhis2.org',
+ username: 'john_doe',
settings: {
keyUiLocale: 'en',
},
From 427194d638f7832f769a35ee2919645139b6cdd6 Mon Sep 17 00:00:00 2001
From: Kai Vandivier
Date: Mon, 3 Mar 2025 11:32:16 +0100
Subject: [PATCH 5/5] test: remove inaccurate/unused mock data
---
components/header-bar/src/__e2e__/stories/common.js | 1 -
components/header-bar/src/__e2e__/stories/me-with-avatar.js | 1 -
components/header-bar/src/header-bar.prod.stories.js | 1 -
3 files changed, 3 deletions(-)
diff --git a/components/header-bar/src/__e2e__/stories/common.js b/components/header-bar/src/__e2e__/stories/common.js
index c8494307c5..33e91a7a2b 100644
--- a/components/header-bar/src/__e2e__/stories/common.js
+++ b/components/header-bar/src/__e2e__/stories/common.js
@@ -93,7 +93,6 @@ export const dataProviderData = {
},
me: {
name: 'John Doe',
- email: 'john_doe@dhis2.org',
username: 'john_doe',
settings: {
keyUiLocale: 'en',
diff --git a/components/header-bar/src/__e2e__/stories/me-with-avatar.js b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
index 33526161e3..869cfd4e47 100644
--- a/components/header-bar/src/__e2e__/stories/me-with-avatar.js
+++ b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
@@ -13,7 +13,6 @@ MeWithAvatar.decorators = [
...dataProviderData,
me: {
name: 'John Doe',
- email: 'john_doe@dhis2.org',
username: 'john_doe',
settings: {
keyUiLocale: 'en',
diff --git a/components/header-bar/src/header-bar.prod.stories.js b/components/header-bar/src/header-bar.prod.stories.js
index 3d3c2f7d2a..ba1d986be0 100644
--- a/components/header-bar/src/header-bar.prod.stories.js
+++ b/components/header-bar/src/header-bar.prod.stories.js
@@ -33,7 +33,6 @@ const customData = {
},
me: {
name: 'John Doe',
- email: 'john_doe@dhis2.org',
username: 'john_doe',
settings: {
keyUiLocale: 'en',