@atlaskit/smart-card 26.13.1 → 26.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.14.0
+
+### Minor Changes
+
+- [`d8799deba6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8799deba6e) - Add new Flexui elements-OwnedByGroup, AssignedTogroup, AssignedTo, ReadTime & SubtasksProgress. Add provider specific logic for metadata display for Hover Cards & Block Cards.
+
 ## 26.13.1
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -108,6 +108,8 @@ var SmartLinkWidth = /*#__PURE__*/function (SmartLinkWidth) {
  */
 exports.SmartLinkWidth = SmartLinkWidth;
 var ElementName = /*#__PURE__*/function (ElementName) {
+  ElementName["AssignedTo"] = "AssignedTo";
+  ElementName["AssignedToGroup"] = "AssignedToGroup";
   ElementName["AttachmentCount"] = "AttachmentCount";
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["ChecklistProgress"] = "ChecklistProgress";
@@ -122,15 +124,18 @@ var ElementName = /*#__PURE__*/function (ElementName) {
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["OwnedBy"] = "OwnedBy";
+  ElementName["OwnedByGroup"] = "OwnedByGroup";
   ElementName["Preview"] = "Preview";
   ElementName["Priority"] = "Priority";
   ElementName["ProgrammingLanguage"] = "ProgrammingLanguage";
   ElementName["Provider"] = "Provider";
   ElementName["ReactCount"] = "ReactCount";
+  ElementName["ReadTime"] = "ReadTime";
   ElementName["Snippet"] = "Snippet";
   ElementName["SourceBranch"] = "SourceBranch";
   ElementName["State"] = "State";
   ElementName["SubscriberCount"] = "SubscriberCount";
+  ElementName["SubTasksProgress"] = "SubTasksProgress";
   ElementName["TargetBranch"] = "TargetBranch";
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";

package/dist/cjs/extractors/flexible/index.js

@@ -32,8 +32,10 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var url = (0, _linkExtractors.extractLink)(data);
   var showLozengeAction = (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useLozengeAction) === 'experiment';
   return {
+    assignedToGroup: (0, _utils.extractPersonAssignedToAsArray)(data),
     attachmentCount: (0, _utils.extractAttachmentCount)(data),
     authorGroup: (0, _linkExtractors.extractPersonCreatedBy)(data),
+    ownedByGroup: (0, _linkExtractors.extractPersonOwnedBy)(data),
     collaboratorGroup: (0, _collaboratorGroup.extractPersonsUpdatedBy)(data),
     commentCount: (0, _utils.extractCommentCount)(data),
     viewCount: (0, _utils.extractViewCount)(data),
@@ -42,6 +44,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     checklistProgress: (0, _utils.extractChecklistProgress)(data),
     createdBy: (0, _utils.extractCreatedBy)(data),
     ownedBy: (0, _utils.extractOwnedBy)(data),
+    assignedTo: (0, _utils.extractAssignedTo)(data),
     createdOn: (0, _linkExtractors.extractDateCreated)(data),
     dueOn: (0, _utils.extractDueOn)(data),
     previewAction: (0, _extractPreviewAction.extractPreviewAction)(response),
@@ -56,11 +59,13 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     priority: (0, _extractPriority.default)(data),
     provider: (0, _extractProviderIcon.default)(data),
     programmingLanguage: (0, _utils.extractProgrammingLanguage)(data),
+    readTime: (0, _utils.extractReadTime)(data),
     snippet: (0, _primitives.extractSummary)(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: (0, _utils.extractSourceBranch)(data),
     state: (0, _extractState.default)(response, showServerActions || showLozengeAction, id),
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
+    subTasksProgress: (0, _utils.extractSubTasksProgress)(data),
     targetBranch: (0, _utils.extractTargetBranch)(data),
     title: (0, _linkExtractors.extractTitle)(data) || url,
     url: url

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractLocation = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSubTasksProgress = exports.extractSourceBranch = exports.extractReadTime = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractPersonAssignedToAsArray = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractLocation = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = exports.extractAssignedTo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _linkExtractors = require("@atlaskit/link-extractors");
 var extractLinkName = function extractLinkName(link) {
@@ -42,6 +42,18 @@ var extractOwnedBy = function extractOwnedBy(data) {
   }
 };
 exports.extractOwnedBy = extractOwnedBy;
+var extractAssignedTo = function extractAssignedTo(data) {
+  var person = (0, _linkExtractors.extractPersonAssignedTo)(data);
+  if (person) {
+    return person.name;
+  }
+};
+exports.extractAssignedTo = extractAssignedTo;
+var extractPersonAssignedToAsArray = function extractPersonAssignedToAsArray(data) {
+  var person = (0, _linkExtractors.extractPersonAssignedTo)(data);
+  return person ? [person] : undefined;
+};
+exports.extractPersonAssignedToAsArray = extractPersonAssignedToAsArray;
 var extractCreatedBy = function extractCreatedBy(data) {
   var persons = (0, _linkExtractors.extractPersonCreatedBy)(data);
   if (persons && persons.length) {
@@ -92,4 +104,13 @@ var extractLocation = function extractLocation(data) {
     };
   }
 };
-exports.extractLocation = extractLocation;
+exports.extractLocation = extractLocation;
+var extractSubTasksProgress = function extractSubTasksProgress(data) {
+  var subTasksObject = extractValue(data, 'atlassian:subTasks');
+  return subTasksObject && subTasksObject.totalCount ? "".concat(subTasksObject.resolvedCount, "/").concat(subTasksObject.totalCount) : undefined;
+};
+exports.extractSubTasksProgress = extractSubTasksProgress;
+var extractReadTime = function extractReadTime(data) {
+  return extractValue(data, 'atlassian:readTimeInMinutes');
+};
+exports.extractReadTime = extractReadTime;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractMetadata = void 0;
+exports.extractMetadata = exports.elementNamesToItems = void 0;
 var _constants = require("../../constants");
 var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
@@ -15,6 +15,7 @@ var elementNamesToItems = function elementNamesToItems(elementNames) {
     };
   });
 };
+exports.elementNamesToItems = elementNamesToItems;
 var extractMetadata = function extractMetadata(jsonLd) {
   var _jsonLd$metadata, _metadata$primary, _metadata$secondary, _metadata$subtitle;
   var metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];

package/dist/cjs/messages.js

@@ -16,6 +16,11 @@ var messages = (0, _reactIntlNext.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',
@@ -312,6 +317,11 @@ var messages = (0, _reactIntlNext.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',

package/dist/cjs/version.json

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

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

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
+var _styled = require("./styled");
 var _constants = require("../../../../constants");
 var _uuid = _interopRequireDefault(require("uuid"));
-var _utils = require("../../../../extractors/flexible/utils");
+var _utils = require("./utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 /**
@@ -22,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
-  var _cardState$details, _cardState$details2;
   var id = _ref.id,
     cardState = _ref.cardState,
     onClick = _ref.onClick,
@@ -47,30 +49,10 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
     analyticsId = _useState4[0];
-  var baseMetadata = [{
-    name: _constants.ElementName.ModifiedOn
-  }, {
-    name: _constants.ElementName.AttachmentCount
-  }, {
-    name: _constants.ElementName.CommentCount
-  }, {
-    name: _constants.ElementName.ReactCount
-  }, {
-    name: _constants.ElementName.SubscriberCount
-  }, {
-    name: _constants.ElementName.ViewCount
-  }, {
-    name: _constants.ElementName.VoteCount
-  }, {
-    name: _constants.ElementName.ChecklistProgress
-  }, {
-    name: _constants.ElementName.DueOn
-  }];
-  var metadata = cardState !== null && cardState !== void 0 && (_cardState$details = cardState.details) !== null && _cardState$details !== void 0 && _cardState$details.data && (0, _utils.extractOwnedBy)(cardState === null || cardState === void 0 ? void 0 : (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data) ? [{
-    name: _constants.ElementName.OwnedBy
-  }].concat(baseMetadata) : [{
-    name: _constants.ElementName.ModifiedBy
-  }].concat(baseMetadata);
+  var _ref2 = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? (0, _utils.getSimulatedBetterMetadata)(cardState.details) : (0, _utils.getSimulatedMetadata)(cardState.details),
+    titleMetadata = _ref2.titleMetadata,
+    topMetadata = _ref2.topMetadata,
+    bottomMetadata = _ref2.bottomMetadata;
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     analytics: analytics,
     appearance: "block",
@@ -82,25 +64,27 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     testId: testId,
     ui: ui,
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
     position: _constants.SmartLinkPosition.Center,
-    metadata: [{
-      name: _constants.ElementName.AuthorGroup
-    }, {
-      name: _constants.ElementName.Priority
-    }, {
-      name: _constants.ElementName.State
-    }],
+    metadata: titleMetadata,
     hideRetry: true,
     subtitle: [{
       name: _constants.ElementName.Location
     }],
     metadataPosition: _constants.SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
-    primary: metadata,
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: _styled.titleBlockCss,
+    size: _constants.SmartLinkSize.Large
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
+    primary: topMetadata,
+    maxLines: 1
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    overrideCss: _styled.metadataBlockCss
+  })), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: bottomMetadata,
     maxLines: 1
-  }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+  }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
     placement: _constants.MediaPlacement.Right,
     ignoreContainerPadding: true,
     onError: function onError() {

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBlockCss = exports.metadataBlockCss = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2;
+// in editor prosemirror adds padding-left so we need to overwrite it
+var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  [data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
+exports.metadataBlockCss = metadataBlockCss;
+var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0.5em;\n"])));
+exports.titleBlockCss = titleBlockCss;

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

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

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

@@ -24,7 +24,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 // Determine whether the element can be display as inline/block.
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Location, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedTo, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedToGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Location, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedByGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReadTime, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubTasksProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

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

@@ -3,16 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.State = exports.SourceBranch = exports.Snippet = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedByGroup = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = exports.AssignedToGroup = exports.AssignedTo = void 0;
 var _utils = require("./utils");
 var _constants = require("../../../../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
+ */
+var AssignedTo = (0, _utils.createElement)(_constants.ElementName.AssignedTo);
+/**
+ * An AvatarGroup element using the data from AssignedToGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+exports.AssignedTo = AssignedTo;
+var AssignedToGroup = (0, _utils.createElement)(_constants.ElementName.AssignedToGroup);
 /**
  * Creates a AttachmentCount Badge element using the data from AttachmentCount in the Flexible UI Context.
  * @see Badge
  */
+exports.AssignedToGroup = AssignedToGroup;
 var AttachmentCount = (0, _utils.createElement)(_constants.ElementName.AttachmentCount);
 /**
  * An AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
@@ -92,11 +104,17 @@ var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
  */
 exports.ModifiedOn = ModifiedOn;
 var OwnedBy = (0, _utils.createElement)(_constants.ElementName.OwnedBy);
+/**
+ * An AvatarGroup element using the data from OwnedByGroup in the Flexible UI Context.
+ * @see AvatarGroup
+ */
+exports.OwnedBy = OwnedBy;
+var OwnedByGroup = (0, _utils.createElement)(_constants.ElementName.OwnedByGroup);
 /**
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
  */
-exports.OwnedBy = OwnedBy;
+exports.OwnedByGroup = OwnedByGroup;
 var Preview = (0, _utils.createElement)(_constants.ElementName.Preview);
 /**
  * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
@@ -122,11 +140,16 @@ var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
  */
 exports.Provider = Provider;
 var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
+/**
+ * Creates a ReadTime Text element using the data from readTime in the Flexible UI Context
+ */
+exports.ReactCount = ReactCount;
+var ReadTime = (0, _utils.createElement)(_constants.ElementName.ReadTime);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
-exports.ReactCount = ReactCount;
+exports.ReadTime = ReadTime;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
 /**
  * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.
@@ -146,11 +169,17 @@ var State = (0, _utils.createElement)(_constants.ElementName.State);
  */
 exports.State = State;
 var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.SubscriberCount);
+/**
+ * Create a SubTasks Badge element using the data from subTasks in the Flexible UI Context.
+ * @see Badge
+ */
+exports.SubscriberCount = SubscriberCount;
+var SubTasksProgress = (0, _utils.createElement)(_constants.ElementName.SubTasksProgress);
 /**
  * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
  * @see Text
  */
-exports.SubscriberCount = SubscriberCount;
+exports.SubTasksProgress = SubTasksProgress;
 var TargetBranch = (0, _utils.createElement)(_constants.ElementName.TargetBranch);
 /**
  * Creates a Title Link element using the data from Title in the Flexible UI Context.

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

@@ -67,6 +67,12 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.OwnedBy, {
   component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AssignedTo, {
+  component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AssignedToGroup, {
+  component: _avatarGroup.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.OwnedByGroup, {
+  component: _avatarGroup.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedOn, {
   component: _dateTime.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.DueOn, {
@@ -93,6 +99,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Provider, {
   component: _badge.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ReadTime, {
+  component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
   component: _text.default,
   props: {
@@ -108,6 +116,11 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   props: {
     icon: _constants.IconType.Subscriber
   }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SubTasksProgress, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.CheckItem
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.TargetBranch, {
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Title, {
@@ -130,7 +143,9 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
   switch (elementName) {
     case _constants.ElementName.AuthorGroup:
+    case _constants.ElementName.AssignedToGroup:
     case _constants.ElementName.CollaboratorGroup:
+    case _constants.ElementName.OwnedByGroup:
       return toAvatarGroupProps(data);
     case _constants.ElementName.AttachmentCount:
     case _constants.ElementName.ChecklistProgress:
@@ -141,9 +156,12 @@ var getData = function getData(elementName, contextKey, context) {
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
     case _constants.ElementName.LatestCommit:
+    case _constants.ElementName.SubTasksProgress:
       return toBadgeProps(data);
     case _constants.ElementName.CreatedBy:
       return toFormattedTextProps(_messages.messages.created_by, context.createdBy);
+    case _constants.ElementName.AssignedTo:
+      return toFormattedTextProps(_messages.messages.assigned_to, context.assignedTo);
     case _constants.ElementName.OwnedBy:
       return toFormattedTextProps(_messages.messages.owned_by, context.ownedBy);
     case _constants.ElementName.CreatedOn:
@@ -154,6 +172,8 @@ var getData = function getData(elementName, contextKey, context) {
       return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
     case _constants.ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
+    case _constants.ElementName.ReadTime:
+      return toFormattedTextProps(_messages.messages.read_time, data);
     case _constants.ElementName.Snippet:
     case _constants.ElementName.SourceBranch:
     case _constants.ElementName.TargetBranch:

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

@@ -19,6 +19,7 @@ var _SnippetOrPreview = _interopRequireDefault(require("../../SnippetOrPreview")
 var _extractMetadata = require("../../../../../extractors/hover/extractMetadata");
 var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -83,16 +84,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 = (0, _react.useMemo)(function () {
-      //TODO: EDM-3224 deleted simulated and use real JsonLd
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg')) {
+        var betterMetadata = (0, _utils.getSimulatedBetterMetadata)(extensionKey, data);
+        return {
+          topPrimary: (0, _extractMetadata.elementNamesToItems)(betterMetadata.topMetadataBlock.primary),
+          topSecondary: (0, _extractMetadata.elementNamesToItems)(betterMetadata.topMetadataBlock.secondary),
+          bottomPrimary: (0, _extractMetadata.elementNamesToItems)(betterMetadata.bottomMetadataBlock.primary)
+        };
+      }
       var metadata = (0, _extractMetadata.extractMetadata)((0, _utils.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.default.useRef(0);
   var snippetBlockRef = (0, _react.useRef)(null);
   var onSnippetRender = (0, _react.useCallback)(function () {
@@ -105,17 +114,24 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
     metadataPosition: _constants.SmartLinkPosition.Top
-  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
-    primary: primary,
-    secondary: secondary,
-    size: _constants.SmartLinkSize.Large,
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
+    primary: topPrimary,
+    secondary: topSecondary,
     overrideCss: _styled.metadataBlockCss,
-    maxLines: 1
-  }), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    maxLines: 1,
+    size: _constants.SmartLinkSize.Large
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    size: _constants.SmartLinkSize.Medium
+  })), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: _styled.hiddenSnippetStyles
+  }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: bottomPrimary,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1
   }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,