@atlaskit/link-datasource 1.24.6 → 1.24.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.24.7
+
+### Patch Changes
+
+- [#83952](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83952) [`300149437193`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/300149437193) - [ux] Make smart-links rendered non-word-wrapped (truncated) by default and only be word-wrapped when user chooses it
+
 ## 1.24.6
 
 ### Patch Changes

package/dist/cjs/ui/common/modal/content-container/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentContainer = void 0;
+var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _issueLikeTable = require("../../../issue-like-table");
+/** @jsx jsx */
+
+var contentContainerStyles = (0, _primitives.xcss)({
+  display: 'grid',
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
+  backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundPosition,
+  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+var tableContainerStyles = (0, _primitives.xcss)({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
+});
+var ContentContainer = exports.ContentContainer = function ContentContainer(_ref) {
+  var children = _ref.children,
+    withTableBorder = _ref.withTableBorder;
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: [contentContainerStyles, withTableBorder && tableContainerStyles]
+  }, children);
+};

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -16,33 +16,20 @@ var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _getAvailableSites = require("../../../services/getAvailableSites");
 var _noInstances = require("../../common/error-state/no-instances");
 var _initialStateView = require("../../common/initial-state-view");
 var _basicSearchInput = require("../../common/modal/basic-search-input");
+var _contentContainer = require("../../common/modal/content-container");
 var _siteSelector = require("../../common/modal/site-selector");
-var _issueLikeTable = require("../../issue-like-table");
 var _confluenceSearchInitialStateSvg = require("./confluence-search-initial-state-svg");
 var _messages = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
 
-var contentContainerStyles = (0, _primitives.xcss)({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
-  backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
   var initialParameters = props.parameters,
     onCancel = props.onCancel;
@@ -131,9 +118,7 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     searchTerm: searchTerm,
     placeholder: _messages.confluenceSearchModalMessages.searchLabel,
     fullWidth: true
-  }), (0, _react2.jsx)(_primitives.Box, {
-    xcss: contentContainerStyles
-  }, (0, _react2.jsx)(_initialStateView.InitialStateView, {
+  }), (0, _react2.jsx)(_contentContainer.ContentContainer, null, (0, _react2.jsx)(_initialStateView.InitialStateView, {
     icon: (0, _react2.jsx)(_confluenceSearchInitialStateSvg.ConfluenceSearchInitialStateSVG, null),
     title: _messages.confluenceSearchModalMessages.initialViewSearchTitle,
     description: _messages.confluenceSearchModalMessages.initialViewSearchDescription

package/dist/cjs/ui/issue-like-table/index.js

@@ -85,6 +85,8 @@ var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.defaul
 }), (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)('&:last-child')), {
   borderRight: 0,
   paddingRight: "var(--ds-space-100, 8px)"
+}), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
 }), _styled$td));
 var tableContainerStyles = (0, _react2.css)({
   borderRadius: 'inherit',

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -42,6 +42,7 @@ var _noInstances = require("../../common/error-state/no-instances");
 var _noResults = require("../../common/error-state/no-results");
 var _initialStateView = require("../../common/initial-state-view");
 var _messages2 = require("../../common/initial-state-view/messages");
+var _contentContainer = require("../../common/modal/content-container");
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
 var _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
@@ -55,22 +56,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
-var tableContainerStyles = (0, _react2.css)({
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
-});
-var contentContainerStyles = (0, _react2.css)({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
-  backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 var placeholderSmartLinkStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -475,8 +460,8 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)("div", {
-      css: [tableContainerStyles, contentContainerStyles]
+    return (0, _react2.jsx)(_contentContainer.ContentContainer, {
+      withTableBorder: true
     }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "jira-datasource-table",
       status: status,
@@ -536,8 +521,8 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       return (0, _react2.jsx)(_noResults.NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return (0, _react2.jsx)("div", {
-        css: [contentContainerStyles, !!jql && tableContainerStyles]
+      return (0, _react2.jsx)(_contentContainer.ContentContainer, {
+        withTableBorder: !!jql
       }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
         testId: "jira-datasource-modal--empty-state"
       }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {

package/dist/es2019/ui/common/modal/content-container/index.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
+const contentContainerStyles = xcss({
+  display: 'grid',
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+const tableContainerStyles = xcss({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: `1px solid ${`var(--ds-border, ${N40})`}`
+});
+export const ContentContainer = ({
+  children,
+  withTableBorder
+}) => {
+  return jsx(Box, {
+    xcss: [contentContainerStyles, withTableBorder && tableContainerStyles]
+  }, children);
+};

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -5,29 +5,16 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
-import { N40 } from '@atlaskit/theme/colors';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import i18nEN from '../../../i18n/en';
 import { getAvailableSites } from '../../../services/getAvailableSites';
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { InitialStateView } from '../../common/initial-state-view';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
-const contentContainerStyles = xcss({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 export const ConfluenceSearchConfigModal = props => {
   const {
     parameters: initialParameters,
@@ -86,9 +73,7 @@ export const ConfluenceSearchConfigModal = props => {
     searchTerm: searchTerm,
     placeholder: confluenceSearchModalMessages.searchLabel,
     fullWidth: true
-  }), jsx(Box, {
-    xcss: contentContainerStyles
-  }, jsx(InitialStateView, {
+  }), jsx(ContentContainer, null, jsx(InitialStateView, {
     icon: jsx(ConfluenceSearchInitialStateSVG, null),
     title: confluenceSearchModalMessages.initialViewSearchTitle,
     description: confluenceSearchModalMessages.initialViewSearchDescription

package/dist/es2019/ui/issue-like-table/index.js

@@ -76,6 +76,11 @@ const TableCell = styled.td({
   [`${withTablePluginBodyPrefix('&:last-child')}`]: {
     borderRight: 0,
     paddingRight: "var(--ds-space-100, 8px)"
+  },
+  // Inline smart links are pretty opinionated about word-wrapping.
+  // We want it to be controlled by user, so we make it overflow and truncate by default.
+  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
+    whiteSpace: 'unset'
   }
 });
 const tableContainerStyles = css({

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -10,7 +10,7 @@ import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
-import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -30,8 +30,9 @@ import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
 import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
@@ -39,22 +40,6 @@ import { JiraSearchContainer } from '../jira-search-container';
 import { JiraDisplayViewDropDown } from './jira-display-view-dropdown/jira-display-view-drop-down';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-const tableContainerStyles = css({
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  border: `1px solid ${`var(--ds-border, ${N40})`}`
-});
-const contentContainerStyles = css({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,
   borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -424,8 +409,8 @@ export const PlainJiraIssuesConfigModal = props => {
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
-  const issueLikeDataTableView = useMemo(() => jsx("div", {
-    css: [tableContainerStyles, contentContainerStyles]
+  const issueLikeDataTableView = useMemo(() => jsx(ContentContainer, {
+    withTableBorder: true
   }, jsx(IssueLikeDataTableView, {
     testId: "jira-datasource-table",
     status: status,
@@ -484,8 +469,8 @@ export const PlainJiraIssuesConfigModal = props => {
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx("div", {
-        css: [contentContainerStyles, !!jql && tableContainerStyles]
+      return jsx(ContentContainer, {
+        withTableBorder: !!jql
       }, !!jql ? jsx(EmptyState, {
         testId: `jira-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {

package/dist/esm/ui/common/modal/content-container/index.js

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
+var contentContainerStyles = xcss({
+  display: 'grid',
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+var tableContainerStyles = xcss({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
+});
+export var ContentContainer = function ContentContainer(_ref) {
+  var children = _ref.children,
+    withTableBorder = _ref.withTableBorder;
+  return jsx(Box, {
+    xcss: [contentContainerStyles, withTableBorder && tableContainerStyles]
+  }, children);
+};

package/dist/esm/ui/confluence-search-modal/modal/index.js

@@ -9,29 +9,16 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
-import { N40 } from '@atlaskit/theme/colors';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import i18nEN from '../../../i18n/en';
 import { getAvailableSites } from '../../../services/getAvailableSites';
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { InitialStateView } from '../../common/initial-state-view';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
-var contentContainerStyles = xcss({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
   var initialParameters = props.parameters,
     onCancel = props.onCancel;
@@ -120,9 +107,7 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     searchTerm: searchTerm,
     placeholder: confluenceSearchModalMessages.searchLabel,
     fullWidth: true
-  }), jsx(Box, {
-    xcss: contentContainerStyles
-  }, jsx(InitialStateView, {
+  }), jsx(ContentContainer, null, jsx(InitialStateView, {
     icon: jsx(ConfluenceSearchInitialStateSVG, null),
     title: confluenceSearchModalMessages.initialViewSearchTitle,
     description: confluenceSearchModalMessages.initialViewSearchDescription

package/dist/esm/ui/issue-like-table/index.js

@@ -78,6 +78,8 @@ var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "".conca
 }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
   borderRight: 0,
   paddingRight: "var(--ds-space-100, 8px)"
+}), _defineProperty(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
 }), _styled$td));
 var tableContainerStyles = css({
   borderRadius: 'inherit',

package/dist/esm/ui/jira-issues-modal/modal/index.js

@@ -17,7 +17,7 @@ import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
-import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -37,8 +37,9 @@ import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
 import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
@@ -46,22 +47,6 @@ import { JiraSearchContainer } from '../jira-search-container';
 import { JiraDisplayViewDropDown } from './jira-display-view-dropdown/jira-display-view-drop-down';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-var tableContainerStyles = css({
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
-});
-var contentContainerStyles = css({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 var placeholderSmartLinkStyles = css({
   backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -466,8 +451,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
   var issueLikeDataTableView = useMemo(function () {
-    return jsx("div", {
-      css: [tableContainerStyles, contentContainerStyles]
+    return jsx(ContentContainer, {
+      withTableBorder: true
     }, jsx(IssueLikeDataTableView, {
       testId: "jira-datasource-table",
       status: status,
@@ -527,8 +512,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx("div", {
-        css: [contentContainerStyles, !!jql && tableContainerStyles]
+      return jsx(ContentContainer, {
+        withTableBorder: !!jql
       }, !!jql ? jsx(EmptyState, {
         testId: "jira-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {

package/dist/types/ui/common/modal/content-container/index.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+export interface ContentContainerProps {
+    children: ReactNode;
+    withTableBorder?: boolean;
+}
+export declare const ContentContainer: ({ children, withTableBorder, }: ContentContainerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/content-container/index.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+export interface ContentContainerProps {
+    children: ReactNode;
+    withTableBorder?: boolean;
+}
+export declare const ContentContainer: ({ children, withTableBorder, }: ContentContainerProps) => jsx.JSX.Element;

package/examples-helpers/mockSmartLinkData.ts

@@ -64,4 +64,48 @@ export const mocks = {
       url: 'https://product-fabric.atlassian.net/browse/EDM-5941',
     },
   } as JsonLd.Response,
+  notFound: {
+    meta: {
+      visibility: 'not_found',
+      access: 'forbidden',
+      auth: [],
+      definitionId: 'd1',
+      key: 'object-provider',
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/',
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url',
+    },
+  } as JsonLd.Response,
+  forbidden: {
+    meta: {
+      visibility: 'restricted',
+      access: 'forbidden',
+      auth: [
+        {
+          key: 'some-flow',
+          displayName: 'Flow',
+          url: 'https://outbound-auth/flow',
+        },
+      ],
+      definitionId: 'd1',
+      key: 'object-provider',
+    },
+    data: {
+      '@context': {
+        '@vocab': 'https://www.w3.org/ns/activitystreams#',
+        atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+        schema: 'http://schema.org/',
+      },
+      '@type': 'Object',
+      name: 'I love cheese',
+      url: 'https://some.url',
+    },
+  } as JsonLd.Response,
 };

package/examples-helpers/smartLinkCustomClient.ts

@@ -8,27 +8,38 @@ import { mocks } from './mockSmartLinkData';
 
 const jqlUrlRegExp = /.+[jql=].+/;
 
-class SmartLinkClient extends CardClient {
-  fetchData(url: string): Promise<JsonLd.Response> {
-    switch (url) {
-      case 'https://product-fabric.atlassian.net/browse/EDM-5941':
-      case 'https://product-fabric.atlassian.net/browse/EDM-5591':
-        return Promise.resolve(mocks.resolved);
-      case 'https://link-that-does-not-resolve.com':
-        return Promise.reject(`Can't resolve from ${url}`);
-      case 'https://link-that-is-unsupported.com':
-        throw new APIError(
-          'fatal',
-          new URL(url).hostname,
-          'received unsupported error',
-          'ResolveUnsupportedError',
-        );
-      case jqlUrlRegExp.test(url) ? url : undefined:
-        return Promise.resolve(mockJqlSmartLinkData.resolved);
-      default:
-        return Promise.resolve(mocks.unauthorized);
-    }
+const mockedFetch = (url: string): Promise<JsonLd.Response> => {
+  switch (url) {
+    case 'https://product-fabric.atlassian.net/browse/EDM-5941':
+    case 'https://product-fabric.atlassian.net/browse/EDM-5591':
+      return Promise.resolve(mocks.resolved);
+    case 'https://link-that-does-not-resolve.com':
+      return Promise.reject(`Can't resolve from ${url}`);
+    case 'https://link-that-is-still-resolving.com/long-url/very-very-very-very-very-very-very-long':
+      return new Promise(() => {});
+    case 'https://link-that-is-unauthorized.com':
+      return Promise.resolve(mocks.unauthorized);
+    case 'https://link-that-is-not-found.com/long':
+      return Promise.resolve(mocks.notFound);
+    case 'https://link-that-is-forbidden.com':
+      return Promise.resolve(mocks.forbidden);
+    case 'https://link-that-is-unsupported.com':
+      throw new APIError(
+        'fatal',
+        new URL(url).hostname,
+        'received unsupported error',
+        'ResolveUnsupportedError',
+      );
+    case jqlUrlRegExp.test(url) ? url : undefined:
+      return Promise.resolve(mockJqlSmartLinkData.resolved);
+    default:
+      return Promise.resolve(mocks.unauthorized);
   }
+};
+
+class SmartLinkClient extends CardClient {
+  prefetchData = mockedFetch;
+  fetchData = mockedFetch;
 }
 
 export default SmartLinkClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.24.6",
+  "version": "1.24.7",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"