@dhis2-ui/header-bar 10.16.2 → 10.16.3-alpha.1

package/src/profile-menu/profile-header.js

@@ -0,0 +1,118 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { UserAvatar } from '@dhis2-ui/user-avatar'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { joinPath } from '../join-path.js'
+import i18n from '../locales/index.js'
+
+const ProfileName = ({ children }) => (
+    <div data-test="headerbar-profile-username">
+        {children}
+
+        <style jsx>{`
+            div {
+                margin-bottom: 3px;
+                font-size: 16px;
+                line-height: 19px;
+            }
+        `}</style>
+    </div>
+)
+ProfileName.propTypes = {
+    children: PropTypes.string,
+}
+
+const ProfileEmail = ({ children }) => (
+    <div data-test="headerbar-profile-user-email">
+        {children}
+
+        <style jsx>{`
+            div {
+                margin-bottom: 6px;
+                font-size: 14px;
+                line-height: 16px;
+            }
+        `}</style>
+    </div>
+)
+ProfileEmail.propTypes = {
+    children: PropTypes.string,
+}
+
+const ProfileEdit = ({ children }) => {
+    const { baseUrl } = useConfig()
+
+    return (
+        <a
+            href={joinPath(baseUrl, 'dhis-web-user-profile/#/profile')}
+            data-test="headerbar-profile-edit-profile-link"
+        >
+            {children}
+
+            <style jsx>{`
+                a {
+                    color: rgba(0, 0, 0, 0.87);
+                    font-size: 12px;
+                    line-height: 14px;
+                    text-decoration: underline;
+                    cursor: pointer;
+                }
+            `}</style>
+        </a>
+    )
+}
+
+ProfileEdit.propTypes = {
+    children: PropTypes.string,
+}
+
+const ProfileDetails = ({ name, email }) => (
+    <div>
+        <ProfileName>{name}</ProfileName>
+        <ProfileEmail>{email}</ProfileEmail>
+        <ProfileEdit>{i18n.t('Edit profile')}</ProfileEdit>
+
+        <style jsx>{`
+            div {
+                display: flex;
+                flex-direction: column;
+                margin-inline-start: 20px;
+                color: #000;
+                font-size: 14px;
+                font-weight: 400;
+            }
+        `}</style>
+    </div>
+)
+
+ProfileDetails.propTypes = {
+    email: PropTypes.string,
+    name: PropTypes.string,
+}
+
+export const ProfileHeader = ({ name, email, avatarId }) => (
+    <div>
+        <UserAvatar
+            avatarId={avatarId}
+            name={name}
+            dataTest="headerbar-profile-menu-icon"
+            large
+        />
+        <ProfileDetails name={name} email={email} />
+
+        <style jsx>{`
+            div {
+                display: flex;
+                flex-direction: row;
+                margin-inline-start: 24px;
+                padding-top: 20px;
+            }
+        `}</style>
+    </div>
+)
+
+ProfileHeader.propTypes = {
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    name: PropTypes.string,
+}

package/src/profile-menu/profile-menu.js

