@atlaskit/link-datasource 1.26.1 → 1.26.3

package/dist/esm/ui/common/modal/popup-select/index.js

@@ -0,0 +1,207 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["isOpen"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useIntl } from 'react-intl-next';
+import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { useDatasourceAnalyticsEvents } from '../../../../analytics';
+import CustomControl from './control';
+import CustomDropdownIndicator from './dropdownIndicator';
+import PopupFooter from './footer';
+import formatOptionLabel from './formatOptionLabel';
+import CustomMenuList from './menu-list';
+import { asyncPopupSelectMessages } from './messages';
+import PopupTrigger from './trigger';
+// Needed to disable filtering from react-select
+var noFilterOptions = function noFilterOptions() {
+  return true;
+};
+export var FilterPopupSelect = function FilterPopupSelect(_ref) {
+  var filterName = _ref.filterName,
+    totalCount = _ref.totalCount,
+    status = _ref.status,
+    buttonLabel = _ref.buttonLabel,
+    _ref$showLoading = _ref.showLoading,
+    showLoading = _ref$showLoading === void 0 ? false : _ref$showLoading,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$showHydrating = _ref.showHydrating,
+    showHydrating = _ref$showHydrating === void 0 ? false : _ref$showHydrating,
+    _ref$shouldShowFooter = _ref.shouldShowFooter,
+    shouldShowFooter = _ref$shouldShowFooter === void 0 ? true : _ref$shouldShowFooter,
+    menuListProps = _ref.menuListProps,
+    options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    onSelectionChange = _ref.onSelectionChange,
+    onInputChange = _ref.onInputChange,
+    onMenuClose = _ref.onMenuClose,
+    onMenuOpen = _ref.onMenuOpen;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sortedOptions = _useState4[0],
+    setSortedOptions = _useState4[1];
+  var sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
+
+  var sortOptionsOnPopupOpen = useCallback(function () {
+    if (selectedOptions.length === 0) {
+      return setSortedOptions(options);
+    }
+    var nonSelectedOptions = options.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var newOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
+    if (!isEqual(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, options, sortedOptions]);
+  var sortOptionsOnResolve = useCallback(function () {
+    // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
+    if (searchTerm) {
+      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+      return setSortedOptions(options);
+    }
+
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
+    // this block handles the pagination, where on pagination, we will just append newOptions to the current list
+    if (sortPaginatedResults.current) {
+      var newOptions = options.filter(function (option) {
+        return !sortedOptions.find(function (sortedOption) {
+          return sortedOption.value === option.value;
+        });
+      });
+      if (newOptions.length > 0) {
+        setSortedOptions([].concat(_toConsumableArray(sortedOptions), _toConsumableArray(newOptions)));
+      }
+      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+      return;
+    }
+    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+    sortOptionsOnPopupOpen();
+  }, [options, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
+  var handleMenuOpen = useCallback(function () {
+    if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
+      filterName: filterName,
+      selectionCount: selectedOptions.length
+    });
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [filterName, fireEvent, onMenuOpen, 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) {
+      setSearchTerm('');
+    }
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+    fireEvent('ui.dropdown.closed.basicSearchDropdown', {
+      filterName: filterName,
+      selectionCount: selectedOptions.length
+    });
+  }, [filterName, fireEvent, onMenuClose, searchTerm, selectedOptions.length]);
+  var handleInputChange = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+              setSearchTerm(newSearchTerm);
+              onInputChange(newSearchTerm, actionMeta);
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onInputChange, searchTerm]);
+  useEffect(function () {
+    if (status === 'resolved') {
+      sortOptionsOnResolve();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
+
+  useEffect(function () {
+    if (status === 'loadingMore') {
+      sortPaginatedResults.current = true;
+    }
+  }, [status]);
+  return /*#__PURE__*/React.createElement(PopupSelect, {
+    isMulti: true,
+    maxMenuWidth: 300,
+    minMenuWidth: 300,
+    testId: "".concat(filterName, "-popup-select"),
+    inputId: "".concat(filterName, "-popup-select--input")
+    /*
+      this threshold controls the display of the search control (input field for search)
+      if this threshold is less than 0, when typing a search string that returns no results it will not remove the search control
+      if this threshold is 0 or higher, it will remove the search control when there are no results, the user will be unable to clear the search to see more results
+    */,
+    searchThreshold: -1,
+    inputValue: searchTerm,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    isLoading: showLoading,
+    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
+    menuListProps: menuListProps,
+    components: {
+      Option: CheckboxOption,
+      Control: CustomControl,
+      MenuList: CustomMenuList,
+      DropdownIndicator: CustomDropdownIndicator,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
+    },
+    options: sortedOptions,
+    value: selectedOptions,
+    filterOption: noFilterOptions,
+    formatOptionLabel: formatOptionLabel,
+    onChange: onSelectionChange,
+    onInputChange: handleInputChange,
+    onOpen: handleMenuOpen,
+    onClose: handleMenuClose,
+    target: function target(_ref3) {
+      var isOpen = _ref3.isOpen,
+        triggerProps = _objectWithoutProperties(_ref3, _excluded);
+      return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
+        label: buttonLabel,
+        selectedOptions: selectedOptions,
+        isSelected: isOpen,
+        isDisabled: isDisabled,
+        isLoading: showHydrating,
+        testId: filterName
+      }));
+    },
+    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
+      currentDisplayCount: options.length,
+      totalCount: totalCount
+    })
+  });
+};

