@atlaskit/smart-card 19.1.16 → 19.1.19

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

@@ -190,12 +190,13 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     destinationProduct
   }
 });
-export const uiActionClickedEvent = (actionType, extensionKey, display) => ({
+export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: uiActionSubjectIds[actionType],
   eventType: 'ui',
   attributes: { ...context,
+    id,
     display,
     extensionKey: extensionKey || '',
     actionType: actionType
@@ -240,22 +241,24 @@ export const uiRenderFailedEvent = (display, error, errorInfo) => ({
     display
   }
 });
-export const uiHoverCardViewedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardViewedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'viewed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     previewDisplay,
     previewInvokeMethod
   }
 });
-export const uiHoverCardDismissedEvent = (previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardDismissedEvent = (id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'dismissed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     hoverTime,
@@ -263,12 +266,13 @@ export const uiHoverCardDismissedEvent = (previewDisplay, hoverTime, definitionI
     previewInvokeMethod
   }
 });
-export const uiHoverCardOpenLinkClickedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardOpenLinkClickedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: 'shortcutGoToLink',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     previewDisplay,

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -3,12 +3,16 @@ import { CardLinkView } from '../../../view/LinkView';
 export const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export const LoadingCardLink = ({
   isSelected,
-  url
-}) => /*#__PURE__*/React.createElement(CardLinkView, {
-  key: 'lazy-render-key',
-  testId: 'lazy-render-placeholder',
-  "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
-  isSelected: isSelected,
-  link: url,
-  className: loadingPlaceholderClassName
-});
+  url,
+  placeholder
+}) => {
+  return /*#__PURE__*/React.createElement(CardLinkView, {
+    key: 'lazy-render-key',
+    testId: 'lazy-render-placeholder',
+    "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
+    isSelected: isSelected,
+    link: url,
+    className: loadingPlaceholderClassName,
+    placeholder: placeholder
+  });
+};

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

@@ -35,7 +35,8 @@ export function CardWithURLRenderer(props) {
     children,
     ui,
     showHoverPreview,
-    analyticsEvents
+    analyticsEvents,
+    placeholder
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -96,7 +97,8 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle,
     ui,
     showHoverPreview,
-    analyticsEvents
+    analyticsEvents,
+    placeholder
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -26,7 +26,8 @@ export const ElementDisplaySchema = {
   [ElementName.State]: ['inline'],
   [ElementName.SubscriberCount]: ['inline'],
   [ElementName.Title]: ['inline'],
-  [ElementName.Provider]: ['inline']
+  [ElementName.Provider]: ['inline'],
+  [ElementName.LatestCommit]: ['inline']
 };
 
 const getDirectionStyles = direction => {

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -51,6 +51,11 @@ export const CreatedBy = createElement(ElementName.CreatedBy);
  */
 
 export const CreatedOn = createElement(ElementName.CreatedOn);
+/**
+ * Creates an element that contains Last Commit hash
+ */
+
+export const LatestCommit = createElement(ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
  * @see Icon

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -95,6 +95,12 @@ const elementMappings = {
   },
   [ElementName.Provider]: {
     component: Badge
+  },
+  [ElementName.LatestCommit]: {
+    component: Badge,
+    props: {
+      icon: IconType.Commit
+    }
   }
 };
 
@@ -122,6 +128,7 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.VoteCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
+    case ElementName.LatestCommit:
       return toBadgeProps(data);
 
     case ElementName.CreatedBy:

package/dist/es2019/view/HoverCard/components/hover-card-content.js

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import FlexibleCard from '../../FlexibleCard';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { isSpecialEvent } from '../../../utils';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { getExtensionKey } from '../../../state/helpers';
+const flexibleUiOptions = {
+  hideElevation: true,
+  size: SmartLinkSize.Large,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: SmartLinkTheme.Black
+};
+
+const getOpenAction = (url, analytics) => ({
+  name: ActionName.CustomAction,
+  icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+    label: "open in new tab",
+    size: "medium"
+  }),
+  iconPosition: 'before',
+  onClick: () => {
+    window.open(url, '_blank');
+    analytics.ui.hoverCardOpenLinkClickedEvent('card');
+  },
+  testId: 'hover-card-open-button'
+});
+
+const toFooterActions = cardActions => cardActions.map(action => ({
+  content: action.text,
+  name: ActionName.CustomAction,
+  onClick: () => action.invoke(),
+  testId: action.id
+}));
+
+const HoverCardContent = ({
+  analytics,
+  cardActions = [],
+  cardState,
+  onResolve,
+  renderers,
+  url
+}) => {
+  var _cardState$details;
+
+  useEffect(() => {
+    // Since hover preview only render on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent(HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+  }, [analytics.ui, cardState.status]);
+  const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
+  const onClick = useCallback(event => {
+    const isModifierKeyPressed = isSpecialEvent(event);
+    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+  }, [cardState.status, analytics.ui]);
+  const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
+  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+  const {
+    primary,
+    secondary
+  } = extractMetadata(getSimulatedMetadata(extensionKey));
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    actions: titleActions
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary
+  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: footerActions
+  }));
+};
+
+export default HoverCardContent;

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

@@ -2,22 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback, useRef, useMemo } from 'react';
-import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
-import { Card } from '../Card';
+import React, { useCallback, useRef } from 'react';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { useSmartCardState as useLinkState } from '../../state/store';
 import { useSmartLinkAnalytics } from '../../state/analytics';
