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

package/src/__e2e__/stories/user-has-no-authorities.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const UserHasNoAuthorities = () => <HeaderBar appName="Example!" />
+
+UserHasNoAuthorities.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        me: {
+            ...dataProviderData.me,
+            authorities: [],
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/user-has-web-interpretation-and-messaging-authority.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const UserHasWebInterpretationAndMessagingAuthority = () => (
+    <HeaderBar appName="Example!" />
+)
+
+UserHasWebInterpretationAndMessagingAuthority.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        me: {
+            ...dataProviderData.me,
+            authorities: ['M_dhis-web-interpretation', 'M_dhis-web-messaging'],
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/user-has-web-interpretation-authority.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const UserHasWebInterpretationAuthority = () => (
+    <HeaderBar appName="Example!" />
+)
+
+UserHasWebInterpretationAuthority.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        me: {
+            ...dataProviderData.me,
+            authorities: ['M_dhis-web-interpretation'],
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/user-has-web-messaging-authority.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const UserHasWebMessagingAuthority = () => (
+    <HeaderBar appName="Example!" />
+)
+
+UserHasWebMessagingAuthority.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        me: {
+            ...dataProviderData.me,
+            authorities: ['M_dhis-web-messaging'],
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/with-debug-info-edge-cases.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { HeaderBar } from '../../header-bar.js'
+import {
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+    providerConfig,
+} from './common.js'
+
+export const WithUnknownInstanceVersion = () => <HeaderBar />
+
+WithUnknownInstanceVersion.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        systemInfo: {
+            ...providerConfig.systemInfo,
+            version: undefined,
+        },
+    }),
+]
+
+export const WithUnknownAppVersion = () => <HeaderBar />
+
+WithUnknownAppVersion.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        appVersion: undefined,
+    }),
+]
+
+export const WithUnknownAppName = () => <HeaderBar />
+
+WithUnknownAppName.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        appName: undefined,
+    }),
+]
+
+export const WithUnknownAppNameAndVersion = () => <HeaderBar />
+
+WithUnknownAppNameAndVersion.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        appName: undefined,
+        appVersion: undefined,
+    }),
+]

package/src/__e2e__/stories/with-special-app-name-character.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    modulesWithSpecialCharacters,
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const WithSpecialAppNameCharacters = () => (
+    <HeaderBar appName="Example!" />
+)
+
+WithSpecialAppNameCharacters.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        ['action::menu/getModules']: {
+            ...dataProviderData['action::menu/getModules'],
+            modules: modulesWithSpecialCharacters,
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/with-update-available-notification.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { HeaderBar } from '../../header-bar.js'
+import {
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+    providerConfig,
+} from './common.js'
+
+export const WithUpdateAvailableNotification = () => {
+    const [modalOpen, setModalOpen] = useState(false)
+    return (
+        <>
+            <HeaderBar
+                updateAvailable={true}
+                onApplyAvailableUpdate={() => setModalOpen(true)}
+            />
+            {modalOpen && <div>The callback was successful</div>}
+        </>
+    )
+}
+WithUpdateAvailableNotification.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        appName: 'Data Visualizer',
+    }),
+]
+
+export const WithUpdateAvailableNotificationNoAppName = () => (
+    <HeaderBar updateAvailable={true} />
+)
+
+WithUpdateAvailableNotificationNoAppName.decorators = [
+    createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorProvider({
+        ...providerConfig,
+        appName: undefined,
+    }),
+]

