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

package/src/header-bar.js

@@ -0,0 +1,145 @@
+import { useDataQuery, useConfig } from '@dhis2/app-runtime'
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useEffect, useMemo } from 'react'
+import Apps from './apps.js'
+import { HeaderBarContextProvider } from './header-bar-context.js'
+import { joinPath } from './join-path.js'
+import i18n from './locales/index.js'
+import { Logo } from './logo.js'
+import { Notifications } from './notifications.js'
+import { OnlineStatus } from './online-status.js'
+import Profile from './profile.js'
+import { Title } from './title.js'
+
+const query = {
+    title: {
+        resource: 'systemSettings/applicationTitle',
+    },
+    help: {
+        resource: 'systemSettings/helpPageLink',
+    },
+    user: {
+        resource: 'me',
+        params: {
+            fields: ['authorities', 'avatar', 'email', 'name', 'settings'],
+        },
+    },
+    apps: {
+        resource: 'action::menu/getModules',
+    },
+    notifications: {
+        resource: 'me/dashboard',
+    },
+}
+
+export const HeaderBar = ({
+    appName,
+    className,
+    updateAvailable,
+    onApplyAvailableUpdate,
+    skipI18n,
+}) => {
+    const { appName: configAppName, baseUrl, pwaEnabled } = useConfig()
+    const { loading, error, data } = useDataQuery(query)
+
+    const apps = useMemo(() => {
+        const getPath = (path) =>
+            path.startsWith('http:') || path.startsWith('https:')
+                ? path
+                : joinPath(baseUrl, 'api', path)
+
+        return data?.apps.modules.map((app) => ({
+            ...app,
+            icon: getPath(app.icon),
+            defaultAction: getPath(app.defaultAction),
+        }))
+    }, [data, baseUrl])
+
+    useEffect(() => {
+        if (!loading && !error && !skipI18n) {
+            // This is the "legacy" way of localising the header bar, which is necesasry for external (non-platform) apps
+            // For platform apps, setting i18n is handled by the app-shell so this logic is redundant (and running it twice caused issues)
+            // For external apps, this logic is kept for backwards compatibility, but they also have the option of passing `skipI18n`
+            // and initialising i18n in the consumer
+            const locale = data?.user?.settings?.keyUiLocale || 'en'
+            i18n.setDefaultNamespace('default')
+            i18n.changeLanguage(locale)
+        }
+    }, [data?.user?.settings?.keyUiLocale, error, loading, skipI18n])
+
+    return (
+        <HeaderBarContextProvider
+            updateAvailable={updateAvailable}
+            onApplyAvailableUpdate={onApplyAvailableUpdate}
+        >
+            <header className={className}>
+                <div className="main">
+                    {!loading && !error && (
+                        <>
+                            <Logo />
+
+                            <Title
+                                app={appName || configAppName}
+                                instance={data.title.applicationTitle}
+                            />
+
+                            <div className="right-control-spacer" />
+
+                            {pwaEnabled && <OnlineStatus />}
+
+                            <Notifications
+                                interpretations={
+                                    data.notifications.unreadInterpretations
+                                }
+                                messages={
+                                    data.notifications
+                                        .unreadMessageConversations
+                                }
+                                userAuthorities={data.user.authorities}
+                            />
+                            <Apps apps={apps} />
+
+                            <Profile
+                                name={data.user.name}
+                                email={data.user.email}
+                                avatarId={data.user.avatar?.id}
+                                helpUrl={data.help.helpPageLink}
+                            />
+                        </>
+                    )}
+                </div>
+
+                {pwaEnabled && !loading && !error && <OnlineStatus dense />}
+
+                <style jsx>{`
+                    .main {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: space-between;
+                        background-color: #2c6693;
+                        color: ${colors.white};
+                        height: 48px;
+                    }
+                    .right-control-spacer {
+                        margin-inline-start: auto;
+                    }
+                `}</style>
+            </header>
+        </HeaderBarContextProvider>
+    )
+}
+
+HeaderBar.propTypes = {
+    appName: PropTypes.string,
+    className: PropTypes.string,
+    /**
+     * `skipI18n` skips initalising internationalisation in the UI component
+     * This is useful for app-platform apps, as the platform already sets i18n, so it can skip i18n (and avoid race conditions).
+     * For non-platform apps, they can continue relying on this logic running for backwards compatibility.
+     * */
+    skipI18n: PropTypes.bool,
+    updateAvailable: PropTypes.bool,
+    onApplyAvailableUpdate: PropTypes.func,
+}

