@atlaskit/link-datasource 1.16.5 → 1.17.1

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
@@ -90,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({
@@ -106,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"
     /*
@@ -163,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,
@@ -174,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/es2019/analytics/constants.js

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

package/dist/es2019/hooks/useAssetsClient.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useDatasourceAnalyticsEvents } from '../analytics';
 import { fetchObjectSchema, fetchObjectSchemas, getWorkspaceId } from '../services/cmdbService';
 const handleAssetsClientErrors = (errorSetter, error) => {
   if (error instanceof Error) {
@@ -16,6 +17,9 @@ export const useAssetsClient = initialParameters => {
   const [objectSchemas, setObjectSchemas] = useState();
   const [totalObjectSchemas, setTotalObjectSchemas] = useState();
   const [objectSchemasError, setObjectSchemasError] = useState();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
 
   /*
    * We wrap this in nested try/catch blocks because we want to handle
@@ -27,19 +31,19 @@ export const useAssetsClient = initialParameters => {
       setLoading(true);
       setWorkspaceError(undefined);
       try {
-        const workspaceId = await getWorkspaceId();
+        const workspaceId = await getWorkspaceId(fireEvent);
         setWorkspaceId(workspaceId);
         // Check schema from initial parameters still exists and fetch name/permissions for schema select
         if (initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId) {
           try {
-            const fetchedObjectSchema = await fetchObjectSchema(workspaceId, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
+            const fetchedObjectSchema = await fetchObjectSchema(workspaceId, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId, fireEvent);
             setExistingObjectSchema(fetchedObjectSchema);
           } catch (fetchObjectSchemaError) {
             handleAssetsClientErrors(setExistingObjectSchemaError, fetchObjectSchemaError);
           }
         }
         try {
-          const fetchedObjectSchemasResponse = await fetchObjectSchemas(workspaceId);
+          const fetchedObjectSchemasResponse = await fetchObjectSchemas(workspaceId, undefined, fireEvent);
           setObjectSchemas(fetchedObjectSchemasResponse.values);
           setTotalObjectSchemas(fetchedObjectSchemasResponse.total);
         } catch (fetchObjectSchemasError) {
@@ -51,7 +55,7 @@ export const useAssetsClient = initialParameters => {
         setLoading(false);
       }
     })();
-  }, [initialParameters]);
+  }, [initialParameters, fireEvent]);
   return {
     workspaceId,
     workspaceError,

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -10,8 +10,13 @@ export const useDatasourceTableState = ({
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const idFieldCount = 1;
+  const keyFieldCount = 1;
   const [defaultVisibleColumnKeys, setDefaultVisibleColumnKeys] = useState([]);
   const [lastRequestedFieldKeys, setLastRequestedFieldKeys] = useState([]);
+  const [fullSchema, setFullSchema] = useState({
+    properties: []
+  });
   const [status, setStatus] = useState('empty');
   const [responseItems, setResponseItems] = useState([]);
   const [hasNextPage, setHasNextPage] = useState(true);
@@ -56,19 +61,38 @@ export const useDatasourceTableState = ({
       setStatus('rejected');
     }
   }, [columns, datasourceId, getDatasourceDetails, parameters]);
-  const applySchemaProperties = useCallback(properties => {
-    if (!isEqual(columns, properties)) {
-      setColumns(properties);
+  const applySchemaProperties = useCallback((schema, fieldKeys) => {
+    let {
+      properties,
+      defaultProperties = []
+    } = schema;
+    let propertiesToBeUsed = properties;
+    const propertyKeysToBeUsed = Array.isArray(fieldKeys) && fieldKeys.length > 0 ? fieldKeys : defaultProperties;
+    if (fieldKeys.length > 0 || defaultProperties.length > 0) {
+      propertiesToBeUsed = properties.filter(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);
+    }
+    if (!isEqual(columns, propertiesToBeUsed)) {
+      setColumns(propertiesToBeUsed);
     }
-    const defaultProperties = properties.map(prop => prop.key);
+    const newProperties = propertiesToBeUsed.map(prop => 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]);
   const onNextPage = useCallback(async (requestInfo = {}) => {
@@ -80,12 +104,13 @@ export const useDatasourceTableState = ({
       shouldRequestFirstPage,
       shouldForceRequest = false
     } = requestInfo;
+    const isFullSchemaLoaded = fullSchema.properties.length > 0;
     const datasourceDataRequest = {
       parameters,
       pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
       pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
       fields: fieldKeys,
-      includeSchema: isSchemaFromData
+      includeSchema: isFullSchemaLoaded ? false : isSchemaFromData
     };
     setStatus('loading');
     try {
@@ -120,8 +145,8 @@ export const useDatasourceTableState = ({
       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);
       }
       const isUserLoadingNextPage = (responseItems === null || responseItems === void 0 ? void 0 : responseItems.length) !== 0 && !shouldRequestFirstPage;
       if (isUserLoadingNextPage) {
@@ -141,7 +166,7 @@ export const useDatasourceTableState = ({
       }
       setStatus('rejected');
     }
-  }, [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent]);
+  }, [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
   const reset = useCallback(options => {
     setStatus('empty');
     setResponseItems([]);
@@ -149,6 +174,9 @@ export const useDatasourceTableState = ({
     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/es2019/hooks/useValidateAqlText.js

@@ -1,9 +1,13 @@
 import { useCallback, useState } from 'react';
+import { useDatasourceAnalyticsEvents } from '../analytics';
 import { validateAql } from '../services/cmdbService';
 export const useValidateAqlText = workspaceId => {
   const [loading, setLoading] = useState(false);
   const [isValidAqlText, setIsValidAqlText] = useState(false);
   const [error, setError] = useState();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const validateAqlText = useCallback(async aql => {
     setLoading(true);
     setError(undefined);
@@ -13,7 +17,7 @@ export const useValidateAqlText = workspaceId => {
       var _validateAqlResponse$;
       const validateAqlResponse = await validateAql(workspaceId, {
         qlQuery: aql
-      });
+      }, fireEvent);
       setIsValidAqlText(validateAqlResponse.isValid);
       isValid = validateAqlResponse.isValid;
       message = ((_validateAqlResponse$ = validateAqlResponse.errors) === null || _validateAqlResponse$ === void 0 ? void 0 : _validateAqlResponse$.iql) || null;
@@ -30,7 +34,7 @@ export const useValidateAqlText = workspaceId => {
       isValid,
       message
     };
-  }, [workspaceId]);
+  }, [workspaceId, fireEvent]);
   return {
     isValidAqlText,
     validateAqlText,

package/dist/es2019/services/cmdbService.js

@@ -1,6 +1,6 @@
 import { request } from '@atlaskit/linking-common';
 import { FetchError, getStatusCodeGroup, mapFetchErrors, PermissionError } from './cmdbService.utils';
-export const getWorkspaceId = async () => {
+export const getWorkspaceId = async fireEvent => {
   const url = '/rest/servicedesk/cmdb/latest/workspace';
   try {
     var _workspaceDetailsResp;
@@ -8,12 +8,15 @@ export const getWorkspaceId = async () => {
     if (!((_workspaceDetailsResp = workspaceDetailsResponse.results) !== null && _workspaceDetailsResp !== void 0 && _workspaceDetailsResp.length)) {
       throw new PermissionError('No workspace results found');
     }
+    fireEvent && fireEvent('operational.getWorkspaceId.success', {});
     return workspaceDetailsResponse.results[0].id;
   } catch (err) {
     let error = mapFetchErrors(err);
     if (error instanceof FetchError) {
-      // TODO Fire error operational event for workspace here before remapping to PermissionError
-      // Only 429 and 5xx errors will be treated as FetchErrors otherwise PermissionError
+      fireEvent && fireEvent('operational.getWorkspaceId.failed', {
+        statusCodeGroup: getStatusCodeGroup(error)
+      });
+      // Only 429 and5xx errors will be treated as FetchErrors otherwise PermissionError
       if (getStatusCodeGroup(error) !== '5xx' && error.statusCode !== 429) {
         error = new PermissionError('Failed to fetch workspace');
       }
@@ -21,17 +24,21 @@ export const getWorkspaceId = async () => {
     throw error;
   }
 };
-export const validateAql = async (workspaceId, data) => {
+export const validateAql = async (workspaceId, data, fireEvent) => {
   const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/aql/validate`;
   try {
-    return await request('post', url, {
+    const response = await request('post', url, {
       qlQuery: data.qlQuery,
       context: 'SMART_LINKS'
     }, undefined, [200, 201, 202, 203, 204]);
+    fireEvent && fireEvent('operational.validateAql.success', {});
+    return response;
   } catch (err) {
     let error = mapFetchErrors(err);
     if (error instanceof FetchError) {
-      // TODO Fire error operational event for aql here before remapping to PermissionError
+      fireEvent && fireEvent('operational.validateAql.failed', {
+        statusCodeGroup: getStatusCodeGroup(error)
+      });
       if (error.statusCode === 401 || error.statusCode === 403) {
         error = new PermissionError('Failed to fetch object schemas');
       }
@@ -39,14 +46,18 @@ export const validateAql = async (workspaceId, data) => {
     throw error;
   }
 };
-export const fetchObjectSchema = async (workspaceId, schemaId) => {
+export const fetchObjectSchema = async (workspaceId, schemaId, fireEvent) => {
   const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/objectschema/${schemaId}`;
   try {
-    return await request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+    const response = await request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+    fireEvent && fireEvent('operational.objectSchema.success', {});
+    return response;
   } catch (err) {
     let error = mapFetchErrors(err);
     if (error instanceof FetchError) {
-      // TODO Fire error operational event for object schema here before remapping to PermissionError
+      fireEvent && fireEvent('operational.objectSchema.failed', {
+        statusCodeGroup: getStatusCodeGroup(error)
+      });
       if (error.statusCode === 401 || error.statusCode === 403) {
         error = new PermissionError('Failed to fetch object schemas');
       }
@@ -54,18 +65,22 @@ export const fetchObjectSchema = async (workspaceId, schemaId) => {
     throw error;
   }
 };
-export const fetchObjectSchemas = async (workspaceId, query) => {
+export const fetchObjectSchemas = async (workspaceId, query, fireEvent) => {
   const queryParams = new URLSearchParams();
   queryParams.set('maxResults', '20');
   queryParams.set('includeCounts', 'false');
   query && queryParams.set('query', query);
   const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/objectschema/list?${queryParams}`;
   try {
-    return await request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+    const response = await request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+    fireEvent && fireEvent('operational.objectSchemas.success', {});
+    return response;
   } catch (err) {
     let error = mapFetchErrors(err);
     if (error instanceof FetchError) {
-      // TODO Fire error operational event for object schemas here before remapping to PermissionError
+      fireEvent && fireEvent('operational.objectSchemas.failed', {
+        statusCodeGroup: getStatusCodeGroup(error)
+      });
       if (error.statusCode === 401 || error.statusCode === 403) {
         error = new PermissionError('Failed to fetch object schemas');
       }

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