@atlaskit/link-datasource 1.16.3 → 1.16.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 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
+
+- [#43137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43137) [`4d201f9fe57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d201f9fe57) - [ux] Updates spacing to ensure it is consistent between search input and mode switcher on toggle between JQL and Basic and when Basic Filters feature flag is on.
+
 ## 1.16.3
 
 ### 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.3"
+  packageVersion: "1.16.5"
 };

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

@@ -58,7 +58,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
@@ -152,7 +153,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
           isLoading: isLoading,
           isLoadingMore: isLoadingMore,
           showMore: shouldDisplayShowMoreButton,
-          handleShowMore: handleShowMore
+          handleShowMore: handleShowMore,
+          errors: errors
         }));
       },
       DropdownIndicator: _dropdownIndicator.default,

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

@@ -14,6 +14,9 @@ var _asyncPopupSelect = _interopRequireDefault(require("./async-popup-select"));
 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 availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
+var basicFilterContainerStyles = (0, _primitives.xcss)({
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
@@ -27,6 +30,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   }, [jql]);
   var handleSelectionChange = function handleSelectionChange() {};
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {

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, {

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

@@ -17,8 +17,7 @@ var searchButtonStyles = (0, _react.css)({
   marginRight: "var(--ds-space-075, 6px)"
 });
 var formStyles = (0, _react.css)({
-  flex: 1,
-  paddingRight: "var(--ds-space-100, 8px)"
+  flex: 1
 });
 var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref) {
   var isDisabled = _ref.isDisabled,

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.3"
+  packageVersion: "1.16.5"
 };

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

@@ -8,6 +8,7 @@ export const useFilterOptions = ({
   const [filterOptions, setFilterOptions] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [status, setStatus] = useState('empty');
+  const [errors, setErrors] = useState([]);
   const [nextPageCursor, setNextPageCursor] = useState(undefined);
   const initialData = useRef();
   const {
@@ -33,6 +34,7 @@ export const useFilterOptions = ({
       });
       if (response.errors && response.errors.length > 0) {
         setStatus('rejected');
+        setErrors(response.errors);
         return;
       }
       if (isNewSearch) {
@@ -51,6 +53,7 @@ export const useFilterOptions = ({
       setNextPageCursor(mapFieldValuesToPageCursor(response));
       setStatus('resolved');
     } catch (error) {
+      setErrors([error]);
       setStatus('rejected');
     }
   }, [cloudId, filterOptions, filterType, getFieldValues]);
@@ -59,6 +62,7 @@ export const useFilterOptions = ({
     fetchFilterOptions,
     totalCount,
     pageCursor: nextPageCursor,
-    status
+    status,
+    errors: status === 'rejected' ? errors : []
   };
 };

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

@@ -32,7 +32,8 @@ const AsyncPopupSelect = ({
     fetchFilterOptions,
     totalCount,
     status,
-    pageCursor
+    pageCursor,
+    errors
   } = useFilterOptions({
     filterType,
     cloudId
@@ -114,7 +115,8 @@ const AsyncPopupSelect = ({
         isLoading: isLoading,
         isLoadingMore: isLoadingMore,
         showMore: shouldDisplayShowMoreButton,
-        handleShowMore: handleShowMore
+        handleShowMore: handleShowMore,
+        errors: errors
       })),
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,

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

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
 import AsyncPopupSelect from './async-popup-select';
 const availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
+const basicFilterContainerStyles = xcss({
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 const BasicFilterContainer = ({
   jql,
   cloudId
@@ -15,6 +18,7 @@ const BasicFilterContainer = ({
   }, [jql]);
   const handleSelectionChange = () => {};
   return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(filter => /*#__PURE__*/React.createElement(AsyncPopupSelect, {

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

@@ -1,9 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N500 } from '@atlaskit/theme/colors';
+import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
-const CustomErrorMessage = () => {
+const getErrorReasonType = errors => {
+  const [error] = errors || [];
+  if (error instanceof Error) {
+    return 'network';
+  }
+  if (errors && errors.length > 0) {
+    return 'agg';
+  }
+  return 'unknown';
+};
+const CustomErrorMessage = ({
+  filterType,
+  errors
+}) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+
+  /**
+   * Debounce is required because our search is debounced
+   * ref: ./noOptionsMessage.tsx
+   */
+  const [debouncedAnalyticsCallback] = useDebouncedCallback(() => {
+    fireEvent('ui.error.shown.basicSearchDropdown', {
+      filterType,
+      reason: getErrorReasonType(errors)
+    });
+  }, SEARCH_DEBOUNCE_MS);
+  useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,

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

@@ -12,6 +12,7 @@ const CustomMenuList = ({
   isLoadingMore,
   isError,
   isEmpty,
+  errors,
   showMore,
   handleShowMore,
   children,
@@ -29,7 +30,10 @@ const CustomMenuList = ({
       return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
     }
     if (isError) {
-      return /*#__PURE__*/React.createElement(CustomErrorMessage, null);
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, {
+        filterType: filterType,
+        errors: errors
+      });
     }
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {

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

@@ -9,8 +9,7 @@ const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
 const formStyles = css({
-  flex: 1,
-  paddingRight: "var(--ds-space-100, 8px)"
+  flex: 1
 });
 export const BasicSearchInput = ({
   isDisabled,

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.3"
+  packageVersion: "1.16.5"
 };

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

@@ -20,10 +20,14 @@ export var useFilterOptions = function useFilterOptions(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     status = _useState6[0],
     setStatus = _useState6[1];
-  var _useState7 = useState(undefined),
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    nextPageCursor = _useState8[0],
-    setNextPageCursor = _useState8[1];
+    errors = _useState8[0],
+    setErrors = _useState8[1];
+  var _useState9 = useState(undefined),
+    _useState10 = _slicedToArray(_useState9, 2),
+    nextPageCursor = _useState10[0],
+    setNextPageCursor = _useState10[1];
   var initialData = useRef();
   var _useBasicFilterAGG = useBasicFilterAGG(),
     getFieldValues = _useBasicFilterAGG.getFieldValues;
@@ -66,12 +70,13 @@ export var 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(mapFieldValuesToFilterOptions(response));
             if (isRequestLikeInitialSearch) {
@@ -87,23 +92,25 @@ export var useFilterOptions = function useFilterOptions(_ref) {
           setTotalCount(mapFieldValuesToTotalCount(response));
           setNextPageCursor(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/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -48,7 +48,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 = useDebouncedCallback(function (searchString) {
       fetchFilterOptions({
         searchString: searchString
@@ -142,7 +143,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
           isLoading: isLoading,
           isLoadingMore: isLoadingMore,
           showMore: shouldDisplayShowMoreButton,
-          handleShowMore: handleShowMore
+          handleShowMore: handleShowMore,
+          errors: errors
         }));
       },
       DropdownIndicator: CustomDropdownIndicator,

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

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
 import AsyncPopupSelect from './async-popup-select';
 var availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
+var basicFilterContainerStyles = xcss({
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
@@ -17,6 +20,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   }, [jql]);
   var handleSelectionChange = function handleSelectionChange() {};
   return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {

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

@@ -1,9 +1,43 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N500 } from '@atlaskit/theme/colors';
+import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
-var CustomErrorMessage = function CustomErrorMessage() {
+var getErrorReasonType = function getErrorReasonType(errors) {
+  var _ref = errors || [],
+    _ref2 = _slicedToArray(_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 = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+
+  /**
+   * Debounce is required because our search is debounced
+   * ref: ./noOptionsMessage.tsx
+   */
+  var _useDebouncedCallback = useDebouncedCallback(function () {
+      fireEvent('ui.error.shown.basicSearchDropdown', {
+        filterType: filterType,
+        reason: getErrorReasonType(errors)
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+    debouncedAnalyticsCallback = _useDebouncedCallback2[0];
+  useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: "var(--ds-icon, ".concat(N500, ")"),

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

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["filterType", "isLoading", "isLoadingMore", "isError", "isEmpty", "showMore", "handleShowMore", "children"];
+var _excluded = ["filterType", "isLoading", "isLoadingMore", "isError", "isEmpty", "errors", "showMore", "handleShowMore", "children"];
 import React from 'react';
 import { Flex } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
@@ -14,6 +14,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
     isLoadingMore = _ref.isLoadingMore,
     isError = _ref.isError,
     isEmpty = _ref.isEmpty,
+    errors = _ref.errors,
     showMore = _ref.showMore,
     handleShowMore = _ref.handleShowMore,
     children = _ref.children,
@@ -32,7 +33,10 @@ var CustomMenuList = function CustomMenuList(_ref) {
       return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
     }
     if (isError) {
-      return /*#__PURE__*/React.createElement(CustomErrorMessage, null);
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, {
+        filterType: filterType,
+        errors: errors
+      });
     }
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {

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

@@ -9,8 +9,7 @@ var searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
 var formStyles = css({
-  flex: 1,
-  paddingRight: "var(--ds-space-100, 8px)"
+  flex: 1
 });
 export var BasicSearchInput = function BasicSearchInput(_ref) {
   var isDisabled = _ref.isDisabled,

package/dist/types/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::ea736210c3d6e0528843ce49cebf0610>>
+ * @codegen <<SignedSource::ddaee20abebe8b4891d75f243120dce8>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 export type PackageMetaDataType = {
@@ -85,6 +85,10 @@ export type LinkViewedCountAttributesType = {
 export type EmptyResultShownBasicSearchDropdownAttributesType = {
     filterType: 'project' | 'assignee' | 'issuetype' | 'status';
 };
+export type ErrorShownBasicSearchDropdownAttributesType = {
+    filterType: 'project' | 'assignee' | 'issuetype' | 'status';
+    reason: 'agg' | 'network' | 'unknown';
+};
 export type AqlEditorSearchedAttributesType = {};
 export type AnalyticsEventAttributes = {
     /**
@@ -138,6 +142,9 @@ export type AnalyticsEventAttributes = {
     /**
      * Fired when the basic filter search results are empty */
     'ui.emptyResult.shown.basicSearchDropdown': EmptyResultShownBasicSearchDropdownAttributesType;
+    /**
+     * Fired when the basic filter search dropdown shows an error UI */
+    'ui.error.shown.basicSearchDropdown': ErrorShownBasicSearchDropdownAttributesType;
     /**
      * Fired when search is initiated via the search icon or enter key press for aql editor input field. */
     'ui.aqlEditor.searched': AqlEditorSearchedAttributesType;

package/dist/types/services/cmdbService.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const mapFetchErrors: (error: any) => Error;
-export declare const getStatusCodeGroup: (error: Error) => "1xx" | "3xx" | "4xx" | "5xx" | "unknown";
+export declare const getStatusCodeGroup: (error: Error) => "unknown" | "1xx" | "3xx" | "4xx" | "5xx";
 export declare class PermissionError extends Error {
     constructor(message: string);
 }

package/dist/types/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.d.ts

@@ -13,6 +13,7 @@ export interface FilterOptionsState {
     totalCount: number;
     pageCursor?: string;
     status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';
+    errors: unknown[];
 }
 export declare const useFilterOptions: ({ filterType, cloudId, }: FilterOptionsProps) => FilterOptionsState;
 export {};

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

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare const CustomErrorMessage: () => JSX.Element;
+import { FilterOptionsState } from '../../hooks/useFilterOptions';
+import { BasicFilterFieldType } from '../../types';
+declare const CustomErrorMessage: ({ filterType, errors, }: {
+    filterType: BasicFilterFieldType;
+    errors?: unknown[] | undefined;
+}) => JSX.Element;
 export default CustomErrorMessage;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuListComponentProps } from '@atlaskit/select';
+import { FilterOptionsState } from '../../hooks/useFilterOptions';
 import { BasicFilterFieldType, SelectOption } from '../../types';
 type CustomProps = {
     isError?: boolean;
@@ -9,6 +10,7 @@ type CustomProps = {
     showMore?: boolean;
     handleShowMore: () => void;
     filterType: BasicFilterFieldType;
+    errors?: FilterOptionsState['errors'];
 };
-declare const CustomMenuList: ({ filterType, isLoading, isLoadingMore, isError, isEmpty, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+declare const CustomMenuList: ({ filterType, isLoading, isLoadingMore, isError, isEmpty, errors, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
 export default CustomMenuList;

package/dist/types-ts4.5/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::ea736210c3d6e0528843ce49cebf0610>>
+ * @codegen <<SignedSource::ddaee20abebe8b4891d75f243120dce8>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 export type PackageMetaDataType = {
@@ -85,6 +85,10 @@ export type LinkViewedCountAttributesType = {
 export type EmptyResultShownBasicSearchDropdownAttributesType = {
     filterType: 'project' | 'assignee' | 'issuetype' | 'status';
 };
+export type ErrorShownBasicSearchDropdownAttributesType = {
+    filterType: 'project' | 'assignee' | 'issuetype' | 'status';
+    reason: 'agg' | 'network' | 'unknown';
+};
 export type AqlEditorSearchedAttributesType = {};
 export type AnalyticsEventAttributes = {
     /**
@@ -138,6 +142,9 @@ export type AnalyticsEventAttributes = {
     /**
      * Fired when the basic filter search results are empty */
     'ui.emptyResult.shown.basicSearchDropdown': EmptyResultShownBasicSearchDropdownAttributesType;
+    /**
+     * Fired when the basic filter search dropdown shows an error UI */
+    'ui.error.shown.basicSearchDropdown': ErrorShownBasicSearchDropdownAttributesType;
     /**
      * Fired when search is initiated via the search icon or enter key press for aql editor input field. */
     'ui.aqlEditor.searched': AqlEditorSearchedAttributesType;

package/dist/types-ts4.5/services/cmdbService.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const mapFetchErrors: (error: any) => Error;
-export declare const getStatusCodeGroup: (error: Error) => "1xx" | "3xx" | "4xx" | "5xx" | "unknown";
+export declare const getStatusCodeGroup: (error: Error) => "unknown" | "1xx" | "3xx" | "4xx" | "5xx";
 export declare class PermissionError extends Error {
     constructor(message: string);
 }

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.d.ts

@@ -13,6 +13,7 @@ export interface FilterOptionsState {
     totalCount: number;
     pageCursor?: string;
     status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';
+    errors: unknown[];
 }
 export declare const useFilterOptions: ({ filterType, cloudId, }: FilterOptionsProps) => FilterOptionsState;
 export {};

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

@@ -1,3 +1,8 @@
 /// <reference types="react" />
-declare const CustomErrorMessage: () => JSX.Element;
+import { FilterOptionsState } from '../../hooks/useFilterOptions';
+import { BasicFilterFieldType } from '../../types';
+declare const CustomErrorMessage: ({ filterType, errors, }: {
+    filterType: BasicFilterFieldType;
+    errors?: unknown[] | undefined;
+}) => JSX.Element;
 export default CustomErrorMessage;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuListComponentProps } from '@atlaskit/select';
+import { FilterOptionsState } from '../../hooks/useFilterOptions';
 import { BasicFilterFieldType, SelectOption } from '../../types';
 type CustomProps = {
     isError?: boolean;
@@ -9,6 +10,7 @@ type CustomProps = {
     showMore?: boolean;
     handleShowMore: () => void;
     filterType: BasicFilterFieldType;
+    errors?: FilterOptionsState['errors'];
 };
-declare const CustomMenuList: ({ filterType, isLoading, isLoadingMore, isError, isEmpty, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+declare const CustomMenuList: ({ filterType, isLoading, isLoadingMore, isError, isEmpty, errors, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
 export default CustomMenuList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.16.3",
+  "version": "1.16.5",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-next": "^9.1.3",
     "@atlaskit/avatar": "^21.4.0",
-    "@atlaskit/button": "^16.15.0",
+    "@atlaskit/button": "^16.16.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/form": "^9.0.0",