@atlaskit/link-datasource 1.19.14 → 1.19.16

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-datasource
 
+## 1.19.16
+
+### Patch Changes
+
+- [#58204](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58204) [`f800efb5148e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f800efb5148e) - Design/Bug fixes for basic filters(after design review).
+
+## 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

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.14"
+  packageVersion: "1.19.16"
 };

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/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -117,17 +117,17 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = (0, _react.useCallback)(function () {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       var newOptions = filterOptions.filter(function (option) {

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -15,6 +15,9 @@ var _errorMessage = _interopRequireDefault(require("./errorMessage"));
 var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
 var _excluded = ["children"];
+var inlineSpinnerStyles = (0, _primitives.xcss)({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -31,7 +34,8 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   var InlineSpinner = function InlineSpinner() {
     return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-      justifyContent: "center"
+      justifyContent: "center",
+      xcss: inlineSpinnerStyles
     }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: "medium"
     }));

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraSearchContainer = exports.DEFAULT_JQL_QUERY = exports.ALLOWED_ORDER_BY_KEYS = void 0;
+exports.JiraSearchContainer = exports.FILTER_SELECTION_DEBOUNCE_MS = exports.DEFAULT_JQL_QUERY = exports.ALLOWED_ORDER_BY_KEYS = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -18,7 +18,6 @@ var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../../analytics");
 var _basicFilters = require("../basic-filters");
 var _useHydrateJqlQuery2 = require("../basic-filters/hooks/useHydrateJqlQuery");
-var _asyncPopupSelect = require("../basic-filters/ui/async-popup-select");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _basicSearchInput = require("../basic-search-input");
 var _jqlEditor = require("../jql-editor");
@@ -40,7 +39,7 @@ var basicSearchInputContainerStyles = (0, _primitives.xcss)({
 });
 var DEFAULT_JQL_QUERY = exports.DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 var ALLOWED_ORDER_BY_KEYS = exports.ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-var JiraSearchMethodSwitcher = _modeSwitcher.ModeSwitcher;
+var FILTER_SELECTION_DEBOUNCE_MS = exports.FILTER_SELECTION_DEBOUNCE_MS = 500;
 var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchContainer(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
@@ -164,7 +163,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
         basicFilterSelections: filterSelections,
         isQueryComplex: isCurrentQueryComplex
       });
-    }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),
+    }, FILTER_SELECTION_DEBOUNCE_MS),
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
   var handleBasicFilterSelectionChange = (0, _react.useCallback)(function (filterType, options) {
@@ -224,7 +223,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), (0, _react2.jsx)(JiraSearchMethodSwitcher, {
+  }), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -20,7 +20,7 @@ var modeSwitcherStyles = (0, _react2.css)({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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.14"
+  packageVersion: "1.19.16"
 };

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/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -73,17 +73,17 @@ const AsyncPopupSelect = ({
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   const sortOptionsOnResolve = useCallback(() => {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import ShowMoreButton from '../async-popup-select/showMoreButton';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
 import CustomNoOptionsMessage from './noOptionsMessage';
+const inlineSpinnerStyles = xcss({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 const CustomMenuList = ({
   children,
   ...props
@@ -23,7 +26,8 @@ const CustomMenuList = ({
   const shouldDisplayShowMore = showMore && !isLoadingMore;
   const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center"
+    justifyContent: "center",
+    xcss: inlineSpinnerStyles
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "medium"
   }));

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

@@ -8,7 +8,6 @@ import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
-import { SEARCH_DEBOUNCE_MS } from '../basic-filters/ui/async-popup-select';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
@@ -25,7 +24,7 @@ const basicSearchInputContainerStyles = xcss({
 });
 export const DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-const JiraSearchMethodSwitcher = ModeSwitcher;
+export const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export const JiraSearchContainer = props => {
   const {
     isSearching,
@@ -129,7 +128,7 @@ export const JiraSearchContainer = props => {
       basicFilterSelections: filterSelections,
       isQueryComplex: isCurrentQueryComplex
     });
-  }, SEARCH_DEBOUNCE_MS);
+  }, FILTER_SELECTION_DEBOUNCE_MS);
   const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
     const updatedSelection = {
       ...filterSelections,
@@ -192,7 +191,7 @@ export const JiraSearchContainer = props => {
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), jsx(JiraSearchMethodSwitcher, {
+  }), jsx(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -12,7 +12,7 @@ const modeSwitcherStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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.14"
+  packageVersion: "1.19.16"
 };

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/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -107,17 +107,17 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = useCallback(function () {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       var newOptions = filterOptions.filter(function (option) {

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -1,13 +1,16 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import ShowMoreButton from '../async-popup-select/showMoreButton';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
 import CustomNoOptionsMessage from './noOptionsMessage';
+var inlineSpinnerStyles = xcss({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -24,7 +27,8 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   var InlineSpinner = function InlineSpinner() {
     return /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "center"
+      justifyContent: "center",
+      xcss: inlineSpinnerStyles
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "medium"
     }));

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

@@ -14,7 +14,6 @@ import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
-import { SEARCH_DEBOUNCE_MS } from '../basic-filters/ui/async-popup-select';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
@@ -31,7 +30,7 @@ var basicSearchInputContainerStyles = xcss({
 });
 export var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export var ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-var JiraSearchMethodSwitcher = ModeSwitcher;
+export var FILTER_SELECTION_DEBOUNCE_MS = 500;
 export var JiraSearchContainer = function JiraSearchContainer(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
@@ -155,7 +154,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
         basicFilterSelections: filterSelections,
         isQueryComplex: isCurrentQueryComplex
       });
-    }, SEARCH_DEBOUNCE_MS),
+    }, FILTER_SELECTION_DEBOUNCE_MS),
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
   var handleBasicFilterSelectionChange = useCallback(function (filterType, options) {
@@ -215,7 +214,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), jsx(JiraSearchMethodSwitcher, {
+  }), jsx(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -12,7 +12,7 @@ var modeSwitcherStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,6 +4,7 @@ import { SelectedOptionsMap } from '../basic-filters/types';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export declare const DEFAULT_JQL_QUERY = "created >= -30d order by created DESC";
 export declare const ALLOWED_ORDER_BY_KEYS: string[];
+export declare const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, { searchMethod, basicFilterSelections, }: {

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/dist/types-ts4.5/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,6 +4,7 @@ import { SelectedOptionsMap } from '../basic-filters/types';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export declare const DEFAULT_JQL_QUERY = "created >= -30d order by created DESC";
 export declare const ALLOWED_ORDER_BY_KEYS: string[];
+export declare const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, { searchMethod, basicFilterSelections, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.14",
+  "version": "1.19.16",
   "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",