@atlaskit/smart-card 26.13.0 → 26.14.0

package/dist/esm/extractors/flexible/utils.js

@@ -1,5 +1,5 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import { extractPersonOwnedBy, extractPersonCreatedBy, extractPersonUpdatedBy } from '@atlaskit/link-extractors';
+import { extractPersonOwnedBy, extractPersonCreatedBy, extractPersonUpdatedBy, extractPersonAssignedTo } from '@atlaskit/link-extractors';
 var extractLinkName = function extractLinkName(link) {
   if (link && _typeof(link) === 'object' && link['@type'] === 'Link') {
     return link.name;
@@ -29,6 +29,16 @@ export var extractOwnedBy = function extractOwnedBy(data) {
     return persons[0].name;
   }
 };
+export var extractAssignedTo = function extractAssignedTo(data) {
+  var person = extractPersonAssignedTo(data);
+  if (person) {
+    return person.name;
+  }
+};
+export var extractPersonAssignedToAsArray = function extractPersonAssignedToAsArray(data) {
+  var person = extractPersonAssignedTo(data);
+  return person ? [person] : undefined;
+};
 export var extractCreatedBy = function extractCreatedBy(data) {
   var persons = extractPersonCreatedBy(data);
   if (persons && persons.length) {
@@ -70,4 +80,11 @@ export var extractLocation = function extractLocation(data) {
       url: url
     };
   }
+};
+export var extractSubTasksProgress = function extractSubTasksProgress(data) {
+  var subTasksObject = extractValue(data, 'atlassian:subTasks');
+  return subTasksObject && subTasksObject.totalCount ? "".concat(subTasksObject.resolvedCount, "/").concat(subTasksObject.totalCount) : undefined;
+};
+export var extractReadTime = function extractReadTime(data) {
+  return extractValue(data, 'atlassian:readTimeInMinutes');
 };

package/dist/esm/extractors/hover/extractMetadata.js

@@ -1,5 +1,5 @@
 import { ElementName } from '../../constants';
-var elementNamesToItems = function elementNamesToItems(elementNames) {
+export var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
     return element in ElementName;
   }).map(function (elementName) {

package/dist/esm/messages.js

@@ -10,6 +10,11 @@ export var messages = defineMessages({
     defaultMessage: 'Add account',
     description: 'Allows to add a new account'
   },
+  assigned_to: {
+    id: 'fabric.linking.assigned_to',
+    defaultMessage: 'Assigned to {context}',
+    description: 'Indicates the person or entity that the resource is assigned to.'
+  },
   cancel: {
     id: 'fabric.linking.cancel',
     defaultMessage: 'Cancel',
@@ -86,7 +91,7 @@ export var messages = defineMessages({
     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.'
   },
   connect_unauthorised_account_description_no_provider: {
-    id: 'fabric.linking.connect_unauthorised_account_description',
+    id: 'fabric.linking.connect_unauthorised_account_description_no_provider',
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate 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.'
   },
@@ -306,6 +311,11 @@ export var messages = defineMessages({
     defaultMessage: 'Your access request is pending',
     description: 'Shown when a user has requested an access but status is pending.'
   },
+  read_time: {
+    id: 'fabric.linking.read_time',
+    defaultMessage: '{context} min read',
+    description: 'Estimated time to read this resource'
+  },
   restricted_link: {
     id: 'fabric.linking.restricted_link',
     defaultMessage: 'Restricted link, try another account',
@@ -386,6 +396,26 @@ export var messages = defineMessages({
     defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
     description: 'Link safety check warning message'
   },
+  unauthorised_account_description: {
+    id: 'fabric.linking.unauthorised_account_description',
+    defaultMessage: "You're trying to preview a link to a private {context} page. We recommend you review the URL or contact the page owner.",
+    description: 'Explains that user does not have access to a link.'
+  },
+  unauthorised_account_description_no_provider: {
+    id: 'fabric.linking.unauthorised_account_description_no_provider',
+    defaultMessage: "You're trying to preview a link to a private page. We recommend you review the URL or contact the page owner.",
+    description: 'Explains that user does not have access to a link.'
+  },
+  unauthorised_account_name: {
+    id: 'fabric.linking.unauthorised_account_name',
+    defaultMessage: "We can't display private pages from {context}",
+    description: 'Shown when a user does not have access to a link.'
+  },
+  unauthorised_account_name_no_provider: {
+    id: 'fabric.linking.unauthorised_account_name_no_provider',
+    defaultMessage: "We can't display private pages",
+    description: 'Shown when a user does not have access to a link.'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -1,18 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+import { metadataBlockCss, titleBlockCss } from './styled';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
 import uuid from 'uuid';
-import { extractOwnedBy } from '../../../../extractors/flexible/utils';
+import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var _cardState$details, _cardState$details2;
   var id = _ref.id,
     cardState = _ref.cardState,
     onClick = _ref.onClick,
@@ -37,30 +40,10 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }),
     _useState4 = _slicedToArray(_useState3, 1),
     analyticsId = _useState4[0];
-  var baseMetadata = [{
-    name: ElementName.ModifiedOn
-  }, {
-    name: ElementName.AttachmentCount
-  }, {
-    name: ElementName.CommentCount
-  }, {
-    name: ElementName.ReactCount
-  }, {
-    name: ElementName.SubscriberCount
-  }, {
-    name: ElementName.ViewCount
-  }, {
-    name: ElementName.VoteCount
-  }, {
-    name: ElementName.ChecklistProgress
-  }, {
-    name: ElementName.DueOn
-  }];
-  var metadata = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && extractOwnedBy(cardState === null || cardState === void 0 ? void 0 : (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data) ? [{
-    name: ElementName.OwnedBy
-  }].concat(baseMetadata) : [{
-    name: ElementName.ModifiedBy
-  }].concat(baseMetadata);
+  var _ref2 = getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? getSimulatedBetterMetadata(cardState.details) : getSimulatedMetadata(cardState.details),
+    titleMetadata = _ref2.titleMetadata,
+    topMetadata = _ref2.topMetadata,
+    bottomMetadata = _ref2.bottomMetadata;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     analytics: analytics,
     appearance: "block",
@@ -72,25 +55,27 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     testId: testId,
     ui: ui,
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     position: SmartLinkPosition.Center,
-    metadata: [{
-      name: ElementName.AuthorGroup
-    }, {
-      name: ElementName.Priority
-    }, {
-      name: ElementName.State
-    }],
+    metadata: titleMetadata,
     hideRetry: true,
     subtitle: [{
       name: ElementName.Location
     }],
     metadataPosition: SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
-    primary: metadata,
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+    primary: topMetadata,
+    maxLines: 1
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: metadataBlockCss
+  })), /*#__PURE__*/React.createElement(SnippetBlock, null), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: bottomMetadata,
     maxLines: 1
-  }), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
     placement: MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: function onError() {

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../FlexibleCard';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
@@ -10,6 +12,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { css } from '@emotion/react';
 import { tokens } from '../../../../utils/token';
+import { messages } from '../../../../messages';
 var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), tokens.text);
 
 /**
@@ -43,6 +46,17 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       onAuthorize();
     }
   }, [onAuthorize, extensionKey, analytics.track]);
+  var content = useMemo(function () {
+    return onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+      providerName: providerName,
+      analytics: analytics,
+      testId: testId
+    }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+      values: {
+        context: providerName
+      }
+    }));
+  }, [analytics, onAuthorize, providerName, testId]);
   var actions = useMemo(function () {
     return onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [];
   }, [handleAuthorize, onAuthorize, providerName]);
@@ -61,11 +75,7 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   }), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: contentStyles,
     testId: "".concat(testId, "-content")
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName,
-    analytics: analytics,
-    testId: testId
-  }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: SmartLinkStatus.Unauthorized,
     actionGroupAppearance: "primary"

package/dist/esm/view/BlockCard/views/flexible/styled.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { css } from '@emotion/react';
+
+// in editor prosemirror adds padding-left so we need to overwrite it
+export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  [data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
+export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5em;\n"])));

package/dist/esm/view/BlockCard/views/flexible/utils.js

@@ -0,0 +1,108 @@
+import { ElementName } from '../../../../constants';
+import { extractOwnedBy, extractAssignedTo } from '../../../../extractors/flexible/utils';
+import { getExtensionKey } from '../../../../state/helpers';
+var baseTopMetadata = [{
+  name: ElementName.ModifiedOn
+}, {
+  name: ElementName.AttachmentCount
+}, {
+  name: ElementName.SubscriberCount
+}, {
+  name: ElementName.VoteCount
+}, {
+  name: ElementName.DueOn
+}, {
+  name: ElementName.ReadTime
+}];
+var baseBottomMetaData = [{
+  name: ElementName.ReactCount
+}, {
+  name: ElementName.CommentCount
+}, {
+  name: ElementName.ViewCount
+}, {
+  name: ElementName.Priority
+}, {
+  name: ElementName.SubTasksProgress
+}, {
+  name: ElementName.ChecklistProgress
+}];
+export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata(cardDetails) {
+  var _getExtensionKey;
+  var extensionKey = (_getExtensionKey = getExtensionKey(cardDetails)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
+  var data = cardDetails === null || cardDetails === void 0 ? void 0 : cardDetails.data;
+  var defaultTitleMetadata = [{
+    name: ElementName.State
+  }];
+  var defaultTopMetadata = [{
+    name: ElementName.AuthorGroup
+  }, {
+    name: ElementName.CreatedBy
+  }].concat(baseTopMetadata);
+  var defaultBottomMetadata = baseBottomMetaData;
+  switch (extensionKey) {
+    case 'confluence-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: extractOwnedBy(data) ? [{
+          name: ElementName.OwnedByGroup
+        }, {
+          name: ElementName.OwnedBy
+        }].concat(baseTopMetadata) : defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+    case 'jira-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: extractAssignedTo(data) ? [{
+          name: ElementName.AssignedToGroup
+        }, {
+          name: ElementName.AssignedTo
+        }].concat(baseTopMetadata) : defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+    default:
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: defaultTopMetadata,
+        bottomMetadata: defaultBottomMetadata
+      };
+  }
+};
+export var getSimulatedMetadata = function getSimulatedMetadata(cardDetails) {
+  var baseMetadata = [{
+    name: ElementName.ModifiedOn
+  }, {
+    name: ElementName.AttachmentCount
+  }, {
+    name: ElementName.CommentCount
+  }, {
+    name: ElementName.ReactCount
+  }, {
+    name: ElementName.SubscriberCount
+  }, {
+    name: ElementName.ViewCount
+  }, {
+    name: ElementName.VoteCount
+  }, {
+    name: ElementName.ChecklistProgress
+  }, {
+    name: ElementName.DueOn
+  }];
+  var topMetadata = cardDetails !== null && cardDetails !== void 0 && cardDetails.data && extractOwnedBy(cardDetails === null || cardDetails === void 0 ? void 0 : cardDetails.data) ? [{
+    name: ElementName.OwnedBy
+  }].concat(baseMetadata) : [{
+    name: ElementName.ModifiedBy
+  }].concat(baseMetadata);
+  var titleMetadata = [{
+    name: ElementName.AuthorGroup
+  }, {
+    name: ElementName.Priority
+  }, {
+    name: ElementName.State
+  }];
+  return {
+    titleMetadata: titleMetadata,
+    topMetadata: topMetadata
+  };
+};

package/dist/esm/view/EmbedCard/views/UnauthorisedView.js

@@ -1,11 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { UnauthorisedImage } from '../constants';
+import { LockImage, UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
-  var _context$image;
   var analytics = _ref.analytics,
     link = _ref.link,
     context = _ref.context,
@@ -27,6 +26,36 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
       onAuthorise();
     }
   }, [onAuthorise, analytics.track, extensionKey]);
+  var view = useMemo(function () {
+    var _context$image2;
+    if (onAuthorise) {
+      var _context$image;
+      return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+        button: {
+          appearance: 'primary',
+          text: 'connect_unauthorised_account_action',
+          testId: 'connect-account'
+        },
+        context: context && context.text,
+        description: "connect_unauthorised_account_description",
+        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
+        onClick: handleOnAuthorizeClick,
+        testId: testId,
+        title: "connect_link_account_card_name"
+      }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+        analytics: analytics,
+        providerName: context === null || context === void 0 ? void 0 : context.text,
+        testId: testId
+      }));
+    }
+    return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+      description: context !== null && context !== void 0 && context.text ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider',
+      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : LockImage,
+      context: context === null || context === void 0 ? void 0 : context.text,
+      testId: testId,
+      title: context !== null && context !== void 0 && context.text ? 'unauthorised_account_name' : 'unauthorised_account_name_no_provider'
+    });
+  }, [analytics, context, handleOnAuthorizeClick, onAuthorise, testId]);
   return /*#__PURE__*/React.createElement(ExpandedFrame, {
     href: link,
     icon: icon,
@@ -37,21 +66,5 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     onClick: onClick,
     testId: testId,
     allowScrollBar: true
-  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
-    title: "connect_link_account_card_name",
-    description: "connect_unauthorised_account_description",
-    context: context && context.text,
-    button: onAuthorise ? {
-      appearance: 'primary',
-      text: 'connect_unauthorised_account_action',
-      testId: 'connect-account'
-    } : undefined,
-    onClick: onAuthorise ? handleOnAuthorizeClick : undefined,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    analytics: analytics,
-    providerName: context === null || context === void 0 ? void 0 : context.text,
-    testId: testId
-  })));
+  }, view);
 };

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

