orc-shared 1.2.0-dev.6 → 1.3.0-dev.1

package/dist/selectors/metadata.js

@@ -35,9 +35,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   enterModule && enterModule(module);
 })();
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -93,9 +93,9 @@ var namedLookupSelector = (0, _utils.memoize)(function (moduleName, lookupName)
 });
 exports.namedLookupSelector = namedLookupSelector;
 var namedLookupValuesSelector = (0, _utils.memoize)(function (moduleName, lookupName) {
-  return (0, _reselect.createSelector)(namedLookupSelector(moduleName, lookupName), _locale.currentLocaleOrDefault, function (statuses, locale) {
-    return (statuses.get("values") || _immutable.default.Map()).map(function (status) {
-      return (0, _utils.setTranslation)(locale, status, "displayName");
+  return (0, _reselect.createSelector)(namedLookupSelector(moduleName, lookupName), _locale.currentLocaleOrDefault, function (lookup, locale) {
+    return (lookup.get("values") || _immutable.default.Map()).map(function (lookupValue) {
+      return (0, _setTranslationWithFallback.setTranslationWithFallbackField)(locale, lookupValue, "name", "displayName");
     });
   });
 });
@@ -230,6 +230,8 @@ var filterIsBuiltInAttributes = function filterIsBuiltInAttributes(isBuiltIn) {
   return function (attributes) {
     return attributes.filter(function (a) {
       return a.get("isBuiltIn") === isBuiltIn;
+    }).sortBy(function (x) {
+      return x.get("displayOrder");
     });
   };
 };
@@ -278,8 +280,12 @@ var groupedCustomAttributesDefinitionSelector = (0, _utils.memoize)(function (mo
         displayOrder: profileAttributeGroup == null ? void 0 : profileAttributeGroup.get("displayOrder")
       }).set("baseAttributes", group.filter(function (i) {
         return i.get("dataType") !== _constants.attributeDataType.entityReference;
+      }).sortBy(function (x) {
+        return x.get("displayOrder");
       })).set("profileAttributes", group.filter(function (i) {
         return i.get("dataType") === _constants.attributeDataType.entityReference;
+      }).sortBy(function (x) {
+        return x.get("displayOrder");
       }));
     }).sortBy(function (x) {
       return x.get("displayOrder");
@@ -291,9 +297,13 @@ var customAttributesDefinitionSelector = (0, _utils.memoize)(function (moduleNam
   return (0, _reselect.createSelector)(mappedDefinitionEntity(moduleName, profileEntityName), customAttributesSelector(moduleName, profileEntityName), function (definition, attributes) {
     var profileAttributes = attributes == null ? void 0 : attributes.filter(function (a) {
       return a.get("dataType") === _constants.attributeDataType.entityReference;
+    }).sortBy(function (x) {
+      return x.get("displayOrder");
     });
     var baseAttributes = attributes == null ? void 0 : attributes.filter(function (a) {
       return a.get("dataType") !== _constants.attributeDataType.entityReference;
+    }).sortBy(function (x) {
+      return x.get("displayOrder");
     });
     return definition.set("baseAttributes", baseAttributes).set("profileAttributes", profileAttributes);
   });

package/dist/selectors/modules.js

@@ -15,9 +15,9 @@ var _reselect = require("reselect");
   enterModule && enterModule(module);
 })();
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/dist/selectors/scope.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.scopeGetter = exports.scopeDefaultCultureSelector = exports.localizedScopesSelectorByIds = exports.localizedScopeSelector = exports.isCurrentScopeAuthorizedSelector = exports.getScopesSelector = exports.currentScopeSelector = void 0;
+exports.scopeGetter = exports.scopeDefaultCultureSelector = exports.localizedScopesSelectorByIds = exports.localizedScopesSelector = exports.localizedScopeSelector = exports.isCurrentScopeAuthorizedSelector = exports.getScopesSelector = exports.currentScopeSelector = void 0;
 
 var _reselect = require("reselect");
 
@@ -52,6 +52,7 @@ var localizedScopesSelector = (0, _reselect.createSelector)(scopeData, _locale.c
     });
   });
 });
+exports.localizedScopesSelector = localizedScopesSelector;
 var currentScopeSelector = (0, _reselect.createSelector)(_navigation.getCurrentScope, localizedScopesSelector, function (id, scopes) {
   return scopes.get(id) || _immutable.default.Map();
 });