package/src/header-bar.prod.stories.js

@@ -0,0 +1,303 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React, { useEffect, useState } from 'react'
+import {
+    createDecoratorProvider,
+    mockOfflineInterface,
+    providerConfig,
+} from './__e2e__/stories/common.js'
+import { OnlineStatusMessageUpdate } from './__e2e__/stories/online-status-message.js'
+import { HeaderBar } from './header-bar.js'
+import i18n from './locales/index.js'
+
+const subtitle = 'The common navigation bar used in all DHIS2 apps'
+
+const description = `
+The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.
+
+The header bar is included automatically with the App Shell and should not need any configuration.
+
+#### Theme
+
+The header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.
+
+\`\`\`js
+import { HeaderBar } from '@dhis2/ui'
+\`\`\`
+`
+
+const customData = {
+    'systemSettings/applicationTitle': {
+        applicationTitle: 'Foobar',
+    },
+    'systemSettings/helpPageLink': {
+        helpPageLink: '//custom-help-page-link',
+    },
+    me: {
+        name: 'John Doe',
+        email: 'john_doe@dhis2.org',
+        settings: {
+            keyUiLocale: 'en',
+        },
+        authorities: ['ALL'],
+    },
+    'action::menu/getModules': {
+        modules: [
+            {
+                name: 'dhis-web-dashboard',
+                namespace: '/dhis-web-dashboard',
+                defaultAction: '../dhis-web-dashboard/index.action',
+                displayName: 'Dashboard',
+                icon: '../icons/dhis-web-dashboard.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-data-visualizer',
+                namespace: '/dhis-web-data-visualizer',
+                defaultAction: '../dhis-web-data-visualizer/index.action',
+                displayName: 'Data Visualizer',
+                icon: '../icons/dhis-web-data-visualizer.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-capture',
+                namespace: '/dhis-web-capture',
+                defaultAction: '../dhis-web-capture/index.action',
+                displayName: 'Capture',
+                icon: '../icons/dhis-web-capture.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-maintenance',
+                namespace: '/dhis-web-maintenance',
+                defaultAction: '../dhis-web-maintenance/index.action',
+                displayName: 'Maintenance',
+                icon: '../icons/dhis-web-maintenance.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-maps',
+                namespace: '/dhis-web-maps',
+                defaultAction: '../dhis-web-maps/index.action',
+                displayName: 'Maps',
+                icon: '../icons/dhis-web-maps.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-event-reports',
+                namespace: '/dhis-web-event-reports',
+                defaultAction: '../dhis-web-event-reports/index.action',
+                displayName: 'Event Reports',
+                icon: '../icons/dhis-web-event-reports.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-interpretation',
+                namespace: '/dhis-web-interpretation',
+                defaultAction: '../dhis-web-interpretation/index.action',
+                displayName: 'Interpretations',
+                icon: '../icons/dhis-web-interpretation.png',
+                description: '',
+            },
+            {
+                name: 'dhis-web-import-export',
+                namespace: '/dhis-web-import-export',
+                defaultAction: '../dhis-web-import-export/index.action',
+                displayName: 'Import/Export',
+                icon: '../icons/dhis-web-import-export.png',
+                description: '',
+            },
+            {
+                name: 'WHO Metadata browser',
+                namespace: 'WHO Metadata browser',
+                defaultAction:
+                    'https://debug.dhis2.org/dev/api/apps/WHO-Metadata-browser/index.html',
+                displayName: '',
+                icon: 'https://debug.dhis2.org/dev/api/apps/WHO-Metadata-browser/icons/medicine-48.png',
+                description: '',
+            },
+            {
+                name: 'Dashboard Classic',
+                namespace: 'Dashboard Classic',
+                defaultAction:
+                    'https://debug.dhis2.org/dev/api/apps/Dashboard-Classic/index.html',
+                displayName: 'Dashboard Classic',
+                icon: 'https://debug.dhis2.org/dev/api/apps/Dashboard-Classic/icon.png',
+                description: 'DHIS2 Legacy Dashboard App',
+            },
+        ],
+    },
+    'me/dashboard': {
+        unreadInterpretations: 10,
+        unreadMessageConversations: 5,
+    },
+}
+
+const customLogoData = {
+    ...customData,
+    'staticContent/logo_banner': {
+        images: {
+            png: 'https://via.placeholder.com/150x50',
+        },
+    },
+}
+
+const customLocaleData = {
+    ...customData,
+    'systemSettings/applicationTitle': {
+        applicationTitle: 'Le Gros Foobar',
+    },
+    me: {
+        ...customData.me,
+        settings: {
+            keyUiLocale: 'fr',
+        },
+    },
+    'action::menu/getModules': {
+        modules: customData['action::menu/getModules'].modules.map((mod) => ({
+            ...mod,
+            displayName: `Le ${mod.displayName}`,
+        })),
+    },
+}
+
+const customAuthoritiesData = {
+    ...customData,
+    me: {
+        ...customData.me,
+        authorities: ['M_dhis-web-messaging'],
+    },
+}
+
+export default {
+    title: 'Header Bar',
+    component: HeaderBar,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    decorators: [createDecoratorProvider()],
+}
+
+export const Default = () => (
+    <CustomDataProvider data={customData}>
+        <HeaderBar appName="Example!" />
+    </CustomDataProvider>
+)
+
+export const CustomLogoWideDimension = () => (
+    <CustomDataProvider data={customLogoData}>
+        <HeaderBar appName="Example!" />
+    </CustomDataProvider>
+)
+CustomLogoWideDimension.storyName = 'Custom Logo (wide dimension)'
+
+export const NonEnglishUserLocale = () => (
+    <CustomDataProvider data={customLocaleData}>
+        <HeaderBar appName="Exemple!" />
+    </CustomDataProvider>
+)
+NonEnglishUserLocale.storyName = 'Non-english user locale'
+
+export const NonEnglishUserLocaleIgnoringI18n = () => {
+    const [language, setLanguage] = useState()
+    useEffect(() => {
+        console.log('custom effect to set language from consumer')
+
+        i18n.setDefaultNamespace('default')
+        i18n.changeLanguage('es')
+        setLanguage('es')
+    }, [])
+
+    return language ? (
+        <CustomDataProvider data={customLocaleData}>
+            <HeaderBar appName="Exemple!" skipI18n />
+        </CustomDataProvider>
+    ) : null
+}
+NonEnglishUserLocaleIgnoringI18n.storyName =
+    'Custom locale initialisation (spanish) from the consumer'
+
+export const NoAuthorityForInterpretationsApp = () => (
+    <CustomDataProvider data={customAuthoritiesData}>
+        <HeaderBar appName="Example!" />
+    </CustomDataProvider>
+)
+NoAuthorityForInterpretationsApp.storyName =
+    'No authority for interpretations app'
+
+export const Loading = () => (
+    <CustomDataProvider options={{ loadForever: true }}>
+        <HeaderBar appName="Example!" />
+    </CustomDataProvider>
+)
+Loading.storyName = 'Loading...'
+
+export const Error = () => (
+    <CustomDataProvider data={{}}>
+        <HeaderBar appName="Exemple!" />
+    </CustomDataProvider>
+)
+Error.storyName = 'Error!'
+
+export const WithOnlineStatus = () => (
+    <CustomDataProvider data={customData}>
+        <HeaderBar appName="Exemple!" />
+    </CustomDataProvider>
+)
+
+WithOnlineStatus.decorators = [
+    createDecoratorProvider({ ...providerConfig, pwaEnabled: true }),
+]
+
+WithOnlineStatus.parameters = {
+    docs: {
+        description: {
+            story: 'An online status badge will be shown in apps that set \
+                `pwa: { enabled: true }` in `d2.config.js`. The status \
+                indicator uses a different layout on viewports smaller \
+                than 480px.',
+        },
+    },
+}
+
+export const WithUpdateNotification = () => (
+    <CustomDataProvider data={customData}>
+        <HeaderBar appName="Data Visualizer" updateAvailable={true} />
+    </CustomDataProvider>
+)
+
+export const WithOnlineStatusMessage = () => (
+    <CustomDataProvider data={customData}>
+        <HeaderBar appName="Exemple!" />
+        <OnlineStatusMessageUpdate />
+    </CustomDataProvider>
+)
+
+export const RTLHeader = () => (
+    <CustomDataProvider data={customData}>
+        <div dir="rtl">
+            <HeaderBar appName="Example!" />
+        </div>
+    </CustomDataProvider>
+)
+
+WithOnlineStatusMessage.decorators = [
+    createDecoratorProvider(
+        {
+            ...providerConfig,
+            pwaEnabled: true,
+        },
+        {
+            ...mockOfflineInterface,
+            latestIsConnected: false,
+        }
+    ),
+]
+
+WithOnlineStatusMessage.parameters = {
+    docs: {
+        description: {
+            story: 'When online status is updated, the status indicator will show react node sent as the message',
+        },
+    },
+}

