@atlaskit/smart-card 26.2.1 → 26.3.0

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

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+import { isFlexibleUiCard } from '../flexible';
+import { CardDisplay } from '../../constants';
+import { useSmartCardState as useSmartLinkState } from '../../state/store';
+export var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
+  var children = _ref.children,
+    url = _ref.url,
+    appearance = _ref.appearance,
+    id = _ref.id;
+  var _useSmartLinkState = useSmartLinkState(url),
+    details = _useSmartLinkState.details,
+    status = _useSmartLinkState.status;
+  var resolvedAttributes = getResolvedAttributes({
+    url: url
+  }, details, status);
+  var _getUrlAttributes = getUrlAttributes(url),
+    urlHash = _getUrlAttributes.urlHash;
+  var isFlexibleUi = useMemo(function () {
+    return isFlexibleUiCard(children);
+  }, [children]);
+  var display = isFlexibleUi ? CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
+        urlHash: urlHash,
+        display: display,
+        id: id
+      })
+    }
+  }, children);
+};

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

@@ -16,6 +16,16 @@ export var context = {
   packageName: packageName,
   packageVersion: packageVersion
 };
+export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
+  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
+  return TrackQuickActionType;
+}({});
+export var TrackQuickActionFailureReason = /*#__PURE__*/function (TrackQuickActionFailureReason) {
+  TrackQuickActionFailureReason["PermissionError"] = "PermissionError";
+  TrackQuickActionFailureReason["ValidationError"] = "ValidationError";
+  TrackQuickActionFailureReason["UnknownError"] = "UnknownError";
+  return TrackQuickActionFailureReason;
+}({});
 var uiActionSubjectIds = {
   DownloadAction: 'downloadDocument',
   PreviewAction: 'invokePreviewScreen',

package/dist/esm/version.json

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

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["popupMountPointId", "onClose"],
-  _excluded2 = ["details"];
+  _excluded2 = ["details", "enableImprovedPreviewAction"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
@@ -70,10 +70,12 @@ function _previewFunction() {
 }
 export default (function (_ref2) {
   var details = _ref2.details,
+    enableImprovedPreviewAction = _ref2.enableImprovedPreviewAction,
     rest = _objectWithoutProperties(_ref2, _excluded2);
+  var previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   return {
     id: 'preview-content',
-    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+    text: /*#__PURE__*/React.createElement(FormattedMessage, previewText),
     promise: function promise(props) {
       return previewFunction(_objectSpread(_objectSpread({
         popupMountPointId: 'twp-editor-preview-iframe',

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

@@ -24,6 +24,7 @@ import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import { tokens } from '../../utils/token';
 import { css, jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
@@ -58,6 +59,7 @@ export var BlockCard = function BlockCard(_ref) {
     handleInvoke: handleInvoke,
     extensionKey: extensionKey
   };
+  var enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     var ui = {
       hideElevation: true
@@ -140,7 +142,7 @@ export var BlockCard = function BlockCard(_ref) {
         isSelected: isSelected
       });
     case 'resolved':
-      var resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform);
+      var resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform, enableImprovedPreviewAction);
       if (onResolve) {
         onResolve({
           title: resolvedViewProps.title,

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
@@ -12,7 +13,8 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { CardDisplay } from '../../constants';
 import { fireLinkClickedEvent } from '../../utils/analytics/click';
-export function CardWithUrlContent(_ref) {
+import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
+function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
     isSelected = _ref.isSelected,
@@ -258,4 +260,11 @@ export function CardWithUrlContent(_ref) {
         onIframeFocus: onIframeFocus
       });
   }
-}
+}
+export var CardWithUrlContent = function CardWithUrlContent(props) {
+  return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+    url: props.url,
+    appearance: props.appearance,
+    id: props.id
+  }, /*#__PURE__*/React.createElement(Component, props)) : /*#__PURE__*/React.createElement(Component, props);
+};

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

@@ -7,6 +7,9 @@ import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
 import { openPreviewModal } from '../../../../../EmbedModal/utils';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../../../messages';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 var PreviewAction = function PreviewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -21,6 +24,8 @@ var PreviewAction = function PreviewAction(props) {
     isSupportTheming = props.isSupportTheming;
   var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
   var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  var enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
+  var previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
     var embedModal = function embedModal() {
       return openPreviewModal({
@@ -39,7 +44,8 @@ var PreviewAction = function PreviewAction(props) {
         if (_onClick) {
           _onClick();
         }
-      }
+      },
+      content: /*#__PURE__*/React.createElement(FormattedMessage, previewText)
     });
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

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

@@ -47,7 +47,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     testId: 'smart-action-preview-action',
     content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
     icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
-      label: "Full screen view"
+      label: "Open preview"
     }),
     tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview)
   }

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

@@ -17,6 +17,8 @@ import createStatusUpdateRequest from '../../../../../utils/actions/create-statu
 import useResolve from '../../../../../state/hooks/use-resolve';
 import { LozengeActionErrorMessages } from './lozenge-action-error/types';
 import { useFlexibleUiAnalyticsContext } from '../../../../../state/flexible-ui-context';
+import { TrackQuickActionType } from '../../../../../utils/analytics/analytics';
+import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
 var validateItems = function validateItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var text = arguments.length > 1 ? arguments[1] : undefined;
@@ -65,11 +67,7 @@ var LozengeAction = function LozengeAction(_ref) {
   var reload = useResolve();
   //TODO EDM-6583 Replace usage of useFlexibleUiAnalyticsContext with linking platform analytics context from find team.
   var analytics = useFlexibleUiAnalyticsContext();
-  var invoke = useInvoke({
-    started: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted,
-    success: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess,
-    failed: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed
-  });
+  var invoke = useInvoke();
   useEffect(function () {
     setSelected({
       text: text,
@@ -88,47 +86,52 @@ var LozengeAction = function LozengeAction(_ref) {
           case 0:
             setIsOpen(args.isOpen);
             if (!args.isOpen) {
-              _context.next = 22;
+              _context.next = 24;
               break;
             }
             analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionClickedEvent();
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted({
+              smartLinkActionType: TrackQuickActionType.StatusUpdate
+            });
             if (!(!isLoaded && action !== null && action !== void 0 && action.read)) {
-              _context.next = 22;
+              _context.next = 24;
               break;
             }
-            _context.prev = 4;
+            _context.prev = 5;
             setIsLoading(true);
-            _context.next = 8;
+            _context.next = 9;
             return invoke(action.read, extractLozengeActionItems);
-          case 8:
+          case 9:
             responseItems = _context.sent;
             validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
             setItems(validItems);
             setIsLoaded(true);
             if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
+              analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(permissionLoadErrorAnalyticsPayload);
               setErrorMessage(LozengeActionErrorMessages.noData);
               setIsLoaded(false);
             }
-            _context.next = 19;
+            _context.next = 21;
             break;
-          case 15:
-            _context.prev = 15;
-            _context.t0 = _context["catch"](4);
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](5);
             setErrorMessage(LozengeActionErrorMessages.unknown);
             setIsLoaded(false);
-          case 19:
-            _context.prev = 19;
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(unknownLoadErrorAnalyticsPayload);
+          case 21:
+            _context.prev = 21;
             setIsLoading(false);
-            return _context.finish(19);
-          case 22:
+            return _context.finish(21);
+          case 24:
             if (!args.isOpen) {
               setErrorMessage(undefined);
             }
-          case 23:
+          case 25:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 15, 19, 22]]);
+      }, _callee, null, [[5, 16, 21, 24]]);
     }));
     return function (_x) {
       return _ref3.apply(this, arguments);
@@ -151,7 +154,7 @@ var LozengeAction = function LozengeAction(_ref) {
             analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionListItemClickedEvent();
             updateAction = action === null || action === void 0 ? void 0 : action.update;
             if (!(updateAction && id)) {
-              _context2.next = 16;
+              _context2.next = 17;
               break;
             }
             setIsLoading(true);
@@ -167,34 +170,39 @@ var LozengeAction = function LozengeAction(_ref) {
             setIsLoaded(false);
             setIsOpen(false);
             setItems([]);
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess({
+              smartLinkActionType: TrackQuickActionType.StatusUpdate
+            });
             if (!url) {
-              _context2.next = 16;
+              _context2.next = 17;
               break;
             }
-            _context2.next = 16;
+            _context2.next = 17;
             return reload(url, true, undefined, linkId);
-          case 16:
-            _context2.next = 22;
+          case 17:
+            _context2.next = 23;
             break;
-          case 18:
-            _context2.prev = 18;
+          case 19:
+            _context2.prev = 19;
             _context2.t0 = _context2["catch"](0);
             setIsLoading(false);
             if (isInvokeCustomError(_context2.t0)) {
               setErrorMessage(_context2.t0.message);
+              analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(validationUpdateErrorAnalyticsPayload);
             } else {
               setErrorMessage(LozengeActionErrorMessages.updateFailed);
+              analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(unknownUpdateErrorAnalyticsPayload);
             }
-          case 22:
+          case 23:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 18]]);
+      }, _callee2, null, [[0, 19]]);
     }));
     return function (_x2, _x3, _x4) {
       return _ref4.apply(this, arguments);
     };
