@atlaskit/link-datasource 1.19.11 → 1.19.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/link-datasource
 
+## 1.19.13
+
+### Patch Changes
+
+- [#57773](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57773) [`a2e16053a3dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2e16053a3dd) - Added group icon and clear search text when popup opens.
+- [#57739](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57739) [`c1ca80ef5958`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1ca80ef5958) - Update filter tigger button logic to show hydration loader only if the filter has value.
+- [#57513](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57513) [`e0ce3402d2c9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0ce3402d2c9) - [ux] make schema drop down selector wider
+- Updated dependencies
+
+## 1.19.12
+
+### Patch Changes
+
+- [#57143](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57143) [`9b8b89c7c87e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b8b89c7c87e) - Remove redundant selection handler for basic filter selection.
+
 ## 1.19.11
 
 ### 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.19.11"
+  packageVersion: "1.19.13"
 };

package/dist/cjs/ui/assets-modal/search-container/styled.js

@@ -15,4 +15,4 @@ var FormContainer = exports.FormContainer = _styled.default.form(_templateObject
 
 // Override the top margin of fields
 var FieldContainer = exports.FieldContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin-top: ", ";\n"])), "var(--ds-space-negative-100, -8px)");
-var SchemaSelectContainer = exports.SchemaSelectContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 200px;\n"])));
+var SchemaSelectContainer = exports.SchemaSelectContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-width: 386px;\n"])));

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/glyph/people-group"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _primitives = require("@atlaskit/primitives");
 var commonLabelStyles = (0, _primitives.xcss)({
@@ -16,6 +17,11 @@ var commonLabelStyles = (0, _primitives.xcss)({
 var avatarOptionLabelStyles = (0, _primitives.xcss)({
   marginLeft: 'space.050'
 });
+var groupWrapperStyles = (0, _primitives.xcss)({
+  width: "var(--ds-space-250, 20px)",
+  minWidth: "var(--ds-space-250, 20px)",
+  height: "var(--ds-space-250, 20px)"
+});
 var IconOptionLabel = function IconOptionLabel(_ref) {
   var data = _ref.data;
   var label = data.label,
@@ -48,7 +54,14 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     alignItems: "center",
     testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
-  }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+  }, data.isGroup ? /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    xcss: groupWrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
+    size: "small",
+    label: ""
+  })) : /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: data.isSquare ? 'square' : 'circle',
     src: data.avatar,
     size: "xsmall"

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

@@ -172,11 +172,21 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     });
   }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   var handleMenuClose = (0, _react.useCallback)(function () {
+    /**
+     * Clearing the search is to ensure that the sortOptionsOnPopupOpen logic does not mess up.
+     * Without this, when the user opens, sortOptionsOnPopupOpen will inject the selected options to the list and the list count and values will be off
+     */
+    if (searchTerm) {
+      handleInputChange('', {
+        action: 'input-change',
+        prevInputValue: searchTerm
+      });
+    }
     fireEvent('ui.dropdown.closed.basicSearchDropdown', {
       filterType: filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [filterType, fireEvent, handleInputChange, searchTerm, selectedOptions.length]);
   (0, _react.useEffect)(function () {
     if (status === 'resolved') {
       sortOptionsOnResolve();

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

@@ -52,13 +52,15 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     firstOption = _ref3[0];
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
+  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
   var LoadingButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       iconAfter: /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: 'xsmall'
-      })
+      }),
+      testId: "".concat(testId, "--loading-button")
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")])));
-  }, [filterType]);
+  }, [filterType, testId]);
   var DefaultButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       appearance: "default",
@@ -66,7 +68,8 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
         label: ""
-      })
+      }),
+      testId: "".concat(testId, "--button")
     }, /*#__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, {
@@ -75,7 +78,7 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, /*#__PURE__*/_react.default.createElement(_badge.default, {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
-  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions]);
+  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -83,7 +86,7 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    */
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     ref: ref,
-    testId: "jlol-basic-filter-".concat(filterType, "-trigger")
+    testId: testId
   }, showButtonLoading ? /*#__PURE__*/_react.default.createElement(LoadingButton, null) : /*#__PURE__*/_react.default.createElement(DefaultButton, null));
 });
 var _default = exports.default = PopupTrigger;

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