package/src/index.js

@@ -0,0 +1 @@
+export { HeaderBar } from './header-bar.js'

package/src/join-path.js

@@ -0,0 +1,4 @@
+export const joinPath = (...parts) => {
+    const realParts = parts.filter((part) => !!part)
+    return realParts.map((part) => part.replace(/^\/+|\/+$/g, '')).join('/')
+}

package/src/locales/ar/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/ar_IQ/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": "",
+    "Logout": "",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/bn/translations.json

@@ -0,0 +1,12 @@
+{
+    "Search apps": "",
+    "Last online {{relativeTime}}": "",
+    "Online": "",
+    "Offline": "",
+    "Edit profile": "প্রোফাইল সম্পাদন করুন",
+    "Settings": "",
+    "Account": "",
+    "Help": "",
+    "About DHIS2": "",
+    "Logout": ""
+}

package/src/locales/ckb/translations.json

@@ -0,0 +1,23 @@
+{
+    "Search apps": "",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "داخستن",
+    "Copy debug info": "",
+    "Last online {{relativeTime}}": "",
+    "Online": "ئۆنڵاین",
+    "Offline": "ئۆفڵاین",
+    "Edit profile": "",
+    "Settings": "ريكخستن",
+    "Account": "",
+    "Help": "هاوكاري",
+    "About DHIS2": "",
+    "Logout": "",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/cs/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "Hledat aplikace",
+    "DHIS2 {{dhis2Version}}": "DHIS2 {{dhis2Version}}",
+    "DHIS2 version unknown": "Verze DHIS2 neznámá",
+    "{{appName}} version unknown": "Neznámá verze aplikace {{appName}}",
+    "App {{appVersion}}": "Aplikace {{appVersion}}",
+    "App version unknown": "Verze aplikace neznámá",
+    "Debug info": "Informace o ladění",
+    "Close": "Zavřít",
+    "Copy debug info": "Zkopírovat informace o ladění",
+    "Interpretations": "Interpretace",
+    "Messages": "Zprávy",
+    "Online": "Online",
+    "Offline": "Offline",
+    "Edit profile": "Upravit profil",
+    "Settings": "Nastavení",
+    "Account": "Účet",
+    "Help": "Nápověda",
+    "About DHIS2": "O DHIS2",
+    "Logout": "Odhlásit",
+    "New {{appName}} version available": "K dispozici je nová verze aplikace {{appName}}",
+    "New app version available": "K dispozici nová verze aplikace",
+    "Click to reload": "Kliknutím znovu načtete"
+}