package/src/__e2e__/stories/zero-unread-interpretations.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const ZeroUnreadInterpretations = () => <HeaderBar appName="Example!" />
+
+ZeroUnreadInterpretations.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        ['me/dashboard']: {
+            unreadInterpretations: 0,
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/__e2e__/stories/zero-unread-messages.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { HeaderBar } from '../../index.js'
+import {
+    dataProviderData,
+    createDecoratorCustomDataProviderHeaderBar,
+    createDecoratorProvider,
+} from './common.js'
+
+export const ZeroUnreadMessages = () => <HeaderBar appName="Example!" />
+
+ZeroUnreadMessages.decorators = [
+    createDecoratorCustomDataProviderHeaderBar({
+        ...dataProviderData,
+        ['me/dashboard']: {
+            unreadMessages: 0,
+        },
+    }),
+    createDecoratorProvider(),
+]

package/src/apps.js

@@ -0,0 +1,276 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { IconApps24, IconSettings24 } from '@dhis2/ui-icons'
+import { Card } from '@dhis2-ui/card'
+import { InputField } from '@dhis2-ui/input'
+import PropTypes from 'prop-types'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { joinPath } from './join-path.js'
+import i18n from './locales/index.js'
+
+/**
+ * Copied from here:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+ */
+function escapeRegExpCharacters(text) {
+    return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function Search({ value, onChange }) {
+    const { baseUrl } = useConfig()
+
+    return (
+        <div>
+            <span>
+                <InputField
+                    value={value}
+                    name="filter"
+                    placeholder={i18n.t('Search apps')}
+                    onChange={onChange}
+                    initialFocus
+                />
+            </span>
+
+            <span>
+                <a href={joinPath(baseUrl, 'dhis-web-menu-management')}>
+                    <IconSettings24 color={colors.grey700} />
+                </a>
+            </span>
+
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    height: 52px;
+                    margin: 8px;
+                }
+
+                span {
+                    flex: 1 100%;
+                }
+
+                span:last-child {
+                    flex: 1 auto;
+                    margin: 8px;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Search.propTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+function Item({ name, path, img }) {
+    return (
+        <a href={path}>
+            <img src={img} alt="app logo" />
+
+            <div>{name}</div>
+
+            <style jsx>{`
+                a {
+                    display: inline-block;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    width: 96px;
+                    margin: 8px;
+                    border-radius: 12px;
+                    text-decoration: none;
+                    cursor: pointer;
+                }
+
+                a:hover,
+                a:focus {
+                    background-color: ${theme.primary050};
+                    cursor: pointer;
+                }
+
+                a:hover > div {
+                    font-weight: 500;
+                    cursor: pointer;
+                }
+
+                img {
+                    width: 48px;
+                    height: 48px;
+                    margin: 8px;
+                    cursor: pointer;
+                }
+
+                div {
+                    overflow-wrap: anywhere;
+                    margin-top: 14px;
+                    color: rgba(0, 0, 0, 0.87);
+                    font-size: 12px;
+                    letter-spacing: 0.01em;
+                    line-height: 14px;
+                    text-align: center;
+                    cursor: pointer;
+                }
+            `}</style>
+        </a>
+    )
+}
+
+Item.propTypes = {
+    img: PropTypes.string,
+    name: PropTypes.string,
+    path: PropTypes.string,
+}
+
+function List({ apps, filter }) {
+    return (
+        <div data-test="headerbar-apps-menu-list">
+            {apps
+                .filter(({ displayName, name }) => {
+                    const appName = displayName || name
+                    const formattedAppName = appName.toLowerCase()
+                    const formattedFilter =
+                        escapeRegExpCharacters(filter).toLowerCase()
+
+                    return filter.length > 0
+                        ? formattedAppName.match(formattedFilter)
+                        : true
+                })
+                .map(({ displayName, name, defaultAction, icon }, idx) => (
+                    <Item
+                        key={`app-${name}-${idx}`}
+                        name={displayName || name}
+                        path={defaultAction}
+                        img={icon}
+                    />
+                ))}
+
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    align-content: flex-start;
+                    align-items: flex-start;
+                    justify-content: flex-start;
+                    width: 30vw;
+                    min-width: 300px;
+                    max-width: 560px;
+
+                    min-height: 200px;
+                    max-height: 465px;
+                    margin-block-start: 0;
+                    margin-block-end: 8px;
+                    margin-inline: 8px;
+
+                    overflow: auto;
+                    overflow-x: hidden;
+                }
+            `}</style>
+        </div>
+    )
+}
+List.propTypes = {
+    apps: PropTypes.array,
+    filter: PropTypes.string,
+}
+
+const AppMenu = ({ apps, filter, onFilterChange }) => (
+    <div data-test="headerbar-apps-menu">
+        <Card>
+            <Search value={filter} onChange={onFilterChange} />
+            <List apps={apps} filter={filter} />
+        </Card>
+
+        <style jsx>{`
+            div {
+                z-index: 10000;
+                position: absolute;
+                inset-inline-end: -4px;
+            }
+        `}</style>
+    </div>
+)
+
+AppMenu.propTypes = {
+    apps: PropTypes.array.isRequired,
+    onFilterChange: PropTypes.func.isRequired,
+    filter: PropTypes.string,
+}
+
+const Apps = ({ apps }) => {
+    const [show, setShow] = useState(false)
+    const [filter, setFilter] = useState('')
+
+    const handleVisibilityToggle = useCallback(() => setShow(!show), [show])
+    const handleFilterChange = useCallback(({ value }) => setFilter(value), [])
+
+    const containerEl = useRef(null)
+    const onDocClick = useCallback((evt) => {
+        if (containerEl.current && !containerEl.current.contains(evt.target)) {
+            setShow(false)
+        }
+    }, [])
+    useEffect(() => {
+        document.addEventListener('click', onDocClick)
+        return () => document.removeEventListener('click', onDocClick)
+    }, [onDocClick])
+
+    return (
+        <div ref={containerEl} data-test="headerbar-apps">
+            <button
+                onClick={handleVisibilityToggle}
+                data-test="headerbar-apps-icon"
+            >
+                <IconApps24 color={colors.white} />
+            </button>
+
+            {show ? (
+                <AppMenu
+                    apps={apps}
+                    filter={filter}
+                    onFilterChange={handleFilterChange}
+                />
+            ) : null}
+
+            <style jsx>{`
+                button {
+                    display: block;
+                    background: transparent;
+                    padding-block-start: ${spacers.dp4};
+                    padding-block-end: 0;
+                    padding-inline: ${spacers.dp12};
+                    border: 0;
+                    cursor: pointer;
+                    height: 100%;
+                }
+                button:focus {
+                    outline: 2px solid white;
+                    outline-offset: -2px;
+                }
+                button:focus:not(:focus-visible) {
+                    outline: none;
+                }
+                button:hover {
+                    background: #1a557f;
+                }
+                button:active {
+                    background: #104067;
+                }
+
+                div {
+                    position: relative;
+                    height: 100%;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Apps.propTypes = {
+    apps: PropTypes.array.isRequired,
+}
+
+export default Apps

package/src/debug-info/debug-info-menu-item.js

@@ -0,0 +1,72 @@
+import { colors } from '@dhis2/ui-constants'
+import { MenuItem } from '@dhis2-ui/menu'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+import { useDebugInfo } from './use-debug-info.js'
+
+export const DebugInfoMenuItem = ({ hideProfileMenu, showDebugInfoModal }) => {
+    const debugInfo = useDebugInfo()
+
+    const openDebugModal = () => {
+        hideProfileMenu()
+        showDebugInfoModal()
+    }
+
+    const debugInfoLabel = (
+        <div className="root">
+            <div
+                className="instance-info version"
+                data-test="dhis2-ui-headerbar-instanceinfo"
+            >
+                {debugInfo.dhis2_version
+                    ? i18n.t('DHIS2 {{dhis2Version}}', {
+                          dhis2Version: debugInfo.dhis2_version,
+                      })
+                    : i18n.t('DHIS2 version unknown')}
+            </div>
+            <div className="version" data-test="dhis2-ui-headerbar-appinfo">
+                {debugInfo.app_name
+                    ? debugInfo.app_version
+                        ? `${debugInfo.app_name} ${debugInfo.app_version}`
+                        : i18n.t('{{appName}} version unknown', {
+                              appName: debugInfo.app_name,
+                          })
+                    : debugInfo.app_version
+                    ? i18n.t('App {{appVersion}}', {
+                          appVersion: debugInfo.app_version,
+                      })
+                    : i18n.t('App version unknown')}
+                {}
+            </div>
+            <style jsx>{`
+                .root {
+                    color: ${colors.grey700};
+                    font-style: italic;
+                    font-size: 14px;
+                    line-height: 17px;
+                }
+                .instance-info {
+                    margin-bottom: 4px;
+                }
+                .version {
+                    white-space: no-wrap;
+                }
+            `}</style>
+        </div>
+    )
+
+    return (
+        <MenuItem
+            dense
+            onClick={openDebugModal}
+            label={debugInfoLabel}
+            dataTest="dhis2-ui-headerbar-debuginfo"
+        />
+    )
+}
+
+DebugInfoMenuItem.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+}

package/src/debug-info/debug-info-modal.js

@@ -0,0 +1,47 @@
+import { useAlert } from '@dhis2/app-runtime'
+import { Button, ButtonStrip } from '@dhis2-ui/button'
+import { Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2-ui/modal'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+import { DebugInfoTable } from './debug-info-table.js'
+import { useFormattedDebugInfo } from './use-debug-info.js'
+
+export function DebugInfoModal({ onClose }) {
+    const debugInfo = useFormattedDebugInfo()
+    const { show: showClipboardAlert } = useAlert(
+        'Debug information copied to clipboard',
+        { duration: 3000 }
+    )
+
+    const copyDebugInfo = () => {
+        navigator.clipboard.writeText(debugInfo)
+        onClose()
+        showClipboardAlert()
+    }
+
+    return (
+        <Modal position="middle" dataTest="dhis2-ui-headerbar-debuginfomodal">
+            <ModalTitle>{i18n.t('Debug info')}</ModalTitle>
+            <ModalContent>
+                <DebugInfoTable />
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button onClick={() => onClose()}>{i18n.t('Close')}</Button>
+                    <Button
+                        primary
+                        onClick={copyDebugInfo}
+                        dataTest="dhis2-ui-headerbar-debuginfomodal-copybutton"
+                    >
+                        {i18n.t('Copy debug info')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}
+
+DebugInfoModal.propTypes = {
+    onClose: PropTypes.func.isRequired,
+}

package/src/debug-info/debug-info-table.js

@@ -0,0 +1,51 @@
+import { colors } from '@dhis2/ui-constants'
+import React from 'react'
+import { useDebugInfo } from './use-debug-info.js'
+
+const formatDebugInfoKey = (key) => {
+    const tokens = key.split('_')
+    return tokens
+        .map((token) => {
+            if (token.toLowerCase() === 'dhis2') {
+                return 'DHIS2'
+            } else {
+                return token[0].toUpperCase() + token.substr(1).toLowerCase()
+            }
+        })
+        .join(' ')
+}
+
+export function DebugInfoTable() {
+    const debugInfo = useDebugInfo()
+    return (
+        <table {...{ 'data-test': 'dhis2-ui-headerbar-debuginfotable' }}>
+            <tbody>
+                {Object.keys(debugInfo).map((key) => (
+                    <tr key={key}>
+                        <td className="debug-info-key">
+                            {formatDebugInfoKey(key)}
+                        </td>
+                        <td>{debugInfo[key]}</td>
+                    </tr>
+                ))}
+            </tbody>
+            <style jsx>{`
+                table {
+                    white-space: pre-wrap;
+                    font-size: 14px;
+                    line-height: 1.2;
+                    color: ${colors.grey700};
+                    font-famile: Menlo, Courier, monospace !important;
+                }
+                td {
+                    padding-block: 3px;
+                    padding-inline-end: 16px;
+                    padding-inline-start: 0;
+                }
+                .debug-info-key {
+                    font-weight: bold;
+                }
+            `}</style>
+        </table>
+    )
+}