@atlaskit/link-datasource 1.16.5 → 1.17.0

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
@@ -24,9 +24,9 @@ const AsyncPopupSelect = ({
   const {
     formatMessage
   } = useIntl();
-  const pickerRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
+  const [sortedOptions, setSortedOptions] = useState(selectedOptions);
   const {
     filterOptions,
     fetchFilterOptions,
@@ -53,14 +53,32 @@ const AsyncPopupSelect = ({
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  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
+  const sortOptionsOnPopupOpen = useCallback(() => {
+    if (selectedOptions.length === 0) {
+      setSortedOptions(filterOptions);
+      return;
+    }
+    const nonSelectedOptions = filterOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
+    const newOptions = [...selectedOptions, ...nonSelectedOptions];
+    setSortedOptions(newOptions);
+  }, [selectedOptions, filterOptions]);
+  const sortOptionsOnResolve = useCallback(() => {
+    const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));
+    let shouldSetSortOptions = false;
+    if (sortedOptions.length !== filterOptions.length) {
+      shouldSetSortOptions = true;
+    } else {
+      sortedOptions.forEach(sortedOption => {
+        if (!filterOptions.some(filterOption => filterOption.value === sortedOption.value)) {
+          shouldSetSortOptions = true;
+        }
       });
     }
-  }, [fetchFilterOptions, searchTerm, status]);
+    if (shouldSetSortOptions) {
+      const sortedOptionsFiltered = sortedOptions.filter(sortedOption => filterOptions.some(filterOption => filterOption.value === sortedOption.value));
+      setSortedOptions([...sortedOptionsFiltered, ...newOptions]);
+    }
+  }, [filterOptions, sortedOptions]);
   const handleShowMore = useCallback(() => {
     if (pageCursor) {
       fetchFilterOptions({
@@ -69,28 +87,34 @@ const AsyncPopupSelect = ({
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
+  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
+      });
+    } else if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
   useEffect(() => {
     if (status === 'resolved') {
-      var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
-      // necessary to refocus the search input after the loading state
-      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();
+      sortOptionsOnResolve();
     }
-  }, [status]);
+  }, [sortOptionsOnResolve, status]);
   const filterOptionsLength = filterOptions.length;
   const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  const popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
   const areAllResultsLoaded = filterOptions.length === totalCount;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  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,
     maxMenuWidth: 300,
     minMenuWidth: 300,
-    ref: pickerRef,
     testId: "jlol-basic-filter-popup-select",
     inputId: "jlol-basic-filter-popup-select--input"
     /*
@@ -124,7 +148,7 @@ const AsyncPopupSelect = ({
       IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
 
-    options: options,
+    options: popupSelectOptions,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: formatOptionLabel,
@@ -135,6 +159,7 @@ const AsyncPopupSelect = ({
       ...triggerProps
     }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
       filterType: filterType,
+      selectedOptions: selectedOptions,
       isSelected: isOpen,
       onClick: handleOpenPopup,
       isDisabled: isDisabled

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

@@ -1,24 +1,44 @@
 import React, { forwardRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { asyncPopupSelectMessages } from './messages';
+const triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '150px'
+});
+const badgeStyles = xcss({
+  marginLeft: 'space.050'
+});
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   filterType,
   isSelected,
   isDisabled,
-  onClick
+  onClick,
+  selectedOptions
 }, ref) => {
+  const [firstOption] = selectedOptions || [];
+  const hasOptions = selectedOptions && selectedOptions.length > 0;
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
-    isSelected: isSelected,
+    isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     onClick: onClick,
     testId: `jlol-basic-filter-${filterType}-trigger`,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]));
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: triggerButtonLabelStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1))));
 });
 export default PopupTrigger;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
 import AsyncPopupSelect from './async-popup-select';
@@ -10,13 +10,15 @@ const BasicFilterContainer = ({
   jql,
   cloudId
 }) => {
-  const [selection] = useState([]);
+  const [selection, setSelection] = useState([]);
   useEffect(() => {
     if (isValidJql(jql)) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  const handleSelectionChange = () => {};
+  const handleSelectionChange = useCallback(options => {
+    setSelection(options);
+  }, [setSelection]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",

package/dist/esm/analytics/constants.js

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

package/dist/esm/hooks/useDatasourceTableState.js

@@ -13,6 +13,8 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     fieldKeys = _ref$fieldKeys === void 0 ? [] : _ref$fieldKeys;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var idFieldCount = 1;
+  var keyFieldCount = 1;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     defaultVisibleColumnKeys = _useState2[0],
@@ -21,42 +23,48 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     lastRequestedFieldKeys = _useState4[0],
     setLastRequestedFieldKeys = _useState4[1];
-  var _useState5 = useState('empty'),
+  var _useState5 = useState({
+      properties: []
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    status = _useState6[0],
-    setStatus = _useState6[1];
-  var _useState7 = useState([]),
+    fullSchema = _useState6[0],
+    setFullSchema = _useState6[1];
+  var _useState7 = useState('empty'),
     _useState8 = _slicedToArray(_useState7, 2),
-    responseItems = _useState8[0],
-    setResponseItems = _useState8[1];
-  var _useState9 = useState(true),
+    status = _useState8[0],
+    setStatus = _useState8[1];
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    hasNextPage = _useState10[0],
-    setHasNextPage = _useState10[1];
-  var _useState11 = useState(undefined),
+    responseItems = _useState10[0],
+    setResponseItems = _useState10[1];
+  var _useState11 = useState(true),
     _useState12 = _slicedToArray(_useState11, 2),
-    nextCursor = _useState12[0],
-    setNextCursor = _useState12[1];
-  var _useState13 = useState([]),
+    hasNextPage = _useState12[0],
+    setHasNextPage = _useState12[1];
+  var _useState13 = useState(undefined),
     _useState14 = _slicedToArray(_useState13, 2),
-    columns = _useState14[0],
-    setColumns = _useState14[1];
-  var _useState15 = useState(undefined),
+    nextCursor = _useState14[0],
+    setNextCursor = _useState14[1];
+  var _useState15 = useState([]),
     _useState16 = _slicedToArray(_useState15, 2),
-    totalCount = _useState16[0],
-    setTotalCount = _useState16[1];
-  var _useState17 = useState(false),
+    columns = _useState16[0],
+    setColumns = _useState16[1];
+  var _useState17 = useState(undefined),
     _useState18 = _slicedToArray(_useState17, 2),
-    shouldForceRequest = _useState18[0],
-    setShouldForceRequest = _useState18[1];
-  var _useState19 = useState([]),
+    totalCount = _useState18[0],
+    setTotalCount = _useState18[1];
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    destinationObjectTypes = _useState20[0],
-    setDestinationObjectTypes = _useState20[1];
-  var _useState21 = useState(),
+    shouldForceRequest = _useState20[0],
+    setShouldForceRequest = _useState20[1];
+  var _useState21 = useState([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    extensionKey = _useState22[0],
-    setExtensionKey = _useState22[1];
+    destinationObjectTypes = _useState22[0],
+    setDestinationObjectTypes = _useState22[1];
+  var _useState23 = useState(),
+    _useState24 = _slicedToArray(_useState23, 2),
+    extensionKey = _useState24[0],
+    setExtensionKey = _useState24[1];
   var _useDatasourceClientE = useDatasourceClientExtension(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
@@ -114,21 +122,39 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       }
     }, _callee, null, [[2, 17]]);
   })), [columns, datasourceId, getDatasourceDetails, parameters]);
-  var applySchemaProperties = useCallback(function (properties) {
-    if (!isEqual(columns, properties)) {
-      setColumns(properties);
+  var applySchemaProperties = useCallback(function (schema, fieldKeys) {
+    var properties = schema.properties,
+      _schema$defaultProper = schema.defaultProperties,
+      defaultProperties = _schema$defaultProper === void 0 ? [] : _schema$defaultProper;
+    var propertiesToBeUsed = properties;
+    var propertyKeysToBeUsed = Array.isArray(fieldKeys) && fieldKeys.length > 0 ? fieldKeys : defaultProperties;
+    if (fieldKeys.length > 0 || defaultProperties.length > 0) {
+      propertiesToBeUsed = properties.filter(function (property) {
+        return propertyKeysToBeUsed.includes(property.key);
+      });
+    }
+
+    /*Jira adds identifier fields like id and key to all data responses
+    Since defaultProperties already send back the keyField, we are accounting only
+    for the idField when we are using defaulProperties
+    */
+    if (properties.length > fieldKeys.length + idFieldCount + keyFieldCount && properties.length > defaultProperties.length + idFieldCount) {
+      setFullSchema(schema);
     }
-    var defaultProperties = properties.map(function (prop) {
+    if (!isEqual(columns, propertiesToBeUsed)) {
+      setColumns(propertiesToBeUsed);
+    }
+    var newProperties = propertiesToBeUsed.map(function (prop) {
       return prop.key;
     });
 
     // when loading for the first time, we will need to set default visible props as /data does not give you that info
     // also, since we dont pass any fields, we will need to set this info as lastRequestedFieldKeys
-    if (!isEqual(defaultVisibleColumnKeys, defaultProperties)) {
-      setDefaultVisibleColumnKeys(defaultProperties);
+    if (!isEqual(defaultVisibleColumnKeys, newProperties)) {
+      setDefaultVisibleColumnKeys(newProperties);
     }
-    if (!isEqual(lastRequestedFieldKeys, defaultProperties)) {
-      setLastRequestedFieldKeys(defaultProperties);
+    if (!isEqual(lastRequestedFieldKeys, newProperties)) {
+      setLastRequestedFieldKeys(newProperties);
     }
   }, [columns, defaultVisibleColumnKeys, lastRequestedFieldKeys]);
   var onNextPage = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
@@ -138,6 +164,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       shouldRequestFirstPage,
       _requestInfo$shouldFo,
       shouldForceRequest,
+      isFullSchemaLoaded,
       datasourceDataRequest,
       _yield$getDatasourceD2,
       _yield$getDatasourceD3,
@@ -164,18 +191,19 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           return _context2.abrupt("return");
         case 3:
           _requestInfo$isSchema = requestInfo.isSchemaFromData, isSchemaFromData = _requestInfo$isSchema === void 0 ? true : _requestInfo$isSchema, shouldRequestFirstPage = requestInfo.shouldRequestFirstPage, _requestInfo$shouldFo = requestInfo.shouldForceRequest, shouldForceRequest = _requestInfo$shouldFo === void 0 ? false : _requestInfo$shouldFo;
+          isFullSchemaLoaded = fullSchema.properties.length > 0;
           datasourceDataRequest = {
             parameters: parameters,
             pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
             pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
             fields: fieldKeys,
-            includeSchema: isSchemaFromData
+            includeSchema: isFullSchemaLoaded ? false : isSchemaFromData
           };
           setStatus('loading');
-          _context2.prev = 6;
-          _context2.next = 9;
+          _context2.prev = 7;
+          _context2.next = 10;
           return getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
-        case 9:
+        case 10:
           _yield$getDatasourceD2 = _context2.sent;
           _yield$getDatasourceD3 = _yield$getDatasourceD2.meta;
           access = _yield$getDatasourceD3.access;
@@ -187,12 +215,12 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           _totalCount = _yield$getDatasourceD4.totalCount;
           schema = _yield$getDatasourceD4.schema;
           if (!(access === 'forbidden' || access === 'unauthorized')) {
-            _context2.next = 22;
+            _context2.next = 23;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 22:
+        case 23:
           setExtensionKey(_extensionKey);
           setDestinationObjectTypes(_destinationObjectTypes);
           setTotalCount(_totalCount);
@@ -207,8 +235,8 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           if (fieldKeys.length > 0) {
             setLastRequestedFieldKeys(fieldKeys);
           }
-          if (isSchemaFromData && schema && items.length > 0) {
-            applySchemaProperties(schema.properties);
+          if ((isSchemaFromData && schema || fullSchema.properties.length > 0) && items.length > 0) {
+            applySchemaProperties(schema || fullSchema, fieldKeys);
           }
           isUserLoadingNextPage = (responseItems === null || responseItems === void 0 ? void 0 : responseItems.length) !== 0 && !shouldRequestFirstPage;
           if (isUserLoadingNextPage) {
@@ -221,25 +249,25 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
             });
           }
           setStatus('resolved');
-          _context2.next = 41;
+          _context2.next = 42;
           break;
-        case 35:
-          _context2.prev = 35;
-          _context2.t0 = _context2["catch"](6);
+        case 36:
+          _context2.prev = 36;
+          _context2.t0 = _context2["catch"](7);
           if (!(_context2.t0 instanceof Response && (_context2.t0.status === 401 || _context2.t0.status === 403))) {
-            _context2.next = 40;
+            _context2.next = 41;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 40:
-          setStatus('rejected');
         case 41:
+          setStatus('rejected');
+        case 42:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[6, 35]]);
-  })), [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent]);
+    }, _callee2, null, [[7, 36]]);
+  })), [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
   var reset = useCallback(function (options) {
     setStatus('empty');
     setResponseItems([]);
@@ -247,6 +275,9 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setNextCursor(undefined);
     setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
+    setFullSchema({
+      properties: []
+    });
     setShouldForceRequest((options === null || options === void 0 ? void 0 : options.shouldForceRequest) || false);
     if (options !== null && options !== void 0 && options.shouldResetColumns) {
       setColumns([]);

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

@@ -1,10 +1,11 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
@@ -31,7 +32,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var pickerRef = useRef(null);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -40,6 +40,10 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
+  var _useState5 = useState(selectedOptions),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sortedOptions = _useState6[0],
+    setSortedOptions = _useState6[1];
   var _useFilterOptions = useFilterOptions({
       filterType: filterType,
       cloudId: cloudId
@@ -80,14 +84,46 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  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
+  var sortOptionsOnPopupOpen = useCallback(function () {
+    if (selectedOptions.length === 0) {
+      setSortedOptions(filterOptions);
+      return;
+    }
+    var nonSelectedOptions = filterOptions.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var newOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
+    setSortedOptions(newOptions);
+  }, [selectedOptions, filterOptions]);
+  var sortOptionsOnResolve = useCallback(function () {
+    var newOptions = filterOptions.filter(function (option) {
+      return !sortedOptions.find(function (sortedOption) {
+        return sortedOption.value === option.value;
+      });
+    });
+    var shouldSetSortOptions = false;
+    if (sortedOptions.length !== filterOptions.length) {
+      shouldSetSortOptions = true;
+    } else {
+      sortedOptions.forEach(function (sortedOption) {
+        if (!filterOptions.some(function (filterOption) {
+          return filterOption.value === sortedOption.value;
+        })) {
+          shouldSetSortOptions = true;
+        }
       });
     }
-  }, [fetchFilterOptions, searchTerm, status]);
+    if (shouldSetSortOptions) {
+      var sortedOptionsFiltered = sortedOptions.filter(function (sortedOption) {
+        return filterOptions.some(function (filterOption) {
+          return filterOption.value === sortedOption.value;
+        });
+      });
+      setSortedOptions([].concat(_toConsumableArray(sortedOptionsFiltered), _toConsumableArray(newOptions)));
+    }
+  }, [filterOptions, sortedOptions]);
   var handleShowMore = useCallback(function () {
     if (pageCursor) {
       fetchFilterOptions({
@@ -96,28 +132,34 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
+  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
+      });
+    } else if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
   useEffect(function () {
     if (status === 'resolved') {
-      var _pickerRef$current;
-      // necessary to refocus the search input after the loading state
-      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();
+      sortOptionsOnResolve();
     }
-  }, [status]);
+  }, [sortOptionsOnResolve, status]);
   var filterOptionsLength = filterOptions.length;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
   var isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  var popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
   var areAllResultsLoaded = filterOptions.length === totalCount;
   var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  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,
     maxMenuWidth: 300,
     minMenuWidth: 300,
-    ref: pickerRef,
     testId: "jlol-basic-filter-popup-select",
     inputId: "jlol-basic-filter-popup-select--input"
     /*
@@ -153,7 +195,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
 
-    options: options,
+    options: popupSelectOptions,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: formatOptionLabel,
@@ -164,6 +206,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         triggerProps = _objectWithoutProperties(_ref3, _excluded);
       return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
         filterType: filterType,
+        selectedOptions: selectedOptions,
         isSelected: isOpen,
         onClick: handleOpenPopup,
         isDisabled: isDisabled

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

@@ -1,23 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { asyncPopupSelectMessages } from './messages';
+var triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '150px'
+});
+var badgeStyles = xcss({
+  marginLeft: 'space.050'
+});
 var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var filterType = _ref.filterType,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    selectedOptions = _ref.selectedOptions;
+  var _ref2 = selectedOptions || [],
+    _ref3 = _slicedToArray(_ref2, 1),
+    firstOption = _ref3[0];
+  var hasOptions = selectedOptions && selectedOptions.length > 0;
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
-    isSelected: isSelected,
+    isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     onClick: onClick,
     testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages["".concat(filterType, "Label")]));
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: triggerButtonLabelStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1))));
 });
 export default PopupTrigger;

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

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
 import AsyncPopupSelect from './async-popup-select';
@@ -11,14 +11,17 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
   var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 1),
-    selection = _useState2[0];
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
   useEffect(function () {
     if (isValidJql(jql)) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  var handleSelectionChange = function handleSelectionChange() {};
+  var handleSelectionChange = useCallback(function (options) {
+    setSelection(options);
+  }, [setSelection]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { BasicFilterFieldType } from '../../types';
+import { BasicFilterFieldType, SelectOption } from '../../types';
 export interface PopupTriggerProps {
     filterType: BasicFilterFieldType;
+    selectedOptions?: ReadonlyArray<SelectOption>;
     isSelected?: boolean;
     isDisabled?: boolean;
     onClick?: () => void;