@atlaskit/link-datasource 1.19.13 → 1.19.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-datasource
 
+## 1.19.15
+
+### Patch Changes
+
+- [#56962](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56962) [`b21600324544`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b21600324544) - [ux] Updated styling of datasource table in Assets Config Modal
+- Updated dependencies
+
+## 1.19.14
+
+### Patch Changes
+
+- [#57894](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57894) [`81bd6e9856b2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/81bd6e9856b2) - Fix flaky basic filter test.
+
 ## 1.19.13
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.19.13"
+  packageVersion: "1.19.15"
 };

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -32,7 +32,6 @@ var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _cmdbService = require("../../../services/cmdbService.utils");
 var _accessRequired = require("../../../ui/common/error-state/access-required");
 var _modalLoadingError = require("../../common/error-state/modal-loading-error");
-var _issueLikeTable = require("../../issue-like-table");
 var _searchContainer = require("../search-container");
 var _loadingState = require("../search-container/loading-state");
 var _messages = require("./messages");
@@ -41,17 +40,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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 modalBodyWrapperStyles = (0, _react2.css)({
-  display: 'grid',
-  height: '420px',
-  overflow: 'auto',
-  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
-  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 var modalBodyErrorWrapperStyles = (0, _react2.css)({
-  alignItems: 'center'
+  alignItems: 'center',
+  display: 'grid',
+  height: _renderAssetsContent.MODAL_HEIGHT
 });
 var AssetsModalTitle = (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
 var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
@@ -367,9 +359,9 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true,
     shouldCloseOnOverlayClick: false
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
-    css: [modalBodyWrapperStyles, errorState && modalBodyErrorWrapperStyles]
-  }, errorState ? renderErrorState() : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, errorState ? (0, _react2.jsx)("div", {
+    css: modalBodyErrorWrapperStyles
+  }, renderErrorState()) : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
@@ -384,7 +376,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
     modalRenderInstanceId: modalRenderInstanceId
-  }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
     onClick: onCancelClick,
     testId: 'asset-datasource-modal--cancel-button'

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RenderAssetsContent = void 0;
+exports.RenderAssetsContent = exports.MODAL_HEIGHT = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
@@ -14,16 +14,54 @@ var _issueLikeTable = require("../../../issue-like-table");
 var _initialStateView = require("./initial-state-view");
 /** @jsx jsx */
 
-// This is to prevent y scrollbar when initially fetching data
-var emptyStateOverrideStyles = (0, _react2.css)({
-  height: '420px',
+var MODAL_HEIGHT = exports.MODAL_HEIGHT = 420;
+
+// This is to prevent y scrollbar when showing table loading state
+var disableOverflowStyles = (0, _react2.css)({
   overflow: 'hidden'
 });
+var contentContainerStyles = (0, _react2.css)({
+  height: MODAL_HEIGHT,
+  display: 'grid',
+  overflow: 'auto'
+});
 var tableBordersStyles = (0, _react2.css)({
   border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
+  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
 });
+var RejectedView = function RejectedView() {
+  return (0, _react2.jsx)("div", {
+    css: [contentContainerStyles]
+  }, (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null));
+};
+var UnauthorizedView = function UnauthorizedView() {
+  return (0, _react2.jsx)("div", {
+    css: [contentContainerStyles]
+  }, (0, _react2.jsx)(_accessRequired.AccessRequired, null));
+};
+var EmptyView = function EmptyView() {
+  return (0, _react2.jsx)("div", {
+    css: [contentContainerStyles]
+  }, (0, _react2.jsx)(_initialStateView.InitialStateView, null));
+};
+var NoResultsView = function NoResultsView() {
+  return (0, _react2.jsx)("div", {
+    css: [contentContainerStyles]
+  }, (0, _react2.jsx)(_noResults.NoResults, null));
+};
+var LoadingView = function LoadingView() {
+  return (0, _react2.jsx)("div", {
+    css: [contentContainerStyles, contentContainerStyles, tableBordersStyles, disableOverflowStyles]
+  }, (0, _react2.jsx)(_issueLikeTable.EmptyState, {
+    testId: "assets-aql-datasource-modal--loading-state"
+  }));
+};
 var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
     responseItems = props.responseItems,
@@ -39,7 +77,7 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
-      css: tableBordersStyles
+      css: [contentContainerStyles, tableBordersStyles]
     }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "asset-datasource-table",
       status: status,
@@ -55,23 +93,17 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
   }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
-    return (0, _react2.jsx)("div", {
-      css: [tableBordersStyles, emptyStateOverrideStyles]
-    }, (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    }));
+    return (0, _react2.jsx)(LoadingView, null);
   } else if (status === 'rejected') {
-    return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+    return (0, _react2.jsx)(RejectedView, null);
   } else if (status === 'unauthorized') {
-    return (0, _react2.jsx)(_accessRequired.AccessRequired, null);
+    return (0, _react2.jsx)(UnauthorizedView, null);
   } else if (status === 'empty') {
-    return (0, _react2.jsx)(_initialStateView.InitialStateView, null);
+    return (0, _react2.jsx)(EmptyView, null);
   } else if (resolvedWithNoResults) {
-    return (0, _react2.jsx)(_noResults.NoResults, null);
+    return (0, _react2.jsx)(NoResultsView, null);
   } else if (status === 'loading' && !columns.length) {
-    return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    });
+    return (0, _react2.jsx)(LoadingView, null);
   }
   return issueLikeDataTableView;
 };

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.19.13"
+  packageVersion: "1.19.15"
 };

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -21,22 +21,14 @@ import i18nEN from '../../../i18n/en';
 import { PermissionError } from '../../../services/cmdbService.utils';
 import { AccessRequired } from '../../../ui/common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
