fix(headerbar): profile menu design changes

dhis2 · Feb 20, 2025 · 1a226d7 · 1a226d7
1 parent 5cb1705
commit 1a226d7
Show file tree

Hide file tree

Showing 18 changed files with 255 additions and 213 deletions.
diff --git a/components/header-bar/i18n/en.pot b/components/header-bar/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-12T03:40:49.012Z\n"
-"PO-Revision-Date: 2024-06-12T03:40:49.013Z\n"
+"POT-Creation-Date: 2025-02-20T09:30:45.543Z\n"
+"PO-Revision-Date: 2025-02-20T09:30:45.547Z\n"
 
 msgid "Search apps"
 msgstr "Search apps"
@@ -47,32 +47,32 @@ msgstr "Online"
 msgid "Offline"
 msgstr "Offline"
 
-msgid "Edit profile"
-msgstr "Edit profile"
+msgid "Logged in as "
+msgstr "Logged in as "
 
 msgid "Settings"
 msgstr "Settings"
 
-msgid "Account"
-msgstr "Account"
+msgid "Account security"
+msgstr "Account security"
+
+msgid "My profile"
+msgstr "My profile"
 
 msgid "Help"
 msgstr "Help"
 
-msgid "About DHIS2"
-msgstr "About DHIS2"
-
-msgid "Logout"
-msgstr "Logout"
+msgid "System info"
+msgstr "System info"
 
-msgid "New {{appName}} version available"
-msgstr "New {{appName}} version available"
+msgid "Log out"
+msgstr "Log out"
 
-msgid "New app version available"
-msgstr "New app version available"
+msgid "New {{appName}} version available — Reload to update"
+msgstr "New {{appName}} version available — Reload to update"
 
-msgid "Click to reload"
-msgstr "Click to reload"
+msgid "New app version available — Reload to update"
+msgstr "New app version available — Reload to update"
 
 msgid "header bar profile"
 msgstr "header bar profile"
diff --git a/components/header-bar/src/__e2e__/stories/me-with-avatar.js b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
@@ -14,6 +14,7 @@ MeWithAvatar.decorators = [
         me: {
             name: 'John Doe',
             email: '[email protected]',
+            username: 'john_doe',
             settings: {
                 keyUiLocale: 'en',
             },

diff --git a/components/header-bar/src/debug-info/debug-info-menu-item.js b/components/header-bar/src/debug-info/debug-info-menu-item.js
@@ -1,5 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
-import { MenuItem } from '@dhis2-ui/menu'
+import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
@@ -42,27 +41,45 @@ export const DebugInfoMenuItem = ({ hideProfileMenu, showDebugInfoModal }) => {
             <style jsx>{`
                 .root {
                     color: ${colors.grey700};
-                    font-style: italic;
-                    font-size: 14px;
-                    line-height: 17px;
+                    font-size: 12px;
+                    line-height: 15px;
                 }
                 .instance-info {
-                    margin-bottom: 4px;
+                    margin-block-end: ${spacers.dp4};
+                    word-break: break-all;
                 }
                 .version {
-                    white-space: no-wrap;
+                    word-break: break-all;
+                }
+                .debug-info-menu-item {
+                    padding: 0;
                 }
             `}</style>
         </div>
     )
 
     return (
-        <MenuItem
-            dense
+        <button
             onClick={openDebugModal}
-            label={debugInfoLabel}
-            dataTest="dhis2-ui-headerbar-debuginfo"
-        />
+            data-test="dhis2-ui-headerbar-debuginfo"
+        >
+            {debugInfoLabel}
+            <style jsx>{`
+                button {
+                    width: 100%;
+                    margin-block-start: ${spacers.dp4};
+                    padding: ${spacers.dp8} ${spacers.dp12};
+                    background-color: ${colors.grey050};
+                    border: none;
+                    border-block-start: 1px solid ${colors.grey300};
+                    cursor: pointer;
+                    text-align: left;
+                }
+                button:hover {
+                    background-color: ${colors.grey200};
+                }
+            `}</style>
+        </button>
     )
 }
 

diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
@@ -4,13 +4,13 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error and the user does not have an avatar
         Then the headerbar contains a text icon of size 36px
         When the user clicks on the text icon
-        Then the profile menu contains a text icon of size 48px
+        Then the profile menu contains a text icon of size 36px
 
     Scenario: The HeaderBar shows an image icon if the user has an avatar
         Given the HeaderBar loads without an error and the user has an avatar
         Then the headerbar contains an image icon of size 36px
         When the user clicks on the image icon
-        Then the profile menu contains an image icon of size 48px
+        Then the profile menu contains an image icon of size 36px
 
     Scenario: The menu is closed by default
         Given the HeaderBar loads without an error
@@ -21,11 +21,11 @@ Feature: The HeaderBar contains a profile menu
         When the user clicks on the profile icons
         Then the menu opens
 
-    Scenario: The user name and email are displayed
+    Scenario: The user name and username are displayed
         Given the HeaderBar loads without an error
         When the user opens the menu
         And contains the user name
-        And contains the user email
+        And contains the user username
 
     Scenario: The user can edit his profile
         Given the HeaderBar loads without an error

diff --git a/...ins_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js b/...ins_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
@@ -20,11 +20,11 @@ When('the user clicks on the text icon', () => {
     cy.get('[data-test="headerbar-profile-icon-text"]').click()
 })
 
-Then(`the profile menu contains a text icon of size 48px`, () => {
+Then(`the profile menu contains a text icon of size 36px`, () => {
     cy.fixture('HeaderBar/me').then(() => {
         cy.get('[data-test="headerbar-profile-menu-icon-text"]')
             .should('be.visible')
-            .and('have.css', 'height', '48px')
-            .and('have.css', 'width', '48px')
+            .and('have.css', 'height', '36px')
+            .and('have.css', 'width', '36px')
     })
 })
diff --git a/...ar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js b/...ar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
@@ -15,9 +15,9 @@ When('the user clicks on the image icon', () => {
     cy.get('[data-test="headerbar-profile-icon-image"]').click()
 })
 
-Then('the profile menu contains an image icon of size 48px', () => {
+Then('the profile menu contains an image icon of size 36px', () => {
     cy.get('[data-test="headerbar-profile-menu-icon-image"]')
         .should('be.visible')
-        .and('have.css', 'height', '48px')
-        .and('have.css', 'width', '48px')
+        .and('have.css', 'height', '36px')
+        .and('have.css', 'width', '36px')
 })
diff --git a/...r-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js b/...r-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
@@ -1,7 +1,7 @@
 import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to edit the profile', () => {
-    cy.get('[data-test="headerbar-profile-edit-profile-link"]').should(
-        'be.visible'
-    )
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(3)).to.be.visible
+    })
 })