-import { getExtensionKey, getDefinitionId } from '../../state/helpers';
-import { extractMetadata } from '../../extractors/hover/extractMetadata';
-import { getSimulatedMetadata } from './utils';
-import extractPreview from '../../extractors/flexible/extract-preview';
+import { useSmartLinkRenderers } from '../../state/renderers';
+import HoverCardContent from './components/hover-card-content';
+import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
 export const HoverCardComponent = ({
   children,
   id,
@@ -32,10 +27,9 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
-  const extensionKey = useMemo(() => getExtensionKey(linkState.details), [linkState]);
-  const definitionId = useMemo(() => getDefinitionId(linkState.details), [linkState]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -45,12 +39,12 @@ 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, 'mouse_hover');
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
       }
 
       setIsOpen(false);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -60,73 +54,17 @@ 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, 'mouse_hover');
+        analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
       }
 
       setIsOpen(true);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   const linkActions = useSmartLinkActions({
     url,
-    appearance: 'block',
+    appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler
   });
-  const smartlinkActions = useMemo(() => linkActions.map(action => ({
-    content: action.text,
-    name: ActionName.CustomAction,
-    onClick: () => action.invoke(),
-    testId: action.id
-  })), [linkActions]);
-  const openAction = useMemo(() => {
-    return {
-      name: ActionName.CustomAction,
-      icon: jsx(ShortcutIcon, {
-        label: "open in new tab",
-        size: "medium"
-      }),
-      iconPosition: 'before',
-      onClick: () => {
-        window.open(url, '_blank');
-        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
-      },
-      testId: 'hover-card-open-button'
-    };
-  }, [url, definitionId, extensionKey, analytics]);
-
-  const CardComponent = ({
-    update
-  }) => {
-    var _linkState$details;
-
-    //TODO: EDM-3224 deleted simulated and use real JsonLd
-    const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
-    const linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
-    const content = extractPreview(linkData) ? jsx(PreviewBlock, null) : jsx(SnippetBlock, null);
-    return jsx("div", {
-      onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard,
-      css: HoverCardContainer
-    }, jsx(Card, {
-      id: id,
-      appearance: "block",
-      url: url,
-      ui: {
-        hideElevation: true,
-        size: SmartLinkSize.Large,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-        theme: SmartLinkTheme.Black
-      },
-      onResolve: update
-    }, jsx(TitleBlock, {
-      actions: [openAction]
-    }), jsx(MetadataBlock, {
-      primary: metadataElements.primary,
-      secondary: metadataElements.secondary
-    }), content, jsx(FooterBlock, {
-      actions: smartlinkActions
-    })));
-  };
-
   const onClose = useCallback(() => setIsOpen(false), []);
   return jsx(Popup, {
     testId: "hover-card",
@@ -135,11 +73,18 @@ export const HoverCardComponent = ({
     placement: "bottom-start",
     content: ({
       update
-    }) => {
-      return jsx(CardComponent, {
-        update: update
-      });
-    },
+    }) => jsx("div", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      css: HoverCardContainer
+    }, jsx(HoverCardContent, {
+      analytics: analytics,
+      cardActions: linkActions,
+      cardState: linkState,
+      onResolve: update,
+      renderers: renderers,
+      url: url
+    })),
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard

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

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

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

@@ -5,7 +5,7 @@ export class CardLinkView extends React.PureComponent {
   render() {
     return /*#__PURE__*/React.createElement(Frame, _extends({
       withoutBackground: true
-    }, this.props), this.props.link);
+    }, this.props), this.props.placeholder || this.props.link);
   }
 
 }

package/dist/esm/constants.js

@@ -81,7 +81,7 @@ export var SmartLinkWidth;
 /**
  * Flexible UI element name - each reflecting the link data its represented.
  * When adding an element...
- * 1) Create base element if it doesn't already existed.
+ * 1) Create base element if it doesn't already exist.
  *    Base element are inside src/view/FlexibleCard/components/elements.
  *    E.g. Badge,DateTime, Icon, Lozenge, etc.
  * 2) Update FlexibleUiContext with the new prop for data representing
@@ -125,6 +125,7 @@ export var ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
+  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (ElementName = {}));
 
 export var ActionName;

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

@@ -45,9 +45,10 @@ export var extractBlockActions = function extractBlockActions(props, jsonLd, opt
     var handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
         extensionKey = opts.extensionKey,
+        source = opts.source,
         testId = opts.testId;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -60,6 +60,7 @@ export var extractPreviewAction = function extractPreviewAction() {
   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;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -87,7 +88,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', 'block'); // - Promise invoked by the action invocation handler; open preview.
+    var previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - 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/extractors/flexible/index.js

@@ -9,6 +9,7 @@ import { extractDateCreated } from '../common/date/extractDateCreated';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
+import { extractLatestCommit } from './latest-commit';
 
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
@@ -38,6 +39,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     subscriberCount: extractSubscriberCount(data),
     title: extractTitle(data) || url,
     provider: extractProviderIcon(data),
+    latestCommit: extractLatestCommit(data),
     url: url
   };
 };

package/dist/esm/extractors/flexible/latest-commit/index.js

@@ -0,0 +1,12 @@
+export var extractLatestCommit = function extractLatestCommit(jsonLd) {
+  var latestCommit = jsonLd['atlassian:latestCommit'];
+
+  if (typeof latestCommit === 'string') {
+    return latestCommit;
+  }
+
+  if (latestCommit) {
+    //todo: change the properties to latestCommit.hash when BE is ready
+    return latestCommit ? latestCommit.name : undefined;
+  }
+};