@atlaskit/smart-card 26.39.0 → 26.41.0

package/dist/es2019/messages.js

@@ -536,5 +536,25 @@ export const messages = defineMessages({
     id: 'fabric.linking.forbidden_description_crossjoin',
     defaultMessage: 'Contact your admin to request access to {hostname}.',
     description: 'Informs the user that they must contact the site administrator for access.'
+  },
+  related_work_items_not_found: {
+    id: 'fabric.linking.related_work_items_not_found',
+    defaultMessage: 'This link is not mentioned anywhere else.',
+    description: 'Informs the user that there are no related resources for a given url'
+  },
+  last_mentioned_in: {
+    id: 'fabric.linking.last_mentioned_in',
+    defaultMessage: 'Last mentioned in',
+    description: 'Informs the user about where the resource was last mentioned in'
+  },
+  related: {
+    id: 'fabric.linking.related',
+    defaultMessage: 'Related',
+    description: 'Informs the user about related resources'
+  },
+  generic_error_message: {
+    id: 'fabric.linking.generic_error_message',
+    defaultMessage: 'An error occurred',
+    description: 'A generic error message to the user'
   }
 });

package/dist/es2019/state/hooks/use-related-urls/index.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+const useRelatedUrls = () => {
+  const {
+    connections
+  } = useSmartLinkContext();
+  const clientExt = useSmartLinkClientExtension(connections.client);
+  return useCallback(async url => {
+    return await clientExt.relatedUrls(url);
+  }, [clientExt]);
+};
+export default useRelatedUrls;

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.39.0"
+  packageVersion: "26.41.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/index.js

@@ -6,4 +6,5 @@ export { default as TitleBlock } from './title-block';
 export { default as CustomBlock } from './block';
 
 // Internal components to be used within @atlaskit/smart-card only.
