@atlaskit/link-datasource 1.24.7 → 1.24.9

package/dist/cjs/ui/issue-like-table/index.js

@@ -23,6 +23,7 @@ var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragma
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _zindex = require("../../common/zindex");
@@ -197,7 +198,7 @@ var noDefaultBorderStyles = (0, _react2.css)({
   borderBottom: 0
 });
 var headerStyles = (0, _react2.css)({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, ".concat(_typography.fontFallback.body.UNSAFE_small, ")"),
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var headingHoverEffectStyles = (0, _react2.css)({

package/dist/cjs/ui/issue-like-table/styled.js

@@ -8,9 +8,10 @@ exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.wi
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _styled$th;
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
-var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
+var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
 var Table = exports.Table = _styled.default.table({
   width: '100%'
 });

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

@@ -511,7 +511,15 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
-        url: jqlUrl
+        errorMessage: jqlUrl ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages3.modalMessages.checkConnectionWithSource, {
+          values: {
+            a: function a(urlText) {
+              return (0, _react2.jsx)("a", {
+                href: jqlUrl
+              }, urlText);
+            }
+          }
+        })) : undefined
       });
     } else if (status === 'unauthorized') {
       return (0, _react2.jsx)(_accessRequired.AccessRequired, {

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

@@ -121,5 +121,10 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
     id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Jira sites',
     defaultMessage: 'To request access, contact your admin.'
+  },
+  checkConnectionWithSource: {
+    id: 'linkDataSource.jira-issues.checkConnectionWithSource',
+    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
+    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
   }
 });

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

@@ -88,6 +88,7 @@ var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
       tooltipText = _ref.tooltipText;
     var isSelected = value === selectedOptionValue;
     return (0, _react2.jsx)(_tooltip.default, {
+      key: value,
       content: tooltipText
     }, function (tooltipProps) {
       return (0, _react2.jsx)("label", (0, _extends2.default)({}, tooltipProps, {

package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js

@@ -2,6 +2,7 @@
 
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { CrystalBallSVG } from './assets/crystal-ball-svg';
 import { initialStateViewMessages } from './messages';
 const initialStateViewContainerStyles = css({
@@ -14,7 +15,7 @@ const svgAndTextsWrapperStyles = css({
   alignSelf: 'center'
 });
 const searchTitleStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)"
 });

package/dist/es2019/ui/common/error-state/access-required.js

@@ -5,12 +5,13 @@ import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N400 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
 const urlStyles = css({
   color: `var(--ds-text-subtlest, ${N400})`,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: `var(--ds-font-body, ${fontFallback.body.medium})`
 });
 const descriptionMessageStyles = css({
   display: 'flex',

package/dist/es2019/ui/common/error-state/loading-error.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
@@ -18,7 +19,7 @@ const errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 const errorMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
 });
 const errorDescriptionStyles = css({
   margin: 0

package/dist/es2019/ui/common/error-state/messages.js

@@ -44,17 +44,6 @@ export const loadingErrorMessages = defineMessages({
     description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
     defaultMessage: 'Check your connection and refresh, or try again later.'
   },
-  checkConnectionWithSourceDuplicate: {
-    id: 'linkDataSource.checkConnectionWithSource',
-    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
-    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
-  },
-  //delete and remove duplicate from title above
-  checkConnectionWithSource: {
-    id: 'linkDataSource.jira-issues.checkConnectionWithSource',
-    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
-    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
-  },
   noResultsFoundDuplicate: {
     id: 'linkDataSource.noResultsFound',
     description: 'Status message letting the user know their query did not have any results',

package/dist/es2019/ui/common/error-state/modal-loading-error.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
@@ -18,13 +18,13 @@ const errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 const errorMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
 });
 const errorDescriptionStyles = css({
   margin: 0
 });
 export const ModalLoadingError = ({
-  url
+  errorMessage = jsx(FormattedMessage, loadingErrorMessages.checkConnection)
 }) => {
   const {
     fireEvent
@@ -43,11 +43,5 @@ export const ModalLoadingError = ({
     css: errorMessageStyles
   }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
     css: errorDescriptionStyles
-  }, url ? jsx(FormattedMessage, _extends({}, loadingErrorMessages.checkConnectionWithSource, {
-    values: {
-      a: chunk => jsx("a", {
-        href: url
-      }, chunk)
-    }
-  })) : jsx(FormattedMessage, loadingErrorMessages.checkConnection))));
+  }, errorMessage)));
 };

package/dist/es2019/ui/common/error-state/no-instances.js