@@ -1,33 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.availableBasicFilterTypes = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _primitives = require("@atlaskit/primitives");
+var _extractValuesFromNonComplexJQL = require("../utils/extractValuesFromNonComplexJQL");
 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 = exports.availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
 var basicFilterContainerStyles = (0, _primitives.xcss)({
   paddingLeft: "var(--ds-space-100, 8px)"
 });
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
-  var cloudId = _ref.cloudId,
+  var jql = _ref.jql,
+    cloudId = _ref.cloudId,
     onChange = _ref.onChange,
     selections = _ref.selections,
     isJQLHydrating = _ref.isJQLHydrating;
+  var extractedFilterValues = (0, _react.useMemo)(function () {
+    return isJQLHydrating ? (0, _extractValuesFromNonComplexJQL.extractValuesFromNonComplexJQL)(jql) : {};
+  }, [isJQLHydrating, jql]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {
+    var _extractedFilterValue;
+    var shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/_react.default.createElement(_asyncPopupSelect.default, {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
       selection: selections[filter] || [],
-      isJQLHydrating: isJQLHydrating,
+      isJQLHydrating: shouldShowHydrationLoader,
       isDisabled: !cloudId,
       onSelectionChange: onChange
     });

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JiraSearchContainer = exports.DEFAULT_JQL_QUERY = exports.ALLOWED_ORDER_BY_KEYS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -26,11 +26,10 @@ var _modeSwitcher = require("../mode-switcher");
 var _buildJQL = require("./buildJQL");
 var _messages = require("./messages");
 var _excluded = ["basicInputTextValue"];
-/** @jsx jsx */
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var inputContainerStyles = (0, _react2.css)({
   alignItems: 'baseline',
   display: 'flex',
@@ -168,10 +167,11 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
-  var handleBasicFilterSelectionChange = (0, _react.useCallback)(function (filterValues) {
-    setFilterSelections(filterValues);
-    debouncedBasicFilterSelectionChange(filterValues);
-  }, [debouncedBasicFilterSelectionChange]);
+  var handleBasicFilterSelectionChange = (0, _react.useCallback)(function (filterType, options) {
+    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, (0, _defineProperty2.default)({}, filterType, options));
+    setFilterSelections(updatedSelection);
+    debouncedBasicFilterSelectionChange(updatedSelection);
+  }, [debouncedBasicFilterSelectionChange, filterSelections]);
   (0, _react.useEffect)(function () {
     var isCurrentQueryComplex = (0, _isQueryTooComplex.isQueryTooComplex)(jql);
     setIsComplexQuery(isCurrentQueryComplex);
@@ -190,11 +190,6 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
       }
     }
   }, [hydratedOptions, basicFilterHydrationStatus]);
-  var handleSelectionChange = (0, _react.useCallback)(function (filterType, options) {
-    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, (0, _defineProperty2.default)({}, filterType, options));
-    setFilterSelections(updatedSelection);
-    handleBasicFilterSelectionChange(updatedSelection);
-  }, [handleBasicFilterSelectionChange, filterSelections]);
   (0, _react.useEffect)(function () {
     if (currentCloudId !== cloudId) {
       setBasicSearchTerm('');
@@ -218,8 +213,9 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), showBasicFilters && (0, _react2.jsx)(_basicFilters.BasicFilters, {
+    jql: jql,
     cloudId: cloudId || '',
-    onChange: handleSelectionChange,
+    onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'
   })), currentSearchMethod === 'jql' && (0, _react2.jsx)(_jqlEditor.JiraJQLEditor, {

package/dist/es2019/analytics/constants.js

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

package/dist/es2019/ui/assets-modal/search-container/styled.js

@@ -18,5 +18,6 @@ export const FieldContainer = styled.div`
   margin-top: ${"var(--ds-space-negative-100, -8px)"};
 `;
 export const SchemaSelectContainer = styled.div`
-  width: 200px;
+  width: 100%;
+  max-width: 386px;
 `;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
+import PeopleGroupIcon from '@atlaskit/icon/glyph/people-group';
 import Lozenge from '@atlaskit/lozenge';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 const commonLabelStyles = xcss({
@@ -9,6 +10,11 @@ const commonLabelStyles = xcss({
 const avatarOptionLabelStyles = xcss({
   marginLeft: 'space.050'
 });
+const groupWrapperStyles = xcss({
+  width: "var(--ds-space-250, 20px)",
+  minWidth: "var(--ds-space-250, 20px)",
+  height: "var(--ds-space-250, 20px)"
+});
 const IconOptionLabel = ({
   data
 }) => {
@@ -46,7 +52,14 @@ const AvatarOptionLabel = ({
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
-  }, /*#__PURE__*/React.createElement(Avatar, {
+  }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    xcss: groupWrapperStyles
+  }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
+    size: "small",
+    label: ""
+  })) : /*#__PURE__*/React.createElement(Avatar, {
     appearance: data.isSquare ? 'square' : 'circle',
     src: data.avatar,
     size: "xsmall"

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

@@ -124,11 +124,21 @@ const AsyncPopupSelect = ({
     });
   }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   const handleMenuClose = useCallback(() => {
+    /**
+     * Clearing the search is to ensure that the sortOptionsOnPopupOpen logic does not mess up.
+     * Without this, when the user opens, sortOptionsOnPopupOpen will inject the selected options to the list and the list count and values will be off
+     */
+    if (searchTerm) {
+      handleInputChange('', {
+        action: 'input-change',
+        prevInputValue: searchTerm
+      });
+    }
     fireEvent('ui.dropdown.closed.basicSearchDropdown', {
       filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [filterType, fireEvent, handleInputChange, searchTerm, selectedOptions.length]);
   useEffect(() => {
     if (status === 'resolved') {
       sortOptionsOnResolve();

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

@@ -40,18 +40,21 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
   const [firstOption] = selectedOptions || [];
   const hasOptions = selectedOptions && selectedOptions.length > 0;
   const showButtonLoading = !isDisabled && isLoading;
+  const testId = `jlol-basic-filter-${filterType}-trigger`;
   const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
     iconAfter: /*#__PURE__*/React.createElement(Spinner, {
       size: 'xsmall'
-    })
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]))), [filterType]);
+    }),
+    testId: `${testId}--loading-button`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]))), [filterType, testId]);
   const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
-    })
+    }),
+    testId: `${testId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
     xcss: triggerButtonLabelStyles
   }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
@@ -59,7 +62,7 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
-  }, "+", selectedOptions.length - 1)))), [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions]);
+  }, "+", selectedOptions.length - 1)))), [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -67,7 +70,7 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
    */
   return /*#__PURE__*/React.createElement(Box, {
     ref: ref,
-    testId: `jlol-basic-filter-${filterType}-trigger`
+    testId: testId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;

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

@@ -1,27 +1,32 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
 import AsyncPopupSelect from './async-popup-select';
 export const availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
 const basicFilterContainerStyles = xcss({
   paddingLeft: "var(--ds-space-100, 8px)"
 });
 const BasicFilterContainer = ({
+  jql,
   cloudId,
   onChange,
   selections,
   isJQLHydrating
 }) => {
+  const extractedFilterValues = useMemo(() => isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {}, [isJQLHydrating, jql]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(filter => {
+    var _extractedFilterValue;
+    const shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
       selection: selections[filter] || [],
-      isJQLHydrating: isJQLHydrating,
+      isJQLHydrating: shouldShowHydrationLoader,
       isDisabled: !cloudId,
       onSelectionChange: onChange
     });

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

@@ -130,10 +130,14 @@ export const JiraSearchContainer = props => {
       isQueryComplex: isCurrentQueryComplex
     });
   }, SEARCH_DEBOUNCE_MS);
-  const handleBasicFilterSelectionChange = useCallback(filterValues => {
-    setFilterSelections(filterValues);
-    debouncedBasicFilterSelectionChange(filterValues);
-  }, [debouncedBasicFilterSelectionChange]);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: options
+    };
+    setFilterSelections(updatedSelection);
+    debouncedBasicFilterSelectionChange(updatedSelection);
+  }, [debouncedBasicFilterSelectionChange, filterSelections]);
   useEffect(() => {
     const isCurrentQueryComplex = isQueryTooComplex(jql);
     setIsComplexQuery(isCurrentQueryComplex);
@@ -154,14 +158,6 @@ export const JiraSearchContainer = props => {
       }
     }
   }, [hydratedOptions, basicFilterHydrationStatus]);
-  const handleSelectionChange = useCallback((filterType, options) => {
-    const updatedSelection = {
-      ...filterSelections,
-      [filterType]: options
-    };
-    setFilterSelections(updatedSelection);
-    handleBasicFilterSelectionChange(updatedSelection);
-  }, [handleBasicFilterSelectionChange, filterSelections]);
   useEffect(() => {
     if (currentCloudId !== cloudId) {
       setBasicSearchTerm('');
@@ -185,8 +181,9 @@ export const JiraSearchContainer = props => {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), showBasicFilters && jsx(BasicFilters, {
+    jql: jql,
     cloudId: cloudId || '',
-    onChange: handleSelectionChange,
+    onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'
   })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {

package/dist/esm/analytics/constants.js

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

package/dist/esm/ui/assets-modal/search-container/styled.js

@@ -8,4 +8,4 @@ export var FormContainer = styled.form(_templateObject2 || (_templateObject2 = _
 
 // Override the top margin of fields
 export var FieldContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-top: ", ";\n"])), "var(--ds-space-negative-100, -8px)");
-export var SchemaSelectContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 200px;\n"])));
+export var SchemaSelectContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  max-width: 386px;\n"])));

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
+import PeopleGroupIcon from '@atlaskit/icon/glyph/people-group';
 import Lozenge from '@atlaskit/lozenge';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 var commonLabelStyles = xcss({
@@ -9,6 +10,11 @@ var commonLabelStyles = xcss({
 var avatarOptionLabelStyles = xcss({
   marginLeft: 'space.050'
 });
+var groupWrapperStyles = xcss({
+  width: "var(--ds-space-250, 20px)",
+  minWidth: "var(--ds-space-250, 20px)",
+  height: "var(--ds-space-250, 20px)"
+});
 var IconOptionLabel = function IconOptionLabel(_ref) {
   var data = _ref.data;
   var label = data.label,
@@ -41,7 +47,14 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     testId: testId || 'jlol-basic-filter-popup-select-option--avatar'
-  }, /*#__PURE__*/React.createElement(Avatar, {
+  }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    xcss: groupWrapperStyles
+  }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
+    size: "small",
+    label: ""
+  })) : /*#__PURE__*/React.createElement(Avatar, {
     appearance: data.isSquare ? 'square' : 'circle',
     src: data.avatar,
     size: "xsmall"

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

@@ -162,11 +162,21 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     });
   }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   var handleMenuClose = useCallback(function () {
+    /**
+     * Clearing the search is to ensure that the sortOptionsOnPopupOpen logic does not mess up.
+     * Without this, when the user opens, sortOptionsOnPopupOpen will inject the selected options to the list and the list count and values will be off
+     */
+    if (searchTerm) {
+      handleInputChange('', {
+        action: 'input-change',
+        prevInputValue: searchTerm
+      });
+    }
     fireEvent('ui.dropdown.closed.basicSearchDropdown', {
       filterType: filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [filterType, fireEvent, handleInputChange, searchTerm, selectedOptions.length]);
   useEffect(function () {
     if (status === 'resolved') {
       sortOptionsOnResolve();

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

@@ -42,13 +42,15 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     firstOption = _ref3[0];
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
+  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
   var LoadingButton = useCallback(function () {
     return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
       iconAfter: /*#__PURE__*/React.createElement(Spinner, {
         size: 'xsmall'
-      })
+      }),
+      testId: "".concat(testId, "--loading-button")
     }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages["".concat(filterType, "Label")])));
-  }, [filterType]);
+  }, [filterType, testId]);
   var DefaultButton = useCallback(function () {
     return /*#__PURE__*/React.createElement(Button, {
       appearance: "default",
@@ -56,7 +58,8 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
         label: ""
-      })
+      }),
+      testId: "".concat(testId, "--button")
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
       xcss: triggerButtonLabelStyles
     }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
@@ -65,7 +68,7 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React.createElement(Badge, {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
-  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions]);
+  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -73,7 +76,7 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
   return /*#__PURE__*/React.createElement(Box, {
     ref: ref,
-    testId: "jlol-basic-filter-".concat(filterType, "-trigger")
+    testId: testId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;

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

@@ -1,26 +1,33 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
 import AsyncPopupSelect from './async-popup-select';
 export var availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
 var basicFilterContainerStyles = xcss({
   paddingLeft: "var(--ds-space-100, 8px)"
 });
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
-  var cloudId = _ref.cloudId,
+  var jql = _ref.jql,
+    cloudId = _ref.cloudId,
     onChange = _ref.onChange,
     selections = _ref.selections,
     isJQLHydrating = _ref.isJQLHydrating;
+  var extractedFilterValues = useMemo(function () {
+    return isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {};
+  }, [isJQLHydrating, jql]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {
+    var _extractedFilterValue;
+    var shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
       selection: selections[filter] || [],
-      isJQLHydrating: isJQLHydrating,
+      isJQLHydrating: shouldShowHydrationLoader,
       isDisabled: !cloudId,
       onSelectionChange: onChange
     });

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

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["basicInputTextValue"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -158,10 +158,11 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     }, SEARCH_DEBOUNCE_MS),
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
-  var handleBasicFilterSelectionChange = useCallback(function (filterValues) {
-    setFilterSelections(filterValues);
-    debouncedBasicFilterSelectionChange(filterValues);
-  }, [debouncedBasicFilterSelectionChange]);
+  var handleBasicFilterSelectionChange = useCallback(function (filterType, options) {
+    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, _defineProperty({}, filterType, options));
+    setFilterSelections(updatedSelection);
+    debouncedBasicFilterSelectionChange(updatedSelection);
+  }, [debouncedBasicFilterSelectionChange, filterSelections]);
   useEffect(function () {
     var isCurrentQueryComplex = isQueryTooComplex(jql);
     setIsComplexQuery(isCurrentQueryComplex);
@@ -180,11 +181,6 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
       }
     }
   }, [hydratedOptions, basicFilterHydrationStatus]);
-  var handleSelectionChange = useCallback(function (filterType, options) {
-    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, _defineProperty({}, filterType, options));
-    setFilterSelections(updatedSelection);
-    handleBasicFilterSelectionChange(updatedSelection);
-  }, [handleBasicFilterSelectionChange, filterSelections]);
   useEffect(function () {
     if (currentCloudId !== cloudId) {
       setBasicSearchTerm('');
@@ -208,8 +204,9 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), showBasicFilters && jsx(BasicFilters, {
+    jql: jql,
     cloudId: cloudId || '',
-    onChange: handleSelectionChange,
+    onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'
   })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {

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

@@ -2,10 +2,11 @@
 import type { BasicFilterFieldType, SelectedOptionsMap, SelectOption } from '../types';
 export declare const availableBasicFilterTypes: BasicFilterFieldType[];
 export interface BasicFilterContainerProps {
+    jql: string;
     cloudId: string;
     selections: SelectedOptionsMap;
     onChange: (filterType: BasicFilterFieldType, options: SelectOption[]) => void;
     isJQLHydrating: boolean;
 }
-declare const BasicFilterContainer: ({ cloudId, onChange, selections, isJQLHydrating, }: BasicFilterContainerProps) => JSX.Element;
+declare const BasicFilterContainer: ({ jql, cloudId, onChange, selections, isJQLHydrating, }: BasicFilterContainerProps) => JSX.Element;
 export default BasicFilterContainer;

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

@@ -2,10 +2,11 @@
 import type { BasicFilterFieldType, SelectedOptionsMap, SelectOption } from '../types';
 export declare const availableBasicFilterTypes: BasicFilterFieldType[];
 export interface BasicFilterContainerProps {
+    jql: string;
     cloudId: string;
     selections: SelectedOptionsMap;
     onChange: (filterType: BasicFilterFieldType, options: SelectOption[]) => void;
     isJQLHydrating: boolean;
 }
-declare const BasicFilterContainer: ({ cloudId, onChange, selections, isJQLHydrating, }: BasicFilterContainerProps) => JSX.Element;
+declare const BasicFilterContainer: ({ jql, cloudId, onChange, selections, isJQLHydrating, }: BasicFilterContainerProps) => JSX.Element;
 export default BasicFilterContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.19.11",
+  "version": "1.19.13",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.17.0",
-    "@atlaskit/primitives": "^1.12.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/select": "^17.0.0",
     "@atlaskit/smart-card": "^26.42.0",
     "@atlaskit/spinner": "^16.0.0",