@commercetools-frontend/application-shell 22.14.2 → 22.15.0

package/dist/{index-a7493b61.cjs.prod.js → index-08c8fcb3.cjs.prod.js}

@@ -112,9 +112,9 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
 // NOTE: This string will be replaced on build time with the package version.
-var applicationShellVersion = "22.14.2";
+var applicationShellVersion = "22.15.0";
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-2f004196.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-f584e80c.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -319,6 +319,10 @@ const CustomMenuList = props => {
     }))
   });
 };
+const Control = props => jsxRuntime.jsx(reactSelect.components.Control, _objectSpread$8(_objectSpread$8({}, props), {}, {
+  css: /*#__PURE__*/react$1.css("min-width:", designSystem.designTokens.constraint3, ";" + ("" ), "" ),
+  children: props.children
+}));
 const redirectTo = targetUrl => useIsServedByProxy.location.replace(targetUrl);
 const ProjectSwitcher = props => {
   const intl = reactIntl.useIntl();
@@ -363,7 +367,8 @@ const ProjectSwitcher = props => {
       components: {
         Option: ProjectSwitcherOption,
         ValueContainer,
-        MenuList: CustomMenuList
+        MenuList: CustomMenuList,
+        Control
       },
       isClearable: false,
       backspaceRemovesValue: false,
@@ -559,9 +564,9 @@ FetchUser.propTypes = {
 };
 FetchUser.displayName = 'FetchUser';
 
-const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-be902d73.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-d60f807a.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-9cfe3aa6.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-e657827e.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -673,7 +678,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-cffc290d.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-c9f75955.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -760,9 +765,9 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-22708e37.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-cdcb00b1.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" */); }));
+const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-c962f72f.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
 function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -886,7 +891,7 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-a3a9dd53.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-a3eb5a8e.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
 
 function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1355,7 +1360,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-b397bd00.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-f70d9fd1.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1505,7 +1510,7 @@ const ApplicationShellProvider = props => {
 ApplicationShellProvider.propTypes = {};
 ApplicationShellProvider.displayName = 'ApplicationShellProvider';
 
-const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-573b012a.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-e4f2ca07.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
 
 const styles = {
   name: "1prreal",
@@ -1571,6 +1576,8 @@ ApplicationShell.propTypes = {};
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = applicationShellVersion;
 
+const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-714c9d65.cjs.prod.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+
 function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const CustomViewWithPermissionCheck = props => {
@@ -1678,6 +1685,9 @@ function NotificationsContainer(props) {
   });
 }
 NotificationsContainer.propTypes = {};
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e8xye0r0"
+} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
 function StrictModeEnablement(props) {
   if (props.enableReactStrictMode) {
     return jsxRuntime.jsx(react.StrictMode, {
@@ -1689,8 +1699,16 @@ function StrictModeEnablement(props) {
     });
   }
 }
+
+/*
+  During e2e tests, the Custom View template is built in production mode but still runs on localhost.
+  Checking for local production mode is necessary for applying the development host URL,
+  creating an environment for testing interaction with the Custom View template.
+*/
 StrictModeEnablement.propTypes = {};
+const isLocalProdMode = window.app.env === 'development';
 function CustomViewShell(props) {
+  var _window$app$__DEVELOP;
   const _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     hostContext = _useState2[0],
@@ -1711,6 +1729,16 @@ function CustomViewShell(props) {
       });
     }
   }, []);