package/src/locales/da/translations.json

@@ -0,0 +1,24 @@
+{
+    "Search apps": "Search apps",
+    "DHIS2 {{dhis2Version}}": "",
+    "DHIS2 version unknown": "",
+    "{{appName}} version unknown": "",
+    "App {{appVersion}}": "",
+    "App version unknown": "",
+    "Debug info": "",
+    "Close": "Close",
+    "Copy debug info": "",
+    "Interpretations": "Interpretations",
+    "Messages": "Messages",
+    "Online": "Online",
+    "Offline": "Offline",
+    "Edit profile": "",
+    "Settings": "Settings",
+    "Account": "Account",
+    "Help": "Help",
+    "About DHIS2": "",
+    "Logout": "",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": ""
+}

package/src/locales/en/translations.json

@@ -0,0 +1,25 @@
+{
+    "Search apps": "Search apps",
+    "DHIS2 {{dhis2Version}}": "DHIS2 {{dhis2Version}}",
+    "DHIS2 version unknown": "DHIS2 version unknown",
+    "{{appName}} version unknown": "{{appName}} version unknown",
+    "App {{appVersion}}": "App {{appVersion}}",
+    "App version unknown": "App version unknown",
+    "Debug info": "Debug info",
+    "Close": "Close",
+    "Copy debug info": "Copy debug info",
+    "Interpretations": "Interpretations",
+    "Messages": "Messages",
+    "Online": "Online",
+    "Offline": "Offline",
+    "Edit profile": "Edit profile",
+    "Settings": "Settings",
+    "Account": "Account",
+    "Help": "Help",
+    "About DHIS2": "About DHIS2",
+    "Logout": "Logout",
+    "New {{appName}} version available": "New {{appName}} version available",
+    "New app version available": "New app version available",
+    "Click to reload": "Click to reload",
+    "Profile menu": "Profile menu"
+}