@@ -0,0 +1,176 @@
+import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
+import { colors } from '@dhis2/ui-constants'
+import {
+    IconSettings24,
+    IconInfo24,
+    IconLogOut24,
+    IconUser24,
+    IconQuestion24,
+} 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'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { DebugInfoMenuItem } from '../debug-info/debug-info-menu-item.js'
+import { joinPath } from '../join-path.js'
+import i18n from '../locales/index.js'
+import { ProfileHeader } from './profile-header.js'
+import { UpdateNotification } from './update-notification.js'
+
+const LoadingMask = () => (
+    <Layer
+        translucent
+        disablePortal
+        dataTest="headerbar-profile-menu-loading-mask"
+    >
+        <Center>
+            <CircularLoader />
+        </Center>
+    </Layer>
+)
+
+const ProfileContents = ({
+    name,
+    email,
+    avatarId,
+    helpUrl,
+    hideProfileMenu,
+    showDebugInfoModal,
+}) => {
+    const { baseUrl } = useConfig()
+    const [loading, setLoading] = useState(false)
+
+    return (
+        <Card>
+            <div>
+                <ProfileHeader name={name} email={email} avatarId={avatarId} />
+                <Divider margin="13px 0 7px 0" />
+                <ul data-test="headerbar-profile-menu">
+                    <MenuItem
+                        href={joinPath(
+                            baseUrl,
+                            'dhis-web-user-profile/#/settings'
+                        )}
+                        label={i18n.t('Settings')}
+                        value="settings"
+                        icon={<IconSettings24 color={colors.grey700} />}
+                    />
+                    <MenuItem
+                        href={joinPath(
+                            baseUrl,
+                            'dhis-web-user-profile/#/account'
+                        )}
+                        label={i18n.t('Account')}
+                        value="account"
+                        icon={<IconUser24 color={colors.grey700} />}
+                    />
+                    {helpUrl && (
+                        <MenuItem
+                            href={helpUrl}
+                            label={i18n.t('Help')}
+                            value="help"
+                            icon={<IconQuestion24 color={colors.grey700} />}
+                        />
+                    )}
+                    <MenuItem
+                        href={joinPath(
+                            baseUrl,
+                            'dhis-web-user-profile/#/aboutPage'
+                        )}
+                        label={i18n.t('About DHIS2')}
+                        value="about"
+                        icon={<IconInfo24 color={colors.grey700} />}
+                    />
+                    <MenuItem
+                        href={joinPath(
+                            baseUrl,
+                            'dhis-web-commons-security/logout.action'
+                        )}
+                        // NB: By MenuItem implementation, this callback
+                        // overwrites default navigation behavior but maintains
+                        // the href attribute
+                        onClick={async () => {
+                            setLoading(true)
+                            await clearSensitiveCaches()
+                            setLoading(false)
+                            window.location.assign(
+                                joinPath(
+                                    baseUrl,
+                                    'dhis-web-commons-security/logout.action'
+                                )
+                            )
+                        }}
+                        label={i18n.t('Logout')}
+                        value="logout"
+                        icon={<IconLogOut24 color={colors.grey700} />}
+                    />
+                    <MenuDivider dense />
+                    <DebugInfoMenuItem
+                        hideProfileMenu={hideProfileMenu}
+                        showDebugInfoModal={showDebugInfoModal}
+                    />
+                    <UpdateNotification hideProfileMenu={hideProfileMenu} />
+                </ul>
+            </div>
+
+            {loading && <LoadingMask />}
+
+            <style jsx>{`
+                div {
+                    width: 100%;
+                    padding: 0;
+                }
+
+                ul {
+                    padding: 0;
+                    margin: 0;
+                }
+
+                a,
+                a:hover,
+                a:focus,
+                a:active,
+                a:visited {
+                    text-decoration: none;
+                    display: block;
+                }
+            `}</style>
+        </Card>
+    )
+}
+
+ProfileContents.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+    name: PropTypes.string,
+}
+
+export const ProfileMenu = ({ ...props }) => (
+    <div data-test="headerbar-profile-menu">
+        <ProfileContents {...props} />
+        <style jsx>{`
+            div {
+                z-index: 10000;
+                position: absolute;
+                inset-inline-end: 4px;
+                width: 320px;
+            }
+        `}</style>
+    </div>
+)
+
+ProfileMenu.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+    name: PropTypes.string,
+}

package/src/profile-menu/update-notification.js

