@atlaskit/smart-card 26.24.0 → 26.26.0

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

@@ -1,19 +1,21 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["smartLinkActionType"],
   _excluded2 = ["smartLinkActionType"],
   _excluded3 = ["smartLinkActionType"],
   _excluded4 = ["display"];
+var _SmartLinkActionTypeT, _SmartLinkActionTypeU;
 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 { getMeasure } from '../performance';
+import { SmartLinkActionType } from '@atlaskit/linking-types';
 export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.24.0"
+  packageVersion: "26.26.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -25,6 +27,8 @@ export var TrackQuickActionFailureReason = /*#__PURE__*/function (TrackQuickActi
   TrackQuickActionFailureReason["UnknownError"] = "UnknownError";
   return TrackQuickActionFailureReason;
 }({});
+export var SmartLinkActionTypeTrackingEventMapper = (_SmartLinkActionTypeT = {}, _defineProperty(_SmartLinkActionTypeT, SmartLinkActionType.FollowEntityAction, 'Follow'), _defineProperty(_SmartLinkActionTypeT, SmartLinkActionType.StatusUpdateAction, 'StatusUpdate'), _defineProperty(_SmartLinkActionTypeT, SmartLinkActionType.UnfollowEntityAction, 'Unfollow'), _SmartLinkActionTypeT);
+export var SmartLinkActionTypeUiEventMapper = (_SmartLinkActionTypeU = {}, _defineProperty(_SmartLinkActionTypeU, SmartLinkActionType.FollowEntityAction, 'smartLinkFollowButton'), _defineProperty(_SmartLinkActionTypeU, SmartLinkActionType.UnfollowEntityAction, 'smartLinkFollowButton'), _SmartLinkActionTypeU);
 var uiActionSubjectIds = {
   DownloadAction: 'downloadDocument',
   PreviewAction: 'invokePreviewScreen',
@@ -234,6 +238,7 @@ export var trackAppAccountAuthStarted = function trackAppAccountAuthStarted(_ref
   };
 };
 export var trackSmartLinkQuickActionStarted = function trackSmartLinkQuickActionStarted(_ref8) {
+  var _SmartLinkActionTypeT2;
   var smartLinkActionType = _ref8.smartLinkActionType,
     attributes = _objectWithoutProperties(_ref8, _excluded);
   return {
@@ -241,11 +246,12 @@ export var trackSmartLinkQuickActionStarted = function trackSmartLinkQuickAction
     actionSubject: 'smartLinkQuickAction',
     eventType: 'track',
     attributes: _objectSpread(_objectSpread(_objectSpread({}, context), attributes), {}, {
-      smartLinkActionType: smartLinkActionType
+      smartLinkActionType: (_SmartLinkActionTypeT2 = SmartLinkActionTypeTrackingEventMapper[smartLinkActionType]) !== null && _SmartLinkActionTypeT2 !== void 0 ? _SmartLinkActionTypeT2 : smartLinkActionType
     })
   };
 };
 export var trackSmartLinkQuickActionSuccess = function trackSmartLinkQuickActionSuccess(_ref9) {
+  var _SmartLinkActionTypeT3;
   var smartLinkActionType = _ref9.smartLinkActionType,
     attributes = _objectWithoutProperties(_ref9, _excluded2);
   return {
@@ -253,11 +259,12 @@ export var trackSmartLinkQuickActionSuccess = function trackSmartLinkQuickAction
     actionSubject: 'smartLinkQuickAction',
     eventType: 'track',
     attributes: _objectSpread(_objectSpread(_objectSpread({}, context), attributes), {}, {
-      smartLinkActionType: smartLinkActionType
+      smartLinkActionType: (_SmartLinkActionTypeT3 = SmartLinkActionTypeTrackingEventMapper[smartLinkActionType]) !== null && _SmartLinkActionTypeT3 !== void 0 ? _SmartLinkActionTypeT3 : smartLinkActionType
     })
   };
 };
 export var trackSmartLinkQuickActionFailed = function trackSmartLinkQuickActionFailed(_ref10) {
+  var _SmartLinkActionTypeT4;
   var smartLinkActionType = _ref10.smartLinkActionType,
     attributes = _objectWithoutProperties(_ref10, _excluded3);
   return {
@@ -265,7 +272,7 @@ export var trackSmartLinkQuickActionFailed = function trackSmartLinkQuickActionF
     actionSubject: 'smartLinkQuickAction',
     eventType: 'track',
     attributes: _objectSpread(_objectSpread(_objectSpread({}, context), attributes), {}, {
-      smartLinkActionType: smartLinkActionType
+      smartLinkActionType: (_SmartLinkActionTypeT4 = SmartLinkActionTypeTrackingEventMapper[smartLinkActionType]) !== null && _SmartLinkActionTypeT4 !== void 0 ? _SmartLinkActionTypeT4 : smartLinkActionType
     })
   };
 };
