@atlaskit/smart-card 26.13.1 → 26.14.1

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

@@ -27,7 +27,7 @@ export const getSimulatedMetadata = (extensionKey = '', data) => {
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, primaryAttribution],
-          secondary: [ElementName.CommentCount, ElementName.ReactCount],
+          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.ViewCount],
           subtitle: []
         }
       };
@@ -73,4 +73,103 @@ export const getSimulatedMetadata = (extensionKey = '', data) => {
         }
       };
   }
+};
+export const getSimulatedBetterMetadata = (extensionKey = '', data) => {
+  const types = data ? extractType(data) : undefined;
+  const defaultMetadata = {
+    topMetadataBlock: {
+      primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
+      secondary: [],
+      subtitle: []
+    },
+    bottomMetadataBlock: {
+      primary: [],
+      secondary: [],
+      subtitle: []
+    }
+  };
+  switch (extensionKey) {
+    case 'bitbucket-object-provider':
+    case 'native-bitbucket-object-provider':
+      if (types !== null && types !== void 0 && types.includes('atlassian:SourceCodePullRequest')) {
+        return {
+          ...defaultMetadata,
+          topMetadataBlock: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.SubscriberCount, ElementName.State],
+            secondary: [],
+            subtitle: [ElementName.SourceBranch, ElementName.TargetBranch]
+          }
+        };
+      }
+      return {
+        ...defaultMetadata,
+        topMetadataBlock: {
+          primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
+          secondary: [],
+          subtitle: []
+        }
+      };
+    case 'confluence-object-provider':
+      const primaryAttribution = data && extractOwnedBy(data) ? ElementName.OwnedByGroup : ElementName.AuthorGroup;
+      return {
+        topMetadataBlock: {
+          primary: [primaryAttribution, ElementName.ModifiedOn],
+          secondary: [],
+          subtitle: []
+        },
+        bottomMetadataBlock: {
+          primary: [ElementName.CommentCount, ElementName.ReactCount, ElementName.ViewCount],
+          secondary: [],
+          subtitle: []
+        }
+      };
+    case 'jira-object-provider':
+      return {
+        ...defaultMetadata,
+        topMetadataBlock: {
+          primary: [ElementName.AssignedToGroup, ElementName.State, ElementName.Priority],
+          secondary: [],
+          subtitle: []
+        }
+      };
+    case 'trello-object-provider':
+      return {
+        ...defaultMetadata,
+        topMetadataBlock: {
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
+          secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount, ElementName.ChecklistProgress],
+          subtitle: [ElementName.Location]
+        }
+      };
+    case 'watermelon-object-provider':
+      if (types !== null && types !== void 0 && types.includes('atlassian:Project')) {
+        return {
+          ...defaultMetadata,
+          topMetadataBlock: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.State, ElementName.DueOn],
+            secondary: [],
+            subtitle: []
+          }
+        };
+      }
+      return {
+        ...defaultMetadata,
+        topMetadataBlock: {
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
+          secondary: [],
+          subtitle: []
+        }
+      };
+    case 'google-object-provider':
+      return {
+        ...defaultMetadata,
+        topMetadataBlock: {
+          primary: [ElementName.AuthorGroup, ElementName.ModifiedOn],
+          secondary: [],
+          subtitle: []
+        }
+      };
+    default:
+      return defaultMetadata;
+  }
 };

package/dist/esm/constants.js

