@atlaskit/smart-card 26.12.1 → 26.13.1

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

@@ -4,7 +4,7 @@ import { chunkloadFailedEvent, connectFailedEvent, connectSucceededEvent, contex
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
+import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
 const applyCommonAttributes = (event, commonAttributes) => {
   if (event && event.attributes) {
@@ -759,6 +759,13 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
     smartLinkQuickActionFailed: props => dispatchAnalytics(applyCommonAttributes(trackSmartLinkQuickActionFailed({
       ...commonAttributes,
       ...props
+    }), commonAttributes)),
+    /**
+     * Fires a track event when we call loadMetadata() to get information for a hover card
+     */
+    hoverCardResolutionStarted: () => dispatchAnalytics(applyCommonAttributes(trackHoverCardResolutionStarted({
+      display: 'hoverCardPreview',
+      ...commonAttributes
     }), commonAttributes))
   }), [commonAttributes, dispatchAnalytics]);
 

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

@@ -270,6 +270,19 @@ export const trackSmartLinkQuickActionFailed = ({
     smartLinkActionType
   }
 });
+export const trackHoverCardResolutionStarted = ({
+  display,
+  ...attributes
+}) => ({
+  action: 'resolved',
+  actionSubject: 'hoverCard',
+  eventType: 'track',
+  attributes: {
+    ...context,
+    ...attributes,
+    display
+  }
+});
 export const uiAuthEvent = ({
   definitionId,
   extensionKey,

package/dist/es2019/version.json

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

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

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../FlexibleCard';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
@@ -8,6 +10,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { css } from '@emotion/react';
 import { tokens } from '../../../../utils/token';
+import { messages } from '../../../../messages';
 const contentStyles = css`
   color: ${tokens.text};
   margin-top: 0.5rem;
@@ -44,6 +47,15 @@ const FlexibleUnauthorisedView = ({
       onAuthorize();
     }
   }, [onAuthorize, extensionKey, analytics.track]);
+  const content = useMemo(() => onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName,
+    analytics: analytics,
+    testId: testId
+  }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+    values: {
+      context: providerName
+    }
+  })), [analytics, onAuthorize, providerName, testId]);
   const actions = useMemo(() => onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [], [handleAuthorize, onAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
@@ -60,11 +72,7 @@ const FlexibleUnauthorisedView = ({
   }), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: contentStyles,
     testId: `${testId}-content`
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName,
-    analytics: analytics,
-    testId: testId
-  }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: SmartLinkStatus.Unauthorized,
     actionGroupAppearance: "primary"

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

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { UnauthorisedImage } from '../constants';
+import { LockImage, UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
@@ -15,7 +15,6 @@ export const EmbedCardUnauthorisedView = ({
   onClick,
   extensionKey
 }) => {
-  var _context$image;
   const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
     src: typeof context.icon === 'string' ? context.icon : undefined
   });
@@ -27,6 +26,36 @@ export const EmbedCardUnauthorisedView = ({
       onAuthorise();
     }
   }, [onAuthorise, analytics.track, extensionKey]);
+  const view = useMemo(() => {
+    var _context$image2;
+    if (onAuthorise) {
+      var _context$image;
+      return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+        button: {
+          appearance: 'primary',
+          text: 'connect_unauthorised_account_action',
+          testId: 'connect-account'
+        },
+        context: context && context.text,
+        description: "connect_unauthorised_account_description",
+        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
+        onClick: handleOnAuthorizeClick,
+        testId: testId,
+        title: "connect_link_account_card_name"
+      }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+        analytics: analytics,
+        providerName: context === null || context === void 0 ? void 0 : context.text,
+        testId: testId
+      }));
+    }
+    return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+      description: context !== null && context !== void 0 && context.text ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider',
+      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : LockImage,
+      context: context === null || context === void 0 ? void 0 : context.text,
+      testId: testId,
+      title: context !== null && context !== void 0 && context.text ? 'unauthorised_account_name' : 'unauthorised_account_name_no_provider'
+    });
+  }, [analytics, context, handleOnAuthorizeClick, onAuthorise, testId]);
   return /*#__PURE__*/React.createElement(ExpandedFrame, {
     href: link,
     icon: icon,
@@ -37,21 +66,5 @@ export const EmbedCardUnauthorisedView = ({
     onClick: onClick,
     testId: testId,
     allowScrollBar: true
-  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
-    title: "connect_link_account_card_name",
-    description: "connect_unauthorised_account_description",
-    context: context && context.text,
-    button: onAuthorise ? {
-      appearance: 'primary',
-      text: 'connect_unauthorised_account_action',
-      testId: 'connect-account'
-    } : undefined,
-    onClick: onAuthorise ? handleOnAuthorizeClick : undefined,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    analytics: analytics,
-    providerName: context === null || context === void 0 ? void 0 : context.text,
-    testId: testId
-  })));
+  }, view);
 };

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

@@ -12,6 +12,7 @@ import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkAnalytics } from '../../../state/analytics';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 const HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 const FADE_IN_DELAY = 500;
 const FADE_OUT_DELAY = 300;
@@ -41,6 +42,7 @@ export const HoverCardComponent = ({
   const {
     loadMetadata
   } = useSmartCardActions(id, url, analytics);
+  const enableHoverCardResolutionTracking = useFeatureFlag('enableHoverCardResolutionTracking');
   const setMousePosition = useCallback(event => {
     if (isOpen && canOpen) {
       return;
@@ -108,9 +110,12 @@ export const HoverCardComponent = ({
     if (!resolveTimeOutId.current && isLinkUnresolved) {
       resolveTimeOutId.current = setTimeout(() => {
         loadMetadata();
+        if (enableHoverCardResolutionTracking) {
+          analytics.track.hoverCardResolutionStarted();
+        }
       }, RESOLVE_DELAY);
     }
-  }, [linkState, loadMetadata]);
+  }, [analytics.track, enableHoverCardResolutionTracking, linkState.metadataStatus, linkState.status, loadMetadata]);
   const initShowCard = useCallback(event => {
     // clearing out fadeOutTimeoutId in case it's already counting down to hide the card
     if (fadeOutTimeoutId.current) {

package/dist/esm/messages.js

@@ -86,7 +86,7 @@ export var messages = defineMessages({
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
   },
   connect_unauthorised_account_description_no_provider: {
-    id: 'fabric.linking.connect_unauthorised_account_description',
+    id: 'fabric.linking.connect_unauthorised_account_description_no_provider',
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
   },
@@ -386,6 +386,26 @@ export var messages = defineMessages({
     defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
     description: 'Link safety check warning message'
   },
+  unauthorised_account_description: {
+    id: 'fabric.linking.unauthorised_account_description',
+    defaultMessage: "You're trying to preview a link to a private {context} page. We recommend you review the URL or contact the page owner.",
+    description: 'Explains that user does not have access to a link.'
+  },
+  unauthorised_account_description_no_provider: {
+    id: 'fabric.linking.unauthorised_account_description_no_provider',
+    defaultMessage: "You're trying to preview a link to a private page. We recommend you review the URL or contact the page owner.",
+    description: 'Explains that user does not have access to a link.'
+  },
+  unauthorised_account_name: {
+    id: 'fabric.linking.unauthorised_account_name',
+    defaultMessage: "We can't display private pages from {context}",
+    description: 'Shown when a user does not have access to a link.'
+  },
+  unauthorised_account_name_no_provider: {
+    id: 'fabric.linking.unauthorised_account_name_no_provider',
+    defaultMessage: "We can't display private pages",
+    description: 'Shown when a user does not have access to a link.'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

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

@@ -8,7 +8,7 @@ import { chunkloadFailedEvent as _chunkloadFailedEvent, connectFailedEvent as _c
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
+import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
 var applyCommonAttributes = function applyCommonAttributes(event, commonAttributes) {
   if (event && event.attributes) {
@@ -769,6 +769,14 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        */
       smartLinkQuickActionFailed: function smartLinkQuickActionFailed(props) {
         return dispatchAnalytics(applyCommonAttributes(trackSmartLinkQuickActionFailed(_objectSpread(_objectSpread({}, commonAttributes), props)), commonAttributes));
+      },
+      /**
+       * Fires a track event when we call loadMetadata() to get information for a hover card
+       */
+      hoverCardResolutionStarted: function hoverCardResolutionStarted() {
+        return dispatchAnalytics(applyCommonAttributes(trackHoverCardResolutionStarted(_objectSpread({
+          display: 'hoverCardPreview'
+        }, commonAttributes)), commonAttributes));
       }
     };
   }, [commonAttributes, dispatchAnalytics]);