@atlaskit/smart-card 23.10.0 → 23.10.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.10.2
+
+### Patch Changes
+
+- [`cb819660949`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb819660949) - [ux] Add a lonzenge to restricted links.
+
+## 23.10.1
+
+### Patch Changes
+
+- [`d88eda329c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d88eda329c1) - seperate chunk load errors into it's own analytics event and do retries when lazy loading smartcard-urlcardcontent fails
+
 ## 23.10.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -135,7 +135,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
-    defaultMessage: 'Restricted link',
+    defaultMessage: 'Restricted content',
     description: 'Message shown when a user does not have permissions to view an item'
   },
   invalid_permissions_description: {

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

@@ -616,6 +616,36 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         if (event) {
           dispatchAnalytics(applyCommonAttributes(event, commonAttributes));
         }
+      },
+
+      /**
+       * This fires an event that represents when a Smart Link renders unsuccessfuly.
+       * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param id The unique ID for this Smart Link.
+       * @param error: An error representing why the Smart Link render failed.
+       * @param errorInfo: Additional details about the error including the stack trace.
+       */
+      chunkloadFailedEvent: function chunkloadFailedEvent(_ref16) {
+        var display = _ref16.display,
+            error = _ref16.error,
+            errorInfo = _ref16.errorInfo,
+            extensionKey = _ref16.extensionKey,
+            definitionId = _ref16.definitionId,
+            resourceType = _ref16.resourceType,
+            destinationProduct = _ref16.destinationProduct,
+            destinationSubproduct = _ref16.destinationSubproduct,
+            location = _ref16.location;
+        dispatchAnalytics(applyCommonAttributes((0, _analytics.chunkloadFailedEvent)({
+          display: display,
+          error: error,
+          errorInfo: errorInfo,
+          extensionKey: extensionKey,
+          definitionId: definitionId,
+          resourceType: resourceType,
+          destinationProduct: destinationProduct,
+          destinationSubproduct: destinationSubproduct,
+          location: location
+        }), commonAttributes));
       }
     };
   }, [defaultId, commonAttributes, dispatchAnalytics]);
@@ -629,13 +659,13 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @returns
        */
-      appAccountConnected: function appAccountConnected(_ref16) {
-        var extensionKey = _ref16.extensionKey,
-            definitionId = _ref16.definitionId,
-            resourceType = _ref16.resourceType,
-            destinationProduct = _ref16.destinationProduct,
-            destinationSubproduct = _ref16.destinationSubproduct,
-            location = _ref16.location;
+      appAccountConnected: function appAccountConnected(_ref17) {
+        var extensionKey = _ref17.extensionKey,
+            definitionId = _ref17.definitionId,
+            resourceType = _ref17.resourceType,
+            destinationProduct = _ref17.destinationProduct,
+            destinationSubproduct = _ref17.destinationSubproduct,
+            location = _ref17.location;
         return dispatchAnalytics(applyCommonAttributes((0, _analytics.trackAppAccountConnected)(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           definitionId: definitionId,
@@ -652,9 +682,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
        * @param extensionKey The extensionKey of the Smart Link resolver invoked.
        * @returns
        */
-      appAccountAuthStarted: function appAccountAuthStarted(_ref17) {
-        var extensionKey = _ref17.extensionKey,
-            location = _ref17.location;
+      appAccountAuthStarted: function appAccountAuthStarted(_ref18) {
+        var extensionKey = _ref18.extensionKey,
+            location = _ref18.location;
         return dispatchAnalytics(applyCommonAttributes((0, _analytics.trackAppAccountAuthStarted)(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           location: location
@@ -672,13 +702,13 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @returns
        */
-      authPopupEvent: function authPopupEvent(_ref18) {
-        var extensionKey = _ref18.extensionKey,
-            definitionId = _ref18.definitionId,
-            resourceType = _ref18.resourceType,
-            destinationProduct = _ref18.destinationProduct,
-            destinationSubproduct = _ref18.destinationSubproduct,
-            location = _ref18.location;
+      authPopupEvent: function authPopupEvent(_ref19) {
+        var extensionKey = _ref19.extensionKey,
+            definitionId = _ref19.definitionId,
+            resourceType = _ref19.resourceType,
+            destinationProduct = _ref19.destinationProduct,
+            destinationSubproduct = _ref19.destinationSubproduct,
+            location = _ref19.location;
         return dispatchAnalytics(applyCommonAttributes((0, _analytics.screenAuthPopupEvent)(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           definitionId: definitionId,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.trackAppAccountAuthStarted = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = 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;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -584,4 +584,32 @@ var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent() {
   };
 };
 
-exports.uiLearnMoreLinkClickedEvent = uiLearnMoreLinkClickedEvent;
+exports.uiLearnMoreLinkClickedEvent = uiLearnMoreLinkClickedEvent;
+
+var chunkloadFailedEvent = function chunkloadFailedEvent(_ref19) {
+  var display = _ref19.display,
+      error = _ref19.error,
+      errorInfo = _ref19.errorInfo,
+      extensionKey = _ref19.extensionKey,
+      definitionId = _ref19.definitionId,
+      destinationProduct = _ref19.destinationProduct,
+      destinationSubproduct = _ref19.destinationSubproduct,
+      location = _ref19.location;
+  return {
+    action: 'chunkLoadFailed',
+    actionSubject: 'smartLink',
+    eventType: 'operational',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      error: error,
+      errorInfo: errorInfo,
+      display: display,
+      extensionKey: extensionKey,
+      definitionId: definitionId,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct,
+      location: location
+    })
+  };
+};
+
+exports.chunkloadFailedEvent = chunkloadFailedEvent;

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

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "ANALYTICS_CHANNEL", {
     return _analytics.ANALYTICS_CHANNEL;
   }
 });
+Object.defineProperty(exports, "chunkloadFailedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.chunkloadFailedEvent;
+  }
+});
 Object.defineProperty(exports, "connectFailedEvent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/index.js

@@ -7,7 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
+exports.sleep = exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.importWithRetry = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -374,4 +378,63 @@ var isIntersectionObserverSupported = function isIntersectionObserverSupported()
   return typeof IntersectionObserver !== 'undefined';
 };
 
-exports.isIntersectionObserverSupported = isIntersectionObserverSupported;
+exports.isIntersectionObserverSupported = isIntersectionObserverSupported;
+
+var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, ms);
+  });
+};
+
+exports.sleep = sleep;
+
+var importWithRetry = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(importFn) {
+    var retries,
+        interval,
+        _args = arguments;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            retries = _args.length > 1 && _args[1] !== undefined ? _args[1] : 2;
+            interval = _args.length > 2 && _args[2] !== undefined ? _args[2] : 500;
+            _context.prev = 2;
+            _context.next = 5;
+            return importFn();
+
+          case 5:
+            return _context.abrupt("return", _context.sent);
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](2);
+
+            if (!(_context.t0.name === 'ChunkLoadError' && retries > 0)) {
+              _context.next = 16;
+              break;
+            }
+
+            _context.next = 13;
+            return sleep(interval);
+
+          case 13:
+            return _context.abrupt("return", importWithRetry(importFn, retries - 1, interval));
+
+          case 16:
+            throw _context.t0;
+
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[2, 8]]);
+  }));
+
+  return function importWithRetry(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.importWithRetry = importWithRetry;

package/dist/cjs/version.json

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

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

@@ -25,13 +25,17 @@ var _analytics2 = require("../../state/analytics");
 
 var _LazyFallback = require("./component-lazy/LazyFallback");
 
+var _utils = require("../../utils");
+
 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 || (0, _typeof2.default)(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 LazyCardWithUrlContent = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./component-lazy/index'));
+  return (0, _utils.importWithRetry)(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./component-lazy/index'));
+    });
   });
 });
 
@@ -83,15 +87,22 @@ function CardWithURLRenderer(props) {
   }, [appearance, createAnalyticsEvent]);
   var analytics = (0, _analytics2.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
   var logError = (0, _react.useCallback)(function (error, info) {
-    var componentStack = info.componentStack; // NB: APIErrors are thrown in response to Object Resolver Service. We do not
+    var componentStack = info.componentStack;
+    var errorInfo = {
+      componentStack: componentStack
+    }; // NB: APIErrors are thrown in response to Object Resolver Service. We do not
     // fire an event for these, as they do not cover failed UI render events.
     // The rest of the errors caught here are unexpected, and correlate
     // to the reliability of the smart-card front-end components.
+    // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
 
-    if (error.name !== 'APIError') {
-      var errorInfo = {
-        componentStack: componentStack
-      };
+    if (error.name === 'ChunkLoadError') {
+      analytics.operational.chunkloadFailedEvent({
+        display: appearance,
+        error: error,
+        errorInfo: errorInfo
+      });
+    } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: appearance,
         id: id,
@@ -103,7 +114,7 @@ function CardWithURLRenderer(props) {
 
 
     throw error;
-  }, [analytics.ui, appearance, id]);
+  }, [analytics.operational, analytics.ui, appearance, id]);
 
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -45,6 +45,10 @@ var _reactIntlNext = require("react-intl-next");
 
 var _styled = require("../styled");
 
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _styled2 = require("../IconAndTitleLayout/styled");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -61,6 +65,8 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(InlineCardForbiddenView);
 
   function InlineCardForbiddenView() {
+    var _this$props, _this$props$requestAc;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, InlineCardForbiddenView);
@@ -70,6 +76,9 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      hasRequestAccessContextMessage: !!((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRetry", function (event) {
       var onAuthorise = _this.props.onAuthorise;
       event.preventDefault();
@@ -78,15 +87,15 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       if (onAuthorise) {
         onAuthorise();
       } else {
-        var _this$props, _this$props$requestAc, _this$props$requestAc2;
+        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
 
-        (_this$props = _this.props) === null || _this$props === void 0 ? void 0 : (_this$props$requestAc = _this$props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : (_this$props$requestAc2 = _this$props$requestAc.action) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.promise();
+        (_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderForbiddenAccessMessage", function () {
-      var _this$props2, _this$props2$requestA;
+      var _this$props3, _this$props3$requestA;
 
-      if ((_this$props2 = _this.props) !== null && _this$props2 !== void 0 && (_this$props2$requestA = _this$props2.requestAccessContext) !== null && _this$props2$requestA !== void 0 && _this$props2$requestA.callToActionMessageKey) {
+      if ((_this$props3 = _this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
         var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
         return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[callToActionMessageKey], {
           values: {
@@ -96,23 +105,35 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.invalid_permissions, function (formattedMessage) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage, ", ");
-      }), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account, function (formattedMessage) {
-        return /*#__PURE__*/_react.default.createElement(_styled.LowercaseAppearance, null, formattedMessage);
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage);
       }));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRightSide", function () {
-      var _this$props3, _this$props3$requestA;
-
       var onAuthorise = _this.props.onAuthorise;
-      var hasRequestAccessContextMessage = (_this$props3 = _this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$requestA = _this$props3.requestAccessContext) === null || _this$props3$requestA === void 0 ? void 0 : _this$props3$requestA.callToActionMessageKey;
-      return onAuthorise || hasRequestAccessContextMessage ? /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-        spacing: "none",
-        appearance: "subtle-link",
-        onClick: _this.handleRetry,
-        component: _styled.IconStyledButton,
-        testId: "button-connect-other-account"
-      }, _this.renderForbiddenAccessMessage()) : null;
+
+      if (_this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: _this.handleRetry,
+          component: _styled.IconStyledButton,
+          testId: "button-connect-other-account"
+        }, _this.renderForbiddenAccessMessage());
+      }
+
+      if (onAuthorise) {
+        return /*#__PURE__*/_react.default.createElement(_styled2.LozengeBlockWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: _this.handleRetry,
+          component: _styled.IconStyledButton,
+          testId: "button-connect-other-account"
+        }, /*#__PURE__*/_react.default.createElement(_styled2.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+          appearance: 'moved'
+        }, _this.renderForbiddenAccessMessage()))));
+      }
+
+      return null;
     });
     return _this;
   }
@@ -135,8 +156,9 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         link: url,
         title: url,
         onClick: onClick,
+        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
         rightSide: this.renderRightSide(),
-        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
+        rightSideSpacer: this.state.hasRequestAccessContextMessage
       }));
     }
   }]);

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -176,10 +176,13 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         href: link,
         onClick: this.handleClick,
         onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, ' - ', rightSide) : null));
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled2.NoLinkAppearance, null, this.props.rightSideSpacer && ' - ', rightSide) : null));
     }
   }]);
   return IconAndTitleLayout;
 }(_react.default.Component);
 
-exports.IconAndTitleLayout = IconAndTitleLayout;
+exports.IconAndTitleLayout = IconAndTitleLayout;
+(0, _defineProperty2.default)(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -43,7 +43,7 @@ var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject
 
 exports.IconTitleWrapper = IconTitleWrapper;
 
-var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 
 exports.LozengeWrapper = LozengeWrapper;

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -52,10 +52,10 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      return /*#__PURE__*/_react.default.createElement(_styled.LozengeBlockWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: lozenge.appearance || 'default',
         isBold: lozenge.isBold
-      }, lozenge.text));
+      }, lozenge.text)));
     }
   }, {
     key: "render",

package/dist/es2019/messages.js

@@ -127,7 +127,7 @@ export const messages = defineMessages({
   },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
-    defaultMessage: 'Restricted link',
+    defaultMessage: 'Restricted content',
     description: 'Message shown when a user does not have permissions to view an item'
   },
   invalid_permissions_description: {

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
-import { connectFailedEvent, connectSucceededEvent, context, instrumentEvent, invokeFailedEvent, invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
+import { chunkloadFailedEvent, connectFailedEvent, connectSucceededEvent, context, instrumentEvent, invokeFailedEvent, invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
@@ -586,6 +586,37 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       if (event) {
         dispatchAnalytics(applyCommonAttributes(event, commonAttributes));
       }
+    },
+
+    /**
+     * This fires an event that represents when a Smart Link renders unsuccessfuly.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param id The unique ID for this Smart Link.
+     * @param error: An error representing why the Smart Link render failed.
+     * @param errorInfo: Additional details about the error including the stack trace.
+     */
+    chunkloadFailedEvent: ({
+      display,
+      error,
+      errorInfo,
+      extensionKey,
+      definitionId,
+      resourceType,
+      destinationProduct,
+      destinationSubproduct,
+      location
+    }) => {
+      dispatchAnalytics(applyCommonAttributes(chunkloadFailedEvent({
+        display,
+        error,
+        errorInfo,
+        extensionKey,
+        definitionId,
+        resourceType,
+        destinationProduct,
+        destinationSubproduct,
+        location
+      }), commonAttributes));
     }
   }), [defaultId, commonAttributes, dispatchAnalytics]);
   /** Contains all track analytics events */

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

@@ -479,4 +479,28 @@ export const uiLearnMoreLinkClickedEvent = () => ({
   eventType: 'ui',
   attributes: { ...context
   }
+});
+export const chunkloadFailedEvent = ({
+  display,
+  error,
+  errorInfo,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
+  action: 'chunkLoadFailed',
+  actionSubject: 'smartLink',
+  eventType: 'operational',
+  attributes: { ...context,
+    error,
+    errorInfo,
+    display,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location
+  }
 });

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

@@ -1,6 +1,6 @@
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent } from './analytics';
 export const instrumentEvent = ({
   id,
   status,

package/dist/es2019/utils/index.js

@@ -100,4 +100,19 @@ export const handleOnClick = handler => e => {
   e.stopPropagation();
   handler();
 };
-export const isIntersectionObserverSupported = () => typeof IntersectionObserver !== 'undefined';
+export const isIntersectionObserverSupported = () => typeof IntersectionObserver !== 'undefined';
+export const sleep = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+export const importWithRetry = async (importFn, retries = 2, interval = 500) => {
+  try {
+    return await importFn();
+  } catch (error) {
+    if (error.name === 'ChunkLoadError' && retries > 0) {
+      await sleep(interval);
+      return importWithRetry(importFn, retries - 1, interval);
+    } else {
+      throw error;
+    }
+  }
+};

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/loader.js

@@ -5,9 +5,10 @@ import { clearMarks, clearMeasures } from '../../utils/performance';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { LoadingCardLink } from './component-lazy/LazyFallback';
-const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
+import { importWithRetry } from '../../utils';
+const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => importWithRetry(() => import(
 /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
-'./component-lazy/index'));
+'./component-lazy/index')));
 export function CardWithURLRenderer(props) {
   const [id] = useState(() => props.id ? props.id : uuid());
   useEffect(() => {
@@ -55,15 +56,22 @@ export function CardWithURLRenderer(props) {
   const logError = useCallback((error, info) => {
     const {
       componentStack
-    } = info; // NB: APIErrors are thrown in response to Object Resolver Service. We do not
+    } = info;
+    const errorInfo = {
+      componentStack
+    }; // NB: APIErrors are thrown in response to Object Resolver Service. We do not
     // fire an event for these, as they do not cover failed UI render events.
     // The rest of the errors caught here are unexpected, and correlate
     // to the reliability of the smart-card front-end components.
+    // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
 
-    if (error.name !== 'APIError') {
-      const errorInfo = {
-        componentStack
-      };
+    if (error.name === 'ChunkLoadError') {
+      analytics.operational.chunkloadFailedEvent({
+        display: appearance,
+        error,
+        errorInfo
+      });
+    } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: appearance,
         id,
@@ -75,7 +83,7 @@ export function CardWithURLRenderer(props) {
 
 
     throw error;
-  }, [analytics.ui, appearance, id]);
+  }, [analytics.operational, analytics.ui, appearance, id]);
 
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');