+  const handleClose = react.useCallback(() => {
+    var _iFrameCommunicationP, _context;
+    (_iFrameCommunicationP = iFrameCommunicationPort.current) === null || _iFrameCommunicationP === void 0 || _iFrameCommunicationP.postMessage({
+      origin: window.location.origin,
+      source: _concatInstanceProperty__default["default"](_context = "".concat(constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX)).call(_context, hostContext === null || hostContext === void 0 ? void 0 : hostContext.customViewConfig.id),
+      destination: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_CLOSE,
+      eventData: {}
+    });
+  }, [hostContext === null || hostContext === void 0 ? void 0 : hostContext.customViewConfig.id]);
   react.useEffect(() => {
     const bootstrapMessageHandler = event => {
       if ((event.origin === window.location.origin ||
@@ -1735,8 +1763,8 @@ function CustomViewShell(props) {
   react.useEffect(() => {
     // Close the channel when the component unmounts
     return () => {
-      var _iFrameCommunicationP;
-      (_iFrameCommunicationP = iFrameCommunicationPort.current) === null || _iFrameCommunicationP === void 0 || _iFrameCommunicationP.close();
+      var _iFrameCommunicationP2;
+      (_iFrameCommunicationP2 = iFrameCommunicationPort.current) === null || _iFrameCommunicationP2 === void 0 || _iFrameCommunicationP2.close();
       iFrameCommunicationPort.current = undefined;
     };
   }, []);
@@ -1745,56 +1773,78 @@ function CustomViewShell(props) {
       showLogo: true
     });
   }
-  const hostUrl = hostContext.hostUrl;
-  return jsxRuntime.jsx(ApplicationShellProvider, {
-    environment: window.app,
-    applicationMessages: props.applicationMessages,
-    apolloClient: props.apolloClient,
-    children: _ref => {
-      let isAuthenticated = _ref.isAuthenticated;
-      if (isAuthenticated) {
-        var _context;
-        return jsxRuntime.jsx(applicationShellConnectors.CustomViewContextProvider, {
-          hostUrl: hostUrl,
-          customViewConfig: hostContext.customViewConfig,
-          children: jsxRuntime.jsxs(CustomViewShellAuthenticated, {
-            dataLocale: hostContext.dataLocale,
-            environment: window.app,
-            messages: props.applicationMessages,
-            projectKey: hostContext.projectKey,
+  const hostUrl = isLocalProdMode ? (_window$app$__DEVELOP = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP === void 0 ? void 0 : _window$app$__DEVELOP.customViewHostUrl : hostContext.hostUrl;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+      environment: window.app,
+      applicationMessages: props.applicationMessages,
+      apolloClient: props.apolloClient,
+      children: _ref => {
+        let isAuthenticated = _ref.isAuthenticated;
+        if (isAuthenticated) {
+          var _context2;
+          return jsxRuntime.jsx(applicationShellConnectors.CustomViewContextProvider, {
+            hostUrl: hostUrl,
             customViewConfig: hostContext.customViewConfig,
-            children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
-            // @ts-ignore
-            , {
-              ref: layoutRefs
-            }), jsxRuntime.jsx(NotificationsContainer, {
-              notificationsGlobalRef: notificationsGlobalRef,
-              notificationsPageRef: notificationsPageRef
-            }), jsxRuntime.jsx(reactRouterDom.Route, {
-              path: _concatInstanceProperty__default["default"](_context = "/custom-views/".concat(hostContext.customViewConfig.id, "/projects/")).call(_context, hostContext.projectKey),
-              children: props.children
-            })]
-          })
-        });
-      }
-      return jsxRuntime.jsx(i18n.AsyncLocaleData, {
-        locale: browserLocale,
-        applicationMessages: props.applicationMessages,
-        children: _ref2 => {
-          let locale = _ref2.locale,
-            messages = _ref2.messages;
-          return jsxRuntime.jsx(ConfigureIntlProvider, {
-            locale: locale,
-            messages: messages,
-            children: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+            children: jsxRuntime.jsxs(CustomViewShellAuthenticated, {
+              dataLocale: hostContext.dataLocale,
+              environment: window.app,
+              messages: props.applicationMessages,
+              projectKey: hostContext.projectKey,
+              customViewConfig: hostContext.customViewConfig,
+              children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+              // @ts-ignore
+              , {
+                ref: layoutRefs
+              }), jsxRuntime.jsx(NotificationsContainer, {
+                notificationsGlobalRef: notificationsGlobalRef,
+                notificationsPageRef: notificationsPageRef
+              }), jsxRuntime.jsxs(reactRouterDom.Route, {
+                path: _concatInstanceProperty__default["default"](_context2 = "/custom-views/".concat(hostContext.customViewConfig.id, "/projects/")).call(_context2, hostContext.projectKey),
+                children: [jsxRuntime.jsx(applicationComponents.ModalPageTopBar, {
+                  onClose: handleClose,
+                  hidePathLabel: true
+                }), jsxRuntime.jsx(ContentWrapper, {
+                  children: props.children
+                })]
+              })]
+            })
           });
         }
-      });
-    }
+        return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+          locale: browserLocale,
+          applicationMessages: props.applicationMessages,
+          children: _ref2 => {
+            let locale = _ref2.locale,
+              messages = _ref2.messages;
+            return jsxRuntime.jsx(ConfigureIntlProvider, {
+              locale: locale,
+              messages: messages,
+              children: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+            });
+          }
+        });
+      }
+    })]
   });
 }
 CustomViewShell.propTypes = {};
 const CustomViewShellWrapper = props => {
+  if ((isLocalProdMode) && !props.disableDevHost) {
+    return jsxRuntime.jsx(StrictModeEnablement, {
+      enableReactStrictMode: props.enableReactStrictMode,
+      children: jsxRuntime.jsx(react.Suspense, {
+        fallback: jsxRuntime.jsx(ApplicationLoader, {}),
+        children: jsxRuntime.jsx(CustomViewDevHost, {
+          applicationMessages: props.applicationMessages,
+          children: jsxRuntime.jsx(CustomViewShell, {
+            applicationMessages: props.applicationMessages,
+            children: props.children
+          })
+        })
+      })
+    });
+  }
   return jsxRuntime.jsx(StrictModeEnablement, {
     enableReactStrictMode: props.enableReactStrictMode,
     children: jsxRuntime.jsx(CustomViewShell, {
@@ -1844,7 +1894,7 @@ InjectReducers.propTypes = {
 InjectReducers.displayName = 'InjectReducers';
 InjectReducers.defaultProps = defaultProps;
 
-const errorMessageIgnoreList = [/ResizeObserver loop limit exceeded/i];
+const errorMessageIgnoreList = [/ResizeObserver loop (limit exceeded|completed with undelivered notifications)/i];
 
 // Ensure to initialize Sentry as soon as possible, so that we have the chance
 // of catching possible errors.