@atlaskit/smart-card 21.2.0 → 22.1.0

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

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
-
 var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
 
 var _actions = require("../../../state/actions");
@@ -37,6 +35,8 @@ var _utils2 = require("../utils");
 
 var _HoverCardLoadingView = _interopRequireDefault(require("./HoverCardLoadingView"));
 
+var _SnippetOrPreview = _interopRequireDefault(require("./SnippetOrPreview"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -55,7 +55,9 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
       }
 
       window.open(url, '_blank');
-      analytics.ui.hoverCardOpenLinkClickedEvent('card');
+      analytics.ui.hoverCardOpenLinkClickedEvent({
+        previewDisplay: 'card'
+      });
     },
     testId: 'hover-card-open-button'
   };
@@ -102,15 +104,24 @@ var HoverCardContent = function HoverCardContent(_ref) {
   (0, _react.useEffect)(function () {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent(_utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
+    analytics.ui.renderSuccessEvent({
+      display: _utils2.SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status
+    });
   }, [analytics.ui, cardState.status]);
   var extensionKey = (0, _react.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
   var onClick = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent(undefined, _utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
-  }, [cardState.status, analytics.ui]);
+    analytics.ui.cardClickedEvent({
+      id: id,
+      display: _utils2.SMART_CARD_ANALYTICS_DISPLAY,
+      status: cardState.status,
+      isModifierKeyPressed: isModifierKeyPressed,
+      actionSubjectId: 'titleGoToLink'
+    });
+  }, [cardState.status, analytics.ui, id]);
   var titleActions = (0, _react.useMemo)(function () {
     return [getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
@@ -126,7 +137,19 @@ var HoverCardContent = function HoverCardContent(_ref) {
       subtitle = _extractMetadata.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
-  var body = data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, null) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+
+  var snippetHeight = _react.default.useRef(0);
+
+  var snippetBlockRef = (0, _react.useRef)(null);
+  var onSnippetRender = (0, _react.useCallback)(function () {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  var body = (0, _SnippetOrPreview.default)({
+    data: data,
+    snippetHeight: snippetHeight.current
+  });
   var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
@@ -159,7 +182,12 @@ var HoverCardContent = function HoverCardContent(_ref) {
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.metadataBlockCss,
     maxLines: 1
-  }), body, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+  }), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    testId: 'hidden-snippet',
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: _styled.hiddenSnippetStyles
+  }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.footerBlockCss

package/dist/cjs/view/HoverCard/components/SnippetOrPreview.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
+
+var _styled = require("../styled");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SnippetOrPreview = function SnippetOrPreview(_ref) {
+  var data = _ref.data,
+      snippetHeight = _ref.snippetHeight;
+  var transitionStarted = (0, _react.useRef)(false);
+  var previewBlockRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSnippet = _useState2[0],
+      setShowSnippet = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      previewCss = _useState4[0],
+      setPreviewCss = _useState4[1]; // Set Preview to a fixed height to enable transitions
+
+
+  var onPreviewRender = (0, _react.useCallback)(function () {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss((0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []); // On error set Preview to Snippet height with transition
+
+  var onPreviewError = (0, _react.useCallback)(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss((0, _styled.getTransitionStyles)(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  var onPreviewTransitionEnd = (0, _react.useCallback)(function () {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+};
+
+var _default = SnippetOrPreview;
+exports.default = _default;

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

@@ -36,7 +36,12 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   }, [createAnalyticsEvent]);
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
   var onError = (0, _react.useCallback)(function (error, info) {
-    analytics.ui.renderFailedEvent(_utils.SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+    analytics.ui.renderFailedEvent({
+      display: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+      id: id,
+      error: error,
+      errorInfo: info
+    });
   }, [analytics.ui, id]);
   return (0, _core.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,

package/dist/cjs/view/HoverCard/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.hiddenSnippetStyles = exports.getTransitionStyles = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -44,4 +44,12 @@ exports.footerBlockCss = footerBlockCss;
 var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.loadingViewContainer = loadingViewContainer;
 var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
-exports.skeletonContainer = skeletonContainer;
+exports.skeletonContainer = skeletonContainer;
+var hiddenSnippetStyles = (0, _core.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
+exports.hiddenSnippetStyles = hiddenSnippetStyles;
+
+var getTransitionStyles = function getTransitionStyles(snippetHeight) {
+  return (0, _core.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+};
+
+exports.getTransitionStyles = getTransitionStyles;

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

@@ -29,6 +29,10 @@ var _ModalHeader = require("./ModalHeader");
 
 var _utils = require("../../utils");
 
+var _analytics = _interopRequireDefault(require("../EmbedModal/components/analytics"));
+
+var _types = require("../EmbedModal/types");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -78,7 +82,8 @@ var Modal = function Modal(_ref) {
       providerName = _ref.providerName,
       metadata = _ref.metadata,
       icon = _ref.icon,
-      closeLabel = _ref.closeLabel,
+      _ref$closeLabel = _ref.closeLabel,
+      closeLabel = _ref$closeLabel === void 0 ? 'Close Preview' : _ref$closeLabel,
       iframeName = _ref.iframeName,
       title = _ref.title,
       url = _ref.url,
@@ -94,16 +99,35 @@ var Modal = function Modal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var openAt = (0, _react.useRef)();
+  var handleOnOpenComplete = (0, _react.useCallback)(function () {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onOpen]);
+  var handleOnCloseComplete = (0, _react.useCallback)(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onClose]);
   var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",
     width: "large",
     testId: testId,
-    onOpenComplete: onOpen,
+    onOpenComplete: handleOnOpenComplete,
     onClose: function onClose() {
       setIsOpen(false);
     },
-    onCloseComplete: onClose
+    onCloseComplete: handleOnCloseComplete
   }, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
     providerName: providerName,
     icon: icon,
@@ -129,5 +153,6 @@ var Modal = function Modal(_ref) {
   }))));
 };
 
-var _default = ModalWithErrorBoundary;
+var _default = (0, _analytics.default)(ModalWithErrorBoundary);
+
 exports.default = _default;

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

@@ -98,7 +98,7 @@ var Header = function Header(_ref) {
     testId: "preview-view-action",
     iconAfter: (0, _core.jsx)(_shortcut.default, {
       size: "small",
-      label: "go to source"
+      label: ""
     }),
     onClick: onViewActionClick
   }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
@@ -106,7 +106,8 @@ var Header = function Header(_ref) {
     iconBefore: (0, _core.jsx)(_close.default, {
       label: label
     }),
-    onClick: onClose
+    onClick: onClose,
+    testId: "preview-close-button"
   }))));
 };
 

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

