@atlaskit/smart-card 26.2.1 → 26.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 26.3.0
+
+### Minor Changes
+
+- [`8406b471923`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8406b471923) - [ux] Update analytics tracking events for lozenge action
+
+## 26.2.2
+
+### Patch Changes
+
+- [`374da8b159a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/374da8b159a) - Include additional attributes (urlHash, display, id) and resolved attributes for link clicked analytics events (Originally introduced in 25.8.0, reverted in 25.9.1 due to regression)
+- [`c6d962997a7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6d962997a7) - [ux] Changed the text of the button from 'Full screen view' to 'Open preview' and also changed the color of a button in the hover cards
+- Updated dependencies
+
 ## 26.2.1
 
 ### Patch Changes

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

@@ -35,7 +35,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
     return !!detail;
   });
 };
-var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
+var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta, enableImprovedPreviewAction) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
     var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
@@ -43,7 +43,8 @@ var extractBlockActions = function extractBlockActions(props, jsonLd, opts, plat
       viewProps: props,
       jsonLd: jsonLd,
       platform: platform,
-      meta: meta
+      meta: meta,
+      enableImprovedPreviewAction: enableImprovedPreviewAction
     }));
 
     // The previewAction should always be the last action
@@ -76,7 +77,7 @@ var extractBlockUsers = function extractBlockUsers(jsonLd) {
   }
 };
 exports.extractBlockUsers = extractBlockUsers;
-var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers, platform) {
+var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers, platform, enableImprovedPreviewAction) {
   var props = {
     link: (0, _extractors.extractLink)(jsonLd),
     title: (0, _extractors.extractTitle)(jsonLd),
@@ -92,7 +93,7 @@ var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers
     isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta)
   };
   return _objectSpread(_objectSpread({}, props), {}, {
-    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta, enableImprovedPreviewAction)
   });
 };
 exports.extractBlockProps = extractBlockProps;

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

@@ -64,7 +64,8 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'block' : _ref$source,
     analytics = _ref.analytics,
-    meta = _ref.meta;
+    meta = _ref.meta,
+    enableImprovedPreviewAction = _ref.enableImprovedPreviewAction;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -83,7 +84,8 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
       onViewActionClick: function onViewActionClick() {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
       },
-      isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)
+      isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta),
+      enableImprovedPreviewAction: enableImprovedPreviewAction
     }));
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/cjs/messages.js

@@ -221,6 +221,12 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Owned by {context}',
     description: 'Indicates the person or entity that owns or maintains the resource.'
   },
