@atlaskit/link-datasource 1.13.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.13.1
+
+### Patch Changes
+
+- [#42684](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42684) [`3752d98e7fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3752d98e7fd) - Add search functionality to basic filter dropdowns.
+
 ## 1.13.0
 
 ### Minor 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.13.0"
+  packageVersion: "1.13.1"
 };

package/dist/cjs/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -31,12 +31,15 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     nextPageCursor = _useState8[0],
     setNextPageCursor = _useState8[1];
+  var initialData = (0, _react.useRef)();
   var _useBasicFilterAGG = (0, _useBasicFilterAGG2.useBasicFilterAGG)(),
     getFieldValues = _useBasicFilterAGG.getFieldValues;
   var fetchFilterOptions = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _ref3,
       pageCursor,
       searchString,
+      isRequestLikeInitialSearch,
+      initialResponseData,
       response,
       isNewSearch,
       _args = arguments;
@@ -45,8 +48,18 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
         case 0:
           _ref3 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, pageCursor = _ref3.pageCursor, searchString = _ref3.searchString;
           setStatus('loading');
-          _context.prev = 2;
-          _context.next = 5;
+          isRequestLikeInitialSearch = !pageCursor && !searchString;
+          initialResponseData = initialData.current;
+          _context.prev = 4;
+          if (!(isRequestLikeInitialSearch && initialResponseData)) {
+            _context.next = 9;
+            break;
+          }
+          _context.t0 = initialResponseData;
+          _context.next = 12;
+          break;
+        case 9:
+          _context.next = 11;
           return getFieldValues({
             cloudId: cloudId,
             jql: '',
@@ -54,35 +67,44 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
             searchString: searchString,
             pageCursor: pageCursor
           });
-        case 5:
-          response = _context.sent;
+        case 11:
+          _context.t0 = _context.sent;
+        case 12:
+          response = _context.t0;
           if (!(response.errors && response.errors.length > 0)) {
-            _context.next = 9;
+            _context.next = 16;
             break;
           }
           setStatus('rejected');
           return _context.abrupt("return");
-        case 9:
+        case 16:
           isNewSearch = !pageCursor;
           if (isNewSearch) {
             setFilterOptions((0, _transformers.mapFieldValuesToFilterOptions)(response));
+            if (isRequestLikeInitialSearch) {
+              /**
+               * The initial dataset is used in couple of paths, eg: when a user searches and clears the search text.
+               * During these times, we dont want to fetch data again and again, hence a mini cache setup to store and provide the initial dataset
+               */
+              initialData.current = response;
+            }
           } else {
             setFilterOptions([].concat((0, _toConsumableArray2.default)(filterOptions), (0, _toConsumableArray2.default)((0, _transformers.mapFieldValuesToFilterOptions)(response))));
           }
           setTotalCount((0, _transformers.mapFieldValuesToTotalCount)(response));
           setNextPageCursor((0, _transformers.mapFieldValuesToPageCursor)(response));
           setStatus('resolved');
-          _context.next = 19;
+          _context.next = 26;
           break;
-        case 16:
-          _context.prev = 16;
-          _context.t0 = _context["catch"](2);
+        case 23:
+          _context.prev = 23;
+          _context.t1 = _context["catch"](4);
           setStatus('rejected');
-        case 19:
+        case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 16]]);
+    }, _callee, null, [[4, 23]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
   return {
     filterOptions: filterOptions,

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

@@ -0,0 +1,39 @@
+"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 _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _primitives = require("@atlaskit/primitives");
+var _select = require("@atlaskit/select");
+var customDropdownIndicatorStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  cursor: 'pointer',
+  justifyContent: 'center',
+  width: "var(--ds-space-400, 32px)"
+});
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/_react.default.createElement(_select.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: customDropdownIndicatorStyles,
+    onClick: function onClick() {
+      if (selectProps.inputValue) {
+        selectProps.onInputChange && selectProps.onInputChange('', {
+          action: 'input-change',
+          prevInputValue: selectProps.inputValue
+        });
+      }
+    }
+  }, selectProps.inputValue ? /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+    size: "small",
+    label: ""
+  }) : /*#__PURE__*/_react.default.createElement(_search.default, {
+    size: "small",
+    label: ""
+  })));
+};
+var _default = exports.default = CustomDropdownIndicator;

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

@@ -12,10 +12,12 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _select = require("@atlaskit/select");
 var _useFilterOptions2 = require("../../hooks/useFilterOptions");
 var _control = _interopRequireDefault(require("./control"));
