@atlaskit/link-datasource 1.26.3 → 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/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, {

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

@@ -15,26 +15,6 @@ export var 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/types/common/types.d.ts

@@ -7,6 +7,8 @@ export interface Site {
     url: string;
 }
 export type IssueViewModes = 'issue' | 'count';
+export type ViewModes = 'table' | 'inline';
+export type DisplayViewModes = IssueViewModes | ViewModes;
 export type ConfigModalProps<ADF, Parameters> = {
     /** Unique identifier for which type of datasource is being rendered and for making its requests */
     datasourceId: string;
@@ -20,9 +22,7 @@ export type ConfigModalProps<ADF, Parameters> = {
     onInsert: (adf: ADF, analyticsEvent?: UIAnalyticsEvent) => void;
     /** The view mode that the modal will show on open:
      * - Table = Displays a list of links in table format
-     * - Inline link = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
-  
-     * The view modes in 'IssueViewModes' have not been changed from 'count' to 'inline link' and 'issue' to 'table'
-     * because it will introduce breaking changes to the public API requiring a major version bump*/
-    viewMode?: IssueViewModes;
+     * - Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
+     * The view modes in 'DisplayViewModes' includes IssueViewModes which has not been changed from 'count' to 'inline' and 'issue' to 'table' */
+    viewMode?: DisplayViewModes;
 } & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'wrappedColumnKeys' | 'columnCustomSizes'>>;

package/dist/types/ui/common/modal/count-view-smart-link/index.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { MessageDescriptor } from 'react-intl-next';
+export declare const SmartCardPlaceholder: ({ placeholderText, }: {
+    placeholderText: MessageDescriptor;
+}) => jsx.JSX.Element;
+export declare const SmartLink: ({ url }: {
+    url: string;
+}) => jsx.JSX.Element;

package/dist/types/ui/common/modal/display-view-dropdown/display-view-drop-down.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { DisplayViewModes } from '../../../../common/types';
+export type DisplayViewDropDownProps = {
+    onViewModeChange: (value: DisplayViewModes) => void;
+    viewMode: DisplayViewModes;
+};
+export declare const DisplayViewDropDown: ({ onViewModeChange, viewMode, }: DisplayViewDropDownProps) => jsx.JSX.Element;

package/dist/types/ui/common/modal/display-view-dropdown/messages.d.ts

@@ -0,0 +1,42 @@
+export declare const displayViewDropDownMessages: {
+    tableViewModeLabelDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeDescriptionDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabelDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescriptionDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types/ui/confluence-search-modal/modal/messages.d.ts

@@ -44,4 +44,9 @@ export declare const confluenceSearchModalMessages: {
         description: string;
         defaultMessage: string;
     };
+    resultsCountSmartCardPlaceholderText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types/ui/confluence-search-modal/types.d.ts

@@ -1,6 +1,6 @@
-import { DatasourceAdf } from '@atlaskit/linking-common/types';
+import { DatasourceAdf, InlineCardAdf } from '@atlaskit/linking-common/types';
 import { ConfigModalProps } from '../../common/types';
-export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
+export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<InlineCardAdf | ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
 }
 export type ConfluenceSearchDatasourceParameters = {
     cloudId: string;

package/dist/types/ui/jira-issues-modal/modal/messages.d.ts

@@ -14,26 +14,6 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
-    tableViewModeLabel: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    tableViewModeDescription: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    inlineLinkViewModeLabel: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    inlineLinkViewModeDescription: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
     issuesCountSmartCardPlaceholderText: {
         id: string;
         description: string;

package/dist/types-ts4.5/common/types.d.ts

@@ -7,6 +7,8 @@ export interface Site {
     url: string;
 }
 export type IssueViewModes = 'issue' | 'count';
+export type ViewModes = 'table' | 'inline';
+export type DisplayViewModes = IssueViewModes | ViewModes;
 export type ConfigModalProps<ADF, Parameters> = {
     /** Unique identifier for which type of datasource is being rendered and for making its requests */
     datasourceId: string;
@@ -20,9 +22,7 @@ export type ConfigModalProps<ADF, Parameters> = {
     onInsert: (adf: ADF, analyticsEvent?: UIAnalyticsEvent) => void;
     /** The view mode that the modal will show on open:
      * - Table = Displays a list of links in table format
-     * - Inline link = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
-  
-     * The view modes in 'IssueViewModes' have not been changed from 'count' to 'inline link' and 'issue' to 'table'
-     * because it will introduce breaking changes to the public API requiring a major version bump*/
-    viewMode?: IssueViewModes;
+     * - Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
+     * The view modes in 'DisplayViewModes' includes IssueViewModes which has not been changed from 'count' to 'inline' and 'issue' to 'table' */
+    viewMode?: DisplayViewModes;
 } & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys' | 'wrappedColumnKeys' | 'columnCustomSizes'>>;

package/dist/types-ts4.5/ui/common/modal/count-view-smart-link/index.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { MessageDescriptor } from 'react-intl-next';
+export declare const SmartCardPlaceholder: ({ placeholderText, }: {
+    placeholderText: MessageDescriptor;
+}) => jsx.JSX.Element;
+export declare const SmartLink: ({ url }: {
+    url: string;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/display-view-dropdown/display-view-drop-down.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { DisplayViewModes } from '../../../../common/types';
+export type DisplayViewDropDownProps = {
+    onViewModeChange: (value: DisplayViewModes) => void;
+    viewMode: DisplayViewModes;
+};
+export declare const DisplayViewDropDown: ({ onViewModeChange, viewMode, }: DisplayViewDropDownProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/display-view-dropdown/messages.d.ts

@@ -0,0 +1,42 @@
+export declare const displayViewDropDownMessages: {
+    tableViewModeLabelDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeDescriptionDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabelDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescriptionDuplicate: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    tableViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/confluence-search-modal/modal/messages.d.ts

@@ -44,4 +44,9 @@ export declare const confluenceSearchModalMessages: {
         description: string;
         defaultMessage: string;
     };
+    resultsCountSmartCardPlaceholderText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/confluence-search-modal/types.d.ts

@@ -1,6 +1,6 @@
-import { DatasourceAdf } from '@atlaskit/linking-common/types';
+import { DatasourceAdf, InlineCardAdf } from '@atlaskit/linking-common/types';
 import { ConfigModalProps } from '../../common/types';
-export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
+export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<InlineCardAdf | ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
 }
 export type ConfluenceSearchDatasourceParameters = {
     cloudId: string;

package/dist/types-ts4.5/ui/jira-issues-modal/modal/messages.d.ts

@@ -14,26 +14,6 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
-    tableViewModeLabel: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    tableViewModeDescription: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    inlineLinkViewModeLabel: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    inlineLinkViewModeDescription: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
     issuesCountSmartCardPlaceholderText: {
         id: string;
         description: string;