package/src/locales/en_US/translations.json

@@ -0,0 +1,25 @@
+{
+    "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": "",
+    "Logout": "",
+    "New {{appName}} version available": "",
+    "New app version available": "",
+    "Click to reload": "",
+    "Profile menu": ""
+}

package/src/locales/es/translations.json

@@ -0,0 +1,25 @@
+{
+    "Search apps": "Buscar una aplicación",
+    "DHIS2 {{dhis2Version}}": "DHIS2 {{dhis2Version}}",
+    "DHIS2 version unknown": "Versión desconocida de DHIS2",
+    "{{appName}} version unknown": "{{appName}} versión desconocida",
+    "App {{appVersion}}": "App {{appVersion}}",
+    "App version unknown": "Versión desconocida de la aplicación",
+    "Debug info": "Información de depuración",
+    "Close": "Cerrar",
+    "Copy debug info": "Copiar la información de depuración",
+    "Interpretations": "Interpretaciones",
+    "Messages": "Mensajes",
+    "Online": "Conectado",
+    "Offline": "Desconectado",
+    "Edit profile": "Editar perfil",
+    "Settings": "Configuración",
+    "Account": "Cuenta",
+    "Help": "Ayuda",
+    "About DHIS2": "Sobre DHIS2",
+    "Logout": "Cerrar sesión",
+    "New {{appName}} version available": "Nueva versión de {{appName}} disponible",
+    "New app version available": "Nueva versión de la aplicación disponible",
+    "Click to reload": "Clic para recargar",
+    "Profile menu": ""
+}