@atlaskit/link-datasource 1.26.2 → 1.27.0

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

@@ -34,6 +34,8 @@ import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
 import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
+import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
+import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import ConfluenceSearchContainer from '../confluence-search-container';
@@ -69,6 +71,8 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     initialWrappedColumnKeys = props.wrappedColumnKeys,
     onCancel = props.onCancel,
     onInsert = props.onInsert,
+    _props$viewMode = props.viewMode,
+    viewMode = _props$viewMode === void 0 ? 'table' : _props$viewMode,
     initialParameters = props.parameters,
     urlBeingEdited = props.url,
     initialVisibleColumnKeys = props.visibleColumnKeys;
@@ -76,18 +80,22 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     _useState2 = _slicedToArray(_useState, 2),
     availableSites = _useState2[0],
     setAvailableSites = _useState2[1];
-  var _useState3 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
+  var _useState3 = useState(viewMode),
     _useState4 = _slicedToArray(_useState3, 2),
-    cloudId = _useState4[0],
-    setCloudId = _useState4[1];
-  var _useState5 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
+    currentViewMode = _useState4[0],
+    setCurrentViewMode = _useState4[1];
+  var _useState5 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchString = _useState6[0],
-    setSearchString = _useState6[1];
-  var _useState7 = useState(initialVisibleColumnKeys),
+    cloudId = _useState6[0],
+    setCloudId = _useState6[1];
+  var _useState7 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
     _useState8 = _slicedToArray(_useState7, 2),