@@ -15,7 +15,7 @@ import ElementGroup from './element-group';
 
 // Determine whether the element can be display as inline/block.
 
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Location, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.OwnedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AssignedTo, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AssignedToGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Location, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.OwnedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.OwnedByGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReadTime, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubTasksProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
     case SmartLinkDirection.Vertical:

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

@@ -3,6 +3,16 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
+/**
+ * Creates a AssignedTo text element using the data from AssignedTo in the Flexible UI Context.
+ * @see Text
+ */
+export var AssignedTo = createElement(ElementName.AssignedTo);
+/**
+ * An AvatarGroup element using the data from AssignedToGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+export var AssignedToGroup = createElement(ElementName.AssignedToGroup);
 /**
  * Creates a AttachmentCount Badge element using the data from AttachmentCount in the Flexible UI Context.
  * @see Badge
@@ -73,6 +83,11 @@ export var ModifiedOn = createElement(ElementName.ModifiedOn);
  * @see Text
  */
 export var OwnedBy = createElement(ElementName.OwnedBy);
+/**
+ * An AvatarGroup element using the data from OwnedByGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+export var OwnedByGroup = createElement(ElementName.OwnedByGroup);
 /**
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
@@ -98,6 +113,10 @@ export var Provider = createElement(ElementName.Provider);
  * @see Badge
  */
 export var ReactCount = createElement(ElementName.ReactCount);
+/**
+ * Creates a ReadTime Text element using the data from readTime in the Flexible UI Context
+ */
+export var ReadTime = createElement(ElementName.ReadTime);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,6 +137,11 @@ export var State = createElement(ElementName.State);
  * @see Badge
  */
 export var SubscriberCount = createElement(ElementName.SubscriberCount);
+/**
+ * Create a SubTasks Badge element using the data from subTasks in the Flexible UI Context.
+ * @see Badge
+ */
+export var SubTasksProgress = createElement(ElementName.SubTasksProgress);
 /**
  * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
  * @see Text

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

@@ -57,6 +57,12 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: Text
 }), _defineProperty(_elementMappings, ElementName.OwnedBy, {
   component: Text
+}), _defineProperty(_elementMappings, ElementName.AssignedTo, {
+  component: Text
+}), _defineProperty(_elementMappings, ElementName.AssignedToGroup, {
+  component: AvatarGroup
+}), _defineProperty(_elementMappings, ElementName.OwnedByGroup, {
+  component: AvatarGroup
 }), _defineProperty(_elementMappings, ElementName.CreatedOn, {
   component: DateTime
 }), _defineProperty(_elementMappings, ElementName.DueOn, {
@@ -83,6 +89,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   }
 }), _defineProperty(_elementMappings, ElementName.Provider, {
   component: Badge
+}), _defineProperty(_elementMappings, ElementName.ReadTime, {
+  component: Text
 }), _defineProperty(_elementMappings, ElementName.Snippet, {
   component: Text,
   props: {
@@ -98,6 +106,11 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.Subscriber
   }
+}), _defineProperty(_elementMappings, ElementName.SubTasksProgress, {
+  component: Badge,
+  props: {
+    icon: IconType.CheckItem
+  }
 }), _defineProperty(_elementMappings, ElementName.TargetBranch, {
   component: Text
 }), _defineProperty(_elementMappings, ElementName.Title, {
@@ -120,7 +133,9 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
   switch (elementName) {
     case ElementName.AuthorGroup:
+    case ElementName.AssignedToGroup:
     case ElementName.CollaboratorGroup:
+    case ElementName.OwnedByGroup:
       return toAvatarGroupProps(data);
     case ElementName.AttachmentCount:
     case ElementName.ChecklistProgress:
@@ -131,9 +146,12 @@ var getData = function getData(elementName, contextKey, context) {
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
     case ElementName.LatestCommit:
+    case ElementName.SubTasksProgress:
       return toBadgeProps(data);
     case ElementName.CreatedBy:
       return toFormattedTextProps(messages.created_by, context.createdBy);
+    case ElementName.AssignedTo:
+      return toFormattedTextProps(messages.assigned_to, context.assignedTo);
     case ElementName.OwnedBy:
       return toFormattedTextProps(messages.owned_by, context.ownedBy);
     case ElementName.CreatedOn:
@@ -144,6 +162,8 @@ var getData = function getData(elementName, contextKey, context) {
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
+    case ElementName.ReadTime:
+      return toFormattedTextProps(messages.read_time, data);
     case ElementName.Snippet:
     case ElementName.SourceBranch:
     case ElementName.TargetBranch:

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -8,11 +8,12 @@ import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../..
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
-import { getSimulatedMetadata } from '../../../utils';
+import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
-import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
+import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick, enableImprovedPreviewAction) {
   var appearance = enableImprovedPreviewAction ? {
     appearance: 'primary'
@@ -72,16 +73,24 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   }, [cardActions, onActionClick, enableImprovedPreviewAction]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var _useMemo = useMemo(function () {
-      //TODO: EDM-3224 deleted simulated and use real JsonLd
+      if (getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg')) {
+        var betterMetadata = getSimulatedBetterMetadata(extensionKey, data);
+        return {
+          topPrimary: elementNamesToItems(betterMetadata.topMetadataBlock.primary),
+          topSecondary: elementNamesToItems(betterMetadata.topMetadataBlock.secondary),
+          bottomPrimary: elementNamesToItems(betterMetadata.bottomMetadataBlock.primary)
+        };
+      }
       var metadata = extractMetadata(getSimulatedMetadata(extensionKey, data));
       return {
-        primary: metadata.primary,
-        secondary: metadata.secondary,
-        subtitle: metadata.subtitle
+        topPrimary: metadata.primary,
+        topSecondary: metadata.secondary,
+        bottomPrimary: []
       };
     }, [data, extensionKey]),
-    primary = _useMemo.primary,
-    secondary = _useMemo.secondary;
+    topPrimary = _useMemo.topPrimary,
+    topSecondary = _useMemo.topSecondary,
+    bottomPrimary = _useMemo.bottomPrimary;
   var snippetHeight = React.useRef(0);
   var snippetBlockRef = useRef(null);
   var onSnippetRender = useCallback(function () {
@@ -94,17 +103,24 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   });
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
-  })), /*#__PURE__*/React.createElement(MetadataBlock, {
-    primary: primary,
-    secondary: secondary,
-    size: SmartLinkSize.Large,
+  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+    primary: topPrimary,
+    secondary: topSecondary,
     overrideCss: metadataBlockCss,
-    maxLines: 1
-  }), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+    maxLines: 1,
+    size: SmartLinkSize.Large
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    size: SmartLinkSize.Medium
+  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: hiddenSnippetStyles
+  }), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: bottomPrimary,
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,