@atlaskit/smart-card 26.38.1 → 26.40.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.40.0
+
+### Minor Changes
+
+- [#42280](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42280) [`df99143a991`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df99143a991) - [ux] Update block card not found view to improve cross join (behind feature flag)
+
+## 26.39.0
+
+### Minor Changes
+
+- [#42180](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42180) [`80f857d75db`](https://bitbucket.org/atlassian/atlassian-frontend/commits/80f857d75db) - [ux] Add hideIcon prop to resolved, resolving, and error states for TitleBlock
+
 ## 26.38.1
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1"
+  packageVersion: "26.40.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -76,6 +76,7 @@ var _ErroredView = require("./views/ErroredView");
 var _FlexibleResolvedView = _interopRequireDefault(require("./views/flexible/FlexibleResolvedView"));
 var _FlexibleUnauthorisedView = _interopRequireDefault(require("./views/flexible/FlexibleUnauthorisedView"));
 var _FlexibleNotFoundView = _interopRequireDefault(require("./views/flexible/FlexibleNotFoundView"));
+var _FlexibleNotFoundViewOld = _interopRequireDefault(require("./views/flexible/FlexibleNotFoundViewOld"));
 var _FlexibleForbiddenView = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenView"));
 var _FlexibleForbiddenViewOld = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenViewOld"));
 var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/FlexibleErroredView"));
@@ -150,7 +151,9 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
+        return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join') ? (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : (0, _react.jsx)(_FlexibleNotFoundViewOld.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':

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

@@ -1,20 +1,25 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _messages = require("../../../../messages");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
+var _linkExtractors = require("@atlaskit/link-extractors");
 var _colors = require("@atlaskit/theme/colors");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../../messages");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _excluded = ["testId"];
+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; }
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
@@ -22,20 +27,38 @@ var _excluded = ["testId"];
  * @see FlexibleCardProps
  */
 var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
+  var _cardState$details2;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var cardState = props.cardState;
+  var product = (0, _react.useMemo)(function () {
+    var _cardState$details, _provider$text;
+    var provider = (0, _linkExtractors.extractProvider)(cardState === null || cardState === void 0 || (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data);
+    return (_provider$text = provider === null || provider === void 0 ? void 0 : provider.text) !== null && _provider$text !== void 0 ? _provider$text : '';
+  }, [cardState === null || cardState === void 0 || (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  var title = (0, _react.useMemo)(function () {
+    return intl.formatMessage(_messages.messages.not_found_title_crossjoin, {
+      product: product
+    });
+  }, [intl, product]);
+  var description = (0, _react.useMemo)(function () {
+    return {
+      descriptor: _messages.messages.not_found_description_crossjoin
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
-    testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
-    label: "not-found-warning-icon",
+    showPreview: true,
+    testId: testId,
+    title: title
+  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
+    label: "not-found-lock-icon",
     size: "small",
-    primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
-    testId: "".concat(testId, "-warning-icon")
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+    testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
-    message: {
-      descriptor: _messages.messages.not_found_description
-    },
+    message: description,
     testId: "".concat(testId, "-message")
   }));
 };

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundViewOld.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 _messages = require("../../../../messages");
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _colors = require("@atlaskit/theme/colors");
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _excluded = ["testId"];
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleNotFoundViewOld = function FlexibleNotFoundViewOld(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "not-found-warning-icon",
+    size: "small",
+    primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages.not_found_description
+    },
+    testId: "".concat(testId, "-message")
+  }));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleNotFoundView
+ */
+var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleNotFoundViewOld);

package/dist/cjs/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -32,6 +32,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     ui: _utils.FlexibleCardUiOptions,
     url: url
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, (0, _utils.getTitleBlockOptions)(), {
+    hideIcon: !!title,
     text: title
   })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, (0, _utils.getFooterBlockOptions)(), {
     actions: actions,

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -17,7 +17,7 @@ var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _token = require("../../../../../../utils/token");
-var _excluded = ["actionGroup", "retry", "position", "testId", "title"];
+var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _token.tokens.errorMessageHover);
@@ -39,6 +39,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     position = _ref.position,
     testId = _ref.testId,
     title = _ref.title,
+    hideIcon = _ref.hideIcon,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _ref2 = retry || {},
     descriptor = _ref2.descriptor,