package/dist/esm/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/errorMessage.js

@@ -4,7 +4,7 @@ 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 { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 var getErrorReasonType = function getErrorReasonType(errors) {
@@ -20,7 +20,7 @@ var getErrorReasonType = function getErrorReasonType(errors) {
   return 'unknown';
 };
 var CustomErrorMessage = function CustomErrorMessage(_ref3) {
-  var filterType = _ref3.filterType,
+  var filterName = _ref3.filterName,
     errors = _ref3.errors;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
@@ -31,7 +31,7 @@ var CustomErrorMessage = function CustomErrorMessage(_ref3) {
    */
   var _useDebouncedCallback = useDebouncedCallback(function () {
       fireEvent('ui.error.shown.basicSearchDropdown', {
-        filterType: filterType,
+        filterName: filterName,
         reason: getErrorReasonType(errors)
       });
     }, SEARCH_DEBOUNCE_MS),

package/dist/esm/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/index.js

@@ -4,10 +4,10 @@ import React from 'react';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
-import ShowMoreButton from '../async-popup-select/showMoreButton';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
 import CustomNoOptionsMessage from './noOptionsMessage';
+import ShowMoreButton from './showMoreButton';
 var inlineSpinnerStyles = xcss({
   paddingTop: 'space.075'
 });
@@ -19,7 +19,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var _props$selectProps$me = props.selectProps.menuListProps,
-    filterType = _props$selectProps$me.filterType,
+    filterName = _props$selectProps$me.filterName,
     isLoading = _props$selectProps$me.isLoading,
     isLoadingMore = _props$selectProps$me.isLoadingMore,
     isError = _props$selectProps$me.isError,
@@ -43,19 +43,20 @@ var CustomMenuList = function CustomMenuList(_ref) {
     }
     if (isError) {
       return /*#__PURE__*/React.createElement(CustomErrorMessage, {
-        filterType: filterType,
+        filterName: filterName,
         errors: errors
       });
     }
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {
-        filterType: filterType
+        filterName: filterName
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/React.createElement(Box, {
       xcss: showMoreButtonBoxStyles
     }, /*#__PURE__*/React.createElement(ShowMoreButton, {
-      onShowMore: handleShowMore
+      onShowMore: handleShowMore,
+      filterName: filterName
     })), isLoadingMoreData && /*#__PURE__*/React.createElement(InlineSpinner, null));
   };
   return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());

package/dist/esm/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/messages.js

@@ -14,5 +14,10 @@ export var asyncPopupSelectMessages = defineMessages({
     id: 'linkDataSource.basic-filter.error-message',
     defaultMessage: 'Something went wrong',
     description: 'The text for when an error occurs when loading options'
+  },
+  showMoreMessage: {
+    id: 'linkDataSource.basic-filter.showMoreButton',
+    defaultMessage: 'Show more',
+    description: 'The text to show more options in dropdown'
   }
 });

package/dist/esm/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/noOptionsMessage.js

@@ -4,11 +4,11 @@ import { useDebouncedCallback } from 'use-debounce';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
-import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
-  var filterType = _ref.filterType;
+  var filterName = _ref.filterName;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
 
@@ -20,7 +20,7 @@ var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
    */
   var _useDebouncedCallback = useDebouncedCallback(function () {
       fireEvent('ui.emptyResult.shown.basicSearchDropdown', {
-        filterType: filterType
+        filterName: filterName
       });
     }, SEARCH_DEBOUNCE_MS),
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),

package/dist/esm/ui/common/modal/popup-select/menu-list/showMoreButton.js

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { asyncPopupSelectMessages } from './messages';
+var ShowMoreButton = function ShowMoreButton(_ref) {
+  var onShowMore = _ref.onShowMore,
+    filterName = _ref.filterName;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var handleShowMore = useCallback(function () {
+    fireEvent('ui.button.clicked.basicSearchDropdown', {
+      filterName: filterName,
+      type: 'showMore'
+    });
+    onShowMore();
+  }, [filterName, fireEvent, onShowMore]);
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
+};
+export default ShowMoreButton;

