@atlaskit/smart-card 21.2.0 → 22.1.0

package/dist/es2019/view/common/Modal.js

@@ -14,10 +14,12 @@ manually passed to your custom components.
 
 For a complete guide on customization using the new compositional API, refer to the docs at
 https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
-import React, { useState } from 'react';
-import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+import React, { useCallback, useRef, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
 import { Header } from './ModalHeader';
 import { getIframeSandboxAttribute } from '../../utils';
+import withAnalytics from '../EmbedModal/components/analytics';
+import { EmbedModalSize } from '../EmbedModal/types';
 const iframeStyles = {
   width: `100%`,
   height: 'calc(100vh - 248px)'
@@ -45,7 +47,7 @@ const Modal = ({
   providerName,
   metadata,
   icon,
-  closeLabel,
+  closeLabel = 'Close Preview',
   iframeName,
   title,
   url,
@@ -56,16 +58,35 @@ const Modal = ({
   onDownloadActionClick
 }) => {
   let [isOpen, setIsOpen] = useState(showModal);
+  const openAt = useRef();
+  const handleOnOpenComplete = useCallback(() => {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: EmbedModalSize.Small
+      });
+    }
+  }, [onOpen]);
+  const handleOnCloseComplete = useCallback(() => {
+    if (onClose) {
+      const duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration,
+        size: EmbedModalSize.Small
+      });
+    }
+  }, [onClose]);
   const sandbox = getIframeSandboxAttribute(isTrusted);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",
     width: "large",
     testId: testId,
-    onOpenComplete: onOpen,
+    onOpenComplete: handleOnOpenComplete,
     onClose: () => {
       setIsOpen(false);
     },
-    onCloseComplete: onClose
+    onCloseComplete: handleOnCloseComplete
   }, /*#__PURE__*/React.createElement(Header, {
     providerName: providerName,
     icon: icon,
@@ -91,4 +112,4 @@ const Modal = ({
   }))));
 };
 
-export default ModalWithErrorBoundary;
+export default withAnalytics(ModalWithErrorBoundary);

package/dist/es2019/view/common/ModalHeader.js

@@ -74,7 +74,7 @@ export const Header = ({
     testId: "preview-view-action",
     iconAfter: jsx(ShortcutIcon, {
       size: "small",
-      label: "go to source"
+      label: ""
     }),
     onClick: onViewActionClick
   }, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
@@ -82,6 +82,7 @@ export const Header = ({
     iconBefore: jsx(EditorCloseIcon, {
       label: label
     }),
-    onClick: onClose
+    onClick: onClose,
+    testId: "preview-close-button"
   }))));
 };

package/dist/esm/extractors/block/index.js

@@ -37,14 +37,13 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 
 export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
   if (opts) {
-    var featureFlags = opts.featureFlags,
-        handleInvoke = opts.handleInvoke,
-        handleAnalytics = opts.handleAnalytics,
-        extensionKey = opts.extensionKey,
-        source = opts.source,
-        testId = opts.testId;
+    var handleInvoke = opts.handleInvoke;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(_objectSpread(_objectSpread({}, opts), {}, {
+      viewProps: props,
+      jsonLd: jsonLd,
+      platform: platform
+    })); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -4,9 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { uiRenderSuccessEvent, uiRenderFailedEvent } from '../../../utils/analytics';
 import { extractDownloadUrl } from '../detail';
-import { extractProvider, extractPreview } from '@atlaskit/linking-common/extractors';
+import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
 
 var getMetadataFromJsonLd = function getMetadataFromJsonLd(jsonLd, platform) {
@@ -51,16 +50,19 @@ var getInvokeOpts = function getInvokeOpts(key, action, source) {
   };
 };
 
-export var extractPreviewAction = function extractPreviewAction() {
-  var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'empty-object-provider';
-  var viewProps = arguments.length > 1 ? arguments[1] : undefined;
-  var jsonLd = arguments.length > 2 ? arguments[2] : undefined;
-  var handleInvoke = arguments.length > 3 ? arguments[3] : undefined;
-  var handleAnalytics = arguments.length > 4 ? arguments[4] : undefined;
-  var testId = arguments.length > 5 ? arguments[5] : undefined;
-  var platform = arguments.length > 6 ? arguments[6] : undefined;
-  var source = arguments.length > 7 ? arguments[7] : undefined;
-  var featureFlags = arguments.length > 8 ? arguments[8] : undefined;
+export var extractPreviewAction = function extractPreviewAction(_ref) {
+  var _ref$extensionKey = _ref.extensionKey,
+      extensionKey = _ref$extensionKey === void 0 ? 'empty-object-provider' : _ref$extensionKey,
+      viewProps = _ref.viewProps,
+      jsonLd = _ref.jsonLd,
+      handleInvoke = _ref.handleInvoke,
+      testId = _ref.testId,
+      platform = _ref.platform,
+      origin = _ref.origin,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'block' : _ref$source,
+      featureFlags = _ref.featureFlags,
+      analytics = _ref.analytics;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -72,14 +74,10 @@ export var extractPreviewAction = function extractPreviewAction() {
     // Build action using instrumentation hooks.
     var key = extensionKey;
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
+      analytics: analytics,
+      origin: origin,
       featureFlags: featureFlags,
       testId: testId,
-      onOpen: function onOpen() {
-        handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));
-      },
-      onOpenFailed: function onOpenFailed(error, errorInfo) {
-        handleAnalytics(uiRenderFailedEvent('preview', error, errorInfo));
-      },
       onDownloadActionClick: function onDownloadActionClick() {
         handleInvoke(getInvokeOpts(key, 'DownloadAction'));
       },
@@ -89,7 +87,7 @@ export var extractPreviewAction = function extractPreviewAction() {
     })); // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.
 