-export { default as InternalFooterBlock } from './footer-block/resolved';
+export { default as InternalFooterBlock } from './footer-block/resolved';
+export { default as RelatedUrlsBlock } from './related-urls-block';

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

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '../../../../../../messages';
+import Text from '../../../elements/text';
+import Block from '../../block';
+export const RelatedUrlsBlockErroredView = ({
+  testId,
+  ...blockProps
+}) => /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  testId: testId
+}), /*#__PURE__*/React.createElement(Text, {
+  message: {
+    descriptor: messages.generic_error_message
+  }
+}));

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/errored/types.js

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

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

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { di } from 'react-magnetic-di';
+import { css } from '@emotion/react';
+import useRelatedUrls from '../../../../../state/hooks/use-related-urls';
+import { RelatedUrlsBlockErroredView } from './errored';
+import { RelatedUrlsResolvedView } from './resolved';
+import { RelatedUrlsBlockResolvingView } from './resolving';
+/**
+ * Represents a block to display related resources of a url
+ */
+const RelatedUrlsBlock = ({
+  testId = 'smart-block-related-urls',
+  url,
+  renderers,
+  ...blockProps
+}) => {
+  const [loadingRelatedUrls, setLoadingRelatedUrls] = useState(true);
+  const [err, setErr] = useState();
+  const [relatedUrls, setRelatedUrls] = useState();
+  const getRelatedUrls = useRelatedUrls();
+  useEffect(() => {
+    const fetchRelatedUrls = async () => {
+      try {
+        const relUrls = await getRelatedUrls(url);
+        setRelatedUrls(relUrls);
+      } catch (error) {
+        setErr(error);
+      }
+      setLoadingRelatedUrls(false);
+    };
+    fetchRelatedUrls();
+  }, [getRelatedUrls, url]);
+  if (loadingRelatedUrls) {
+    return /*#__PURE__*/React.createElement(RelatedUrlsBlockResolvingView, _extends({
+      testId: `${testId}-resolving-view`
+    }, blockProps));
+  }
+  if (relatedUrls) {
+    return /*#__PURE__*/React.createElement(RelatedUrlsResolvedView, _extends({
+      renderers: renderers,
+      overrideCss: css`
+          min-height: 1.55rem;
+        `,
+      testId: `${testId}-resolved-view`,
+      relatedUrlsResponse: relatedUrls
+    }, blockProps));
+  }
+  return /*#__PURE__*/React.createElement(RelatedUrlsBlockErroredView, _extends({
+    err: err,
+    testId: `${testId}-errored-view`
+  }, blockProps));
+};
+export default RelatedUrlsBlock;

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '../../../../../../messages';
+import Block from '../../block';
+import RelatedUrlsList from './related-url-list';
+export const RelatedUrlsResolvedView = ({
+  relatedUrlsResponse: {
+    resolvedResults
+  },
+  renderers,
+  testId,
+  initializeOpened,
+  ...blockProps
+}) => {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: testId
+  }), resolvedResults && /*#__PURE__*/React.createElement(RelatedUrlsList, {
+    testId: `${testId}-list`,
+    renderers: renderers,
+    initializeOpened: initializeOpened,
+    title: messages.last_mentioned_in,
+    resolvedResults: resolvedResults
+  }));
+};

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -0,0 +1,61 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { css } from '@emotion/react';
+import { messages } from '../../../../../../../messages';
+import { getFormattedMessageAsString } from '../../../../../components/utils';
+import Text from '../../../../elements/text';
+import RelatedUrlItem from './related-url-item';
+const RelatedUrlList = ({
+  resolvedResults,
+  title,
+  renderers,
+  testId,
+  initializeOpened
+}) => {
+  const [isOpen, setIsOpen] = useState(initializeOpened);
+  const chevronClickHandler = useCallback(() => setIsOpen(!isOpen), [isOpen]);
+  const ChevronComponent = isOpen ? ChevronUpIcon : ChevronDownIcon;
+  const intl = useIntl();
+  const resolvedResultsStack = useMemo(() => {
+    return /*#__PURE__*/React.createElement(Stack, {
+      space: "space.050",
+      testId: `${testId}-items-wrapper`
+    }, resolvedResults.map((resolvedResults, idx) => /*#__PURE__*/React.createElement(RelatedUrlItem, {
+      testId: `${testId}-item`,
+      key: idx,
+      results: resolvedResults,
+      renderers: renderers
+    })));
+  }, [renderers, resolvedResults, testId]);
+  return resolvedResults.length > 0 ? /*#__PURE__*/React.createElement(Stack, {
+    testId: testId,
+    xcss: xcss({
+      width: '100%'
+    })
+  }, /*#__PURE__*/React.createElement(Box, {
+    onClick: chevronClickHandler,
+    testId: `${testId}-expand-title`
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    spread: "space-between"
+  }, /*#__PURE__*/React.createElement(Text, {
+    overrideCss: css`
+              font-weight: ${"var(--ds-font-weight-medium, 500)"};
+            `,
+    message: {
+      descriptor: title
+    }
+  }), /*#__PURE__*/React.createElement(ChevronComponent, {
+    label: getFormattedMessageAsString(intl, title),
+    size: 'medium'
+  }))), isOpen && resolvedResultsStack) : /*#__PURE__*/React.createElement(Text, {
+    testId: testId,
+    message: {
+      descriptor: messages.related_work_items_not_found
+    }
+  });
+};
+export default RelatedUrlList;

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { Inline } from '@atlaskit/primitives';
+import { SmartLinkSize } from '../../../../../../../../constants';
+import extractFlexibleUiContext from '../../../../../../../../extractors/flexible';
+import Icon from '../../../../../elements/icon';
+import Link from '../../../../../elements/link';
+const RelatedUrlItem = ({
+  results,
+  renderers,
+  testId
+}) => {
+  const flexibleDataContext = useMemo(() => extractFlexibleUiContext({
+    response: results,
+    renderers
+  }), [renderers, results]);
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.050",
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Icon, _extends({}, flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.linkIcon, {
+    testId: `${testId}-icon`,
+    size: SmartLinkSize.Small
+  })), /*#__PURE__*/React.createElement(Link, {
+    testId: `${testId}-link`,
+    text: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.title,
+    url: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.url,
+    size: SmartLinkSize.Small,
+    maxLines: 1
+  }));
+};
+export default RelatedUrlItem;

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.js

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

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import LoadingSkeleton from '../../../common/loading-skeleton';
+import Block from '../../block';
+export const RelatedUrlsBlockResolvingView = ({
+  testId,
+  ...blockProps
+}) => /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  testId: testId
+}), /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  height: 1.55,
+  width: 22
+}));

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
@@ -52,7 +52,8 @@ const HoverCardResolvedView = ({
   cardState,
   cardActions = [],
   onActionClick,
-  extensionKey
+  extensionKey,
+  url
 }) => {
   var _cardState$details;
   const canBeDatasource = getCanBeDatasource(cardState.details);
@@ -117,6 +118,9 @@ const HoverCardResolvedView = ({
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
     maxLines: 1
+  }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
+    url: url,
+    size: SmartLinkSize.Small
   }), /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,

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.39.0",
+  packageVersion: "26.41.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/messages.js

@@ -536,5 +536,25 @@ export var messages = defineMessages({
     id: 'fabric.linking.forbidden_description_crossjoin',
     defaultMessage: 'Contact your admin to request access to {hostname}.',
     description: 'Informs the user that they must contact the site administrator for access.'
+  },
+  related_work_items_not_found: {
+    id: 'fabric.linking.related_work_items_not_found',
+    defaultMessage: 'This link is not mentioned anywhere else.',
+    description: 'Informs the user that there are no related resources for a given url'
+  },
+  last_mentioned_in: {
+    id: 'fabric.linking.last_mentioned_in',
+    defaultMessage: 'Last mentioned in',
+    description: 'Informs the user about where the resource was last mentioned in'
+  },
+  related: {
+    id: 'fabric.linking.related',
+    defaultMessage: 'Related',
+    description: 'Informs the user about related resources'
+  },
+  generic_error_message: {
+    id: 'fabric.linking.generic_error_message',
+    defaultMessage: 'An error occurred',
+    description: 'A generic error message to the user'
   }
 });

package/dist/esm/state/hooks/use-related-urls/index.js

@@ -0,0 +1,30 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback } from 'react';
+import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+var useRelatedUrls = function useRelatedUrls() {
+  var _useSmartLinkContext = useSmartLinkContext(),
+    connections = _useSmartLinkContext.connections;
+  var clientExt = useSmartLinkClientExtension(connections.client);
+  return useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return clientExt.relatedUrls(url);
+          case 2:
+            return _context.abrupt("return", _context.sent);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [clientExt]);
+};
+export default useRelatedUrls;

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.39.0"
+  packageVersion: "26.41.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);