@atlaskit/smart-card 21.1.4 → 22.0.0

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import uuid from 'uuid';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractBlockProps as extractCardProps } from '../../extractors/block';
 import { useSmartCardActions as useLinkActions } from '../actions';
 import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
@@ -15,13 +16,21 @@ export function useSmartLinkActions({
   const [actions, setActions] = useState([]);
   const linkState = useLinkState(url);
   const linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  const linkActions = useLinkActions(id, url, linkAnalytics);
+  const linkActions = useLinkActions(id, url, linkAnalytics); // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+
+  const embedModalSize = useFeatureFlag('embedModalSize');
   useEffect(() => {
     if (!linkState.details) {
       return;
     }
 
+    const featureFlags = {
+      embedModalSize
+    };
     const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      featureFlags,
       handleInvoke: opts => linkActions.invoke(opts, appearance),
       handleAnalytics: analyticsHandler,
       extensionKey: getExtensionKey(linkState.details),
@@ -38,6 +47,6 @@ export function useSmartLinkActions({
       invoke: action.promise
     }));
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
   return actions;
 }

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

@@ -32,25 +32,25 @@ export const fireSmartLinkEvent = (payload, createAnalyticsEvent) => {
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);
   }
 };
-export const resolvedEvent = (id, definitionId, extensionKey, resourceType) => ({
+export const resolvedEvent = props => ({
   action: 'resolved',
   actionSubject: 'smartLink',
   eventType: 'operational',
-  attributes: {
-    id,
-    ...context,
-    ...(definitionId ? {
-      definitionId
-    } : {}),
-    ...(extensionKey ? {
-      extensionKey
-    } : {}),
-    ...(resourceType ? {
-      resourceType
-    } : {})
+  attributes: { ...props,
+    ...context
   }
 });
-export const unresolvedEvent = (id, status, definitionId, extensionKey, resourceType, error) => ({
+export const unresolvedEvent = ({
+  id,
+  definitionId,
+  extensionKey,
+  resourceType,
+  destinationSubproduct,
+  destinationProduct,
+  error,
+  status,
+  location
+}) => ({
   action: 'unresolved',
   actionSubject: 'smartLink',
   eventType: 'operational',
@@ -66,15 +66,33 @@ export const unresolvedEvent = (id, status, definitionId, extensionKey, resource
     ...(resourceType ? {
       resourceType
     } : {}),
+    ...(destinationSubproduct ? {
+      destinationSubproduct
+    } : {}),
+    ...(destinationProduct ? {
+      destinationProduct
+    } : {}),
+    ...(location ? {
+      location
+    } : {}),
     reason: status,
     error: error ? {
-      message: error.message,
-      kind: error.kind,
-      type: error.type
+      message: error === null || error === void 0 ? void 0 : error.message,
+      kind: error === null || error === void 0 ? void 0 : error.kind,
+      type: error === null || error === void 0 ? void 0 : error.type
     } : undefined
   }
 });
-export const invokeSucceededEvent = (id, actionType, display, extensionKey) => {
+export const invokeSucceededEvent = ({
+  id,
+  actionType,
+  display,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => {
   const measure = getMeasure(id, 'resolved') || {
     duration: undefined
   };
@@ -86,12 +104,26 @@ export const invokeSucceededEvent = (id, actionType, display, extensionKey) => {
       id,
       actionType,
       display,
-      extensionKey: extensionKey || '',
+      definitionId,
+      destinationProduct,
+      destinationSubproduct,
+      location,
+      extensionKey,
       duration: measure.duration
     }
   };
 };
-export const invokeFailedEvent = (id, actionType, display, reason, extensionKey) => {
+export const invokeFailedEvent = ({
+  id,
+  actionType,
+  display,
+  reason,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => {
   const measure = getMeasure(id, 'errored') || {
     duration: undefined
   };
@@ -103,78 +135,127 @@ export const invokeFailedEvent = (id, actionType, display, reason, extensionKey)
       id,
       actionType,
       display,
-      extensionKey: extensionKey || '',
+      extensionKey,
+      definitionId,
+      destinationProduct,
+      destinationSubproduct,
+      location,
       duration: measure.duration,
       reason
     }
   };
 };
-export const connectSucceededEvent = (definitionId, extensionKey) => ({
+export const connectSucceededEvent = ({
+  definitionId,
+  extensionKey,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   action: 'connectSucceeded',
   actionSubject: 'smartLink',
   eventType: 'operational',
   attributes: { ...context,
-    ...(definitionId ? {
-      definitionId
-    } : {}),
-    ...(extensionKey ? {
-      extensionKey
-    } : {})
+    definitionId,
+    extensionKey,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const connectFailedEvent = (definitionId, extensionKey, reason) => ({
+export const connectFailedEvent = ({
+  definitionId,
+  extensionKey,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  reason
+}) => ({
   action: 'connectFailed',
   actionSubject: 'smartLink',
   actionSubjectId: reason,
   eventType: 'operational',
   attributes: { ...context,
-    ...(reason ? {
-      reason: reason
-    } : {}),
-    ...(definitionId ? {
-      definitionId
-    } : {}),
-    ...(extensionKey ? {
-      extensionKey
-    } : {})
+    reason,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const trackAppAccountConnected = (definitionId, extensionKey) => ({
+export const trackAppAccountConnected = ({
+  definitionId,
+  extensionKey,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   action: 'connected',
   actionSubject: 'applicationAccount',
   eventType: 'track',
   attributes: { ...context,
-    ...(definitionId ? {
-      definitionId
-    } : {}),
-    ...(extensionKey ? {
-      extensionKey
-    } : {})
+    definitionId,
+    extensionKey,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const uiAuthEvent = (display, definitionId, extensionKey) => ({
+export const uiAuthEvent = ({
+  definitionId,
+  extensionKey,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  display
+}) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: 'connectAccount',
   eventType: 'ui',
   attributes: { ...context,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
+    definitionId,
+    extensionKey,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     display
   }
 });
-export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey) => ({
+export const uiAuthAlternateAccountEvent = ({
+  definitionId,
+  extensionKey,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  display
+}) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   actionSubjectId: 'tryAnotherAccount',
   eventType: 'ui',
   attributes: { ...context,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
+    definitionId,
+    extensionKey,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     display
   }
 });
-export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId) => ({
+export const uiCardClickedEvent = ({
+  id,
+  display,
+  status,
+  definitionId,
+  extensionKey,
+  isModifierKeyPressed,
+  location,
+  destinationProduct,
+  destinationSubproduct,
+  actionSubjectId
+}) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   actionSubjectId,
@@ -182,8 +263,8 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
   attributes: { ...context,
     id,
     status,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
+    definitionId,
+    extensionKey,
     display,
     isModifierKeyPressed,
     location,
@@ -191,7 +272,16 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     destinationSubproduct
   }
 });
-export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({
+export const uiActionClickedEvent = ({
+  id,
+  actionType,
+  extensionKey,
+  display,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: uiActionSubjectIds[actionType],
@@ -199,84 +289,169 @@ export const uiActionClickedEvent = (id, actionType, extensionKey, display) => (
   attributes: { ...context,
     id,
     display,
-    extensionKey: extensionKey || '',
-    actionType: actionType
+    actionType: actionType,
+    extensionKey: extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const uiClosedAuthEvent = (display, definitionId, extensionKey) => ({
+export const uiClosedAuthEvent = ({
+  display,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   action: 'closed',
   actionSubject: 'consentModal',
   eventType: 'ui',
   attributes: { ...context,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     display
   }
 });
-export const screenAuthPopupEvent = (definitionId, extensionKey) => ({
+export const screenAuthPopupEvent = ({
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   actionSubject: 'consentModal',
   eventType: 'screen',
   attributes: { ...context,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || ''
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const uiRenderSuccessEvent = (display, status, definitionId, extensionKey) => ({
+export const uiRenderSuccessEvent = ({
+  display,
+  status,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   action: 'renderSuccess',
   actionSubject: 'smartLink',
   eventType: 'ui',
   attributes: { ...context,
     status,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     display
   }
 });
-export const uiRenderFailedEvent = (display, error, errorInfo) => ({
+export const uiRenderFailedEvent = ({
+  display,
+  error,
+  errorInfo,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location
+}) => ({
   actionSubject: 'smartLink',
   action: 'renderFailed',
   eventType: 'ui',
   attributes: {
     error,
     errorInfo,
-    display
+    display,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location
   }
 });
-export const uiHoverCardViewedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardViewedEvent = ({
+  id,
+  previewDisplay,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  previewInvokeMethod
+}) => ({
   action: 'viewed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
     id,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
     previewDisplay,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     previewInvokeMethod
   }
 });
-export const uiHoverCardDismissedEvent = (id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardDismissedEvent = ({
+  id,
+  previewDisplay,
+  hoverTime,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  previewInvokeMethod
+}) => ({
   action: 'dismissed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
     id,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
-    hoverTime,
     previewDisplay,
+    hoverTime,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     previewInvokeMethod
   }
 });
-export const uiHoverCardOpenLinkClickedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardOpenLinkClickedEvent = ({
+  id,
+  previewDisplay,
+  extensionKey,
+  definitionId,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  previewInvokeMethod
+}) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: 'shortcutGoToLink',
   eventType: 'ui',
   attributes: { ...context,
     id,
-    definitionId: definitionId || '',
-    extensionKey: extensionKey || '',
     previewDisplay,
+    extensionKey,
+    definitionId,
+    destinationProduct,
+    destinationSubproduct,
+    location,
     previewInvokeMethod
   }
 });

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

@@ -1,13 +1,31 @@
-import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';
+import { resolvedEvent, unresolvedEvent } from './analytics';
 export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent } from './analytics';
-export const instrumentEvent = (id, status, definitionId, extensionKey, resourceType, error) => {
+export const instrumentEvent = ({
+  id,
+  status,
+  extensionKey,
+  definitionId,
+  resourceType,
+  destinationProduct,
+  destinationSubproduct,
+  location,
+  error
+}) => {
   const measure = getMeasure(id, status) || {
     duration: undefined
   };
 
   if (status === 'resolved') {
-    const event = resolvedEvent(id, definitionId, extensionKey, resourceType);
+    const event = resolvedEvent({
+      id,
+      extensionKey,
+      definitionId,
+      resourceType,
+      destinationProduct,
+      destinationSubproduct,
+      location
+    });
     return { ...event,
       attributes: { ...event.attributes,
         duration: measure.duration
@@ -15,7 +33,17 @@ export const instrumentEvent = (id, status, definitionId, extensionKey, resource
     };
   } else {
     if ((error === null || error === void 0 ? void 0 : error.type) !== 'ResolveUnsupportedError') {
-      const event = unresolvedEvent(id, status, definitionId, extensionKey, resourceType, error);
+      const event = unresolvedEvent({
+        id,
+        status,
+        extensionKey,
+        definitionId,
+        resourceType,
+        destinationProduct,
+        destinationSubproduct,
+        location,
+        error
+      });
       return { ...event,
         attributes: { ...event.attributes,
           duration: measure.duration

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -32,7 +32,7 @@ export async function previewFunction({
     document.body.appendChild(popupMountPoint);
   }
 
-  let Modal = await import('../../common/Modal');
+  let Modal = await import('../../EmbedModal');
   ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {

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

@@ -14,6 +14,7 @@ import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
 import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
   url,
@@ -37,9 +38,17 @@ export const BlockCard = ({
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
+  // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+  const embedModalSize = useFeatureFlag('embedModalSize');
+  const featureFlags = {
+    embedModalSize
+  };
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
+    featureFlags,
     handleAnalytics,
     handleInvoke,
     extensionKey: getExtensionKey(details)

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

@@ -51,7 +51,7 @@ export function CardWithUrlContent({
   const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 
@@ -61,7 +61,16 @@ export function CardWithUrlContent({
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
+    analytics.ui.cardClickedEvent({
+      id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId,
+      extensionKey,
+      isModifierKeyPressed,
+      destinationProduct: product,
+      destinationSubproduct: subproduct
+    });
 
     if (onClick) {
       onClick(event);
@@ -81,7 +90,14 @@ export function CardWithUrlContent({
 
     if (state.status !== 'pending') {
       measure.create(id, state.status);
-      analytics.operational.instrument(id, state.status, definitionId, extensionKey, resourceType, state.error);
+      analytics.operational.instrument({
+        id,
+        status: state.status,
+        definitionId,
+        extensionKey,
+        resourceType,
+        error: state.error
+      });
     }
   }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational]); // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:
@@ -90,7 +106,13 @@ export function CardWithUrlContent({
 
   useEffect(() => {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent({
+        display: appearance,
+        status: state.status,
+        id,
+        definitionId,
+        extensionKey
+      });
     }
   }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 

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

@@ -68,7 +68,12 @@ export function CardWithURLRenderer(props) {
       const errorInfo = {
         componentStack
       };
-      analytics.ui.renderFailedEvent(appearance, id, error, errorInfo);
+      analytics.ui.renderFailedEvent({
+        display: appearance,
+        id,
+        error,
+        errorInfo
+      });
     }
   }, [analytics.ui, appearance, id]);