feat: add configurable dir for language directions to app adapter [DHIS2-16480]

adapter/src/components/AppWrapper.js

@@ -8,8 +8,15 @@ import { ErrorBoundary } from './ErrorBoundary.js'
 import { LoadingMask } from './LoadingMask.js'
 import { styles } from './styles/AppWrapper.style.js'
 
-const AppWrapper = ({ children, plugin, onPluginError, clearPluginError }) => {
-    const { loading: localeLoading } = useCurrentUserLocale()
+const AppWrapper = ({
+    children,
+    plugin,
+    onPluginError,
+    clearPluginError,
+    direction: configDirection,
+}) => {
+    const { loading: localeLoading, direction: localeDirection } =
+        useCurrentUserLocale(configDirection)
     const { loading: latestUserLoading } = useVerifyLatestUser()
 
     if (localeLoading || latestUserLoading) {
@@ -40,7 +47,9 @@ const AppWrapper = ({ children, plugin, onPluginError, clearPluginError }) => {
     return (
         <div className="app-shell-adapter">
             <style jsx>{styles}</style>
-            <ConnectedHeaderBar />
+            <div dir={localeDirection}>
+                <ConnectedHeaderBar />
+            </div>
             <div className="app-shell-app">
                 <ErrorBoundary onRetry={() => window.location.reload()}>
                     {children}
@@ -54,6 +63,7 @@ const AppWrapper = ({ children, plugin, onPluginError, clearPluginError }) => {
 AppWrapper.propTypes = {
     children: PropTypes.node,
     clearPluginError: PropTypes.func,
+    direction: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
     plugin: PropTypes.bool,
     onPluginError: PropTypes.func,
 }

adapter/src/index.js

@@ -12,6 +12,7 @@ const AppAdapter = ({
     appVersion,
     url,
     apiVersion,
+    direction,
     pwaEnabled,
     plugin,
     parentAlertsAdd,
@@ -41,6 +42,7 @@ const AppAdapter = ({
                         plugin={plugin}
                         onPluginError={onPluginError}
                         clearPluginError={clearPluginError}
+                        direction={direction}
                     >
                         {children}
                     </AppWrapper>
@@ -56,6 +58,7 @@ AppAdapter.propTypes = {
     apiVersion: PropTypes.number,
     children: PropTypes.element,
     clearPluginError: PropTypes.func,
+    direction: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
     parentAlertsAdd: PropTypes.func,
     plugin: PropTypes.bool,
     pwaEnabled: PropTypes.bool,

adapter/src/utils/useLocale.js

@@ -3,16 +3,45 @@ import i18n from '@dhis2/d2-i18n'
 import moment from 'moment'
 import { useState, useEffect } from 'react'
 
-i18n.setDefaultNamespace('default')
+const I18N_NAMESPACE = 'default'
+i18n.setDefaultNamespace(I18N_NAMESPACE)
 
-const simplifyLocale = (locale) => {
-    const idx = locale.indexOf('-')
-    if (idx === -1) {
+const transformJavaLocale = (locale) => {
+    return locale.replace('_', '-')
+}
+
+// if translation resources aren't found for the given locale, try shorter
+// versions of the locale
+// e.g. 'pt_BR_Cyrl_asdf' => 'pt_BR', or 'ar-NotFound' => 'ar'
+const validateLocaleByBundle = (locale) => {
+    if (i18n.hasResourceBundle(locale, I18N_NAMESPACE)) {
+        return locale
+    }
+
+    console.log(`Translations for locale ${locale} not found`)
+
+    // see if we can try basic versions of the locale
+    // (e.g. 'ar' instead of 'ar_IQ')
+    const match = /[_-]/.exec(locale)
+    if (!match) {
         return locale
     }
-    return locale.substr(0, idx)
+
+    const separator = match[0] // '-' or '_'
+    const splitLocale = locale.split(separator)
+    for (let i = splitLocale.length - 1; i > 0; i--) {
+        const shorterLocale = splitLocale.slice(0, i).join(separator)
+        if (i18n.hasResourceBundle(shorterLocale, I18N_NAMESPACE)) {
+            return shorterLocale
+        }
+        console.log(`Translations for locale ${shorterLocale} not found`)
+    }
+
+    // if nothing else works, use the initially provided locale
+    return locale
 }
 
+// Set locale for Moment and i18n
 const setGlobalLocale = (locale) => {
     if (locale !== 'en' && locale !== 'en-us') {
         import(
@@ -23,22 +52,41 @@ const setGlobalLocale = (locale) => {
     }
     moment.locale(locale)
 
-    const simplifiedLocale = simplifyLocale(locale)
-    i18n.changeLanguage(simplifiedLocale)
+    const resolvedLocale = validateLocaleByBundle(locale)
+    i18n.changeLanguage(resolvedLocale)
+
+    console.log('🗺 Global d2-i18n locale initialized:', resolvedLocale)
+}
+
+// Sets the global direction based on the app's configured direction
+// (which should be done to affect modals, alerts, and other portal elements),
+// then returns the locale's direction for use on the header bar
+const handleDirection = ({ locale, configDirection }) => {
+    // for i18n.dir, need JS-formatted locale
+    const jsLocale = transformJavaLocale(locale)
+    const localeDirection = i18n.dir(jsLocale)
+
+    const globalDirection =
+        configDirection === 'auto' ? localeDirection : configDirection
+    // set `dir` globally (then override in app wrapper if needed)
+    document.documentElement.setAttribute('dir', globalDirection)
+
+    return localeDirection
 }
 
-export const useLocale = (locale) => {
-    const [result, setResult] = useState(undefined)
+export const useLocale = ({ locale, configDirection }) => {
+    const [result, setResult] = useState({})
+
     useEffect(() => {
         if (!locale) {
             return
         }
 
+        const direction = handleDirection({ locale, configDirection })
         setGlobalLocale(locale)
-        setResult(locale)
+        setResult({ locale, direction })
+    }, [locale, configDirection])
 
-        console.log('🗺 Global d2-i18n locale initialized:', locale)
-    }, [locale])
     return result
 }
 
@@ -47,16 +95,21 @@ const settingsQuery = {
         resource: 'userSettings',
     },
 }
-export const useCurrentUserLocale = () => {
+// note: userSettings.keyUiLocale is expected to be in the Java format,
+// e.g. 'ar', 'ar_IQ', 'uz_UZ_Cyrl', etc.
+export const useCurrentUserLocale = (configDirection) => {
     const { loading, error, data } = useDataQuery(settingsQuery)
-    const locale = useLocale(
-        data && (data.userSettings.keyUiLocale || window.navigator.language)
-    )
+    const { locale, direction } = useLocale({
+        locale:
+            data &&
+            (data.userSettings.keyUiLocale || window.navigator.language),
+        configDirection,
+    })
 
     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 }
+    return { loading: loading || !locale, locale, direction }
 }

cli/config/d2.config.app.js

@@ -1,6 +1,12 @@
 const config = {
     type: 'app',
 
+    // sets the `dir` HTML attribute for the app:
+    // options are 'ltr', 'rtl', and 'auto'. If set to 'auto', the direction
+    // will be inferred by the user's UI locale.
+    // The header bar direction will always be set by the locale.
+    direction: 'ltr',
+
     entryPoints: {
         app: './src/App.js',
     },

cli/src/lib/shell/index.js

@@ -7,6 +7,7 @@ module.exports = ({ config, paths }) => {
     const baseEnvVars = {
         name: config.title,
         version: config.version,
+        direction: config.direction,
     }
 
     return {