@@ -0,0 +1,67 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { colors } from '@dhis2/ui-constants'
+import { MenuItem } from '@dhis2-ui/menu'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useHeaderBarContext } from '../header-bar-context.js'
+import i18n from '../locales/index.js'
+
+export function UpdateNotification({ hideProfileMenu }) {
+    const { appName } = useConfig()
+    const { updateAvailable, onApplyAvailableUpdate } = useHeaderBarContext()
+    const onClick = () => {
+        hideProfileMenu()
+        onApplyAvailableUpdate?.()
+    }
+
+    const updateNotificationLabel = (
+        <div className="root">
+            <div className="badge" />
+            <div className="spacer" />
+            <div className="message">
+                {appName
+                    ? i18n.t('New {{appName}} version available', { appName })
+                    : i18n.t('New app version available')}
+                <br />
+                {i18n.t('Click to reload')}
+            </div>
+            <style jsx>{`
+                .root {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    font-size: 14px;
+                    line-height: 17px;
+                }
+                .badge {
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin: 0 8px;
+                    border-radius: 6px;
+                    background-color: ${colors.blue600};
+                }
+                .spacer {
+                    display: inline-block;
+                    width: 8px;
+                }
+                .message {
+                    display: inline-block;
+                }
+            `}</style>
+        </div>
+    )
+
+    return updateAvailable ? (
+        <MenuItem
+            dense
+            onClick={onClick}
+            label={updateNotificationLabel}
+            dataTest="dhis2-ui-headerbar-updatenotification"
+        />
+    ) : null
+}
+
+UpdateNotification.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+}

package/src/profile.js

@@ -0,0 +1,101 @@
+import { UserAvatar } from '@dhis2-ui/user-avatar'
+import PropTypes from 'prop-types'
+import React, { useCallback, useRef, useState } from 'react'
+import { DebugInfoModal } from './debug-info/debug-info-modal.js'
+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 [showProfileMenu, setShowProfileMenu] = useState(false)
+    const [showDebugInfoModal, setShowDebugInfoModal] = useState(false)
+    const hideProfileMenu = useCallback(
+        () => setShowProfileMenu(false),
+        [setShowProfileMenu]
+    )
+    const toggleProfileMenu = useCallback(
+        () => setShowProfileMenu((show) => !show),
+        [setShowProfileMenu]
+    )
+    const containerRef = useRef(null)
+
+    useOnDocClick(containerRef, hideProfileMenu)
+
+    return (
+        <div
+            ref={containerRef}
+            data-test="headerbar-profile"
+            className="headerbar-profile"
+        >
+            <button
+                className="headerbar-profile-btn"
+                onClick={toggleProfileMenu}
+                title={i18n.t('Profile menu')}
+                aria-label={i18n.t('Profile menu')}
+            >
+                <UserAvatar
+                    avatarId={avatarId}
+                    name={name}
+                    dataTest="headerbar-profile-icon"
+                    medium
+                />
+            </button>
+
+            {showProfileMenu && (
+                <ProfileMenu
+                    avatarId={avatarId}
+                    name={name}
+                    email={email}
+                    helpUrl={helpUrl}
+                    hideProfileMenu={hideProfileMenu}
+                    showDebugInfoModal={() => {
+                        setShowDebugInfoModal(true)
+                    }}
+                />
+            )}
+            {showDebugInfoModal && (
+                <DebugInfoModal
+                    onClose={() => {
+                        setShowDebugInfoModal(false)
+                    }}
+                />
+            )}
+
+            <style jsx>{`
+                .headerbar-profile {
+                    position: relative;
+                    height: 100%;
+                }
+
+                .headerbar-profile-btn {
+                    background: transparent;
+                    padding: 6px;
+                    border: 0;
+                    cursor: pointer;
+                }
+                .headerbar-profile-btn:focus {
+                    outline: 2px solid white;
+                    outline-offset: -2px;
+                }
+                .headerbar-profile-btn:focus:not(:focus-visible) {
+                    outline: none;
+                }
+                .headerbar-profile-btn:hover {
+                    background: #1a557f;
+                }
+                .headerbar-profile-btn:active {
+                    background: #104067;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Profile.propTypes = {
+    name: PropTypes.string.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+}
+
+export default Profile

package/src/title.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Title = ({ app, instance }) => (
+    <div data-test="headerbar-title">
+        {app ? `${instance} - ${app}` : `${instance}`}
+
+        <style jsx>{`
+            div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 14px;
+                font-weight: 500;
+                letter-spacing: 0.01em;
+                white-space: nowrap;
+            }
+        `}</style>
+    </div>
+)
+Title.propTypes = {
+    app: PropTypes.string,
+    instance: PropTypes.string,
+}