feat: show version debug info and update notification in profile menu [LIBS-176] [LIBS-344]

collections/forms/i18n/en.pot

@@ -98,4 +98,4 @@ msgid "Please provide a string"
 msgstr "Please provide a string"
 
 msgid "Please provide a valid url"
-msgstr "Please provide a valid url"
+msgstr "Please provide a valid url"

collections/ui/API.md

@@ -663,6 +663,8 @@ import { HeaderBar } from '@dhis2/ui'
 |---|---|---|---|---|
 |appName|string||||
 |className|string||||
+|updateAvailable|boolean||||
+|onApplyAvailableUpdate|function||||
 
 ### Logo
 

components/header-bar/API.md

@@ -16,3 +16,5 @@ import { HeaderBar } from '@dhis2-ui/header-bar'
 |---|---|---|---|---|
 |appName|string||||
 |className|string||||
+|updateAvailable|boolean||||
+|onApplyAvailableUpdate|function||||

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: 2021-09-02T19:24:35.672Z\n"
-"PO-Revision-Date: 2021-09-02T19:24:35.672Z\n"
+"POT-Creation-Date: 2022-09-26T11:25:27.498Z\n"
+"PO-Revision-Date: 2022-09-26T11:25:27.498Z\n"
 
 msgid "Search apps"
 msgstr "Search apps"
@@ -37,3 +37,9 @@ msgstr "About DHIS2"
 
 msgid "Logout"
 msgstr "Logout"
+
+msgid "New {{appName}} version available"
+msgstr "New {{appName}} version available"
+
+msgid "Click to reload"
+msgstr "Click to reload"

components/header-bar/src/__e2e__/header-bar.stories.e2e.js

@@ -1,10 +1,6 @@
-import { HeaderBar } from '../index.js'
-
-export default {
-    title: 'HeaderBarTesting',
-    component: HeaderBar,
-}
+import { HeaderBar as component } from '../index.js'
 
+export default { title: 'HeaderBarTesting', component }
 export { Default } from './stories/default.js'
 export { ShowOnlineStatus } from './stories/show-online-status.js'
 export { PWAEnabled } from './stories/pwa-enabled.js'

