@atlaskit/smart-card 17.0.1 → 17.1.0

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

@@ -0,0 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import extractJsonldDataIcon from './extract-jsonld-data-icon';
+import extractProviderIcon from './extract-provider-icon';
+import { IconType, SmartLinkStatus } from '../../../constants';
+import extractIconRenderer from './extract-icon-renderer';
+export var extractLinkIcon = function extractLinkIcon(response, renderers) {
+  var data = response.data;
+
+  var _ref = extractJsonldDataIcon(data) || [],
+      _ref2 = _slicedToArray(_ref, 3),
+      icon = _ref2[0],
+      label = _ref2[1],
+      url = _ref2[2];
+
+  var render = extractIconRenderer(data, renderers);
+  return {
+    icon: icon,
+    label: label,
+    render: render,
+    url: url
+  };
+};
+export var extractErrorIcon = function extractErrorIcon(response, status) {
+  // Try to get provider icon first.
+  if (response) {
+    var data = response.data;
+    var generator = data.generator;
+    var provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
+
+    var _ref3 = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon) || [],
+        _ref4 = _slicedToArray(_ref3, 3),
+        icon = _ref4[0],
+        url = _ref4[2];
+
+    if (icon || url) {
+      return {
+        icon: icon,
+        url: url
+      };
+    }
+  } // Otherwise, use fallback icon for each status.
+
+
+  switch (status) {
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.Unauthorized:
+      return {
+        icon: IconType.Forbidden
+      };
+
+    case SmartLinkStatus.NotFound:
+      return {
+        icon: IconType.Error
+      };
+
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return {
+        icon: IconType.Default
+      };
+  }
+};

package/dist/esm/extractors/flexible/icon/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,35 @@
-import { extractTitle } from '../common/primitives';
+import { extractLink, extractTitle } from '../common/primitives';
+import { extractLozenge } from '../common/lozenge';
+import { extractLinkIcon } from './icon';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractPersonCreatedBy } from '../common/person';
+import { extractPersonsUpdatedBy } from './collaboratorGroup';
+import { extractDateUpdated } from '../common/date/extractDateUpdated';
+import { extractDateCreated } from '../common/date/extractDateCreated';
+import extractPriority from './extract-priority';
 
-var extractFlexibleUiContext = function extractFlexibleUiContext(response) {
+var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
     return undefined;
   }
 
   var data = response.data;
+  var url = extractLink(data);
   return {
-    title: extractTitle(data)
+    authorGroup: extractPersonCreatedBy(data),
+    collaboratorGroup: extractPersonsUpdatedBy(data),
+    commentCount: extractCommentCount(data),
+    createdBy: extractCreatedBy(data),
+    createdOn: extractDateCreated(data),
+    linkIcon: extractLinkIcon(response, renderers),
+    modifiedBy: extractModifiedBy(data),
+    modifiedOn: extractDateUpdated(data),
+    priority: extractPriority(data),
+    programmingLanguage: extractProgrammingLanguage(data),
+    state: extractLozenge(data),
+    subscriberCount: extractSubscriberCount(data),
+    title: extractTitle(data) || url,
+    url: url
   };
 };
 

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

@@ -0,0 +1,29 @@
+import { extractPersonCreatedBy, extractPersonUpdatedBy } from '../common/person';
+
+var extractValue = function extractValue(data, key) {
+  return data === null || data === void 0 ? void 0 : data[key];
+};
+
+export var extractCommentCount = function extractCommentCount(data) {
+  return extractValue(data, 'schema:commentCount');
+};
+export var extractCreatedBy = function extractCreatedBy(data) {
+  var persons = extractPersonCreatedBy(data);
+
+  if (persons && persons.length) {
+    return persons[0].name;
+  }
+};
+export var extractModifiedBy = function extractModifiedBy(data) {
+  var person = extractPersonUpdatedBy(data);
+
+  if (person) {
+    return person.name;
+  }
+};
+export var extractProgrammingLanguage = function extractProgrammingLanguage(data) {
+  return extractValue(data, 'schema:programmingLanguage');
+};
+export var extractSubscriberCount = function extractSubscriberCount(data) {
+  return extractValue(data, 'atlassian:subscriberCount');
+};