diff --git a/...features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js b/...features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the About DHIS2 page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(3)).to.be.visible
+        expect(lis.eq(5)).to.be.visible
     })
 })
diff --git a/...ar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js b/...ar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the help page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(2)).to.be.visible
+        expect(lis.eq(4)).to.be.visible
     })
 })
diff --git a/...nts/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js b/...nts/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
@@ -5,7 +5,7 @@ const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`
 
 Then('contains a link to log out the user', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        const menuItem = lis.eq(4)
+        const menuItem = lis.eq(7)
         expect(menuItem).to.be.visible
         expect(menuItem.find('a')).to.have.attr('href', logoutUrl)
     })

diff --git a/.../the_user_name_and_email_are_displayed.js → ...e_user_name_and_username_are_displayed.js b/.../the_user_name_and_email_are_displayed.js → ...e_user_name_and_username_are_displayed.js
@@ -7,16 +7,16 @@ Then('contains the user name', () => {
     ).then(([win, $name]) => {
         console.log('win.dataProviderData', win.dataProviderData)
         const { name } = win.dataProviderData.me
-        expect($name.text()).to.equal(name)
+        expect($name.text()).to.contain(name)
     })
 })
 
-Then('contains the user email', () => {
+Then('contains the user username', () => {
     cy.all(
         () => cy.window(),
-        () => cy.get('[data-test="headerbar-profile-user-email"]')
-    ).then(([win, $email]) => {
-        const { email } = win.dataProviderData.me
-        expect($email.text()).to.equal(email)
+        () => cy.get('[data-test="headerbar-profile-user-subtitle"]')
+    ).then(([win, $username]) => {
+        const { username } = win.dataProviderData.me
+        expect($username.text()).to.equal(username)
     })
 })
diff --git a/...nts/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js b/...nts/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
@@ -31,13 +31,13 @@ Then('the update notification should not be displayed', () => {
 Then('the update notification should be displayed', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New Data Visualizer version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 Then('the update notification should be displayed without app name', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New app version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 When('the user clicks the update notification', () => {

diff --git a/components/header-bar/src/header-bar.js b/components/header-bar/src/header-bar.js
@@ -22,7 +22,7 @@ const query = {
     user: {
         resource: 'me',
         params: {
-            fields: ['authorities', 'avatar', 'email', 'name', 'settings'],
+            fields: ['authorities', 'avatar', 'name', 'settings', 'username'],
         },
     },
     apps: {
@@ -98,7 +98,7 @@ export const HeaderBar = ({
 
                             <Profile
                                 name={data.user.name}
-                                email={data.user.email}
+                                username={data.user.username}
                                 avatarId={data.user.avatar?.id}
                                 helpUrl={data.help.helpPageLink}
                             />

diff --git a/components/header-bar/src/header-bar.prod.stories.js b/components/header-bar/src/header-bar.prod.stories.js
@@ -34,6 +34,7 @@ const customData = {
     me: {
         name: 'John Doe',
         email: '[email protected]',
+        username: 'john_doe',
         settings: {
             keyUiLocale: 'en',
         },