@@ -49,7 +50,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var hasAction = onClick !== undefined;
   return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
-  }), (0, _react2.jsx)(_elements.LinkIcon, {
+  }), !hideIcon && (0, _react2.jsx)(_elements.LinkIcon, {
     position: position
   }), title, descriptor && (0, _react2.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -19,7 +19,7 @@ var _errored = _interopRequireDefault(require("./errored"));
 var _resolving = _interopRequireDefault(require("./resolving"));
 var _actionGroup = _interopRequireDefault(require("../action-group"));
 var _elements = require("../../elements");
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition", "hideIcon"];
 var _templateObject, _templateObject2;
 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; }
@@ -75,6 +75,8 @@ var TitleBlock = function TitleBlock(_ref) {
     theme = _ref.theme,
     hideRetry = _ref.hideRetry,
     metadataPosition = _ref.metadataPosition,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (hideRetry && props.retry) {
     delete props.retry;
@@ -116,7 +118,8 @@ var TitleBlock = function TitleBlock(_ref) {
     overrideCss: combinedCss,
     testId: testId,
     title: title,
-    metadataPosition: metadataPosition
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon
   }));
 };
 var _default = exports.default = TitleBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -33,8 +33,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     text = _ref.text,
     title = _ref.title,
     metadataPosition = _ref.metadataPosition,
-    _ref$hideIcon = _ref.hideIcon,
-    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    hideIcon = _ref.hideIcon,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -13,7 +13,7 @@ var _block = _interopRequireDefault(require("../../block"));
 var _constants = require("../../../../../../constants");
 var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
 var _utils = require("../../../utils");
-var _excluded = ["actionGroup", "testId", "title"];
+var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
 /** @jsx jsx */
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
@@ -25,6 +25,7 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
     testId = _ref.testId,
     title = _ref.title,
+    hideIcon = _ref.hideIcon,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
@@ -32,7 +33,7 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var iconStyles = (0, _utils.getIconSizeStyles)(iconWidth);
   return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), (0, _react2.jsx)("span", {
+  }), !hideIcon && (0, _react2.jsx)("span", {
     css: iconStyles,
     "data-testid": "".concat(testId, "-icon")
   }, (0, _react2.jsx)(_loadingSkeleton.default, {

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1",
+  packageVersion: "26.40.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1"
+  packageVersion: "26.40.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -17,6 +17,7 @@ import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
 import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
+import FlexibleNotFoundViewOld from './views/flexible/FlexibleNotFoundViewOld';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
 import FlexibleErroredView from './views/flexible/FlexibleErroredView';
@@ -91,7 +92,9 @@ export const BlockCard = ({
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : jsx(FlexibleNotFoundViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { messages } from '../../../../messages';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import LockIcon from '@atlaskit/icon/glyph/lock';
+import { extractProvider } from '@atlaskit/link-extractors';
 import { R300 } from '@atlaskit/theme/colors';
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../../../messages';
 import Text from '../../../FlexibleCard/components/elements/text';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -16,17 +18,35 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
 const FlexibleNotFoundView = ({
   testId = 'smart-block-not-found-view',
   ...props
-}) => /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
-  testId: testId
-}), /*#__PURE__*/React.createElement(WarningIcon, {
-  label: "not-found-warning-icon",
-  size: "small",
-  primaryColor: `var(--ds-icon-warning, ${R300})`,
-  testId: `${testId}-warning-icon`
-}), /*#__PURE__*/React.createElement(Text, {
-  message: {
-    descriptor: messages.not_found_description
-  },
-  testId: `${testId}-message`
-}));
+}) => {
+  var _cardState$details2;
+  const intl = useIntl();
+  const {
+    cardState
+  } = props;
+  const product = useMemo(() => {
+    var _cardState$details, _provider$text;
+    const provider = extractProvider(cardState === null || cardState === void 0 ? void 0 : (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data);
+    return (_provider$text = provider === null || provider === void 0 ? void 0 : provider.text) !== null && _provider$text !== void 0 ? _provider$text : '';
+  }, [cardState === null || cardState === void 0 ? void 0 : (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  const title = useMemo(() => intl.formatMessage(messages.not_found_title_crossjoin, {
+    product
+  }), [intl, product]);
+  const description = useMemo(() => ({
+    descriptor: messages.not_found_description_crossjoin
+  }), []);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    showPreview: true,
+    testId: testId,
+    title: title
+  }), /*#__PURE__*/React.createElement(LockIcon, {
+    label: "not-found-lock-icon",
+    size: "small",
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: description,
+    testId: `${testId}-message`
+  }));
+};
 export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

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

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '../../../../messages';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { R300 } from '@atlaskit/theme/colors';
+import Text from '../../../FlexibleCard/components/elements/text';
+import UnresolvedView from './unresolved-view';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+const FlexibleNotFoundViewOld = ({
+  testId = 'smart-block-not-found-view',
+  ...props
+}) => /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+  testId: testId
+}), /*#__PURE__*/React.createElement(WarningIcon, {
+  label: "not-found-warning-icon",
+  size: "small",
+  primaryColor: `var(--ds-icon-warning, ${R300})`,
+  testId: `${testId}-warning-icon`
+}), /*#__PURE__*/React.createElement(Text, {
+  message: {
+    descriptor: messages.not_found_description
+  },
+  testId: `${testId}-message`
+}));
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleNotFoundView
+ */
+export default withFlexibleUIBlockCardStyle(FlexibleNotFoundViewOld);

