@atlaskit/smart-card 19.1.13 → 19.1.16

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

@@ -6,6 +6,11 @@ export const context = {
   packageName,
   packageVersion
 };
+const uiActionSubjectIds = {
+  DownloadAction: 'downloadDocument',
+  PreviewAction: 'invokePreviewScreen',
+  ViewAction: 'shortcutGoToLink'
+};
 export class SmartLinkEvents {
   insertSmartLink(url, type, createAnalyticsEvent) {
     fireSmartLinkEvent({
@@ -69,7 +74,7 @@ export const unresolvedEvent = (id, status, definitionId, extensionKey, resource
     } : undefined
   }
 });
-export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
+export const invokeSucceededEvent = (id, actionType, display, extensionKey) => {
   const measure = getMeasure(id, 'resolved') || {
     duration: undefined
   };
@@ -81,12 +86,12 @@ export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
       id,
       actionType,
       display,
-      extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration
     }
   };
 };
-export const invokeFailedEvent = (id, extensionKey, actionType, display, reason) => {
+export const invokeFailedEvent = (id, actionType, display, reason, extensionKey) => {
   const measure = getMeasure(id, 'errored') || {
     duration: undefined
   };
@@ -98,7 +103,7 @@ export const invokeFailedEvent = (id, extensionKey, actionType, display, reason)
       id,
       actionType,
       display,
-      extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration,
       reason
     }
@@ -169,24 +174,30 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (display, definitionId, extensionKey, isModifierKeyPressed) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
+  actionSubjectId: 'titleGoToLink',
   eventType: 'ui',
   attributes: { ...context,
+    id,
+    status,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     display,
-    isModifierKeyPressed
+    isModifierKeyPressed,
+    location,
+    destinationProduct
   }
 });
