@atlaskit/smart-card 26.21.0 → 26.22.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.22.0
+
+### Minor Changes
+
+- [`b3f9c544faa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3f9c544faa) - Refactor client action hook.
+
 ## 26.21.0
 
 ### Minor Changes

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,16 +12,16 @@ var _outboundAuthFlowClient = require("@atlaskit/outbound-auth-flow-client");
 var _linkProvider = require("@atlaskit/link-provider");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _helpers = require("../helpers");
-var measure = _interopRequireWildcard(require("../../utils/performance"));
 var _constants = require("../../constants");
 var _useResolve = _interopRequireDefault(require("../hooks/use-resolve"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _useInvokeClientAction = _interopRequireDefault(require("../hooks/use-invoke-client-action"));
 var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   var resolveUrl = (0, _useResolve.default)();
+  var invokeClientAction = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
-    store = _useSmartLinkContext.store,
-    connections = _useSmartLinkContext.connections;
+    store = _useSmartLinkContext.store;
   var getState = store.getState,
     dispatch = store.dispatch;
   var getSmartLinkState = (0, _react.useCallback)(function () {
@@ -152,70 +151,35 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
   }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
   var invoke = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(opts, appearance) {
-      var key, action, source, markName, response;
+      var key, action, source;
       return _regenerator.default.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 (0, _react.useMemo)(function () {
     return {
       register: register,

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

@@ -258,24 +258,25 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @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;
-        (0, _ufoExperiences.startUfoExperience)('smart-link-action-invocation', id, {
+        var extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
+        (0, _ufoExperiences.startUfoExperience)('smart-link-action-invocation', experienceId, {
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
           invokeType: invokeType
         });
         dispatchAnalytics(applyCommonAttributes((0, _analytics.uiActionClickedEvent)({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -520,7 +521,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
         return dispatchAnalytics(applyCommonAttributes((0, _analytics.uiSmartLinkStatusOpenPreviewButtonClicked)(), commonAttributes));
       }
     };
-  }, [defaultId, commonAttributes, dispatchAnalytics]);
+  }, [dispatchAnalytics, commonAttributes, defaultId, extractedExtensionKey]);
 
   /** Contains all operational analytics events */
   var operational = (0, _react.useMemo)(function () {
@@ -533,7 +534,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @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,
@@ -542,9 +543,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        (0, _ufoExperiences.succeedUfoExperience)('smart-link-action-invocation', id);
+        (0, _ufoExperiences.succeedUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeSucceededEvent)({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -564,7 +565,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @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,
@@ -574,9 +575,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        (0, _ufoExperiences.failUfoExperience)('smart-link-action-invocation', id);
+        (0, _ufoExperiences.failUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeFailedEvent)({
-          id: id,
+          id: defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _uuid = _interopRequireDefault(require("uuid"));
+var measure = _interopRequireWildcard(require("../../../utils/performance"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Invoke client action such as preview, download and open link
+ */
+var useInvokeClientAction = function useInvokeClientAction(_ref) {
+  var analytics = _ref.analytics;
+  return (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+      var actionType, actionFn, extensionKey, display, experienceId, markName, result, reason;
+      return _regenerator.default.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 = (0, _uuid.default)(); // 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]);
+};
+var _default = useInvokeClientAction;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils/analytics/analytics.js

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.21.0"
+  packageVersion: "26.22.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
@@ -128,9 +128,7 @@ var invokeSucceededEvent = function invokeSucceededEvent(_ref2) {
     destinationProduct = _ref2.destinationProduct,
     destinationSubproduct = _ref2.destinationSubproduct,
     location = _ref2.location;
-  var measure = (0, _performance.getMeasure)(id, 'resolved') || {
-    duration: undefined
-  };
+  var measure = id ? (0, _performance.getMeasure)(id, 'resolved') : undefined;
   return {
     action: 'resolved',
     actionSubject: 'smartLinkAction',
@@ -144,7 +142,7 @@ var invokeSucceededEvent = function invokeSucceededEvent(_ref2) {
       destinationSubproduct: destinationSubproduct,
       location: location,
       extensionKey: extensionKey,
-      duration: measure.duration
+      duration: measure === null || measure === void 0 ? void 0 : measure.duration
     })
   };
 };
@@ -159,9 +157,7 @@ var invokeFailedEvent = function invokeFailedEvent(_ref3) {
     destinationProduct = _ref3.destinationProduct,
     destinationSubproduct = _ref3.destinationSubproduct,
     location = _ref3.location;
-  var measure = (0, _performance.getMeasure)(id, 'errored') || {
-    duration: undefined
-  };
+  var measure = id ? (0, _performance.getMeasure)(id, 'errored') : undefined;
   return {
     action: 'unresolved',
     actionSubject: 'smartLinkAction',
@@ -175,7 +171,7 @@ 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/cjs/utils/mocks.js

@@ -72,11 +72,12 @@ 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'
       },
@@ -303,12 +304,16 @@ var waitFor = function waitFor() {
 exports.waitFor = waitFor;
 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/cjs/view/BlockCard/actions/PreviewAction.js

@@ -1,97 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.previewFunction = previewFunction;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
-var _excluded = ["popupMountPointId", "onClose"],
-  _excluded2 = ["details"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils = require("../../EmbedModal/utils");
+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) { (0, _defineProperty2.default)(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; }
-/*
-  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.
-*/
-function previewFunction(_x) {
-  return _previewFunction.apply(this, arguments);
-}
 /*
 Most of these are optional as we are being fault-tolerant
 However src, details, icon, title, and providerName are STRONGLY encouraged
 */
-function _previewFunction() {
-  _previewFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var popupMountPointId, _onClose, rest, popupMountPoint, Modal;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = (0, _objectWithoutProperties2.default)(_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 Promise.resolve().then(function () {
-            return _interopRequireWildcard(require('../../EmbedModal'));
-          });
-        case 5:
-          Modal = _context.sent;
-          _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
-            locale: "en"
-          }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, rest, {
-            onClose: function onClose(context) {
-              if (popupMountPoint) {
-                _onClose(context);
-                _reactDom.default.unmountComponentAtNode(popupMountPoint);
-              }
-            }
-          }))), popupMountPoint);
-        case 7:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _previewFunction.apply(this, arguments);
-}
-var _default = function _default(_ref2) {
-  var details = _ref2.details,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+var _default = function _default(_ref) {
+  var details = _ref.details,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return {
     id: 'preview-content',
     text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved),
     promise: function promise() {
-      return previewFunction(_objectSpread({
-        popupMountPointId: 'twp-editor-preview-iframe',
+      return (0, _utils.openEmbedModal)(_objectSpread({
         providerName: 'Preview',
         showModal: true,
-        iframeName: 'twp-editor-preview-iframe',
         onClose: function onClose() {}
       }, rest));
     }

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

@@ -36,11 +36,9 @@ 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);

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.21.0",
+  packageVersion: "26.22.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

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

@@ -3,14 +3,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 const useSmartCardActions = (id, url, analytics) => {
   const resolveUrl = useResolve();
+  const invokeClientAction = useInvokeClientAction({
+    analytics
+  });
   const {
-    store,
-    connections
+    store
   } = useSmartLinkContext();
   const {
     getState,
@@ -133,45 +135,15 @@ export const useSmartCardActions = (id, url, analytics) => {
       action
     } = opts;
     const source = opts.source || appearance;
-    const markName = `${id}-${action.type}`;
-    // Begin performance instrumentation.
-    measure.mark(markName, 'pending');
-    try {
-      // Begin analytics instrumentation.
-      analytics.ui.actionClickedEvent({
-        id,
-        extensionKey: key,
+    if (opts.type === 'client') {
+      return await invokeClientAction({
+        actionFn: opts.action.promise,
         actionType: action.type,
         display: source,
-        invokeType: opts.type
+        extensionKey: key
       });
-      // Invoke action - either client-side or server-side.
-      let response;
-      if (opts.type === 'client') {
-        response = await opts.action.promise();
-      } else {
-        response = await connections.client.postData(opts);
-      }
-      measure.mark(markName, 'resolved');
-      analytics.operational.invokeSucceededEvent({
-        id,
-        extensionKey: key,
-        actionType: action.type,
-        display: source
-      });
-      return response;
-    } catch (err) {
-      measure.mark(markName, 'errored');
-      analytics.operational.invokeFailedEvent({
-        id,
-        extensionKey: key,
-        actionType: action.type,
-        display: source,
-        reason: err.message
-      });
-      throw err;
     }
-  }, [id, analytics.ui, analytics.operational, connections.client]);
+  }, [invokeClientAction]);
   return useMemo(() => ({
     register,
     reload,

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

@@ -239,25 +239,26 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @returns
      */
     actionClickedEvent: ({
-      id,
+      id: experienceId,
       actionType,
       display,
       invokeType,
-      extensionKey,
+      extensionKey: overrideExtensionKey,
       definitionId,
       resourceType,
       destinationProduct,
       destinationSubproduct,
       location
     }) => {
-      startUfoExperience('smart-link-action-invocation', id, {
+      const extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
+      startUfoExperience('smart-link-action-invocation', experienceId, {
         actionType,
         display,
         extensionKey,
         invokeType
       });
       dispatchAnalytics(applyCommonAttributes(uiActionClickedEvent({
-        id,
+        id: defaultId,
         actionType,
         display,
         extensionKey,
@@ -494,7 +495,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * Fires an event that represent a click was performed on a Status Lozenge open preview button
      */
     smartLinkLozengeActionErrorOpenPreviewClickedEvent: () => dispatchAnalytics(applyCommonAttributes(uiSmartLinkStatusOpenPreviewButtonClicked(), commonAttributes))
-  }), [defaultId, commonAttributes, dispatchAnalytics]);
+  }), [dispatchAnalytics, commonAttributes, defaultId, extractedExtensionKey]);
 
   /** Contains all operational analytics events */
   const operational = useMemo(() => ({
@@ -506,7 +507,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
      */
     invokeSucceededEvent: ({
-      id,
+      id: experienceId,
       actionType,
       display,
       extensionKey,
@@ -516,9 +517,9 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
       destinationSubproduct,
       location
     }) => {
-      succeedUfoExperience('smart-link-action-invocation', id);
+      succeedUfoExperience('smart-link-action-invocation', experienceId);
       dispatchAnalytics(applyCommonAttributes(invokeSucceededEvent({
-        id,
+        id: defaultId,
         actionType,
         display,
         extensionKey,
@@ -538,7 +539,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
      * @param reason The reason the invocation failed.
      */
     invokeFailedEvent: ({
-      id,
+      id: experienceId,
       actionType,
       display,
       reason,
@@ -549,9 +550,9 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
       destinationSubproduct,
       location
     }) => {
-      failUfoExperience('smart-link-action-invocation', id);
+      failUfoExperience('smart-link-action-invocation', experienceId);
       dispatchAnalytics(applyCommonAttributes(invokeFailedEvent({
-        id,
+        id: defaultId,
         actionType,
         display,
         reason,