@@ -663,4 +670,15 @@ export var uiSmartLinkStatusOpenPreviewButtonClicked = function uiSmartLinkStatu
     eventType: 'ui',
     attributes: _objectSpread({}, context)
   };
+};
+export var uiServerActionClicked = function uiServerActionClicked(_ref26) {
+  var _SmartLinkActionTypeU2;
+  var smartLinkActionType = _ref26.smartLinkActionType;
+  return {
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: (_SmartLinkActionTypeU2 = SmartLinkActionTypeUiEventMapper[smartLinkActionType]) !== null && _SmartLinkActionTypeU2 !== void 0 ? _SmartLinkActionTypeU2 : smartLinkActionType,
+    eventType: 'ui',
+    attributes: _objectSpread({}, context)
+  };
 };

package/dist/esm/utils/mocks.js

@@ -295,13 +295,18 @@ export var mockAnalytics = {
     buttonClickedEvent: function buttonClickedEvent() {},
     modalClosedEvent: function modalClosedEvent() {},
     renderSuccessEvent: function renderSuccessEvent() {},
-    renderFailedEvent: function renderFailedEvent() {}
+    renderFailedEvent: function renderFailedEvent() {},
+    smartLinkServerActionClickedEvent: function smartLinkServerActionClickedEvent() {}
   },
   operational: {
     invokeSucceededEvent: function invokeSucceededEvent() {},
     invokeFailedEvent: function invokeFailedEvent() {}
   },
-  track: {},
+  track: {
+    smartLinkQuickActionFailed: function smartLinkQuickActionFailed() {},
+    smartLinkQuickActionStarted: function smartLinkQuickActionStarted() {},
+    smartLinkQuickActionSuccess: function smartLinkQuickActionSuccess() {}
+  },
   screen: {
     modalViewedEvent: function modalViewedEvent() {}
   }

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

@@ -32,6 +32,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     return onAuthorize ? [RetryAction(onAuthorize)] : [];
   }, [onAuthorize]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

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