-  }(), [action === null || action === void 0 ? void 0 : action.update, analytics === null || analytics === void 0 ? void 0 : analytics.ui, invoke, linkId, reload, url]);
+  }(), [action === null || action === void 0 ? void 0 : action.update, analytics, invoke, linkId, reload, url]);
   var dropdownItemGroup = useMemo(function () {
     if (errorMessage) {
       return jsx(LozengeActionError, {

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-analytics.js

@@ -0,0 +1,21 @@
+import { TrackQuickActionFailureReason, TrackQuickActionType } from '../../../../../utils/analytics/analytics';
+export var unknownLoadErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.UnknownError,
+  step: 'load'
+};
+export var permissionLoadErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.PermissionError,
+  step: 'load'
+};
+export var unknownUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.UnknownError,
+  step: 'update'
+};
+export var validationUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.ValidationError,
+  step: 'update'
+};

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -6,7 +6,7 @@ import { getTruncateStyles } from '../../../utils';
 export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
-export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
+export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 export var textStyles = function textStyles(maxLines) {
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));
 };

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -10,9 +11,11 @@ import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
+import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
+    id = _ref.id,
     analyticsHandler = _ref.analyticsHandler,
     analytics = _ref.analytics,
     _ref$canOpen = _ref.canOpen,