@@ -100,6 +100,8 @@ export var SmartLinkWidth = /*#__PURE__*/function (SmartLinkWidth) {
  *    (src/view/FlexibleCard/components/blocks/utils.tsx)
  */
 export var ElementName = /*#__PURE__*/function (ElementName) {
+  ElementName["AssignedTo"] = "AssignedTo";
+  ElementName["AssignedToGroup"] = "AssignedToGroup";
   ElementName["AttachmentCount"] = "AttachmentCount";
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["ChecklistProgress"] = "ChecklistProgress";
@@ -114,15 +116,18 @@ export 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";
@@ -146,6 +151,7 @@ export var ActionName = /*#__PURE__*/function (ActionName) {
 /**
  * Flexible UI icons - each mapped to AK icons.
  */
+
 export var IconType = /*#__PURE__*/function (IconType) {
   IconType["Archive"] = "FileType:Archive";
   IconType["Audio"] = "FileType:Audio";

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

@@ -1,8 +1,8 @@
 import { extractSummary } from '../common/primitives';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractReadTime, extractPersonAssignedToAsArray } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/link-extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink, extractPersonOwnedBy } from '@atlaskit/link-extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
@@ -25,8 +25,10 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var url = extractLink(data);
   var showLozengeAction = (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useLozengeAction) === 'experiment';
   return {
+    assignedToGroup: extractPersonAssignedToAsArray(data),
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),
+    ownedByGroup: extractPersonOwnedBy(data),
     collaboratorGroup: extractPersonsUpdatedBy(data),
     commentCount: extractCommentCount(data),
     viewCount: extractViewCount(data),
@@ -35,6 +37,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     checklistProgress: extractChecklistProgress(data),
     createdBy: extractCreatedBy(data),
     ownedBy: extractOwnedBy(data),
+    assignedTo: extractAssignedTo(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
     previewAction: extractPreviewAction(response),
@@ -49,11 +52,13 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     priority: extractPriority(data),
     provider: extractProviderIcon(data),
     programmingLanguage: extractProgrammingLanguage(data),
+    readTime: extractReadTime(data),
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),
     state: extractState(response, showServerActions || showLozengeAction, id),
     subscriberCount: extractSubscriberCount(data),
+    subTasksProgress: extractSubTasksProgress(data),
     targetBranch: extractTargetBranch(data),
     title: extractTitle(data) || url,
     url: url

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',
@@ -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',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.13.1",
+	"version": "26.14.1",
 	"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/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/EmbedModal/utils.js

@@ -1,46 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["popupMountPointId", "onClose"];
+var _excluded = ["onClose"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import Icon from '../FlexibleCard/components/elements/icon';
-import { SmartLinkSize } from '../../constants';
-export var openPreviewModal = function openPreviewModal(_ref) {
-  var analytics = _ref.analytics,
-    download = _ref.downloadUrl,
-    isSupportTheming = _ref.isSupportTheming,
-    linkIcon = _ref.linkIcon,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-    providerName = _ref.providerName,
-    src = _ref.src,
-    title = _ref.title,
-    url = _ref.url;
-  var EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
-      size: SmartLinkSize.Large
-    })),
-    isFlexibleUi: true
-  };
-  return previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose: onClose,
-    download: download,
-    icon: EmbedIcon,
-    providerName: providerName || 'Preview',
-    src: src,
-    title: title,
-    url: url,
-    analytics: analytics,
-    origin: 'smartLinkCard',
-    isSupportTheming: isSupportTheming
-  });
-};
+var IFRAME_NAME = 'twp-editor-preview-iframe';
+var POPUP_MOUNT_POINT_ID = 'twp-editor-preview-iframe';
 
 /*
   Explanatory note:
@@ -55,44 +22,53 @@ export var openPreviewModal = function openPreviewModal(_ref) {
   you find an elegant solution around this, you should definitely feel free to
   refactor it.
 */
-export function previewFunction(_x) {
-  return _previewFunction.apply(this, arguments);
+export function openEmbedModal() {
+  return _openEmbedModal.apply(this, arguments);
 }
-function _previewFunction() {
-  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-    var popupMountPointId, onEmbedClose, rest, popupMountPoint, Modal;
+function _openEmbedModal() {
+  _openEmbedModal = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref,
+      _ref$onClose,
+      _onClose,
+      props,
+      popupMountPoint,
+      Modal,
+      _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          popupMountPointId = _ref2.popupMountPointId, onEmbedClose = _ref2.onClose, rest = _objectWithoutProperties(_ref2, _excluded);
-          popupMountPoint = document.getElementById(popupMountPointId);
+          _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          _ref$onClose = _ref.onClose, _onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose, props = _objectWithoutProperties(_ref, _excluded);
+          popupMountPoint = document.getElementById(POPUP_MOUNT_POINT_ID);
           if (!popupMountPoint) {
             popupMountPoint = document.createElement('div');
-            popupMountPoint.id = popupMountPointId;
+            popupMountPoint.id = POPUP_MOUNT_POINT_ID;
             popupMountPoint.setAttribute('data-testid', 'preview-modal');
             document.body.appendChild(popupMountPoint);
           }
-          _context2.next = 5;
+          _context2.next = 6;
           return import('./index');
-        case 5:
+        case 6:
           Modal = _context2.sent;
           ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
             locale: "en"
-          }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+          }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, props, {
+            iframeName: IFRAME_NAME,
             onClose: function onClose(_context) {
               if (popupMountPoint) {
                 ReactDOM.unmountComponentAtNode(popupMountPoint);
               }
-              if (onEmbedClose) {
-                onEmbedClose(_context);
+              if (_onClose) {
+                _onClose(_context);
               }
-            }
+            },
+            showModal: true
           }))), popupMountPoint);
-        case 7:
+        case 8:
         case "end":
           return _context2.stop();
       }
     }, _callee);
   }));
-  return _previewFunction.apply(this, arguments);
+  return _openEmbedModal.apply(this, arguments);
 }

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -6,10 +6,10 @@ import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
-import { openPreviewModal } from '../../../../../EmbedModal/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 var PreviewAction = function PreviewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -28,7 +28,7 @@ var PreviewAction = function PreviewAction(props) {
   var previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
     var embedModal = function embedModal() {
-      return openPreviewModal({
+      return openEmbedModalWithFlexibleUiIcon({
         title: title,
         providerName: providerName,
         downloadUrl: downloadUrl,

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: