feat(headerbar): display instance's & app's info in profile menu - LIBS-176

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: 2021-10-22T07:38:39.321Z\n"
+"PO-Revision-Date: 2021-10-22T07:38:39.321Z\n"
 
 msgid "Search apps"
 msgstr "Search apps"
@@ -20,6 +20,18 @@ msgstr "Online"
 msgid "Offline"
 msgstr "Offline"
 
+msgid "DHIS2 {{version}}"
+msgstr "DHIS2 {{version}}"
+
+msgid "Build"
+msgstr "Build"
+
+msgid "Checking DHIS2 version..."
+msgstr "Checking DHIS2 version..."
+
+msgid "There was a problem getting DHIS2 version."
+msgstr "There was a problem getting DHIS2 version."
+
 msgid "Edit profile"
 msgstr "Edit profile"
 

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

@@ -1,16 +1,15 @@
-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'
 export { WithLastOnline } from './stories/with-last-online.js'
 export { MeWithAvatar } from './stories/me-with-avatar.js'
 export { WithSpecialAppNameCharacters } from './stories/with-special-app-name-character.js'
+export { InstanceAndAppInfos } from './stories/instance_and_app_infos.js'
+export { InstanceInfosAreLoading } from './stories/instance_infos_are_loading.js'
+export { LoadingInstanceInfosFailed } from './stories/loading_instance_infos_failed.js'
 export { CustomApplicationTitle } from './stories/custom-application-title.js'
 export { UserHasAllAuthority } from './stories/user-has-all-authority.js'
 export { UserHasWebInterpretationAndMessagingAuthority } from './stories/user-has-web-interpretation-and-messaging-authority.js'

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

@@ -1,6 +1,6 @@
 /* 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 React, { useEffect, useRef } from 'react'
 
 export const defaultModules = [
     {
@@ -312,37 +312,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 +348,78 @@ 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.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,
+    },
     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>
+}
+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/__e2e__/stories/default.js

@@ -9,5 +9,6 @@ export const Default = () => <HeaderBar appName="Example!" />
 
 Default.decorators = [
     createDecoratorCustomDataProviderHeaderBar(),
+    createDecoratorAlertStack(),
     createDecoratorProvider(),
 ]

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

@@ -0,0 +1,23 @@
+Feature: The HeaderBar should display the app and instance infos
+
+    Scenario: The app and instance infos are displayed in the profile menu
+        Given the HeaderBar is rendered with an app name and app version
+        When the user opens the profile menu
+        Then the instance's name, version and build revision should be displayed
+        And the apps's name and version should be displayed
+
+    Scenario: Only the instance infos are displayed in the profile menu
+        Given the HeaderBar is rendered with an app name but without an app version
+        When the user opens the profile menu
+        Then the instance's name, version and build revision should be displayed
+        And the apps's name and version should not be displayed
+
+    Scenario: Only the instance infos are loading
+        Given the instance infos are being fetched
+        When the user opens the profile menu
+        Then a loading message should be displayed
+
+    Scenario: The instance infos failed loading
+        Given fetching the instance infos failed
+        When the user opens the profile menu
+        Then an error message should be displayed

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

@@ -0,0 +1,59 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('the HeaderBar is rendered with an app name and app version', () => {
+    cy.visitStory('HeaderBarTesting', 'instance and app infos')
+})
+
+Given(
+    'the HeaderBar is rendered with an app name but without an app version',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'default')
+    }
+)
+
+Given('the instance infos are being fetched', () => {
+    cy.visitStory('HeaderBarTesting', 'instance infos are loading')
+})
+
+Given('fetching the instance infos failed', () => {
+    cy.visitStory('HeaderBarTesting', 'loading instance infos failed')
+})
+
+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',
+        'Data Visualizer 100.3.2'
+    )
+})
+
+Then("the apps's name and version should not be displayed", () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('not.exist')
+})
+
+Then(
+    "the instance's name, version and build revision should be displayed",
+    () => {
+        cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+            'contain',
+            'DHIS2 2.38-SNAPSHOT, Build 6607c3c'
+        )
+    }
+)
+
+Then('a loading message should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+        'contain',
+        'Checking DHIS2 version...'
+    )
+})
+
+Then('an error message should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+        'contain',
+        'There was a problem getting DHIS2 version.'
+    )
+})

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

@@ -0,0 +1,10 @@
+import { 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>
+}
+export const useHeaderBarContext = () => useContext(headerBarContext)