+var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
 var _messages = require("./messages");
@@ -27,12 +29,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var noFilterOptions = function noFilterOptions() {
   return true;
 };
+var SEARCH_DEBOUNCE_MS = 350;
 var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
     cloudId = _ref.cloudId,
     selection = _ref.selection,
     _ref$onSelectionChang = _ref.onSelectionChange,
-    onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang;
+    onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var pickerRef = (0, _react.useRef)(null);
@@ -52,30 +57,49 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status;
-  var handleInputChange = (0, _react.useCallback)(function (searchString, actionMeta) {
-    if (actionMeta.action === 'input-change' && searchString !== searchTerm) {
-      setSearchTerm(searchString);
-    }
-  }, [searchTerm]);
+  var handleDebouncedFetchFilterOptions = (0, _react.useMemo)(function () {
+    return (0, _debounce.default)(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
+  }, [fetchFilterOptions]);
+  var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+              setSearchTerm(newSearchTerm);
+              handleDebouncedFetchFilterOptions({
+                searchString: newSearchTerm
+              });
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [handleDebouncedFetchFilterOptions, searchTerm]);
   var handleOptionSelection = function handleOptionSelection(newValue) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  var handleOpenPopup = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+  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')) {
-            _context.next = 3;
+            _context2.next = 3;
             break;
           }
-          _context.next = 3;
+          _context2.next = 3;
           return fetchFilterOptions();
         case 3:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   })), [fetchFilterOptions, status]);
   (0, _react.useEffect)(function () {
     if (status === 'resolved') {
@@ -85,6 +109,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [status]);
   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
+
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
     isMulti: true,
     maxMenuWidth: 300,
@@ -106,24 +133,28 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: _select.CheckboxOption,
-      Control: _control.default
+      Control: _control.default,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      DropdownIndicator: _dropdownIndicator.default
     },
-    options: filterOptions,
+    options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: _formatOptionLabel.default,
     onChange: handleOptionSelection,
     onInputChange: handleInputChange,
-    target: function target(_ref3) {
-      var isOpen = _ref3.isOpen,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+    target: function target(_ref4) {
+      var isOpen = _ref4.isOpen,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
       return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
         filterType: filterType,
         isSelected: isOpen,
-        onClick: handleOpenPopup
+        onClick: handleOpenPopup,
+        isDisabled: isDisabled
       }));
     },
-    footer: /*#__PURE__*/_react.default.createElement(_footer.default, {
+    footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {
       currentDisplayCount: filterOptions.length,
       totalCount: totalCount
     })

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

@@ -16,11 +16,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var filterType = _ref.filterType,
     isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
     onClick = _ref.onClick;
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected,
+    isDisabled: isDisabled,
     onClick: onClick,
     testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
     iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {

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

@@ -35,6 +35,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       filterType: filter,
       key: filter,
       selection: selection,
+      isDisabled: !cloudId,
       onSelectionChange: handleSelectionChange
     });
   }));

package/dist/es2019/analytics/constants.js

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