package/dist/esm/ui/common/modal/popup-select/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var asyncPopupSelectMessages = defineMessages({
+  selectPlaceholder: {
+    id: 'linkDataSource.basic-filter.dropdown.select.placeholder',
+    description: 'Placeholder text to be displayed for the search input box.',
+    defaultMessage: 'Search'
+  },
+  paginationDetails: {
+    id: 'linkDataSource.basic-filter.footer.pagination-details',
+    description: 'Text to indicate page count and total count information.',
+    defaultMessage: '{currentDisplayCount} of {totalCount}'
+  }
+});

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

@@ -1,13 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
-import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import { asyncPopupSelectMessages } from './messages';
 var triggerButtonLabelStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -32,25 +30,26 @@ export var LoadingStateAnimationWrapper = styled.div({
   }
 });
 var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var filterType = _ref.filterType,
-    isSelected = _ref.isSelected,
+  var isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
-    selectedOptions = _ref.selectedOptions;
+    selectedOptions = _ref.selectedOptions,
+    testId = _ref.testId,
+    label = _ref.label;
   var _ref2 = selectedOptions || [],
     _ref3 = _slicedToArray(_ref2, 1),
     firstOption = _ref3[0];
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
-  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
+  var tiggerButtonTestId = "".concat(testId, "-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, testId]);
+      testId: "".concat(tiggerButtonTestId, "--loading-button")
+    }, label));
+  }, [label, tiggerButtonTestId]);
   var DefaultButton = useCallback(function () {
     return /*#__PURE__*/React.createElement(Button, {
       appearance: "default",
@@ -59,16 +58,16 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
       iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
         label: ""
       }),
-      testId: "".concat(testId, "--button")
+      testId: "".concat(tiggerButtonTestId, "--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, {
+    }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
       xcss: badgeStyles,
       alignItems: "center"
     }, /*#__PURE__*/React.createElement(Badge, {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
-  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
+  }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, tiggerButtonTestId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -76,7 +75,7 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
   return /*#__PURE__*/React.createElement(Box, {
     ref: ref,
-    testId: testId
+    testId: tiggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;

package/dist/esm/ui/common/modal/popup-select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/confluence-search-modal/basic-filters/index.js

@@ -0,0 +1,15 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import React from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+var basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+var BasicFilterContainer = function BasicFilterContainer(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default BasicFilterContainer;

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

@@ -1,7 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import BasicFilters from '../basic-filters';
 import { searchMessages } from './messages';
+var basicSearchInputContainerStyles = xcss({
+  flexGrow: 1
+});
 var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
   var cloudId = _ref.cloudId,
     initialSearchValue = _ref.initialSearchValue,
@@ -25,14 +31,23 @@ var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
       currentCloudId.current = cloudId;
     }
   }, [cloudId]);
-  return /*#__PURE__*/React.createElement(BasicSearchInput, {
+  var showBasicFilters = useMemo(function () {
+    if (getBooleanFF('platform.linking-platform.datasource.show-clol-basic-filters')) {
+      return true;
+    }
+    return false;
+  }, []);
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
     testId: "confluence-search-datasource-modal",
     isSearching: isSearching,
     onChange: handleSearchChange,
     onSearch: onSearch,
     searchTerm: searchBarSearchString,
     placeholder: searchMessages.searchLabel,
-    fullWidth: true
-  });
+    fullWidth: !showBasicFilters
+  }), showBasicFilters && /*#__PURE__*/React.createElement(BasicFilters, null));
 };
 export default ConfluenceSearchContainer;

package/dist/esm/ui/confluence-search-modal/modal/index.js

@@ -19,7 +19,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
-import { EVENT_CHANNEL } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
@@ -124,6 +124,8 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
     extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
     destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
   var selectedConfluenceSite = useMemo(function () {
     if (cloudId) {
@@ -140,6 +142,9 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       })) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
+  useEffect(function () {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
 
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
@@ -173,7 +178,11 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
                 return a.displayName.localeCompare(b.displayName);
               });
               setAvailableSites(sortedAvailableSites);
-            case 5:
+              fireEvent('ui.modal.ready.datasource', {
+                instancesCount: sortedAvailableSites.length,
+                schemasCount: null
+              });
+            case 6:
             case "end":
               return _context.stop();
           }
@@ -184,7 +193,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       };
     }();
     void fetchSiteDisplayNames();
-  }, []);
+  }, [fireEvent]);
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     visibleColumnCount.current = newVisibleColumnKeys.length;