@atlaskit/link-datasource 1.24.7 → 1.24.8

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

@@ -82,6 +82,7 @@ export const ModeSwitcher = props => {
   }) => {
     const isSelected = value === selectedOptionValue;
     return jsx(Tooltip, {
+      key: value,
       content: tooltipText
     }, tooltipProps => jsx("label", _extends({}, tooltipProps, {
       key: value,

package/dist/esm/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';
 var initialStateViewContainerStyles = css({
@@ -14,7 +15,7 @@ var svgAndTextsWrapperStyles = css({
   alignSelf: 'center'
 });
 var 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, ".concat(fontFallback.heading.small, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)"
 });

package/dist/esm/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';
 var urlStyles = css({
   color: "var(--ds-text-subtlest, ".concat(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, ".concat(fontFallback.body.medium, ")")
 });
 var descriptionMessageStyles = css({
   display: 'flex',

package/dist/esm/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 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var 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, ".concat(fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = css({
   margin: 0

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

@@ -44,17 +44,6 @@ export var 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/esm/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,14 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var 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, ".concat(fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = css({
   margin: 0
 });
 export var ModalLoadingError = function ModalLoadingError(_ref) {
-  var url = _ref.url;
+  var _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? jsx(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   useEffect(function () {
@@ -41,13 +42,5 @@ export var ModalLoadingError = function ModalLoadingError(_ref) {
     css: errorMessageStyles
   }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
     css: errorDescriptionStyles
-  }, url ? jsx(FormattedMessage, _extends({}, loadingErrorMessages.checkConnectionWithSource, {
-    values: {
-      a: function a(chunk) {
-        return jsx("a", {
-          href: url
-        }, chunk);
-      }
-    }
-  })) : jsx(FormattedMessage, loadingErrorMessages.checkConnection))));
+  }, errorMessage)));
 };