package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -25,6 +25,7 @@ const UnresolvedView = ({
   ui: FlexibleCardUiOptions,
   url: url
 }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
+  hideIcon: !!title,
   text: title
 })), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, getFooterBlockOptions(), {
   actions: actions,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -44,6 +44,7 @@ const TitleBlockErroredView = ({
   position,
   testId,
   title,
+  hideIcon,
   ...blockProps
 }) => {
   const {
@@ -57,7 +58,7 @@ const TitleBlockErroredView = ({
   const hasAction = onClick !== undefined;
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-errored-view`
-  }), jsx(LinkIcon, {
+  }), !hideIcon && jsx(LinkIcon, {
     position: position
   }), title, descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -66,6 +66,7 @@ const TitleBlock = ({
   theme,
   hideRetry,
   metadataPosition,
+  hideIcon = false,
   ...props
 }) => {
   if (hideRetry && props.retry) {
@@ -107,7 +108,8 @@ const TitleBlock = ({
     overrideCss: combinedCss,
     testId: testId,
     title: title,
-    metadataPosition: metadataPosition
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon
   }));
 };
 export default TitleBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -21,7 +21,7 @@ const TitleBlockResolvedView = ({
   text,
   title,
   metadataPosition,
-  hideIcon = false,
+  hideIcon,
   ...blockProps
 }) => {
   const metadataElements = renderElementItems(metadata);

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -17,6 +17,7 @@ const TitleBlockResolvingView = ({
   actionGroup,
   testId,
   title,
+  hideIcon,
   ...blockProps
 }) => {
   const {
@@ -26,7 +27,7 @@ const TitleBlockResolvingView = ({
   const iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
-  }), jsx("span", {
+  }), !hideIcon && jsx("span", {
     css: iconStyles,
     "data-testid": `${testId}-icon`
   }, jsx(LoadingSkeleton, {

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1",
+  packageVersion: "26.40.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1"
+  packageVersion: "26.40.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -17,6 +17,7 @@ import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
 import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
+import FlexibleNotFoundViewOld from './views/flexible/FlexibleNotFoundViewOld';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
 import FlexibleErroredView from './views/flexible/FlexibleErroredView';
@@ -90,7 +91,9 @@ export var BlockCard = function BlockCard(_ref) {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : jsx(FlexibleNotFoundViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["testId"];
-import React from 'react';
-import { messages } from '../../../../messages';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import LockIcon from '@atlaskit/icon/glyph/lock';
+import { extractProvider } from '@atlaskit/link-extractors';
 import { R300 } from '@atlaskit/theme/colors';
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../../../messages';
 import Text from '../../../FlexibleCard/components/elements/text';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -16,20 +18,38 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see FlexibleCardProps
  */
 var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
+  var _cardState$details2;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
+  var intl = useIntl();
+  var cardState = props.cardState;
+  var product = useMemo(function () {
+    var _cardState$details, _provider$text;
+    var provider = extractProvider(cardState === null || cardState === void 0 || (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data);
+    return (_provider$text = provider === null || provider === void 0 ? void 0 : provider.text) !== null && _provider$text !== void 0 ? _provider$text : '';
+  }, [cardState === null || cardState === void 0 || (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  var title = useMemo(function () {
+    return intl.formatMessage(messages.not_found_title_crossjoin, {
+      product: product
+    });
+  }, [intl, product]);
+  var description = useMemo(function () {
+    return {
+      descriptor: messages.not_found_description_crossjoin
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
-    testId: testId
-  }), /*#__PURE__*/React.createElement(WarningIcon, {
-    label: "not-found-warning-icon",
+    showPreview: true,
+    testId: testId,
+    title: title
+  }), /*#__PURE__*/React.createElement(LockIcon, {
+    label: "not-found-lock-icon",
     size: "small",
-    primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
-    testId: "".concat(testId, "-warning-icon")
+    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
+    testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
-    message: {
-      descriptor: messages.not_found_description
-    },
+    message: description,
     testId: "".concat(testId, "-message")
   }));
 };

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
+import React from 'react';
+import { messages } from '../../../../messages';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { R300 } from '@atlaskit/theme/colors';
+import Text from '../../../FlexibleCard/components/elements/text';
+import UnresolvedView from './unresolved-view';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleNotFoundViewOld = function FlexibleNotFoundViewOld(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "not-found-warning-icon",
+    size: "small",
+    primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.not_found_description
+    },
+    testId: "".concat(testId, "-message")
+  }));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleNotFoundView
+ */
+export default withFlexibleUIBlockCardStyle(FlexibleNotFoundViewOld);

package/dist/esm/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -26,6 +26,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     ui: FlexibleCardUiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
+    hideIcon: !!title,
     text: title
   })), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, getFooterBlockOptions(), {
     actions: actions,

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["actionGroup", "retry", "position", "testId", "title"];
+var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
@@ -32,6 +32,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     position = _ref.position,
     testId = _ref.testId,
     title = _ref.title,
+    hideIcon = _ref.hideIcon,
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = retry || {},
     descriptor = _ref2.descriptor,
@@ -42,7 +43,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var hasAction = onClick !== undefined;
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
-  }), jsx(LinkIcon, {
+  }), !hideIcon && jsx(LinkIcon, {
     position: position
   }), title, descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition", "hideIcon"];
 var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
@@ -65,6 +65,8 @@ var TitleBlock = function TitleBlock(_ref) {
     theme = _ref.theme,
     hideRetry = _ref.hideRetry,
     metadataPosition = _ref.metadataPosition,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     props = _objectWithoutProperties(_ref, _excluded);
   if (hideRetry && props.retry) {
     delete props.retry;
@@ -106,7 +108,8 @@ var TitleBlock = function TitleBlock(_ref) {
     overrideCss: combinedCss,
     testId: testId,
     title: title,
-    metadataPosition: metadataPosition
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon
   }));
 };
 export default TitleBlock;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -27,8 +27,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     text = _ref.text,
     title = _ref.title,
     metadataPosition = _ref.metadataPosition,
-    _ref$hideIcon = _ref.hideIcon,
-    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    hideIcon = _ref.hideIcon,
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var metadataElements = renderElementItems(metadata);
   var subtitleElements = renderElementItems(subtitle);

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actionGroup", "testId", "title"];
+var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -19,6 +19,7 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
     testId = _ref.testId,
     title = _ref.title,
+    hideIcon = _ref.hideIcon,
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
@@ -26,7 +27,7 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), jsx("span", {
+  }), !hideIcon && jsx("span", {
     css: iconStyles,
     "data-testid": "".concat(testId, "-icon")
   }, jsx(LoadingSkeleton, {

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.38.1",
+  packageVersion: "26.40.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/BlockCard/views/flexible/FlexibleNotFoundViewOld.d.ts

@@ -0,0 +1,8 @@
+import { FlexibleBlockCardProps } from './types';
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleNotFoundView
+ */
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleNotFoundViewOld.d.ts

@@ -0,0 +1,8 @@
+import { FlexibleBlockCardProps } from './types';
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleNotFoundView
+ */
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.38.1",
+  "version": "26.40.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-analytics": "^8.3.0",
-    "@atlaskit/link-client-extension": "^1.7.0",
+    "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/link-extractors": "^1.2.0",
     "@atlaskit/linking-common": "^4.12.0",
     "@atlaskit/linking-types": "^8.4.0",