@atlaskit/smart-card 23.11.2 → 23.12.0

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

@@ -7,12 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hoverCardClassName = exports.getOpenAction = exports.default = void 0;
+exports.hoverCardClassName = exports.getOpenAction = exports.getCopyAction = exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _react = require("@emotion/react");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
+var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
+
 var _extractors = require("@atlaskit/linking-common/extractors");
 
 var _react2 = _interopRequireWildcard(require("react"));
@@ -74,6 +80,47 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
 
 exports.getOpenAction = getOpenAction;
 
+var getCopyAction = function getCopyAction(url) {
+  return {
+    name: _constants.ActionName.CustomAction,
+    icon: (0, _react.jsx)(_copy.default, {
+      label: "copy url",
+      size: "medium"
+    }),
+    iconPosition: 'before',
+    onClick: function () {
+      var _onClick = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return navigator.clipboard.writeText(url);
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }(),
+    tooltipMessage: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.copy_url_to_clipboard),
+    testId: 'hover-card-copy-button'
+  };
+};
+
+exports.getCopyAction = getCopyAction;
+
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
 
@@ -107,7 +154,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     });
   }, [cardState.status, analytics.ui, id]);
   var titleActions = (0, _react2.useMemo)(function () {
-    return [getOpenAction(url, analytics, onActionClick)];
+    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? (0, _extractors.extractType)(data) : undefined;

package/dist/es2019/messages.js

@@ -85,6 +85,11 @@ export const messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration 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.'
   },
+  copy_url_to_clipboard: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Copy link',
+    description: ''
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

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, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { trackLinkUpdated } from '../../utils/analytics/analytics';
+import { trackLinkUpdated, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
 
 const applyCommonAttributes = (event, commonAttributes) => {
   if (event && event.attributes) {
@@ -156,6 +156,74 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       actionSubjectId
     }), commonAttributes)),
 
