@atlaskit/smart-card 26.5.13 → 26.5.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.5.14
+
+### Patch Changes
+
+- [`fd2375e6f26`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd2375e6f26) - [ux] Prevent skipping of warning modal when onClick callback programatically opens a window. OnClick function is no longer called if the warning modal is shown. This will prevent link click analytics from firing but there is no easy way to distinguish the effects of what happens within onClick. Additionally, clicking continue in the warning modal will always open the link in a new tab.
+
 ## 26.5.13
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -25,37 +25,46 @@ var useLinkWarningModal = function useLinkWarningModal() {
     setIsOpen = _useState6[1];
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var sendAnalyticsEvent = function sendAnalyticsEvent() {
+  var sendWarningModalViewedEvent = function sendWarningModalViewedEvent() {
     createAnalyticsEvent({
-      action: 'shown',
-      actionSubject: 'warningModal',
-      actionSubjectId: 'linkSafetyWarning',
-      eventType: 'operational'
+      action: 'viewed',
+      actionSubject: 'linkSafetyWarningModal',
+      eventType: 'screen',
+      name: 'linkSafetyWarningModal'
+    }).fire(_analytics.ANALYTICS_CHANNEL);
+  };
+  var sendContinueClickedEvent = function sendContinueClickedEvent() {
+    createAnalyticsEvent({
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: 'linkSafetyWarningModalContinue',
+      eventType: 'ui',
+      screen: 'linkSafetyWarningModal'
     }).fire(_analytics.ANALYTICS_CHANNEL);
   };
 
   /**
    * 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 isLinkSafe = function isLinkSafe(event, href) {
     if (!href) {
-      return;
+      return true;
     }
     var anchor = event.currentTarget;
     var linkText = anchor.innerText;
     var normalisedUrlFromLinkText = (0, _url.normalizeUrl)(linkText);
     if (!normalisedUrlFromLinkText) {
-      return;
+      return true;
     }
     var anchorLinkRegex = new RegExp(/^#/im);
     var isAnchorLink = anchorLinkRegex.test(linkText);
     if (isAnchorLink) {
-      return;
+      return true;
     }
     var relativeLinkRegex = new RegExp(/^\//im);
     var isRelativeHrefLink = relativeLinkRegex.test(href);
     if (isRelativeHrefLink) {
-      return;
+      return true;
     }
     var hrefUrl = new URL(href, window.location.origin);
     var linkTextUrl = new URL(normalisedUrlFromLinkText, hrefUrl.origin);
@@ -69,12 +78,18 @@ var useLinkWarningModal = function useLinkWarningModal() {
     }
     var areEquivalentLinks = linkTextUrl.hostname === hrefUrl.hostname && linkTextUrl.pathname === hrefUrl.pathname && linkTextUrl.search === hrefUrl.search && linkTextUrl.username === hrefUrl.username && linkTextUrl.password === hrefUrl.password && areProtocolsEquivalent;
     if (!areEquivalentLinks) {
-      event.preventDefault();
-      setUnsafeLinkText(linkText);
-      href && setUrl(href);
-      setIsOpen(true);
-      sendAnalyticsEvent();
+      return false;
     }
+    return true;
+  };
+  var showSafetyWarningModal = function showSafetyWarningModal(event, href) {
+    event.preventDefault();
+    var anchor = event.currentTarget;
+    var linkText = anchor.innerText;
+    setUnsafeLinkText(linkText);
+    href && setUrl(href);
+    setIsOpen(true);
+    sendWarningModalViewedEvent();
   };
   var onClose = function onClose() {
     setIsOpen(false);
@@ -83,14 +98,16 @@ var useLinkWarningModal = function useLinkWarningModal() {
   };
   var onContinue = function onContinue() {
     onClose();
-    url && window.location.assign(url);
+    sendContinueClickedEvent();
+    url && window.open(url, '_blank', 'noopener noreferrer');
   };
   return {
-    checkLinkSafety: checkLinkSafety,
-    unsafeLinkText: unsafeLinkText,
+    isLinkSafe: isLinkSafe,
+    isOpen: isOpen,
     onClose: onClose,
     onContinue: onContinue,
-    isOpen: isOpen,
+    showSafetyWarningModal: showSafetyWarningModal,
+    unsafeLinkText: unsafeLinkText,
     url: url
   };
 };

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

@@ -14,8 +14,9 @@ var _click = require("../../utils/analytics/click");
 var _LinkAnalyticsContext = require("../../utils/analytics/LinkAnalyticsContext");
 var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-modal");
 var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
-  _excluded2 = ["checkLinkSafety"];
+  _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: _version.name,
   packageVersion: _version.version,
@@ -32,7 +33,8 @@ var LinkUrl = function LinkUrl(_ref) {
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useLinkWarningModal = (0, _useLinkWarningModal2.useLinkWarningModal)(),
-    checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
+    isLinkSafe = _useLinkWarningModal.isLinkSafe,
+    showSafetyWarningModal = _useLinkWarningModal.showSafetyWarningModal,
     linkWarningModalProps = (0, _objectWithoutProperties2.default)(_useLinkWarningModal, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LinkAnalyticsContext.LinkAnalyticsContext, {
     url: href,
@@ -41,8 +43,25 @@ var LinkUrl = function LinkUrl(_ref) {
     "data-testid": testId,
     href: href,
     onClick: function onClick(e) {
-      checkSafety && checkLinkSafety(e, href);
-      _onClick && _onClick(e);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe')) {
+        if (!checkSafety) {
+          _onClick && _onClick(e);
+          return;
+        }
+
+        // Only call the onClick if the link is safe
+        if (isLinkSafe(e, href)) {
+          _onClick && _onClick(e);
+        } else {
+          showSafetyWarningModal(e, href);
+        }
+      } else {
+        if (checkSafety && !isLinkSafe(e, href)) {
+          showSafetyWarningModal(e, href);
+        }
+        // Call the onClick regardless of the link safety
+        _onClick && _onClick(e);
+      }
     }
   }, props), children)), checkSafety && /*#__PURE__*/_react.default.createElement(_LinkWarningModal.default, linkWarningModalProps));
 };

package/dist/es2019/version.json

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

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

@@ -9,37 +9,46 @@ export const useLinkWarningModal = () => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const sendAnalyticsEvent = () => {
+  const sendWarningModalViewedEvent = () => {
     createAnalyticsEvent({
-      action: 'shown',
-      actionSubject: 'warningModal',
-      actionSubjectId: 'linkSafetyWarning',
-      eventType: 'operational'
+      action: 'viewed',
+      actionSubject: 'linkSafetyWarningModal',
+      eventType: 'screen',
+      name: 'linkSafetyWarningModal'
+    }).fire(ANALYTICS_CHANNEL);
+  };
+  const sendContinueClickedEvent = () => {
+    createAnalyticsEvent({
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: 'linkSafetyWarningModalContinue',
+      eventType: 'ui',
+      screen: 'linkSafetyWarningModal'
     }).fire(ANALYTICS_CHANNEL);
   };
 
   /**
    * It checks and warns if a link text is a URL and different from an actual link destination
    */
-  const checkLinkSafety = (event, href) => {
+  const isLinkSafe = (event, href) => {
     if (!href) {
-      return;
+      return true;
     }
     const anchor = event.currentTarget;
     const linkText = anchor.innerText;
     const normalisedUrlFromLinkText = normalizeUrl(linkText);
     if (!normalisedUrlFromLinkText) {
-      return;
+      return true;
     }
     const anchorLinkRegex = new RegExp(/^#/im);
     const isAnchorLink = anchorLinkRegex.test(linkText);
     if (isAnchorLink) {
-      return;
+      return true;
     }
     const relativeLinkRegex = new RegExp(/^\//im);
     const isRelativeHrefLink = relativeLinkRegex.test(href);
     if (isRelativeHrefLink) {
-      return;
+      return true;
     }
     const hrefUrl = new URL(href, window.location.origin);
     const linkTextUrl = new URL(normalisedUrlFromLinkText, hrefUrl.origin);
@@ -53,12 +62,18 @@ export const useLinkWarningModal = () => {
     }
     const areEquivalentLinks = linkTextUrl.hostname === hrefUrl.hostname && linkTextUrl.pathname === hrefUrl.pathname && linkTextUrl.search === hrefUrl.search && linkTextUrl.username === hrefUrl.username && linkTextUrl.password === hrefUrl.password && areProtocolsEquivalent;
     if (!areEquivalentLinks) {
-      event.preventDefault();
-      setUnsafeLinkText(linkText);
-      href && setUrl(href);
-      setIsOpen(true);
-      sendAnalyticsEvent();
+      return false;
     }
+    return true;
+  };
+  const showSafetyWarningModal = (event, href) => {
+    event.preventDefault();
+    const anchor = event.currentTarget;
+    const linkText = anchor.innerText;
+    setUnsafeLinkText(linkText);
+    href && setUrl(href);
+    setIsOpen(true);
+    sendWarningModalViewedEvent();
   };
   const onClose = () => {
     setIsOpen(false);
@@ -67,14 +82,16 @@ export const useLinkWarningModal = () => {
   };
   const onContinue = () => {
     onClose();
-    url && window.location.assign(url);
+    sendContinueClickedEvent();
+    url && window.open(url, '_blank', 'noopener noreferrer');
   };
   return {
-    checkLinkSafety,
-    unsafeLinkText,
+    isLinkSafe,
+    isOpen,
     onClose,
     onContinue,
-    isOpen,
+    showSafetyWarningModal,
+    unsafeLinkText,
     url
   };
 };

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

@@ -6,6 +6,7 @@ import { withLinkClickedEvent } from '../../utils/analytics/click';
 import { LinkAnalyticsContext } from '../../utils/analytics/LinkAnalyticsContext';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 import LinkWarningModal from './LinkWarningModal';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName,
   packageVersion,
@@ -21,7 +22,8 @@ const LinkUrl = ({
   ...props
 }) => {
   const {
-    checkLinkSafety,
+    isLinkSafe,
+    showSafetyWarningModal,
     ...linkWarningModalProps
   } = useLinkWarningModal();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkAnalyticsContext, {
@@ -31,8 +33,25 @@ const LinkUrl = ({
     "data-testid": testId,
     href: href,
     onClick: e => {
-      checkSafety && checkLinkSafety(e, href);
-      onClick && onClick(e);
+      if (getBooleanFF('platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe')) {
+        if (!checkSafety) {
+          onClick && onClick(e);
+          return;
+        }
+
+        // Only call the onClick if the link is safe
+        if (isLinkSafe(e, href)) {
+          onClick && onClick(e);
+        } else {
+          showSafetyWarningModal(e, href);
+        }
+      } else {
+        if (checkSafety && !isLinkSafe(e, href)) {
+          showSafetyWarningModal(e, href);
+        }
+        // Call the onClick regardless of the link safety
+        onClick && onClick(e);
+      }
     }
   }, props), children)), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
 };

package/dist/esm/version.json

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

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

@@ -18,37 +18,46 @@ export var useLinkWarningModal = function useLinkWarningModal() {
     setIsOpen = _useState6[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var sendAnalyticsEvent = function sendAnalyticsEvent() {
+  var sendWarningModalViewedEvent = function sendWarningModalViewedEvent() {
     createAnalyticsEvent({
-      action: 'shown',
-      actionSubject: 'warningModal',
-      actionSubjectId: 'linkSafetyWarning',
-      eventType: 'operational'
+      action: 'viewed',
+      actionSubject: 'linkSafetyWarningModal',
+      eventType: 'screen',
+      name: 'linkSafetyWarningModal'
+    }).fire(ANALYTICS_CHANNEL);
+  };
+  var sendContinueClickedEvent = function sendContinueClickedEvent() {
+    createAnalyticsEvent({
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: 'linkSafetyWarningModalContinue',
+      eventType: 'ui',
+      screen: 'linkSafetyWarningModal'
     }).fire(ANALYTICS_CHANNEL);
   };
 
   /**
    * 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 isLinkSafe = function isLinkSafe(event, href) {
     if (!href) {
-      return;
+      return true;
     }
     var anchor = event.currentTarget;
     var linkText = anchor.innerText;
     var normalisedUrlFromLinkText = normalizeUrl(linkText);
     if (!normalisedUrlFromLinkText) {
-      return;
+      return true;
     }
     var anchorLinkRegex = new RegExp(/^#/im);
     var isAnchorLink = anchorLinkRegex.test(linkText);
     if (isAnchorLink) {
-      return;
+      return true;
     }
     var relativeLinkRegex = new RegExp(/^\//im);
     var isRelativeHrefLink = relativeLinkRegex.test(href);
     if (isRelativeHrefLink) {
-      return;
+      return true;
     }
     var hrefUrl = new URL(href, window.location.origin);
     var linkTextUrl = new URL(normalisedUrlFromLinkText, hrefUrl.origin);
@@ -62,12 +71,18 @@ export var useLinkWarningModal = function useLinkWarningModal() {
     }
     var areEquivalentLinks = linkTextUrl.hostname === hrefUrl.hostname && linkTextUrl.pathname === hrefUrl.pathname && linkTextUrl.search === hrefUrl.search && linkTextUrl.username === hrefUrl.username && linkTextUrl.password === hrefUrl.password && areProtocolsEquivalent;
     if (!areEquivalentLinks) {
-      event.preventDefault();
-      setUnsafeLinkText(linkText);
-      href && setUrl(href);
-      setIsOpen(true);
-      sendAnalyticsEvent();
+      return false;
     }
+    return true;
+  };
+  var showSafetyWarningModal = function showSafetyWarningModal(event, href) {
+    event.preventDefault();
+    var anchor = event.currentTarget;
+    var linkText = anchor.innerText;
+    setUnsafeLinkText(linkText);
+    href && setUrl(href);
+    setIsOpen(true);
+    sendWarningModalViewedEvent();
   };
   var onClose = function onClose() {
     setIsOpen(false);
@@ -76,14 +91,16 @@ export var useLinkWarningModal = function useLinkWarningModal() {
   };
   var onContinue = function onContinue() {
     onClose();
-    url && window.location.assign(url);
+    sendContinueClickedEvent();
+    url && window.open(url, '_blank', 'noopener noreferrer');
   };
   return {
-    checkLinkSafety: checkLinkSafety,
-    unsafeLinkText: unsafeLinkText,
+    isLinkSafe: isLinkSafe,
+    isOpen: isOpen,
     onClose: onClose,
     onContinue: onContinue,
-    isOpen: isOpen,
+    showSafetyWarningModal: showSafetyWarningModal,
+    unsafeLinkText: unsafeLinkText,
     url: url
   };
 };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
-  _excluded2 = ["checkLinkSafety"];
+  _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 import React from 'react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
@@ -9,6 +9,7 @@ import { withLinkClickedEvent } from '../../utils/analytics/click';
 import { LinkAnalyticsContext } from '../../utils/analytics/LinkAnalyticsContext';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 import LinkWarningModal from './LinkWarningModal';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,
@@ -25,7 +26,8 @@ var LinkUrl = function LinkUrl(_ref) {
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useLinkWarningModal = useLinkWarningModal(),
-    checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
+    isLinkSafe = _useLinkWarningModal.isLinkSafe,
+    showSafetyWarningModal = _useLinkWarningModal.showSafetyWarningModal,
     linkWarningModalProps = _objectWithoutProperties(_useLinkWarningModal, _excluded2);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinkAnalyticsContext, {
     url: href,
@@ -34,8 +36,25 @@ var LinkUrl = function LinkUrl(_ref) {
     "data-testid": testId,
     href: href,
     onClick: function onClick(e) {
-      checkSafety && checkLinkSafety(e, href);
-      _onClick && _onClick(e);
+      if (getBooleanFF('platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe')) {
+        if (!checkSafety) {
+          _onClick && _onClick(e);
+          return;
+        }
+
+        // Only call the onClick if the link is safe
+        if (isLinkSafe(e, href)) {
+          _onClick && _onClick(e);
+        } else {
+          showSafetyWarningModal(e, href);
+        }
+      } else {
+        if (checkSafety && !isLinkSafe(e, href)) {
+          showSafetyWarningModal(e, href);
+        }
+        // Call the onClick regardless of the link safety
+        _onClick && _onClick(e);
+      }
     }
   }, props), children)), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
 };

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.5.13",
+  "version": "26.5.14",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -149,6 +149,9 @@
     },
     "platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab": {
       "type": "boolean"
+    },
+    "platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",