package/dist/es2019/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useBasicFilterAGG } from '../../../../services/useBasicFilterAGG';
 import { mapFieldValuesToFilterOptions, mapFieldValuesToPageCursor, mapFieldValuesToTotalCount } from '../utils/transformers';
 export const useFilterOptions = ({
@@ -9,6 +9,7 @@ export const useFilterOptions = ({
   const [totalCount, setTotalCount] = useState(0);
   const [status, setStatus] = useState('empty');
   const [nextPageCursor, setNextPageCursor] = useState(undefined);
+  const initialData = useRef();
   const {
     getFieldValues
   } = useBasicFilterAGG();
@@ -17,8 +18,12 @@ export const useFilterOptions = ({
     searchString
   } = {}) => {
     setStatus('loading');
+    const isRequestLikeInitialSearch = !pageCursor && !searchString;
+    const {
+      current: initialResponseData
+    } = initialData;
     try {
-      const response = await getFieldValues({
+      const response = isRequestLikeInitialSearch && initialResponseData ? initialResponseData : await getFieldValues({
         cloudId,
         jql: '',
         jqlTerm: filterType,
@@ -32,6 +37,13 @@ export const useFilterOptions = ({
       const isNewSearch = !pageCursor;
       if (isNewSearch) {
         setFilterOptions(mapFieldValuesToFilterOptions(response));
+        if (isRequestLikeInitialSearch) {
+          /**
+           * The initial dataset is used in couple of paths, eg: when a user searches and clears the search text.
+           * During these times, we dont want to fetch data again and again, hence a mini cache setup to store and provide the initial dataset
+           */
+          initialData.current = response;
+        }
       } else {
         setFilterOptions([...filterOptions, ...mapFieldValuesToFilterOptions(response)]);
       }

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import CloseIcon from '@atlaskit/icon/glyph/cross-circle';
+import SearchIcon from '@atlaskit/icon/glyph/search';
+import { Box, xcss } from '@atlaskit/primitives';
+import { components } from '@atlaskit/select';
+const customDropdownIndicatorStyles = xcss({
+  display: 'flex',
+  cursor: 'pointer',
+  justifyContent: 'center',
+  width: "var(--ds-space-400, 32px)"
+});
+const CustomDropdownIndicator = props => {
+  const {
+    selectProps
+  } = props;
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
+    xcss: customDropdownIndicatorStyles,
+    onClick: () => {
+      if (selectProps.inputValue) {
+        selectProps.onInputChange && selectProps.onInputChange('', {
+          action: 'input-change',
+          prevInputValue: selectProps.inputValue
+        });
+      }
+    }
+  }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
+    size: "small",
+    label: ""
+  }) : /*#__PURE__*/React.createElement(SearchIcon, {
+    size: "small",
+    label: ""
+  })));
+};
+export default CustomDropdownIndicator;

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

@@ -1,20 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
 import CustomControl from './control';
+import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
 import { asyncPopupSelectMessages } from './messages';
 import PopupTrigger from './trigger';
 // Needed to disable filtering from react-select
 const noFilterOptions = () => true;
+const SEARCH_DEBOUNCE_MS = 350;
 const AsyncPopupSelect = ({
   filterType,
   cloudId,
   selection,
-  onSelectionChange = () => {}
+  onSelectionChange = () => {},
+  isDisabled = false
 }) => {
   const {
     formatMessage
@@ -31,11 +35,15 @@ const AsyncPopupSelect = ({
     filterType,
     cloudId
   });
-  const handleInputChange = useCallback((searchString, actionMeta) => {
-    if (actionMeta.action === 'input-change' && searchString !== searchTerm) {
-      setSearchTerm(searchString);
+  const handleDebouncedFetchFilterOptions = useMemo(() => debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS), [fetchFilterOptions]);
+  const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
+    if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+      setSearchTerm(newSearchTerm);
+      handleDebouncedFetchFilterOptions({
+        searchString: newSearchTerm
+      });
     }
-  }, [searchTerm]);
+  }, [handleDebouncedFetchFilterOptions, searchTerm]);
   const handleOptionSelection = newValue => {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
@@ -53,6 +61,9 @@ const AsyncPopupSelect = ({
     }
   }, [status]);
   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
+
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
     maxMenuWidth: 300,
@@ -74,9 +85,12 @@ const AsyncPopupSelect = ({
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
-      Control: CustomControl
+      Control: CustomControl,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      DropdownIndicator: CustomDropdownIndicator
     },
-    options: filterOptions,
+    options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: formatOptionLabel,
@@ -88,9 +102,10 @@ const AsyncPopupSelect = ({
     }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
       filterType: filterType,
       isSelected: isOpen,
-      onClick: handleOpenPopup
+      onClick: handleOpenPopup,
+      isDisabled: isDisabled
     })),
-    footer: /*#__PURE__*/React.createElement(PopupFooter, {
+    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
       currentDisplayCount: filterOptions.length,
       totalCount: totalCount
     })

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

@@ -6,12 +6,14 @@ import { asyncPopupSelectMessages } from './messages';
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   filterType,
   isSelected,
+  isDisabled,
   onClick
 }, ref) => {
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected,
+    isDisabled: isDisabled,
     onClick: onClick,
     testId: `jlol-basic-filter-${filterType}-trigger`,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {

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

@@ -22,6 +22,7 @@ const BasicFilterContainer = ({
     filterType: filter,
     key: filter,
     selection: selection,
+    isDisabled: !cloudId,
     onSelectionChange: handleSelectionChange
   })));
 };

package/dist/esm/analytics/constants.js

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

package/dist/esm/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useBasicFilterAGG } from '../../../../services/useBasicFilterAGG';
 import { mapFieldValuesToFilterOptions, mapFieldValuesToPageCursor, mapFieldValuesToTotalCount } from '../utils/transformers';
 export var useFilterOptions = function useFilterOptions(_ref) {
@@ -24,12 +24,15 @@ export var useFilterOptions = function useFilterOptions(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     nextPageCursor = _useState8[0],
     setNextPageCursor = _useState8[1];
+  var initialData = useRef();
   var _useBasicFilterAGG = useBasicFilterAGG(),
     getFieldValues = _useBasicFilterAGG.getFieldValues;
   var fetchFilterOptions = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _ref3,
       pageCursor,
       searchString,
+      isRequestLikeInitialSearch,
+      initialResponseData,
       response,
       isNewSearch,
       _args = arguments;
@@ -38,8 +41,18 @@ export var useFilterOptions = function useFilterOptions(_ref) {
         case 0:
           _ref3 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, pageCursor = _ref3.pageCursor, searchString = _ref3.searchString;
           setStatus('loading');
-          _context.prev = 2;
-          _context.next = 5;
+          isRequestLikeInitialSearch = !pageCursor && !searchString;
+          initialResponseData = initialData.current;
+          _context.prev = 4;
+          if (!(isRequestLikeInitialSearch && initialResponseData)) {
+            _context.next = 9;
+            break;
+          }
+          _context.t0 = initialResponseData;
+          _context.next = 12;
+          break;
+        case 9:
+          _context.next = 11;
           return getFieldValues({
             cloudId: cloudId,
             jql: '',
@@ -47,35 +60,44 @@ export var useFilterOptions = function useFilterOptions(_ref) {
             searchString: searchString,
             pageCursor: pageCursor
           });
-        case 5:
-          response = _context.sent;
+        case 11:
+          _context.t0 = _context.sent;
+        case 12:
+          response = _context.t0;
           if (!(response.errors && response.errors.length > 0)) {
-            _context.next = 9;
+            _context.next = 16;
             break;
           }
           setStatus('rejected');
           return _context.abrupt("return");
-        case 9:
+        case 16:
           isNewSearch = !pageCursor;
           if (isNewSearch) {
             setFilterOptions(mapFieldValuesToFilterOptions(response));
+            if (isRequestLikeInitialSearch) {
+              /**
+               * The initial dataset is used in couple of paths, eg: when a user searches and clears the search text.
+               * During these times, we dont want to fetch data again and again, hence a mini cache setup to store and provide the initial dataset
+               */
+              initialData.current = response;
+            }
           } else {
             setFilterOptions([].concat(_toConsumableArray(filterOptions), _toConsumableArray(mapFieldValuesToFilterOptions(response))));
           }
           setTotalCount(mapFieldValuesToTotalCount(response));
           setNextPageCursor(mapFieldValuesToPageCursor(response));
           setStatus('resolved');
-          _context.next = 19;
+          _context.next = 26;
           break;
-        case 16:
-          _context.prev = 16;
-          _context.t0 = _context["catch"](2);
+        case 23:
+          _context.prev = 23;
+          _context.t1 = _context["catch"](4);
           setStatus('rejected');
-        case 19:
+        case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 16]]);
+    }, _callee, null, [[4, 23]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
   return {
     filterOptions: filterOptions,

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import CloseIcon from '@atlaskit/icon/glyph/cross-circle';
+import SearchIcon from '@atlaskit/icon/glyph/search';
+import { Box, xcss } from '@atlaskit/primitives';
+import { components } from '@atlaskit/select';
+var customDropdownIndicatorStyles = xcss({
+  display: 'flex',
+  cursor: 'pointer',
+  justifyContent: 'center',
+  width: "var(--ds-space-400, 32px)"
+});
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
+    xcss: customDropdownIndicatorStyles,
+    onClick: function onClick() {
+      if (selectProps.inputValue) {
+        selectProps.onInputChange && selectProps.onInputChange('', {
+          action: 'input-change',
+          prevInputValue: selectProps.inputValue
+        });
+      }
+    }
+  }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
+    size: "small",
+    label: ""
+  }) : /*#__PURE__*/React.createElement(SearchIcon, {
+    size: "small",
+    label: ""
+  })));
+};
+export default CustomDropdownIndicator;

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

@@ -4,11 +4,13 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
 import CustomControl from './control';
+import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
 import { asyncPopupSelectMessages } from './messages';
@@ -17,12 +19,15 @@ import PopupTrigger from './trigger';
 var noFilterOptions = function noFilterOptions() {
   return true;
 };
+var SEARCH_DEBOUNCE_MS = 350;
 var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
     cloudId = _ref.cloudId,
     selection = _ref.selection,
     _ref$onSelectionChang = _ref.onSelectionChange,
-    onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang;
+    onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var pickerRef = useRef(null);
@@ -42,30 +47,49 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status;
-  var handleInputChange = useCallback(function (searchString, actionMeta) {
-    if (actionMeta.action === 'input-change' && searchString !== searchTerm) {
-      setSearchTerm(searchString);
-    }
-  }, [searchTerm]);
+  var handleDebouncedFetchFilterOptions = useMemo(function () {
+    return debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
+  }, [fetchFilterOptions]);
+  var handleInputChange = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+              setSearchTerm(newSearchTerm);
+              handleDebouncedFetchFilterOptions({
+                searchString: newSearchTerm
+              });
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [handleDebouncedFetchFilterOptions, searchTerm]);
   var handleOptionSelection = function handleOptionSelection(newValue) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  var handleOpenPopup = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+  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')) {
