@atlaskit/smart-card 26.24.0 → 26.25.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 26.25.0
+
+### Minor Changes
+
+- [`dc3345f4b47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc3345f4b47) - Refactor flexible card to use client action hook. (Minor due to the change to the deprecated hook.)
+
+### Patch Changes
+
+- [`2c8b781fd3a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c8b781fd3a) - cleanup: remove server actions from actions extractor
+
 ## 26.24.0
 
 ### Minor Changes

package/dist/cjs/extractors/block/index.js

@@ -38,7 +38,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
-    var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
+    var actions = (0, _extractActions.extractClientActions)(jsonLd, handleInvoke);
     var previewAction = (0, _extractPreviewAction.extractPreviewAction)(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,

package/dist/cjs/extractors/common/actions/extractActions.js

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractActions = extractActions;
+exports.extractClientActions = extractClientActions;
 exports.getActionsFromJsonLd = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ViewAction = require("../../../view/BlockCard/actions/ViewAction");
 var _DownloadAction = require("../../../view/BlockCard/actions/DownloadAction");
@@ -45,27 +44,6 @@ var getClientActionProps = function getClientActionProps(jsonLd, action, handler
     }
   });
 };
-var getServerActionProps = function getServerActionProps(jsonLd, action, handler) {
-  var id = action['@id'] || action['@type'];
-  var data = {
-    type: 'server',
-    key: action.identifier,
-    action: {
-      type: action['@type'],
-      payload: {
-        id: id,
-        context: jsonLd.context
-      }
-    }
-  };
-  return {
-    id: id,
-    text: action.name,
-    promise: function promise() {
-      return handler(data);
-    }
-  };
-};
 var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
   if (!actions) {
@@ -77,17 +55,11 @@ var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   return actions;
 };
 exports.getActionsFromJsonLd = getActionsFromJsonLd;
-function extractActions(jsonLd, handler) {
+function extractClientActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);
-  var serverActions = actions.filter(function (action) {
-    return !isClientAction(action);
-  });
   var clientActionImpls = clientActions.map(function (action) {
     return getClientActionProps(jsonLd, action, handler);
   });
-  var serverActionImpls = serverActions.map(function (action) {
-    return getServerActionProps(jsonLd, action, handler);
-  });
-  return [].concat((0, _toConsumableArray2.default)(clientActionImpls), (0, _toConsumableArray2.default)(serverActionImpls));
+  return clientActionImpls;
 }

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

@@ -254,11 +254,11 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param actionType The type of the action that was clicked, e.g. PreviewAction
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
-       * @param invokeType Whether the action invoked made a call to a server.
+       * @param invokeType @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
        * @returns
        */
       actionClickedEvent: function actionClickedEvent(_ref6) {
-        var experienceId = _ref6.id,
+        var id = _ref6.id,
           actionType = _ref6.actionType,
           display = _ref6.display,
           invokeType = _ref6.invokeType,
@@ -269,14 +269,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationSubproduct = _ref6.destinationSubproduct,
           location = _ref6.location;
         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: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -534,7 +528,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 experienceId = _ref13.id,
+        var id = _ref13.id,
           actionType = _ref13.actionType,
           display = _ref13.display,
           extensionKey = _ref13.extensionKey,
@@ -543,9 +537,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        (0, _ufoExperiences.succeedUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeSucceededEvent)({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -565,7 +558,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
        * @param reason The reason the invocation failed.
        */
       invokeFailedEvent: function invokeFailedEvent(_ref14) {
-        var experienceId = _ref14.id,
+        var id = _ref14.id,
           actionType = _ref14.actionType,
           display = _ref14.display,
           reason = _ref14.reason,
@@ -575,9 +568,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        (0, _ufoExperiences.failUfoExperience)('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes((0, _analytics.invokeFailedEvent)({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

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

@@ -11,8 +11,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var measure = _interopRequireWildcard(require("../../../utils/performance"));
+var _analytics = require("../../analytics");
 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 ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
+
 /**
  * Invoke client action such as preview, download and open link
  */
@@ -29,45 +32,48 @@ var useInvokeClientAction = function useInvokeClientAction(_ref) {
             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,
+            // Begin UFO experience
+            (0, _analytics.startUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId, {
               actionType: actionType,
               display: display,
+              extensionKey: extensionKey,
               invokeType: 'client'
             });
 
+            // Begin analytics instrumentation.
+            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+              actionType: actionType,
+              display: display
+            });
+
             // Invoke action
-            _context.next = 8;
+            _context.next = 9;
             return actionFn();
-          case 8:
+          case 9:
             result = _context.sent;
             measure.mark(markName, 'resolved');
+            (0, _analytics.succeedUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId);
             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;
+          case 16:
+            _context.prev = 16;
             _context.t0 = _context["catch"](4);
             measure.mark(markName, 'errored');
+            (0, _analytics.failUfoExperience)(ACTION_EXPERIENCE_NAME, experienceId);
             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 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 14]]);
+      }, _callee, null, [[4, 16]]);
     }));
     return function (_x) {
       return _ref3.apply(this, arguments);

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.24.0"
+  packageVersion: "26.25.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -41,6 +41,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
   }, [onAuthorize]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -14,7 +14,6 @@ var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/componen
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _styled = require("./styled");
 var _constants = require("../../../../constants");