+  // Move this to preview once FF has been merged
+  preview_improved: {
+    id: 'fabric.linking.preview_improved',
+    defaultMessage: 'Open preview',
+    description: 'Click to view a richer view of your content, without needing to navigate to it.'
+  },
   preview: {
     id: 'fabric.linking.preview',
     defaultMessage: 'Full screen view',

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

@@ -25,13 +25,20 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     connections = _useSmartLinkContext.connections;
   var getState = store.getState,
     dispatch = store.dispatch;
-  var _ref = getState()[url] || {
-      status: _constants.SmartLinkStatus.Pending,
-      details: undefined
-    },
-    details = _ref.details,
-    status = _ref.status,
-    metadataStatus = _ref.metadataStatus;
+  var getSmartLinkState = (0, _react.useCallback)(function () {
+    var _getState$url;
+    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+        status: _constants.SmartLinkStatus.Pending
+      },
+      details = _ref.details,
+      status = _ref.status,
+      metadataStatus = _ref.metadataStatus;
+    return {
+      details: details,
+      status: status,
+      metadataStatus: metadataStatus
+    };
+  }, [getState, url]);
   var setMetadataStatus = (0, _react.useCallback)(function (metadataStatus) {
     dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -56,6 +63,8 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     }, _callee);
   })), [id, resolveUrl, url]);
   var register = (0, _react.useCallback)(function () {
+    var _getSmartLinkState = getSmartLinkState(),
+      details = _getSmartLinkState.details;
     if (!details) {
       dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVING, {
         url: url
@@ -63,8 +72,10 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   var reload = (0, _react.useCallback)(function () {
+    var _getSmartLinkState2 = getSmartLinkState(),
+      details = _getSmartLinkState2.details;
     var definitionId = (0, _helpers.getDefinitionId)(details);
     if (definitionId) {
       (0, _helpers.getByDefinitionId)(definitionId, getState()).map(function (url) {
@@ -73,15 +84,20 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   var loadMetadata = (0, _react.useCallback)(function () {
+    var _getSmartLinkState3 = getSmartLinkState(),
+      metadataStatus = _getSmartLinkState3.metadataStatus;
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [metadataStatus, resolve, setMetadataStatus, url]);
+  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
   var authorize = (0, _react.useCallback)(function (appearance) {
+    var _getSmartLinkState4 = getSmartLinkState(),
+      details = _getSmartLinkState4.details,
+      status = _getSmartLinkState4.status;
     var definitionId = (0, _helpers.getDefinitionId)(details);
     var extensionKey = (0, _helpers.getExtensionKey)(details);
     var services = (0, _helpers.getServices)(details);
@@ -133,7 +149,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
+  }, [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;

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

@@ -11,50 +11,30 @@ var _react = require("react");
 var _linkClientExtension = require("@atlaskit/link-client-extension");
 var _linkProvider = require("@atlaskit/link-provider");
 var useInvoke = function useInvoke() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    failed = _ref.failed,
-    started = _ref.started,
-    success = _ref.success;
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
     connections = _useSmartLinkContext.connections;
   var clientExt = (0, _linkClientExtension.useSmartLinkClientExtension)(connections.client);
   return (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(req, cb) {
-      var _req$action;
-      var smartLinkActionType, response;
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(req, cb) {
+      var response;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            smartLinkActionType = req === null || req === void 0 ? void 0 : (_req$action = req.action) === null || _req$action === void 0 ? void 0 : _req$action.actionType;
-            _context.prev = 1;
-            started && started({
-              smartLinkActionType: smartLinkActionType
-            });
-            _context.next = 5;
+            _context.next = 2;
             return clientExt.invoke(req);
-          case 5:
+          case 2:
             response = _context.sent;
-            success && success({
-              smartLinkActionType: smartLinkActionType
-            });
             return _context.abrupt("return", cb ? cb(response) : response);
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](1);
-            failed && failed({
-              smartLinkActionType: smartLinkActionType
-            });
-            throw _context.t0;
-          case 14:
+          case 4:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 10]]);
+      }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
-  }(), [clientExt, failed, started, success]);
+  }(), [clientExt]);
 };
 var _default = useInvoke;
 exports.default = _default;

package/dist/cjs/state/hooks/use-resolve/index.js

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
+var _reactDom = require("react-dom");
 var _analytics = require("../../analytics");
 var _helpers = require("../../helpers");
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../actions/constants");
 var _jsonld = require("../../../utils/jsonld");
 var _constants2 = require("../../../constants");
@@ -80,6 +82,20 @@ var useResolve = function useResolve() {
       }
     }
   }, [getState, setMetadataStatus, dispatch]);
+  var handleResolvedLinkSuccess = (0, _react.useCallback)(function (resourceUrl, response, isReloading, isMetadataRequest) {
+    //if a link resolves normally, metadata will also always be resolved
+    setMetadataStatus(resourceUrl, 'resolved');
+    // Dispatch Analytics and resolved card action - including unauthorized states.
+    if (isReloading) {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response, undefined, undefined, isMetadataRequest));
+    }
+  }, [setMetadataStatus, dispatch]);
   var handleResolvedLinkResponse = (0, _react.useCallback)(function (resourceUrl, response) {
     var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var isMetadataRequest = arguments.length > 3 ? arguments[3] : undefined;
@@ -104,20 +120,20 @@ var useResolve = function useResolve() {
       handleResolvedLinkError(resourceUrl, new _linkingCommon.APIError('error', hostname, _constants.ERROR_MESSAGE_METADATA), response, isMetadataRequest);
       return;
     }
-
-    //if a link resolves normally, metadata will also always be resolved
-    setMetadataStatus(resourceUrl, 'resolved');
-    // Dispatch Analytics and resolved card action - including unauthorized states.
-    if (isReloading) {
-      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
-        url: resourceUrl
-      }, response));
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context')) {
+      /**
+       * Using unstable_batchedUpdates because this store update happens async and trigers a rerender
+       * more info:
+       * https://github.com/facebook/react/blob/v18.2.0/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L113
+       * https://react-redux.js.org/api/batch
+       */
+      (0, _reactDom.unstable_batchedUpdates)(function () {
+        handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
+      });
     } else {
-      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
-        url: resourceUrl
-      }, response, undefined, undefined, isMetadataRequest));
+      handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
+  }, [handleResolvedLinkError, handleResolvedLinkSuccess, hasAuthFlowSupported]);
   return (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(url) {
       var isReloading,

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmartLinkAnalyticsContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
+var _flexible = require("../flexible");
+var _constants = require("../../constants");
+var _store = require("../../state/store");
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
+  var children = _ref.children,
+    url = _ref.url,
+    appearance = _ref.appearance,
+    id = _ref.id;
+  var _useSmartLinkState = (0, _store.useSmartCardState)(url),
+    details = _useSmartLinkState.details,
+    status = _useSmartLinkState.status;
+  var resolvedAttributes = (0, _resolvedAttributes.getResolvedAttributes)({
+    url: url
+  }, details, status);
+  var _getUrlAttributes = (0, _resolvedAttributes.getUrlAttributes)(url),
+    urlHash = _getUrlAttributes.urlHash;
+  var isFlexibleUi = (0, _react.useMemo)(function () {
+    return (0, _flexible.isFlexibleUiCard)(children);
+  }, [children]);
+  var display = isFlexibleUi ? _constants.CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
+        urlHash: urlHash,
+        display: display,
+        id: id
+      })
+    }
+  }, children);
+};
+exports.SmartLinkAnalyticsContext = SmartLinkAnalyticsContext;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiSmartLinkStatusOpenPreviewButtonClicked = exports.uiSmartLinkStatusLozengeButtonClicked = exports.uiSmartLinkStatusListItemButtonClicked = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiIframeFocusedEvent = exports.uiIframeDwelledEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackSmartLinkQuickActionSuccess = exports.trackSmartLinkQuickActionStarted = exports.trackSmartLinkQuickActionFailed = exports.trackLinkUpdated = exports.trackAppAccountConnected = exports.trackAppAccountAuthStarted = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.chunkloadFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiSmartLinkStatusOpenPreviewButtonClicked = exports.uiSmartLinkStatusLozengeButtonClicked = exports.uiSmartLinkStatusListItemButtonClicked = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiIframeFocusedEvent = exports.uiIframeDwelledEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackSmartLinkQuickActionSuccess = exports.trackSmartLinkQuickActionStarted = exports.trackSmartLinkQuickActionFailed = exports.trackLinkUpdated = exports.trackAppAccountConnected = exports.trackAppAccountAuthStarted = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.chunkloadFailedEvent = exports.TrackQuickActionType = exports.TrackQuickActionFailureReason = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -25,6 +25,18 @@ var context = {
   packageVersion: _version.version
 };
 exports.context = context;