package/dist/esm/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';
 var 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, ".concat(fontFallback.heading.small, ")"),
   marginTop: "var(--ds-space-200, 16px)"
 });
 var descriptionStyles = css({

package/dist/esm/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';
 var noResultsContainerStyles = css({
@@ -17,7 +18,7 @@ var noResultsMessageContainerStyles = css({
   placeItems: 'center'
 });
 var 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, ".concat(fontFallback.heading.small, ")")
 });
 export var NoResults = function NoResults(_ref) {
   var onRefresh = _ref.onRefresh;

package/dist/esm/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';
 var initialStateViewContainerStyles = css({
   display: 'flex',
@@ -20,7 +21,7 @@ var betaTagStyles = css({
 });
 var searchTitleStyles = css({
   color: "var(--ds-text-subtlest, ".concat(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, ".concat(fontFallback.heading.medium, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)",
   display: 'flex',

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

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { searchMessages } from './messages';
+var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
+  var cloudId = _ref.cloudId,
+    initialSearchValue = _ref.initialSearchValue,
+    isSearching = _ref.isSearching,
+    onSearch = _ref.onSearch;
+  var currentCloudId = useRef(cloudId);
+  var _useState = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchBarSearchString = _useState2[0],
+    setSearchBarSearchString = _useState2[1];
+  var handleSearchChange = useCallback(function (e) {
+    var 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(function () {
+    if (currentCloudId.current !== cloudId) {
+      setSearchBarSearchString('');
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId]);
+  return /*#__PURE__*/React.createElement(BasicSearchInput, {
+    testId: "confluence-search-datasource-modal--search-input",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: searchMessages.searchLabel,
+    fullWidth: true
+  });
+};
+export default ConfluenceSearchContainer;

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var 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/esm/ui/confluence-search-modal/modal/index.js

@@ -1,27 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @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 { 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';
+var inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+var searchCountStyles = xcss({
+  flex: 1,
+  fontWeight: 600
+});
 export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
-  var initialParameters = props.parameters,
-    onCancel = props.onCancel;
+  var _useRef = useRef(uuidv4()),
+    modalRenderInstanceId = _useRef.current;
+  var datasourceId = props.datasourceId,
+    initialColumnCustomSizes = props.columnCustomSizes,
+    initialWrappedColumnKeys = props.wrappedColumnKeys,
+    onCancel = props.onCancel,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     availableSites = _useState2[0],
@@ -30,13 +60,44 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     _useState4 = _slicedToArray(_useState3, 2),
     cloudId = _useState4[0],
     setCloudId = _useState4[1];
-  var _useState5 = useState(''),
+  var _useState5 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchTerm = _useState6[0],
-    setSearchTerm = _useState6[1];
-  var onSiteSelection = useCallback(function (site) {
-    setCloudId(site.cloudId);
-  }, [setCloudId]);
+    searchString = _useState6[0],
+    setSearchString = _useState6[1];
+  var _useState7 = useState(initialVisibleColumnKeys),
+    _useState8 = _slicedToArray(_useState7, 2),
+    visibleColumnKeys = _useState8[0],
+    setVisibleColumnKeys = _useState8[1];
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
+  var parameters = useMemo(function () {
+    return cloudId ? {
+      cloudId: cloudId,
+      searchString: searchString
+    } : undefined;
+  }, [cloudId, searchString /** Add more parameters when more filters are added */]);
+  var isParametersSet = useMemo(function () {
+    return !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(function (v) {
+      return v !== undefined;
+    }).length > 1;
+  }, [cloudId, parameters]);
+  var _useDatasourceTableSt = useDatasourceTableState({
+      datasourceId: datasourceId,
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: visibleColumnKeys
+    }),
+    reset = _useDatasourceTableSt.reset,
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    totalCount = _useDatasourceTableSt.totalCount;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
   var selectedConfluenceSite = useMemo(function () {
     if (cloudId) {
@@ -53,10 +114,24 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
       })) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  var handleSearchChange = useCallback(function (e) {
-    var 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(function () {
+    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
+  var onSiteSelection = useCallback(function (site) {
+    setSearchString(undefined);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
   useEffect(function () {
     var fetchSiteDisplayNames = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -85,6 +160,101 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     void fetchSiteDisplayNames();
   }, []);
   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 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 onWrappedColumnChange = useCallback(function (key, isWrapped) {
+    var 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
+  var confluenceSearchTable = useMemo(function () {
+    return 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]);
+  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 renderModalContent = useCallback(function () {
+    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]);
+  var shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  var onInsertPressed = useCallback(function () {
+    // eslint-disable-next-line no-console
+    // TODO: Implement onInsert in EDM-9412
+    /**
+     * onInsert(
+          {
+            type: 'inlineCard',
+            attrs: {
+              url,
+            },
+          } as InlineCardAdf,
+          consumerEvent,
+        );
+     */
+  }, []);
+  var onSearch = useCallback(function (newSearchString) {
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -99,29 +269,40 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     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: function 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, ".concat(N800, ")")
+    }
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: totalCount
+    }
+  })))), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
-    onClick: function onClick() {},
-    isDisabled: true,
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };

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

@@ -10,10 +10,10 @@ export var 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/esm/ui/confluence-search-modal/types.js

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

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

@@ -5,11 +5,12 @@ var _excluded = ["children"];
 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 var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 var 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, ".concat(fontFallback.body.small, ")"),
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 export var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {

package/dist/esm/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';
 var maxWidth = '200px';
 var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
@@ -27,7 +28,7 @@ var 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, ".concat(fontFallback.body.medium, ")"),
   maxWidth: maxWidth
 });
 export var DragColumnPreview = function DragColumnPreview(_ref) {

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

@@ -20,6 +20,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';
@@ -190,7 +191,7 @@ var noDefaultBorderStyles = css({
   borderBottom: 0
 });
 var 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, ".concat(fontFallback.body.UNSAFE_small, ")"),
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var headingHoverEffectStyles = css({

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

@@ -2,8 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _styled$th;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 export var ScrollableContainerHeight = 590;
-export var 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 var fieldTextFontSize = "var(--ds-font-body, ".concat(fontFallback.body.medium, ")");
 export var Table = styled.table({
   width: '100%'
 });

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

@@ -502,7 +502,15 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return jsx(ModalLoadingError, {
-        url: jqlUrl
+        errorMessage: jqlUrl ? jsx(FormattedMessage, _extends({}, modalMessages.checkConnectionWithSource, {
+          values: {
+            a: function a(urlText) {
+              return jsx("a", {
+                href: jqlUrl
+              }, urlText);
+            }
+          }
+        })) : undefined
       });
     } else if (status === 'unauthorized') {
       return jsx(AccessRequired, {

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

@@ -115,5 +115,10 @@ export var modalMessages = 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/esm/ui/jira-issues-modal/mode-switcher/index.js

@@ -80,6 +80,7 @@ export var ModeSwitcher = function ModeSwitcher(props) {
       tooltipText = _ref.tooltipText;
     var isSelected = value === selectedOptionValue;
     return jsx(Tooltip, {
+      key: value,
       content: tooltipText
     }, function (tooltipProps) {
       return jsx("label", _extends({}, tooltipProps, {