@atlaskit/smart-card 23.3.0 → 23.4.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/smart-card
 
+## 23.4.0
+
+### Minor Changes
+
+- [`a86403e5e0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a86403e5e0e) - [ux] This PR adds more actions for use in Flexible UI Smart Links. These are PreviewAction, ViewAction and DownloadAction, and correspond to their Block card counterparts.
+
+  These, unlike the existing actions, will only render when the data for them is available. Therefore, the onClick for these actions are optional.
+
+  Usage:
+
+  ```TSX
+  const actions = [
+    {
+      name: ActionName.PreviewAction,
+      onClick: () => console.log('Preview action!'), // will run in addition to normal Preview Action
+      ...options,
+    },
+    {
+      name: ActionName.ViewAction,
+      onClick: () => console.log('View action!'), // will run in addition to normal View Action
+      ...options,
+    },
+    {
+      name: ActionName.DownloadAction,
+      onClick: () => console.log('Download action!'), // will run in addition to normal Download Action
+      ...options,
+    },
+  ]
+
+  <Card>
+    <TitleBlock actions={actions}>
+  </Card>
+  ```
+
+## 23.3.1
+
+### Patch Changes
+
+- [`6533e448c53`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6533e448c53) - [ux] Embed: Update unauthorised view text messages and use provider image if available
+- Updated dependencies
+
 ## 23.3.0
 
 ### Minor Changes

package/dist/cjs/constants.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.IconType = exports.ElementName = exports.ActionName = void 0;
-
+exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.IconType = exports.ElementName = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.ActionName = void 0;
+var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 /**
  * The alignment of Flexible UI component.
  */
+
+exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = CONTENT_URL_SECURITY_AND_PERMISSIONS;
 var SmartLinkAlignment;
 /**
  * The direction of Flexible UI components. It establish the main-axis
@@ -165,6 +167,9 @@ exports.ActionName = ActionName;
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["PreviewAction"] = "PreviewAction";
+  ActionName["ViewAction"] = "ViewAction";
+  ActionName["DownloadAction"] = "DownloadAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (exports.ActionName = ActionName = {}));
 

package/dist/cjs/extractors/common/actions/extractActions.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractActions = extractActions;
+exports.getActionsFromJsonLd = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -92,6 +93,8 @@ var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   return actions;
 };
 
+exports.getActionsFromJsonLd = getActionsFromJsonLd;
+
 function extractActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);

package/dist/cjs/extractors/flexible/actions/extract-download-action.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractDownloadAction = void 0;
+
+var _extractActions = require("../../common/actions/extractActions");
+
+var _detail = require("../../common/detail");
+
+var extractDownloadAction = function extractDownloadAction(data) {
+  var downloadActionExists = (0, _extractActions.getActionsFromJsonLd)(data).find(function (action) {
+    return action['@type'] === 'DownloadAction';
+  });
+
+  if (downloadActionExists) {
+    return {
+      downloadUrl: (0, _detail.extractDownloadUrl)(data)
+    };
+  }
+
+  return undefined;
+};
+
+exports.extractDownloadAction = extractDownloadAction;

package/dist/cjs/extractors/flexible/actions/extract-preview-action.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractPreviewAction = void 0;
+
+var _detail = require("../../common/detail");
+
+var _linkingCommon = require("@atlaskit/linking-common");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _icon = require("../icon");
+
+var extractPreviewAction = function extractPreviewAction(response) {
+  var _extractPreviewData;
+
+  var data = response.data;
+  var src = (_extractPreviewData = (0, _linkingCommon.extractPreview)(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+
+  if (src) {
+    var _extractProvider;
+
+    return {
+      downloadUrl: (0, _detail.extractDownloadUrl)(data),
+      providerName: (_extractProvider = (0, _extractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+      src: src,
+      title: (0, _extractors.extractTitle)(data),
+      linkIcon: (0, _icon.extractLinkIcon)(response),
+      url: (0, _extractors.extractLink)(data)
+    };
+  }
+};
+
+exports.extractPreviewAction = extractPreviewAction;

package/dist/cjs/extractors/flexible/actions/extract-view-action.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractViewAction = void 0;
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _extractActions = require("../../common/actions/extractActions");
+
+var extractViewAction = function extractViewAction(data) {
+  var viewActionExists = (0, _extractActions.getActionsFromJsonLd)(data).find(function (action) {
+    return action['@type'] === 'ViewAction';
+  });
+
+  if (viewActionExists) {
+    return {
+      viewUrl: (0, _extractors.extractLink)(data)
+    };
+  }
+
+  return undefined;
+};
+
+exports.extractViewAction = extractViewAction;

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

@@ -27,6 +27,12 @@ var _extractPreview = _interopRequireDefault(require("./extract-preview"));
 
 var _latestCommit = require("./latest-commit");
 
+var _extractPreviewAction = require("./actions/extract-preview-action");
+
+var _extractDownloadAction = require("./actions/extract-download-action");
+
+var _extractViewAction = require("./actions/extract-view-action");
+
 var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
   if (!response) {
     return undefined;
@@ -45,6 +51,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     createdBy: (0, _utils.extractCreatedBy)(data),
     createdOn: (0, _extractors.extractDateCreated)(data),
     dueOn: (0, _utils.extractDueOn)(data),
+    previewAction: (0, _extractPreviewAction.extractPreviewAction)(response),
+    viewAction: (0, _extractViewAction.extractViewAction)(data),
+    downloadAction: (0, _extractDownloadAction.extractDownloadAction)(data),
     latestCommit: (0, _latestCommit.extractLatestCommit)(data),
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),
     modifiedBy: (0, _utils.extractModifiedBy)(data),

package/dist/cjs/messages.js

@@ -78,6 +78,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'To show a preview of this link, connect your {context} account.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in byline.'
   },
+  connect_unauthorised_account_action: {
+    id: 'fabric.linking.connect_unauthorised_account_action',
+    defaultMessage: 'Connect to {context}',
+    description: 'Shown on a button to connect user external account to their Atlassian account.'
+  },
+  connect_unauthorised_account_description: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",
@@ -133,6 +143,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Join {context} to view this issue',
     description: 'Allows the user join the product or service immediately'
   },
+  learn_more_about_smart_links_security: {
+    id: 'fabric.linking.learn_more_about_smart_links_security',
+    defaultMessage: 'Learn more about smart link security and permissions.',
+    description: 'An anchor link to redirect user to a page about smart link security and permissions.'
+  },
   loading: {
     id: 'fabric.linking.loading',
     defaultMessage: 'Loading...',

package/dist/cjs/state/flexible-ui-context/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFlexibleUiContext = exports.FlexibleUiContext = void 0;
+exports.useFlexibleUiContext = exports.useFlexibleUiAnalyticsContext = exports.FlexibleUiContext = exports.FlexibleUiAnalyticsContext = void 0;
 
 var _react = require("react");
 
@@ -17,5 +17,18 @@ exports.FlexibleUiContext = FlexibleUiContext;
 var useFlexibleUiContext = function useFlexibleUiContext() {
   return (0, _react.useContext)(FlexibleUiContext);
 };
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
+
+
+exports.useFlexibleUiContext = useFlexibleUiContext;
+var FlexibleUiAnalyticsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FlexibleUiAnalyticsContext = FlexibleUiAnalyticsContext;
+
+var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
+  return (0, _react.useContext)(FlexibleUiAnalyticsContext);
+};
 
-exports.useFlexibleUiContext = useFlexibleUiContext;
+exports.useFlexibleUiAnalyticsContext = useFlexibleUiAnalyticsContext;

package/dist/cjs/version.json

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

package/dist/cjs/view/{BlockCard/utils → EmbedCard}/constants.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NotFoundImage = exports.LockImage = exports.CelebrationImage = void 0;
+exports.UnauthorisedImage = exports.NotFoundImage = exports.LockImage = void 0;
 var CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
 var LockImage = "".concat(CDN_BASE_URL, "/lock.svg");
 exports.LockImage = LockImage;
-var CelebrationImage = "".concat(CDN_BASE_URL, "/celebration.svg");
-exports.CelebrationImage = CelebrationImage;
 var NotFoundImage = "".concat(CDN_BASE_URL, "/not_found.svg");
-exports.NotFoundImage = NotFoundImage;
+exports.NotFoundImage = NotFoundImage;
+var UnauthorisedImage = "".concat(CDN_BASE_URL, "/unauth.svg");
+exports.UnauthorisedImage = UnauthorisedImage;

package/dist/cjs/view/EmbedCard/views/ForbiddenView.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _UnresolvedView = require("./UnresolvedView");
 
-var _constants = require("../../BlockCard/utils/constants");
+var _constants = require("../constants");
 
 var _ExpandedFrame = require("../components/ExpandedFrame");
 

package/dist/cjs/view/EmbedCard/views/NotFoundView.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _UnresolvedView = require("./UnresolvedView");
 
-var _constants = require("../../BlockCard/utils/constants");
+var _constants = require("../constants");
 
 var _ExpandedFrame = require("../components/ExpandedFrame");
 

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

@@ -7,17 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedCardUnauthorisedView = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _UnresolvedView = require("./UnresolvedView");
 
-var _constants = require("../../BlockCard/utils/constants");
+var _constants = require("../constants");
 
 var _ExpandedFrame = require("../components/ExpandedFrame");
 
 var _ImageIcon = require("../components/ImageIcon");
 
+var _messages = require("../../../messages");
+
+var _constants2 = require("../../../constants");
+
 var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
+  var _context$image;
+
   var link = _ref.link,
       context = _ref.context,
       isSelected = _ref.isSelected,
@@ -41,18 +51,26 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
     onClick: onClick,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
-    image: _constants.CelebrationImage,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : _constants.UnauthorisedImage,
     title: "connect_link_account_card_name",
-    description: "connect_link_account_card_description",
+    description: "connect_unauthorised_account_description",
     context: context && context.text,
     button: {
       appearance: 'primary',
-      text: 'connect_link_account_card',
+      text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
     onClick: onAuthorise,
     testId: testId
-  }));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
+    values: {
+      context: context === null || context === void 0 ? void 0 : context.text
+    }
+  })), ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: _constants2.CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    "data-testid": "".concat(testId, "-learn-more")
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.learn_more_about_smart_links_security))));
 };
 
 exports.EmbedCardUnauthorisedView = EmbedCardUnauthorisedView;

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -29,7 +29,8 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       button = _ref.button,
       context = _ref.context,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      children = _ref.children;
   return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
@@ -45,14 +46,16 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     css: {
       height: (0, _utils.gs)(14),
       marginBottom: (0, _utils.gs)(4)
-    }
+    },
+    "data-testid": "".concat(testId, "-unresolved-image")
   }), (0, _react.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(2.5),
       marginBottom: (0, _utils.gs)(1.5),
       width: (0, _utils.gs)(50),
       textAlign: 'center'
-    }
+    },
+    "data-testid": "".concat(testId, "-unresolved-title")
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[title], {
     values: {
       context: context
@@ -64,8 +67,9 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       textAlign: 'center',
       width: (0, _utils.gs)(50),
       lineHeight: (0, _utils.gs)(3)
-    }
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[description], {
+    },
+    "data-testid": "".concat(testId, "-unresolved-description")
+  }, children !== null && children !== void 0 ? children : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[description], {
     values: {
       context: context
     }

package/dist/cjs/view/FlexibleCard/components/actions/action/download-action/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+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) { (0, _defineProperty2.default)(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; }
+
+var DownloadAction = function DownloadAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      downloadUrl = props.downloadUrl,
+      _onClick = props.onClick,
+      testId = props.testId,
+      url = props.url;
+
+  if (downloadUrl && url) {
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        downloadFunction({
+          url: downloadUrl
+        });
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+function downloadFunction(_x) {
+  return _downloadFunction.apply(this, arguments);
+}
+
+function _downloadFunction() {
+  _downloadFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var url, isIE11, isSafari, iframeName, link, iframe;
+    return _regenerator.default.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:
+            isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+            isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            iframeName = 'media-download-iframe';
+            link = document.createElement('a');
+            iframe = document.getElementById(iframeName);
+
+            if (!iframe) {
+              iframe = document.createElement('iframe');
+              iframe.style.display = 'none';
+              iframe.id = iframeName;
+              iframe.name = iframeName;
+              document.body.appendChild(iframe);
+            }
+
+            link.href = url;
+            link.download = url;
+            link.target = isIE11 || isSafari ? '_blank' : iframeName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _downloadFunction.apply(this, arguments);
+}
+
+var _default = DownloadAction;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/action/download-action/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});