@commercetools-frontend/application-shell 21.3.2 → 21.3.3

package/dist/{index-655dc306.cjs.prod.js → index-76ebb56d.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-f21c8316.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-0178aabe.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,8 +24,8 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
+var constants = require('./constants-90b58549.cjs.prod.js');
 var uuid = require('uuid');
-var constants = require('./constants-745aeeca.cjs.prod.js');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
@@ -38,7 +38,7 @@ var reactRedux = require('react-redux');
 var history = require('@commercetools-frontend/browser-history');
 var reactIntl = require('react-intl');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
-var oidc = require('./oidc-69515812.cjs.prod.js');
+var oidc = require('./oidc-8ad956b5.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
@@ -1406,7 +1406,7 @@ FetchProject.displayName = 'FetchProject';
 
 function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$9(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$9(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "shouldRenderDivider" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 849, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      shouldRenderDivider\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
 var defaultApiUrl$1 = window.location.origin;
@@ -1471,19 +1471,12 @@ var mapApplicationMenuConfigToGraqhQLQueryResult = function mapApplicationMenuCo
         // @ts-ignore: not defined in schema, as it's only used internally.
         dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
         submenu: _mapInstanceProperty__default["default"](_context = menuLinks.submenuLinks).call(_context, function (submenuLink) {
-          var _context2, _context3, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
 
           return {
             __typename: 'BaseMenu',
             key: _concatInstanceProperty__default["default"](_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
-            // The `uriPath` of each submenu link is supposed to be defined relative
-            // to the entry point URI path.
-            // However, when rendering the link, we need to provide the full uri path.
-            // Special case when the value is `/`: it means that the link is supposed to be
-            // treated the same as the entry point uri path. In this case, the return value
-            // should not contain any unnecessary trailing slash and therefore we return the
-            // main value `entryPointUriPath`.
-            uriPath: submenuLink.uriPath === '/' ? entryPointUriPath : _concatInstanceProperty__default["default"](_context3 = "".concat(entryPointUriPath, "/")).call(_context3, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
             labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
             permissions: submenuLink.permissions,
             // @ts-ignore: not defined in schema, as it's only used internally.
@@ -2183,7 +2176,7 @@ var AppBar = function AppBar(props) {
 
   var previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$2.css("box-shadow:", designSystem.customProperties.shadow1, ";min-height:43px;position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    css: /*#__PURE__*/react$2.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow1, ";min-height:", constants.HEIGHTS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
     "data-test": "top-navigation",
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       children: [jsxRuntime.jsx("div", {
@@ -2237,7 +2230,7 @@ var AppBar = function AppBar(props) {
             });
           }()]
         }), jsxRuntime.jsx("div", {
-          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:43px;" + ("" ), "" )
+          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:", constants.HEIGHTS.header, ";" + ("" ), "" )
         }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
           language: props.user.language,
           firstName: props.user.firstName,
@@ -2332,19 +2325,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-bff932dd.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-b3dc61be.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-78a70097.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-38ca65c4.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-64ac7587.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-0f274fc5.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2391,7 +2384,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-540da552.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-f5ab439d.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3606,7 +3599,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-1d4f2411.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-123514ab.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3911,11 +3904,6 @@ var _ref5 = {
   styles: "grid-row:1;grid-column:1/3"
 } ;
 
-var _ref6 = {
-  name: "1gbbf0w",
-  styles: "height:100vh;display:grid;grid-template-rows:auto 43px 1fr;grid-template-columns:auto 1fr"
-} ;
-
 var RestrictedApplication = function RestrictedApplication(props) {
   var applicationEnvironment = applicationShellConnectors.useApplicationContext(function (context) {
     return context.environment;
@@ -3927,10 +3915,10 @@ var RestrictedApplication = function RestrictedApplication(props) {
 
   var location = reactRouterDom.useLocation();
   return jsxRuntime.jsx(FetchUser, {
-    children: function children(_ref7) {
-      var isLoadingUser = _ref7.isLoading,
-          user = _ref7.user,
-          error = _ref7.error;
+    children: function children(_ref6) {
+      var isLoadingUser = _ref6.isLoading,
+          user = _ref6.user,
+          error = _ref6.error;
 
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
@@ -3953,9 +3941,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref8) {
-            var locale = _ref8.locale,
-                messages = _ref8.messages;
+          children: function children(_ref7) {
+            var locale = _ref7.locale,
+                messages = _ref7.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -3973,12 +3961,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref9) {
+          children: function children(_ref8) {
             var _user$businessRole;
 
-            var isLoadingLocaleData = _ref9.isLoading,
-                locale = _ref9.locale,
-                messages = _ref9.messages;
+            var isLoadingLocaleData = _ref8.isLoading,
+                locale = _ref8.locale,
+                messages = _ref8.messages;
             return jsxRuntime.jsx(ConfigureIntlProvider // We do not want to pass the language as long as the locale data
             // is not loaded.
             , _objectSpread(_objectSpread({}, isLoadingLocaleData ? {} : {
@@ -4002,7 +3990,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     userBusinessRole: (_user$businessRole = user === null || user === void 0 ? void 0 : user.businessRole) !== null && _user$businessRole !== void 0 ? _user$businessRole : undefined
                   }), jsxRuntime.jsxs("div", {
                     role: "application-layout",
-                    css: _ref6,
+                    css: /*#__PURE__*/react$2.css("height:100vh;display:grid;grid-template-rows:auto ", constants.HEIGHTS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
                     children: [jsxRuntime.jsx("div", {
                       role: "global-notifications",
                       css: _ref5,
@@ -4014,9 +4002,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref10) {
-                            var isProjectLoading = _ref10.isLoading,
-                                project = _ref10.project;
+                          children: function children(_ref9) {
+                            var isProjectLoading = _ref9.isLoading,
+                                project = _ref9.project;
                             if (isProjectLoading || !project) return null; // when used outside of a project context,
                             // or when the project is expired or supsended
 
@@ -4024,9 +4012,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                             if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
                             return jsxRuntime.jsx(ProjectDataLocale, {
                               locales: project.languages,
-                              children: function children(_ref11) {
-                                var dataLocale = _ref11.locale,
-                                    setProjectDataLocale = _ref11.setProjectDataLocale;
+                              children: function children(_ref10) {
+                                var dataLocale = _ref10.locale,
+                                    setProjectDataLocale = _ref10.setProjectDataLocale;
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
                                   project: project,
@@ -4065,9 +4053,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return null;
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref12) {
-                            var isLoadingProject = _ref12.isLoading,
-                                project = _ref12.project;
+                          children: function children(_ref11) {
+                            var isLoadingProject = _ref11.isLoading,
+                                project = _ref11.project;
                             // Render the loading navbar as long as all the data
                             // hasn't been loaded, or if the project does not exist.
                             if (isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project) return jsxRuntime.jsx(LoadingNavBar, {});
@@ -4099,7 +4087,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         domain: constants$1.DOMAINS.SIDE
                       }), jsxRuntime.jsxs("div", {
                         css: _ref2,
-                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {}), jsxRuntime.jsxs(reactRouterDom.Switch, {
+                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {
+                          offsetTop: constants.HEIGHTS.header
+                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
                           children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
                             from: "/profile",
                             to: "/account/profile"
@@ -4174,8 +4164,8 @@ var RestrictedApplication = function RestrictedApplication(props) {
 RestrictedApplication.displayName = 'RestrictedApplication';
 
 var _ref = {
-  name: "jq7s6j",
-  styles: "#app{height:100%;}.ReactModal__Body--open main{overflow:hidden;}"
+  name: "172jsbd",
+  styles: "#app{height:100%;}"
 } ;
 
 var ApplicationShell = function ApplicationShell(props) {
@@ -4195,8 +4185,8 @@ var ApplicationShell = function ApplicationShell(props) {
       environment: props.environment,
       trackingEventList: props.trackingEventList,
       applicationMessages: props.applicationMessages,
-      children: function children(_ref13) {
-        var isAuthenticated = _ref13.isAuthenticated;
+      children: function children(_ref12) {
+        var isAuthenticated = _ref12.isAuthenticated;
 
         if (isAuthenticated) {
           return jsxRuntime.jsxs(reactRouterDom.Switch, {