@@ -28,15 +28,14 @@ const extractBlockDetails = jsonLd => [extractCommentCount(jsonLd), extractProgr
 export const extractBlockActions = (props, jsonLd, opts, platform) => {
   if (opts) {
     const {
-      featureFlags,
-      handleInvoke,
-      handleAnalytics,
-      extensionKey,
-      source,
-      testId
+      handleInvoke
     } = opts;
     const actions = extractActions(jsonLd, handleInvoke);
-    const previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
+    const previewAction = extractPreviewAction({ ...opts,
+      viewProps: props,
+      jsonLd,
+      platform
+    }); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -1,6 +1,5 @@
-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';
 
 const getMetadataFromJsonLd = (jsonLd, platform) => {
@@ -39,7 +38,18 @@ const getInvokeOpts = (key, action, source) => ({
   }
 });
 
-export const extractPreviewAction = (extensionKey = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags) => {
+export const extractPreviewAction = ({
+  extensionKey = 'empty-object-provider',
+  viewProps,
+  jsonLd,
+  handleInvoke,
+  testId,
+  platform,
+  origin,
+  source = 'block',
+  featureFlags,
+  analytics
+}) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   const metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -51,14 +61,10 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     // Build action using instrumentation hooks.
     const key = extensionKey;
     const previewAction = PreviewAction({ ...metadata,
+      analytics,
+      origin,
       featureFlags,
       testId,
-      onOpen: () => {
-        handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));
-      },
-      onOpenFailed: (error, errorInfo) => {
-        handleAnalytics(uiRenderFailedEvent('preview', error, errorInfo));
-      },
       onDownloadActionClick: () => {
         handleInvoke(getInvokeOpts(key, 'DownloadAction'));
       },
@@ -68,7 +74,7 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     }); // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.
 
-    const previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - Promise invoked by the action invocation handler; open preview.
+    const 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/es2019/state/actions/index.js

@@ -155,24 +155,51 @@ export const useSmartCardActions = (id, url, analytics) => {
     const 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,
+        extensionKey
+      });
     }
 
     if (status === 'forbidden') {
-      analytics.ui.authAlternateAccountEvent(appearance, definitionId, extensionKey);
+      analytics.ui.authAlternateAccountEvent({
+        display: appearance,
+        definitionId,
+        extensionKey
+      });
     }
 
     if (services.length > 0) {
-      analytics.screen.authPopupEvent(definitionId, extensionKey);
+      analytics.screen.authPopupEvent({
+        definitionId,
+        extensionKey
+      });
       auth(services[0].url).then(() => {
-        analytics.track.appAccountConnected(definitionId, extensionKey);
-        analytics.operational.connectSucceededEvent(id, definitionId, extensionKey);
+        analytics.track.appAccountConnected({
+          definitionId,
+          extensionKey
+        });
+        analytics.operational.connectSucceededEvent({
+          id,
+          definitionId,
+          extensionKey
+        });
         reload();
       }, err => {
-        analytics.operational.connectFailedEvent(id, definitionId, extensionKey, err.type);
+        analytics.operational.connectFailedEvent({
+          id,
+          definitionId,
+          extensionKey,
+          reason: err.type
+        });
 
         if (err.type === 'auth_window_closed') {
-          analytics.ui.closedAuthEvent(appearance, definitionId, extensionKey);
+          analytics.ui.closedAuthEvent({
+            display: appearance,
+            definitionId,
+            extensionKey
+          });
         }
 
         reload();
@@ -191,7 +218,13 @@ export const useSmartCardActions = (id, url, analytics) => {
 
     try {
       // 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,
+        extensionKey: key,
+        actionType: action.type,
+        display: source,
+        invokeType: opts.type
+      }); // Invoke action - either client-side or server-side.
 
       let response;
 
@@ -202,11 +235,22 @@ export const useSmartCardActions = (id, url, analytics) => {
       }
 
       measure.mark(markName, 'resolved');
-      analytics.operational.invokeSucceededEvent(id, key, action.type, source);
+      analytics.operational.invokeSucceededEvent({
+        id,
+        extensionKey: key,
+        actionType: action.type,
+        display: source
+      });
       return response;
     } catch (err) {
       measure.mark(markName, 'errored');
-      analytics.operational.invokeFailedEvent(id, key, action.type, source, err.message);
+      analytics.operational.invokeFailedEvent({
+        id,
+        extensionKey: key,
+        actionType: action.type,
+        display: source,
+        reason: err.message
+      });
       throw err;
     }
   }, [id, analytics.ui, analytics.operational, connections.client]);

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

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