fix: never render HeaderBar without runtime provider

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/ServerVersionProvider.js

@@ -1,9 +1,10 @@
 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({
@@ -31,7 +32,7 @@ export const ServerVersionProvider = ({ url, apiVersion, children }) => {
  }
 
  if (error) {
- return children
+ return <LoginModal />
  }
 
  const serverVersion = parseServerVersion(systemInfo.version)

adapter/src/index.js

@@ -1,23 +1,13 @@
-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 }) => (
  <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>
 )

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'
@@ -37,3 +38,26 @@ export const useLocale = 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)
+ }
+
+ if (locale) {
+ console.log('d2-i18n locale initialized', locale)
+ }
+
+ return { loading: loading || !locale, locale }
+}