@atlaskit/link-datasource 1.14.1 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.15.0
+
+### Minor Changes
+
+- [#42867](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42867) [`39f66ca6aec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39f66ca6aec) - Add error state UI to basic filter dropdown.
+
 ## 1.14.1
 
 ### 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.14.1"
+  packageVersion: "1.15.0"
 };

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,13 +16,12 @@ var _reactIntlNext = require("react-intl-next");
 var _useDebounce = require("use-debounce");
 var _select = require("@atlaskit/select");
 var _useFilterOptions2 = require("../../hooks/useFilterOptions");
+var _menuList = _interopRequireDefault(require("../menu-list"));
 var _control = _interopRequireDefault(require("./control"));
 var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
-var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _messages = require("./messages");
-var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
 var _trigger = _interopRequireDefault(require("./trigger"));
 var _excluded = ["isOpen"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -89,22 +88,14 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  var handleOpenPopup = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (!(status === 'empty')) {
-            _context2.next = 3;
-            break;
-          }
-          _context2.next = 3;
-          return fetchFilterOptions();
-        case 3:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })), [fetchFilterOptions, status]);
+  var handleOpenPopup = (0, _react.useCallback)(function () {
+    if (status === 'empty' || status === 'rejected') {
+      // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
+      fetchFilterOptions({
+        searchString: searchTerm
+      });
+    }
+  }, [fetchFilterOptions, searchTerm, status]);
   (0, _react.useEffect)(function () {
     if (status === 'resolved') {
       var _pickerRef$current;
@@ -112,9 +103,12 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
     }
   }, [status]);
+  var filterOptionsLength = filterOptions.length;
+  var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
-  var shouldShowFooter = status === 'resolved' && filterOptions.length > 0;
-  var options = isLoading ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
+  var isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  var shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  var options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
     isMulti: true,
@@ -133,13 +127,18 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
-    loadingMessage: _loadingMessage.default,
-    noOptionsMessage: _noOptionsMessage.default,
     placeholder: formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: _select.CheckboxOption,
       Control: _control.default,
+      MenuList: function MenuList(props) {
+        return /*#__PURE__*/_react.default.createElement(_menuList.default, (0, _extends2.default)({}, props, {
+          isError: isError,
+          isEmpty: isEmpty,
+          isLoading: isLoading
+        }));
+      },
       DropdownIndicator: _dropdownIndicator.default,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
@@ -152,9 +151,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     formatOptionLabel: _formatOptionLabel.default,
     onChange: handleOptionSelection,
     onInputChange: handleInputChange,
-    target: function target(_ref4) {
-      var isOpen = _ref4.isOpen,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+    target: function target(_ref3) {
+      var isOpen = _ref3.isOpen,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
       return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
         filterType: filterType,
         isSelected: isOpen,
@@ -163,7 +162,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {
-      currentDisplayCount: filterOptions.length,
+      currentDisplayCount: filterOptionsLength,
       totalCount: totalCount
     })
   });

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -44,5 +44,10 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.no-options-message',
     defaultMessage: 'No matches found',
     description: 'The text for when no matches are found in dropdown'
+  },
+  errorMessage: {
+    id: 'linkDataSource.basic-filter.error-message',
+    defaultMessage: "Couldn't retrieve data",
+    description: 'The text for when an error occurs when loading options'
   }
 };

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../async-popup-select/messages");
+var _selectMessage = _interopRequireDefault(require("./selectMessage"));
+var CustomErrorMessage = function CustomErrorMessage() {
+  return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_error.default, {
+      primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
+      label: "",
+      size: "xlarge"
+    }),
+    message: _messages.asyncPopupSelectMessages.errorMessage,
+    testId: "jlol-basic-filter-popup-select--error-message"
+  });
+};
+var _default = exports.default = CustomErrorMessage;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _select = require("@atlaskit/select");
+var _errorMessage = _interopRequireDefault(require("./errorMessage"));
+var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
+var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
+var _excluded = ["isLoading", "isError", "isEmpty", "children"];
+var CustomMenuList = function CustomMenuList(_ref) {
+  var isLoading = _ref.isLoading,
+    isError = _ref.isError,
+    isEmpty = _ref.isEmpty,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var getChildComponent = function getChildComponent() {
+    if (isLoading) {
+      return /*#__PURE__*/_react.default.createElement(_loadingMessage.default, null);
+    }
+    if (isError) {
+      return /*#__PURE__*/_react.default.createElement(_errorMessage.default, null);
+    }
+    if (isEmpty) {
+      return /*#__PURE__*/_react.default.createElement(_noOptionsMessage.default, null);
+    }
+    return children;
+  };
+  return /*#__PURE__*/_react.default.createElement(_select.components.MenuList, props, getChildComponent());
+};
+var _default = exports.default = CustomMenuList;

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/loadingMessage.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
-var _messages = require("./messages");
+var _messages = require("../async-popup-select/messages");
+var _selectMessage = _interopRequireDefault(require("./selectMessage"));
 var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
-  return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
     icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: "large"
     }),

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/noOptionsMessage.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
 var _colors = require("@atlaskit/theme/colors");
-var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
-var _messages = require("./messages");
+var _messages = require("../async-popup-select/messages");
+var _selectMessage = _interopRequireDefault(require("./selectMessage"));
 var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
-  return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
     icon: /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
       primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
       size: "xlarge",

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/{custom-select-message/index.js → menu-list/selectMessage.js}

@@ -13,12 +13,20 @@ var boxStyles = (0, _primitives.xcss)({
   height: "var(--ds-space-800, 64px)",
   marginBottom: "var(--ds-space-200, 16px)"
 });
+var stackStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
 var CustomSelectMessage = function CustomSelectMessage(_ref) {
   var icon = _ref.icon,
     message = _ref.message,
     testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    testId: testId
+    xcss: stackStyles,
+    testId: testId,
+    alignInline: "center"
   }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: boxStyles,
     alignItems: "center",

package/dist/es2019/analytics/constants.js

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

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -4,13 +4,12 @@ import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
+import CustomMenuList from '../menu-list';
 import CustomControl from './control';
 import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
-import CustomDropdownLoadingMessage from './loadingMessage';
 import { asyncPopupSelectMessages } from './messages';
-import CustomNoOptionsMessage from './noOptionsMessage';
 import PopupTrigger from './trigger';
 // Needed to disable filtering from react-select
 const noFilterOptions = () => true;
@@ -52,11 +51,14 @@ const AsyncPopupSelect = ({
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  const handleOpenPopup = useCallback(async () => {
-    if (status === 'empty') {
-      await fetchFilterOptions();
+  const handleOpenPopup = useCallback(() => {
+    if (status === 'empty' || status === 'rejected') {
+      // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
+      fetchFilterOptions({
+        searchString: searchTerm
+      });
     }
-  }, [fetchFilterOptions, status]);
+  }, [fetchFilterOptions, searchTerm, status]);
   useEffect(() => {
     if (status === 'resolved') {
       var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
@@ -64,9 +66,12 @@ const AsyncPopupSelect = ({
       pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
     }
   }, [status]);
+  const filterOptionsLength = filterOptions.length;
+  const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
-  const shouldShowFooter = status === 'resolved' && filterOptions.length > 0;
-  const options = isLoading ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
+  const isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  const shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  const options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
@@ -85,13 +90,16 @@ const AsyncPopupSelect = ({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
-    loadingMessage: CustomDropdownLoadingMessage,
-    noOptionsMessage: CustomNoOptionsMessage,
     placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
       Control: CustomControl,
+      MenuList: props => /*#__PURE__*/React.createElement(CustomMenuList, _extends({}, props, {
+        isError: isError,
+        isEmpty: isEmpty,
+        isLoading: isLoading
+      })),
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
@@ -114,7 +122,7 @@ const AsyncPopupSelect = ({
       isDisabled: isDisabled
     })),
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: filterOptions.length,
+      currentDisplayCount: filterOptionsLength,
       totalCount: totalCount
     })
   });

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -38,5 +38,10 @@ export const asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.no-options-message',
     defaultMessage: 'No matches found',
     description: 'The text for when no matches are found in dropdown'
+  },
+  errorMessage: {
+    id: 'linkDataSource.basic-filter.error-message',
+    defaultMessage: "Couldn't retrieve data",
+    description: 'The text for when an error occurs when loading options'
   }
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { N500 } from '@atlaskit/theme/colors';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
+const CustomErrorMessage = () => {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+    icon: /*#__PURE__*/React.createElement(ErrorIcon, {
+      primaryColor: `var(--ds-icon, ${N500})`,
+      label: "",
+      size: "xlarge"
+    }),
+    message: asyncPopupSelectMessages.errorMessage,
+    testId: "jlol-basic-filter-popup-select--error-message"
+  });
+};
+export default CustomErrorMessage;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { components } from '@atlaskit/select';
+import CustomErrorMessage from './errorMessage';
+import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomNoOptionsMessage from './noOptionsMessage';
+const CustomMenuList = ({
+  isLoading,
+  isError,
+  isEmpty,
+  children,
+  ...props
+}) => {
+  const getChildComponent = () => {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
+    }
+    if (isError) {
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, null);
+    }
+    if (isEmpty) {
+      return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, null);
+    }
+    return children;
+  };
+  return /*#__PURE__*/React.createElement(components.MenuList, props, getChildComponent());
+};
+export default CustomMenuList;

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/loadingMessage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
-import CustomSelectMessage from '../custom-select-message';
-import { asyncPopupSelectMessages } from './messages';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
 const CustomDropdownLoadingMessage = () => {
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(Spinner, {

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/noOptionsMessage.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { N500 } from '@atlaskit/theme/colors';
-import CustomSelectMessage from '../custom-select-message';
-import { asyncPopupSelectMessages } from './messages';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
 const CustomNoOptionsMessage = () => {
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/{custom-select-message/index.js → menu-list/selectMessage.js}

@@ -6,13 +6,21 @@ const boxStyles = xcss({
   height: "var(--ds-space-800, 64px)",
   marginBottom: "var(--ds-space-200, 16px)"
 });
+const stackStyles = xcss({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
 const CustomSelectMessage = ({
   icon,
   message,
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Stack, {
-    testId: testId
+    xcss: stackStyles,
+    testId: testId,
+    alignInline: "center"
   }, /*#__PURE__*/React.createElement(Flex, {
     xcss: boxStyles,
     alignItems: "center",

package/dist/esm/analytics/constants.js

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

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
@@ -9,13 +9,12 @@ import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
+import CustomMenuList from '../menu-list';
 import CustomControl from './control';
 import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
-import CustomDropdownLoadingMessage from './loadingMessage';
 import { asyncPopupSelectMessages } from './messages';
-import CustomNoOptionsMessage from './noOptionsMessage';
 import PopupTrigger from './trigger';
 // Needed to disable filtering from react-select
 var noFilterOptions = function noFilterOptions() {
@@ -79,22 +78,14 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  var handleOpenPopup = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          if (!(status === 'empty')) {
-            _context2.next = 3;
-            break;
-          }
-          _context2.next = 3;
-          return fetchFilterOptions();
-        case 3:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })), [fetchFilterOptions, status]);
+  var handleOpenPopup = useCallback(function () {
+    if (status === 'empty' || status === 'rejected') {
+      // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
+      fetchFilterOptions({
+        searchString: searchTerm
+      });
+    }
+  }, [fetchFilterOptions, searchTerm, status]);
   useEffect(function () {
     if (status === 'resolved') {
       var _pickerRef$current;
@@ -102,9 +93,12 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
     }
   }, [status]);
+  var filterOptionsLength = filterOptions.length;
+  var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
-  var shouldShowFooter = status === 'resolved' && filterOptions.length > 0;
-  var options = isLoading ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
+  var isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  var shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  var options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
@@ -123,13 +117,18 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
-    loadingMessage: CustomDropdownLoadingMessage,
-    noOptionsMessage: CustomNoOptionsMessage,
     placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
       Control: CustomControl,
+      MenuList: function MenuList(props) {
+        return /*#__PURE__*/React.createElement(CustomMenuList, _extends({}, props, {
+          isError: isError,
+          isEmpty: isEmpty,
+          isLoading: isLoading
+        }));
+      },
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
@@ -142,9 +141,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     formatOptionLabel: formatOptionLabel,
     onChange: handleOptionSelection,
     onInputChange: handleInputChange,
-    target: function target(_ref4) {
-      var isOpen = _ref4.isOpen,
-        triggerProps = _objectWithoutProperties(_ref4, _excluded);
+    target: function target(_ref3) {
+      var isOpen = _ref3.isOpen,
+        triggerProps = _objectWithoutProperties(_ref3, _excluded);
       return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
         filterType: filterType,
         isSelected: isOpen,
@@ -153,7 +152,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: filterOptions.length,
+      currentDisplayCount: filterOptionsLength,
       totalCount: totalCount
     })
   });

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -38,5 +38,10 @@ export var asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.no-options-message',
     defaultMessage: 'No matches found',
     description: 'The text for when no matches are found in dropdown'
+  },
+  errorMessage: {
+    id: 'linkDataSource.basic-filter.error-message',
+    defaultMessage: "Couldn't retrieve data",
+    description: 'The text for when an error occurs when loading options'
   }
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { N500 } from '@atlaskit/theme/colors';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
+var CustomErrorMessage = function CustomErrorMessage() {
+  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+    icon: /*#__PURE__*/React.createElement(ErrorIcon, {
+      primaryColor: "var(--ds-icon, ".concat(N500, ")"),
+      label: "",
+      size: "xlarge"
+    }),
+    message: asyncPopupSelectMessages.errorMessage,
+    testId: "jlol-basic-filter-popup-select--error-message"
+  });
+};
+export default CustomErrorMessage;

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

@@ -0,0 +1,28 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "isError", "isEmpty", "children"];
+import React from 'react';
+import { components } from '@atlaskit/select';
+import CustomErrorMessage from './errorMessage';
+import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomNoOptionsMessage from './noOptionsMessage';
+var CustomMenuList = function CustomMenuList(_ref) {
+  var isLoading = _ref.isLoading,
+    isError = _ref.isError,
+    isEmpty = _ref.isEmpty,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var getChildComponent = function getChildComponent() {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
+    }
+    if (isError) {
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, null);
+    }
+    if (isEmpty) {
+      return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, null);
+    }
+    return children;
+  };
+  return /*#__PURE__*/React.createElement(components.MenuList, props, getChildComponent());
+};
+export default CustomMenuList;

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/loadingMessage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
-import CustomSelectMessage from '../custom-select-message';
-import { asyncPopupSelectMessages } from './messages';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
 var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(Spinner, {

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/{async-popup-select → menu-list}/noOptionsMessage.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { N500 } from '@atlaskit/theme/colors';
-import CustomSelectMessage from '../custom-select-message';
-import { asyncPopupSelectMessages } from './messages';
+import { asyncPopupSelectMessages } from '../async-popup-select/messages';
+import CustomSelectMessage from './selectMessage';
 var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/{custom-select-message/index.js → menu-list/selectMessage.js}

@@ -6,12 +6,20 @@ var boxStyles = xcss({
   height: "var(--ds-space-800, 64px)",
   marginBottom: "var(--ds-space-200, 16px)"
 });
+var stackStyles = xcss({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
 var CustomSelectMessage = function CustomSelectMessage(_ref) {
   var icon = _ref.icon,
     message = _ref.message,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Stack, {
-    testId: testId
+    xcss: stackStyles,
+    testId: testId,
+    alignInline: "center"
   }, /*#__PURE__*/React.createElement(Flex, {
     xcss: boxStyles,
     alignItems: "center",

package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts

@@ -39,4 +39,9 @@ export declare const asyncPopupSelectMessages: {
         defaultMessage: string;
         description: string;
     };
+    errorMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/ui/jira-issues-modal/basic-filters/ui/menu-list/errorMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CustomErrorMessage: () => JSX.Element;
+export default CustomErrorMessage;

package/dist/types/ui/jira-issues-modal/basic-filters/ui/menu-list/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MenuListComponentProps } from '@atlaskit/select';
+import { SelectOption } from '../../types';
+type CustomProps = {
+    isError?: boolean;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+};
+declare const CustomMenuList: ({ isLoading, isError, isEmpty, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+export default CustomMenuList;

package/dist/types/ui/jira-issues-modal/basic-filters/ui/{custom-select-message/index.d.ts → menu-list/selectMessage.d.ts}

@@ -1,7 +1,8 @@
 import React from 'react';
+import { MessageDescriptor } from 'react-intl-next';
 interface CustomSelectMessageProps {
     icon: React.ReactNode;
-    message: object;
+    message: MessageDescriptor;
     testId: string;
 }
 declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts

@@ -39,4 +39,9 @@ export declare const asyncPopupSelectMessages: {
         defaultMessage: string;
         description: string;
     };
+    errorMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/menu-list/errorMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CustomErrorMessage: () => JSX.Element;
+export default CustomErrorMessage;

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/menu-list/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MenuListComponentProps } from '@atlaskit/select';
+import { SelectOption } from '../../types';
+type CustomProps = {
+    isError?: boolean;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+};
+declare const CustomMenuList: ({ isLoading, isError, isEmpty, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+export default CustomMenuList;

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/{custom-select-message/index.d.ts → menu-list/selectMessage.d.ts}

@@ -1,7 +1,8 @@
 import React from 'react';
+import { MessageDescriptor } from 'react-intl-next';
 interface CustomSelectMessageProps {
     icon: React.ReactNode;
-    message: object;
+    message: MessageDescriptor;
     testId: string;
 }
 declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
     "@atlaskit/jql-ast": "^3.0.0",
     "@atlaskit/jql-editor-autocomplete-rest": "^2.0.0",
     "@atlaskit/link-client-extension": "^1.8.0",
-    "@atlaskit/linking-common": "^4.16.0",
+    "@atlaskit/linking-common": "^4.17.0",
     "@atlaskit/linking-types": "^8.4.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.8.0",