@atlaskit/link-datasource 1.26.2 → 1.27.0

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

@@ -6,33 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SEARCH_DEBOUNCE_MS = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactIntlNext = require("react-intl-next");
 var _useDebounce = require("use-debounce");
-var _select = require("@atlaskit/select");
-var _analytics = require("../../../../../analytics");
+var _popupSelect = require("../../../../common/modal/popup-select");
 var _useFilterOptions2 = require("../../hooks/useFilterOptions");
-var _menuList = _interopRequireDefault(require("../menu-list"));
-var _control = _interopRequireDefault(require("./control"));
-var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
-var _footer = _interopRequireDefault(require("./footer"));
-var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
 var _messages = require("./messages");
-var _trigger = _interopRequireDefault(require("./trigger"));
-var _excluded = ["isOpen"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// Needed to disable filtering from react-select
-var noFilterOptions = function noFilterOptions() {
-  return true;
-};
 var SEARCH_DEBOUNCE_MS = exports.SEARCH_DEBOUNCE_MS = 350;
 var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
@@ -45,8 +30,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
-    fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     searchTerm = _useState2[0],
@@ -55,15 +38,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    sortedOptions = _useState6[0],
-    setSortedOptions = _useState6[1];
   var _ref2 = site || {},
     cloudId = _ref2.cloudId;
   var currentSiteCloudId = (0, _react.useRef)(cloudId || '');
-  var sortPaginatedResults = (0, _react.useRef)(false); // this is to track pagination for sorting purpose
-
   var _useFilterOptions = (0, _useFilterOptions2.useFilterOptions)({
       filterType: filterType,
       site: site
@@ -83,123 +60,44 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
   var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm) {
       return _regenerator.default.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 = (0, _react.useCallback)(function (newValue) {
     onSelectionChange(filterType, newValue);
   }, [filterType, onSelectionChange]);
-  var sortOptionsOnPopupOpen = (0, _react.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((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
-    if (!(0, _isEqual.default)(newOptions, sortedOptions)) {
-      setSortedOptions(newOptions);
-    }
-  }, [selectedOptions, filterOptions, sortedOptions]);
-  var sortOptionsOnResolve = (0, _react.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((0, _toConsumableArray2.default)(sortedOptions), (0, _toConsumableArray2.default)(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 = (0, _react.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 = (0, _react.useCallback)(function () {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
         searchString: searchTerm
       });
-    } else if (status === 'resolved') {
-      sortOptionsOnPopupOpen();
     }
-    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
-      filterType: filterType,
-      selectionCount: selectedOptions.length
-    });
-  }, [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, handleInputChange, searchTerm, selectedOptions.length]);
-  (0, _react.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]);
   (0, _react.useEffect)(function () {
     if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
-      setSortedOptions([]);
       setSearchTerm('');
       resetHook();
     }
@@ -214,29 +112,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.default.createElement(_select.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(_messages.asyncPopupSelectMessages.selectPlaceholder),
+  var triggerButtonLabel = formatMessage(_messages.asyncPopupSelectMessages["".concat(filterType, "Label")]);
+  return /*#__PURE__*/_react.default.createElement(_popupSelect.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,
@@ -244,39 +140,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       handleShowMore: handleShowMore,
       errors: errors,
       showMore: shouldDisplayShowMoreButton
-    },
-    components: {
-      Option: _select.CheckboxOption,
-      Control: _control.default,
-      MenuList: _menuList.default,
-      DropdownIndicator: _dropdownIndicator.default,
-      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.default,
-    onChange: handleOptionSelection,
-    onInputChange: handleInputChange,
-    onOpen: handleMenuOpen,
-    onClose: handleMenuClose,
-    target: function target(_ref4) {
-      var isOpen = _ref4.isOpen,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
-        filterType: filterType,
-        selectedOptions: selectedOptions,
-        isSelected: isOpen,
-        isDisabled: isDisabled,
-        isLoading: isJQLHydrating
-      }));
-    },
-    footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {
-      currentDisplayCount: popupSelectOptions.length,
-      totalCount: totalCount
-    })
+    }
   });
 };
 var _default = exports.default = AsyncPopupSelect;

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