@@ -5,8 +5,7 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-import uuid from 'uuid';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -36,11 +35,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  var _useState3 = useState(function () {
-      return id ? id : uuid();
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    analyticsId = _useState4[0];
   var _ref2 = getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? getSimulatedBetterMetadata(cardState.details) : getSimulatedMetadata(cardState.details),
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
@@ -87,49 +81,13 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }, {
     actions: [{
       name: ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.ViewAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: function onClick() {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

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

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 Action from '../index';
 import { downloadUrl as download } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 var DownloadAction = function DownloadAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -12,10 +17,37 @@ var DownloadAction = function DownloadAction(props) {
     _onClick = props.onClick,
     testId = props.testId,
     url = props.url;
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   if (downloadUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        download(downloadUrl);
+        invoke({
+          actionType: ActionName.DownloadAction,
+          actionFn: function () {
+            var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", download(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/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { useSmartLinkAnalytics } from '../../../../../../state';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { ActionName } from '../../../../../../constants';
 var PreviewAction = function PreviewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -21,23 +24,46 @@ var PreviewAction = function PreviewAction(props) {
     providerName = props.providerName,
     downloadUrl = props.downloadUrl,
     isSupportTheming = props.isSupportTheming;
-  var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
-  var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   if (src && url) {
-    var embedModal = function embedModal() {
-      return openEmbedModalWithFlexibleUiIcon({
-        title: title,
-        providerName: providerName,
-        downloadUrl: downloadUrl,
-        isSupportTheming: isSupportTheming,
-        analytics: analytics,
-        linkIcon: linkIcon,
-        src: src
-      });
-    };
+    var actionFn = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", 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: 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/esm/view/FlexibleCard/components/actions/action/server-action/index.js

@@ -6,9 +6,11 @@ var _excluded = ["action", "onClick"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useState } from 'react';
 import useInvoke from '../../../../../../state/hooks/use-invoke';
+import { getInvokeFailureReason } from '../../../../../../state/hooks/use-invoke/utils';
 import useResolve from '../../../../../../state/hooks/use-resolve';
 import createInvokeRequest from '../../../../../../utils/actions/create-invoke-request';
 import Action from '../index';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 var ServerAction = function ServerAction(_ref) {
   var action = _ref.action,
     onClick = _ref.onClick,
@@ -17,46 +19,61 @@ var ServerAction = function ServerAction(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
     setIsLoading = _useState2[1];
+  var analytics = useFlexibleUiAnalyticsContext();
   var invoke = useInvoke();
   var reload = useResolve();
   var handleClick = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var request;
+    var _action$action, smartLinkActionType, request;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           if (!action) {
-            _context.next = 16;
+            _context.next = 21;
             break;
           }
-          _context.prev = 1;
+          smartLinkActionType = (_action$action = action.action) === null || _action$action === void 0 ? void 0 : _action$action.actionType;
+          _context.prev = 2;
           setIsLoading(true);
+          analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkServerActionClickedEvent({
+            smartLinkActionType: smartLinkActionType
+          });
+          analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted({
+            smartLinkActionType: smartLinkActionType
+          });
           request = createInvokeRequest(action);
-          _context.next = 6;
+          _context.next = 9;
           return invoke(request);
-        case 6:
+        case 9:
+          analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess({
+            smartLinkActionType: smartLinkActionType
+          });
           if (!(action.reload && action.reload.url)) {
-            _context.next = 9;
+            _context.next = 13;
             break;
           }
-          _context.next = 9;
+          _context.next = 13;
           return reload(action.reload.url, true, undefined, action.reload.id);
-        case 9:
+        case 13:
           setIsLoading(false);
           if (onClick) {
             onClick();
           }
-          _context.next = 16;
+          _context.next = 21;
           break;
-        case 13:
-          _context.prev = 13;
-          _context.t0 = _context["catch"](1);
+        case 17:
+          _context.prev = 17;
+          _context.t0 = _context["catch"](2);
           setIsLoading(false);
-        case 16:
+          analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed({
+            smartLinkActionType: smartLinkActionType,
+            reason: getInvokeFailureReason(_context.t0)
+          });
+        case 21:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[1, 13]]);
-  })), [action, invoke, onClick, reload]);
+    }, _callee, null, [[2, 17]]);
+  })), [action, analytics === null || analytics === void 0 ? void 0 : analytics.track, analytics === null || analytics === void 0 ? void 0 : analytics.ui, invoke, onClick, reload]);
   return /*#__PURE__*/React.createElement(Action, _extends({}, props, {
     isLoading: isLoading,
     onClick: handleClick

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

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 Action from '../index';
 import { openUrl } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 var ViewAction = function ViewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -12,10 +17,37 @@ var ViewAction = function ViewAction(props) {
     _onClick = props.onClick,
     viewUrl = props.viewUrl,
     url = props.url;
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   if (viewUrl && url) {
     var action = _objectSpread(_objectSpread({}, props), {}, {
       onClick: function onClick() {
-        openUrl(viewUrl);
+        invoke({
+          actionType: ActionName.ViewAction,
+          actionFn: function () {
+            var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", 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/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -16,6 +16,7 @@ import extractLozengeActionItems from '../../../../../../extractors/action/extra
 import createStatusUpdateRequest from '../../../../../../utils/actions/create-status-update-request';
 import useResolve from '../../../../../../state/hooks/use-resolve';
 import { LozengeActionErrorMessages } from './lozenge-action-error/types';
+import { isInvokeCustomError } from '../../../../../../state/hooks/use-invoke/utils';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { TrackQuickActionType } from '../../../../../../utils/analytics/analytics';
 import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
@@ -26,9 +27,6 @@ var validateItems = function validateItems() {
     return item.text !== text;
   });
 };
-var isInvokeCustomError = function isInvokeCustomError(err) {
-  return err.message !== undefined && err.errorCode !== undefined;
-};
 var LozengeAction = function LozengeAction(_ref) {
   var _action$update;
   var action = _ref.action,

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

@@ -1,7 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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 { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
@@ -98,34 +102,19 @@ export var hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;
 };
 export 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 = _objectWithoutProperties(_ref, _excluded);
   var icon = {
     icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
       size: SmartLinkSize.Large
     })),
     isFlexibleUi: true
   };
-  return openEmbedModal({
-    analytics: analytics,
-    download: downloadUrl,
+  return 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'
+  }));
 };

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

@@ -1,4 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, { useEffect, useMemo } from 'react';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
@@ -12,7 +15,10 @@ import { getContextByStatus, getRetryOptions } from './utils';
  * @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,
@@ -43,6 +49,13 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var retry = getRetryOptions(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;
+  var analyticsContext = 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]);
   useEffect(function () {
     switch (status) {
       case SmartLinkStatus.Resolved:
@@ -68,7 +81,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     }
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
-    value: analytics
+    value: analyticsContext
   }, /*#__PURE__*/React.createElement(FlexibleUiOptionContext.Provider, {
     value: ui
   }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {

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

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

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

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

package/dist/types/extractors/common/__mocks__/jsonld.d.ts

@@ -27,7 +27,6 @@ export declare const TEST_CURRENT_DOCUMENT: JsonLd.Data.Document;
 export declare const TEST_DOWNLOAD_ACTION: JsonLd.Data.BaseData['schema:potentialAction'];
 export declare const TEST_UNDEFINED_LINK: JsonLd.Data.UndefinedLinkDocument;
 export declare const TEST_ASSIGN_ACTION: JsonLd.Data.BaseData['schema:potentialAction'];
-export declare const TEST_NO_ID_ACTION: JsonLd.Data.BaseData['schema:potentialAction'];
 export declare const TEST_VIEW_ACTION: JsonLd.Data.BaseData['schema:potentialAction'];
 export declare const TEST_FOLLOW_ACTION: JsonLd.Primitives.UpdateAction;
 export declare const TEST_UNFOLLOW_ACTION: JsonLd.Primitives.UpdateAction;

package/dist/types/extractors/common/actions/extractActions.d.ts

@@ -2,4 +2,4 @@ import { JsonLd } from 'json-ld-types';
 import { InvokeHandler } from '../../../model/invoke-handler';
 import { ActionProps } from '../../../view/BlockCard/components/Action';
 export declare const getActionsFromJsonLd: (jsonLd: JsonLd.Data.BaseData) => JsonLd.Primitives.Action[];
-export declare function extractActions(jsonLd: JsonLd.Data.BaseData, handler: InvokeHandler): ActionProps[];
+export declare function extractClientActions(jsonLd: JsonLd.Data.BaseData, handler: InvokeHandler): ActionProps[];