@atlaskit/smart-card 23.10.0 → 23.10.2

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

@@ -10,7 +10,9 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance } from '../styled';
+import { IconStyledButton } from '../styled';
+import Lozenge from '@atlaskit/lozenge';
+import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -18,8 +20,14 @@ const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, nu
 }));
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
+    var _this$props, _this$props$requestAc;
+
     super(...args);
 
+    _defineProperty(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)
+    });
+
     _defineProperty(this, "handleRetry", event => {
       const {
         onAuthorise
@@ -30,16 +38,16 @@ export class InlineCardForbiddenView extends 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();
       }
     });
 
     _defineProperty(this, "renderForbiddenAccessMessage", () => {
-      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) {
         const {
           callToActionMessageKey
         } = this.props.requestAccessContext;
@@ -51,26 +59,38 @@ export class InlineCardForbiddenView extends React.Component {
       }
 
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage, ", ");
-      }), /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account, formattedMessage => {
-        return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
       }));
     });
 
     _defineProperty(this, "renderRightSide", () => {
-      var _this$props3, _this$props3$requestA;
-
       const {
         onAuthorise
       } = this.props;
-      const 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.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        onClick: this.handleRetry,
-        component: IconStyledButton,
-        testId: "button-connect-other-account"
-      }, this.renderForbiddenAccessMessage()) : null;
+
+      if (this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account"
+        }, this.renderForbiddenAccessMessage());
+      }
+
+      if (onAuthorise) {
+        return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, this.renderForbiddenAccessMessage()))));
+      }
+
+      return null;
     });
   }
 
@@ -90,8 +110,9 @@ export class InlineCardForbiddenView extends React.Component {
       link: url,
       title: url,
       onClick: onClick,
+      titleColor: token('color.text.subtle', N500),
       rightSide: this.renderRightSide(),
-      titleColor: token('color.text.subtle', N500)
+      rightSideSpacer: this.state.hasRequestAccessContextMessage
     }));
   }
 

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

@@ -134,7 +134,11 @@ export class IconAndTitleLayout extends React.Component {
       href: link,
       onClick: this.handleClick,
       onKeyPress: this.handleKeyPress
-    }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, ' - ', rightSide) : null));
+    }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, this.props.rightSideSpacer && ' - ', rightSide) : null));
   }
 
-}
+}
+
+_defineProperty(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});

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

@@ -62,9 +62,6 @@ export const IconTitleWrapper = styled.span`
 export const LozengeWrapper = styled.span`
   display: inline-block;
   vertical-align: 1px;
-  & > span {
-    margin-left: 4px;
-  }
 `; // TODO: Replace overrides with proper AtlasKit solution.
 
 export const LozengeBlockWrapper = styled.span`

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
 import { HoverCard } from '../../../view/HoverCard/index';
 export class InlineCardResolvedView extends React.Component {
   renderLozenge() {
@@ -14,10 +14,10 @@ export class InlineCardResolvedView extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+    return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       appearance: lozenge.appearance || 'default',
       isBold: lozenge.isBold
-    }, lozenge.text));
+    }, lozenge.text)));
   }
 
   render() {

package/dist/esm/messages.js

@@ -127,7 +127,7 @@ export var 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/esm/state/analytics/useSmartLinkAnalytics.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
-import { connectFailedEvent as _connectFailedEvent, connectSucceededEvent as _connectSucceededEvent, context, instrumentEvent, invokeFailedEvent as _invokeFailedEvent, invokeSucceededEvent as _invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
+import { chunkloadFailedEvent as _chunkloadFailedEvent, connectFailedEvent as _connectFailedEvent, connectSucceededEvent as _connectSucceededEvent, context, instrumentEvent, invokeFailedEvent as _invokeFailedEvent, invokeSucceededEvent as _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';
@@ -601,6 +601,36 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         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(_chunkloadFailedEvent({
+          display: display,
+          error: error,
+          errorInfo: errorInfo,
+          extensionKey: extensionKey,
+          definitionId: definitionId,
+          resourceType: resourceType,
+          destinationProduct: destinationProduct,
+          destinationSubproduct: destinationSubproduct,
+          location: location
+        }), commonAttributes));
       }
     };
   }, [defaultId, commonAttributes, dispatchAnalytics]);
@@ -614,13 +644,13 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @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(trackAppAccountConnected(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           definitionId: definitionId,
@@ -637,9 +667,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @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(trackAppAccountAuthStarted(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           location: location
@@ -657,13 +687,13 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @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(screenAuthPopupEvent(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           definitionId: definitionId,

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

@@ -504,4 +504,29 @@ export var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent()
     eventType: 'ui',
     attributes: _objectSpread({}, context)
   };
+};
+export 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
+    })
+  };
 };

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

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 var instrumentEvent = function instrumentEvent(_ref) {
   var id = _ref.id,
       status = _ref.status,

package/dist/esm/utils/index.js

@@ -1,4 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Loadable from 'react-loadable';
 export var isCardWithData = function isCardWithData(props) {
@@ -227,4 +229,57 @@ export var handleOnClick = function handleOnClick(handler) {
 };
 export var isIntersectionObserverSupported = function isIntersectionObserverSupported() {
   return typeof IntersectionObserver !== 'undefined';
-};
+};
+export var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, ms);
+  });
+};
+export var importWithRetry = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(importFn) {
+    var retries,
+        interval,
+        _args = arguments;
+    return _regeneratorRuntime.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);
+  };
+}();

package/dist/esm/version.json

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

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

@@ -6,10 +6,13 @@ import { clearMarks, clearMeasures } from '../../utils/performance';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { LoadingCardLink } from './component-lazy/LazyFallback';
+import { importWithRetry } from '../../utils';
 var LazyCardWithUrlContent = /*#__PURE__*/lazy(function () {
-  return import(
-  /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
-  './component-lazy/index');
+  return importWithRetry(function () {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
+    './component-lazy/index');
+  });
 });
 export function CardWithURLRenderer(props) {
   var _useState = useState(function () {
@@ -59,15 +62,22 @@ export function CardWithURLRenderer(props) {
   }, [appearance, createAnalyticsEvent]);
   var analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
   var logError = 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,
@@ -79,7 +89,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.');

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

@@ -21,7 +21,9 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance } from '../styled';
+import { IconStyledButton } from '../styled';
+import Lozenge from '@atlaskit/lozenge';
+import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -33,6 +35,8 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(InlineCardForbiddenView);
 
   function InlineCardForbiddenView() {
+    var _this$props, _this$props$requestAc;
+
     var _this;
 
     _classCallCheck(this, InlineCardForbiddenView);
@@ -43,6 +47,10 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_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)
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleRetry", function (event) {
       var onAuthorise = _this.props.onAuthorise;
       event.preventDefault();
@@ -51,16 +59,16 @@ export 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();
       }
     });
 
     _defineProperty(_assertThisInitialized(_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.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
           values: {
@@ -70,24 +78,36 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, function (formattedMessage) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage, ", ");
-      }), /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account, function (formattedMessage) {
-        return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
       }));
     });
 
     _defineProperty(_assertThisInitialized(_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.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        onClick: _this.handleRetry,
-        component: IconStyledButton,
-        testId: "button-connect-other-account"
-      }, _this.renderForbiddenAccessMessage()) : null;
+
+      if (_this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: _this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account"
+        }, _this.renderForbiddenAccessMessage());
+      }
+
+      if (onAuthorise) {
+        return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          appearance: "subtle-link",
+          onClick: _this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, _this.renderForbiddenAccessMessage()))));
+      }
+
+      return null;
     });
 
     return _this;
@@ -111,8 +131,9 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         link: url,
         title: url,
         onClick: onClick,
+        titleColor: token('color.text.subtle', N500),
         rightSide: this.renderRightSide(),
-        titleColor: token('color.text.subtle', N500)
+        rightSideSpacer: this.state.hasRequestAccessContextMessage
       }));
     }
   }]);

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

@@ -156,9 +156,13 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         href: link,
         onClick: this.handleClick,
         onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, ' - ', rightSide) : null));
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, this.props.rightSideSpacer && ' - ', rightSide) : null));
     }
   }]);
 
   return IconAndTitleLayout;
-}(React.Component);
+}(React.Component);
+
+_defineProperty(IconAndTitleLayout, "defaultProps", {
+  rightSideSpacer: true
+});

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

@@ -21,7 +21,7 @@ export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _t
 
 export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
 export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"]))); // The following components are used to absolutely position icons in the vertical center.

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

@@ -12,7 +12,7 @@ import React from 'react';
 import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
 import { HoverCard } from '../../../view/HoverCard/index';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardResolvedView, _React$Component);
@@ -34,10 +34,10 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+      return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
         appearance: lozenge.appearance || 'default',
         isBold: lozenge.isBold
-      }, lozenge.text));
+      }, lozenge.text)));
     }
   }, {
     key: "render",

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

@@ -171,6 +171,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param error An error representing why the Smart Link request failed.
          */
         instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: InstrumentEventProps) => void;
+        /**
+         * 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, }: UiRenderFailedEventProps) => void;
     };
     track: {
         /**

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

@@ -36,6 +36,7 @@ export declare const FlexibleUiAnalyticsContext: import("react").Context<{
         connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectSucceededEventProps) => void;
         connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectFailedEventProps) => void;
         instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("../../utils/analytics/types").InstrumentEventProps) => void;
+        chunkloadFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
     };
     track: {
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
@@ -74,6 +75,7 @@ export declare const useFlexibleUiAnalyticsContext: () => {
         connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectSucceededEventProps) => void;
         connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectFailedEventProps) => void;
         instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("../../utils/analytics/types").InstrumentEventProps) => void;
+        chunkloadFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
     };
     track: {
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;