@atlaskit/link-datasource 1.26.2 → 1.27.0

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

@@ -0,0 +1,170 @@
+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 { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { useDatasourceAnalyticsEvents } from '../../../../analytics';
+import CustomControl from './control';
+import CustomDropdownIndicator from './dropdownIndicator';
+import PopupFooter from './footer';
+import formatOptionLabel from './formatOptionLabel';
+import CustomMenuList from './menu-list';
+import { asyncPopupSelectMessages } from './messages';
+import PopupTrigger from './trigger';
+// Needed to disable filtering from react-select
+const noFilterOptions = () => true;
+export const FilterPopupSelect = ({
+  filterName,
+  totalCount,
+  status,
+  buttonLabel,
+  showLoading = false,
+  isDisabled = false,
+  showHydrating = false,
+  shouldShowFooter = true,
+  menuListProps,
+  options,
+  selectedOptions,
+  onSelectionChange,
+  onInputChange,
+  onMenuClose,
+  onMenuOpen
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortedOptions, setSortedOptions] = useState([]);
+  const sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
+
+  const sortOptionsOnPopupOpen = useCallback(() => {
+    if (selectedOptions.length === 0) {
+      return setSortedOptions(options);
+    }
+    const nonSelectedOptions = options.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
+    const newOptions = [...selectedOptions, ...nonSelectedOptions];
+    if (!isEqual(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, options, 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(options);
+    }
+
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
+    // this block handles the pagination, where on pagination, we will just append newOptions to the current list
+    if (sortPaginatedResults.current) {
+      const newOptions = options.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();
+  }, [options, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
+  const handleMenuOpen = useCallback(() => {
+    if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
+      filterName,
+      selectionCount: selectedOptions.length
+    });
+    onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+  }, [filterName, fireEvent, onMenuOpen, 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) {
+      setSearchTerm('');
+    }
+    onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose();
+    fireEvent('ui.dropdown.closed.basicSearchDropdown', {
+      filterName,
+      selectionCount: selectedOptions.length
+    });
+  }, [filterName, fireEvent, onMenuClose, searchTerm, selectedOptions.length]);
+  const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
+    if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+      setSearchTerm(newSearchTerm);
+      onInputChange(newSearchTerm, actionMeta);
+    }
+  }, [onInputChange, searchTerm]);
+  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
+
+  useEffect(() => {
+    if (status === 'loadingMore') {
+      sortPaginatedResults.current = true;
+    }
+  }, [status]);
+  return /*#__PURE__*/React.createElement(PopupSelect, {
+    isMulti: true,
+    maxMenuWidth: 300,
+    minMenuWidth: 300,
+    testId: `${filterName}-popup-select`,
+    inputId: `${filterName}-popup-select--input`
+    /*
+      this threshold controls the display of the search control (input field for search)
+      if this threshold is less than 0, when typing a search string that returns no results it will not remove the search control
+      if this threshold is 0 or higher, it will remove the search control when there are no results, the user will be unable to clear the search to see more results
+    */,
+    searchThreshold: -1,
+    inputValue: searchTerm,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    isLoading: showLoading,
+    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
+    menuListProps: menuListProps,
+    components: {
+      Option: CheckboxOption,
+      Control: CustomControl,
+      MenuList: CustomMenuList,
+      DropdownIndicator: CustomDropdownIndicator,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
+    },
+    options: sortedOptions,
+    value: selectedOptions,
+    filterOption: noFilterOptions,
+    formatOptionLabel: formatOptionLabel,
+    onChange: onSelectionChange,
+    onInputChange: handleInputChange,
+    onOpen: handleMenuOpen,
+    onClose: handleMenuClose,
+    target: ({
+      isOpen,
+      ...triggerProps
+    }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
+      label: buttonLabel,
+      selectedOptions: selectedOptions,
+      isSelected: isOpen,
+      isDisabled: isDisabled,
+      isLoading: showHydrating,
+      testId: filterName
+    })),
+    footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
+      currentDisplayCount: options.length,
+      totalCount: totalCount
+    })
+  });
+};

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

@@ -3,7 +3,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
-import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 const getErrorReasonType = errors => {
@@ -17,7 +17,7 @@ const getErrorReasonType = errors => {
   return 'unknown';
 };
 const CustomErrorMessage = ({
-  filterType,
+  filterName,
   errors
 }) => {
   const {
@@ -30,7 +30,7 @@ const CustomErrorMessage = ({
    */
   const [debouncedAnalyticsCallback] = useDebouncedCallback(() => {
     fireEvent('ui.error.shown.basicSearchDropdown', {
-      filterType,
+      filterName,
       reason: getErrorReasonType(errors)
     });
   }, SEARCH_DEBOUNCE_MS);

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

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

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

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

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

@@ -3,11 +3,11 @@ import { useDebouncedCallback } from 'use-debounce';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
-import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
+import { SEARCH_DEBOUNCE_MS } from '../../../../jira-issues-modal/basic-filters/ui/async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
 const CustomNoOptionsMessage = ({
-  filterType
+  filterName
 }) => {
   const {
     fireEvent
@@ -21,7 +21,7 @@ const CustomNoOptionsMessage = ({
    */
   const [debouncedAnalyticsCallback] = useDebouncedCallback(() => {
     fireEvent('ui.emptyResult.shown.basicSearchDropdown', {
-      filterType
+      filterName
     });
   }, SEARCH_DEBOUNCE_MS);
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);

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

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

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

@@ -0,0 +1,13 @@
+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}'
+  }
+});

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

@@ -1,12 +1,10 @@
 import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
-import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import { asyncPopupSelectMessages } from './messages';
 const triggerButtonLabelStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -31,22 +29,23 @@ export const LoadingStateAnimationWrapper = styled.div({
   }
 });
 const PopupTrigger = /*#__PURE__*/forwardRef(({
-  filterType,
   isSelected,
   isDisabled,
   isLoading,
-  selectedOptions
+  selectedOptions,
+  testId,
+  label
 }, ref) => {
   const [firstOption] = selectedOptions || [];
   const hasOptions = selectedOptions && selectedOptions.length > 0;
   const showButtonLoading = !isDisabled && isLoading;
-  const testId = `jlol-basic-filter-${filterType}-trigger`;
+  const tiggerButtonTestId = `${testId}-trigger`;
   const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
     iconAfter: /*#__PURE__*/React.createElement(Spinner, {
       size: 'xsmall'
     }),
-    testId: `${testId}--loading-button`
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]))), [filterType, testId]);
+    testId: `${tiggerButtonTestId}--loading-button`
+  }, label)), [label, tiggerButtonTestId]);
   const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     isSelected: isSelected || hasOptions,
