fix: never render HeaderBar without runtime provider (#587)

* fix: never render HeaderBar without runtime provider

* style: formatting

* fix: log locale initialization in useEffect, add emoji to log

* fix: short-circuit the system info fetch if no url provided

* style: sort propTypes

adapter/src/components/AppWrapper.js

@@ -0,0 +1,29 @@
+import { HeaderBar } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useCurrentUserLocale } from '../utils/useLocale.js'
+import { Alerts } from './Alerts.js'
+import { LoadingMask } from './LoadingMask.js'
+import { styles } from './styles/AppWrapper.style.js'
+
+export const AppWrapper = ({ appName, children }) => {
+    const { loading } = useCurrentUserLocale()
+
+    if (loading) {
+        return <LoadingMask />
+    }
+
+    return (
+        <div className="app-shell-adapter">
+            <style jsx>{styles}</style>
+            <HeaderBar appName={appName} />
+            <div className="app-shell-app">{children}</div>
+            <Alerts />
+        </div>
+    )
+}
+
+AppWrapper.propTypes = {
+    appName: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}

adapter/src/components/LoginModal.js

@@ -26,7 +26,9 @@ export const LoginModal = () => {
         e.preventDefault()
         setIsDirty(true)
         if (isValid(server) && isValid(username) && isValid(password)) {
-            window.localStorage.DHIS2_BASE_URL = server
+            if (!staticUrl) {
+                window.localStorage.DHIS2_BASE_URL = server
+            }
             try {
                 await post(
                     `${server}/dhis-web-commons-security/login.action`,

adapter/src/components/ServerVersionProvider.js

@@ -1,16 +1,22 @@
 import { Provider } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import { get } from '../utils/api'
-import { parseServerVersion } from '../utils/parseServerVersion'
-import { LoadingMask } from './LoadingMask'
+import { get } from '../utils/api.js'
+import { parseServerVersion } from '../utils/parseServerVersion.js'
+import { LoadingMask } from './LoadingMask.js'
+import { LoginModal } from './LoginModal.js'
 
 export const ServerVersionProvider = ({ url, apiVersion, children }) => {
     const [{ loading, error, systemInfo }, setState] = useState({
         loading: true,
     })
 
     useEffect(() => {
+        if (!url) {
+            setState({ loading: false, error: new Error('No url specified') })
+            return
+        }
+
         setState(state => (state.loading ? state : { loading: true }))
         const request = get(`${url}/api/system/info`)
         request
@@ -31,7 +37,7 @@ export const ServerVersionProvider = ({ url, apiVersion, children }) => {
     }
 
     if (error) {
-        return children
+        return <LoginModal />
     }
 
     const serverVersion = parseServerVersion(systemInfo.version)
@@ -52,7 +58,7 @@ export const ServerVersionProvider = ({ url, apiVersion, children }) => {
 }
 
 ServerVersionProvider.propTypes = {
-    url: PropTypes.string.isRequired,
     apiVersion: PropTypes.number,
     children: PropTypes.element,
+    url: PropTypes.string,
 }

adapter/src/index.js

@@ -1,32 +1,22 @@
-import { HeaderBar } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Alerts } from './components/Alerts'
-import { AuthBoundary } from './components/AuthBoundary'
-import { FatalErrorBoundary } from './components/FatalErrorBoundary'
-import { ServerVersionProvider } from './components/ServerVersionProvider'
-import { styles } from './styles.js'
+import { AppWrapper } from './components/AppWrapper.js'
+import { FatalErrorBoundary } from './components/FatalErrorBoundary.js'
+import { ServerVersionProvider } from './components/ServerVersionProvider.js'
 
-const App = ({ url, apiVersion, appName, children }) => (
+const AppAdapter = ({ url, apiVersion, appName, children }) => (
     <FatalErrorBoundary>
         <ServerVersionProvider url={url} apiVersion={apiVersion}>
-            <div className="app-shell-adapter">
-                <style jsx>{styles}</style>
-                <HeaderBar appName={appName} />
-                <AuthBoundary url={url}>
-                    <div className="app-shell-app">{children}</div>
-                </AuthBoundary>
-                <Alerts />
-            </div>
+            <AppWrapper appName={appName}>{children}</AppWrapper>
         </ServerVersionProvider>
     </FatalErrorBoundary>
 )
 
-App.propTypes = {
+AppAdapter.propTypes = {
     appName: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
     apiVersion: PropTypes.number,
     children: PropTypes.element,
+    url: PropTypes.string,
 }
 
-export default App
+export default AppAdapter

adapter/src/utils/useLocale.js

@@ -1,3 +1,4 @@
+import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import moment from 'moment'
 import { useState, useEffect } from 'react'
@@ -32,8 +33,30 @@ export const useLocale = locale => {
         if (!locale) {
             return
         }
+
         setGlobalLocale(locale)
         setResult(locale)
+
+        console.log('🗺 Global d2-i18n locale initialized:', locale)
     }, [locale])
     return result
 }
+
+const settingsQuery = {
+    userSettings: {
+        resource: 'userSettings',
+    },
+}
+export const useCurrentUserLocale = () => {
+    const { loading, error, data } = useDataQuery(settingsQuery)
+    const locale = useLocale(
+        data && (data.userSettings.keyUiLocale || window.navigator.language)
+    )
+
+    if (error) {
+        // This shouldn't happen, trigger the fatal error boundary
+        throw new Error('Failed to fetch user locale: ' + error)
+    }
+
+    return { loading: loading || !locale, locale }
+}