-    visibleColumnKeys = _useState8[0],
-    setVisibleColumnKeys = _useState8[1];
+    searchString = _useState8[0],
+    setSearchString = _useState8[1];
+  var _useState9 = useState(initialVisibleColumnKeys),
+    _useState10 = _slicedToArray(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
 
   // analytics related parameters
   var searchCount = useRef(0);
@@ -157,6 +165,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
   var onSiteSelection = useCallback(function (site) {
+    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setSearchString(undefined);
     setCloudId(site.cloudId);
     reset({
@@ -200,17 +209,17 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
-  var _useState9 = useState(initialColumnCustomSizes),
-    _useState10 = _slicedToArray(_useState9, 2),
-    columnCustomSizes = _useState10[0],
-    setColumnCustomSizes = _useState10[1];
+  var _useState11 = useState(initialColumnCustomSizes),
+    _useState12 = _slicedToArray(_useState11, 2),
+    columnCustomSizes = _useState12[0],
+    setColumnCustomSizes = _useState12[1];
   var onColumnResize = useCallback(function (key, width) {
     setColumnCustomSizes(_objectSpread(_objectSpread({}, columnCustomSizes), {}, _defineProperty({}, key, width)));
   }, [columnCustomSizes]);
-  var _useState11 = useState(initialWrappedColumnKeys),
-    _useState12 = _slicedToArray(_useState11, 2),
-    wrappedColumnKeys = _useState12[0],
-    setWrappedColumnKeys = _useState12[1];
+  var _useState13 = useState(initialWrappedColumnKeys),
+    _useState14 = _slicedToArray(_useState13, 2),
+    wrappedColumnKeys = _useState14[0],
+    setWrappedColumnKeys = _useState14[1];
   var onWrappedColumnChange = useCallback(function (key, isWrapped) {
     var set = new Set(wrappedColumnKeys);
     if (isWrapped) {
@@ -256,7 +265,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
-  var confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search/?text=").concat(encodeURI(searchString));
+  var confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search?text=").concat(encodeURI(searchString));
   var analyticsPayload = useMemo(function () {
     return {
       extensionKey: extensionKey,
@@ -265,7 +274,36 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       actions: Array.from(userInteractionActions.current)
     };
   }, [destinationObjectTypes, extensionKey]);
-  var renderModalContent = useCallback(function () {
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var fireInlineViewedEvent = useCallback(function () {
+    fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    }));
+  }, [analyticsPayload, fireEvent, totalCount]);
+  var fireTableViewedEvent = useCallback(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  useEffect(function () {
+    var isResolved = status === 'resolved';
+    var isTableViewMode = currentViewMode === 'issue' || currentViewMode === 'table';
+    var isInlineViewMode = currentViewMode === 'count' || currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  var renderTableModalContent = useCallback(function () {
     if (status === 'rejected') {
       return jsx(ModalLoadingError, null);
     } else if (status === 'unauthorized') {
@@ -289,7 +327,22 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     }
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
-  var shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  var renderInlineLinkModalContent = useCallback(function () {
+    if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
+      });
+    } else {
+      return confluenceSearchUrl && jsx(SmartLink, {
+        url: confluenceSearchUrl
+      });
+    }
+  }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
+  var shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
   var onInsertPressed = useCallback(function (e, analyticsEvent) {
     var _insertButtonClickedE;
     if (!isParametersSet || !cloudId) {
@@ -300,7 +353,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
         totalItemCount: totalCount || 0,
         displayedColumnCount: visibleColumnCount.current,
-        display: DatasourceDisplay.DATASOURCE_TABLE,
+        display: currentViewMode === 'inline' ? DatasourceDisplay.DATASOURCE_INLINE : DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
         actions: Array.from(userInteractionActions.current)
@@ -309,29 +362,42 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     });
     var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
     insertButtonClickedEvent.fire(EVENT_CHANNEL);
-    onInsert(buildDatasourceAdf({
-      id: datasourceId,
-      parameters: _objectSpread(_objectSpread({}, parameters), {}, {
-        cloudId: cloudId
-      }),
-      views: [{
-        type: 'table',
-        properties: {
-          columns: (visibleColumnKeys || []).map(function (key) {
-            var width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
-            var isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
-            return _objectSpread(_objectSpread({
-              key: key
-            }, width ? {
-              width: width
-            } : {}), isWrapped ? {
-              isWrapped: isWrapped
-            } : {});
-          })
+    if (currentViewMode === 'inline') {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: confluenceSearchUrl
         }
-      }]
-    }), consumerEvent);
-  }, [isParametersSet, cloudId, analyticsPayload, totalCount, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+      }, consumerEvent);
+    } else {
+      onInsert(buildDatasourceAdf({
+        id: datasourceId,
+        parameters: _objectSpread(_objectSpread({}, parameters), {}, {
+          cloudId: cloudId
+        }),
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys || []).map(function (key) {
+              var width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
+              var isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
+              return _objectSpread(_objectSpread({
+                key: key
+              }, width ? {
+                width: width
+              } : {}), isWrapped ? {
+                isWrapped: isWrapped
+              } : {});
+            })
+          }
+        }]
+      }), consumerEvent);
+    }
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
   var onSearch = useCallback(function (newSearchString) {
     searchCount.current++;
     userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
@@ -363,14 +429,17 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  }))), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
+  })), !hasNoConfluenceSites && jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  })), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
     xcss: inputContainerStyles
   }, jsx(ConfluenceSearchContainer, {
     cloudId: cloudId,
     isSearching: status === 'loading',
     onSearch: onSearch,
     initialSearchValue: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString
-  })), renderModalContent()) : jsx(NoInstancesView, {
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'

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

@@ -44,5 +44,10 @@ export var confluenceSearchModalMessages = defineMessages({
     id: 'linkDataSource.confluence-search.no.confluence.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Confluence sites',
     defaultMessage: 'To request access, contact your admin.'
+  },
+  resultsCountSmartCardPlaceholderText: {
+    id: 'linkDataSource.confluence-search.configmodal.placeholder.issues',
+    description: 'Placeholder text that will be placed next to a count of confluence search results',
+    defaultMessage: '### Results'
   }
 });

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

@@ -1,28 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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 { useDebouncedCallback } from 'use-debounce';
-import { CheckboxOption, PopupSelect } from '@atlaskit/select';
-import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { FilterPopupSelect } from '../../../../common/modal/popup-select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
-import CustomMenuList from '../menu-list';
-import CustomControl from './control';
-import CustomDropdownIndicator from './dropdownIndicator';
-import PopupFooter from './footer';
-import formatOptionLabel from './formatOptionLabel';
 import { asyncPopupSelectMessages } from './messages';
-import PopupTrigger from './trigger';
-// Needed to disable filtering from react-select
-var noFilterOptions = function noFilterOptions() {
-  return true;
-};
 export var SEARCH_DEBOUNCE_MS = 350;
 var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
@@ -35,8 +20,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
-    fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -45,15 +28,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    sortedOptions = _useState6[0],
-    setSortedOptions = _useState6[1];
   var _ref2 = site || {},
     cloudId = _ref2.cloudId;
   var currentSiteCloudId = useRef(cloudId || '');
-  var sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
-
   var _useFilterOptions = useFilterOptions({
       filterType: filterType,
       site: site
@@ -73,123 +50,44 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
   var handleInputChange = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
-              setSearchTerm(newSearchTerm);
-              handleDebouncedFetchFilterOptions(newSearchTerm);
-            }
-          case 1:
+            setSearchTerm(newSearchTerm);
+            handleDebouncedFetchFilterOptions(newSearchTerm);
+          case 2:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function (_x, _x2) {
+    return function (_x) {
       return _ref3.apply(this, arguments);
     };
-  }(), [handleDebouncedFetchFilterOptions, searchTerm]);
+  }(), [handleDebouncedFetchFilterOptions]);
   var handleOptionSelection = useCallback(function (newValue) {
     onSelectionChange(filterType, newValue);
   }, [filterType, onSelectionChange]);
