@atlaskit/link-datasource 1.26.2 → 1.27.0

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

@@ -1,20 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 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
-const noFilterOptions = () => true;
 export const SEARCH_DEBOUNCE_MS = 350;
 const AsyncPopupSelect = ({
   filterType,
@@ -27,18 +17,12 @@ const AsyncPopupSelect = ({
   const {
     formatMessage
   } = useIntl();
-  const {
-    fireEvent
-  } = useDatasourceAnalyticsEvents();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
-  const [sortedOptions, setSortedOptions] = useState([]);
   const {
     cloudId
   } = site || {};
   const currentSiteCloudId = useRef(cloudId || '');
-  const sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
-
   const {
     filterOptions,
     fetchFilterOptions,
@@ -56,103 +40,32 @@ const AsyncPopupSelect = ({
       searchString
     });
   }, SEARCH_DEBOUNCE_MS);
-  const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
-    if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
-      setSearchTerm(newSearchTerm);
-      handleDebouncedFetchFilterOptions(newSearchTerm);
-    }
-  }, [handleDebouncedFetchFilterOptions, searchTerm]);
+  const handleInputChange = useCallback(async newSearchTerm => {
+    setSearchTerm(newSearchTerm);
+    handleDebouncedFetchFilterOptions(newSearchTerm);
+  }, [handleDebouncedFetchFilterOptions]);
   const handleOptionSelection = useCallback(newValue => {
     onSelectionChange(filterType, newValue);
   }, [filterType, onSelectionChange]);
-  const sortOptionsOnPopupOpen = useCallback(() => {
-    if (selectedOptions.length === 0) {
-      return setSortedOptions(filterOptions);
-    }
-    const nonSelectedOptions = filterOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
-    const newOptions = [...selectedOptions, ...nonSelectedOptions];
-    if (!isEqual(newOptions, sortedOptions)) {
-      setSortedOptions(newOptions);
-    }
-  }, [selectedOptions, filterOptions, sortedOptions]);
-  const sortOptionsOnResolve = useCallback(() => {
-    // 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) {
-      const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));
-      if (newOptions.length > 0) {
-        setSortedOptions([...sortedOptions, ...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]);
   const handleShowMore = useCallback(() => {
     if (pageCursor) {
-      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor,
         searchString: searchTerm
       });
-      fireEvent('ui.button.clicked.basicSearchDropdown', {
-        filterType,
-        type: 'showMore'
-      });
     }
-  }, [fetchFilterOptions, filterType, fireEvent, pageCursor, searchTerm]);
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   const handleMenuOpen = useCallback(() => {
     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,
-      selectionCount: selectedOptions.length
-    });
-  }, [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, handleInputChange, searchTerm, selectedOptions.length]);
-  useEffect(() => {
-    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(() => {
     if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
-      setSortedOptions([]);
       setSearchTerm('');
       resetHook();
     }
@@ -167,29 +80,27 @@ const AsyncPopupSelect = ({
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
-  const popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
+  const popupSelectOptions = isLoading || isError ? [] : filterOptions; // if not set to [], then on loading, no loading UI will be shown
   const areAllResultsLoaded = filterOptionsLength === totalCount;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   const 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),
+  const triggerButtonLabel = formatMessage(asyncPopupSelectMessages[`${filterType}Label`]);
+  return /*#__PURE__*/React.createElement(FilterPopupSelect, {
+    filterName: `jlol-basic-filter-${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,
+      filterName: filterType,
       isError,
       isEmpty,
       isLoading,
@@ -197,38 +108,7 @@ const AsyncPopupSelect = ({
       handleShowMore,
       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: ({
-      isOpen,
-      ...triggerProps
-    }) => /*#__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/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -1,15 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export const 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 const 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/es2019/ui/jira-issues-modal/jira-search-container/index.js

@@ -193,7 +193,8 @@ export const 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/es2019/ui/jira-issues-modal/modal/index.js

@@ -10,7 +10,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';
@@ -32,29 +32,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';
-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 issueCountStyles = css({
   flex: 1,
   fontWeight: 600
 });
-const smartLinkContainerStyles = css({
-  paddingLeft: "var(--ds-space-025, 2px)"
-});
 const getDisplayValue = (currentViewMode, itemCount) => {
   if (currentViewMode === 'issue') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -422,12 +412,9 @@ export const PlainJiraIssuesConfigModal = props => {
         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 {
       let url;
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
@@ -435,11 +422,9 @@ export const PlainJiraIssuesConfigModal = props => {
       } else {
         url = `${selectedJiraSiteUrl}/issues/?jql=${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]);
   const renderIssuesModeContent = useCallback(() => {
@@ -501,7 +486,7 @@ export const PlainJiraIssuesConfigModal = props => {
     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, {

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

@@ -15,26 +15,6 @@ export const modalMessages = 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/esm/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';
@@ -39,15 +38,8 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     e.preventDefault();
     handleSearchWithAnalytics();
   };
-  var showBasicFilters = useMemo(function () {
-    if (getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters')) {
-      return true;
-    }
-    return false;
-  }, []);
-  var isFullWidth = fullWidth || !showBasicFilters;
   return jsx("form", {
-    css: isFullWidth ? formStyles : formWithMaxWidthStyles,
+    css: fullWidth ? formStyles : formWithMaxWidthStyles,
     onSubmit: handleFormSubmit
   }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {

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

@@ -0,0 +1,32 @@
+/** @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';
+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 smartLinkContainerStyles = css({
+  paddingLeft: "var(--ds-space-025, 2px)"
+});
+export var SmartCardPlaceholder = function SmartCardPlaceholder(_ref) {
+  var placeholderText = _ref.placeholderText;
+  return jsx("div", {
+    css: smartLinkContainerStyles
+  }, jsx("span", {
+    "data-testid": "datasource-modal--smart-card-placeholder",
+    css: placeholderSmartLinkStyles
+  }, jsx(FormattedMessage, placeholderText)));
+};
+export var SmartLink = function SmartLink(_ref2) {
+  var url = _ref2.url;
+  return jsx("div", {
+    css: smartLinkContainerStyles
+  }, jsx(LinkRenderType, {
+    url: url
+  }));
+};

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

@@ -0,0 +1,73 @@
+/** @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';
+var dropDownItemGroupStyles = xcss({
+  width: '320px',
+  height: '140px',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderRadius: 'border.radius'
+});
+var 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 var DisplayViewDropDown = function DisplayViewDropDown(_ref) {
+  var onViewModeChange = _ref.onViewModeChange,
+    viewMode = _ref.viewMode;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  // TODO: further refactoring in EDM-9573
+  // temporary fix. transition 'count' to 'inline', 'issue' to 'table'
+  var isJira = viewMode === 'issue' || viewMode === 'count';
+  var isTable = viewMode === 'table' || viewMode === 'issue';
+  var 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: function onClick() {
+      return 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: function onClick() {
+      return 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/esm/ui/common/modal/display-view-dropdown/messages.js

@@ -0,0 +1,52 @@
+import { defineMessages } from 'react-intl-next';
+export var 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'
+  }
+});