fix: correctly select and use user locale and application title text [DHIS2-8525] [DHIS2-8723]

cypress/fixtures/HeaderBar/applicationTitle.json

@@ -0,0 +1,3 @@
+{
+    "applicationTitle": "Foobar"
+}

cypress/integration/HeaderBar/The_HeaderBar_should_contain_a_logo_that_links_to_the_homepage/HeaderBar_contains_logo.js

@@ -1,14 +1,12 @@
-import '../common/index.js'
 import { Then } from 'cypress-cucumber-preprocessor/steps'
+import { baseUrl } from '../common/index.js'
 
 Then('the HeaderBar should display the dhis2 logo', () => {
     cy.get('[data-test="headerbar-logo"]').should('be.visible')
 })
 
 Then('the logo should link to the homepage', () => {
-    cy.get('@systemInfoFixture').then(({ contextPath }) => {
-        cy.get('[data-test="headerbar-logo"] a').then($a => {
-            expect($a.attr('href')).to.equal(contextPath)
-        })
+    cy.get('[data-test="headerbar-logo"] a').then($a => {
+        expect($a.attr('href')).to.equal(baseUrl)
     })
 })

cypress/integration/HeaderBar/The_HeaderBar_should_display_the_title_provided_by_the_backend_and_the_app/The_HeaderBar_displays_the_custom_title.js

@@ -3,13 +3,13 @@ import { Then, Given } from 'cypress-cucumber-preprocessor/steps'
 
 Given(
     'the custom title is {string} and the app title is "Example!"',
-    systemName => {
-        cy.fixture('HeaderBar/systemInfo')
+    applicationTitle => {
+        cy.fixture('HeaderBar/applicationTitle')
             .then(response => ({
                 ...response,
-                systemName,
+                applicationTitle,
             }))
-            .as('systemInfoFixture')
+            .as('applicationTitleFixture')
     }
 )
 

cypress/integration/HeaderBar/common/index.js

@@ -1,29 +1,31 @@
 import { Before, Given } from 'cypress-cucumber-preprocessor/steps'
 
+export const baseUrl = 'https://domain.tld/'
+
 /**
  * Will be executed before any `Given` statement,
  * so these can be overriden by using a different fixture, e. g:
  *
  * Given('foo bar baz', () => {
- *   cy.fixture('HeaderBar/systemInfoBarbaz').as('systemInfoFixture')
+ *   cy.fixture('HeaderBar/applicationTitleBarbaz').as('applicationTitleFixture')
  * })
  *
  * or
  *
  * Given('foo bar baz', () => {
- *   cy.fixture('HeaderBar/systemInfo')
+ *   cy.fixture('HeaderBar/me')
  *      then(response => ({
  *          ...response,
  *          foo: {
  *              ...response.foo,
  *              bar: 'baz'
  *          }
- *      })).as('systemInfoFixture')
+ *      })).as('meFixture')
  * })
  *
  */
 Before(() => {
-    cy.fixture('HeaderBar/systemInfo').as('systemInfoFixture')
+    cy.fixture('HeaderBar/applicationTitle').as('applicationTitleFixture')
     cy.fixture('HeaderBar/me').as('meFixture')
     cy.fixture('HeaderBar/getModules').as('modulesFixture')
     cy.fixture('HeaderBar/dashboard').as('dashboardFixture')
@@ -33,37 +35,37 @@ Before(() => {
 Given('the HeaderBar loads without an error', () => {
     cy.server()
 
-    cy.get('@systemInfoFixture').then(fx => {
+    cy.get('@applicationTitleFixture').then(fx => {
         cy.route({
-            url: 'https://domain.tld/api/system/info',
+            url: `${baseUrl}api/systemSettings/applicationTitle`,
             response: fx,
-        }).as('systemInfo')
+        }).as('applicationTitle')
     })
 
     cy.get('@meFixture').then(fx => {
         cy.route({
-            url: 'https://domain.tld/api/me',
+            url: `${baseUrl}api/me`,
             response: fx,
-        }).as('systemInfo')
+        }).as('me')
     })
 
     cy.get('@modulesFixture').then(fx => {
         cy.route({
-            url: 'https://domain.tld/dhis-web-commons/menu/getModules.action',
+            url: `${baseUrl}dhis-web-commons/menu/getModules.action`,
             response: fx,
         }).as('modules')
     })
 
     cy.get('@dashboardFixture').then(fx => {
         cy.route({
-            url: 'https://domain.tld/api/me/dashboard',
+            url: `${baseUrl}api/me/dashboard`,
             response: fx,
         }).as('dashboard')
     })
 
     cy.get('@logoFixture').then(fx => {
         cy.route({
-            url: 'https://domain.tld/api/staticContent/logo_banner',
+            url: `${baseUrl}api/staticContent/logo_banner`,
             response: fx,
         }).as('logo_banner')
     })

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: 2020-02-18T13:19:29.126Z\n"
-"PO-Revision-Date: 2020-02-18T13:19:29.126Z\n"
+"POT-Creation-Date: 2020-05-15T11:30:14.721Z\n"
+"PO-Revision-Date: 2020-05-15T11:30:14.721Z\n"
 
 msgid "Search apps"
 msgstr ""
@@ -29,5 +29,5 @@ msgstr ""
 msgid "Logout"
 msgstr ""
 
-msgid "Something went wrong with loading the children."
+msgid "Could not load children"
 msgstr ""

src/HeaderBar.js

@@ -1,24 +1,24 @@
-import React, { useEffect } from 'react'
+import React, { useMemo } from 'react'
 import propTypes from '@dhis2/prop-types'
 
 import { colors } from '@dhis2/ui-core'
 
 import Apps from './HeaderBar/Apps.js'
 import Profile from './HeaderBar/Profile.js'
 
-import { useDataQuery } from '@dhis2/app-runtime'
+import { useDataQuery, useConfig } from '@dhis2/app-runtime'
 
 import { Logo } from './HeaderBar/Logo.js'
 import { Title } from './HeaderBar/Title.js'
 
 import { Notifications } from './HeaderBar/Notifications.js'
 
-import './locales'
-import i18n from '@dhis2/d2-i18n'
+import i18n from './locales'
+import { joinPath } from './HeaderBar/joinPath.js'
 
 const query = {
-    systemInfo: {
-        resource: 'system/info',
+    title: {
+        resource: 'systemSettings/applicationTitle',
     },
     user: {
         resource: 'me',
@@ -32,52 +32,47 @@ const query = {
 }
 
 export const HeaderBar = ({ appName, className }) => {
+    const { baseUrl } = useConfig()
     const { loading, error, data } = useDataQuery(query)
 
-    useEffect(() => {
+    const apps = useMemo(() => {
         const getPath = path =>
             path.startsWith('http:') || path.startsWith('https:')
                 ? path
-                : `${data.systemInfo.contextPath}/api/${path}`
+                : joinPath(baseUrl, 'api', path)
 
-        if (!loading && !error)
-            data.apps.modules.forEach(app => {
-                app.icon = getPath(app.icon)
-                app.defaultAction = getPath(app.defaultAction)
-            })
+        return data?.apps.modules.map(app => ({
+            ...app,
+            icon: getPath(app.icon),
+            defaultAction: getPath(app.defaultAction),
+        }))
     }, [data])
 
     if (!loading && !error) {
         // TODO: This will run every render which is probably wrong!  Also, setting the global locale shouldn't be done in the headerbar
         const locale = data.user.settings.keyUiLocale || 'en'
+        i18n.setDefaultNamespace('default')
         i18n.changeLanguage(locale)
     }
 
     return (
         <header className={className}>
             {!loading && !error && (
                 <>
-                    <Logo baseUrl={data.systemInfo.contextPath} />
+                    <Logo />
                     <Title
                         app={appName}
-                        instance={data.systemInfo.systemName}
+                        instance={data.title.applicationTitle}
                     />
                     <div className="right-control-spacer" />
                     <Notifications
                         interpretations={
                             data.notifications.unreadInterpretations
                         }
                         messages={data.notifications.unreadMessageConversations}
-                        contextPath={data.systemInfo.contextPath}
-                    />
-                    <Apps
-                        apps={data.apps.modules}
-                        contextPath={data.systemInfo.contextPath}
-                    />
-                    <Profile
-                        user={data.user}
-                        contextPath={data.systemInfo.contextPath}
                     />
+                    <Apps apps={apps} />
+                    <Profile user={data.user} baseUrl={baseUrl} />
                 </>
             )}
 

src/HeaderBar/Apps.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
+import { useConfig } from '@dhis2/app-runtime'
 
 import i18n from '@dhis2/d2-i18n'
 import { Card, InputField, colors, theme } from '@dhis2/ui-core'
@@ -9,6 +10,7 @@ import { Apps as AppsIcon } from '../icons/Apps.js'
 import { Cancel } from '../icons/Cancel.js'
 
 import css from 'styled-jsx/css'
+import { joinPath } from './joinPath.js'
 
 const appIcon = css.resolve`
     svg {
@@ -51,7 +53,9 @@ TrailIcon.propTypes = {
     onClick: propTypes.func,
 }
 
-function Search({ value, onChange, onIconClick, contextPath }) {
+function Search({ value, onChange, onIconClick }) {
+    const { baseUrl } = useConfig()
+
     return (
         <div>
             <span>
@@ -66,7 +70,7 @@ function Search({ value, onChange, onIconClick, contextPath }) {
             </span>
 
             <span>
-                <a href={`${contextPath}/dhis-web-menu-management`}>
+                <a href={joinPath(baseUrl, 'dhis-web-menu-management')}>
                     <Settings className={settingsIcon.className} />
                 </a>
             </span>
@@ -99,7 +103,6 @@ Search.defaultProps = {
 }
 
 Search.propTypes = {
-    contextPath: propTypes.string.isRequired,
     value: propTypes.string.isRequired,
     onChange: propTypes.func.isRequired,
     onIconClick: propTypes.func,
@@ -244,7 +247,6 @@ export default class Apps extends React.Component {
                     value={this.state.filter}
                     onChange={this.onChange}
                     onIconClick={this.onIconClick}
-                    contextPath={this.props.contextPath}
                 />
                 <List apps={apps} filter={this.state.filter} />
             </Card>
@@ -291,5 +293,4 @@ export default class Apps extends React.Component {
 
 Apps.propTypes = {
     apps: propTypes.array.isRequired,
-    contextPath: propTypes.string.isRequired,
 }

src/HeaderBar/Logo.js

@@ -1,34 +1,34 @@
 import React from 'react'
-import propTypes from '@dhis2/prop-types'
+import { useConfig } from '@dhis2/app-runtime'
 
 import { LogoImage } from './LogoImage.js'
 
-export const Logo = ({ baseUrl }) => (
-    <div data-test="headerbar-logo">
-        <a href={baseUrl}>
-            <LogoImage />
-        </a>
+export const Logo = () => {
+    const { baseUrl } = useConfig()
 
-        <style jsx>{`
-            div {
-                box-sizing: border-box;
-                min-width: 49px;
-                max-height: 48px;
-                margin: 0 12px 0 0;
-                border-right: 1px solid rgba(32, 32, 32, 0.15);
-            }
+    return (
+        <div data-test="headerbar-logo">
+            <a href={baseUrl}>
+                <LogoImage />
+            </a>
 
-            a,
-            a:hover,
-            a:focus,
-            a:active,
-            a:visited {
-                user-select: none;
-            }
-        `}</style>
-    </div>
-)
+            <style jsx>{`
+                div {
+                    box-sizing: border-box;
+                    min-width: 49px;
+                    max-height: 48px;
+                    margin: 0 12px 0 0;
+                    border-right: 1px solid rgba(32, 32, 32, 0.15);
+                }
 
-Logo.propTypes = {
-    baseUrl: propTypes.string.isRequired,
+                a,
+                a:hover,
+                a:focus,
+                a:active,
+                a:visited {
+                    user-select: none;
+                }
+            `}</style>
+        </div>
+    )
 }