-  var sortOptionsOnPopupOpen = useCallback(function () {
-    if (selectedOptions.length === 0) {
-      return setSortedOptions(filterOptions);
-    }
-    var nonSelectedOptions = filterOptions.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, filterOptions, 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(filterOptions);
-    }
-
-    // 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 = filterOptions.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();
-  }, [filterOptions, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
   var handleShowMore = useCallback(function () {
     if (pageCursor) {
-      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor: pageCursor,
         searchString: searchTerm
       });
-      fireEvent('ui.button.clicked.basicSearchDropdown', {
-        filterType: filterType,
-        type: 'showMore'
-      });
     }
-  }, [fetchFilterOptions, filterType, fireEvent, pageCursor, searchTerm]);
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   var handleMenuOpen = useCallback(function () {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
         searchString: searchTerm
       });
-    } else if (status === 'resolved') {
-      sortOptionsOnPopupOpen();
     }
-    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
-      filterType: filterType,
-      selectionCount: selectedOptions.length
-    });
-  }, [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, handleInputChange, searchTerm, selectedOptions.length]);
-  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
-
+  }, [fetchFilterOptions, searchTerm, status]);
   useEffect(function () {
     if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
-      setSortedOptions([]);
       setSearchTerm('');
       resetHook();
     }
@@ -204,29 +102,27 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
   var isEmpty = status === 'resolved' && filterOptionsLength === 0;
-  var popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
+  var popupSelectOptions = isLoading || isError ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
   var areAllResultsLoaded = filterOptionsLength === totalCount;
   var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  return /*#__PURE__*/React.createElement(PopupSelect, {
-    isMulti: true,
-    maxMenuWidth: 300,
-    minMenuWidth: 300,
-    testId: "jlol-basic-filter-popup-select",
-    inputId: "jlol-basic-filter-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: isLoading,
-    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
+  var triggerButtonLabel = formatMessage(asyncPopupSelectMessages["".concat(filterType, "Label")]);
+  return /*#__PURE__*/React.createElement(FilterPopupSelect, {
+    filterName: "jlol-basic-filter-".concat(filterType),
+    status: status,
+    showLoading: isLoading,
+    showHydrating: isJQLHydrating,
+    isDisabled: isDisabled,
+    totalCount: totalCount,
+    shouldShowFooter: shouldShowFooter,
+    selectedOptions: selectedOptions,
+    options: popupSelectOptions,
+    buttonLabel: triggerButtonLabel,
+    onInputChange: handleInputChange,
+    onSelectionChange: handleOptionSelection,
+    onMenuOpen: handleMenuOpen,
     menuListProps: {
-      filterType: filterType,
+      filterName: filterType,
       isError: isError,
       isEmpty: isEmpty,
       isLoading: isLoading,
@@ -234,39 +130,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       handleShowMore: handleShowMore,
       errors: errors,
       showMore: shouldDisplayShowMoreButton
-    },
-    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: popupSelectOptions,
-    value: selectedOptions,
-    filterOption: noFilterOptions,
-    formatOptionLabel: formatOptionLabel,
-    onChange: handleOptionSelection,
-    onInputChange: handleInputChange,
-    onOpen: handleMenuOpen,
-    onClose: handleMenuClose,
-    target: function target(_ref4) {
-      var isOpen = _ref4.isOpen,
-        triggerProps = _objectWithoutProperties(_ref4, _excluded);
-      return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
-        filterType: filterType,
-        selectedOptions: selectedOptions,
-        isSelected: isOpen,
-        isDisabled: isDisabled,
-        isLoading: isJQLHydrating
-      }));
-    },
-    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: popupSelectOptions.length,
-      totalCount: totalCount
-    })
+    }
   });
 };
 export default AsyncPopupSelect;

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

