orc-shared 1.2.0-dev.10 → 1.2.0-dev.14

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2018 Orckestra Inc.
+Copyright (C) 2022 Orckestra Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -10,7 +10,7 @@ This library provides the [infrastructure](docs/infrastructure.md) to construct
 
 ## License
 
-Copyright © 2018 Orckestra Inc.
+Copyright © 2022 Orckestra Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/components/AppFrame/About.js

@@ -198,7 +198,11 @@ var About = function About(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     message: _sharedMessages.default.ccName
   }))), /*#__PURE__*/_react.default.createElement(AboutParagraph, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: _sharedMessages.default.copyright
+    message: _objectSpread(_objectSpread({}, _sharedMessages.default.copyright), {}, {
+      values: {
+        year: new Date().getFullYear()
+      }
+    })
   }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Text.default, {
     message: _sharedMessages.default.allRightsReserved
   })));

package/dist/components/AppFrame/AppFrame.js

@@ -165,7 +165,17 @@ var AppFrame = function AppFrame(_ref) {
   }, [needLogin]);
   (0, _react.useEffect)(function () {
     document.title = (currentApplication == null ? void 0 : currentApplication.displayName) || applicationId;
-  }, [currentApplication, applicationId]);
+  }, [currentApplication, applicationId]); // Extract only what's needed for the SideBar and its menuItems
+
+  var menuItemFromModules = (0, _react.useMemo)(function () {
+    return (modules != null ? modules : []).map(function (item) {
+      return {
+        id: item.id,
+        label: item.label,
+        icon: item.icon
+      };
+    });
+  }, [modules]);
 
   var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
       _useViewState2 = _slicedToArray(_useViewState, 1),
@@ -191,7 +201,7 @@ var AppFrame = function AppFrame(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Sidebar.default, {
     open: open,
     toggle: toggle,
-    modules: modules,
+    modules: menuItemFromModules,
     activeModules: activeModules
   }), /*#__PURE__*/_react.default.createElement(ViewPort, {
     open: open,
@@ -201,11 +211,11 @@ var AppFrame = function AppFrame(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_loadingScreen.default, null), /*#__PURE__*/_react.default.createElement(_Preferences.default, null));
 };
 
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseViewState{[prefViewState]}", function () {
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
   return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
 });
 
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseViewState{[prefViewState]}", function () {
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
   return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
 });
 

package/dist/components/AppFrame/MenuItem.js

@@ -20,7 +20,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _templateObject;
 
 var _excluded = ["menuToggle", "staticContext", "dispatch", "active", "component"],
