@atlaskit/smart-card 26.21.0 → 26.22.0

package/dist/es2019/state/hooks/use-invoke-client-action/index.js

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+import uuid from 'uuid';
+import * as measure from '../../../utils/performance';
+/**
+ * Invoke client action such as preview, download and open link
+ */
+const useInvokeClientAction = ({
+  analytics
+}) => useCallback(async ({
+  actionType,
+  actionFn,
+  extensionKey,
+  display
+}) => {
+  const experienceId = uuid();
+
+  // Begin performance instrumentation.
+  const markName = `${experienceId}-${actionType}`;
+  measure.mark(markName, 'pending');
+  try {
+    // Begin analytics instrumentation.
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+      id: experienceId,
+      extensionKey,
+      actionType,
+      display,
+      invokeType: 'client'
+    });
+
+    // Invoke action
+    const result = await actionFn();
+    measure.mark(markName, 'resolved');
+    analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
+      id: experienceId,
+      extensionKey,
+      actionType,
+      display
+    });
+    return result;
+  } catch (err) {
+    measure.mark(markName, 'errored');
+    const reason = typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message;
+    analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
+      id: experienceId,
+      extensionKey,
+      actionType,
+      display,
+      reason
+    });
+  }
+}, [analytics === null || analytics === void 0 ? void 0 : analytics.operational, analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
+export default useInvokeClientAction;

package/dist/es2019/state/hooks/use-invoke-client-action/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils/analytics/analytics.js

@@ -3,7 +3,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.21.0"
+  packageVersion: "26.22.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -103,9 +103,7 @@ export const invokeSucceededEvent = ({
   destinationSubproduct,
   location
 }) => {
-  const measure = getMeasure(id, 'resolved') || {
-    duration: undefined
-  };
+  const measure = id ? getMeasure(id, 'resolved') : undefined;
   return {
     action: 'resolved',
     actionSubject: 'smartLinkAction',
@@ -120,7 +118,7 @@ export const invokeSucceededEvent = ({
       destinationSubproduct,
       location,
       extensionKey,
-      duration: measure.duration
+      duration: measure === null || measure === void 0 ? void 0 : measure.duration
     }
   };
 };
@@ -135,9 +133,7 @@ export const invokeFailedEvent = ({
   destinationSubproduct,
   location
 }) => {
-  const measure = getMeasure(id, 'errored') || {
-    duration: undefined
-  };
+  const measure = id ? getMeasure(id, 'errored') : undefined;
   return {
     action: 'unresolved',
     actionSubject: 'smartLinkAction',
@@ -152,7 +148,7 @@ export const invokeFailedEvent = ({
       destinationProduct,
       destinationSubproduct,
       location,
-      duration: measure.duration,
+      duration: measure === null || measure === void 0 ? void 0 : measure.duration,
       reason
     }
   };

package/dist/es2019/utils/mocks.js

@@ -54,11 +54,12 @@ export const mocks = {
       name: 'I love cheese',
       summary: 'Here is your serving of cheese: 🧀',
       'schema:potentialAction': {
-        '@id': 'comment',
-        '@type': 'CommentAction',
+        '@id': 'download',
+        '@type': 'DownloadAction',
         identifier: 'object-provider',
-        name: 'Comment'
+        name: 'Download'
       },
+      'atlassian:downloadUrl': 'https://some-download.url',
       preview: {
         href: 'https://www.ilovecheese.com'
       },
@@ -207,12 +208,16 @@ export const fakeFactory = (implementation, implementationPost, implementationPr
 export const waitFor = (time = 1) => new Promise(res => setTimeout(res, time));
 export const mockAnalytics = {
   ui: {
+    actionClickedEvent: () => {},
     buttonClickedEvent: () => {},
     modalClosedEvent: () => {},
     renderSuccessEvent: () => {},
     renderFailedEvent: () => {}
   },
-  operational: {},
+  operational: {
+    invokeSucceededEvent: () => {},
+    invokeFailedEvent: () => {}
+  },
   track: {},
   screen: {
     modalViewedEvent: () => {}

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -1,46 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { FormattedMessage, IntlProvider } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
-/*
-  Explanatory note:
-  Actions don't have access to the react tree of whatever is rendered them
-  (and this concept is fraught inside editor anyway) so we want to ensure
-  it is mounting to a new unique place. This function manages that, including
-  creating an element if it doesn't exist, as well as tidying up the react tree
-  (but not the element) upon closing the modal.
-
-  This may strike you as really uncomfortable as you read it, so I wanted to note
-  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
-  you find an elegant solution around this, you should definitely feel free to
-  refactor it.
-*/
-export async function previewFunction({
-  popupMountPointId,
-  onClose,
-  ...rest
-}) {
-  let popupMountPoint;
-  popupMountPoint = document.getElementById(popupMountPointId);
-  if (!popupMountPoint) {
-    popupMountPoint = document.createElement('div');
-    popupMountPoint.id = popupMountPointId;
-    popupMountPoint.setAttribute('data-testid', 'preview-modal');
-    document.body.appendChild(popupMountPoint);
-  }
-  let Modal = await import('../../EmbedModal');
-  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
-    locale: "en"
-  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
-    onClose: context => {
-      if (popupMountPoint) {
-        onClose(context);
-        ReactDOM.unmountComponentAtNode(popupMountPoint);
-      }
-    }
-  }))), popupMountPoint);
-}
+import { openEmbedModal } from '../../EmbedModal/utils';
 
 /*
 Most of these are optional as we are being fault-tolerant
@@ -53,11 +14,9 @@ export default (({
 }) => ({
   id: 'preview-content',
   text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
-  promise: () => previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
+  promise: () => openEmbedModal({
     providerName: 'Preview',
     showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
     onClose: () => {},
     ...rest
   })

package/dist/es2019/view/BlockCard/components/Action.js

@@ -23,9 +23,9 @@ export const Action = ({
         setState('loading');
         promise().then(() => {
           setState('success');
-          setTimeout(() => setState('init'), spinnerDelay);
         }).catch(() => {
           setState('failure');
+        }).finally(() => {
           setTimeout(() => setState('init'), spinnerDelay);
         });
       }

package/dist/es2019/view/LinkUrl/index.js

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.21.0",
+  packageVersion: "26.22.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/state/actions/index.js

@@ -5,14 +5,16 @@ import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ACTION_UPDATE_METADATA_STATUS, cardAction, ACTION_RESOLVING } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getExtensionKey } from '../helpers';
-import * as measure from '../../utils/performance';
 import { SmartLinkStatus } from '../../constants';
 import useResolve from '../hooks/use-resolve';
+import useInvokeClientAction from '../hooks/use-invoke-client-action';
 export var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   var resolveUrl = useResolve();
+  var invokeClientAction = useInvokeClientAction({
+    analytics: analytics
+  });
   var _useSmartLinkContext = useSmartLinkContext(),
-    store = _useSmartLinkContext.store,
-    connections = _useSmartLinkContext.connections;
+    store = _useSmartLinkContext.store;
   var getState = store.getState,
     dispatch = store.dispatch;
   var getSmartLinkState = useCallback(function () {
@@ -142,70 +144,35 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
   }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
   var invoke = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(opts, appearance) {
-      var key, action, source, markName, response;
+      var key, action, source;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             key = opts.key, action = opts.action;
             source = opts.source || appearance;
-            markName = "".concat(id, "-").concat(action.type); // Begin performance instrumentation.
-            measure.mark(markName, 'pending');
-            _context2.prev = 4;
-            // Begin analytics instrumentation.
-            analytics.ui.actionClickedEvent({
-              id: id,
-              extensionKey: key,
-              actionType: action.type,
-              display: source,
-              invokeType: opts.type
-            });
-            // Invoke action - either client-side or server-side.
             if (!(opts.type === 'client')) {
-              _context2.next = 12;
+              _context2.next = 6;
               break;
             }
-            _context2.next = 9;
-            return opts.action.promise();
-          case 9:
-            response = _context2.sent;
-            _context2.next = 15;
-            break;
-          case 12:
-            _context2.next = 14;
-            return connections.client.postData(opts);
-          case 14:
-            response = _context2.sent;
-          case 15:
-            measure.mark(markName, 'resolved');
-            analytics.operational.invokeSucceededEvent({
-              id: id,
-              extensionKey: key,
-              actionType: action.type,
-              display: source
-            });
-            return _context2.abrupt("return", response);
-          case 20:
-            _context2.prev = 20;
-            _context2.t0 = _context2["catch"](4);
-            measure.mark(markName, 'errored');
-            analytics.operational.invokeFailedEvent({
-              id: id,
-              extensionKey: key,
+            _context2.next = 5;
+            return invokeClientAction({
+              actionFn: opts.action.promise,
               actionType: action.type,
               display: source,
-              reason: _context2.t0.message
+              extensionKey: key
             });
-            throw _context2.t0;
-          case 25:
+          case 5:
+            return _context2.abrupt("return", _context2.sent);
+          case 6:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[4, 20]]);
+      }, _callee2);
     }));
     return function (_x, _x2) {
       return _ref3.apply(this, arguments);
     };
-  }(), [id, analytics.ui, analytics.operational, connections.client]);
+  }(), [invokeClientAction]);
   return useMemo(function () {
     return {
       register: register,

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -251,24 +251,25 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @returns
        */
       actionClickedEvent: function actionClickedEvent(_ref6) {
-        var id = _ref6.id,
+        var experienceId = _ref6.id,
           actionType = _ref6.actionType,
           display = _ref6.display,
           invokeType = _ref6.invokeType,
-          extensionKey = _ref6.extensionKey,
+          overrideExtensionKey = _ref6.extensionKey,
           definitionId = _ref6.definitionId,
           resourceType = _ref6.resourceType,
           destinationProduct = _ref6.destinationProduct,
           destinationSubproduct = _ref6.destinationSubproduct,
           location = _ref6.location;
-        startUfoExperience('smart-link-action-invocation', id, {
+        var extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
+        startUfoExperience('smart-link-action-invocation', experienceId, {
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
           invokeType: invokeType
         });
         dispatchAnalytics(applyCommonAttributes(uiActionClickedEvent({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -513,7 +514,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
         return dispatchAnalytics(applyCommonAttributes(uiSmartLinkStatusOpenPreviewButtonClicked(), commonAttributes));
       }
     };
-  }, [defaultId, commonAttributes, dispatchAnalytics]);
+  }, [dispatchAnalytics, commonAttributes, defaultId, extractedExtensionKey]);
 
   /** Contains all operational analytics events */
   var operational = useMemo(function () {
@@ -526,7 +527,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
        */
       invokeSucceededEvent: function invokeSucceededEvent(_ref13) {
-        var id = _ref13.id,
+        var experienceId = _ref13.id,
           actionType = _ref13.actionType,
           display = _ref13.display,
           extensionKey = _ref13.extensionKey,
@@ -535,9 +536,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        succeedUfoExperience('smart-link-action-invocation', id);
+        succeedUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeSucceededEvent({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -557,7 +558,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @param reason The reason the invocation failed.
        */
       invokeFailedEvent: function invokeFailedEvent(_ref14) {
-        var id = _ref14.id,
+        var experienceId = _ref14.id,
           actionType = _ref14.actionType,
           display = _ref14.display,
           reason = _ref14.reason,
@@ -567,9 +568,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        failUfoExperience('smart-link-action-invocation', id);
+        failUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeFailedEvent({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

package/dist/esm/state/hooks/use-invoke-client-action/index.js

@@ -0,0 +1,67 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback } from 'react';
+import uuid from 'uuid';
+import * as measure from '../../../utils/performance';
+/**
+ * Invoke client action such as preview, download and open link
+ */
+var useInvokeClientAction = function useInvokeClientAction(_ref) {
+  var analytics = _ref.analytics;
+  return useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+      var actionType, actionFn, extensionKey, display, experienceId, markName, result, reason;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            actionType = _ref2.actionType, actionFn = _ref2.actionFn, extensionKey = _ref2.extensionKey, display = _ref2.display;
+            experienceId = uuid(); // Begin performance instrumentation.
+            markName = "".concat(experienceId, "-").concat(actionType);
+            measure.mark(markName, 'pending');
+            _context.prev = 4;
+            // Begin analytics instrumentation.
+            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+              id: experienceId,
+              extensionKey: extensionKey,
+              actionType: actionType,
+              display: display,
+              invokeType: 'client'
+            });
+
+            // Invoke action
+            _context.next = 8;
+            return actionFn();
+          case 8:
+            result = _context.sent;
+            measure.mark(markName, 'resolved');
+            analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
+              id: experienceId,
+              extensionKey: extensionKey,
+              actionType: actionType,
+              display: display
+            });
+            return _context.abrupt("return", result);
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](4);
+            measure.mark(markName, 'errored');
+            reason = typeof _context.t0 === 'string' ? _context.t0 : _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message;
+            analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
+              id: experienceId,
+              extensionKey: extensionKey,
+              actionType: actionType,
+              display: display,
+              reason: reason
+            });
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 14]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [analytics === null || analytics === void 0 ? void 0 : analytics.operational, analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
+};
+export default useInvokeClientAction;

package/dist/esm/state/hooks/use-invoke-client-action/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/analytics/analytics.js

@@ -13,7 +13,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.21.0"
+  packageVersion: "26.22.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -113,9 +113,7 @@ export var invokeSucceededEvent = function invokeSucceededEvent(_ref2) {
     destinationProduct = _ref2.destinationProduct,
     destinationSubproduct = _ref2.destinationSubproduct,
     location = _ref2.location;
-  var measure = getMeasure(id, 'resolved') || {
-    duration: undefined
-  };
+  var measure = id ? getMeasure(id, 'resolved') : undefined;
   return {
     action: 'resolved',
     actionSubject: 'smartLinkAction',
@@ -129,7 +127,7 @@ export var invokeSucceededEvent = function invokeSucceededEvent(_ref2) {
       destinationSubproduct: destinationSubproduct,
       location: location,
       extensionKey: extensionKey,
-      duration: measure.duration
+      duration: measure === null || measure === void 0 ? void 0 : measure.duration
     })
   };
 };
@@ -143,9 +141,7 @@ export var invokeFailedEvent = function invokeFailedEvent(_ref3) {
     destinationProduct = _ref3.destinationProduct,
     destinationSubproduct = _ref3.destinationSubproduct,
     location = _ref3.location;
-  var measure = getMeasure(id, 'errored') || {
-    duration: undefined
-  };
+  var measure = id ? getMeasure(id, 'errored') : undefined;
   return {
     action: 'unresolved',
     actionSubject: 'smartLinkAction',
@@ -159,7 +155,7 @@ export var invokeFailedEvent = function invokeFailedEvent(_ref3) {
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
       location: location,
-      duration: measure.duration,
+      duration: measure === null || measure === void 0 ? void 0 : measure.duration,
       reason: reason
     })
   };

package/dist/esm/utils/mocks.js

@@ -63,11 +63,12 @@ export var mocks = {
       name: 'I love cheese',
       summary: 'Here is your serving of cheese: 🧀',
       'schema:potentialAction': {
-        '@id': 'comment',
-        '@type': 'CommentAction',
+        '@id': 'download',
+        '@type': 'DownloadAction',
         identifier: 'object-provider',
-        name: 'Comment'
+        name: 'Download'
       },
+      'atlassian:downloadUrl': 'https://some-download.url',
       preview: {
         href: 'https://www.ilovecheese.com'
       },
@@ -290,12 +291,16 @@ export var waitFor = function waitFor() {
 };
 export var mockAnalytics = {
   ui: {
+    actionClickedEvent: function actionClickedEvent() {},
     buttonClickedEvent: function buttonClickedEvent() {},
     modalClosedEvent: function modalClosedEvent() {},
     renderSuccessEvent: function renderSuccessEvent() {},
     renderFailedEvent: function renderFailedEvent() {}
   },
-  operational: {},
+  operational: {
+    invokeSucceededEvent: function invokeSucceededEvent() {},
+    invokeFailedEvent: function invokeFailedEvent() {}
+  },
   track: {},
   screen: {
     modalViewedEvent: function modalViewedEvent() {}

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -1,85 +1,28 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-var _excluded = ["popupMountPointId", "onClose"],
-  _excluded2 = ["details"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+var _excluded = ["details"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { FormattedMessage, IntlProvider } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
-/*
-  Explanatory note:
-  Actions don't have access to the react tree of whatever is rendered them
-  (and this concept is fraught inside editor anyway) so we want to ensure
-  it is mounting to a new unique place. This function manages that, including
-  creating an element if it doesn't exist, as well as tidying up the react tree
-  (but not the element) upon closing the modal.
-
-  This may strike you as really uncomfortable as you read it, so I wanted to note
-  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
-  you find an elegant solution around this, you should definitely feel free to
-  refactor it.
-*/
-export function previewFunction(_x) {
-  return _previewFunction.apply(this, arguments);
-}
+import { openEmbedModal } from '../../EmbedModal/utils';
 
 /*
 Most of these are optional as we are being fault-tolerant
 However src, details, icon, title, and providerName are STRONGLY encouraged
 */
-function _previewFunction() {
-  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var popupMountPointId, _onClose, rest, popupMountPoint, Modal;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = _objectWithoutProperties(_ref, _excluded);
-          popupMountPoint = document.getElementById(popupMountPointId);
-          if (!popupMountPoint) {
-            popupMountPoint = document.createElement('div');
-            popupMountPoint.id = popupMountPointId;
-            popupMountPoint.setAttribute('data-testid', 'preview-modal');
-            document.body.appendChild(popupMountPoint);
-          }
-          _context.next = 5;
-          return import('../../EmbedModal');
-        case 5:
-          Modal = _context.sent;
-          ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
-            locale: "en"
-          }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
-            onClose: function onClose(context) {
-              if (popupMountPoint) {
-                _onClose(context);
-                ReactDOM.unmountComponentAtNode(popupMountPoint);
-              }
-            }
-          }))), popupMountPoint);
-        case 7:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _previewFunction.apply(this, arguments);
-}
-export default (function (_ref2) {
-  var details = _ref2.details,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+
+export default (function (_ref) {
+  var details = _ref.details,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return {
     id: 'preview-content',
     text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
     promise: function promise() {
-      return previewFunction(_objectSpread({
-        popupMountPointId: 'twp-editor-preview-iframe',
+      return openEmbedModal(_objectSpread({
         providerName: 'Preview',
         showModal: true,
-        iframeName: 'twp-editor-preview-iframe',
         onClose: function onClose() {}
       }, rest));
     }

package/dist/esm/view/BlockCard/components/Action.js

@@ -27,11 +27,9 @@ export var Action = function Action(_ref) {
         setState('loading');
         promise().then(function () {
           setState('success');
-          setTimeout(function () {
-            return setState('init');
-          }, spinnerDelay);
         }).catch(function () {
           setState('failure');
+        }).finally(function () {
           setTimeout(function () {
             return setState('init');
           }, spinnerDelay);