-export const uiActionClickedEvent = (extensionKey, actionType, display) => ({
+export const uiActionClickedEvent = (actionType, extensionKey, display) => ({
   action: 'clicked',
-  actionSubject: 'smartLinkAction',
+  actionSubject: 'button',
+  actionSubjectId: uiActionSubjectIds[actionType],
   eventType: 'ui',
   attributes: { ...context,
     display,
-    extensionKey,
+    extensionKey: extensionKey || '',
     actionType: actionType
   }
 });
@@ -208,11 +219,12 @@ export const screenAuthPopupEvent = (definitionId, extensionKey) => ({
     extensionKey: extensionKey || ''
   }
 });
-export const uiRenderSuccessEvent = (display, definitionId, extensionKey) => ({
+export const uiRenderSuccessEvent = (display, status, definitionId, extensionKey) => ({
   action: 'renderSuccess',
   actionSubject: 'smartLink',
   eventType: 'ui',
   attributes: { ...context,
+    status,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     display
@@ -228,18 +240,18 @@ export const uiRenderFailedEvent = (display, error, errorInfo) => ({
     display
   }
 });
-export const uiHoverCardViewedEvent = (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardViewedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'viewed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
-    hoverDisplay,
+    previewDisplay,
     previewInvokeMethod
   }
 });
-export const uiHoverCardDismissedEvent = (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardDismissedEvent = (previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'dismissed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
@@ -247,7 +259,7 @@ export const uiHoverCardDismissedEvent = (hoverDisplay, hoverTime, definitionId,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     hoverTime,
-    hoverDisplay,
+    previewDisplay,
     previewInvokeMethod
   }
 });

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

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

@@ -18,6 +18,7 @@ export class CardWithDataRenderer extends React.PureComponent {
 
   render() {
     const {
+      id,
       appearance,
       data,
       isSelected,
@@ -34,6 +35,7 @@ export class CardWithDataRenderer extends React.PureComponent {
 
     if (CardWithDataRenderer.CardContent) {
       return /*#__PURE__*/React.createElement(CardWithDataRenderer.CardContent, {
+        id: id,
         inlinePreloaderStyle: inlinePreloaderStyle,
         appearance: appearance,
         data: data,

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

@@ -26,17 +26,19 @@ export function CardWithUrlContent({
   inlinePreloaderStyle,
   ui,
   children,
-  showHoverPreview
+  showHoverPreview,
+  analyticsEvents
 }) {
   // Get state, actions for this card.
   const {
     state,
     actions,
+    analytics: defaultAnalytics,
     config,
-    analytics,
     renderers,
     error
   } = useSmartLink(id, url, dispatchAnalytics);
+  const analytics = analyticsEvents || defaultAnalytics;
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
@@ -48,17 +50,15 @@ export function CardWithUrlContent({
     isSpecialEvent(event) ? window.open(clickUrl, '_blank') : window.open(clickUrl, '_self');
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
-    if (state.status === 'resolved') {
-      const isModifierKeyPressed = isSpecialEvent(event);
-      analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
-    }
+    const isModifierKeyPressed = isSpecialEvent(event);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();
@@ -80,7 +80,7 @@ export function CardWithUrlContent({
 
   useEffect(() => {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
     }
   }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
@@ -98,6 +98,7 @@ export function CardWithUrlContent({
     }
 
     return /*#__PURE__*/React.createElement(FlexibleCard, {
+      id: id,
       cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
@@ -117,6 +118,7 @@ export function CardWithUrlContent({
   switch (appearance) {
     case 'inline':
       return /*#__PURE__*/React.createElement(InlineCard, {
+        id: id,
         url: url,
         renderers: renderers,
         cardState: state,
@@ -131,6 +133,7 @@ export function CardWithUrlContent({
 
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
+        id: id,
         url: url,
         renderers: renderers,
         authFlow: config && config.authFlow,
@@ -149,6 +152,7 @@ export function CardWithUrlContent({
 
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {
+        id: id,
         url: url,
         cardState: state,
         handleAuthorize: services.length && handleAuthorize || undefined,

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

@@ -9,7 +9,7 @@ const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
 './component-lazy/index'));
 export function CardWithURLRenderer(props) {
-  const [id] = useState(() => uuid());
+  const [id] = useState(() => props.id ? props.id : uuid());
   useEffect(() => {
     // ComponentWillUnmount
     return () => {
@@ -34,7 +34,8 @@ export function CardWithURLRenderer(props) {
     createAnalyticsEvent,
     children,
     ui,
-    showHoverPreview
+    showHoverPreview,
+    analyticsEvents
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -94,7 +95,8 @@ export function CardWithURLRenderer(props) {
     embedIframeRef,
     inlinePreloaderStyle,
     ui,
-    showHoverPreview
+    showHoverPreview,
+    analyticsEvents
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -36,7 +36,8 @@ const DateTime = ({
   date,
   overrideCss,
   type,
-  testId = 'smart-element-date-time'
+  testId = 'smart-element-date-time',
+  text
 }) => {
   const {
     formatRelativeTime,
@@ -74,7 +75,7 @@ const DateTime = ({
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? `${text} ${context}` : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context
     }

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

@@ -20,6 +20,7 @@ import { getSimulatedMetadata } from './utils';
 import extractPreview from '../../extractors/flexible/extract-preview';
 export const HoverCardComponent = ({
   children,
+  id,
   url,
   createAnalyticsEvent
 }) => {
@@ -32,7 +33,7 @@ export const HoverCardComponent = ({
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
   const linkState = useLinkState(url);
-  const analytics = useSmartLinkAnalytics(analyticsHandler);
+  const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   const extensionKey = useMemo(() => getExtensionKey(linkState.details), [linkState]);
   const definitionId = useMemo(() => getDefinitionId(linkState.details), [linkState]);
   const initHideCard = useCallback(() => {
@@ -44,7 +45,7 @@ export const HoverCardComponent = ({
       //Check its previously open to avoid firing events when moving between the child and hover card components
       if (isOpen === true && cardOpenTime.current) {
         const hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey);
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, definitionId, extensionKey, 'mouse_hover');
       }
 
       setIsOpen(false);
@@ -59,7 +60,7 @@ export const HoverCardComponent = ({
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
       if (isOpen === false) {
         cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey);
+        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey, 'mouse_hover');
       }
 
       setIsOpen(true);
@@ -106,6 +107,7 @@ export const HoverCardComponent = ({
       onMouseLeave: initHideCard,
       css: HoverCardContainer
     }, jsx(Card, {
+      id: id,
       appearance: "block",
       url: url,
       ui: {

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

@@ -1,4 +1,4 @@
-export const getSimulatedMetadata = extensionKey => {
+export const getSimulatedMetadata = (extensionKey = '') => {
   switch (extensionKey) {
     case 'confluence-object-provider':
       return {

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

@@ -22,6 +22,7 @@ export class InlineCardResolvedView extends React.Component {
 
   render() {
     const {
+      id,
       title = '',
       isSelected,
       onClick,
@@ -46,6 +47,7 @@ export class InlineCardResolvedView extends React.Component {
 
     if (showHoverPreview && link) {
       return /*#__PURE__*/React.createElement(HoverCard, {
+        id: id,
         url: link
       }, inlineCardResolvedView);
     }

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

@@ -11,6 +11,7 @@ import { InlineCardResolvingView } from './ResolvingView';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
 export const InlineCard = ({
+  id,
   url,
   cardState,
   handleAuthorize,
@@ -53,6 +54,7 @@ export const InlineCard = ({
       }
 
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
+        id: id,
         showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -73,7 +73,7 @@ export var extractPreviewAction = function extractPreviewAction() {
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
       testId: testId,
       onOpen: function onOpen() {
-        handleAnalytics(uiRenderSuccessEvent('preview', key));
+        handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));
       },
       onOpenFailed: function onOpenFailed(error, errorInfo) {
         handleAnalytics(uiRenderFailedEvent('preview', error, errorInfo));

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { SmartCardProvider as Provider, SmartCardContext } from './state';
+export { SmartCardProvider as Provider, SmartCardContext, useSmartLinkAnalytics } from './state';
 export { EditorCardProvider, editorCardProvider } from '@atlaskit/link-provider';
 export { APIError } from '@atlaskit/linking-common';
 export { CardClient as Client } from '@atlaskit/link-provider';