@@ -1,15 +1,5 @@
 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}'
-  },
   projectLabel: {
     id: 'linkDataSource.basic-filter.project.label',
     description: 'Label to be displayed for project filter dropdown button.',
@@ -29,10 +19,5 @@ export var asyncPopupSelectMessages = defineMessages({
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
-  },
-  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/jira-search-container/index.js

@@ -218,7 +218,8 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
-    testId: "jira-datasource-modal"
+    testId: "jira-datasource-modal",
+    fullWidth: !showBasicFilters
   }), showBasicFilters && jsx(BasicFilters, {
     jql: searchBarJql,
     site: site,

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

@@ -17,7 +17,7 @@ import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
-import { B400, N0, N800 } from '@atlaskit/theme/colors';
+import { N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -39,29 +39,19 @@ import { InitialStateView } from '../../common/initial-state-view';
 import { initialStateViewMessages } from '../../common/initial-state-view/messages';
 import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
+import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
+import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
-import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraSearchContainer } from '../jira-search-container';
-import { JiraDisplayViewDropDown } from './jira-display-view-dropdown/jira-display-view-drop-down';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-var placeholderSmartLinkStyles = css({
-  backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),
-  borderRadius: "var(--ds-border-radius-200, 3px)",
-  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
-  color: "var(--ds-text-brand, ".concat(B400, ")"),
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
-});
 var issueCountStyles = css({
   flex: 1,
   fontWeight: 600
 });
-var smartLinkContainerStyles = css({
-  paddingLeft: "var(--ds-space-025, 2px)"
-});
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'issue') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -468,12 +458,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
-      return jsx("div", {
-        css: smartLinkContainerStyles
-      }, jsx("span", {
-        "data-testid": "jira-datasource-modal--smart-card-placeholder",
-        css: placeholderSmartLinkStyles
-      }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: modalMessages.issuesCountSmartCardPlaceholderText
+      });
     } else {
       var url;
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
@@ -481,11 +468,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       } else {
         url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(getBooleanFF('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql));
       }
-      return jsx("div", {
-        css: smartLinkContainerStyles
-      }, jsx(LinkRenderType, {
+      return jsx(SmartLink, {
         url: url
-      }));
+      });
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
   var renderIssuesModeContent = useCallback(function () {
@@ -548,7 +533,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     selectedSite: selectedJiraSite,
     testId: "jira-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoJiraSites && jsx(JiraDisplayViewDropDown, {
+  })), !hasNoJiraSites && jsx(DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {