@atlaskit/link-datasource 1.26.3 → 1.27.0

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'
+  }
+});

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'
   }
 });

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/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'
+  }
+});