+    /**
+     * This fires an event that represents when a user dwells their cursor on a Smart Link's iframe.
+     * @param id The unique ID for this Smart Link.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param location Where the Smart Link is currently rendered.
+     * @param destinationProduct The product the Smart Link is linked to.
+     * @param dwellTime Total seconds that the user has dwelled on this iframe
+     * @param dwellPercentVisible Percentage element was visible at end of dwell
+     * @returns
+     */
+    iframeDwelledEvent: ({
+      id,
+      display,
+      status,
+      definitionId,
+      extensionKey,
+      location,
+      destinationProduct,
+      destinationSubproduct,
+      dwellTime,
+      dwellPercentVisible
+    }) => dispatchAnalytics(applyCommonAttributes(uiIframeDwelledEvent({
+      id,
+      display,
+      status,
+      definitionId,
+      extensionKey,
+      location,
+      destinationProduct,
+      destinationSubproduct,
+      dwellTime,
+      dwellPercentVisible
+    }), commonAttributes)),
+
+    /**
+     * This fires an event that represents when a user clicks or tabs into a Smart Link's iframe.
+     * @param id The unique ID for this Smart Link.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param location Where the Smart Link is currently rendered.
+     * @param destinationProduct The product the Smart Link is linked to.
+     * @returns
+     */
+    iframeFocusedEvent: ({
+      id,
+      display,
+      status,
+      definitionId,
+      extensionKey,
+      location,
+      destinationProduct,
+      destinationSubproduct
+    }) => dispatchAnalytics(applyCommonAttributes(uiIframeFocusedEvent({
+      id,
+      display,
+      status,
+      definitionId,
+      extensionKey,
+      location,
+      destinationProduct,
+      destinationSubproduct
+    }), commonAttributes)),
+
     /**
      * This fires an event that represents when a user clicks on a Smart Link action.
      * Note: This also starts the UFO smart-link-action-invocation experience.

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

@@ -297,6 +297,58 @@ export const uiCardClickedEvent = ({
     destinationSubproduct
   }
 });
+export const uiIframeDwelledEvent = ({
+  id,
+  display,
+  status,
+  definitionId,
+  extensionKey,
+  location,
+  destinationProduct,
+  destinationSubproduct,
+  dwellTime,
+  dwellPercentVisible
+}) => ({
+  action: 'dwelled',
+  actionSubject: 'smartLinkIframe',
+  eventType: 'ui',
+  attributes: { ...context,
+    id,
+    status,
+    definitionId,
+    extensionKey,
+    display,
+    location,
+    destinationProduct,
+    destinationSubproduct,
+    dwellTime,
+    dwellPercentVisible
+  }
+});
+export const uiIframeFocusedEvent = ({
+  id,
+  display,
+  status,
+  definitionId,
+  extensionKey,
+  location,
+  destinationProduct,
+  destinationSubproduct
+}) => ({
+  action: 'focused',
+  actionSubject: 'smartLinkIframe',
+  eventType: 'ui',
+  attributes: { ...context,
+    id,
+    status,
+    definitionId,
+    extensionKey,
+    display,
+    location,
+    destinationProduct,
+    destinationSubproduct
+  }
+});
 export const uiActionClickedEvent = ({
   id,
   actionType,

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

@@ -1,6 +1,6 @@
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiIframeDwelledEvent } from './analytics';
 export const instrumentEvent = ({
   id,
   status,

package/dist/es2019/version.json

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

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

@@ -113,6 +113,30 @@ export function CardWithUrlContent({
       });
     }
   }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
+  const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
+    analytics.ui.iframeDwelledEvent({
+      id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId,
+      extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct,
+      dwellTime: dwellTime,
+      dwellPercentVisible: dwellPercentVisible
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+  const onIframeFocus = useCallback(() => {
+    analytics.ui.iframeFocusedEvent({
+      id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId,
+      extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
 
   if (isFlexibleUi) {
     let cardState = state;
@@ -204,7 +228,9 @@ export function CardWithUrlContent({
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,
-        ref: embedIframeRef
+        ref: embedIframeRef,
+        onIframeDwell: onIframeDwell,
+        onIframeFocus: onIframeFocus
       });
   }
 }

package/dist/es2019/view/EmbedCard/components/Frame.js

@@ -1,20 +1,101 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { getIframeSandboxAttribute } from '../../../utils';
+import { IframeDwellTracker } from './IframeDwellTracker';
+import { useFeatureFlag } from '@atlaskit/link-provider';
+
+function mergeRefs(refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 export const Frame = /*#__PURE__*/React.forwardRef(({
   url,
   isTrusted = false,
-  testId
+  testId,
+  onIframeDwell,
+  onIframeFocus
 }, iframeRef) => {
   const [isIframeLoaded, setIframeLoaded] = useState(false);
+  const [isMouseOver, setMouseOver] = useState(false);
+  const [isWindowFocused, setWindowFocused] = useState(true);
+  const ref = useRef();
+  const mergedRef = mergeRefs([iframeRef, ref]);
+  const trackIframeDwellEvents = useFeatureFlag('trackIframeDwellEvents');
+  const [percentVisible, setPercentVisible] = useState(0);
+  /**
+   * These are the 'percent visible' thresholds at which the intersectionObserver will
+   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
+   * vice versa. It's in a state object so that its static for the useEffect
+   */
+
+  const [threshold] = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]);
+  useEffect(() => {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    if (!ref || !ref.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
+      });
+    }, {
+      threshold
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [trackIframeDwellEvents, threshold, mergedRef]);
+  useEffect(() => {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    const onBlur = () => {
+      setWindowFocused(false);
+
+      if (document.activeElement === ref.current) {
+        onIframeFocus && onIframeFocus();
+      }
+    };
+
+    const onFocus = () => {
+      setWindowFocused(true);
+    };
+
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    return () => {
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [trackIframeDwellEvents, ref, onIframeFocus]);
 
   if (!url) {
     return null;
   }
 
-  return jsx("iframe", {
-    ref: iframeRef,
+  return jsx(React.Fragment, null, trackIframeDwellEvents ? jsx(IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: isMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }) : null, jsx("iframe", {
+    ref: mergedRef,
     src: url,
     "data-testid": `${testId}-frame`,
     "data-iframe-loaded": isIframeLoaded,
@@ -28,10 +109,14 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
       overflow: 'hidden',
       borderRadius: '3px'
     },
+    onMouseEnter: trackIframeDwellEvents ? () => setMouseOver(true) : undefined,
+    onMouseLeave: trackIframeDwellEvents ? () => setMouseOver(false) : undefined,
     allowFullScreen: true,
     scrolling: "yes",
     allow: "autoplay; encrypted-media; clipboard-write",
-    onLoad: () => setIframeLoaded(true),
+    onLoad: () => {
+      setIframeLoaded(true);
+    },
     sandbox: getIframeSandboxAttribute(isTrusted)
-  });
+  }));
 });