-import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
-import { RenderAssetsContent } from './render-assets-content';
-const modalBodyWrapperStyles = css({
-  display: 'grid',
-  height: '420px',
-  overflow: 'auto',
-  background: scrollableContainerShadowsCssComponents.background,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
+import { MODAL_HEIGHT, RenderAssetsContent } from './render-assets-content';
 const modalBodyErrorWrapperStyles = css({
-  alignItems: 'center'
+  alignItems: 'center',
+  display: 'grid',
+  height: MODAL_HEIGHT
 });
 const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 const PlainAssetsConfigModal = props => {
@@ -327,9 +319,9 @@ const PlainAssetsConfigModal = props => {
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true,
     shouldCloseOnOverlayClick: false
-  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, jsx("div", {
-    css: [modalBodyWrapperStyles, errorState && modalBodyErrorWrapperStyles]
-  }, errorState ? renderErrorState() : jsx(RenderAssetsContent, {
+  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, errorState ? jsx("div", {
+    css: modalBodyErrorWrapperStyles
+  }, renderErrorState()) : jsx(RenderAssetsContent, {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
@@ -344,7 +336,7 @@ const PlainAssetsConfigModal = props => {
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
     modalRenderInstanceId: modalRenderInstanceId
-  }))), jsx(ModalFooter, null, jsx(Button, {
+  })), jsx(ModalFooter, null, jsx(Button, {
     appearance: "default",
     onClick: onCancelClick,
     testId: 'asset-datasource-modal--cancel-button'

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -5,18 +5,46 @@ import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
-import { EmptyState, IssueLikeDataTableView } from '../../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
 import { InitialStateView } from './initial-state-view';
-// This is to prevent y scrollbar when initially fetching data
-const emptyStateOverrideStyles = css({
-  height: '420px',
+export const MODAL_HEIGHT = 420;
+
+// This is to prevent y scrollbar when showing table loading state
+const disableOverflowStyles = css({
   overflow: 'hidden'
 });
+const contentContainerStyles = css({
+  height: MODAL_HEIGHT,
+  display: 'grid',
+  overflow: 'auto'
+});
 const tableBordersStyles = css({
   border: `1px solid ${`var(--ds-border, ${N40})`}`,
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
+const RejectedView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(ModalLoadingError, null));
+const UnauthorizedView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(AccessRequired, null));
+const EmptyView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(InitialStateView, null));
+const NoResultsView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(NoResults, null));
+const LoadingView = () => jsx("div", {
+  css: [contentContainerStyles, contentContainerStyles, tableBordersStyles, disableOverflowStyles]
+}, jsx(EmptyState, {
+  testId: "assets-aql-datasource-modal--loading-state"
+}));
 export const RenderAssetsContent = props => {
   const {
     status,
@@ -33,7 +61,7 @@ export const RenderAssetsContent = props => {
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const issueLikeDataTableView = useMemo(() => jsx("div", {
-    css: tableBordersStyles
+    css: [contentContainerStyles, tableBordersStyles]
   }, jsx(IssueLikeDataTableView, {
     testId: "asset-datasource-table",
     status: status,
@@ -48,23 +76,17 @@ export const RenderAssetsContent = props => {
   })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
-    return jsx("div", {
-      css: [tableBordersStyles, emptyStateOverrideStyles]
-    }, jsx(EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    }));
+    return jsx(LoadingView, null);
   } else if (status === 'rejected') {
-    return jsx(ModalLoadingError, null);
+    return jsx(RejectedView, null);
   } else if (status === 'unauthorized') {
-    return jsx(AccessRequired, null);
+    return jsx(UnauthorizedView, null);
   } else if (status === 'empty') {
-    return jsx(InitialStateView, null);
+    return jsx(EmptyView, null);
   } else if (resolvedWithNoResults) {
-    return jsx(NoResults, null);
+    return jsx(NoResultsView, null);
   } else if (status === 'loading' && !columns.length) {
-    return jsx(EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    });
+    return jsx(LoadingView, null);
   }
   return issueLikeDataTableView;
 };

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.19.13"
+  packageVersion: "1.19.15"
 };

package/dist/esm/ui/assets-modal/modal/index.js

@@ -27,22 +27,14 @@ import i18nEN from '../../../i18n/en';
 import { PermissionError } from '../../../services/cmdbService.utils';
 import { AccessRequired } from '../../../ui/common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
-import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
-import { RenderAssetsContent } from './render-assets-content';
-var modalBodyWrapperStyles = css({
-  display: 'grid',
-  height: '420px',
-  overflow: 'auto',
-  background: scrollableContainerShadowsCssComponents.background,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
+import { MODAL_HEIGHT, RenderAssetsContent } from './render-assets-content';
 var modalBodyErrorWrapperStyles = css({
-  alignItems: 'center'
+  alignItems: 'center',
+  display: 'grid',
+  height: MODAL_HEIGHT
 });
 var AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
@@ -358,9 +350,9 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true,
     shouldCloseOnOverlayClick: false
-  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, jsx("div", {
-    css: [modalBodyWrapperStyles, errorState && modalBodyErrorWrapperStyles]
-  }, errorState ? renderErrorState() : jsx(RenderAssetsContent, {
+  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, errorState ? jsx("div", {
+    css: modalBodyErrorWrapperStyles
+  }, renderErrorState()) : jsx(RenderAssetsContent, {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
@@ -375,7 +367,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
     modalRenderInstanceId: modalRenderInstanceId
-  }))), jsx(ModalFooter, null, jsx(Button, {
+  })), jsx(ModalFooter, null, jsx(Button, {
     appearance: "default",
     onClick: onCancelClick,
     testId: 'asset-datasource-modal--cancel-button'

package/dist/esm/ui/assets-modal/modal/render-assets-content/index.js

@@ -5,18 +5,56 @@ import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
-import { EmptyState, IssueLikeDataTableView } from '../../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
 import { InitialStateView } from './initial-state-view';
-// This is to prevent y scrollbar when initially fetching data
-var emptyStateOverrideStyles = css({
-  height: '420px',
+export var MODAL_HEIGHT = 420;
+
+// This is to prevent y scrollbar when showing table loading state
+var disableOverflowStyles = css({
   overflow: 'hidden'
 });
+var contentContainerStyles = css({
+  height: MODAL_HEIGHT,
+  display: 'grid',
+  overflow: 'auto'
+});
 var tableBordersStyles = css({
   border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
+var RejectedView = function RejectedView() {
+  return jsx("div", {
+    css: [contentContainerStyles]
+  }, jsx(ModalLoadingError, null));
+};
+var UnauthorizedView = function UnauthorizedView() {
+  return jsx("div", {
+    css: [contentContainerStyles]
+  }, jsx(AccessRequired, null));
+};
+var EmptyView = function EmptyView() {
+  return jsx("div", {
+    css: [contentContainerStyles]
+  }, jsx(InitialStateView, null));
+};
+var NoResultsView = function NoResultsView() {
+  return jsx("div", {
+    css: [contentContainerStyles]
+  }, jsx(NoResults, null));
+};
+var LoadingView = function LoadingView() {
+  return jsx("div", {
+    css: [contentContainerStyles, contentContainerStyles, tableBordersStyles, disableOverflowStyles]
+  }, jsx(EmptyState, {
+    testId: "assets-aql-datasource-modal--loading-state"
+  }));
+};
 export var RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
     responseItems = props.responseItems,
@@ -32,7 +70,7 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = useMemo(function () {
     return jsx("div", {
-      css: tableBordersStyles
+      css: [contentContainerStyles, tableBordersStyles]
     }, jsx(IssueLikeDataTableView, {
       testId: "asset-datasource-table",
       status: status,
@@ -48,23 +86,17 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
   }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
-    return jsx("div", {
-      css: [tableBordersStyles, emptyStateOverrideStyles]
-    }, jsx(EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    }));
+    return jsx(LoadingView, null);
   } else if (status === 'rejected') {
-    return jsx(ModalLoadingError, null);
+    return jsx(RejectedView, null);
   } else if (status === 'unauthorized') {
-    return jsx(AccessRequired, null);
+    return jsx(UnauthorizedView, null);
   } else if (status === 'empty') {
-    return jsx(InitialStateView, null);
+    return jsx(EmptyView, null);
   } else if (resolvedWithNoResults) {
-    return jsx(NoResults, null);
+    return jsx(NoResultsView, null);
   } else if (status === 'loading' && !columns.length) {
-    return jsx(EmptyState, {
-      testId: "assets-aql-datasource-modal--loading-state"
-    });
+    return jsx(LoadingView, null);
   }
   return issueLikeDataTableView;
 };

package/dist/types/ui/assets-modal/modal/render-assets-content/index.d.ts

@@ -16,4 +16,5 @@ export interface RenderAssetsContentProps {
     onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
     modalRenderInstanceId: string;
 }
+export declare const MODAL_HEIGHT = 420;
 export declare const RenderAssetsContent: (props: RenderAssetsContentProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/assets-modal/modal/render-assets-content/index.d.ts

@@ -16,4 +16,5 @@ export interface RenderAssetsContentProps {
     onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
     modalRenderInstanceId: string;
 }
+export declare const MODAL_HEIGHT = 420;
 export declare const RenderAssetsContent: (props: RenderAssetsContentProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.13",
+  "version": "1.19.15",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/adf-schema": "^34.0.1",
     "@atlaskit/analytics-next": "^9.1.3",
     "@atlaskit/avatar": "^21.4.0",
-    "@atlaskit/badge": "^15.1.16",
+    "@atlaskit/badge": "^15.2.0",
     "@atlaskit/button": "^16.17.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/empty-state": "^7.5.0",
@@ -48,8 +48,8 @@
     "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/linking-common": "^4.21.0",
     "@atlaskit/linking-types": "^8.5.0",
-    "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/modal-dialog": "^12.9.0",
+    "@atlaskit/lozenge": "^11.5.0",
+    "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/pragmatic-drag-and-drop": "^0.24.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",