@atlaskit/smart-card 26.2.1 → 26.3.0

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

@@ -24,6 +24,8 @@ var _createStatusUpdateRequest = _interopRequireDefault(require("../../../../../
 var _useResolve = _interopRequireDefault(require("../../../../../state/hooks/use-resolve"));
 var _types = require("./lozenge-action-error/types");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var _analytics = require("../../../../../utils/analytics/analytics");
+var _lozengeActionAnalytics = require("./lozenge-action-analytics");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -76,11 +78,7 @@ var LozengeAction = function LozengeAction(_ref) {
   var reload = (0, _useResolve.default)();
   //TODO EDM-6583 Replace usage of useFlexibleUiAnalyticsContext with linking platform analytics context from find team.
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
-  var invoke = (0, _useInvoke.default)({
-    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 = (0, _useInvoke.default)();
   (0, _react2.useEffect)(function () {
     setSelected({
       text: text,
@@ -99,47 +97,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: _analytics.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.default);
-          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(_lozengeActionAnalytics.permissionLoadErrorAnalyticsPayload);
               setErrorMessage(_types.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(_types.LozengeActionErrorMessages.unknown);
             setIsLoaded(false);
-          case 19:
-            _context.prev = 19;
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(_lozengeActionAnalytics.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);
@@ -162,7 +165,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);
@@ -178,34 +181,39 @@ var LozengeAction = function LozengeAction(_ref) {
             setIsLoaded(false);
             setIsOpen(false);
             setItems([]);
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess({
+              smartLinkActionType: _analytics.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(_lozengeActionAnalytics.validationUpdateErrorAnalyticsPayload);
             } else {
               setErrorMessage(_types.LozengeActionErrorMessages.updateFailed);
+              analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(_lozengeActionAnalytics.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 = (0, _react2.useMemo)(function () {
     if (errorMessage) {
       return (0, _react.jsx)(_lozengeActionError.default, {

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validationUpdateErrorAnalyticsPayload = exports.unknownUpdateErrorAnalyticsPayload = exports.unknownLoadErrorAnalyticsPayload = exports.permissionLoadErrorAnalyticsPayload = void 0;
+var _analytics = require("../../../../../utils/analytics/analytics");
+var unknownLoadErrorAnalyticsPayload = {
+  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
+  reason: _analytics.TrackQuickActionFailureReason.UnknownError,
+  step: 'load'
+};
+exports.unknownLoadErrorAnalyticsPayload = unknownLoadErrorAnalyticsPayload;
+var permissionLoadErrorAnalyticsPayload = {
+  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
+  reason: _analytics.TrackQuickActionFailureReason.PermissionError,
+  step: 'load'
+};
+exports.permissionLoadErrorAnalyticsPayload = permissionLoadErrorAnalyticsPayload;
+var unknownUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
+  reason: _analytics.TrackQuickActionFailureReason.UnknownError,
+  step: 'update'
+};
+exports.unknownUpdateErrorAnalyticsPayload = unknownUpdateErrorAnalyticsPayload;
+var validationUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: _analytics.TrackQuickActionType.StatusUpdate,
+  reason: _analytics.TrackQuickActionFailureReason.ValidationError,
+  step: 'update'
+};
+exports.validationUpdateErrorAnalyticsPayload = validationUpdateErrorAnalyticsPayload;

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

@@ -15,7 +15,7 @@ exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])));
 var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N800, ")"));
 exports.contentStyles = contentStyles;
-var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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)");
+var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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)");
 exports.linkStyles = linkStyles;
 var textStyles = function textStyles(maxLines) {
   return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), (0, _utils.getTruncateStyles)(maxLines));

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.HoverCardComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
@@ -17,6 +18,7 @@ var _store = require("../../../state/store");
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
 var _styled = require("../styled");
 var _constants = require("../../../constants");
+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; }
 /** @jsx jsx */
@@ -24,6 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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,
@@ -133,7 +136,23 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [closeOnChildClick, hideCard]);
   var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
-    return (0, _react.jsx)(_HoverCardContent.default, {
+    return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+      url: url,
+      appearance: _constants.CardDisplay.HoverCardPreview,
+      id: id
+    }, (0, _react.jsx)(_HoverCardContent.default, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      analytics: analytics,
+      cardActions: filteredActions,
+      cardState: linkState,
+      onActionClick: onActionClick,
+      onResolve: update,
+      renderers: renderers,
+      showServerActions: showServerActions,
+      url: url,
+      id: id
+    })) : (0, _react.jsx)(_HoverCardContent.default, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
@@ -145,7 +164,7 @@ 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 = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toFooterActions = exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _linkProvider = require("@atlaskit/link-provider");
 var _extractors = require("@atlaskit/linking-common/extractors");
@@ -16,10 +17,31 @@ var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _utils = require("../../../utils");
 var _SnippetOrPreview = _interopRequireDefault(require("../../SnippetOrPreview"));
 var _extractMetadata = require("../../../../../extractors/hover/extractMetadata");
+var _messages = require("../../../../../messages");
+var _reactIntlNext = require("react-intl-next");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+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 toFooterActions = function toFooterActions(cardActions, onActionClick, enableImprovedPreviewAction) {
+  var appearance = enableImprovedPreviewAction ? {
+    appearance: 'primary'
+  } : undefined;
+  var previewText = enableImprovedPreviewAction ? _messages.messages.preview_improved : _messages.messages.preview;
   return cardActions.map(function (action) {
+    if (action.id === 'preview-content') {
+      return _objectSpread({
+        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, previewText),
+        name: _constants.ActionName.CustomAction,
+        onClick: function onClick() {
+          if (onActionClick) {
+            onActionClick(action.id);
+          }
+          return action.invoke();
+        },
+        testId: action.id
+      }, appearance);
+    }
     return {
       content: action.text,
       name: _constants.ActionName.CustomAction,
@@ -48,6 +70,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     onActionClick = _ref.onActionClick,
     extensionKey = _ref.extensionKey;
   var showActionableElement = (0, _linkProvider.useFeatureFlag)('enableActionableElement');
+  var enableImprovedPreviewAction = (0, _linkProvider.useFeatureFlag)('enableImprovedPreviewAction');
   (0, _react.useEffect)(function () {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
@@ -57,8 +80,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     });
   }, [analytics.ui, cardState.status]);
   var footerActions = (0, _react.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 = (0, _react.useMemo)(function () {
       var types = data ? (0, _extractors.extractType)(data) : undefined;

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

@@ -21,7 +21,7 @@ const extractBlockIcon = jsonLd => {
   }
 };
 const extractBlockDetails = jsonLd => [extractCommentCount(jsonLd), extractProgrammingLanguage(jsonLd), extractSubscriberCount(jsonLd), extractAttachmentCount(jsonLd)].filter(detail => !!detail);
-export const extractBlockActions = (props, jsonLd, opts, platform, meta) => {
+export const extractBlockActions = (props, jsonLd, opts, platform, meta, enableImprovedPreviewAction) => {
   if (opts) {
     const {
       handleInvoke
@@ -32,7 +32,8 @@ export const extractBlockActions = (props, jsonLd, opts, platform, meta) => {
       viewProps: props,
       jsonLd,
       platform,
-      meta
+      meta,
+      enableImprovedPreviewAction
     });
 
     // The previewAction should always be the last action
@@ -63,7 +64,7 @@ export const extractBlockUsers = jsonLd => {
     return updatedByMembers || createdByMembers;
   }
 };
-export const extractBlockProps = (jsonLd, meta, opts, renderers, platform) => {
+export const extractBlockProps = (jsonLd, meta, opts, renderers, platform, enableImprovedPreviewAction) => {
   const props = {
     link: extractLink(jsonLd),
     title: extractTitle(jsonLd),
@@ -80,6 +81,6 @@ export const extractBlockProps = (jsonLd, meta, opts, renderers, platform) => {
   };
   return {
     ...props,
-    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta, enableImprovedPreviewAction)
   };
 };

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

@@ -46,7 +46,8 @@ export const extractPreviewAction = ({
   origin,
   source = 'block',
   analytics,
-  meta
+  meta,
+  enableImprovedPreviewAction
 }) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
@@ -70,7 +71,8 @@ export const extractPreviewAction = ({
       onViewActionClick: () => {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
       },
-      isSupportTheming: extractIsSupportTheming(meta)
+      isSupportTheming: extractIsSupportTheming(meta),
+      enableImprovedPreviewAction
     });
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/es2019/messages.js

@@ -215,6 +215,12 @@ export const messages = 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/es2019/state/actions/index.js

@@ -16,14 +16,21 @@ export const useSmartCardActions = (id, url, analytics) => {
     getState,
     dispatch
   } = store;
-  const {
-    details,
-    status,
-    metadataStatus
-  } = getState()[url] || {
-    status: SmartLinkStatus.Pending,
-    details: undefined
-  };
+  const getSmartLinkState = useCallback(() => {
+    var _getState$url;
+    const {
+      details,
+      status,
+      metadataStatus
+    } = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+      status: SmartLinkStatus.Pending
+    };
+    return {
+      details,
+      status,
+      metadataStatus
+    };
+  }, [getState, url]);
   const setMetadataStatus = useCallback(metadataStatus => {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url
@@ -31,6 +38,9 @@ export const useSmartCardActions = (id, url, analytics) => {
   }, [dispatch, url]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false, isMetadataRequest = false) => resolveUrl(resourceUrl, isReloading, isMetadataRequest, id), [id, resolveUrl, url]);
   const register = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url
@@ -38,23 +48,33 @@ export const useSmartCardActions = (id, url, analytics) => {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   const reload = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(url => resolve(url, true));
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   const loadMetadata = useCallback(() => {
+    const {
+      metadataStatus
+    } = getSmartLinkState();
     //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]);
   const authorize = useCallback(appearance => {
+    const {
+      details,
+      status
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     const extensionKey = getExtensionKey(details);
     const services = getServices(details);
@@ -106,7 +126,7 @@ export const 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]);
   const invoke = useCallback(async (opts, appearance) => {
     const {
       key,

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

@@ -1,33 +1,14 @@
 import { useCallback } from 'react';
 import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-const useInvoke = ({
-  failed,
-  started,
-  success
-} = {}) => {
+const useInvoke = () => {
   const {
     connections
   } = useSmartLinkContext();
   const clientExt = useSmartLinkClientExtension(connections.client);
   return useCallback(async (req, cb) => {
-    var _req$action;
-    const smartLinkActionType = req === null || req === void 0 ? void 0 : (_req$action = req.action) === null || _req$action === void 0 ? void 0 : _req$action.actionType;
-    try {
-      started && started({
-        smartLinkActionType
-      });
-      const response = await clientExt.invoke(req);
-      success && success({
-        smartLinkActionType
-      });
-      return cb ? cb(response) : response;
-    } catch (err) {
-      failed && failed({
-        smartLinkActionType
-      });
-      throw err;
-    }
-  }, [clientExt, failed, started, success]);
+    const response = await clientExt.invoke(req);
+    return cb ? cb(response) : response;
+  }, [clientExt]);
 };
 export default useInvoke;

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

@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import { addMetadataToExperience } from '../../analytics';
 import { getStatus } from '../../helpers';
 import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction } from '@atlaskit/linking-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ERROR_MESSAGE_FATAL, ERROR_MESSAGE_METADATA, ERROR_MESSAGE_OAUTH } from '../../actions/constants';
 import { getUnauthorizedJsonLd } from '../../../utils/jsonld';
 import { SmartLinkStatus } from '../../../constants';
@@ -75,6 +77,20 @@ const useResolve = () => {
       }
     }
   }, [getState, setMetadataStatus, dispatch]);
+  const handleResolvedLinkSuccess = useCallback((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(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response, undefined, undefined, isMetadataRequest));
+    }
+  }, [setMetadataStatus, dispatch]);
   const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false, isMetadataRequest) => {
     const hostname = new URL(resourceUrl).hostname;
     const nextStatus = response ? getStatus(response) : 'fatal';
@@ -97,20 +113,20 @@ const useResolve = () => {
       handleResolvedLinkError(resourceUrl, new APIError('error', hostname, 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(cardAction(ACTION_RELOADING, {
-        url: resourceUrl
-      }, response));
+    if (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
+       */
+      unstable_batchedUpdates(() => {
+        handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
+      });
     } else {
-      dispatch(cardAction(ACTION_RESOLVED, {
-        url: resourceUrl
-      }, response, undefined, undefined, isMetadataRequest));
+      handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
+  }, [handleResolvedLinkError, handleResolvedLinkSuccess, hasAuthFlowSupported]);
   return useCallback(async (url, isReloading = false, isMetadataRequest = false, id = '') => {
     const {
       details

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

@@ -0,0 +1,35 @@
+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 const SmartLinkAnalyticsContext = ({
+  children,
+  url,
+  appearance,
+  id
+}) => {
+  const {
+    details,
+    status
+  } = useSmartLinkState(url);
+  const resolvedAttributes = getResolvedAttributes({
+    url
+  }, details, status);
+  const {
+    urlHash
+  } = getUrlAttributes(url);
+  const isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
+  const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      attributes: {
+        ...resolvedAttributes,
+        urlHash,
+        display,
+        id
+      }
+    }
+  }, children);
+};

package/dist/es2019/utils/analytics/analytics.js

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

package/dist/es2019/version.json

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