package/dist/es2019/view/EmbedCard/components/IframeDwellTracker.js

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * A kind of cheap logarithmic backoff. Fire analytics after the user has
+ * dwelled for 5 seconds, then 10 seconds, and so on.
+ */
+const INTERVALS_TO_LOG = [5, 10, 15, 20, 25, 30, 45, 60, 90, 120, 180];
+export const IframeDwellTracker = ({
+  isIframeLoaded,
+  isMouseOver,
+  isWindowFocused,
+  iframePercentVisible,
+  onIframeDwell
+}) => {
+  const [dwell, setDwell] = useState({
+    time: 0,
+    percentVisible: 0
+  });
+  const dwellTimeoutId = useRef(); // fire analytics when the dwell timer reaches 5 seconds
+
+  useEffect(() => {
+    if (dwell.time > 0 && INTERVALS_TO_LOG.includes(dwell.time)) {
+      onIframeDwell && onIframeDwell(dwell.time, dwell.percentVisible);
+    }
+  }, [dwell, onIframeDwell]); // start and stop tracking dwell time
+
+  useEffect(() => {
+    const incrementDwellTime = () => {
+      // callback is called on dwell state changes, so change percentVisible and time together
+      setDwell(({
+        time
+      }) => {
+        return {
+          time: time + 1,
+          // snapshot of percent visible, rounded down to nearest 5%
+          percentVisible: Math.floor((iframePercentVisible || 0) * 20) * 5
+        };
+      });
+    };
+
+    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+
+      dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
+    }
+
+    return () => {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+    };
+  }, [setDwell, isMouseOver, isWindowFocused, isIframeLoaded, iframePercentVisible]);
+  return null;
+};

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

@@ -31,7 +31,9 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   onResolve,
   onError,
   testId,
-  inheritDimensions
+  inheritDimensions,
+  onIframeDwell,
+  onIframeFocus
 }, iframeRef) => {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -67,7 +69,9 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
-          ref: iframeRef
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -15,7 +15,9 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   title,
   isTrusted,
   testId = 'embed-card-resolved-view',
-  inheritDimensions
+  inheritDimensions,
+  onIframeDwell,
+  onIframeFocus
 }, embedIframeRef) => {
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
@@ -48,6 +50,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     url: preview === null || preview === void 0 ? void 0 : preview.src,
     isTrusted: isTrusted,
     testId: testId,
-    ref: embedIframeRef
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus
   }));
 });

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -36,6 +37,17 @@ export const getOpenAction = (url, analytics, onActionClick) => ({
   tooltipMessage: jsx(FormattedMessage, messages.open_link_in_a_new_tab),
   testId: 'hover-card-open-button'
 });
+export const getCopyAction = url => ({
+  name: ActionName.CustomAction,
+  icon: jsx(CopyIcon, {
+    label: "copy url",
+    size: "medium"
+  }),
+  iconPosition: 'before',
+  onClick: async () => await navigator.clipboard.writeText(url),
+  tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
+  testId: 'hover-card-copy-button'
+});
 
 const HoverCardContent = ({
   id = '',
@@ -66,7 +78,7 @@ const HoverCardContent = ({
       actionSubjectId: 'titleGoToLink'
     });
   }, [cardState.status, analytics.ui, id]);
-  const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
+  const titleActions = useMemo(() => [getCopyAction(url), getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const types = data ? extractType(data) : undefined;
   const {

package/dist/esm/messages.js

@@ -85,6 +85,11 @@ export var messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details from your work and collaboration 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.'
   },
+  copy_url_to_clipboard: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Copy link',
+    description: ''
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",