components/header-bar/src/__e2e__/stories/common.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
-import { CustomDataProvider, Provider } from '@dhis2/app-runtime'
-import React from 'react'
+import { CustomDataProvider, Provider, useAlerts } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
 
 export const defaultModules = [
     {
@@ -312,37 +313,6 @@ export const modulesWithSpecialCharacters = [
 export const applicationTitle = 'Foobar'
 
 export const dataProviderData = {
-    'system/info': {
-        contextPath: 'https://debug.dhis2.org/dev',
-        userAgent:
-            'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
-        calendar: 'iso8601',
-        dateFormat: 'yyyy-mm-dd',
-        serverDate: '2021-10-06T08:06:15.256',
-        serverTimeZoneId: 'Etc/UTC',
-        serverTimeZoneDisplayName: 'Coordinated Universal Time',
-        lastAnalyticsTableSuccess: '2021-09-18T10:24:03.536',
-        intervalSinceLastAnalyticsTableSuccess: '429 h, 42 m, 11 s',
-        lastAnalyticsTableRuntime: '520835',
-        lastSystemMonitoringSuccess: '2019-03-26T17:07:15.418',
-        version: '2.38-SNAPSHOT',
-        revision: '6607c3c',
-        buildTime: '2021-10-05T17:13:00.000',
-        jasperReportsVersion: '6.3.1',
-        environmentVariable: 'DHIS2_HOME',
-        databaseInfo: {
-            spatialSupport: true,
-        },
-        encryption: false,
-        emailConfigured: false,
-        redisEnabled: false,
-        systemId: 'eed3d451-4ff5-4193-b951-ffcc68954299',
-        systemName: 'DHIS 2 Demo - Sierra Leone',
-        instanceBaseUrl: 'https://debug.dhis2.org/dev',
-        clusterHostname: '',
-        isMetadataVersionEnabled: true,
-        metadataSyncEnabled: false,
-    },
     'systemSettings/applicationTitle': {
         applicationTitle,
     },
@@ -379,10 +349,93 @@ export const createDecoratorCustomDataProviderHeaderBar = (
 }
 
 export const providerConfig = {
+    appName: 'TestApp',
+    appVersion: {
+        full: '101.2.3-beta.4',
+        major: 101,
+        minor: 2,
+        patch: 3,
+        tag: 'beta.4',
+    },
+    serverVersion: {
+        full: '2.39.2.1-SNAPSHOT',
+        major: 2,
+        minor: 39,
+        patch: 2,
+        hotfix: 1,
+        tag: 'SNAPSHOT',
+    },
+    systemInfo: {
+        contextPath: 'https://debug.dhis2.org/dev',
+        userAgent:
+            'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
+        calendar: 'iso8601',
+        dateFormat: 'yyyy-mm-dd',
+        serverDate: '2021-10-06T08:06:15.256',
+        serverTimeZoneId: 'Etc/UTC',
+        serverTimeZoneDisplayName: 'Coordinated Universal Time',
+        lastAnalyticsTableSuccess: '2021-09-18T10:24:03.536',
+        intervalSinceLastAnalyticsTableSuccess: '429 h, 42 m, 11 s',
+        lastAnalyticsTableRuntime: '520835',
+        lastSystemMonitoringSuccess: '2019-03-26T17:07:15.418',
+        version: '2.39.2.1-SNAPSHOT',
+        revision: '6607c3c',
+        buildTime: '2021-10-05T17:13:00.000',
+        jasperReportsVersion: '6.3.1',
+        environmentVariable: 'DHIS2_HOME',
+        databaseInfo: {
+            spatialSupport: true,
+        },
+        encryption: false,
+        emailConfigured: false,
+        redisEnabled: false,
+        systemId: 'eed3d451-4ff5-4193-b951-ffcc68954299',
+        systemName: 'DHIS 2 Demo - Sierra Leone',
+        instanceBaseUrl: 'https://debug.dhis2.org/dev',
+        clusterHostname: '',
+        isMetadataVersionEnabled: true,
+        metadataSyncEnabled: false,
+    },
     baseUrl: 'https://domain.tld/',
     apiVersion: '',
 }
 
+const MockAlert = ({ alert }) => {
+    useEffect(() => {
+        if (alert.options?.duration) {
+            setTimeout(() => alert.remove(), alert.options?.duration)
+        }
+    }, [alert])
+    return (
+        <div style={{ backgroundColor: '#CCC', padding: 8 }}>
+            {alert.message}
+        </div>
+    )
+}
+MockAlert.propTypes = {
+    alert: PropTypes.shape({
+        message: PropTypes.string,
+        options: PropTypes.shape({ duration: PropTypes.number }),
+        remove: PropTypes.func,
+    }),
+}
+const MocklAlertStack = () => {
+    const alerts = useAlerts()
+
+    return (
+        <div style={{ position: 'absolute', bottom: 16, right: 16 }}>
+            {alerts.map((alert) => (
+                <MockAlert key={alert.id} alert={alert} />
+            ))}
+        </div>
+    )
+}
+
 export const createDecoratorProvider = (config) => {
-    return (fn) => <Provider config={config || providerConfig}>{fn()}</Provider>
+    return (fn) => (
+        <Provider config={config || providerConfig}>
+            {fn()}
+            <MocklAlertStack />
+        </Provider>
+    )
 }

components/header-bar/src/apps.js

@@ -215,7 +215,7 @@ const Apps = ({ apps }) => {
     useEffect(() => {
         document.addEventListener('click', onDocClick)
         return () => document.removeEventListener('click', onDocClick)
-    }, [])
+    }, [onDocClick])
 
     return (
         <div ref={containerEl} data-test="headerbar-apps">

components/header-bar/src/features/the_headerbar_should_display_debug_version_infos.feature

@@ -0,0 +1,7 @@
+Feature: The HeaderBar should display debug version infos
+
+    Scenario: The debug version infos are displayed in the profile menu
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the apps's name and version should be displayed

components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js

@@ -0,0 +1,26 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given(
+    'the HeaderBar is rendered with an app name and app version in runtime context',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'default')
+    }
+)
+
+When('the user opens the profile menu', () => {
+    cy.get('[data-test="headerbar-profile"] > button').click()
+})
+
+Then("the apps's name and version should be displayed", () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should(
+        'contain',
+        'TestApp 101.2.3-beta.4'
+    )
+})
+
+Then('the instance version should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+        'contain',
+        'DHIS2 2.39.2.1-SNAPSHOT'
+    )
+})

components/header-bar/src/header-bar-context.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React, { createContext, useContext } from 'react'
+
+const headerBarContext = createContext({
+    updateAvailable: false,
+    onApplyAvailableUpdate: () => {},
+})
+
+export const HeaderBarContextProvider = ({
+    updateAvailable,
+    onApplyAvailableUpdate,
+    children,
+}) => {
+    return (
+        <headerBarContext.Provider
+            value={{ updateAvailable, onApplyAvailableUpdate }}
+        >
+            {children}
+        </headerBarContext.Provider>
+    )
+}
+HeaderBarContextProvider.propTypes = {
+    children: PropTypes.node,
+    updateAvailable: PropTypes.bool,
+    onApplyAvailableUpdate: PropTypes.func,
+}
+
+export const useHeaderBarContext = () => useContext(headerBarContext)