package/dist/utils/flatten.js

@@ -13,9 +13,9 @@ exports.flattenObj = exports.flatten = void 0;
   enterModule && enterModule(module);
 })();
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/dist/utils/localizationHelper.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.default = void 0;
+exports.findCorrespondingLocale = findCorrespondingLocale;
 exports.getLocalization = getLocalization;
 exports.getNotLocalizedString = getNotLocalizedString;
 
@@ -51,9 +52,16 @@ function getNotLocalizedString(value) {
   return value && "[".concat(value, "]");
 }
 
+function findCorrespondingLocale(locales, language) {
+  var _ref, _ref2, _ref3, _ref4, _locales$language;
+
+  return (_ref = (_ref2 = (_ref3 = (_ref4 = (_locales$language = locales[language]) != null ? _locales$language : locales[language.replace(/-/g, "")]) != null ? _ref4 : locales[language.toLowerCase()]) != null ? _ref3 : locales[language.toLowerCase().replace(/-/g, "")]) != null ? _ref2 : locales[language.substring(0, 2).toLowerCase()]) != null ? _ref : null;
+}
+
 var _default = {
   getLocalization: getLocalization,
-  getNotLocalizedString: getNotLocalizedString
+  getNotLocalizedString: getNotLocalizedString,
+  findCorrespondingLocale: findCorrespondingLocale
 };
 var _default2 = _default;
 var _default3 = _default2;
@@ -69,6 +77,7 @@ exports.default = _default3;
 
   reactHotLoader.register(getLocalization, "getLocalization", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
   reactHotLoader.register(getNotLocalizedString, "getNotLocalizedString", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
+  reactHotLoader.register(findCorrespondingLocale, "findCorrespondingLocale", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
 })();
 
@@ -90,6 +99,7 @@ exports.default = _default3;
 
   reactHotLoader.register(getLocalization, "getLocalization", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
   reactHotLoader.register(getNotLocalizedString, "getNotLocalizedString", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
+  reactHotLoader.register(findCorrespondingLocale, "findCorrespondingLocale", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
 })();
 

package/dist/utils/setTranslation.js

@@ -15,6 +15,12 @@ var _flatten = require("./flatten");
   enterModule && enterModule(module);
 })();
 
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -30,7 +36,27 @@ var setTranslation = function setTranslation(locale, obj) {
   }
 
   if (!obj || !obj.getIn((0, _flatten.flatten)([field]))) return obj;
-  var value = obj.getIn((0, _flatten.flatten)([field, locale])) || obj.getIn((0, _flatten.flatten)([field])).filter(function (i) {
+  var localeValue = obj.getIn((0, _flatten.flatten)([field, locale]));
+
+  if (!localeValue && locale.includes("-")) {
+    var fieldValue = obj.getIn((0, _flatten.flatten)([field]));
+    var fieldKeys = fieldValue.keys();
+    var language = locale.substring(0, locale.indexOf("-"));
+
+    for (var _iterator = _createForOfIteratorHelperLoose(fieldKeys), _step; !(_step = _iterator()).done;) {
+      var key = _step.value;
+
+      if (key !== locale && key.startsWith(language)) {
+        localeValue = obj.getIn((0, _flatten.flatten)([field, key]));
+
+        if (localeValue) {
+          break;
+        }
+      }
+    }
+  }
+
+  var value = localeValue || obj.getIn((0, _flatten.flatten)([field])).filter(function (i) {
     return i;
   }).first() || "";
   return obj.setIn((0, _flatten.flatten)([field]), value);

package/dist/utils/setTranslationWithFallback.js

@@ -15,6 +15,12 @@ var _flatten = require("./flatten");
   enterModule && enterModule(module);
 })();
 
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -30,7 +36,30 @@ var setTranslationWithFallbackValue = function setTranslationWithFallbackValue(l
     field[_key - 3] = arguments[_key];
   }
 
