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

package/src/locales/uz_Latn/translations.json

@@ -0,0 +1,23 @@
+{
+    "Search apps": "Ilovalarni qidirish",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "Yopmoq",
+    "Copy debug info": "",
+    "Last online {{relativeTime}}": "",
+    "Online": "Onlayn",
+    "Offline": "Offlayn",
+    "Edit profile": "Profilni tahrir qilish",
+    "Settings": "Sozlamalar",
+    "Account": "Raqami",
+    "Help": "Yordam",
+    "About DHIS2": "DHIS2 Haqida",
+    "Logout": "Chiqib ketish",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/uz_UZ_Cyrl/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "Иловаларни қидириш",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "Ёпиш",
+    "Copy debug info": "",
+    "Interpretations": "Талқинлар",
+    "Messages": "Хабарлар",
+    "Online": "Онлайн",
+    "Offline": "Оффлайн",
+    "Edit profile": "Профилни таҳрир қилиш",
+    "Settings": "Созламалар",
+    "Account": "Рақами",
+    "Help": "Ёрдам",
+    "About DHIS2": "DHIS2 Ҳақида",
+    "Logout": "Чиқиб кетиш",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/uz_UZ_Latn/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "Ilovalarni qidirish",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "Yopmoq",
+    "Copy debug info": "",
+    "Interpretations": "Talqinlar",
+    "Messages": "Xabarlar",
+    "Online": "Onlayn",
+    "Offline": "Offlayn",
+    "Edit profile": "Profilni tahrir qilish",
+    "Settings": "Sozlamalar",
+    "Account": "Raqami",
+    "Help": "Yordam",
+    "About DHIS2": "DHIS2 Haqida",
+    "Logout": "Chiqib ketish",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/vi/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "Tìm kiếm ứng dụng",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "Đóng",
+    "Copy debug info": "",
+    "Interpretations": "Diễn giải ",
+    "Messages": "Tin nhắn",
+    "Online": "Trực tuyến",
+    "Offline": "Ngoại tuyến",
+    "Edit profile": "Chỉnh sửa hồ sơ",
+    "Settings": "Cài đặt",
+    "Account": "Tài khoản",
+    "Help": "Giúp đỡ",
+    "About DHIS2": "Giới thiệu DHIS2",
+    "Logout": "Đăng xuất",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/zh/translations.json

@@ -0,0 +1,25 @@
+{
+    "Search apps": "搜索 apps",
+    "DHIS2 {{dhis2Version}}": "DHIS2 {{dhis2Version}}",
+    "DHIS2 version unknown": "DHIS2 版本未知",
+    "{{appName}} version unknown": "{{appName}} 版本未知",
+    "App {{appVersion}}": "应用 {{appVersion}}",
+    "App version unknown": "应用版本未知",
+    "Debug info": "调试信息",
+    "Close": "关闭",
+    "Copy debug info": "复制调试信息",
+    "Interpretations": "解释",
+    "Messages": "消息",
+    "Online": "在线",
+    "Offline": "离线",
+    "Edit profile": "编辑简介",
+    "Settings": "设置",
+    "Account": "账号",
+    "Help": "帮助",
+    "About DHIS2": "关于DHIS2",
+    "Logout": "退出",
+    "New {{appName}} version available": " {{appName}} 有新版本可用",
+    "New app version available": "新的应用程序版本可用",
+    "Click to reload": "点击重新加载",
+    "Profile menu": "个人简介菜单"
+}

package/src/locales/zh_CN/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "搜索 apps",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "关闭",
+    "Copy debug info": "",
+    "Interpretations": "注释",
+    "Messages": "消息",
+    "Online": "在线",
+    "Offline": "离线",
+    "Edit profile": "编辑个人基本信息",
+    "Settings": "设置",
+    "Account": "账户",
+    "Help": "帮助",
+    "About DHIS2": "关于DHIS2",
+    "Logout": "退出",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/logo-image.js

@@ -0,0 +1,71 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { LogoIconWhite } from '@dhis2-ui/logo'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const logoStyles = css.resolve`
+    svg {
+        height: 25px;
+        width: 27px;
+    }
+
+    img {
+        max-height: 100%;
+        min-height: auto;
+        width: auto;
+    }
+`
+
+const query = {
+    customLogo: {
+        resource: 'staticContent/logo_banner',
+    },
+}
+
+const pathExists = (data) =>
+    data &&
+    data.customLogo &&
+    data.customLogo.images &&
+    data.customLogo.images.png
+
+export const LogoImage = () => {
+    const { loading, error, data } = useDataQuery(query)
+
+    if (loading) {
+        return null
+    }
+
+    let Logo
+    if (!error && pathExists(data)) {
+        Logo = (
+            <img
+                alt="Headerbar Logo"
+                src={data.customLogo.images.png}
+                className={logoStyles.className}
+            />
+        )
+    } else {
+        Logo = <LogoIconWhite className={logoStyles.className} />
+    }
+
+    return (
+        <div>
+            {Logo}
+
+            {logoStyles.styles}
+            <style jsx>{`
+                div {
+                    padding: 4px;
+                    min-width: 48px;
+                    max-width: 250px;
+                    height: 48px;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    overflow: hidden;
+                }
+            `}</style>
+        </div>
+    )
+}

package/src/logo.js

@@ -0,0 +1,45 @@
+import { useConfig } from '@dhis2/app-runtime'
+import React from 'react'
+import { LogoImage } from './logo-image.js'
+
+export const Logo = () => {
+    const { baseUrl } = useConfig()
+
+    return (
+        <div data-test="headerbar-logo">
+            <a href={baseUrl}>
+                <LogoImage />
+            </a>
+
+            <style jsx>{`
+                div {
+                    box-sizing: border-box;
+                    min-width: 49px;
+                    max-height: 48px;
+                    margin-block: 0;
+                    margin-inline-end: 12px;
+                    margin-inline-start: 0;
+                    border-inline-end: 1px solid rgba(32, 32, 32, 0.15);
+                }
+                div:hover {
+                    background-color: #1a557f;
+                }
+
+                a,
+                a:hover,
+                a:focus,
+                a:active,
+                a:visited {
+                    user-select: none;
+                }
+                a:focus {
+                    outline: 2px solid white;
+                    outline-offset: -2px;
+                }
+                a:focus:not(:focus-visible) {
+                    outline: none;
+                }
+            `}</style>
+        </div>
+    )
+}

package/src/notification-icon.js

@@ -0,0 +1,91 @@
+import { colors, theme, spacers } from '@dhis2/ui-constants'
+import { IconMessages24, IconMail24 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from './locales/index.js'
+
+function icon(kind) {
+    if (kind === 'message') {
+        return <IconMessages24 color={colors.white} />
+    } else {
+        return <IconMail24 color={colors.white} />
+    }
+}
+
+export const NotificationIcon = ({
+    count = 0,
+    href,
+    kind,
+    dataTestId,
+    title,
+    'aria-label': ariaLabel,
+}) => (
+    <a
+        dir="ltr"
+        href={href}
+        className={kind}
+        data-test={dataTestId}
+        title={i18n.t(title)}
+        aria-label={i18n.t(ariaLabel)}
+    >
+        {icon(kind)}
+
+        {count > 0 && <span data-test={`${dataTestId}-count`}>{count}</span>}
+
+        <style jsx>{`
+            a {
+                position: relative;
+                margin: 0;
+                cursor: pointer;
+                padding: 0 ${spacers.dp12};
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+            a:focus {
+                outline: 2px solid white;
+                outline-offset: -2px;
+            }
+            a:focus:not(:focus-visible) {
+                outline: none;
+            }
+            a:hover {
+                background: #1a557f;
+            }
+            a:active {
+                background: #104067;
+            }
+            span {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 1;
+                position: absolute;
+                top: 3px;
+                inset-inline-end: 2px;
+                min-width: 18px;
+                min-height: 18px;
+                border-radius: ${spacers.dp12};
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+                    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+                background-color: ${theme.secondary500};
+                color: ${colors.white};
+                font-size: 13px;
+                font-weight: 600;
+                line-height: 15px;
+                text-align: center;
+                cursor: inherit;
+                padding: 0 ${spacers.dp4};
+            }
+        `}</style>
+    </a>
+)
+
+NotificationIcon.propTypes = {
+    'aria-label': PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    count: PropTypes.number,
+    dataTestId: PropTypes.string,
+    kind: PropTypes.oneOf(['interpretation', 'message']),
+}

package/src/notifications.js

@@ -0,0 +1,63 @@
+import { useConfig } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { joinPath } from './join-path.js'
+import i18n from './locales/index.js'
+import { NotificationIcon } from './notification-icon.js'
+
+const hasAuthority = (userAuthorities, authId) =>
+    Array.isArray(userAuthorities) &&
+    userAuthorities.some(
+        (userAuthId) => userAuthId === 'ALL' || userAuthId === authId
+    )
+
+export const Notifications = ({
+    interpretations,
+    messages,
+    userAuthorities,
+}) => {
+    const { baseUrl } = useConfig()
+
+    return (
+        <div data-test="headerbar-notifications">
+            {hasAuthority(userAuthorities, 'M_dhis-web-interpretation') && (
+                <NotificationIcon
+                    count={interpretations}
+                    href={joinPath(baseUrl, 'dhis-web-interpretation')}
+                    kind="message"
+                    dataTestId="headerbar-interpretations"
+                    title={i18n.t('Interpretations')}
+                    aria-label={i18n.t('Interpretations')}
+                />
+            )}
+
+            {hasAuthority(userAuthorities, 'M_dhis-web-messaging') && (
+                <NotificationIcon
+                    message="email"
+                    count={messages}
+                    href={joinPath(baseUrl, 'dhis-web-messaging')}
+                    kind="interpretation"
+                    dataTestId="headerbar-messages"
+                    title={i18n.t('Messages')}
+                    aria-label={i18n.t('Messages')}
+                />
+            )}
+
+            <style jsx>{`
+                div {
+                    user-select: none;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    height: 100%;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Notifications.propTypes = {
+    interpretations: PropTypes.number,
+    messages: PropTypes.number,
+    userAuthorities: PropTypes.arrayOf(PropTypes.string),
+}

package/src/online-status.js

@@ -0,0 +1,40 @@
+import {
+    useDhis2ConnectionStatus,
+    useOnlineStatusMessage,
+} from '@dhis2/app-runtime'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from './locales/index.js'
+import styles from './online-status.styles.js'
+
+/** A badge to display online/offline status in the header bar */
+export function OnlineStatus({ dense }) {
+    const { isConnected: online } = useDhis2ConnectionStatus()
+    const { onlineStatusMessage } = useOnlineStatusMessage()
+
+    const displayStatus = online ? i18n.t('Online') : i18n.t('Offline')
+
+    return (
+        <div
+            className={cx('container', dense ? 'bar' : 'badge')}
+            data-test="headerbar-online-status"
+        >
+            {onlineStatusMessage && !dense && (
+                <span className="info unselectable">{onlineStatusMessage}</span>
+            )}
+            <div className={cx('icon', online ? 'online' : 'offline')}></div>
+            <span className="label unselectable">{displayStatus}</span>
+            {onlineStatusMessage && dense && (
+                <span className="info-dense unselectable">
+                    {onlineStatusMessage}
+                </span>
+            )}
+            <style jsx>{styles}</style>
+        </div>
+    )
+}
+OnlineStatus.propTypes = {
+    /** If true, displays as a sub-bar instead of a badge */
+    dense: PropTypes.bool,
+}

package/src/online-status.styles.js

@@ -0,0 +1,91 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: center; // new
+        background-color: #104167;
+        flex-shrink: 0; // ?
+        color: ${colors.grey100};
+    }
+
+    .container.badge {
+        margin-inline-end: ${spacers.dp8};
+        padding: ${spacers.dp8};
+        border-radius: 5px;
+        font-size: 14px;
+    }
+
+    .container.bar {
+        display: none;
+        padding: 0px ${spacers.dp4};
+        min-height: 24px;
+        font-size: 13px;
+    }
+
+    @media (max-width: 480px) {
+        .container.badge {
+            display: none;
+        }
+
+        .container.bar {
+            display: flex;
+        }
+    }
+
+    .unselectable {
+        cursor: default;
+        user-select: none;
+    }
+
+    .info {
+        margin-inline-end: ${spacers.dp16};
+    }
+
+    .info-dense {
+        margin-inline-start: ${spacers.dp12};
+        font-size: 12px;
+    }
+
+    .icon {
+        width: 8px;
+        min-width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        margin-inline-end: ${spacers.dp4};
+    }
+
+    .icon.online {
+        background-color: ${colors.teal400};
+    }
+
+    .icon.offline {
+        background-color: transparent;
+        border: 1px solid ${colors.yellow300};
+    }
+
+    .icon.reconnecting {
+        background: ${colors.grey300};
+        -webkit-animation: fadeinout 2s linear infinite;
+        animation: fadeinout 2s linear infinite;
+        opacity: 0;
+    }
+
+    @-webkit-keyframes fadeinout {
+        50% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeinout {
+        50% {
+            opacity: 1;
+        }
+    }
+
+    .label {
+        letter-spacing: 0.5px;
+    }
+`

package/src/profile/use-on-doc-click.js

@@ -0,0 +1,23 @@
+import { useEffect, useMemo } from 'react'
+
+export const useOnDocClick = (containerRef, hide) => {
+    const onDocClick = useMemo(() => {
+        return (evt) => {
+            if (!containerRef.current) {
+                return null
+            }
+
+            if (!containerRef.current.contains(evt.target)) {
+                hide()
+            }
+        }
+    }, [containerRef, hide])
+
+    useEffect(() => {
+        document.addEventListener('click', onDocClick)
+
+        return () => {
+            document.removeEventListener('click', onDocClick)
+        }
+    }, [onDocClick])
+}

package/src/profile/use-on-doc-click.test.js

@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react'
+import { useOnDocClick } from './use-on-doc-click.js'
+
+describe('useOnDocClick', () => {
+    let eventListenerMap = {}
+    const hide = jest.fn()
+
+    jest.spyOn(document, 'addEventListener').mockImplementation(
+        (event, callback) => {
+            eventListenerMap[event] = callback
+        }
+    )
+
+    beforeEach(() => {
+        eventListenerMap = {}
+    })
+
+    afterEach(() => {
+        document.addEventListener.mockClear()
+        hide.mockClear()
+    })
+
+    it('should call the hide function when clicking outside', () => {
+        const el = document.createElement('span')
+        const containerRef = { current: el }
+        renderHook(() => useOnDocClick(containerRef, hide))
+
+        eventListenerMap.click({ target: document.body })
+        expect(hide).toHaveBeenCalled()
+    })
+
+    it('should not call the hide function when clicking inside', () => {
+        const el = document.createElement('span')
+        const containerRef = { current: el }
+        renderHook(() => useOnDocClick(containerRef, hide))
+
+        eventListenerMap.click({ target: el })
+        expect(hide).not.toHaveBeenCalled()
+    })
+})

package/src/profile-menu/index.js

@@ -0,0 +1 @@
+export * from './profile-menu.js'