@@ -122,7 +125,23 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [closeOnChildClick, hideCard]);
   var content = useCallback(function (_ref2) {
     var update = _ref2.update;
-    return jsx(HoverCardContent, {
+    return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
+      url: url,
+      appearance: CardDisplay.HoverCardPreview,
+      id: id
+    }, jsx(HoverCardContent, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      analytics: analytics,
+      cardActions: filteredActions,
+      cardState: linkState,
+      onActionClick: onActionClick,
+      onResolve: update,
+      renderers: renderers,
+      showServerActions: showServerActions,
+      url: url,
+      id: id
+    })) : jsx(HoverCardContent, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
@@ -134,7 +153,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       showServerActions: showServerActions,
       url: url
     });
-  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   var trigger = useCallback(function (triggerProps) {
     return jsx("span", {
       ref: parentSpan

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
@@ -8,8 +11,27 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, toActionableMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
 import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
-export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+export var toFooterActions = function toFooterActions(cardActions, onActionClick, enableImprovedPreviewAction) {
+  var appearance = enableImprovedPreviewAction ? {
+    appearance: 'primary'
+  } : undefined;
+  var previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   return cardActions.map(function (action) {
+    if (action.id === 'preview-content') {
+      return _objectSpread({
+        content: /*#__PURE__*/React.createElement(FormattedMessage, previewText),
+        name: ActionName.CustomAction,
+        onClick: function onClick() {
+          if (onActionClick) {
+            onActionClick(action.id);
+          }
+          return action.invoke();
+        },
+        testId: action.id
+      }, appearance);
+    }
     return {
       content: action.text,
       name: ActionName.CustomAction,
@@ -37,6 +59,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     onActionClick = _ref.onActionClick,
     extensionKey = _ref.extensionKey;
   var showActionableElement = useFeatureFlag('enableActionableElement');
+  var enableImprovedPreviewAction = useFeatureFlag('enableImprovedPreviewAction');
   useEffect(function () {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
@@ -46,8 +69,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     });
   }, [analytics.ui, cardState.status]);
   var footerActions = useMemo(function () {
-    return toFooterActions(cardActions, onActionClick);
-  }, [cardActions, onActionClick]);
+    return toFooterActions(cardActions, onActionClick, Boolean(enableImprovedPreviewAction));
+  }, [cardActions, onActionClick, enableImprovedPreviewAction]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var _useMemo = useMemo(function () {
       var types = data ? extractType(data) : undefined;

package/dist/types/extractors/block/index.d.ts

@@ -5,6 +5,6 @@ import { ExtractBlockOpts } from './types';
 import { CardPlatform } from '../../view/Card';
 import { BlockCardResolvedViewProps } from '../../view/BlockCard';
 import { ActionProps } from '../../view/BlockCard/components/Action';
-export declare const extractBlockActions: (props: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, opts?: ExtractBlockOpts, platform?: CardPlatform, meta?: JsonLd.Meta.BaseMeta) => ActionProps[];
+export declare const extractBlockActions: (props: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, opts?: ExtractBlockOpts, platform?: CardPlatform, meta?: JsonLd.Meta.BaseMeta, enableImprovedPreviewAction?: boolean) => ActionProps[];
 export declare const extractBlockUsers: (jsonLd: JsonLd.Data.BaseData) => LinkPerson[] | undefined;
-export declare const extractBlockProps: (jsonLd: JsonLd.Data.BaseData, meta?: JsonLd.Meta.BaseMeta, opts?: ExtractBlockOpts, renderers?: CardProviderRenderers, platform?: CardPlatform) => BlockCardResolvedViewProps;
+export declare const extractBlockProps: (jsonLd: JsonLd.Data.BaseData, meta?: JsonLd.Meta.BaseMeta, opts?: ExtractBlockOpts, renderers?: CardProviderRenderers, platform?: CardPlatform, enableImprovedPreviewAction?: boolean) => BlockCardResolvedViewProps;

package/dist/types/extractors/block/types.d.ts

@@ -9,4 +9,5 @@ export interface ExtractBlockOpts {
     extensionKey?: string;
     source?: CardInnerAppearance;
     testId?: string;
+    enableImprovedPreviewAction?: boolean;
 }

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

@@ -2,7 +2,7 @@ import { JsonLd } from 'json-ld-types';
 import { CardPlatform } from '../../../view/Card/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
 import { ExtractBlockOpts } from '../../block/types';
-export declare const extractPreviewAction: ({ extensionKey, viewProps, jsonLd, handleInvoke, testId, platform, origin, source, analytics, meta, }: ExtractBlockOpts & {
+export declare const extractPreviewAction: ({ extensionKey, viewProps, jsonLd, handleInvoke, testId, platform, origin, source, analytics, meta, enableImprovedPreviewAction, }: ExtractBlockOpts & {
     viewProps: BlockCardResolvedViewProps;
     jsonLd: JsonLd.Data.BaseData;
     platform?: JsonLd.Primitives.Platforms | undefined;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_improved' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -1,5 +1,6 @@
 import { AnalyticsHandler, AnalyticsName, AnalyticsPayload } from '../../utils/types';
 import { CommonEventProps, ConnectFailedEventProps, ConnectSucceededEventProps, InstrumentEventProps, InvokeFailedEventProps, InvokeSucceededEventProps, ScreenAuthPopupEventProps, TrackAppAccountConnectedProps, UiActionClickedEventProps, UiAuthAlternateAccountEventProps, UiAuthEventProps, UiCardClickedEventProps, UiClosedAuthEventProps, UiHoverCardDismissedEventProps, UiHoverCardOpenLinkClickedEventProps, UiHoverCardViewedEventProps, UiIframeDwelledEventProps, UiIframeFocusedEventProps, UiRenderFailedEventProps, UiRenderSuccessEventProps } from '../../utils/analytics/types';
+import { TrackQuickActionFailureReason, TrackQuickActionType } from '../../utils/analytics/analytics';
 import { SmartLinkActionType } from '@atlaskit/linking-types';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -249,19 +250,21 @@ export declare const useSmartLinkAnalytics: (url: string, _dispatchAnalytics?: A
          * This fires a tracking event before an action invoke api call is made
          */
         smartLinkQuickActionStarted: (props: {
-            smartLinkActionType: SmartLinkActionType;
+            smartLinkActionType: SmartLinkActionType | TrackQuickActionType;
         }) => void;
         /**
          * This fires a tracking event after an action invoke api call is successful
          */
         smartLinkQuickActionSuccess: (props: {
-            smartLinkActionType: SmartLinkActionType;
+            smartLinkActionType: SmartLinkActionType | TrackQuickActionType;
         }) => void;
         /**
          * This fires a tracking event after an action invoke api call has failed
          */
         smartLinkQuickActionFailed: (props: {
-            smartLinkActionType: SmartLinkActionType;
+            smartLinkActionType: SmartLinkActionType | TrackQuickActionType;
+            reason?: TrackQuickActionFailureReason;
+            step?: string;
         }) => void;
     };
     screen: {

package/dist/types/state/flexible-ui-context/index.d.ts

@@ -51,13 +51,15 @@ export declare const FlexibleUiAnalyticsContext: import("react").Context<{
             [key: string]: any;
         }) => void;
         smartLinkQuickActionStarted: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
         }) => void;
         smartLinkQuickActionSuccess: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
         }) => void;
         smartLinkQuickActionFailed: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
+            reason?: import("../../utils/analytics/analytics").TrackQuickActionFailureReason | undefined;
+            step?: string | undefined;
         }) => void;
     };
     screen: {
@@ -107,13 +109,15 @@ export declare const useFlexibleUiAnalyticsContext: () => {
             [key: string]: any;
         }) => void;
         smartLinkQuickActionStarted: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
         }) => void;
         smartLinkQuickActionSuccess: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
         }) => void;
         smartLinkQuickActionFailed: (props: {
-            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+            smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
+            reason?: import("../../utils/analytics/analytics").TrackQuickActionFailureReason | undefined;
+            step?: string | undefined;
         }) => void;
     };
     screen: {

package/dist/types/state/hooks/use-invoke/index.d.ts

@@ -1,9 +1,3 @@
 import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
-import { AnalyticsFacade } from '../../../state/analytics';
-type InvokeRequestTracker = {
-    started?: AnalyticsFacade['track']['smartLinkQuickActionStarted'];
-    success?: AnalyticsFacade['track']['smartLinkQuickActionSuccess'];
-    failed?: AnalyticsFacade['track']['smartLinkQuickActionFailed'];
-};
-declare const useInvoke: ({ failed, started, success }?: InvokeRequestTracker) => (req: InvokeRequest, cb?: Function) => Promise<any>;
+declare const useInvoke: () => (req: InvokeRequest, cb?: Function) => Promise<any>;
 export default useInvoke;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -54,13 +54,15 @@ dispatchAnalytics?: AnalyticsHandler): {
                 [key: string]: any;
             }) => void;
             smartLinkQuickActionStarted: (props: {
-                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
             }) => void;
             smartLinkQuickActionSuccess: (props: {
-                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
             }) => void;
             smartLinkQuickActionFailed: (props: {
-                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType;
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../utils/analytics/analytics").TrackQuickActionType;
+                reason?: import("../../utils/analytics/analytics").TrackQuickActionFailureReason | undefined;
+                step?: string | undefined;
             }) => void;
         };
         screen: {