@atlaskit/smart-card 23.12.2 → 23.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 23.13.0
+
+### Minor Changes
+
+- [`67cfd8e13d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/67cfd8e13d0) - LinkUrl component with built-in link safety check added
+
+## 23.12.3
+
+### Patch Changes
+
+- [`27b8d8e0b4b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27b8d8e0b4b) - [ux] This adds tooltip messages to custom Flexible UI actions.
+  Now, when hovering over custom actions, the "content" prop will be displayed in the tooltip.
+  This also affects hover preview actions, which now show the tooltip message when hovering over actions inside of the hover preview card.
+
+  Additionally, some changes have been made to Flexible UI block card actions so that the analytics fired have the same attribute action type as hover preview's.
+
 ## 23.12.2
 
 ### Patch Changes

package/dist/cjs/linkUrl.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _LinkUrl.default;
+  }
+});
+
+var _LinkUrl = _interopRequireDefault(require("./view/LinkUrl"));

package/dist/cjs/messages.js

@@ -48,6 +48,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Close',
     description: ''
   },
+  check_this_link: {
+    id: 'fabric.linking.check_this_link',
+    defaultMessage: 'Check this link',
+    description: 'Link safety warning modal header'
+  },
   connect_to: {
     id: 'fabric.linking.connect_to',
     defaultMessage: 'Connect to {name}',
@@ -93,6 +98,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
   },
+  continue: {
+    id: 'fabric.linking.continue',
+    defaultMessage: 'Continue',
+    description: 'continue'
+  },
   copy_url_to_clipboard: {
     id: 'fabric.linking.download',
     defaultMessage: 'Copy link',
@@ -138,6 +148,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
     description: 'Informs the user that they cannot view this content.'
   },
+  go_back: {
+    id: 'fabric.linking.go_back',
+    defaultMessage: 'Go back',
+    description: 'go back'
+  },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
     defaultMessage: 'Restricted content',
@@ -343,6 +358,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Try another account',
     description: 'Allows the user to try an action again with a different account'
   },
+  link_safety_warning_message: {
+    id: 'fabric.linking.link_safety_warning_message',
+    defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
+    description: 'Link safety check warning message'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/cjs/version.json

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

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

@@ -111,9 +111,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: _constants.ActionName.PreviewAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'PreviewAction',
+          display: _constants.CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'preview',
+          actionType: 'PreviewAction',
           display: _constants.CardDisplay.Block
         });
       }
@@ -121,9 +126,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: _constants.ActionName.ViewAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'ViewAction',
+          display: _constants.CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'view',
+          actionType: 'ViewAction',
           display: _constants.CardDisplay.Block
         });
       }
@@ -131,9 +141,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: _constants.ActionName.DownloadAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'DownloadAction',
+          display: _constants.CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'download',
+          actionType: 'DownloadAction',
           display: _constants.CardDisplay.Block
         });
       }

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

@@ -75,7 +75,7 @@ var Action = function Action(_ref) {
       overrideCss: overrideCss,
       size: size,
       testId: testId,
-      tooltipMessage: tooltipMessage
+      tooltipMessage: tooltipMessage || content
     });
   }
 };

package/dist/cjs/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLinkWarningModal = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _url = require("@atlaskit/linking-common/url");
+
+var useLinkWarningModal = function useLinkWarningModal() {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      unsafeLinkText = _useState2[0],
+      setUnsafeLinkText = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      url = _useState4[0],
+      setUrl = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+  /**
+   * It checks and warns if a link text is a URL and different from an actual link destination
+   */
+
+
+  var checkLinkSafety = function checkLinkSafety(event, href) {
+    var linkText = event.currentTarget.innerText;
+    var anchorLinkRegex = new RegExp(/^#/im);
+    var isAnchorLink = anchorLinkRegex.test(linkText);
+
+    if (isAnchorLink) {
+      return;
+    }
+
+    var normalisedUrlFromLinkText = (0, _url.normalizeUrl)(linkText);
+
+    if (!!normalisedUrlFromLinkText && normalisedUrlFromLinkText !== href) {
+      event.preventDefault();
+      setUnsafeLinkText(linkText);
+      href && setUrl(href);
+      setIsOpen(true);
+    }
+  };
+
+  var onClose = function onClose() {
+    setIsOpen(false);
+    setUnsafeLinkText(null);
+    setUrl(null);
+  };
+
+  var onContinue = function onContinue() {
+    onClose();
+    url && window.location.assign(url);
+  };
+
+  return {
+    checkLinkSafety: checkLinkSafety,
+    unsafeLinkText: unsafeLinkText,
+    onClose: onClose,
+    onContinue: onContinue,
+    isOpen: isOpen,
+    url: url
+  };
+};
+
+exports.useLinkWarningModal = useLinkWarningModal;

package/dist/cjs/view/LinkUrl/LinkWarningModal/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../../messages");
+
+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; }
+
+var WarningModal = function WarningModal(props) {
+  var isOpen = props.isOpen,
+      unsafeLinkText = props.unsafeLinkText,
+      url = props.url,
+      onClose = props.onClose,
+      onContinue = props.onContinue,
+      intl = props.intl;
+
+  var content = /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    testId: "link-with-safety-warning"
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.check_this_link))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, url && unsafeLinkText && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.link_safety_warning_message, {
+    values: {
+      unsafeLinkText: unsafeLinkText,
+      a: function a() {
+        return /*#__PURE__*/_react.default.createElement("a", {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, url);
+      }
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "subtle",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.go_back)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "warning",
+    onClick: onContinue,
+    autoFocus: true
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.continue)))));
+
+  return intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: "en"
+  }, content);
+};
+
+var _default = (0, _reactIntlNext.injectIntl)(WarningModal, {
+  enforceContext: false
+});
+
+exports.default = _default;

package/dist/cjs/view/LinkUrl/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-modal");
+
+var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
+
+var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+    _excluded2 = ["checkLinkSafety"];
+
+var LinkUrl = function LinkUrl(_ref) {
+  var href = _ref.href,
+      children = _ref.children,
+      _ref$checkSafety = _ref.checkSafety,
+      checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
+      _onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useLinkWarningModal = (0, _useLinkWarningModal2.useLinkWarningModal)(),
+      checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
+      linkWarningModalProps = (0, _objectWithoutProperties2.default)(_useLinkWarningModal, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+    "data-testid": testId,
+    href: href,
+    onClick: function onClick(e) {
+      checkSafety && checkLinkSafety(e, href);
+      _onClick && _onClick(e);
+    }
+  }, props), children), checkSafety && /*#__PURE__*/_react.default.createElement(_LinkWarningModal.default, linkWarningModalProps));
+};
+
+var _default = LinkUrl;
+exports.default = _default;

package/dist/cjs/view/LinkUrl/types.js

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

package/dist/es2019/linkUrl.js

@@ -0,0 +1 @@
+export { default } from './view/LinkUrl';

package/dist/es2019/messages.js

