@commercetools-frontend/application-shell 22.5.0 → 22.6.0

package/dist/{index-53b461f0.cjs.prod.js → index-0bfb96a9.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var configureApollo = require('./configure-apollo-235efa51.cjs.prod.js');
+var configureApollo = require('./configure-apollo-f632e6cf.cjs.prod.js');
 var _pt = require('prop-types');
 var react = require('react');
 var reactRouterDom = require('react-router-dom');
@@ -24,7 +24,7 @@ var constants$1 = require('@commercetools-frontend/constants');
 var i18n = require('@commercetools-frontend/i18n');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var sentry = require('@commercetools-frontend/sentry');
-var constants = require('./constants-4408614d.cjs.prod.js');
+var constants = require('./constants-ed10e935.cjs.prod.js');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -73,7 +73,7 @@ var ldAdapter = require('@flopflip/launchdarkly-adapter');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 var reactRedux = require('react-redux');
 var upperFirst = require('lodash/upperFirst');
-var oidc = require('./oidc-3a2cf8b3.cjs.prod.js');
+var oidc = require('./oidc-a780f067.cjs.prod.js');
 require('@commercetools-uikit/design-system/materials/resets.css');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
@@ -125,7 +125,7 @@ var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-4d55dd23.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-ecde7bbe.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -283,11 +283,11 @@ function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default["d
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var ProjectsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchUserProjects" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }], loc: { start: 0, end: 218, source: { body: "query FetchUserProjects {\n  user: me {\n    id\n    projects {\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
-var _ref3$1 = {
+var _ref3 = {
   name: "82a6rk",
   styles: "flex:1"
 } ;
-var _ref4$1 = {
+var _ref4 = {
   name: "zol16h",
   styles: "display:flex;flex:1;align-items:center"
 } ;
@@ -295,9 +295,9 @@ const ProjectSwitcherValueContainer = _ref5 => {
   let projectCount = _ref5.projectCount,
     restProps = _objectWithoutProperties(_ref5, _excluded$1);
   return jsxRuntime.jsxs("div", {
-    css: _ref4$1,
+    css: _ref4,
     children: [jsxRuntime.jsx("div", {
-      css: _ref3$1,
+      css: _ref3,
       children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
         children: restProps.children
       }))
@@ -409,7 +409,7 @@ ProjectSwitcher.displayName = 'ProjectSwitcher';
 // eslint-disable-next-line import/prefer-default-export
 const REQUESTS_IN_FLIGHT_LOADER_DOM_ID = 'loader-for-requests-in-flight';
 
-const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-d5d5dba3.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
+const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-6a7b4699.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
 
 var _ref$1 = {
   name: "36bnqj",
@@ -600,7 +600,7 @@ FetchUser.propTypes = {
 };
 FetchUser.displayName = 'FetchUser';
 
-const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-766fb0fd.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-c548a201.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
 const _excluded = ["icon"];
 function ownKeys$7(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; }
@@ -991,7 +991,7 @@ const LoadingNavBar = () => {
 };
 LoadingNavBar.displayName = 'LoadingNavBar';
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-5c3c1313.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-17d86e50.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -1103,7 +1103,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-567cd0e8.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-8e4e90a0.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -1190,7 +1190,7 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-cc82cee3.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-54a2fc06.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
 
 const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-2266c427.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
@@ -1213,7 +1213,10 @@ const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().
  *   them to off until fetched).
  */
 
-const FLAGS = {};
+const MAIN_NAVIGATION = 'newMainNavigationBar';
+const FLAGS = {
+  [MAIN_NAVIGATION]: false
+};
 
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -1338,7 +1341,13 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-b4681839.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-16b5844a.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+
+// TODO: Remove this file once the new navigation is enabled for all users
+const NewMainNavigationFlagWrapper = props => {
+  const isNewNavigationEnabled = reactBroadcast.useFeatureToggle(MAIN_NAVIGATION);
+  return props.children(isNewNavigationEnabled);
+};
 
 function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -1351,10 +1360,7 @@ const getHasUserBeenDeletedError = graphQLErrors => _findInstanceProperty__defau
 });
 const MainContainer = /*#__PURE__*/_styled__default["default"]("main", {
   target: "esrtekc0"
-} )({
-  name: "1rdshd",
-  styles: "grid-column:2;grid-row:3;min-width:0;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column;position:relative"
-} );
+} )(props => props.isNewNavigationEnabled ? "\n        grid-column: 2/3;\n        grid-row: 3/4;\n      " : "\n        grid-column: 2;\n        grid-row: 3;\n      ", ";min-width:0;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column;position:relative;" + ("" ));
 
 /**
  * This component is rendered whenever the user is considered "authenticated"
@@ -1365,14 +1371,6 @@ var _ref = {
   styles: "flex-grow:1;display:flex;flex-direction:column;position:relative;>*:not(:first-of-type){flex-grow:1;display:flex;flex-direction:column;}"
 } ;
 var _ref2 = {
-  name: "14w5yo3",
-  styles: "position:relative;grid-row:3;display:flex;flex-direction:column"
-} ;
-var _ref3 = {
-  name: "fqjitq",
-  styles: "grid-row:2;grid-column:1/3"
-} ;
-var _ref4 = {
   name: "8bdwu0",
   styles: "grid-row:1;grid-column:1/3"
 } ;
@@ -1391,10 +1389,10 @@ const ApplicationShellAuthenticated = props => {
     notificationsPageRef
   });
   return jsxRuntime.jsx(FetchUser, {
-    children: _ref5 => {
-      let isLoadingUser = _ref5.isLoading,
-        user = _ref5.user,
-        error = _ref5.error;
+    children: _ref3 => {
+      let isLoadingUser = _ref3.isLoading,
+        user = _ref3.user,
+        error = _ref3.error;
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
         if (error.graphQLErrors && _Array$isArray__default["default"](error.graphQLErrors)) {
@@ -1414,9 +1412,9 @@ const ApplicationShellAuthenticated = props => {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: _ref6 => {
-            let locale = _ref6.locale,
-              messages = _ref6.messages;
+          children: _ref4 => {
+            let locale = _ref4.locale,
+              messages = _ref4.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -1433,10 +1431,10 @@ const ApplicationShellAuthenticated = props => {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: _ref7 => {
-            let isLoadingLocaleData = _ref7.isLoading,
-              locale = _ref7.locale,
-              messages = _ref7.messages;
+          children: _ref5 => {
+            let isLoadingLocaleData = _ref5.isLoading,
+              locale = _ref5.locale,
+              messages = _ref5.messages;
             return jsxRuntime.jsx(ConfigureIntlProvider
             // We do not want to pass the language as long as the locale data
             // is not loaded.
@@ -1450,180 +1448,186 @@ const ApplicationShellAuthenticated = props => {
                 ldClientSideId: applicationEnvironment.ldClientSideId,
                 flags: props.featureFlags,
                 defaultFlags: props.defaultFeatureFlags,
-                children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [jsxRuntime.jsx(ThemeSwitcher, {}), jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
-                    user: user !== null && user !== void 0 ? user : undefined
-                  }), jsxRuntime.jsxs("div", {
-                    css: /*#__PURE__*/react$1.css("height:100vh;display:grid;grid-template-rows:auto ", constants.DIMENSIONS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
-                    children: [jsxRuntime.jsxs("div", {
-                      ref: notificationsGlobalRef,
-                      role: "region",
-                      "aria-live": "polite",
-                      css: _ref4,
-                      children: [jsxRuntime.jsx("div", {
-                        id: "above-top-navigation"
-                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.GLOBAL
-                      })]
-                    }), jsxRuntime.jsx(reactRouterDom.Route, {
-                      children: () => {
-                        if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
-                        return jsxRuntime.jsx(FetchProject, {
-                          projectKey: projectKeyFromUrl,
-                          children: _ref8 => {
-                            let isProjectLoading = _ref8.isLoading,
-                              project = _ref8.project;
-                            if (isProjectLoading || !project) return null;
-
-                            // when used outside of a project context,
-                            // or when the project is expired or supsended
-                            const shouldUseProjectContext = !(project.suspension && project.suspension.isActive || project.expiry && project.expiry.isActive);
-                            if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
-                            return jsxRuntime.jsx(ProjectDataLocale, {
-                              locales: project.languages,
-                              children: _ref9 => {
-                                let dataLocale = _ref9.locale,
-                                  setProjectDataLocale = _ref9.setProjectDataLocale;
+                children: jsxRuntime.jsx(NewMainNavigationFlagWrapper, {
+                  children: isNewNavigationEnabled => {
+                    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      children: [jsxRuntime.jsx(ThemeSwitcher, {}), jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
+                        user: user !== null && user !== void 0 ? user : undefined
+                      }), jsxRuntime.jsxs("div", {
+                        css: /*#__PURE__*/react$1.css("height:100vh;display:grid;grid-template-rows:", isNewNavigationEnabled ? "auto ".concat(constants.DIMENSIONS.header, " 1fr") : "auto ".concat(constants.DIMENSIONS.header, " 1fr"), ";grid-template-columns:", isNewNavigationEnabled ? 'minmax(80px, 256px) 1fr' : 'auto 1fr', ";" + ("" ), "" ),
+                        children: [jsxRuntime.jsxs("div", {
+                          ref: notificationsGlobalRef,
+                          role: "region",
+                          "aria-live": "polite",
+                          css: _ref2,
+                          children: [jsxRuntime.jsx("div", {
+                            id: "above-top-navigation"
+                          }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                            domain: constants$1.DOMAINS.GLOBAL
+                          })]
+                        }), jsxRuntime.jsx(reactRouterDom.Route, {
+                          children: () => {
+                            if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
+                            return jsxRuntime.jsx(FetchProject, {
+                              projectKey: projectKeyFromUrl,
+                              children: _ref6 => {
+                                let isProjectLoading = _ref6.isLoading,
+                                  project = _ref6.project;
+                                if (isProjectLoading || !project) return null;
+
+                                // when used outside of a project context,
+                                // or when the project is expired or supsended
+                                const shouldUseProjectContext = !(project.suspension && project.suspension.isActive || project.expiry && project.expiry.isActive);
+                                if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
+                                return jsxRuntime.jsx(ProjectDataLocale, {
+                                  locales: project.languages,
+                                  children: _ref7 => {
+                                    let dataLocale = _ref7.locale,
+                                      setProjectDataLocale = _ref7.setProjectDataLocale;
+                                    return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                                      user: user,
+                                      project: project,
+                                      projectDataLocale: dataLocale,
+                                      environment: applicationEnvironment,
+                                      children: jsxRuntime.jsx(QuickAccessTrigger, {
+                                        onChangeProjectDataLocale: setProjectDataLocale
+                                      })
+                                    });
+                                  }
+                                });
+                              }
+                            });
+                          }
+                        }), jsxRuntime.jsx("header", {
+                          css: /*#__PURE__*/react$1.css("grid-row:", isNewNavigationEnabled ? '2/3' : '2', ";grid-column:", isNewNavigationEnabled ? '2/3' : '1/3', ";" + ("" ), "" ),
+                          children: jsxRuntime.jsx(AppBar, {
+                            user: user,
+                            projectKeyFromUrl: projectKeyFromUrl
+                          })
+                        }), jsxRuntime.jsx("aside", {
+                          css: /*#__PURE__*/react$1.css(isNewNavigationEnabled === false && "position: relative;\n                                    grid-row: 3;\n                                    display: flex;\n                                    flex-direction: column;", " ", isNewNavigationEnabled === true && "grid-column: 1/2;\n                                    grid-row: 2/4;\n                                    background-color: beige;", ";" + ("" ), "" ),
+                          children: (() => {
+                            // The <NavBar> should only be rendered within a project
+                            // context, therefore when there is a `projectKey`.
+                            // If there is no `projectKey` in the URL (e.g. `/account`
+                            // routes), we don't render it.
+                            // NOTE: we also "cache" the `projectKey` in localStorage
+                            // but this should only be used to "re-hydrate" the URL
+                            // location (e.g when you go to `/`, there should be a
+                            // redirect to `/:projectKey`). Therefore, we should not
+                            // rely on the value in localStorage to determine which
+                            // `projectKey` is currently used.
+                            if (!projectKeyFromUrl) return null;
+                            return jsxRuntime.jsx(FetchProject, {
+                              projectKey: projectKeyFromUrl,
+                              children: _ref8 => {
+                                let isLoadingProject = _ref8.isLoading,
+                                  project = _ref8.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, {});
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
-                                  project: project,
-                                  projectDataLocale: dataLocale,
-                                  environment: applicationEnvironment,
-                                  children: jsxRuntime.jsx(QuickAccessTrigger, {
-                                    onChangeProjectDataLocale: setProjectDataLocale
+                                  environment: applicationEnvironment
+                                  // NOTE: do not pass the `project` into the application context.
+                                  // The permissions for the Navbar are resolved separately, within
+                                  // a different React context.
+                                  ,
+                                  children: isNewNavigationEnabled === false && jsxRuntime.jsx(Navbar, {
+                                    applicationLocale: locale,
+                                    projectKey: projectKeyFromUrl,
+                                    project: project,
+                                    environment: applicationEnvironment,
+                                    onMenuItemClick: props.onMenuItemClick
                                   })
                                 });
                               }
                             });
-                          }
-                        });
-                      }
-                    }), jsxRuntime.jsx("header", {
-                      css: _ref3,
-                      children: jsxRuntime.jsx(AppBar, {
-                        user: user,
-                        projectKeyFromUrl: projectKeyFromUrl
-                      })
-                    }), jsxRuntime.jsx("aside", {
-                      css: _ref2,
-                      children: (() => {
-                        // The <NavBar> should only be rendered within a project
-                        // context, therefore when there is a `projectKey`.
-                        // If there is no `projectKey` in the URL (e.g. `/account`
-                        // routes), we don't render it.
-                        // NOTE: we also "cache" the `projectKey` in localStorage
-                        // but this should only be used to "re-hydrate" the URL
-                        // location (e.g when you go to `/`, there should be a
-                        // redirect to `/:projectKey`). Therefore, we should not
-                        // rely on the value in localStorage to determine which
-                        // `projectKey` is currently used.
-                        if (!projectKeyFromUrl) return null;
-                        return jsxRuntime.jsx(FetchProject, {
-                          projectKey: projectKeyFromUrl,
-                          children: _ref10 => {
-                            let isLoadingProject = _ref10.isLoading,
-                              project = _ref10.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, {});
-                            return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
-                              user: user,
-                              environment: applicationEnvironment
-                              // NOTE: do not pass the `project` into the application context.
-                              // The permissions for the Navbar are resolved separately, within
-                              // a different React context.
-                              ,
-                              children: jsxRuntime.jsx(Navbar, {
-                                applicationLocale: locale,
-                                projectKey: projectKeyFromUrl,
-                                project: project,
-                                environment: applicationEnvironment,
-                                onMenuItemClick: props.onMenuItemClick
-                              })
-                            });
-                          }
-                        });
-                      })()
-                    }), isLoadingUser || isLoadingLocaleData ? jsxRuntime.jsx(MainContainer, {
-                      role: "main",
-                      children: jsxRuntime.jsx(ApplicationLoader, {})
-                    }) : jsxRuntime.jsxs(MainContainer, {
-                      role: "main",
-                      children: [jsxRuntime.jsx("div", {
-                        ref: notificationsPageRef,
-                        children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                          domain: constants$1.DOMAINS.PAGE
-                        })
-                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.SIDE
-                      }), jsxRuntime.jsxs("div", {
-                        css: _ref,
-                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
-                        // @ts-ignore
-                        , {
-                          ref: layoutRefs,
-                          offsetTop: constants.DIMENSIONS.header,
-                          offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
-                          offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
-                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
-                          children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
-                            from: "/profile",
-                            to: "/account/profile"
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            path: "/account",
-                            children:
-                            /**
-                             * In case the AppShell uses the `render` function, we assume it's one of two cases:
-                             * 1. The application does not use `children` and therefore implements the routes including
-                             * the <RouteCatchAll> (this is the "legacy" behavior).
-                             * 2. It's the account application, which always uses `render` and therefore should render as normal.
-                             *
-                             * In case the AppShell uses the `children` function, we can always assume that
-                             * it's a normal Custom Application and that it should trigger a force reload.
-                             */
-                            props.render ? jsxRuntime.jsx(jsxRuntime.Fragment, {
-                              children: props.render()
-                            }) : jsxRuntime.jsx(configureApollo.RouteCatchAll, {})
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            exact: true,
-                            path: "/",
-                            children: (() => {
-                              var _user$defaultProjectK;
-                              const previousProjectKey = getPreviousProjectKey((_user$defaultProjectK = user === null || user === void 0 ? void 0 : user.defaultProjectKey) !== null && _user$defaultProjectK !== void 0 ? _user$defaultProjectK : undefined);
-
-                              /**
-                               * NOTE:
-                               *   Given the user has not been loaded a loading spinner is shown.
-                               *   Given the user was not working on a project previously nor has a default
-                               *   project, the user will be prompted to create one.
-                               *   Given the user was working on a project previously or has a default
-                               *   project, the application will redirect to that project.
-                               */
-                              if (!user) return jsxRuntime.jsx(ApplicationLoader, {});
-                              if (!previousProjectKey) return jsxRuntime.jsx(RedirectToProjectCreate, {});
-                              return jsxRuntime.jsx(reactRouterDom.Redirect, {
-                                to: "/".concat(previousProjectKey)
-                              });
-                            })()
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            exact: false,
-                            path: "/:projectKey",
-                            children: jsxRuntime.jsx(ProjectContainer, {
-                              user: user,
-                              environment: applicationEnvironment,
-                              disableRoutePermissionCheck: props.disableRoutePermissionCheck
-                              // This effectively renders the
-                              // children, which is the application
-                              // specific part
-                              ,
-                              render: props.render,
-                              children: props.children
+                          })()
+                        }), isLoadingUser || isLoadingLocaleData ? jsxRuntime.jsx(MainContainer, {
+                          isNewNavigationEnabled: isNewNavigationEnabled,
+                          role: "main",
+                          children: jsxRuntime.jsx(ApplicationLoader, {})
+                        }) : jsxRuntime.jsxs(MainContainer, {
+                          isNewNavigationEnabled: isNewNavigationEnabled,
+                          role: "main",
+                          children: [jsxRuntime.jsx("div", {
+                            ref: notificationsPageRef,
+                            children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                              domain: constants$1.DOMAINS.PAGE
                             })
+                          }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                            domain: constants$1.DOMAINS.SIDE
+                          }), jsxRuntime.jsxs("div", {
+                            css: _ref,
+                            children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+                            // @ts-ignore
+                            , {
+                              ref: layoutRefs,
+                              offsetTop: constants.DIMENSIONS.header,
+                              offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
+                              offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
+                            }), jsxRuntime.jsxs(reactRouterDom.Switch, {
+                              children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
+                                from: "/profile",
+                                to: "/account/profile"
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                path: "/account",
+                                children:
+                                /**
+                                 * In case the AppShell uses the `render` function, we assume it's one of two cases:
+                                 * 1. The application does not use `children` and therefore implements the routes including
+                                 * the <RouteCatchAll> (this is the "legacy" behavior).
+                                 * 2. It's the account application, which always uses `render` and therefore should render as normal.
+                                 *
+                                 * In case the AppShell uses the `children` function, we can always assume that
+                                 * it's a normal Custom Application and that it should trigger a force reload.
+                                 */
+                                props.render ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+                                  children: props.render()
+                                }) : jsxRuntime.jsx(configureApollo.RouteCatchAll, {})
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                exact: true,
+                                path: "/",
+                                children: (() => {
+                                  var _user$defaultProjectK;
+                                  const previousProjectKey = getPreviousProjectKey((_user$defaultProjectK = user === null || user === void 0 ? void 0 : user.defaultProjectKey) !== null && _user$defaultProjectK !== void 0 ? _user$defaultProjectK : undefined);
+
+                                  /**
+                                   * NOTE:
+                                   *   Given the user has not been loaded a loading spinner is shown.
+                                   *   Given the user was not working on a project previously nor has a default
+                                   *   project, the user will be prompted to create one.
+                                   *   Given the user was working on a project previously or has a default
+                                   *   project, the application will redirect to that project.
+                                   */
+                                  if (!user) return jsxRuntime.jsx(ApplicationLoader, {});
+                                  if (!previousProjectKey) return jsxRuntime.jsx(RedirectToProjectCreate, {});
+                                  return jsxRuntime.jsx(reactRouterDom.Redirect, {
+                                    to: "/".concat(previousProjectKey)
+                                  });
+                                })()
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                exact: false,
+                                path: "/:projectKey",
+                                children: jsxRuntime.jsx(ProjectContainer, {
+                                  user: user,
+                                  environment: applicationEnvironment,
+                                  disableRoutePermissionCheck: props.disableRoutePermissionCheck
+                                  // This effectively renders the
+                                  // children, which is the application
+                                  // specific part
+                                  ,
+                                  render: props.render,
+                                  children: props.children
+                                })
+                              })]
+                            })]
                           })]
                         })]
                       })]
-                    })]
-                  })]
+                    });
+                  }
                 })
               })
             }));
@@ -1809,7 +1813,7 @@ const hasCachedAuthenticationState = () => {
   return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
-const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-d31b1579.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-e0687f34.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
 
 function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -1959,7 +1963,7 @@ const ApplicationShellProvider = props => {
 ApplicationShellProvider.propTypes = {};
 ApplicationShellProvider.displayName = 'ApplicationShellProvider';
 
-const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-5710f920.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-7cb94c3e.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
 
 const styles = {
   name: "1prreal",