@atlaskit/smart-card 15.5.0 → 16.2.0

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkAnalytics = void 0;
+
+var _analytics = require("../../utils/analytics");
+
+var _react = require("react");
+
+var _ufoExperiences = require("./ufoExperiences");
+
+var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
+  var ui = (0, _react.useMemo)(function () {
+    return {
+      authEvent: function authEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.uiAuthEvent)(display, definitionId, extensionKey));
+      },
+      authAlternateAccountEvent: function authAlternateAccountEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.uiAuthAlternateAccountEvent)(display, definitionId, extensionKey));
+      },
+      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(display, definitionId, extensionKey));
+      },
+      actionClickedEvent: function actionClickedEvent(providerKey, actionType, display) {
+        return dispatchAnalytics((0, _analytics.uiActionClickedEvent)(providerKey, actionType, display));
+      },
+      closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.uiClosedAuthEvent)(display, definitionId, extensionKey));
+      },
+      renderSuccessEvent: function renderSuccessEvent(display, id, definitionId, extensionKey) {
+        (0, _ufoExperiences.succeedUfoExperience)('smart-link-rendered', id, {
+          extensionKey: extensionKey,
+          display: display
+        }); // UFO will disregard this if authentication experience has not yet been started
+
+        (0, _ufoExperiences.succeedUfoExperience)('smart-link-authenticated', id, {
+          display: display
+        });
+        dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  var operational = (0, _react.useMemo)(function () {
+    return {
+      resolvedEvent: function resolvedEvent(id, definitionId, extensionKey, resourceType) {
+        return dispatchAnalytics((0, _analytics.resolvedEvent)(id, definitionId, extensionKey, resourceType));
+      },
+      unresolvedEvent: function unresolvedEvent(id, status, definitionId, extensionKey, resourceType) {
+        return dispatchAnalytics((0, _analytics.unresolvedEvent)(id, status, definitionId, extensionKey, resourceType));
+      },
+      invokeSucceededEvent: function invokeSucceededEvent(id, providerKey, actionType, display) {
+        return dispatchAnalytics((0, _analytics.invokeSucceededEvent)(id, providerKey, actionType, display));
+      },
+      invokeFailedEvent: function invokeFailedEvent(id, providerKey, actionType, display, reason) {
+        return dispatchAnalytics((0, _analytics.invokeFailedEvent)(id, providerKey, actionType, display, reason));
+      },
+      connectSucceededEvent: function connectSucceededEvent(id, definitionId, extensionKey) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-authenticated', id, {
+          extensionKey: extensionKey,
+          status: 'success'
+        });
+        dispatchAnalytics((0, _analytics.connectSucceededEvent)(definitionId, extensionKey));
+      },
+      connectFailedEvent: function connectFailedEvent(id, definitionId, extensionKey, status) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-authenticated', id, {
+          extensionKey: extensionKey,
+          status: status
+        });
+        dispatchAnalytics((0, _analytics.connectFailedEvent)(definitionId, extensionKey, status));
+      },
+      instrument: function instrument(id, status, definitionId, extensionKey, resourceType, error) {
+        var event = (0, _analytics.instrumentEvent)(id, status, definitionId, extensionKey, resourceType, error);
+
+        if (event) {
+          dispatchAnalytics(event);
+        }
+      }
+    };
+  }, [dispatchAnalytics]);
+  var track = (0, _react.useMemo)(function () {
+    return {
+      appAccountConnected: function appAccountConnected(definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.trackAppAccountConnected)(definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  var screen = (0, _react.useMemo)(function () {
+    return {
+      authPopupEvent: function authPopupEvent(definitionId, extensionKey) {
+        return dispatchAnalytics((0, _analytics.screenAuthPopupEvent)(definitionId, extensionKey));
+      }
+    };
+  }, [dispatchAnalytics]);
+  return (0, _react.useMemo)(function () {
+    return {
+      ui: ui,
+      operational: operational,
+      track: track,
+      screen: screen
+    };
+  }, [ui, operational, track, screen]);
+};
+
+exports.useSmartLinkAnalytics = useSmartLinkAnalytics;

package/dist/cjs/state/context/provider.js

@@ -10,8 +10,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.SmartCardProvider = SmartCardProvider;
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _redux = require("redux");
@@ -20,8 +18,6 @@ var _reducers = require("../reducers");
 
 var _ = require(".");
 
-var _constants = require("../actions/constants");
-
 var _client = _interopRequireDefault(require("../../client"));
 
 var _preview = require("../../extractors/common/preview");
@@ -32,14 +28,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function SmartCardProvider(_ref) {
   var storeOptions = _ref.storeOptions,
       customClient = _ref.client,
-      customCacheOptions = _ref.cacheOptions,
       customAuthFlow = _ref.authFlow,
       children = _ref.children,
       renderers = _ref.renderers;
@@ -53,10 +44,6 @@ function SmartCardProvider(_ref) {
     var client = customClient || new _client.default();
     var store = (0, _redux.createStore)(_reducers.cardReducer, initialState);
     var authFlow = customAuthFlow || 'oauth2';
-    var cacheOptions = customCacheOptions || {
-      maxAge: _constants.MAX_RELOAD_DELAY,
-      maxLoadingDelay: _constants.MAX_LOADING_DELAY
-    };
 
     var getPreview = function getPreview(url, platform) {
       var cardState = (0, _helpers.getUrl)(store, url);
@@ -70,14 +57,14 @@ function SmartCardProvider(_ref) {
       connections: {
         client: client
       },
-      config: _objectSpread(_objectSpread({}, cacheOptions), {}, {
+      config: {
         authFlow: authFlow
-      }),
+      },
       extractors: {
         getPreview: getPreview
       }
     };
-  }, [customClient, customCacheOptions, customAuthFlow, storeOptions, renderers]);
+  }, [customClient, customAuthFlow, storeOptions, renderers]);
   return /*#__PURE__*/_react.default.createElement(_.SmartCardContext.Provider, {
     value: parentContext || providerValue
   }, children);

package/dist/cjs/state/helpers.js

@@ -19,8 +19,7 @@ exports.getByDefinitionId = getByDefinitionId;
 
 var getUrl = function getUrl(store, url) {
   return store.getState()[url] || {
-    status: 'pending',
-    lastUpdatedAt: Date.now()
+    status: 'pending'
   };
 };
 

package/dist/cjs/state/hooks/useSmartLink.js

@@ -28,16 +28,15 @@ function useSmartLink(id, url, dispatchAnalytics) {
   var config = (0, _config.useSmartLinkConfig)();
   var renderers = (0, _renderers.useSmartLinkRenderers)(); // NB: used to propagate errors from hooks to error boundaries.
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      setState = _useState2[1]; // Register the current card.
+      error = _useState2[0],
+      setError = _useState2[1]; // Register the current card.
 
 
   var register = function register() {
     actions.register().catch(function (err) {
-      return setState(function () {
-        throw err;
-      });
+      return setError(err);
     });
   }; // AFP-2511 TODO: Fix automatic suppressions below
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -50,6 +49,7 @@ function useSmartLink(id, url, dispatchAnalytics) {
     actions: actions,
     config: config,
     analytics: analytics,
-    renderers: renderers
+    renderers: renderers,
+    error: error
   };
 }

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

@@ -28,8 +28,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var cardReducerMap = (_cardReducerMap = {}, (0, _defineProperty2.default)(_cardReducerMap, actions.ACTION_PENDING, function (_state, _ref) {
   var type = _ref.type;
   return {
-    status: type,
-    lastUpdatedAt: Date.now()
+    status: type
   };
 }), (0, _defineProperty2.default)(_cardReducerMap, actions.ACTION_RESOLVING, function (state, _ref2) {
   var type = _ref2.type;
@@ -52,7 +51,6 @@ var cardReducerMap = (_cardReducerMap = {}, (0, _defineProperty2.default)(_cardR
     nextState.status = type;
   }
 
-  nextState.lastUpdatedAt = Date.now();
   return nextState;
 }), (0, _defineProperty2.default)(_cardReducerMap, actions.ACTION_ERROR, function (state, _ref4) {
   var type = _ref4.type,
@@ -75,12 +73,9 @@ var cardReducer = function cardReducer(state, action) {
     var cardState = state[action.url]; // Card may have reached the same state on account of multiple of the same
     // URL being present in an editor session. E.g. page with N links to one resource.
 
-    var hasSameStatus = cardState && cardState.status === action.type; // Card needs to be refreshed. In this case, we ignore the same status pragma which
-    // is described above - this forces a rerender for all links of the same status.
-
-    var hasExpired = action.hasExpired;
+    var hasSameStatus = cardState && cardState.status === action.type;
 
-    if (!hasExpired && hasSameStatus) {
+    if (hasSameStatus) {
       return state;
     } else {
       var nextState = cardReducerMap[action.type](cardState, action);

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

@@ -5,10 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uiRenderFailedEvent = exports.uiRenderSuccessEvent = exports.screenAuthPopupEvent = exports.uiClosedAuthEvent = exports.uiActionClickedEvent = exports.uiCardClickedEvent = exports.uiAuthAlternateAccountEvent = exports.uiAuthEvent = exports.trackAppAccountConnected = exports.connectFailedEvent = exports.connectSucceededEvent = exports.invokeFailedEvent = exports.invokeSucceededEvent = exports.unresolvedEvent = exports.resolvedEvent = exports.fireSmartLinkEvent = exports.context = exports.ANALYTICS_CHANNEL = void 0;
+exports.uiRenderFailedEvent = exports.uiRenderSuccessEvent = exports.screenAuthPopupEvent = exports.uiClosedAuthEvent = exports.uiActionClickedEvent = exports.uiCardClickedEvent = exports.uiAuthAlternateAccountEvent = exports.uiAuthEvent = exports.trackAppAccountConnected = exports.connectFailedEvent = exports.connectSucceededEvent = exports.invokeFailedEvent = exports.invokeSucceededEvent = exports.unresolvedEvent = exports.resolvedEvent = exports.fireSmartLinkEvent = exports.SmartLinkEvents = exports.context = exports.ANALYTICS_CHANNEL = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _version = require("../../version.json");
 
 var _performance = require("../performance");
@@ -26,6 +30,32 @@ var context = {
 };
 exports.context = context;
 
+var SmartLinkEvents = /*#__PURE__*/function () {
+  function SmartLinkEvents() {
+    (0, _classCallCheck2.default)(this, SmartLinkEvents);
+  }
+
+  (0, _createClass2.default)(SmartLinkEvents, [{
+    key: "insertSmartLink",
+    value: function insertSmartLink(url, type, createAnalyticsEvent) {
+      fireSmartLinkEvent({
+        action: 'inserted',
+        actionSubject: 'smartLink',
+        eventType: 'track',
+        attributes: {
+          type: type
+        },
+        nonPrivacySafeAttributes: {
+          domainName: url
+        }
+      }, createAnalyticsEvent);
+    }
+  }]);
+  return SmartLinkEvents;
+}();
+
+exports.SmartLinkEvents = SmartLinkEvents;
+
 var fireSmartLinkEvent = function fireSmartLinkEvent(payload, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);

package/dist/cjs/version.json

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

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

@@ -38,7 +38,8 @@ var BlockCard = function BlockCard(_ref) {
       isSelected = _ref.isSelected,
       onResolve = _ref.onResolve,
       testId = _ref.testId,
-      showActions = _ref.showActions;
+      showActions = _ref.showActions,
+      platform = _ref.platform;
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extractorOpts = {
@@ -56,7 +57,7 @@ var BlockCard = function BlockCard(_ref) {
       });
 
     case 'resolved':
-      var resolvedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts, renderers);
+      var resolvedViewProps = (0, _block.extractBlockProps)(data, meta, extractorOpts, renderers, platform);
 
       if (onResolve) {
         onResolve({

package/dist/cjs/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -5,12 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoadingCardLink = void 0;
+exports.LoadingCardLink = exports.loadingPlaceholderClassName = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
+var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
+exports.loadingPlaceholderClassName = loadingPlaceholderClassName;
+
 var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,
       url = _ref.url;
@@ -19,7 +22,8 @@ var LoadingCardLink = function LoadingCardLink(_ref) {
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
-    link: url
+    link: url,
+    className: loadingPlaceholderClassName
   });
 };
 

package/dist/cjs/view/CardWithUrl/component-lazy/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyCardWithUrlContent = LazyCardWithUrlContent;
+exports.default = LazyCardWithUrlContent;
 
 var _react = _interopRequireDefault(require("react"));
 

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

@@ -49,7 +49,8 @@ function CardWithUrlContent(_ref) {
       actions = _useSmartLink.actions,
       config = _useSmartLink.config,
       analytics = _useSmartLink.analytics,
-      renderers = _useSmartLink.renderers;
+      renderers = _useSmartLink.renderers,
+      error = _useSmartLink.error;
 
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
@@ -92,9 +93,13 @@ function CardWithUrlContent(_ref) {
 
   (0, _react.useEffect)(function () {
     if ((0, _helpers.isFinalState)(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui]);
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
+
+  if (error) {
+    throw error;
+  }
 
   switch (appearance) {
     case 'inline':
@@ -124,7 +129,8 @@ function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        showActions: showActions
+        showActions: showActions,
+        platform: platform
       });
 
     case 'embed':