@@ -40,6 +40,11 @@ export const messages = defineMessages({
     defaultMessage: 'Close',
     description: ''
   },
+  check_this_link: {
+    id: 'fabric.linking.check_this_link',
+    defaultMessage: 'Check this link',
+    description: 'Link safety warning modal header'
+  },
   connect_to: {
     id: 'fabric.linking.connect_to',
     defaultMessage: 'Connect to {name}',
@@ -85,6 +90,11 @@ export const messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
   },
+  continue: {
+    id: 'fabric.linking.continue',
+    defaultMessage: 'Continue',
+    description: 'continue'
+  },
   copy_url_to_clipboard: {
     id: 'fabric.linking.download',
     defaultMessage: 'Copy link',
@@ -130,6 +140,11 @@ export const messages = defineMessages({
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
     description: 'Informs the user that they cannot view this content.'
   },
+  go_back: {
+    id: 'fabric.linking.go_back',
+    defaultMessage: 'Go back',
+    description: 'go back'
+  },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
     defaultMessage: 'Restricted content',
@@ -335,6 +350,11 @@ export const messages = defineMessages({
     defaultMessage: 'Try another account',
     description: 'Allows the user to try an action again with a different account'
   },
+  link_safety_warning_message: {
+    id: 'fabric.linking.link_safety_warning_message',
+    defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
+    description: 'Link safety check warning message'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/es2019/version.json

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

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

@@ -78,9 +78,14 @@ const FlexibleResolvedView = ({
       name: ActionName.PreviewAction,
       hideIcon: true,
       onClick: () => {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'PreviewAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'preview',
+          actionType: 'PreviewAction',
           display: CardDisplay.Block
         });
       }
@@ -88,9 +93,14 @@ const FlexibleResolvedView = ({
       name: ActionName.ViewAction,
       hideIcon: true,
       onClick: () => {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'ViewAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'view',
+          actionType: 'ViewAction',
           display: CardDisplay.Block
         });
       }
@@ -98,9 +108,14 @@ const FlexibleResolvedView = ({
       name: ActionName.DownloadAction,
       hideIcon: true,
       onClick: () => {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'DownloadAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'download',
+          actionType: 'DownloadAction',
           display: CardDisplay.Block
         });
       }

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -56,7 +56,7 @@ const Action = ({
       overrideCss: overrideCss,
       size: size,
       testId: testId,
-      tooltipMessage: tooltipMessage
+      tooltipMessage: tooltipMessage || content
     });
   }
 };

package/dist/es2019/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+export const useLinkWarningModal = () => {
+  const [unsafeLinkText, setUnsafeLinkText] = useState(null);
+  const [url, setUrl] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  /**
+   * It checks and warns if a link text is a URL and different from an actual link destination
+   */
+
+  const checkLinkSafety = (event, href) => {
+    const linkText = event.currentTarget.innerText;
+    const anchorLinkRegex = new RegExp(/^#/im);
+    const isAnchorLink = anchorLinkRegex.test(linkText);
+
+    if (isAnchorLink) {
+      return;
+    }
+
+    const normalisedUrlFromLinkText = normalizeUrl(linkText);
+
+    if (!!normalisedUrlFromLinkText && normalisedUrlFromLinkText !== href) {
+      event.preventDefault();
+      setUnsafeLinkText(linkText);
+      href && setUrl(href);
+      setIsOpen(true);
+    }
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    setUnsafeLinkText(null);
+    setUrl(null);
+  };
+
+  const onContinue = () => {
+    onClose();
+    url && window.location.assign(url);
+  };
+
+  return {
+    checkLinkSafety,
+    unsafeLinkText,
+    onClose,
+    onContinue,
+    isOpen,
+    url
+  };
+};

package/dist/es2019/view/LinkUrl/LinkWarningModal/index.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { messages } from '../../../messages';
+
+const WarningModal = props => {
+  const {
+    isOpen,
+    unsafeLinkText,
+    url,
+    onClose,
+    onContinue,
+    intl
+  } = props;
+  const content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: "link-with-safety-warning"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+    values: {
+      unsafeLinkText: unsafeLinkText,
+      a: () => /*#__PURE__*/React.createElement("a", {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, url)
+    }
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: onContinue,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+
+export default injectIntl(WarningModal, {
+  enforceContext: false
+});

package/dist/es2019/view/LinkUrl/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
+import LinkWarningModal from './LinkWarningModal';
+
+const LinkUrl = ({
+  href,
+  children,
+  checkSafety = true,
+  onClick,
+  testId = 'link-with-safety',
+  ...props
+}) => {
+  const {
+    checkLinkSafety,
+    ...linkWarningModalProps
+  } = useLinkWarningModal();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    "data-testid": testId,
+    href: href,
+    onClick: e => {
+      checkSafety && checkLinkSafety(e, href);
+      onClick && onClick(e);
+    }
+  }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
+};
+
+export default LinkUrl;

package/dist/es2019/view/LinkUrl/types.js

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

package/dist/esm/linkUrl.js

@@ -0,0 +1 @@
+export { default } from './view/LinkUrl';

package/dist/esm/messages.js

@@ -40,6 +40,11 @@ export var messages = defineMessages({
     defaultMessage: 'Close',
     description: ''
   },
+  check_this_link: {
+    id: 'fabric.linking.check_this_link',
+    defaultMessage: 'Check this link',
+    description: 'Link safety warning modal header'
+  },
   connect_to: {
     id: 'fabric.linking.connect_to',
     defaultMessage: 'Connect to {name}',
@@ -85,6 +90,11 @@ export var messages = defineMessages({
     defaultMessage: 'Connect to Atlassian to view more details of your work and collaborate from one place.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view and we do not have the providers name.'
   },
+  continue: {
+    id: 'fabric.linking.continue',
+    defaultMessage: 'Continue',
+    description: 'continue'
+  },
   copy_url_to_clipboard: {
     id: 'fabric.linking.download',
     defaultMessage: 'Copy link',
@@ -130,6 +140,11 @@ export var messages = defineMessages({
     defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
     description: 'Informs the user that they cannot view this content.'
   },
+  go_back: {
+    id: 'fabric.linking.go_back',
+    defaultMessage: 'Go back',
+    description: 'go back'
+  },
   invalid_permissions: {
     id: 'fabric.linking.invalid_permissions',
     defaultMessage: 'Restricted content',
@@ -335,6 +350,11 @@ export var messages = defineMessages({
     defaultMessage: 'Try another account',
     description: 'Allows the user to try an action again with a different account'
   },
+  link_safety_warning_message: {
+    id: 'fabric.linking.link_safety_warning_message',
+    defaultMessage: 'The link {unsafeLinkText} is taking you to a different site, <a>actual link here</a>',
+    description: 'Link safety check warning message'
+  },
   unlink_account: {
     id: 'fabric.linking.unlink_account',
     defaultMessage: 'Unlink Account',

package/dist/esm/version.json

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

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

@@ -90,9 +90,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: ActionName.PreviewAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'PreviewAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'preview',
+          actionType: 'PreviewAction',
           display: CardDisplay.Block
         });
       }
@@ -100,9 +105,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: ActionName.ViewAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'ViewAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'view',
+          actionType: 'ViewAction',
           display: CardDisplay.Block
         });
       }
@@ -110,9 +120,14 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: ActionName.DownloadAction,
       hideIcon: true,
       onClick: function onClick() {
+        analytics.ui.actionClickedEvent({
+          id: analyticsId,
+          actionType: 'DownloadAction',
+          display: CardDisplay.Block
+        });
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
-          actionType: 'download',
+          actionType: 'DownloadAction',
           display: CardDisplay.Block
         });
       }

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

@@ -60,7 +60,7 @@ var Action = function Action(_ref) {
       overrideCss: overrideCss,
       size: size,
       testId: testId,
-      tooltipMessage: tooltipMessage
+      tooltipMessage: tooltipMessage || content
     });
   }
 };

package/dist/esm/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+export var useLinkWarningModal = function useLinkWarningModal() {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      unsafeLinkText = _useState2[0],
+      setUnsafeLinkText = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      url = _useState4[0],
+      setUrl = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+  /**
+   * It checks and warns if a link text is a URL and different from an actual link destination
+   */
+
+
+  var checkLinkSafety = function checkLinkSafety(event, href) {
+    var linkText = event.currentTarget.innerText;
+    var anchorLinkRegex = new RegExp(/^#/im);
+    var isAnchorLink = anchorLinkRegex.test(linkText);
+
+    if (isAnchorLink) {
+      return;
+    }
+
+    var normalisedUrlFromLinkText = normalizeUrl(linkText);
+
+    if (!!normalisedUrlFromLinkText && normalisedUrlFromLinkText !== href) {
+      event.preventDefault();
+      setUnsafeLinkText(linkText);
+      href && setUrl(href);
+      setIsOpen(true);
+    }
+  };
+
+  var onClose = function onClose() {
+    setIsOpen(false);
+    setUnsafeLinkText(null);
+    setUrl(null);
+  };
+
+  var onContinue = function onContinue() {
+    onClose();
+    url && window.location.assign(url);
+  };
+
+  return {
+    checkLinkSafety: checkLinkSafety,
+    unsafeLinkText: unsafeLinkText,
+    onClose: onClose,
+    onContinue: onContinue,
+    isOpen: isOpen,
+    url: url
+  };
+};

package/dist/esm/view/LinkUrl/LinkWarningModal/index.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { messages } from '../../../messages';
+
+var WarningModal = function WarningModal(props) {
+  var isOpen = props.isOpen,
+      unsafeLinkText = props.unsafeLinkText,
+      url = props.url,
+      onClose = props.onClose,
+      onContinue = props.onContinue,
+      intl = props.intl;
+  var content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: "link-with-safety-warning"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+    values: {
+      unsafeLinkText: unsafeLinkText,
+      a: function a() {
+        return /*#__PURE__*/React.createElement("a", {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, url);
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: onContinue,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+
+export default injectIntl(WarningModal, {
+  enforceContext: false
+});

package/dist/esm/view/LinkUrl/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+    _excluded2 = ["checkLinkSafety"];
+import React from 'react';
+import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
+import LinkWarningModal from './LinkWarningModal';
+
+var LinkUrl = function LinkUrl(_ref) {
+  var href = _ref.href,
+      children = _ref.children,
+      _ref$checkSafety = _ref.checkSafety,
+      checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
+      _onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useLinkWarningModal = useLinkWarningModal(),
+      checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
+      linkWarningModalProps = _objectWithoutProperties(_useLinkWarningModal, _excluded2);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    "data-testid": testId,
+    href: href,
+    onClick: function onClick(e) {
+      checkSafety && checkLinkSafety(e, href);
+      _onClick && _onClick(e);
+    }
+  }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
+};
+
+export default LinkUrl;

package/dist/esm/view/LinkUrl/types.js

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

package/dist/types/linkUrl.d.ts

@@ -0,0 +1,2 @@
+export { default } from './view/LinkUrl';
+export type { LinkUrlProps } from './view/LinkUrl/types';

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/LinkUrl/LinkWarningModal/hooks/use-link-warning-modal.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent } from 'react';
+export declare const useLinkWarningModal: () => {
+    checkLinkSafety: (event: MouseEvent, href: string | undefined) => void;
+    unsafeLinkText: string | null;
+    onClose: () => void;
+    onContinue: () => void;
+    isOpen: boolean;
+    url: string | null;
+};

package/dist/types/view/LinkUrl/LinkWarningModal/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+interface LinkWarningModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onContinue: () => void;
+    unsafeLinkText: string | null;
+    url: string | null;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<LinkWarningModalProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<LinkWarningModalProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/view/LinkUrl/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkUrlProps } from './types';
+declare const LinkUrl: React.FC<LinkUrlProps>;
+export default LinkUrl;

package/dist/types/view/LinkUrl/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface LinkUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Determines if we want to perform a link safety check. True by default.
+     */
+    checkSafety?: boolean;
+    testId?: string;
+}

package/link-url/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/smart-card/link-url",
+  "main": "../dist/cjs/linkUrl.js",
+  "module": "../dist/esm/linkUrl.js",
+  "module:es2019": "../dist/es2019/linkUrl.js",
+  "sideEffects": false,
+  "types": "../dist/types/linkUrl.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/linkUrl.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.12.2",
+  "version": "23.13.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -120,6 +120,7 @@
     "./types": "./src/types.ts",
     "./hooks": "./src/hooks.ts",
     "./hover-card": "./src/hoverCard.ts",
+    "./link-url": "./src/linkUrl.ts",
     ".": "./src/index.ts"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",