-  var value = obj.getIn((0, _flatten.flatten)([field, locale])) || fallbackValue || "";
+  var localeValue = obj.getIn((0, _flatten.flatten)([field, locale]));
+
+  if (!localeValue && locale.includes("-")) {
+    var fieldValue = obj.getIn((0, _flatten.flatten)([field]));
+
+    if (fieldValue) {
+      var fieldKeys = fieldValue.keys();
+      var language = locale.substring(0, locale.indexOf("-"));
+
+      for (var _iterator = _createForOfIteratorHelperLoose(fieldKeys), _step; !(_step = _iterator()).done;) {
+        var key = _step.value;
+
+        if (key !== locale && key.startsWith(language)) {
+          localeValue = obj.getIn((0, _flatten.flatten)([field, key]));
+
+          if (localeValue) {
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  var value = localeValue || fallbackValue || "";
   return obj.setIn((0, _flatten.flatten)([field]), value);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "1.2.0-dev.6",
+	"version": "1.3.0-dev.1",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/AppFrame/About.js

@@ -164,7 +164,14 @@ export const About = ({ currentApplication }) => {
 				</AboutLink>
 			</AboutParagraph>
 			<AboutParagraph>
-				<Text message={sharedMessages.copyright} />
+				<Text
+					message={{
+						...sharedMessages.copyright,
+						values: {
+							year: new Date().getFullYear(),
+						},
+					}}
+				/>
 				<br />
 				<Text message={sharedMessages.allRightsReserved} />
 			</AboutParagraph>

package/src/components/AppFrame/AppFrame.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 import pt from "prop-types";
 import styled, { css } from "styled-components";
@@ -89,6 +89,17 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 		document.title = currentApplication?.displayName || applicationId;
 	}, [currentApplication, applicationId]);
 
+	// Extract only what's needed for the SideBar and its menuItems
+	const menuItemFromModules = useMemo(
+		() =>
+			(modules ?? []).map(item => ({
+				id: item.id,
+				label: item.label,
+				icon: item.icon,
+			})),
+		[modules],
+	);
+
 	const [prefViewState] = useViewState(PREFS_NAME);
 
 	return (
@@ -109,7 +120,7 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 				}}
 				onClick={reset}
 			/>
-			<Sidebar {...{ open, toggle, modules, activeModules }} />
+			<Sidebar {...{ open, toggle, modules: menuItemFromModules, activeModules }} />
 			<ViewPort open={open} onClick={reset}>
 				{noScope && !forceShowScope.includes(moduleName) ? (
 					<React.Fragment>

package/src/components/AppFrame/AppFrame.test.js

@@ -294,6 +294,59 @@ describe("AppFrame", () => {
 		expect(document.title, "to equal", "Marketing Legacy");
 	});
 
+	it("renders a viewport with scope selector, top bar and sidebar with undefined modules", () => {
+		props.modules = undefined;
+		props.children = [<TestComp1 key="1" />, <TestComp2 key="2" />, <TestComp3 key="3" />];
+		expect(
+			<Provider store={store}>
+				<MemoryRouter initialEntries={["/Foo/bar"]}>
+					<ThemeProvider theme={{}}>
+						<I18n>
+							<AppFrame {...props} />
+						</I18n>
+					</ThemeProvider>
+				</MemoryRouter>
+			</Provider>,
+			"when mounted",
+			"to satisfy",
+			<Provider store={store}>
+				<ThemeProvider theme={{}}>
+					<MemoryRouter initialEntries={["/Foo/bar"]}>
+						<Base>
+							<Wrapper>
+								<AppBox>
+									<ApplicationSelector {...props} />
+									<AppLabel>
+										<AppLogo />
+										Marketing Legacy
+									</AppLabel>
+								</AppBox>
+								<MenuWrapper>
+									<Ignore />
+								</MenuWrapper>
+								<HelpLink>Help</HelpLink>
+							</Wrapper>
+							<SideBar>
+								<MenuToggle />
+								<Logo />
+							</SideBar>
+							<ViewPort>
+								<ScopeBar name="Test 1" />
+								<TestComp1 key="1" />
+								<TestComp2 key="2" />
+								<TestComp3 key="3" />
+							</ViewPort>
+							<About messages={props.aboutMessages} />
+							<LoadingScreen />
+						</Base>
+					</MemoryRouter>
+				</ThemeProvider>
+			</Provider>,
+		);
+
+		expect(document.title, "to equal", "Marketing Legacy");
+	});
+
 	it("renders a viewport with scope selector, top bar and sidebar when no current application", () => {
 		props.modules = [
 			{ id: "test1", component: TestComp1, route: "/test1" },

package/src/components/AppFrame/MenuItem.js

@@ -116,18 +116,7 @@ export const Label = styled.span`
 	opacity: ${ifFlag("show", 1, 0)};
 `;
 
-const MenuItem = ({
-	open = false,
-	label = "",
-	icon,
-	alert,
-	pageScopeSelector,
-	closingTabHandler,
-	hide, // This props is not used in the component, but we need to destructure it so props can be used in ItemWrapper
-	isHidden = false,
-	href,
-	...props
-}) => {
+const MenuItem = ({ open = false, label = "", icon, alert, isHidden = false, href, ...props }) => {
 	let ItemWrapper = Block;
 	if (props.menuToggle) {
 		ItemWrapper = BlockWithA;

package/src/components/Culture.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import { currentLocaleOrDefault } from "../selectors/locale";
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import * as date_fns_locale from "date-fns/locale";
+import { findCorrespondingLocale } from "../utils/localizationHelper";
+
+const Culture = () => {
+	const locale = useSelector(currentLocaleOrDefault);
+	const language = navigator.language ?? locale;
+
+	useMemo(() => {
+		const fnsLocale = findCorrespondingLocale(date_fns_locale, language);
+
+		if (fnsLocale != null) {
+			registerLocale(language, fnsLocale);
+			setDefaultLocale(language);
+		}
+	}, [language]);
+
+	return <React.Fragment />;
+};
+
+export default Culture;

package/src/components/Culture.test.js

@@ -0,0 +1,86 @@
+import React from "react";
+import Immutable from "immutable";
+import { Provider } from "react-redux";
+import { getDefaultLocale } from "react-datepicker";
+import Culture from "./Culture";
+
+describe("Culture", () => {
+	let state, store, languageGetter;
+
+	beforeEach(() => {
+		languageGetter = jest.spyOn(window.navigator, "language", "get");
+
+		state = Immutable.fromJS({
+			requests: {},
+			settings: {
+				defaultScope: "aDefaultScope",
+			},
+			locale: {
+				supportedLocales: [
+					{ language: "English", cultureIso: "en" },
+					{ language: "Français", cultureIso: "fr" },
+				],
+			},
+		});
+		store = {
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: () => {},
+		};
+	});
+
+	afterEach(() => {
+		languageGetter.mockReset();
+		jest.clearAllMocks();
+	});
+
+	it("shows the wrapped component if authenticated and default scope is known", () => {
+		languageGetter.mockReturnValue(null);
+
+		const component = (
+			<Provider store={store}>
+				<Culture />
+			</Provider>
+		);
+
+		expect(component, "when mounted", "to satisfy", null);
+
+		expect(getDefaultLocale(), "to be", undefined); // Default behavior for react-datepicker
+	});
+
+	it("shows the wrapped component if authenticated and default scope is known 222", () => {
+		state = state.setIn(["locale", "supportedLocales"], [{ language: "English", cultureIso: "en" }]);
+		languageGetter.mockReturnValue("en-GB");
+
+		const component = (
+			<Provider store={store}>
+				<Culture />
+			</Provider>
+		);
+
+		expect(component, "when mounted", "to satisfy", null);
+
+		expect(getDefaultLocale(), "to equal", "en-GB");
+	});
+
+	it("shows the wrapped component if authenticated and default scope is known 333", () => {
+		state = state.setIn(
+			["locale", "supportedLocales"],
+			[
+				{ language: "French", cultureIso: "fr" },
+				{ language: "EnglishMy", cultureIso: "enMy" },
+			],
+		);
+		languageGetter.mockReturnValue("fr-FR");
+
+		const component = (
+			<Provider store={store}>
+				<Culture />
+			</Provider>
+		);
+
+		expect(component, "when mounted", "to satisfy", null);
+
+		expect(getDefaultLocale(), "to equal", "fr-FR");
+	});
+});

package/src/components/I18n.js

@@ -6,10 +6,12 @@ import { currentLocaleOrDefault } from "../selectors/locale";
 const I18n = props => {
 	const locale = useSelector(currentLocaleOrDefault);
 	const messages = require("translations/" + locale + ".json");
+	const language = navigator.language ?? locale;
+
 	return (
 		<IntlProvider
-			key={locale} // TODO: Remove this when react-intl suports new React context API
-			locale={locale}
+			key={language} // TODO: Remove this when react-intl suports new React context API
+			locale={language}
 			messages={messages}
 			{...props}
 		/>

package/src/components/I18n.test.js

@@ -9,10 +9,13 @@ import I18n from "./I18n";
 jest.mock("translations/en-US.json", () => ({
 	WORD: "Word",
 }));
+jest.mock("translations/fr-CA.json", () => ({
+	WORD: "Mots",
+}));
 
 describe("I18n", () => {
 	spyOnConsole();
-	let store, state;
+	let store, state, languageGetter;
 	beforeEach(() => {
 		state = Immutable.fromJS({
 			locale: {
@@ -25,9 +28,16 @@ describe("I18n", () => {
 			dispatch: () => {},
 			getState: () => state,
 		};
+
+		languageGetter = jest.spyOn(window.navigator, "language", "get");
 	});
 
-	it("renders a react-intl IntlProvider with locale data provided", () =>
+	afterEach(() => {
+		languageGetter.mockReset();
+	});
+
+	it("renders a react-intl IntlProvider with locale data provided", () => {
+		languageGetter.mockReturnValue(null);
 		expect(
 			<Provider store={store}>
 				<MemoryRouter>
@@ -39,5 +49,24 @@ describe("I18n", () => {
 			"when mounted",
 			"to satisfy",
 			"Word",
-		).then(() => expect(console.error, "was not called")));
+		).then(() => expect(console.error, "was not called"));
+	});
+
+	it("renders a react-intl IntlProvider with navigator language provided", () => {
+		languageGetter.mockReturnValue("fr-CA");
+		state = state.setIn(["locale", "locale"], "fr-CA");
+
+		expect(
+			<Provider store={store}>
+				<MemoryRouter>
+					<I18n>
+						<FormattedMessage id="WORD" defaultMessage="Failure" />
+					</I18n>
+				</MemoryRouter>
+			</Provider>,
+			"when mounted",
+			"to satisfy",
+			"Mots",
+		).then(() => expect(console.error, "was not called"));
+	});
 });

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Translations.test.js

@@ -18,6 +18,8 @@ describe("Translations ", () => {
 	const theme = createMuiTheme();
 
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		collapsibleListProps = new CollapsibleListProps();
 		collapsibleListProps.set(CollapsibleListProps.propNames.hasMessage, true);
 		collapsibleListProps.set(
@@ -32,6 +34,10 @@ describe("Translations ", () => {
 		collapsibleListProps.set(CollapsibleListProps.propNames.containerWidth, "unset");
 	});
 
+	afterEach(() => {
+		delete window.bypassDebounce;
+	});
+
 	it("Renders Translations  correctly", () => {
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }} intlProvider={{ messages }}>
@@ -135,7 +141,7 @@ describe("Translations ", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
-	it("Translations  component handles change", () => {
+	it("Translations component handles change", () => {
 		const aValue = "aValue";
 		const update = sinon.spy().named("update");
 

package/src/components/MaterialUI/DataDisplay/SelectionList.js

@@ -54,7 +54,7 @@ const formatOnChange = (data, ids) => {
 	const selectedItems = data.filter(dataItem => ids.includes(dataItem.id));
 
 	return {
-		left: [...selectedItems],
+		selectedItems: [...selectedItems],
 	};
 };
 

package/src/components/MaterialUI/DataDisplay/SelectionList.test.js

@@ -179,7 +179,7 @@ describe("SelectionList", () => {
 		let item = mountedComponent.find(ListItem).at(0);
 		item.invoke("onClick")();
 
-		expect(onChange.args[2][0], "to equal", { left: [list[0]] });
+		expect(onChange.args[2][0], "to equal", { selectedItems: [list[0]] });
 	});
 
 	it("Calls onChange with defaultSelection", () => {
@@ -196,7 +196,7 @@ describe("SelectionList", () => {
 
 		mount(component);
 
-		expect(onChange.args[1][0], "to equal", { left: [data[1]] });
+		expect(onChange.args[1][0], "to equal", { selectedItems: [data[1]] });
 	});
 
 	it("handle scrolling event", () => {