@@ -2,9 +2,10 @@
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { NoInstancesSvg } from './no-instances-svg';
 const titleStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
   marginTop: "var(--ds-space-200, 16px)"
 });
 const descriptionStyles = css({

package/dist/es2019/ui/common/error-state/no-results.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { loadingErrorMessages } from './messages';
 const noResultsContainerStyles = css({
@@ -17,7 +18,7 @@ const noResultsMessageContainerStyles = css({
   placeItems: 'center'
 });
 const noResultsMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
 });
 export const NoResults = ({
   onRefresh

package/dist/es2019/ui/common/initial-state-view/index.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { N300 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { initialStateViewMessages } from './messages';
 const initialStateViewContainerStyles = css({
   display: 'flex',
@@ -20,7 +21,7 @@ const betaTagStyles = css({
 });
 const searchTitleStyles = css({
   color: `var(--ds-text-subtlest, ${N300})`,
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-medium, ${fontFallback.heading.medium})`,
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)",
   display: 'flex',

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

@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { searchMessages } from './messages';
+const ConfluenceSearchContainer = ({
+  cloudId,
+  initialSearchValue,
+  isSearching,
+  onSearch
+}) => {
+  const currentCloudId = useRef(cloudId);
+  const [searchBarSearchString, setSearchBarSearchString] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : '');
+  const handleSearchChange = useCallback(e => {
+    const rawSearch = e.currentTarget.value;
+    setSearchBarSearchString(rawSearch);
+  }, []);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
+  useEffect(() => {
+    if (currentCloudId.current !== cloudId) {
+      setSearchBarSearchString('');
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId]);
+  return /*#__PURE__*/React.createElement(BasicSearchInput, {
+    testId: "confluence-search-datasource-modal",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: searchMessages.searchLabel,
+    fullWidth: true
+  });
+};
+export default ConfluenceSearchContainer;

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const searchMessages = defineMessages({
+  searchLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
+    description: 'Placeholder text for the search input box',
+    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  }
+});

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

@@ -1,31 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N800 } from '@atlaskit/theme/colors';
+import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { getAvailableSites } from '../../../services/getAvailableSites';
+import { AccessRequired } from '../../common/error-state/access-required';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoInstancesView } from '../../common/error-state/no-instances';
+import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
-import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
+const inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+const searchCountStyles = xcss({
+  flex: 1,
+  fontWeight: 600
+});
 export const ConfluenceSearchConfigModal = props => {
   const {
+    current: modalRenderInstanceId
+  } = useRef(uuidv4());
+  const {
+    datasourceId,
+    columnCustomSizes: initialColumnCustomSizes,
+    wrappedColumnKeys: initialWrappedColumnKeys,
+    onCancel,
+    onInsert,
     parameters: initialParameters,
-    onCancel
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys
   } = props;
   const [availableSites, setAvailableSites] = useState(undefined);
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
-  const [searchTerm, setSearchTerm] = useState('');
-  const onSiteSelection = useCallback(site => {
-    setCloudId(site.cloudId);
-  }, [setCloudId]);
+  const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
+  const parameters = useMemo(() => ({
+    ...initialParameters,
+    cloudId,
+    searchString
+  }), [cloudId, initialParameters, searchString /** Add more parameters when more filters are added */]);
+  const isParametersSet = useMemo(() => !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(v => v !== undefined).length > 1, [cloudId, parameters]);
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    loadDatasourceDetails,
+    extensionKey = null,
+    totalCount
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
+  });
   const hasNoConfluenceSites = availableSites && availableSites.length === 0;
   const selectedConfluenceSite = useMemo(() => {
     if (cloudId) {
@@ -38,10 +91,24 @@ export const ConfluenceSearchConfigModal = props => {
       return (availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(confluenceSite => confluenceSite.url === currentlyLoggedInSiteUrl)) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  const handleSearchChange = useCallback(e => {
-    const rawSearch = e.currentTarget.value;
-    setSearchTerm(rawSearch);
-  }, [setSearchTerm]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  useEffect(() => {
+    if (selectedConfluenceSite && (!cloudId || cloudId !== selectedConfluenceSite.cloudId)) {
+      setCloudId(selectedConfluenceSite.cloudId);
+    }
+  }, [cloudId, selectedConfluenceSite]);
+
+  // 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 => {
+    setSearchString(undefined);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
   useEffect(() => {
     const fetchSiteDisplayNames = async () => {
       const confluenceSites = await getAvailableSites('confluence');
@@ -51,6 +118,111 @@ export const ConfluenceSearchConfigModal = props => {
     void fetchSiteDisplayNames();
   }, []);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  const [columnCustomSizes, setColumnCustomSizes] = useState(initialColumnCustomSizes);
+  const onColumnResize = useCallback((key, width) => {
+    setColumnCustomSizes({
+      ...columnCustomSizes,
+      [key]: width
+    });
+  }, [columnCustomSizes]);
+  const [wrappedColumnKeys, setWrappedColumnKeys] = useState(initialWrappedColumnKeys);
+  const onWrappedColumnChange = useCallback((key, isWrapped) => {
+    const set = new Set(wrappedColumnKeys);
+    if (isWrapped) {
+      set.add(key);
+    } else {
+      set.delete(key);
+    }
+    setWrappedColumnKeys(Array.from(set));
+  }, [wrappedColumnKeys]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
+  const confluenceSearchTable = useMemo(() => jsx(ContentContainer, {
+    withTableBorder: true
+  }, jsx(IssueLikeDataTableView, {
+    testId: "confluence-search-datasource-table",
+    status: status,
+    columns: columns,
+    items: responseItems,
+    hasNextPage: hasNextPage,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    onVisibleColumnKeysChange: setVisibleColumnKeys,
+    parentContainerRenderInstanceId: modalRenderInstanceId,
+    extensionKey: extensionKey,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: getBooleanFF('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, setVisibleColumnKeys, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  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 renderModalContent = useCallback(() => {
+    if (status === 'rejected') {
+      return jsx(ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return jsx(NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      if (hasConfluenceSearchParams !== undefined) {
+        return jsx(EmptyState, {
+          testId: `confluence-search-datasource-modal--empty-state`
+        });
+      }
+      return jsx(ContentContainer, null, jsx(InitialStateView, {
+        icon: jsx(ConfluenceSearchInitialStateSVG, null),
+        title: confluenceSearchModalMessages.initialViewSearchTitle,
+        description: confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return confluenceSearchTable;
+  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  const shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  const onInsertPressed = useCallback(() => {
+    if (!isParametersSet || !cloudId) {
+      return;
+    }
+    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
+              } : {})
+            };
+          })
+        }
+      }]
+    }));
+  }, [cloudId, isParametersSet, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  const onSearch = useCallback(newSearchString => {
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -65,29 +237,40 @@ export const ConfluenceSearchConfigModal = props => {
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  }))), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(BasicSearchInput, {
-    testId: "confluence-search-datasource-modal",
+  }))), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
+    xcss: inputContainerStyles
+  }, jsx(ConfluenceSearchContainer, {
+    cloudId: cloudId,
     isSearching: status === 'loading',
-    onChange: handleSearchChange,
-    onSearch: () => {},
-    searchTerm: searchTerm,
-    placeholder: confluenceSearchModalMessages.searchLabel,
-    fullWidth: true
-  }), jsx(ContentContainer, null, jsx(InitialStateView, {
-    icon: jsx(ConfluenceSearchInitialStateSVG, null),
-    title: confluenceSearchModalMessages.initialViewSearchTitle,
-    description: confluenceSearchModalMessages.initialViewSearchDescription
-  }))) : jsx(NoInstancesView, {
+    onSearch: onSearch,
+    initialSearchValue: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString
+  })), renderModalContent()) : jsx(NoInstancesView, {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), jsx(ModalFooter, null, jsx(Button, {
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(Box, {
+    testId: "confluence-search-datasource-modal-total-results-count",
+    xcss: searchCountStyles
+  }, jsx(LinkUrl, {
+    href: confluenceSearchUrl,
+    target: "_blank",
+    testId: "item-count-url",
+    style: {
+      color: `var(--ds-text-accent-gray, ${N800})`
+    }
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount
+    }
+  })))), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
-    onClick: () => {},
-    isDisabled: true,
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };

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

@@ -10,10 +10,10 @@ export const confluenceSearchModalMessages = defineMessages({
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert results'
   },
-  searchLabel: {
-    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
-    description: 'Placeholder text for the search input box',
-    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  searchCountText: {
+    id: 'linkDataSource.confluence-search.configmodal.resultsCountText',
+    description: 'Text that appears after search count number.',
+    defaultMessage: '{totalCount, plural, one {result} other {results}}'
   },
   insertIssuesTitle: {
     id: 'linkDataSource.confluence-search.configmodal.insertConfluenceTitle',

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

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

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { columnPickerMessages } from './messages';
 export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 const messageStyles = css({
   color: "var(--ds-text-subtle, #44546F)",
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 export const ConcatenatedMenuList = ({

package/dist/es2019/ui/issue-like-table/drag-column-preview.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { TableHeading } from './styled';
 const maxWidth = '200px';
 const firstLastChildOverride = `
@@ -32,7 +33,7 @@ const tableStyles = css({
   background: "var(--ds-surface, #FFF)",
   borderCollapse: 'separate',
   borderSpacing: 0,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
   maxWidth
 });
 export const DragColumnPreview = ({

package/dist/es2019/ui/issue-like-table/index.js

@@ -12,6 +12,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { stickyTableHeadersIndex } from '../../common/zindex';
@@ -228,7 +229,7 @@ const noDefaultBorderStyles = css({
   borderBottom: 0
 });
 const headerStyles = css({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-body-UNSAFE_small, ${fontFallback.body.UNSAFE_small})`,
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const headingHoverEffectStyles = css({

package/dist/es2019/ui/issue-like-table/styled.js

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 export const ScrollableContainerHeight = 590;
-export const fieldTextFontSize = "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
+export const fieldTextFontSize = `var(--ds-font-body, ${fontFallback.body.medium})`;
 export const Table = styled.table({
   width: '100%'
 });