+var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
+  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
+  return TrackQuickActionType;
+}({});
+exports.TrackQuickActionType = TrackQuickActionType;
+var TrackQuickActionFailureReason = /*#__PURE__*/function (TrackQuickActionFailureReason) {
+  TrackQuickActionFailureReason["PermissionError"] = "PermissionError";
+  TrackQuickActionFailureReason["ValidationError"] = "ValidationError";
+  TrackQuickActionFailureReason["UnknownError"] = "UnknownError";
+  return TrackQuickActionFailureReason;
+}({});
+exports.TrackQuickActionFailureReason = TrackQuickActionFailureReason;
 var uiActionSubjectIds = {
   DownloadAction: 'downloadDocument',
   PreviewAction: 'invokePreviewScreen',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.2.1",
+	"version": "26.3.0",
 	"sideEffects": false
 }

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

@@ -17,7 +17,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
 var _excluded = ["popupMountPointId", "onClose"],
-  _excluded2 = ["details"];
+  _excluded2 = ["details", "enableImprovedPreviewAction"];
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -82,10 +82,12 @@ function _previewFunction() {
 }
 var _default = function _default(_ref2) {
   var details = _ref2.details,
+    enableImprovedPreviewAction = _ref2.enableImprovedPreviewAction,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var previewText = enableImprovedPreviewAction ? _messages.messages.preview_improved : _messages.messages.preview;
   return {
     id: 'preview-content',
-    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
+    text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, previewText),
     promise: function promise(props) {
       return previewFunction(_objectSpread(_objectSpread({
         popupMountPointId: 'twp-editor-preview-iframe',

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

@@ -82,6 +82,7 @@ var _FlexibleForbiddenView = _interopRequireDefault(require("./views/flexible/Fl
 var _token = require("../../utils/token");
 var _react = require("@emotion/react");
 var _handlers = require("./utils/handlers");
+var _linkProvider = require("@atlaskit/link-provider");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
 var _templateObject;
 /** @jsx jsx */
@@ -117,6 +118,7 @@ var BlockCard = function BlockCard(_ref) {
     handleInvoke: handleInvoke,
     extensionKey: extensionKey
   };
+  var enableImprovedPreviewAction = Boolean((0, _linkProvider.useFeatureFlag)('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     var ui = {
       hideElevation: true
@@ -199,7 +201,7 @@ var BlockCard = function BlockCard(_ref) {
         isSelected: isSelected
       });
     case 'resolved':
-      var resolvedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts, renderers, platform);
+      var resolvedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts, renderers, platform, enableImprovedPreviewAction);
       if (onResolve) {
         onResolve({
           title: resolvedViewProps.title,

package/dist/cjs/view/CardWithUrl/component.js

@@ -5,10 +5,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardWithUrlContent = CardWithUrlContent;
+exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../utils");
 var measure = _interopRequireWildcard(require("../../utils/performance"));
 var _helpers = require("../../state/helpers");
@@ -20,9 +21,10 @@ var _flexible = require("../../utils/flexible");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _constants = require("../../constants");
 var _click = require("../../utils/analytics/click");
+var _SmartLinkAnalyticsContext = require("../../utils/analytics/SmartLinkAnalyticsContext");
 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 CardWithUrlContent(_ref) {
+function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
     isSelected = _ref.isSelected,
@@ -268,4 +270,12 @@ function CardWithUrlContent(_ref) {
         onIframeFocus: onIframeFocus
       });
   }
-}
+}
+var CardWithUrlContent = function CardWithUrlContent(props) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+    url: props.url,
+    appearance: props.appearance,
+    id: props.id
+  }, /*#__PURE__*/_react.default.createElement(Component, props)) : /*#__PURE__*/_react.default.createElement(Component, props);
+};
+exports.CardWithUrlContent = CardWithUrlContent;

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

@@ -12,6 +12,9 @@ var _index = _interopRequireDefault(require("../index"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _state = require("../../../../../../state");
 var _utils = require("../../../../../EmbedModal/utils");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../../../../messages");
+var _linkProvider = require("@atlaskit/link-provider");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PreviewAction = function PreviewAction(props) {
@@ -28,6 +31,8 @@ var PreviewAction = function PreviewAction(props) {
     isSupportTheming = props.isSupportTheming;
   var defaultAnalytics = (0, _state.useSmartLinkAnalytics)(url, function () {});
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)() || defaultAnalytics;
+  var enableImprovedPreviewAction = Boolean((0, _linkProvider.useFeatureFlag)('enableImprovedPreviewAction'));
+  var previewText = enableImprovedPreviewAction ? _messages.messages.preview_improved : _messages.messages.preview;
   if (src && url) {
     var embedModal = function embedModal() {
       return (0, _utils.openPreviewModal)({
@@ -46,7 +51,8 @@ var PreviewAction = function PreviewAction(props) {
         if (_onClick) {
           _onClick();
         }
-      }
+      },
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, previewText)
     });
     return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, action, {
       appearance: appearance,

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

@@ -57,7 +57,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     testId: 'smart-action-preview-action',
     content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),
     icon: /*#__PURE__*/_react.default.createElement(_vidFullScreenOn.default, {
-      label: "Full screen view"
+      label: "Open preview"
     }),
     tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview)
   }