@@ -6,16 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.asyncPopupSelectMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = (0, _reactIntlNext.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.',
@@ -35,10 +25,5 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = (0, _reactIntl
     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/cjs/ui/jira-issues-modal/jira-search-container/index.js

@@ -227,7 +227,8 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: _messages.basicSearchInputMessages.basicTextSearchLabel,
-    testId: "jira-datasource-modal"
+    testId: "jira-datasource-modal",
+    fullWidth: !showBasicFilters
   }), showBasicFilters && (0, _react2.jsx)(_basicFilters.BasicFilters, {
     jql: searchBarJql,
     site: site,

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

@@ -44,33 +44,23 @@ var _initialStateView = require("../../common/initial-state-view");
 var _messages2 = require("../../common/initial-state-view/messages");
 var _cancelButton = require("../../common/modal/cancel-button");
 var _contentContainer = require("../../common/modal/content-container");
+var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
+var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
-var _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
 var _ui = require("../basic-filters/ui");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _jiraSearchContainer = require("../jira-search-container");
-var _jiraDisplayViewDropDown = require("./jira-display-view-dropdown/jira-display-view-drop-down");
 var _jiraIssuesInitialStateSvg = require("./jira-issues-initial-state-svg");
 var _messages3 = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /** @jsx jsx */
-var placeholderSmartLinkStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.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(_colors.B400, ")"),
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
-});
 var issueCountStyles = (0, _react2.css)({
   flex: 1,
   fontWeight: 600
 });
-var smartLinkContainerStyles = (0, _react2.css)({
-  paddingLeft: "var(--ds-space-025, 2px)"
-});
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'issue') {
     return _types.DatasourceDisplay.DATASOURCE_TABLE;
@@ -477,12 +467,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
         url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
-      return (0, _react2.jsx)("div", {
-        css: smartLinkContainerStyles
-      }, (0, _react2.jsx)("span", {
-        "data-testid": "jira-datasource-modal--smart-card-placeholder",
-        css: placeholderSmartLinkStyles
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.issuesCountSmartCardPlaceholderText)));
+      return (0, _react2.jsx)(_countViewSmartLink.SmartCardPlaceholder, {
+        placeholderText: _messages3.modalMessages.issuesCountSmartCardPlaceholderText
+      });
     } else {
       var url;
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
@@ -490,11 +477,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       } else {
         url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql));
       }