package/dist/esm/index.js

@@ -5,9 +5,12 @@ export { APIError } from './client/errors';
 export { Card } from './view/Card';
 export { default as Context } from './state/context';
 export { EmbedResizeMessageListener } from './view/EmbedCard/EmbedResizeMessageListener';
-export { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+export { embedHeaderHeight } from './view/EmbedCard/components/styled';
 export { SmartLinkEvents } from './utils/analytics/analytics';
 export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents'; // Classnames for integrators
 
-export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from '@atlaskit/media-ui/classNames';
-export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
+export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from './classNames';
+export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
+
+export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
+export { TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/esm/messages.js

@@ -0,0 +1,128 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  cannot_connect: {
+    id: 'fabric.linking.cannot_connect',
+    defaultMessage: "Can't connect, try again",
+    description: 'Error for when a provided link is not found.'
+  },
+  cannot_find_link: {
+    id: 'fabric.linking.cannot_find_link',
+    defaultMessage: "Can't find link",
+    description: 'Error for when a provided link is not found.'
+  },
+  click_to_join: {
+    id: 'fabric.linking.click_to_join',
+    defaultMessage: 'Join {context} to view this issue',
+    description: 'Allows the user join the product or service immediately'
+  },
+  connect_link_account: {
+    id: 'fabric.linking.connect_link_account',
+    defaultMessage: 'Connect to preview',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link.'
+  },
+  created_by: {
+    id: 'fabric.linking.created_by',
+    defaultMessage: 'Created by {context}',
+    description: 'Indicates the person or entity that created the resource.'
+  },
+  created_on: {
+    id: 'fabric.linking.create_on',
+    defaultMessage: 'Created {context}',
+    description: 'Indicated when entity was created'
+  },
+  delete: {
+    id: 'fabric.linking.delete',
+    defaultMessage: 'Delete',
+    description: 'Allow a user to delete a link'
+  },
+  modified_by: {
+    id: 'fabric.linking.updated_by',
+    defaultMessage: 'Modified by {context}',
+    description: 'Indicates the person or entity that modified the resource.'
+  },
+  modified_on: {
+    id: 'fabric.linking.modified_on',
+    defaultMessage: 'Updated {context}',
+    description: 'Indicated when entity was modified'
+  },
+  priority_blocker: {
+    id: 'fabric.linking.priority_blocker',
+    defaultMessage: 'Blocker',
+    description: 'Indicated priority as blocker'
+  },
+  priority_critical: {
+    id: 'fabric.linking.priority_critical',
+    defaultMessage: 'Critical',
+    description: 'Indicated priority as critical'
+  },
+  priority_high: {
+    id: 'fabric.linking.priority_high',
+    defaultMessage: 'High',
+    description: 'Indicated priority as high'
+  },
+  priority_highest: {
+    id: 'fabric.linking.priority_highest',
+    defaultMessage: 'Highest',
+    description: 'Indicated priority as highest'
+  },
+  priority_low: {
+    id: 'fabric.linking.priority_low',
+    defaultMessage: 'Low',
+    description: 'Indicated priority as low'
+  },
+  priority_lowest: {
+    id: 'fabric.linking.priority_lowest',
+    defaultMessage: 'Lowest',
+    description: 'Indicated priority as lowest'
+  },
+  priority_major: {
+    id: 'fabric.linking.priority_major',
+    defaultMessage: 'Major',
+    description: 'Indicated priority as major'
+  },
+  priority_medium: {
+    id: 'fabric.linking.priority_medium',
+    defaultMessage: 'Medium',
+    description: 'Indicated priority as medium'
+  },
+  priority_minor: {
+    id: 'fabric.linking.priority_minor',
+    defaultMessage: 'Minor',
+    description: 'Indicated priority as minor'
+  },
+  priority_trivial: {
+    id: 'fabric.linking.priority_trivial',
+    defaultMessage: 'Trivial',
+    description: 'Indicated priority as trivial'
+  },
+  priority_undefined: {
+    id: 'fabric.linking.priority_undefined',
+    defaultMessage: 'Undefined',
+    description: 'Indicated priority as unknown'
+  },
+  forbidden_access: {
+    id: 'fabric.linking.forbidden_access',
+    defaultMessage: 'Your access is forbidden',
+    description: 'Shown when a user does not have access to a resource behind the link.'
+  },
+  pending_request: {
+    id: 'fabric.linking.pending_request',
+    defaultMessage: 'Your access request is pending',
+    description: 'Shown when a user has requested an access but status is pending.'
+  },
+  restricted_link: {
+    id: 'fabric.linking.invalid_permissions',
+    defaultMessage: 'Restricted link, try another account',
+    description: 'Message shown when a user does not have permissions to view an item'
+  },
+  request_access: {
+    id: 'fabric.linking.request_access',
+    defaultMessage: 'Request access to {context} to view this issue',
+    description: 'Allows the user to request access to a product or service'
+  },
+  request_denied: {
+    id: 'fabric.linking.request_denied',
+    defaultMessage: 'Your access request was denied',
+    description: 'The user had request access but the request was denied by a product or service'
+  }
+});

package/dist/esm/providers/editor/transformer.js

@@ -10,7 +10,7 @@ var isPolarisView = function isPolarisView(url) {
 };
 
 var isJwmView = function isJwmView(url) {
-  return url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar)\/?/);
+  return url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
 };
 
 var isSlackMessage = function isSlackMessage(url) {

package/dist/esm/ssr.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { useState } from 'react';
+import uuid from 'uuid';
+import { CardWithUrlContent } from './view/CardWithUrl/component';
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+export var CardSSR = function CardSSR(props) {
+  var _useState = useState(function () {
+    return uuid();
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      id = _useState2[0];
+
+  var dispatchAnalytics = function dispatchAnalytics() {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
+
+
+  return /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    id: id,
+    dispatchAnalytics: dispatchAnalytics
+  }));
+};

package/dist/esm/utils/flexible.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as Blocks from '../view/FlexibleCard/components/blocks';
+import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import * as Elements from '../view/FlexibleCard/components/elements';
+export var isFlexibleUiCard = function isFlexibleUiCard(appearance, children) {
+  if ((appearance === 'inline' || appearance === 'block') && children && React.Children.toArray(children).some(function (child) {
+    return isFlexibleUiBlock(child);
+  })) {
+    return true;
+  }
+
+  return false;
+};
+export var isFlexibleUiBlock = function isFlexibleUiBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(function (type) {
+    return type === node.type;
+  });
+};
+export var isFlexibleUiElement = function isFlexibleUiElement(node) {
+  return /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(function (type) {
+    return type === node.type;
+  });
+};
+export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+};

package/dist/esm/utils/index.js

@@ -214,4 +214,14 @@ var typeToIcon = {
   folder: ['Folder', function () {
     return import('@atlaskit/icon-file-type/glyph/folder/16');
   }]
+};
+export var getIframeSandboxAttribute = function getIframeSandboxAttribute(isTrusted) {
+  return isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+};
+export var handleOnClick = function handleOnClick(handler) {
+  return function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    handler();
+  };
 };

package/dist/esm/utils/token.js

@@ -0,0 +1,23 @@
+import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
+
+export var safeToken = function safeToken(path, fallback) {
+  try {
+    return token(path, fallback);
+  } catch (e) {
+    return fallback;
+  }
+};
+export var tokens = {
+  actionIcon: safeToken('color.icon', '#44546F'),
+  background: safeToken('elevation.surface', '#FFFFFF'),
+  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
+  badgeText: safeToken('color.text.subtlest', '#626F86'),
+  blackLink: safeToken('color.text.subtle', '#44546F'),
+  blackLinkPressed: safeToken('color.text', '#172B4D'),
+  blueLink: safeToken('color.link', '#0C66E4'),
+  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
+  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
+  errorMessage: safeToken('color.text.disabled', '#6B778C'),
+  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  text: safeToken('color.text.subtlest', '#626F86')
+};

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/AuthorizeAction.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var AuthorizeAction = function AuthorizeAction(handler) {
+  return {
+    id: 'connect-account',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+    promise: function promise() {
+      return new Promise(function (resolve) {
+        return resolve(handler());
+      });
+    },
+    buttonAppearance: 'default'
+  };
+};