-    _excluded2 = ["open", "label", "icon", "alert", "pageScopeSelector", "closingTabHandler", "hide", "isHidden", "href"];
+    _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -134,9 +134,6 @@ var MenuItem = function MenuItem(_ref5) {
       label = _ref5$label === void 0 ? "" : _ref5$label,
       icon = _ref5.icon,
       alert = _ref5.alert,
-      pageScopeSelector = _ref5.pageScopeSelector,
-      closingTabHandler = _ref5.closingTabHandler,
-      hide = _ref5.hide,
       _ref5$isHidden = _ref5.isHidden,
       isHidden = _ref5$isHidden === void 0 ? false : _ref5$isHidden,
       href = _ref5.href,

package/dist/components/MaterialUI/Inputs/InputBase.js

@@ -29,6 +29,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   enterModule && enterModule(module);
 })();
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -159,11 +171,36 @@ var InputBase = function InputBase(_ref) {
 
   var onChangeHandler = function onChangeHandler(event) {
     event.persist();
-    update(event.target.value, metadata);
+
+    if (!event.target.value || window.bypassDebounce === true) {
+      update(event.target.value, metadata);
+    }
+
+    setInputText(event.target.value);
   };
 
   var inputBaseInputStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.input);
   var errorTextStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.errorText);
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inputText = _React$useState2[0],
+      setInputText = _React$useState2[1];
+
+  var textToDisplay = inputText != null ? inputText : value;
+
+  _react.default.useEffect(function () {
+    if (inputText !== value && inputText != null && window.bypassDebounce !== true) {
+      var timeOutId = setTimeout(function () {
+        return update(inputText, metadata);
+      }, 100);
+      return function () {
+        return clearTimeout(timeOutId);
+      };
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [inputText, value]);
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -182,7 +219,7 @@ var InputBase = function InputBase(_ref) {
     onClick: onClick,
     type: type,
     placeholder: placeholder,
-    value: value,
+    value: textToDisplay,
     fullWidth: true,
     onChange: function onChange(event) {
       return onChangeHandler(event);
@@ -201,11 +238,11 @@ var InputBase = function InputBase(_ref) {
   }, error));
 };
 
-__signature__(InputBase, "useStyles{classes}", function () {
+__signature__(InputBase, "useStyles{classes}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
   return [useStyles];
 });
 
-__signature__(InputBase, "useStyles{classes}", function () {
+__signature__(InputBase, "useStyles{classes}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
   return [useStyles];
 });
 

package/dist/components/MaterialUI/ScopeSelector/ScopeSelector.js

@@ -49,7 +49,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       backgroundColor: theme.palette.grey.light,
       border: "1px solid ".concat(theme.palette.grey.borders),
       boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
-      width: theme.spacing(50)
+      width: theme.spacing(50),
+      display: "flex"
+    },
+    scopeContainer: {
+      width: "100%"
     },
     scopeSelector: {
       display: "flex",
@@ -108,7 +112,9 @@ var ScopeSelector = function ScopeSelector(_ref) {
     onClickAway: function onClickAway(e) {
       return closeSelector(e);
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null, show ? scopeSelectorContent : null)));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.scopeContainer
+  }, show ? scopeSelectorContent : null)));
 
   return scopeSelector;
 };

package/dist/components/Routing/FullPage.js

@@ -35,8 +35,11 @@ var FullPage = function FullPage(_ref) {
       location = _ref.location,
       match = _ref.match,
       modulePrependPath = _ref.modulePrependPath,
-      isVisible = _ref.isVisible;
+      _ref$isVisible = _ref.isVisible,
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
   var component = config.component,
+      _config$routerCompone = config.routerComponent,
+      routerComponent = _config$routerCompone === void 0 ? null : _config$routerCompone,
       componentProps = config.componentProps,
       _config$pages = config.pages,
       pages = _config$pages === void 0 ? {} : _config$pages,
@@ -59,12 +62,12 @@ var FullPage = function FullPage(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_Page.default, {
     path: path,
-    component: component,
+    component: component != null ? component : routerComponent,
     pages: pages,
     subpages: subpages,
     location: location,
     match: match,
-    isVisible: isVisible,
+    isVisible: isVisible === true || routerComponent != null,
     modulePrependPath: modulePrependPath
   });
 };

package/dist/selectors/metadata.js

@@ -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/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/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.10",
+	"version": "1.2.0-dev.14",
 	"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/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/Inputs/InputBase.js

@@ -111,12 +111,29 @@ const InputBase = ({ inputProps }) => {
 
 	const onChangeHandler = event => {
 		event.persist();
-		update(event.target.value, metadata);
+
+		if (!event.target.value || window.bypassDebounce === true) {
+			update(event.target.value, metadata);
+		}
+
+		setInputText(event.target.value);
 	};
 
 	const inputBaseInputStyle = inputProps?.getStyle(InputBaseProps.ruleNames.input);
 	const errorTextStyle = inputProps?.getStyle(InputBaseProps.ruleNames.errorText);
 
+	const [inputText, setInputText] = React.useState(null);
+
+	const textToDisplay = inputText ?? value;
+
+	React.useEffect(() => {
+		if (inputText !== value && inputText != null && window.bypassDebounce !== true) {
+			const timeOutId = setTimeout(() => update(inputText, metadata), 100);
+			return () => clearTimeout(timeOutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [inputText, value]);
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
@@ -133,7 +150,7 @@ const InputBase = ({ inputProps }) => {
 					onClick={onClick}
 					type={type}
 					placeholder={placeholder}
-					value={value}
+					value={textToDisplay}
 					fullWidth={true}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}