-    var previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - Promise invoked by the action invocation handler; open preview.
+    var previewActionProps = getInvokeOpts(key, 'PreviewAction', source); // - Promise invoked by the action invocation handler; open preview.
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
 

package/dist/esm/state/actions/index.js

@@ -184,24 +184,51 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     var services = getServices(details); // When authentication is triggered, let GAS know!
 
     if (status === 'unauthorized') {
-      analytics.ui.authEvent(appearance, definitionId, extensionKey);
+      analytics.ui.authEvent({
+        display: appearance,
+        definitionId: definitionId,
+        extensionKey: extensionKey
+      });
     }
 
     if (status === 'forbidden') {
-      analytics.ui.authAlternateAccountEvent(appearance, definitionId, extensionKey);
+      analytics.ui.authAlternateAccountEvent({
+        display: appearance,
+        definitionId: definitionId,
+        extensionKey: extensionKey
+      });
     }
 
     if (services.length > 0) {
-      analytics.screen.authPopupEvent(definitionId, extensionKey);
+      analytics.screen.authPopupEvent({
+        definitionId: definitionId,
+        extensionKey: extensionKey
+      });
       auth(services[0].url).then(function () {
-        analytics.track.appAccountConnected(definitionId, extensionKey);
-        analytics.operational.connectSucceededEvent(id, definitionId, extensionKey);
+        analytics.track.appAccountConnected({
+          definitionId: definitionId,
+          extensionKey: extensionKey
+        });
+        analytics.operational.connectSucceededEvent({
+          id: id,
+          definitionId: definitionId,
+          extensionKey: extensionKey
+        });
         reload();
       }, function (err) {
-        analytics.operational.connectFailedEvent(id, definitionId, extensionKey, err.type);
+        analytics.operational.connectFailedEvent({
+          id: id,
+          definitionId: definitionId,
+          extensionKey: extensionKey,
+          reason: err.type
+        });
 
         if (err.type === 'auth_window_closed') {
-          analytics.ui.closedAuthEvent(appearance, definitionId, extensionKey);
+          analytics.ui.closedAuthEvent({
+            display: appearance,
+            definitionId: definitionId,
+            extensionKey: extensionKey
+          });
         }
 
         reload();
@@ -222,7 +249,13 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
               measure.mark(markName, 'pending');
               _context2.prev = 4;
               // Begin analytics instrumentation.
-              analytics.ui.actionClickedEvent(id, key, action.type, source, opts.type); // Invoke action - either client-side or server-side.
+              analytics.ui.actionClickedEvent({
+                id: id,
+                extensionKey: key,
+                actionType: action.type,
+                display: source,
+                invokeType: opts.type
+              }); // Invoke action - either client-side or server-side.
 
               if (!(opts.type === 'client')) {
                 _context2.next = 12;
@@ -246,14 +279,25 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
 
             case 15:
               measure.mark(markName, 'resolved');
-              analytics.operational.invokeSucceededEvent(id, key, action.type, source);
+              analytics.operational.invokeSucceededEvent({
+                id: id,
+                extensionKey: key,
+                actionType: action.type,
+                display: source
+              });
               return _context2.abrupt("return", response);
 
             case 20:
               _context2.prev = 20;
               _context2.t0 = _context2["catch"](4);
               measure.mark(markName, 'errored');
-              analytics.operational.invokeFailedEvent(id, key, action.type, source, _context2.t0.message);
+              analytics.operational.invokeFailedEvent({
+                id: id,
+                extensionKey: key,
+                actionType: action.type,
+                display: source,
+                reason: _context2.t0.message
+              });
               throw _context2.t0;
 
             case 25:

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

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