-      return (0, _react2.jsx)("div", {
-        css: smartLinkContainerStyles
-      }, (0, _react2.jsx)(_link.default, {
+      return (0, _react2.jsx)(_countViewSmartLink.SmartLink, {
         url: url
-      }));
+      });
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
   var renderIssuesModeContent = (0, _react.useCallback)(function () {
@@ -557,7 +542,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     selectedSite: selectedJiraSite,
     testId: "jira-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoJiraSites && (0, _react2.jsx)(_jiraDisplayViewDropDown.JiraDisplayViewDropDown, {
+  })), !hasNoJiraSites && (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoJiraSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {

package/dist/cjs/ui/jira-issues-modal/modal/messages.js

@@ -21,26 +21,6 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
     description: 'Title for the Jira Issues modal when a user has to select a site to inserting issues from',
     defaultMessage: 'Insert Jira issues from'
   },
-  tableViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.tableViewModeLabel',
-    description: 'Display Jira search results as a table',
-    defaultMessage: 'Table'
-  },
-  tableViewModeDescription: {
-    id: 'linkDataSource.jira-issues.configmodal.tableViewModeDescription',
-    description: 'Description for table view mode',
-    defaultMessage: 'Display Jira search results as a table'
-  },
-  inlineLinkViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeLabel',
-    description: 'Display the number of search results as an inline smart link',
-    defaultMessage: 'Inline link'
-  },
-  inlineLinkViewModeDescription: {
-    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeDescription',
-    description: 'Description for inline link view mode',
-    defaultMessage: 'Display the number of search results or as an inline smart link'
-  },
   issuesCountSmartCardPlaceholderText: {
     id: 'linkDataSource.jira-issues.configmodal.placeholder.issues',
     description: 'Placeholder text that will be placed next to a count of jira issues',

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

@@ -1,10 +1,9 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Textfield from '@atlaskit/textfield';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
@@ -42,15 +41,8 @@ export const BasicSearchInput = ({
     e.preventDefault();
     handleSearchWithAnalytics();
   };
-  const showBasicFilters = useMemo(() => {
-    if (getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters')) {
-      return true;
-    }
-    return false;
-  }, []);
-  const isFullWidth = fullWidth || !showBasicFilters;
   return jsx("form", {
-    css: isFullWidth ? formStyles : formWithMaxWidthStyles,
+    css: fullWidth ? formStyles : formWithMaxWidthStyles,
     onSubmit: handleFormSubmit
   }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {

package/dist/es2019/ui/common/modal/count-view-smart-link/index.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { B400, N0 } from '@atlaskit/theme/colors';
+import LinkRenderType from '../../../issue-like-table/render-type/link';
+const placeholderSmartLinkStyles = css({
+  backgroundColor: `var(--ds-surface-raised, ${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, ${B400})`,
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-025, 2px)"}`
+});
+const smartLinkContainerStyles = css({
+  paddingLeft: "var(--ds-space-025, 2px)"
+});
+export const SmartCardPlaceholder = ({
+  placeholderText
+}) => jsx("div", {
+  css: smartLinkContainerStyles
+}, jsx("span", {
+  "data-testid": `datasource-modal--smart-card-placeholder`,
+  css: placeholderSmartLinkStyles
+}, jsx(FormattedMessage, placeholderText)));
+export const SmartLink = ({
+  url
+}) => jsx("div", {
+  css: smartLinkContainerStyles
+}, jsx(LinkRenderType, {
+  url: url
+}));

package/dist/es2019/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -0,0 +1,71 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import TableIcon from '@atlaskit/icon/glyph/table';
+import { Box, xcss } from '@atlaskit/primitives';
+import { displayViewDropDownMessages } from './messages';
+const dropDownItemGroupStyles = xcss({
+  width: '320px',
+  height: '140px',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderRadius: 'border.radius'
+});
+const InlineIcon = jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, jsx("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4 9C2.89543 9 2 9.67155 2 10.5V13.5C2 14.3285 2.89543 15 4 15H20C21.1046 15 22 14.3285 22 13.5V10.5C22 9.67155 21.1046 9 20 9H4ZM4.22222 11.25C4.22222 10.5 4.22222 10.5 5 10.5H7C7.55556 10.5 7.55556 10.5 7.55556 11.25V13C7.55556 13.5 7.55556 13.5 7 13.5H5C4.22222 13.5 4.22222 13.5 4.22222 13V11.25ZM9 12C9 11.7929 9.2239 11.625 9.5 11.625H19.5C19.7761 11.625 20 11.7929 20 12C20 12.2071 19.7761 12.375 19.5 12.375H9.5C9.2239 12.375 9 12.2071 9 12Z",
+  fill: 'currentColor'
+}));
+export const DisplayViewDropDown = ({
+  onViewModeChange,
+  viewMode
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  // TODO: further refactoring in EDM-9573
+  // temporary fix. transition 'count' to 'inline', 'issue' to 'table'
+  const isJira = viewMode === 'issue' || viewMode === 'count';
+  const isTable = viewMode === 'table' || viewMode === 'issue';
+  const triggerText = isTable ? formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? displayViewDropDownMessages.tableViewModeLabel : displayViewDropDownMessages.tableViewModeLabelDuplicate) : formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? displayViewDropDownMessages.inlineLinkViewModeLabel : displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate);
+  return jsx(DropdownMenu, {
+    trigger: triggerText,
+    testId: "datasource-modal--view-drop-down"
+  }, jsx(Box, {
+    xcss: dropDownItemGroupStyles
+  }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
+    testId: "dropdown-item-table",
+    onClick: () => onViewModeChange(isJira ? 'issue' : 'table'),
+    isSelected: isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? displayViewDropDownMessages.tableViewModeDescription : displayViewDropDownMessages.tableViewModeDescriptionDuplicate),
+    elemBefore: jsx(TableIcon, {
+      label: "table icon"
+    })
+  }, jsx(FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? displayViewDropDownMessages.tableViewModeLabel : displayViewDropDownMessages.tableViewModeLabelDuplicate)), jsx(DropdownItem, {
+    testId: "dropdown-item-inline-link",
+    onClick: () => onViewModeChange(isJira ? 'count' : 'inline'),
+    isSelected: !isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? displayViewDropDownMessages.inlineLinkViewModeDescription : displayViewDropDownMessages.inlineLinkViewModeDescriptionDuplicate),
+    elemBefore: InlineIcon
+  }, jsx(FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? displayViewDropDownMessages.inlineLinkViewModeLabel : displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate)))));
+};

package/dist/es2019/ui/common/modal/display-view-dropdown/messages.js

@@ -0,0 +1,52 @@
+import { defineMessages } from 'react-intl-next';
+export const displayViewDropDownMessages = defineMessages({
+  // TODO EDM-9573
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeLabel',
+    description: 'Display search results as a table',
+    defaultMessage: 'Table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display search results as a table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeLabel',
+    description: 'Display Jira search results as a table',
+    defaultMessage: 'Table'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display Jira search results as a table'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline link view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  }
+});