-            _context.next = 3;
+            _context2.next = 3;
             break;
           }
-          _context.next = 3;
+          _context2.next = 3;
           return fetchFilterOptions();
         case 3:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   })), [fetchFilterOptions, status]);
   useEffect(function () {
     if (status === 'resolved') {
@@ -75,6 +99,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [status]);
   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
+
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
     maxMenuWidth: 300,
@@ -96,24 +123,28 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
-      Control: CustomControl
+      Control: CustomControl,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      DropdownIndicator: CustomDropdownIndicator
     },
-    options: filterOptions,
+    options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: formatOptionLabel,
     onChange: handleOptionSelection,
     onInputChange: handleInputChange,
-    target: function target(_ref3) {
-      var isOpen = _ref3.isOpen,
-        triggerProps = _objectWithoutProperties(_ref3, _excluded);
+    target: function target(_ref4) {
+      var isOpen = _ref4.isOpen,
+        triggerProps = _objectWithoutProperties(_ref4, _excluded);
       return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
         filterType: filterType,
         isSelected: isOpen,
-        onClick: handleOpenPopup
+        onClick: handleOpenPopup,
+        isDisabled: isDisabled
       }));
     },
-    footer: /*#__PURE__*/React.createElement(PopupFooter, {
+    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
       currentDisplayCount: filterOptions.length,
       totalCount: totalCount
     })

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

@@ -6,11 +6,13 @@ import { asyncPopupSelectMessages } from './messages';
 var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var filterType = _ref.filterType,
     isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
     onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected,
+    isDisabled: isDisabled,
     onClick: onClick,
     testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {

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

@@ -25,6 +25,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       filterType: filter,
       key: filter,
       selection: selection,
+      isDisabled: !cloudId,
       onSelectionChange: handleSelectionChange
     });
   }));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DropdownIndicatorProps } from '@atlaskit/select';
+import { SelectOption } from '../../types';
+declare const CustomDropdownIndicator: (props: DropdownIndicatorProps<SelectOption, true>) => JSX.Element;
+export default CustomDropdownIndicator;

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

@@ -5,6 +5,7 @@ export interface AsyncPopupSelectProps {
     cloudId: string;
     selection: SelectOption[];
     onSelectionChange?: (selection: SelectOption[]) => void;
+    isDisabled?: boolean;
 }
-declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, }: AsyncPopupSelectProps) => JSX.Element;
+declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
 export default AsyncPopupSelect;

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

@@ -3,6 +3,7 @@ import { BasicFilterFieldType } from '../../types';
 export interface PopupTriggerProps {
     filterType: BasicFilterFieldType;
     isSelected?: boolean;
+    isDisabled?: boolean;
     onClick?: () => void;
 }
 declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DropdownIndicatorProps } from '@atlaskit/select';
+import { SelectOption } from '../../types';
+declare const CustomDropdownIndicator: (props: DropdownIndicatorProps<SelectOption, true>) => JSX.Element;
+export default CustomDropdownIndicator;

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

@@ -5,6 +5,7 @@ export interface AsyncPopupSelectProps {
     cloudId: string;
     selection: SelectOption[];
     onSelectionChange?: (selection: SelectOption[]) => void;
+    isDisabled?: boolean;
 }
-declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, }: AsyncPopupSelectProps) => JSX.Element;
+declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
 export default AsyncPopupSelect;

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

@@ -3,6 +3,7 @@ import { BasicFilterFieldType } from '../../types';
 export interface PopupTriggerProps {
     filterType: BasicFilterFieldType;
     isSelected?: boolean;
+    isDisabled?: boolean;
     onClick?: () => void;
 }
 declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;

package/package.json

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