@atlaskit/smart-card 23.7.2 → 23.8.0

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/components/flexible/footer/index.js

@@ -22,7 +22,7 @@ const providerStyles = css`
   }
 `;
 /**
- * This Components is a footer that is used in a Block Card with Flexible UI.
+ * This Component is a footer that is used in a Block Card with Flexible UI.
  * It contains a provider icon if provider is present and an actions list if one is passed.
  * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
  *

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

@@ -55,11 +55,12 @@ export const BlockCard = ({
   } = cardState;
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
+  const extensionKey = getExtensionKey(details);
   const extractorOpts = {
     analytics,
     origin: 'smartLinkCard',
     handleInvoke,
-    extensionKey: getExtensionKey(details)
+    extensionKey
   };
 
   if (enableFlexibleBlockCard) {
@@ -74,7 +75,8 @@ export const BlockCard = ({
       onError,
       renderers,
       ui,
-      analytics
+      analytics,
+      extensionKey
     };
 
     switch (status) {

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

@@ -45,7 +45,7 @@ const FlexibleNotFoundView = ({
     message: {
       descriptor: messages.not_found_description
     },
-    testId: testId
+    testId: `${testId}-message`
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     status: status
   })));

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -79,7 +79,7 @@ const FlexibleResolvedView = ({
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'preview',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }, {
@@ -89,7 +89,7 @@ const FlexibleResolvedView = ({
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'view',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }, {
@@ -99,7 +99,7 @@ const FlexibleResolvedView = ({
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'download',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }]

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
@@ -22,7 +22,9 @@ const contentStyles = css`
  */
 
 const FlexibleUnauthorisedView = ({
+  analytics,
   cardState,
+  extensionKey = '',
   onAuthorize,
   onClick,
   onError,
@@ -34,7 +36,15 @@ const FlexibleUnauthorisedView = ({
 
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
-  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(onAuthorize, providerName)] : [], [onAuthorize, providerName]);
+  const handleAuthorize = useCallback(() => {
+    if (onAuthorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey
+      });
+      onAuthorize();
+    }
+  }, [onAuthorize, extensionKey, analytics.track]);
+  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [], [handleAuthorize, onAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -50,7 +60,9 @@ const FlexibleUnauthorisedView = ({
     overrideCss: contentStyles,
     testId: `${testId}-content`
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics,
+    testId: testId
   }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: SmartLinkStatus.Unauthorized,

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

@@ -10,6 +10,7 @@ import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { APIError } from '../..';
+import { CardDisplay } from '../../constants';
 export function CardWithUrlContent({
   id,
   url,
@@ -66,7 +67,7 @@ export function CardWithUrlContent({
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
       id,
-      display: isFlexibleUi ? 'flexible' : appearance,
+      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
       status: state.status,
       definitionId,
       extensionKey,

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

@@ -37,6 +37,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
 
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
+  const extensionKey = getExtensionKey(details);
 
   switch (status) {
     case 'pending':
@@ -82,7 +83,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           analytics,
           origin: 'smartLinkEmbed',
           handleInvoke,
-          extensionKey: getExtensionKey(details)
+          extensionKey
         });
         return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedBlockViewProps, {
           isSelected: isSelected,
@@ -105,7 +106,10 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
         inheritDimensions: inheritDimensions,
-        onClick: handleFrameClick
+        onClick: handleFrameClick,
+        analytics: analytics,
+        extensionKey: extensionKey,
+        testId: testId
       }));
 
     case 'forbidden':

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -1,23 +1,33 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
 import { UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 export const EmbedCardUnauthorisedView = ({
+  analytics,
   link,
   context,
   isSelected,
   testId = 'embed-card-unauthorized-view',
   onAuthorise,
   inheritDimensions,
-  onClick
+  onClick,
+  extensionKey
 }) => {
   var _context$image;
 
   const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
     src: typeof context.icon === 'string' ? context.icon : undefined
   });
+  const handleOnAuthorizeClick = useCallback(() => {
+    if (onAuthorise) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      onAuthorise();
+    }
+  }, [onAuthorise, analytics.track, extensionKey]);
   return /*#__PURE__*/React.createElement(ExpandedFrame, {
     href: link,
     icon: icon,
@@ -38,9 +48,10 @@ export const EmbedCardUnauthorisedView = ({
       text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
-    onClick: onAuthorise,
+    onClick: handleOnAuthorizeClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    analytics: analytics,
     providerName: context === null || context === void 0 ? void 0 : context.text,
     testId: testId
   })));

package/dist/es2019/view/EmbedModal/components/analytics/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { EmbedModalSize } from '../../types';
+import { CardDisplay } from '../../../../constants';
 
 const getResizeFrom = size => size === EmbedModalSize.Small ? EmbedModalSize.Large : EmbedModalSize.Small;
 
@@ -23,7 +24,7 @@ const withAnalytics = Component => props => {
     });
     analytics.ui.renderSuccessEvent({
       status: 'resolved',
-      display: 'preview'
+      display: CardDisplay.EmbedPreview
     });
 
     if (onOpen) {
@@ -32,7 +33,7 @@ const withAnalytics = Component => props => {
   }, [analytics.screen, analytics.ui, onOpen, origin]);
   const handleOnOpenFailed = useCallback((error, errorInfo) => {
     analytics.ui.renderFailedEvent({
-      display: 'preview',
+      display: CardDisplay.EmbedPreview,
       error,
       errorInfo
     });

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

@@ -9,14 +9,13 @@ import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { HoverCardContainer, CARD_GAP_PX } from '../styled';
-import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { CardDisplay } from '../../../constants';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const HoverCardComponent = ({
   children,
   url,
   analyticsHandler,
-  analytics,
-  onAuthorize
+  analytics
 }) => {
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -28,6 +27,7 @@ export const HoverCardComponent = ({
   const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
+  const linkStatus = linkState.status;
   const hoverDisplay = 'card';
   const invokeMethod = 'mouse_hover';
   const setMousePosition = useCallback(event => {
@@ -47,12 +47,13 @@ export const HoverCardComponent = ({
       analytics.ui.hoverCardDismissedEvent({
         previewDisplay: 'card',
         hoverTime,
-        previewInvokeMethod: 'mouse_hover'
+        previewInvokeMethod: 'mouse_hover',
+        status: linkStatus
       });
     }
 
     setIsOpen(false);
-  }, [analytics.ui, isOpen]);
+  }, [analytics.ui, isOpen, linkStatus]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -73,7 +74,8 @@ export const HoverCardComponent = ({
         cardOpenTime.current = Date.now();
         analytics.ui.hoverCardViewedEvent({
           previewDisplay: hoverDisplay,
-          previewInvokeMethod: invokeMethod
+          previewInvokeMethod: invokeMethod,
+          status: linkStatus
         });
       } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
 
@@ -88,10 +90,10 @@ export const HoverCardComponent = ({
 
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui]);
+  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
   const linkActions = useSmartLinkActions({
     url,
-    appearance: SMART_CARD_ANALYTICS_DISPLAY,
+    appearance: CardDisplay.HoverCardPreview,
     analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
@@ -125,8 +127,7 @@ export const HoverCardComponent = ({
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
-      url: url,
-      onAuthorize: onAuthorize
+      url: url
     })),
     trigger: triggerProps => jsx("span", {
       ref: parentSpan

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,12 +1,12 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useMemo } from 'react';
-import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
+import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import { flexibleUiOptions, titleBlockCss } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { getSimulatedMetadata } from '../utils';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
@@ -41,8 +41,7 @@ const HoverCardContent = ({
   onActionClick,
   onResolve,
   renderers,
-  url,
-  onAuthorize
+  url
 }) => {
   var _cardState$details;
 
@@ -51,7 +50,7 @@ const HoverCardContent = ({
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
       id,
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status,
       isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
@@ -91,8 +90,11 @@ const HoverCardContent = ({
 
   if (cardState.status === 'unauthorized') {
     return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+      analytics: analytics,
+      extensionKey: extensionKey,
+      id: id,
       flexibleCardProps: flexibleCardProps,
-      onAuthorize: onAuthorize
+      url: url
     });
   } // if metadataStatus is 'errored' simply render using data available (normal path)
 

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

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { useSmartCardActions } from '../../../../../state/actions';
-import { getSimulatedMetadata, toActionableMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../../../utils';
+import { getSimulatedMetadata, toActionableMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
 import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
 export const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
@@ -44,7 +44,7 @@ const HoverCardResolvedView = ({
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
     analytics.ui.renderSuccessEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status
     });
   }, [analytics.ui, cardState.status]);

package/dist/es2019/view/HoverCard/components/views/unauthorised/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../../FlexibleCard';
 import { messages } from '../../../../../messages';
@@ -9,12 +9,16 @@ import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled'
 import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
-import { ActionName } from '../../../../../constants';
+import { ActionName, CardDisplay } from '../../../../../constants';
+import { useSmartCardActions } from '../../../../../state/actions';
 
 const HoverCardUnauthorisedView = ({
+  analytics,
+  extensionKey,
+  id = '',
   flexibleCardProps,
   testId = 'hover-card-unauthorised-view',
-  onAuthorize
+  url
 }) => {
   var _cardState$details, _extractProvider;
 
@@ -23,15 +27,26 @@ const HoverCardUnauthorisedView = ({
   } = flexibleCardProps;
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
-  const actions = useMemo(() => onAuthorize ? [{
+  const {
+    authorize
+  } = useSmartCardActions(id, url, analytics);
+  const handleAuthorize = useCallback(() => {
+    if (authorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey
+      });
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, extensionKey, analytics.track]);
+  const actions = useMemo(() => [{
     name: ActionName.CustomAction,
     content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
       values: {
         context: providerName
       }
     })),
-    onClick: onAuthorize
-  }] : [], [onAuthorize, providerName]);
+    onClick: handleAuthorize
+  }], [handleAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
     testId: testId
   }), /*#__PURE__*/React.createElement(CustomBlock, {
@@ -45,7 +60,8 @@ const HoverCardUnauthorisedView = ({
     overrideCss: mainTextStyles,
     testId: `${testId}-content`
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: `${testId}-button`

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

@@ -8,7 +8,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { HoverCardComponent } from './components/HoverCardComponent';
-import { SMART_CARD_ANALYTICS_DISPLAY } from './utils';
+import { CardDisplay } from '../../constants';
 
 const HoverCardWithErrorBoundary = props => {
   const {
@@ -23,7 +23,7 @@ const HoverCardWithErrorBoundary = props => {
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   const onError = useCallback((error, info) => {
     analytics.ui.renderFailedEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       id,
       error,
       errorInfo: info
@@ -39,5 +39,8 @@ const HoverCardWithErrorBoundary = props => {
 };
 
 export const HoverCard = withAnalyticsContext({
-  source: 'smartLinkPreviewHoverCard'
+  source: 'smartLinkPreviewHoverCard',
+  attributes: {
+    display: CardDisplay.HoverCardPreview
+  }
 })(withAnalyticsEvents()(HoverCardWithErrorBoundary));

package/dist/es2019/view/HoverCard/utils.js

@@ -1,5 +1,4 @@
 import { ElementName } from '../../constants';
-export const SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export const getSimulatedMetadata = (extensionKey = '', types = []) => {
   switch (extensionKey) {
     case 'bitbucket-object-provider':

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

@@ -9,7 +9,7 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { LinkAppearance, IconStyledButton, LowercaseAppearance, NoLinkAppearance } from '../styled';
+import { IconStyledButton, LowercaseAppearance } from '../styled';
 export class InlineCardErroredView extends React.Component {
   constructor(...args) {
     super(...args);
@@ -26,15 +26,12 @@ export class InlineCardErroredView extends React.Component {
       }
     });
 
-    _defineProperty(this, "renderMessage", () => {
+    _defineProperty(this, "renderRightSide", () => {
       const {
         onRetry,
-        url,
         message
       } = this.props;
-      const link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
-      const errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
-      return !onRetry ? /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage) : /*#__PURE__*/React.createElement(React.Fragment, null, link, " - ", errorMessage, ",\xA0", /*#__PURE__*/React.createElement(Button, {
+      return !onRetry ? message : /*#__PURE__*/React.createElement(React.Fragment, null, message, ', ', /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle-link",
         component: IconStyledButton,
@@ -55,8 +52,6 @@ export class InlineCardErroredView extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
-      link: url,
-      onClick: onClick,
       isSelected: isSelected
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
@@ -64,7 +59,10 @@ export class InlineCardErroredView extends React.Component {
         size: "small",
         primaryColor: token('color.icon.danger', R300)
       })),
-      title: this.renderMessage()
+      link: url,
+      title: url,
+      onClick: onClick,
+      rightSide: this.renderRightSide()
     }));
   }
 

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

@@ -10,7 +10,7 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
 import { messages } from '../../../messages';
 import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled';
+import { IconStyledButton, LowercaseAppearance } from '../styled';
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
@@ -57,22 +57,20 @@ export class InlineCardForbiddenView extends React.Component {
       }));
     });
 
-    _defineProperty(this, "renderMessage", () => {
+    _defineProperty(this, "renderRightSide", () => {
       var _this$props3, _this$props3$requestA;
 
       const {
-        url,
         onAuthorise
       } = this.props;
-      const link = /*#__PURE__*/React.createElement(LinkAppearance, null, url);
       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 ? link : /*#__PURE__*/React.createElement(React.Fragment, null, link, ' - ', /*#__PURE__*/React.createElement(Button, {
+      return onAuthorise || hasRequestAccessContextMessage ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle-link",
         onClick: this.handleRetry,
         component: IconStyledButton,
         testId: "button-connect-other-account"
-      }, this.renderForbiddenAccessMessage()));
+      }, this.renderForbiddenAccessMessage()) : null;
     });
   }
 
@@ -86,12 +84,13 @@ export class InlineCardForbiddenView extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
-      link: url,
-      onClick: onClick,
       isSelected: isSelected
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackForbiddenIcon,
-      title: this.renderMessage(),
+      link: url,
+      title: url,
+      onClick: onClick,
+      rightSide: this.renderRightSide(),
       titleColor: token('color.text.subtle', N500)
     }));
   }

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { Wrapper } from './styled';
+import { WrapperAnchor, WrapperSpan } from './styled';
 export const Frame = props => {
   const {
     isSelected,
@@ -8,7 +8,6 @@ export const Frame = props => {
     onClick,
     link,
     withoutBackground,
-    withoutHover,
     testId,
     className
   } = props;
@@ -30,14 +29,15 @@ export const Frame = props => {
       onClick(event);
     }
   }, [onClick]);
-  const isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  const isInteractive = Boolean(onClick); // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+
+  const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan; // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
   //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
 
   return /*#__PURE__*/React.createElement(Wrapper, {
     theme: useGlobalTheme(),
     href: link,
     withoutBackground: withoutBackground,
-    withoutHover: withoutHover,
     isSelected: isSelected,
     isInteractive: isInteractive,
     tabIndex: isInteractive ? 0 : undefined,