package/dist/esm/view/BlockCard/actions/DownloadAction.js

@@ -0,0 +1,51 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { downloadUrl } from '@atlaskit/media-common';
+import { messages } from '@atlaskit/media-ui/messages';
+export function downloadFunction(_x) {
+  return _downloadFunction.apply(this, arguments);
+}
+
+function _downloadFunction() {
+  _downloadFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            downloadUrl(url);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _downloadFunction.apply(this, arguments);
+}
+
+export var DownloadAction = function DownloadAction(_ref2) {
+  var url = _ref2.url;
+  return {
+    id: 'download-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+    promise: function promise() {
+      return downloadFunction({
+        url: url
+      });
+    }
+  };
+};

package/dist/esm/view/BlockCard/actions/ForbiddenAction.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var ForbiddenAction = function ForbiddenAction(handler) {
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'connect-other-account';
+  var message = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : messages.try_another_account;
+  var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  return {
+    id: id,
+    text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+      values: {
+        context: context
+      }
+    })),
+    promise: function promise() {
+      return new Promise(function (resolve) {
+        return resolve(handler());
+      });
+    },
+    buttonAppearance: 'default'
+  };
+};

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -0,0 +1,105 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+var _excluded = ["popupMountPointId", "onClose"],
+    _excluded2 = ["details"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider, FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+export function previewFunction(_x) {
+  return _previewFunction.apply(this, arguments);
+}
+/*
+Most of these are optional as we are being fault-tolerant
+However src, details, icon, title, and providerName are STRONGLY encouraged
+*/
+
+function _previewFunction() {
+  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var popupMountPointId, _onClose, rest, popupMountPoint, Modal;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = _objectWithoutProperties(_ref, _excluded);
+            popupMountPoint = document.getElementById(popupMountPointId);
+
+            if (!popupMountPoint) {
+              popupMountPoint = document.createElement('div');
+              popupMountPoint.id = popupMountPointId;
+              popupMountPoint.setAttribute('data-testid', 'preview-modal');
+              document.body.appendChild(popupMountPoint);
+            }
+
+            _context.next = 5;
+            return import('../components/Modal');
+
+          case 5:
+            Modal = _context.sent;
+            ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+              locale: "en"
+            }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+              onClose: function onClose() {
+                if (popupMountPoint) {
+                  _onClose();
+
+                  ReactDOM.unmountComponentAtNode(popupMountPoint);
+                }
+              }
+            }))), popupMountPoint);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _previewFunction.apply(this, arguments);
+}
+
+export default (function (_ref2) {
+  var details = _ref2.details,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return {
+    id: 'preview-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+    promise: function promise() {
+      return previewFunction(_objectSpread({
+        popupMountPointId: 'twp-editor-preview-iframe',
+        providerName: 'Preview',
+        closeLabel: 'Close Preview',
+        showModal: true,
+        iframeName: 'twp-editor-preview-iframe',
+        onClose: function onClose() {},
+        metadata: {
+          items: details || []
+        }
+      }, rest));
+    }
+  };
+});

package/dist/esm/view/BlockCard/actions/RetryAction.js

@@ -0,0 +1,33 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var RetryAction = function RetryAction(handler) {
+  return {
+    id: 'try-again',
+    promise: function () {
+      var _promise = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", handler());
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function promise() {
+        return _promise.apply(this, arguments);
+      }
+
+      return promise;
+    }(),
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+  };
+};

package/dist/esm/view/BlockCard/actions/ViewAction.js

@@ -0,0 +1,50 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export function viewFunction(_x) {
+  return _viewFunction.apply(this, arguments);
+}
+
+function _viewFunction() {
+  _viewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            window.open(url, '_blank', 'noopener=yes');
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _viewFunction.apply(this, arguments);
+}
+
+export var ViewAction = function ViewAction(_ref2) {
+  var url = _ref2.url;
+  return {
+    id: 'view-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+    promise: function promise() {
+      return viewFunction({
+        url: url
+      });
+    }
+  };
+};