@atlaskit/smart-card 23.8.2 → 23.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.9.1
+
+### Patch Changes
+
+- [`484be3ed430`](https://bitbucket.org/atlassian/atlassian-frontend/commits/484be3ed430) - This adds onResolve back to Flexible Block Card
+
+## 23.9.0
+
+### Minor Changes
+
+- [`5c7c532de88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c7c532de88) - [ux] Add showHoverPreview as a ui parameter to allow hover cards on flex ui links.
+
 ## 23.8.2
 
 ### Patch Changes

package/dist/cjs/utils/flexible.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
+exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -57,4 +57,10 @@ var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === Blocks.PreviewBlock;
 };
 
-exports.isFlexibleUiPreviewBlock = isFlexibleUiPreviewBlock;
+exports.isFlexibleUiPreviewBlock = isFlexibleUiPreviewBlock;
+
+var isFlexibleUiFooterBlock = function isFlexibleUiFooterBlock(node) {
+  return /*#__PURE__*/_react.default.isValidElement(node) && node.type === Blocks.FooterBlock;
+};
+
+exports.isFlexibleUiFooterBlock = isFlexibleUiFooterBlock;

package/dist/cjs/utils/mocks.js

@@ -139,6 +139,25 @@ var mocks = {
       url: 'https://some.url'
     }
   },
+  forbiddenWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'forbidden',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   unauthorized: {
     meta: {
       visibility: 'restricted',
@@ -162,6 +181,25 @@ var mocks = {
       url: 'https://some.url'
     }
   },
+  unauthorizedWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'unauthorized',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   actionSuccess: {
     meta: {
       visibility: 'public',

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -32,7 +32,8 @@ var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
         context: providerName
       }
     })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_link_account_card),
-    onClick: onAuthorize
+    onClick: onAuthorize,
+    testId: 'smart-action-connect-account'
   };
 };
 

package/dist/cjs/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -33,7 +33,8 @@ var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
         context: context
       }
     })),
-    onClick: onClick
+    onClick: onClick,
+    testId: 'smart-action-connect-other-account'
   };
 };
 

package/dist/cjs/view/BlockCard/actions/flexible/RetryAction.js

@@ -25,7 +25,8 @@ var RetryAction = function RetryAction(onRetry) {
   return {
     name: _constants.ActionName.CustomAction,
     onClick: onRetry,
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again),
+    testId: 'smart-action-try-again'
   };
 };
 

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

@@ -153,6 +153,7 @@ var BlockCard = function BlockCard(_ref) {
       url: url,
       testId: testId,
       onError: onError,
+      onResolve: onResolve,
       renderers: renderers,
       ui: ui,
       analytics: analytics,
@@ -162,6 +163,12 @@ var BlockCard = function BlockCard(_ref) {
     switch (status) {
       case 'pending':
       case 'resolving':
+        return (0, _react.jsx)("div", {
+          css: flexibleBlockCardElevationStyle
+        }, (0, _react.jsx)(_FlexibleResolvedView.default, (0, _extends2.default)({}, flexibleProps, {
+          testId: 'smart-block-resolving-view'
+        })));
+
       case 'resolved':
         return (0, _react.jsx)("div", {
           css: flexibleBlockCardElevationStyle
@@ -190,6 +197,23 @@ var BlockCard = function BlockCard(_ref) {
 
       case 'fallback':
       case 'errored':
+      default:
+        if (onError) {
+          onError({
+            url: url,
+            status: status
+          });
+        }
+
+        if (authFlow && authFlow === 'disabled') {
+          return (0, _react.jsx)(_LinkView.CardLinkView, {
+            link: url,
+            isSelected: isSelected,
+            onClick: handleFrameClick,
+            testId: "".concat(testId, "-").concat(status)
+          });
+        }
+
         return (0, _react.jsx)("div", {
           css: flexibleBlockCardElevationStyle
         }, (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleProps, {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -37,6 +37,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       cardState = _ref.cardState,
       onClick = _ref.onClick,
       onError = _ref.onError,
+      onResolve = _ref.onResolve,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
       ui = _ref.ui,
@@ -63,6 +64,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     cardState: cardState,
     onClick: onClick,
     onError: onError,
+    onResolve: onResolve,
     testId: testId,
     ui: ui,
     url: url
@@ -98,7 +100,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: _constants.ElementName.DueOn
     }],
     maxLines: 1
-  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+  }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
     placement: _constants.MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: function onError() {

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

@@ -79,12 +79,6 @@ function CardWithUrlContent(_ref) {
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
   }, [children]);
-  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
-
-  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = Boolean(showHoverPreviewFlag);
-  }
-
   var showAuthTooltipValue = (0, _linkProvider.useFeatureFlag)('showAuthTooltip');
   var showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard')); // Setup UI handlers.
@@ -174,6 +168,7 @@ function CardWithUrlContent(_ref) {
       onClick: handleClickWrapper,
       renderers: renderers,
       ui: ui,
+      showHoverPreview: showHoverPreview,
       url: url,
       testId: testId,
       onResolve: onResolve,

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -61,14 +61,9 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  var onContainerClick = (0, _react.useCallback)(function (e) {
-    // Stop button on click event from propagate into parent container.
-    e.stopPropagation();
-  }, []);
   return (0, _react2.jsx)("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
-    "data-testid": "".concat(testId, "-button-wrapper"),
-    onClick: onContainerClick
+    "data-testid": "".concat(testId, "-button-wrapper")
   }, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipMessage,
     hideTooltipOnClick: true,

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -68,12 +68,8 @@ var ActionGroup = function ActionGroup(_ref) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1]; // Stop AK dropdown menu to propagate event on click.
+      setIsOpen = _useState2[1];
 
-
-  var onClick = (0, _react.useCallback)(function (e) {
-    return e.stopPropagation();
-  }, []);
   var onOpenChange = (0, _react.useCallback)(function (attrs) {
     setIsOpen(attrs.isOpen);
 
@@ -106,8 +102,7 @@ var ActionGroup = function ActionGroup(_ref) {
   var buttonGroupElement = (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick);
   return (0, _react2.jsx)("div", {
     css: styles,
-    className: "actions-button-group",
-    onClick: onClick
+    className: "actions-button-group"
   }, (0, _react2.jsx)(_buttonGroup.default, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
@@ -27,6 +29,10 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 
 var _templateObject;
 
+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 getActionGroupStyles = function getActionGroupStyles(size) {
   if (size === _constants.SmartLinkSize.XLarge) {
     // The biggest height of the action button exceeds the max line-height
@@ -50,7 +56,15 @@ var FooterBlock = function FooterBlock(props) {
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
       _props$testId = props.testId,
-      testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId;
+      testId = _props$testId === void 0 ? 'smart-footer-block' : _props$testId,
+      onActionMenuOpenChange = props.onActionMenuOpenChange;
+  var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
 
   if (status !== _constants.SmartLinkStatus.Resolved) {
     return null;
@@ -67,6 +81,7 @@ var FooterBlock = function FooterBlock(props) {
     overrideCss: getActionGroupStyles(size),
     width: _constants.SmartLinkWidth.Flexible
   }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getContainerStyles = exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -25,6 +27,8 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
 
+var _HoverCard = require("../../../HoverCard");
+
 var _utils = require("../../../../state/flexible-ui-context/utils");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -110,7 +114,7 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
 
 exports.getContainerStyles = getContainerStyles;
 
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
@@ -124,6 +128,12 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           status: status,
           theme: containerTheme
         });
+      } else if (onActionMenuOpenChange && (0, _flexible.isFlexibleUiFooterBlock)(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          size: size,
+          status: status,
+          onActionMenuOpenChange: onActionMenuOpenChange
+        });
       }
 
       return /*#__PURE__*/_react.default.cloneElement(child, {
@@ -182,6 +192,8 @@ var Container = function Container(_ref3) {
       hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
       _ref3$hidePadding = _ref3.hidePadding,
       hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      _ref3$showHoverPrevie = _ref3.showHoverPreview,
+      showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
       onClick = _ref3.onClick,
       retry = _ref3.retry,
       _ref3$size = _ref3.size,
@@ -193,11 +205,30 @@ var Container = function Container(_ref3) {
       theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   var childrenOptions = getChildrenOptions(children, context);
-  return (0, _react2.jsx)("div", {
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      hoverCardCanOpen = _useState2[0],
+      setHoverCardCanOpen = _useState2[1];
+
+  var onActionMenuOpenChange = (0, _react.useCallback)(function (options) {
+    return setHoverCardCanOpen(!options.isOpen);
+  }, []);
+  var containerContent = (0, _react2.jsx)("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
+
+  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+    return (0, _react2.jsx)(_HoverCard.HoverCard, {
+      url: context === null || context === void 0 ? void 0 : context.url,
+      canOpen: hoverCardCanOpen,
+      closeOnChildClick: true
+    }, containerContent);
+  }
+
+  return containerContent;
 };
 
 var _default = Container;

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

@@ -42,7 +42,8 @@ var FlexibleCard = function FlexibleCard(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       testId = _ref.testId,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      showHoverPreview = _ref.showHoverPreview;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -86,6 +87,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
+    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
     status: status

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

@@ -40,7 +40,11 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
       analyticsHandler = _ref.analyticsHandler,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      _ref$canOpen = _ref.canOpen,
+      canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
+      _ref$closeOnChildClic = _ref.closeOnChildClick,
+      closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
   var delay = 300;
 
   var _React$useState = _react2.default.useState(false),
@@ -134,9 +138,16 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
+  var onChildClick = (0, _react2.useCallback)(function (e) {
+    e.stopPropagation();
+
+    if (closeOnChildClick) {
+      hideCard();
+    }
+  }, [closeOnChildClick, hideCard]);
   return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
-    isOpen: isOpen,
+    isOpen: isOpen && canOpen,
     onClose: hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
@@ -161,7 +172,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        onMouseMove: setMousePosition
+        onMouseMove: setMousePosition,
+        onClick: onChildClick
       }), children));
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510

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

@@ -61,6 +61,8 @@ var _UnauthorisedView = require("./UnauthorisedView");
 
 var _extractors = require("@atlaskit/linking-common/extractors");
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var InlineCard = function InlineCard(_ref) {
   var _details$meta;
 
@@ -81,6 +83,11 @@ var InlineCard = function InlineCard(_ref) {
       details = cardState.details;
   var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
+  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
+
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
 
   switch (status) {
     case 'pending':

package/dist/es2019/utils/flexible.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
-import { PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
+import { PreviewBlock, TitleBlock, FooterBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export const isFlexibleUiCard = children => {
   if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
@@ -12,4 +12,5 @@ export const isFlexibleUiCard = children => {
 export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
 export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
 export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
-export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+export const isFlexibleUiPreviewBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+export const isFlexibleUiFooterBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === FooterBlock;

package/dist/es2019/utils/mocks.js

@@ -107,6 +107,25 @@ export const mocks = {
       url: 'https://some.url'
     }
   },
+  forbiddenWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'forbidden',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   unauthorized: {
     meta: {
       visibility: 'restricted',
@@ -130,6 +149,25 @@ export const mocks = {
       url: 'https://some.url'
     }
   },
+  unauthorizedWithNoAuth: {
+    meta: {
+      visibility: 'restricted',
+      access: 'unauthorized',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider'
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/'
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url'
+    }
+  },
   actionSuccess: {
     meta: {
       visibility: 'public',

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -18,5 +18,6 @@ export const AuthorizeAction = (onAuthorize, providerName) => ({
       context: providerName
     }
   })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
-  onClick: onAuthorize
+  onClick: onAuthorize,
+  testId: 'smart-action-connect-account'
 });

package/dist/es2019/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -19,5 +19,6 @@ export const ForbiddenAction = (onClick, content, context) => ({
       context
     }
   })),
-  onClick: onClick
+  onClick,
+  testId: 'smart-action-connect-other-account'
 });

package/dist/es2019/view/BlockCard/actions/flexible/RetryAction.js

@@ -12,5 +12,6 @@ import { messages } from '../../../../messages';
 export const RetryAction = onRetry => ({
   name: ActionName.CustomAction,
   onClick: onRetry,
-  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again),
+  testId: 'smart-action-try-again'
 });

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

@@ -73,6 +73,7 @@ export const BlockCard = ({
       url,
       testId,
       onError,
+      onResolve,
       renderers,
       ui,
       analytics,
@@ -82,6 +83,12 @@ export const BlockCard = ({
     switch (status) {
       case 'pending':
       case 'resolving':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
+          testId: 'smart-block-resolving-view'
+        })));
+
       case 'resolved':
         return jsx("div", {
           css: flexibleBlockCardElevationStyle
@@ -110,6 +117,23 @@ export const BlockCard = ({
 
       case 'fallback':
       case 'errored':
+      default:
+        if (onError) {
+          onError({
+            url,
+            status
+          });
+        }
+
+        if (authFlow && authFlow === 'disabled') {
+          return jsx(CardLinkView, {
+            link: url,
+            isSelected: isSelected,
+            onClick: handleFrameClick,
+            testId: `${testId}-${status}`
+          });
+        }
+
         return jsx("div", {
           css: flexibleBlockCardElevationStyle
         }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -15,6 +15,7 @@ const FlexibleResolvedView = ({
   cardState,
   onClick,
   onError,
+  onResolve,
   testId = 'smart-block-resolved-view',
   ui,
   url,
@@ -30,6 +31,7 @@ const FlexibleResolvedView = ({
     cardState: cardState,
     onClick: onClick,
     onError: onError,
+    onResolve: onResolve,
     testId: testId,
     ui: ui,
     url: url
@@ -65,7 +67,7 @@ const FlexibleResolvedView = ({
       name: ElementName.DueOn
     }],
     maxLines: 1
-  }), /*#__PURE__*/React.createElement(MetadataBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+  }), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: () => {