@atlaskit/link-datasource 1.16.4 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-datasource
 
+## 1.17.0
+
+### Minor Changes
+
+- [#43023](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43023) [`312be02e858`](https://bitbucket.org/atlassian/atlassian-frontend/commits/312be02e858) - [ux] Basic filter dropdown button label now includes first selected item's name. If multiple items are selected then a badge now indicates the remaining number of items. Selected options are also reordered to the top of the select list.
+
+### Patch Changes
+
+- [#42504](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42504) [`8ee7afb2d85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ee7afb2d85) - Added DatasourceDataSchema model.
+  Used fields in the request for applying schema.
+- Updated dependencies
+
+## 1.16.5
+
+### Patch Changes
+
+- [#43103](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43103) [`effb3f0234c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/effb3f0234c) - Add ui analytics event when error UI is displayed for basic filter search.
+
 ## 1.16.4
 
 ### 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.16.4"
+  packageVersion: "1.17.0"
 };

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -20,6 +20,8 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     fieldKeys = _ref$fieldKeys === void 0 ? [] : _ref$fieldKeys;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var idFieldCount = 1;
+  var keyFieldCount = 1;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     defaultVisibleColumnKeys = _useState2[0],
@@ -28,42 +30,48 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     lastRequestedFieldKeys = _useState4[0],
     setLastRequestedFieldKeys = _useState4[1];
-  var _useState5 = (0, _react.useState)('empty'),
+  var _useState5 = (0, _react.useState)({
+      properties: []
+    }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    status = _useState6[0],
-    setStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
+    fullSchema = _useState6[0],
+    setFullSchema = _useState6[1];
+  var _useState7 = (0, _react.useState)('empty'),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    responseItems = _useState8[0],
-    setResponseItems = _useState8[1];
-  var _useState9 = (0, _react.useState)(true),
+    status = _useState8[0],
+    setStatus = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    hasNextPage = _useState10[0],
-    setHasNextPage = _useState10[1];
-  var _useState11 = (0, _react.useState)(undefined),
+    responseItems = _useState10[0],
+    setResponseItems = _useState10[1];
+  var _useState11 = (0, _react.useState)(true),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    nextCursor = _useState12[0],
-    setNextCursor = _useState12[1];
-  var _useState13 = (0, _react.useState)([]),
+    hasNextPage = _useState12[0],
+    setHasNextPage = _useState12[1];
+  var _useState13 = (0, _react.useState)(undefined),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    columns = _useState14[0],
-    setColumns = _useState14[1];
-  var _useState15 = (0, _react.useState)(undefined),
+    nextCursor = _useState14[0],
+    setNextCursor = _useState14[1];
+  var _useState15 = (0, _react.useState)([]),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    totalCount = _useState16[0],
-    setTotalCount = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
+    columns = _useState16[0],
+    setColumns = _useState16[1];
+  var _useState17 = (0, _react.useState)(undefined),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    shouldForceRequest = _useState18[0],
-    setShouldForceRequest = _useState18[1];
-  var _useState19 = (0, _react.useState)([]),
+    totalCount = _useState18[0],
+    setTotalCount = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    destinationObjectTypes = _useState20[0],
-    setDestinationObjectTypes = _useState20[1];
-  var _useState21 = (0, _react.useState)(),
+    shouldForceRequest = _useState20[0],
+    setShouldForceRequest = _useState20[1];
+  var _useState21 = (0, _react.useState)([]),
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    extensionKey = _useState22[0],
-    setExtensionKey = _useState22[1];
+    destinationObjectTypes = _useState22[0],
+    setDestinationObjectTypes = _useState22[1];
+  var _useState23 = (0, _react.useState)(),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    extensionKey = _useState24[0],
+    setExtensionKey = _useState24[1];
   var _useDatasourceClientE = (0, _linkClientExtension.useDatasourceClientExtension)(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
@@ -121,21 +129,39 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       }
     }, _callee, null, [[2, 17]]);
   })), [columns, datasourceId, getDatasourceDetails, parameters]);