@@ -54,15 +53,15 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     }),
-    testId: `${testId}--button`
+    testId: `${tiggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
     xcss: triggerButtonLabelStyles
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+  }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
     xcss: badgeStyles,
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
-  }, "+", selectedOptions.length - 1)))), [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
+  }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, tiggerButtonTestId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -70,7 +69,7 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
    */
   return /*#__PURE__*/React.createElement(Box, {
     ref: ref,
-    testId: testId
+    testId: tiggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+const basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+const BasicFilterContainer = ({}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export default BasicFilterContainer;

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

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

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

@@ -27,6 +27,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';
@@ -64,11 +66,13 @@ export const PlainConfluenceSearchConfigModal = props => {
     wrappedColumnKeys: initialWrappedColumnKeys,
     onCancel,
     onInsert,
+    viewMode = 'table',
     parameters: initialParameters,
     url: urlBeingEdited,
     visibleColumnKeys: initialVisibleColumnKeys
   } = props;
   const [availableSites, setAvailableSites] = useState(undefined);
+  const [currentViewMode, setCurrentViewMode] = useState(viewMode);
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
@@ -133,6 +137,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
   const onSiteSelection = useCallback(site => {
+    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setSearchString(undefined);
     setCloudId(site.cloudId);
     reset({
@@ -207,14 +212,45 @@ export const PlainConfluenceSearchConfigModal = props => {
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
-  const confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && `${selectedConfluenceSiteUrl}/wiki/search/?text=${encodeURI(searchString)}`;
+  const confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && `${selectedConfluenceSiteUrl}/wiki/search?text=${encodeURI(searchString)}`;
   const analyticsPayload = useMemo(() => ({
     extensionKey,
     destinationObjectTypes,
     searchCount: searchCount.current,
     actions: Array.from(userInteractionActions.current)
   }), [destinationObjectTypes, extensionKey]);
-  const renderModalContent = useCallback(() => {
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const fireInlineViewedEvent = useCallback(() => {
+    fireEvent('ui.link.viewed.count', {
+      ...analyticsPayload,
+      searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    });
+  }, [analyticsPayload, fireEvent, totalCount]);
+  const fireTableViewedEvent = useCallback(() => {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      });
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  useEffect(() => {
+    const isResolved = status === 'resolved';
+    const isTableViewMode = currentViewMode === 'issue' || currentViewMode === 'table';
+    const isInlineViewMode = currentViewMode === 'count' || currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  const renderTableModalContent = useCallback(() => {
     if (status === 'rejected') {
       return jsx(ModalLoadingError, null);
     } else if (status === 'unauthorized') {
@@ -238,7 +274,22 @@ export const PlainConfluenceSearchConfigModal = props => {
     }
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
-  const shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  const renderInlineLinkModalContent = useCallback(() => {
+    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]);
+  const shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
   const onInsertPressed = useCallback((e, analyticsEvent) => {
     var _insertButtonClickedE;
     if (!isParametersSet || !cloudId) {
@@ -250,7 +301,7 @@ export const PlainConfluenceSearchConfigModal = props => {
         ...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)
@@ -259,32 +310,45 @@ export const PlainConfluenceSearchConfigModal = props => {
     });
     const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
     insertButtonClickedEvent.fire(EVENT_CHANNEL);
-    onInsert(buildDatasourceAdf({
-      id: datasourceId,
-      parameters: {
-        ...parameters,
-        cloudId
-      },
-      views: [{
-        type: 'table',
-        properties: {
-          columns: (visibleColumnKeys || []).map(key => {
-            const width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
-            const isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
-            return {
-              key,
-              ...(width ? {
-                width
-              } : {}),
-              ...(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: {
+          ...parameters,
+          cloudId
+        },
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys || []).map(key => {
+              const width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
+              const isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
+              return {
+                key,
+                ...(width ? {
+                  width
+                } : {}),
+                ...(isWrapped ? {
+                  isWrapped
+                } : {})
+              };
+            })
+          }
+        }]
+      }), consumerEvent);
+    }
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  const handleViewModeChange = selectedMode => {
+    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
   const onSearch = useCallback(newSearchString => {
     searchCount.current++;
     userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
@@ -316,14 +380,17 @@ export const PlainConfluenceSearchConfigModal = props => {
     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/es2019/ui/confluence-search-modal/modal/messages.js

@@ -44,5 +44,10 @@ export const 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'
   }
 });