@dhis2-ui/header-bar 10.9.1 → 10.9.2

package/build/cjs/header-bar.js

@@ -42,12 +42,13 @@ const query = {
   }
 };
 const HeaderBar = _ref => {
-  var _data$user$avatar;
+  var _data$user2, _data$user2$settings, _data$user$avatar;
   let {
     appName,
     className,
     updateAvailable,
-    onApplyAvailableUpdate
+    onApplyAvailableUpdate,
+    skipI18n
   } = _ref;
   const {
     appName: configAppName,
@@ -67,15 +68,18 @@ const HeaderBar = _ref => {
       defaultAction: getPath(app.defaultAction)
     }));
   }, [data, baseUrl]);
-
-  // See https://jira.dhis2.org/browse/LIBS-180
-  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';
-    _index.default.setDefaultNamespace('default');
-    _index.default.changeLanguage(locale);
-  }
+  (0, _react.useEffect)(() => {
+    if (!loading && !error && !skipI18n) {
+      var _data$user, _data$user$settings;
+      // This is the "legacy" way of localising the header bar, which is necesasry for external (non-platform) apps
+      // For platform apps, setting i18n is handled by the app-shell so this logic is redundant (and running it twice caused issues)
+      // For external apps, this logic is kept for backwards compatibility, but they also have the option of passing `skipI18n`
+      // and initialising i18n in the consumer
+      const locale = (data === null || data === void 0 ? void 0 : (_data$user = data.user) === null || _data$user === void 0 ? void 0 : (_data$user$settings = _data$user.settings) === null || _data$user$settings === void 0 ? void 0 : _data$user$settings.keyUiLocale) || 'en';
+      _index.default.setDefaultNamespace('default');
+      _index.default.changeLanguage(locale);
+    }
+  }, [data === null || data === void 0 ? void 0 : (_data$user2 = data.user) === null || _data$user2 === void 0 ? void 0 : (_data$user2$settings = _data$user2.settings) === null || _data$user2$settings === void 0 ? void 0 : _data$user2$settings.keyUiLocale, error, loading, skipI18n]);
   return /*#__PURE__*/_react.default.createElement(_headerBarContext.HeaderBarContextProvider, {
     updateAvailable: updateAvailable,
     onApplyAvailableUpdate: onApplyAvailableUpdate
@@ -110,6 +114,12 @@ exports.HeaderBar = HeaderBar;
 HeaderBar.propTypes = {
   appName: _propTypes.default.string,
   className: _propTypes.default.string,
+  /**
+   * `skipI18n` skips initalising internationalisation in the UI component
+   * This is useful for app-platform apps, as the platform already sets i18n, so it can skip i18n (and avoid race conditions).
+   * For non-platform apps, they can continue relying on this logic running for backwards compatibility.
+   * */
+  skipI18n: _propTypes.default.bool,
   updateAvailable: _propTypes.default.bool,
   onApplyAvailableUpdate: _propTypes.default.func
 };

package/build/cjs/header-bar.prod.stories.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithUpdateNotification = exports.WithOnlineStatusMessage = exports.WithOnlineStatus = exports.RTLHeader = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
+exports.default = exports.WithUpdateNotification = exports.WithOnlineStatusMessage = exports.WithOnlineStatus = exports.RTLHeader = exports.NonEnglishUserLocaleIgnoringI18n = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
 var _appRuntime = require("@dhis2/app-runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _common = require("./__e2e__/stories/common.js");
 var _onlineStatusMessage = require("./__e2e__/stories/online-status-message.js");
 var _headerBar = require("./header-bar.js");
+var _index = _interopRequireDefault(require("./locales/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const subtitle = 'The common navigation bar used in all DHIS2 apps';
 const description = `
 The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.
@@ -183,6 +186,23 @@ const NonEnglishUserLocale = () => /*#__PURE__*/_react.default.createElement(_ap
 }));
 exports.NonEnglishUserLocale = NonEnglishUserLocale;
 NonEnglishUserLocale.storyName = 'Non-english user locale';
+const NonEnglishUserLocaleIgnoringI18n = () => {
+  const [language, setLanguage] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    console.log('custom effect to set language from consumer');
+    _index.default.setDefaultNamespace('default');
+    _index.default.changeLanguage('es');
+    setLanguage('es');
+  }, []);
+  return language ? /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+    data: customLocaleData
+  }, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+    appName: "Exemple!",
+    skipI18n: true
+  })) : null;
+};
+exports.NonEnglishUserLocaleIgnoringI18n = NonEnglishUserLocaleIgnoringI18n;
+NonEnglishUserLocaleIgnoringI18n.storyName = 'Custom locale initialisation (spanish) from the consumer';
 const NoAuthorityForInterpretationsApp = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customAuthoritiesData
 }, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {

package/build/es/header-bar.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { useDataQuery, useConfig } from '@dhis2/app-runtime';
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Apps from './apps.js';
 import { HeaderBarContextProvider } from './header-bar-context.js';
 import { joinPath } from './join-path.js';
@@ -33,12 +33,13 @@ const query = {
   }
 };
 export const HeaderBar = _ref => {
-  var _data$user$avatar;
+  var _data$user2, _data$user2$settings, _data$user$avatar;
   let {
     appName,
     className,
     updateAvailable,
-    onApplyAvailableUpdate
+    onApplyAvailableUpdate,
+    skipI18n
   } = _ref;
   const {
     appName: configAppName,
@@ -58,15 +59,18 @@ export const HeaderBar = _ref => {
       defaultAction: getPath(app.defaultAction)
     }));
   }, [data, baseUrl]);
-
-  // See https://jira.dhis2.org/browse/LIBS-180
-  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);
-  }
+  useEffect(() => {
+    if (!loading && !error && !skipI18n) {
+      var _data$user, _data$user$settings;
+      // This is the "legacy" way of localising the header bar, which is necesasry for external (non-platform) apps
+      // For platform apps, setting i18n is handled by the app-shell so this logic is redundant (and running it twice caused issues)
+      // For external apps, this logic is kept for backwards compatibility, but they also have the option of passing `skipI18n`
+      // and initialising i18n in the consumer
+      const locale = (data === null || data === void 0 ? void 0 : (_data$user = data.user) === null || _data$user === void 0 ? void 0 : (_data$user$settings = _data$user.settings) === null || _data$user$settings === void 0 ? void 0 : _data$user$settings.keyUiLocale) || 'en';
+      i18n.setDefaultNamespace('default');
+      i18n.changeLanguage(locale);
+    }
+  }, [data === null || data === void 0 ? void 0 : (_data$user2 = data.user) === null || _data$user2 === void 0 ? void 0 : (_data$user2$settings = _data$user2.settings) === null || _data$user2$settings === void 0 ? void 0 : _data$user2$settings.keyUiLocale, error, loading, skipI18n]);
   return /*#__PURE__*/React.createElement(HeaderBarContextProvider, {
     updateAvailable: updateAvailable,
     onApplyAvailableUpdate: onApplyAvailableUpdate
@@ -100,6 +104,12 @@ export const HeaderBar = _ref => {
 HeaderBar.propTypes = {
   appName: PropTypes.string,
   className: PropTypes.string,
+  /**
+   * `skipI18n` skips initalising internationalisation in the UI component
+   * This is useful for app-platform apps, as the platform already sets i18n, so it can skip i18n (and avoid race conditions).
+   * For non-platform apps, they can continue relying on this logic running for backwards compatibility.
+   * */
+  skipI18n: PropTypes.bool,
   updateAvailable: PropTypes.bool,
   onApplyAvailableUpdate: PropTypes.func
 };

package/build/es/header-bar.prod.stories.js

@@ -1,8 +1,9 @@
 import { CustomDataProvider } from '@dhis2/app-runtime';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { createDecoratorProvider, mockOfflineInterface, providerConfig } from './__e2e__/stories/common.js';
 import { OnlineStatusMessageUpdate } from './__e2e__/stories/online-status-message.js';
 import { HeaderBar } from './header-bar.js';
+import i18n from './locales/index.js';
 const subtitle = 'The common navigation bar used in all DHIS2 apps';
 const description = `
 The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.
@@ -173,6 +174,22 @@ export const NonEnglishUserLocale = () => /*#__PURE__*/React.createElement(Custo
   appName: "Exemple!"
 }));
 NonEnglishUserLocale.storyName = 'Non-english user locale';
+export const NonEnglishUserLocaleIgnoringI18n = () => {
+  const [language, setLanguage] = useState();
+  useEffect(() => {
+    console.log('custom effect to set language from consumer');
+    i18n.setDefaultNamespace('default');
+    i18n.changeLanguage('es');
+    setLanguage('es');
+  }, []);
+  return language ? /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: customLocaleData
+  }, /*#__PURE__*/React.createElement(HeaderBar, {
+    appName: "Exemple!",
+    skipI18n: true
+  })) : null;
+};
+NonEnglishUserLocaleIgnoringI18n.storyName = 'Custom locale initialisation (spanish) from the consumer';
 export const NoAuthorityForInterpretationsApp = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customAuthoritiesData
 }, /*#__PURE__*/React.createElement(HeaderBar, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "10.9.1",
+    "version": "10.9.2",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -34,21 +34,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.9.1",
-        "@dhis2-ui/button": "10.9.1",
-        "@dhis2-ui/card": "10.9.1",
-        "@dhis2-ui/center": "10.9.1",
-        "@dhis2-ui/divider": "10.9.1",
-        "@dhis2-ui/input": "10.9.1",
-        "@dhis2-ui/layer": "10.9.1",
-        "@dhis2-ui/loader": "10.9.1",
-        "@dhis2-ui/logo": "10.9.1",
-        "@dhis2-ui/menu": "10.9.1",
-        "@dhis2-ui/modal": "10.9.1",
-        "@dhis2-ui/user-avatar": "10.9.1",
+        "@dhis2-ui/box": "10.9.2",
+        "@dhis2-ui/button": "10.9.2",
+        "@dhis2-ui/card": "10.9.2",
+        "@dhis2-ui/center": "10.9.2",
+        "@dhis2-ui/divider": "10.9.2",
+        "@dhis2-ui/input": "10.9.2",
+        "@dhis2-ui/layer": "10.9.2",
+        "@dhis2-ui/loader": "10.9.2",
+        "@dhis2-ui/logo": "10.9.2",
+        "@dhis2-ui/menu": "10.9.2",
+        "@dhis2-ui/modal": "10.9.2",
+        "@dhis2-ui/user-avatar": "10.9.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.9.1",
-        "@dhis2/ui-icons": "10.9.1",
+        "@dhis2/ui-constants": "10.9.2",
+        "@dhis2/ui-icons": "10.9.2",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"

package/types/index.d.ts

@@ -5,6 +5,7 @@ export interface HeaderBarProps {
     className?: string
     updateAvailable?: boolean
     onApplyAvailableUpdate?: () => void
+    skipI18n?: boolean
 }
 
 export const HeaderBar: React.FC<HeaderBarProps>