-  var applySchemaProperties = (0, _react.useCallback)(function (properties) {
-    if (!(0, _isEqual.default)(columns, properties)) {
-      setColumns(properties);
+  var applySchemaProperties = (0, _react.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 (!(0, _isEqual.default)(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 (!(0, _isEqual.default)(defaultVisibleColumnKeys, defaultProperties)) {
-      setDefaultVisibleColumnKeys(defaultProperties);
+    if (!(0, _isEqual.default)(defaultVisibleColumnKeys, newProperties)) {
+      setDefaultVisibleColumnKeys(newProperties);
     }
-    if (!(0, _isEqual.default)(lastRequestedFieldKeys, defaultProperties)) {
-      setLastRequestedFieldKeys(defaultProperties);
+    if (!(0, _isEqual.default)(lastRequestedFieldKeys, newProperties)) {
+      setLastRequestedFieldKeys(newProperties);
     }
   }, [columns, defaultVisibleColumnKeys, lastRequestedFieldKeys]);
   var onNextPage = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
@@ -145,6 +171,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       shouldRequestFirstPage,
       _requestInfo$shouldFo,
       shouldForceRequest,
+      isFullSchemaLoaded,
       datasourceDataRequest,
       _yield$getDatasourceD2,
       _yield$getDatasourceD3,
@@ -171,18 +198,19 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           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: _linkClientExtension.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;
@@ -194,12 +222,12 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           _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);
@@ -214,8 +242,8 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           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) {
@@ -228,25 +256,25 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
             });
           }
           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 = (0, _react.useCallback)(function (options) {
     setStatus('empty');
     setResponseItems([]);
@@ -254,6 +282,9 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     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/cjs/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -27,10 +27,14 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     status = _useState6[0],
     setStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)(undefined),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    nextPageCursor = _useState8[0],
-    setNextPageCursor = _useState8[1];
+    errors = _useState8[0],
+    setErrors = _useState8[1];
+  var _useState9 = (0, _react.useState)(undefined),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    nextPageCursor = _useState10[0],
+    setNextPageCursor = _useState10[1];
   var initialData = (0, _react.useRef)();
   var _useBasicFilterAGG = (0, _useBasicFilterAGG2.useBasicFilterAGG)(),
     getFieldValues = _useBasicFilterAGG.getFieldValues;
@@ -73,12 +77,13 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
         case 13:
           response = _context.t0;
           if (!(response.errors && response.errors.length > 0)) {
-            _context.next = 17;
+            _context.next = 18;
             break;
           }
           setStatus('rejected');
+          setErrors(response.errors);
           return _context.abrupt("return");
-        case 17:
+        case 18:
           if (isNewSearch) {
             setFilterOptions((0, _transformers.mapFieldValuesToFilterOptions)(response));
             if (isRequestLikeInitialSearch) {
@@ -94,23 +99,25 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
           setTotalCount((0, _transformers.mapFieldValuesToTotalCount)(response));
           setNextPageCursor((0, _transformers.mapFieldValuesToPageCursor)(response));
           setStatus('resolved');
-          _context.next = 26;
+          _context.next = 28;
           break;
-        case 23:
-          _context.prev = 23;
+        case 24:
+          _context.prev = 24;
           _context.t1 = _context["catch"](5);
+          setErrors([_context.t1]);
           setStatus('rejected');
-        case 26:
+        case 28:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[5, 23]]);
+    }, _callee, null, [[5, 24]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
   return {
     filterOptions: filterOptions,
     fetchFilterOptions: fetchFilterOptions,
     totalCount: totalCount,
     pageCursor: nextPageCursor,
-    status: status
+    status: status,
+    errors: status === 'rejected' ? errors : []
   };
 };

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

@@ -9,6 +9,7 @@ exports.default = exports.SEARCH_DEBOUNCE_MS = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -41,7 +42,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var pickerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     searchTerm = _useState2[0],
@@ -50,6 +50,10 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
+  var _useState5 = (0, _react.useState)(selectedOptions),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    sortedOptions = _useState6[0],
+    setSortedOptions = _useState6[1];
   var _useFilterOptions = (0, _useFilterOptions2.useFilterOptions)({
       filterType: filterType,
       cloudId: cloudId
@@ -58,7 +62,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status,
-    pageCursor = _useFilterOptions.pageCursor;
+    pageCursor = _useFilterOptions.pageCursor,
+    errors = _useFilterOptions.errors;
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
       fetchFilterOptions({
         searchString: searchString
@@ -89,14 +94,46 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  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
+  var sortOptionsOnPopupOpen = (0, _react.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((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
+    setSortedOptions(newOptions);
+  }, [selectedOptions, filterOptions]);
+  var sortOptionsOnResolve = (0, _react.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((0, _toConsumableArray2.default)(sortedOptionsFiltered), (0, _toConsumableArray2.default)(newOptions)));
+    }
+  }, [filterOptions, sortedOptions]);
   var handleShowMore = (0, _react.useCallback)(function () {
     if (pageCursor) {
       fetchFilterOptions({
@@ -105,28 +142,34 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
+  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
+      });
+    } else if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
   (0, _react.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.default.createElement(_select.PopupSelect, {
     isMulti: true,
     maxMenuWidth: 300,
     minMenuWidth: 300,
-    ref: pickerRef,
     testId: "jlol-basic-filter-popup-select",
     inputId: "jlol-basic-filter-popup-select--input"
     /*
@@ -152,7 +195,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
           isLoading: isLoading,
           isLoadingMore: isLoadingMore,
           showMore: shouldDisplayShowMoreButton,
-          handleShowMore: handleShowMore
+          handleShowMore: handleShowMore,
+          errors: errors
         }));
       },
       DropdownIndicator: _dropdownIndicator.default,
@@ -161,7 +205,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.default,
@@ -172,6 +216,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
       return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
         filterType: filterType,
+        selectedOptions: selectedOptions,
         isSelected: isOpen,
         onClick: handleOpenPopup,
         isDisabled: isDisabled

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

@@ -6,28 +6,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
 var _messages = require("./messages");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var triggerButtonLabelStyles = (0, _primitives.xcss)({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '150px'
+});
+var badgeStyles = (0, _primitives.xcss)({
+  marginLeft: 'space.050'
+});
 var PopupTrigger = /*#__PURE__*/(0, _react.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 = (0, _slicedToArray2.default)(_ref2, 1),
+    firstOption = _ref3[0];
+  var hasOptions = selectedOptions && selectedOptions.length > 0;
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     ref: ref,
     appearance: "default",
-    isSelected: isSelected,
+    isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     onClick: onClick,
     testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
     iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
       label: ""
     })
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")]));
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: triggerButtonLabelStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_badge.default, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1))));
 });
 var _default = exports.default = PopupTrigger;

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

@@ -21,14 +21,17 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
   var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    selection = _useState2[0];
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
   (0, _react.useEffect)(function () {
     if ((0, _utils.isValidJql)(jql)) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  var handleSelectionChange = function handleSelectionChange() {};
+  var handleSelectionChange = (0, _react.useCallback)(function (options) {
+    setSelection(options);
+  }, [setSelection]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",

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

@@ -1,16 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useDebounce = require("use-debounce");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _colors = require("@atlaskit/theme/colors");
+var _analytics = require("../../../../../analytics");
+var _asyncPopupSelect = require("../async-popup-select");
 var _messages = require("./messages");
 var _selectMessage = _interopRequireDefault(require("./selectMessage"));
-var CustomErrorMessage = function CustomErrorMessage() {
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var getErrorReasonType = function getErrorReasonType(errors) {
+  var _ref = errors || [],
+    _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+    error = _ref2[0];
+  if (error instanceof Error) {
+    return 'network';
+  }
+  if (errors && errors.length > 0) {
+    return 'agg';
+  }
+  return 'unknown';
+};
+var CustomErrorMessage = function CustomErrorMessage(_ref3) {
+  var filterType = _ref3.filterType,
+    errors = _ref3.errors;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+
+  /**
+   * Debounce is required because our search is debounced
+   * ref: ./noOptionsMessage.tsx
+   */
+  var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function () {
+      fireEvent('ui.error.shown.basicSearchDropdown', {
+        filterType: filterType,
+        reason: getErrorReasonType(errors)
+      });
+    }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
+    debouncedAnalyticsCallback = _useDebouncedCallback2[0];
+  (0, _react.useEffect)(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
   return /*#__PURE__*/_react.default.createElement(_selectMessage.default, {
     icon: /*#__PURE__*/_react.default.createElement(_error.default, {
       primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),

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

@@ -14,13 +14,14 @@ var _showMoreButton = _interopRequireDefault(require("../async-popup-select/show
 var _errorMessage = _interopRequireDefault(require("./errorMessage"));
 var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
-var _excluded = ["filterType", "isLoading", "isLoadingMore", "isError", "isEmpty", "showMore", "handleShowMore", "children"];
+var _excluded = ["filterType", "isLoading", "isLoadingMore", "isError", "isEmpty", "errors", "showMore", "handleShowMore", "children"];
 var CustomMenuList = function CustomMenuList(_ref) {
   var filterType = _ref.filterType,
     isLoading = _ref.isLoading,
     isLoadingMore = _ref.isLoadingMore,
     isError = _ref.isError,
     isEmpty = _ref.isEmpty,
+    errors = _ref.errors,
     showMore = _ref.showMore,
     handleShowMore = _ref.handleShowMore,
     children = _ref.children,
@@ -39,7 +40,10 @@ var CustomMenuList = function CustomMenuList(_ref) {
       return /*#__PURE__*/_react.default.createElement(_loadingMessage.default, null);
     }
     if (isError) {
-      return /*#__PURE__*/_react.default.createElement(_errorMessage.default, null);
+      return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
+        filterType: filterType,
+        errors: errors
+      });
     }
     if (isEmpty) {
       return /*#__PURE__*/_react.default.createElement(_noOptionsMessage.default, {