-var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("./utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
@@ -45,11 +44,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  var _useState3 = (0, _react.useState)(function () {
-      return id ? id : (0, _uuid.default)();
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-    analyticsId = _useState4[0];
   var _ref2 = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? (0, _utils.getSimulatedBetterMetadata)(cardState.details) : (0, _utils.getSimulatedMetadata)(cardState.details),
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
@@ -96,49 +90,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }, {
     actions: [{
       name: _constants.ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: _constants.ActionName.ViewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: _constants.ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: _constants.CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: _constants.CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

package/dist/cjs/view/FlexibleCard/components/actions/action/download-action/index.js

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _utils = require("../../../../../../utils");
+var _constants = require("../../../../../../constants");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 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; }
 var DownloadAction = function DownloadAction(props) {
@@ -19,10 +24,37 @@ var DownloadAction = function DownloadAction(props) {
     _onClick = props.onClick,
     testId = props.testId,
     url = props.url;
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   if (downloadUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        (0, _utils.downloadUrl)(downloadUrl);
+        invoke({
+          actionType: _constants.ActionName.DownloadAction,
+          actionFn: function () {
+            var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", (0, _utils.downloadUrl)(downloadUrl));
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function actionFn() {
+              return _actionFn.apply(this, arguments);
+            }
+            return actionFn;
+          }(),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (_onClick) {
           _onClick();
         }

package/dist/cjs/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
-var _state = require("../../../../../../state");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../../../../messages");
 var _utils = require("../../../utils");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
+var _constants = require("../../../../../../constants");
 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; }
 var PreviewAction = function PreviewAction(props) {
@@ -28,23 +31,46 @@ var PreviewAction = function PreviewAction(props) {
     providerName = props.providerName,
     downloadUrl = props.downloadUrl,
     isSupportTheming = props.isSupportTheming;
-  var defaultAnalytics = (0, _state.useSmartLinkAnalytics)(url, function () {});
-  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)() || defaultAnalytics;
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   if (src && url) {
-    var embedModal = function embedModal() {
-      return (0, _utils.openEmbedModalWithFlexibleUiIcon)({
-        title: title,
-        providerName: providerName,
-        downloadUrl: downloadUrl,
-        isSupportTheming: isSupportTheming,
-        analytics: analytics,
-        linkIcon: linkIcon,
-        src: src
-      });
-    };
+    var actionFn = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", (0, _utils.openEmbedModalWithFlexibleUiIcon)({
+                download: downloadUrl,
+                title: title,
+                providerName: providerName,
+                isSupportTheming: isSupportTheming,
+                analytics: analytics,
+                linkIcon: linkIcon,
+                src: src,
+                url: url
+              }));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function actionFn() {
+        return _ref.apply(this, arguments);
+      };
+    }();
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        embedModal();
+        invoke({
+          actionType: _constants.ActionName.PreviewAction,
+          actionFn: actionFn,
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (_onClick) {
           _onClick();
         }

package/dist/cjs/view/FlexibleCard/components/actions/action/view-action/index.js

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _utils = require("../../../../../../utils");
+var _constants = require("../../../../../../constants");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
 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; }
 var ViewAction = function ViewAction(props) {
@@ -19,10 +24,37 @@ var ViewAction = function ViewAction(props) {
     _onClick = props.onClick,
     viewUrl = props.viewUrl,
     url = props.url;
+  var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   if (viewUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        (0, _utils.openUrl)(viewUrl);
+        invoke({
+          actionType: _constants.ActionName.ViewAction,
+          actionFn: function () {
+            var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", (0, _utils.openUrl)(viewUrl));
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function actionFn() {
+              return _actionFn.apply(this, arguments);
+            }
+            return actionFn;
+          }(),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (_onClick) {
           _onClick();
         }

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -14,7 +15,10 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../../constants");
 var _icon = _interopRequireDefault(require("./elements/icon"));
 var _utils = require("../../EmbedModal/utils");
+var _excluded = ["linkIcon"];
 var _sizeToButtonSpacing, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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; }
 var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
 exports.sizeToButtonSpacing = sizeToButtonSpacing;
 var getFormattedMessage = function getFormattedMessage(message) {
@@ -116,35 +120,20 @@ var hasWhiteSpace = function hasWhiteSpace(str) {
 };
 exports.hasWhiteSpace = hasWhiteSpace;
 var openEmbedModalWithFlexibleUiIcon = function openEmbedModalWithFlexibleUiIcon(_ref) {
-  var analytics = _ref.analytics,
-    downloadUrl = _ref.downloadUrl,
-    linkIcon = _ref.linkIcon,
-    onClose = _ref.onClose,
-    providerName = _ref.providerName,
-    src = _ref.src,
-    title = _ref.title,
-    url = _ref.url,
-    isSupportTheming = _ref.isSupportTheming;
+  var linkIcon = _ref.linkIcon,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var icon = {
     icon: /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, linkIcon, {
       size: _constants.SmartLinkSize.Large
     })),
     isFlexibleUi: true
   };
-  return (0, _utils.openEmbedModal)({
-    analytics: analytics,
-    download: downloadUrl,
+  return (0, _utils.openEmbedModal)(_objectSpread(_objectSpread({}, props), {}, {
     icon: icon,
     // Flex should not send origin as block card. It should be able to support
     // its internal parent components like hover card, block card and
     // itself as a standalone. To be investigated and fix in EDM-7520.
-    origin: 'smartLinkCard',
-    providerName: providerName,
-    onClose: onClose,
-    src: src,
-    title: title,
-    url: url,
-    isSupportTheming: isSupportTheming
-  });
+    origin: 'smartLinkCard'
+  }));
 };
 exports.openEmbedModalWithFlexibleUiIcon = openEmbedModalWithFlexibleUiIcon;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../constants");
 var _container = _interopRequireDefault(require("./components/container"));
@@ -14,6 +15,8 @@ var _flexibleUiContext = require("../../state/flexible-ui-context");
 var _utils = require("./utils");
 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; }
+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; }
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
  * This is the container in which all Flexible UI Blocks and Elements exist.
@@ -21,7 +24,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see Container
  */
 var FlexibleCard = function FlexibleCard(_ref) {
+  var _details$meta2;
   var analytics = _ref.analytics,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'flexible' : _ref$appearance,
     cardState = _ref.cardState,
     children = _ref.children,
     id = _ref.id,
@@ -52,6 +58,13 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;
+  var analyticsContext = (0, _react.useMemo)(function () {
+    var _details$meta;
+    return analytics ? _objectSpread(_objectSpread({}, analytics), {}, {
+      display: appearance,
+      extensionKey: details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.key
+    }) : undefined;
+  }, [analytics, appearance, details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key]);
   (0, _react.useEffect)(function () {
     switch (status) {
       case _constants.SmartLinkStatus.Resolved:
@@ -77,7 +90,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     }
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiAnalyticsContext.Provider, {
-    value: analytics
+    value: analyticsContext
   }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiOptionContext.Provider, {
     value: ui
   }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -150,6 +150,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     subtitle: subtitle
   };
   var flexibleCardProps = {
+    appearance: _constants.CardDisplay.HoverCardPreview,
     cardState: cardState,
     onClick: onClick,
     onResolve: onResolve,

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.24.0",
+  packageVersion: "26.25.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');