@atlaskit/link-datasource 1.24.4 → 1.24.6

package/dist/es2019/ui/{jira-issues-modal → common}/initial-state-view/messages.js

@@ -1,7 +1,7 @@
 import { defineMessages } from 'react-intl-next';
 export const initialStateViewMessages = defineMessages({
-  searchTitle: {
-    id: 'linkDataSource.modal-initial-state.searchTitle',
+  jiraSearchTitle: {
+    id: 'linkDataSource.modal-initial-state.jiraSearchTitle',
     description: 'The initial modal search state title that gives the user some idea about how to get information',
     defaultMessage: 'Search for Jira issues'
   },
@@ -10,6 +10,13 @@ export const initialStateViewMessages = defineMessages({
     description: 'Beta lozenge',
     defaultMessage: 'Beta'
   },
+  // everything below is a duplication from the work around EDM-9407
+  // needs to be cleaned up after that PR is merged
+  searchTitle: {
+    id: 'linkDataSource.modal-initial-state.searchTitle',
+    description: 'The initial modal search state title that gives the user some idea about how to get information',
+    defaultMessage: 'Search for Jira issues'
+  },
   searchDescriptionForBasicSearch: {
     id: 'linkDataSource.modal-initial-state.searchDescription-basic',
     description: 'The initial modal search state helper message displayed under the search title when basic search mode is selected',

package/dist/es2019/ui/{jira-issues-modal → common/modal}/basic-search-input/index.js

@@ -23,7 +23,9 @@ export const BasicSearchInput = ({
   onChange,
   onSearch,
   searchTerm,
-  testId = 'jira-jql-datasource-modal--basic-search-input'
+  fullWidth,
+  testId,
+  placeholder
 }) => {
   const {
     formatMessage
@@ -38,8 +40,9 @@ export const BasicSearchInput = ({
     }
     return false;
   }, []);
+  const isFullWidth = fullWidth || !showBasicFilters;
   return jsx("form", {
-    css: showBasicFilters ? formWithMaxWidthStyles : formStyles,
+    css: isFullWidth ? formStyles : formWithMaxWidthStyles,
     onSubmit: handleFormSubmit
   }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {
@@ -53,12 +56,12 @@ export const BasicSearchInput = ({
       isLoading: isSearching,
       onClick: () => onSearch(searchTerm),
       spacing: "none",
-      testId: "jira-jql-datasource-modal--basic-search-button"
+      testId: `${testId}--basic-search-button`
     }),
     autoFocus: true,
     onChange: onChange,
-    placeholder: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
-    testId: testId,
+    placeholder: formatMessage(placeholder),
+    testId: `${testId}--basic-search-input`,
     value: searchTerm
   }));
 };

package/dist/es2019/ui/{jira-issues-modal → common/modal}/basic-search-input/messages.js

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl-next';
 export const basicSearchInputMessages = defineMessages({
+  basicTextSearchLabelDuplicate: {
+    id: 'linkDataSource.configmodal.basicTextSearchPlaceholder',
+    description: 'Placeholder text for the search input box',
+    defaultMessage: 'Search for issues by keyword'
+  },
   basicTextSearchLabel: {
     id: 'linkDataSource.jira-issues.configmodal.basicTextSearchPlaceholder',
     description: 'Placeholder text for the search input box',

package/dist/es2019/ui/{jira-issues-modal → common/modal}/site-selector/index.js

@@ -2,20 +2,28 @@
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
 import Select from '@atlaskit/select';
-import { siteSelectorIndex } from '../../../common/zindex';
+import { siteSelectorIndex } from '../../../../common/zindex';
 import { siteSelectorMessages } from './messages';
+const dropdownContainerStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.100',
+  minHeight: '40px' // to prevent vertical shifting when site selector pops in
+});
 const selectStyles = css({
   fontSize: "var(--ds-font-size-100, 14px)",
   fontWeight: "var(--ds-font-weight-medium, 500)",
-  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  lineHeight: "var(--ds-space-250, 20px)",
   zIndex: siteSelectorIndex
 });
-export const JiraSiteSelector = props => {
+export const SiteSelector = props => {
   const {
     availableSites,
     onSiteSelection,
-    selectedJiraSite,
+    selectedSite,
+    label,
     testId
   } = props;
   const {
@@ -31,11 +39,13 @@ export const JiraSiteSelector = props => {
     label: site.displayName,
     value: site.cloudId
   })), [availableSites]);
-  const selectedSiteOption = selectedJiraSite && {
-    label: selectedJiraSite.displayName,
-    value: selectedJiraSite.cloudId
+  const selectedSiteOption = selectedSite && {
+    label: selectedSite.displayName,
+    value: selectedSite.cloudId
   };
-  return jsx("span", {
+  return jsx(Box, {
+    xcss: dropdownContainerStyles
+  }, formatMessage(label), availableSites && availableSites.length > 1 && jsx("span", {
     "data-testid": `${testId}--trigger`
   }, jsx(Select, {
     css: selectStyles,
@@ -58,5 +68,5 @@ export const JiraSiteSelector = props => {
     },
     testId: testId,
     value: selectedSiteOption
-  }));
+  })));
 };

package/dist/es2019/ui/{jira-issues-modal → common/modal}/site-selector/messages.js

@@ -1,5 +1,11 @@
 import { defineMessages } from 'react-intl-next';
 export const siteSelectorMessages = defineMessages({
+  chooseSiteDuplicate: {
+    id: 'linkDataSource.site-selector.configmodal.chooseSite',
+    description: 'Label for input letting user know they have to choose a site',
+    defaultMessage: 'Choose site'
+  },
+  // delete this and remove duplicate from above once EDM-9407 is merged
   chooseSite: {
     id: 'linkDataSource.jira-issues.configmodal.chooseSite',
     description: 'Label for input letting user know they have to choose a site',

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

@@ -0,0 +1,13 @@
+import React, { lazy, Suspense } from 'react';
+export const CONFLUENCE_SEARCH_DATASOURCE_ID = '768fc736-3af4-4a8f-b27e-203602bff8ca';
+const LazyConfluenceSearchConfigModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_linkdatasource-confluencesearchmodal" */'./modal').then(module => ({
+  default: module.ConfluenceSearchConfigModal
+})));
+const ConfluenceSearchConfigModalWithWrappers = props => {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      "data-testid": 'confluence-search-datasource-table-suspense'
+    })
+  }, /*#__PURE__*/React.createElement(LazyConfluenceSearchConfigModal, props));
+};
+export default ConfluenceSearchConfigModalWithWrappers;

package/dist/es2019/ui/confluence-search-modal/modal/confluence-search-initial-state-svg.js

@@ -0,0 +1,143 @@
+import React from 'react';
+export const ConfluenceSearchInitialStateSVG = () => /*#__PURE__*/React.createElement("svg", {
+  width: "188",
+  height: "112",
+  viewBox: "0 0 188 112",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "25.5",
+  y: "1",
+  width: "127",
+  height: "97",
+  rx: "4",
+  fill: "white",
+  stroke: "#B7BDC8",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("line", {
+  x1: "24.5",
+  y1: "10",
+  x2: "152.5",
+  y2: "10",
+  stroke: "#B7BDC8",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("line", {
+  x1: "24.5",
+  y1: "32",
+  x2: "152.5",
+  y2: "32",
+  stroke: "#B7BDC8",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("line", {
+  x1: "24.5",
+  y1: "54",
+  x2: "152.5",
+  y2: "54",
+  stroke: "#B7BDC8",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "32",
+  y: "18",
+  width: "114",
+  height: "5",
+  rx: "2.5",
+  fill: "#C1C7D0",
+  fillOpacity: "0.4"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "32",
+  y: "41",
+  width: "114",
+  height: "5",
+  rx: "2.5",
+  fill: "#C1C7D0",
+  fillOpacity: "0.4"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "32",
+  y: "84",
+  width: "114",
+  height: "5",
+  rx: "2.5",
+  fill: "#C1C7D0",
+  fillOpacity: "0.4"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "32",
+  y: "62",
+  width: "114",
+  height: "5",
+  rx: "2.5",
+  fill: "#C1C7D0",
+  fillOpacity: "0.4"
+}), /*#__PURE__*/React.createElement("line", {
+  x1: "24.5",
+  y1: "76",
+  x2: "152.5",
+  y2: "76",
+  stroke: "#B7BDC8",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#clip0_1_10772)"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "72",
+  height: "72",
+  transform: "translate(100.5 40)",
+  fill: "white",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M146.011 90.5858L142.602 87.2253L147.304 82.5063L150.713 85.8668C151.581 86.7186 152.678 87.3021 153.872 87.5471C155.063 87.8204 156.155 88.4139 157.03 89.2631L170.885 102.884C171.892 103.878 172.464 105.228 172.478 106.641C172.491 108.053 171.944 109.414 170.957 110.427C169.953 111.425 168.595 111.989 167.177 111.995C165.759 112.002 164.396 111.451 163.383 110.463L149.529 96.842C148.659 95.9778 148.049 94.8879 147.77 93.696C147.512 92.5065 146.899 91.4224 146.011 90.5858Z",
+  fill: "#CFD4DB"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M146.011 90.5858L144.971 89.549C144.659 89.243 144.412 88.8785 144.243 88.4765C144.074 88.0745 143.987 87.6431 143.987 87.2074C143.987 86.7717 144.074 86.3403 144.243 85.9383C144.412 85.5363 144.659 85.1718 144.971 84.8658C145.275 84.5532 145.64 84.3041 146.042 84.1329C146.444 83.9617 146.877 83.8718 147.314 83.8685C147.751 83.8652 148.185 83.9485 148.59 84.1135C148.995 84.2786 149.363 84.5222 149.672 84.8301L150.713 85.8668C151.581 86.7186 152.678 87.3021 153.872 87.547C155.063 87.8204 156.155 88.4139 157.03 89.263L170.885 102.884C171.892 103.878 172.464 105.228 172.478 106.641C172.491 108.053 171.944 109.414 170.957 110.427C169.953 111.425 168.595 111.989 167.177 111.995C165.759 112.002 164.396 111.451 163.383 110.463L149.529 96.842C148.659 95.9778 148.049 94.8879 147.77 93.696C147.512 92.5065 146.899 91.4224 146.011 90.5858Z",
+  fill: "#8270DB"
+}), /*#__PURE__*/React.createElement("path", {
+  opacity: "0.2",
+  d: "M147.734 93.5887C147.458 92.4449 146.861 91.4032 146.011 90.5858L144.971 89.549C144.659 89.243 144.412 88.8785 144.243 88.4765C144.074 88.0745 143.987 87.6431 143.987 87.2074C143.987 86.7717 144.074 86.3403 144.243 85.9383C144.412 85.5363 144.659 85.1718 144.971 84.8658C145.275 84.5532 145.64 84.3041 146.042 84.1329C146.444 83.9617 146.877 83.8718 147.314 83.8685C147.752 83.8652 148.185 83.9485 148.59 84.1135C148.995 84.2786 149.363 84.5222 149.672 84.8301L150.713 85.8668C151.539 86.6914 152.586 87.2622 153.728 87.5113C152.888 88.6723 151.964 89.7714 150.965 90.8003C149.956 91.8048 148.876 92.7366 147.734 93.5887Z",
+  fill: "#403294"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M156.313 67.599C156.268 62.1046 154.591 56.7464 151.493 52.2003C148.395 47.6542 144.014 44.124 138.904 42.0551C133.794 39.9861 128.182 39.4712 122.778 40.5752C117.374 41.6792 112.42 44.3527 108.54 48.2583C105.959 50.8491 103.919 53.924 102.539 57.3052C101.159 60.6864 100.466 64.3067 100.5 67.9565C100.515 71.6054 101.255 75.2154 102.678 78.5778C104.101 81.9403 106.179 84.9888 108.791 87.5473C112.721 91.4036 117.71 94.0141 123.128 95.0494C128.545 96.0846 134.15 95.4982 139.234 93.3642C144.317 91.2302 148.652 87.6442 151.692 83.0587C154.732 78.4732 156.339 73.0937 156.313 67.599Z",
+  fill: "#66A3FF"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M114.678 51.6186C110.935 54.7774 108.407 59.1306 107.525 63.9371C106.643 68.7435 107.46 73.706 109.838 77.9797C112.216 82.2534 116.008 85.574 120.567 87.3761C125.127 89.1783 130.173 89.3507 134.846 87.8638C139.519 86.377 143.53 83.3229 146.197 79.2215C148.863 75.1202 150.02 70.2251 149.47 65.3697C148.92 60.5144 146.698 55.9989 143.181 52.5921C139.665 49.1853 135.071 47.0979 130.183 46.6851C127.4 46.4461 124.596 46.7591 121.935 47.6059C119.273 48.4527 116.807 49.8165 114.678 51.6186Z",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "mask0_1_10772",
+  style: {
+    maskType: 'alpha'
+  },
+  maskUnits: "userSpaceOnUse",
+  x: "107",
+  y: "46",
+  width: "43",
+  height: "43"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M114.66 51.7782C110.928 54.9501 108.416 59.3122 107.55 64.1217C106.684 68.9312 107.519 73.8908 109.912 78.1561C112.305 82.4214 116.109 85.7287 120.675 87.5149C125.241 89.3011 130.287 89.4558 134.955 87.9526C139.623 86.4494 143.623 83.3813 146.275 79.2706C148.927 75.1599 150.067 70.2608 149.5 65.4074C148.933 60.554 146.695 56.0463 143.166 52.6519C139.638 49.2574 135.037 47.1861 130.148 46.7904C127.363 46.5612 124.561 46.884 121.902 47.7401C119.244 48.5962 116.782 49.9687 114.66 51.7782Z",
+  fill: "white"
+})), /*#__PURE__*/React.createElement("g", {
+  mask: "url(#mask0_1_10772)"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "-9.11658",
+  y: "60.6511",
+  width: "152.638",
+  height: "10.2857",
+  rx: "5.14286",
+  transform: "rotate(-0.200699 -9.11658 60.6511)",
+  fill: "#C1C7D0",
+  fillOpacity: "0.4"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M68.3882 50.885L151.465 50.594",
+  stroke: "#B7BDC8",
+  strokeWidth: "4"
+}), /*#__PURE__*/React.createElement("line", {
+  x1: "68.4865",
+  y1: "78.9508",
+  x2: "151.563",
+  y2: "78.6598",
+  stroke: "#B7BDC8",
+  strokeWidth: "4"
+}))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "clip0_1_10772"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "72",
+  height: "72",
+  fill: "white",
+  transform: "translate(100.5 40)"
+}))));

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

@@ -0,0 +1,108 @@
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+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 { Box, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import i18nEN from '../../../i18n/en';
+import { getAvailableSites } from '../../../services/getAvailableSites';
+import { NoInstancesView } from '../../common/error-state/no-instances';
+import { InitialStateView } from '../../common/initial-state-view';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { SiteSelector } from '../../common/modal/site-selector';
+import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
+import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
+import { confluenceSearchModalMessages } from './messages';
+const contentContainerStyles = xcss({
+  display: 'grid',
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+export const ConfluenceSearchConfigModal = props => {
+  const {
+    parameters: initialParameters,
+    onCancel
+  } = 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 hasNoConfluenceSites = availableSites && availableSites.length === 0;
+  const selectedConfluenceSite = useMemo(() => {
+    if (cloudId) {
+      return availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(confluenceSite => confluenceSite.cloudId === cloudId);
+    } else {
+      let currentlyLoggedInSiteUrl;
+      if (typeof window.location !== 'undefined') {
+        currentlyLoggedInSiteUrl = window.location.origin;
+      }
+      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]);
+  useEffect(() => {
+    const fetchSiteDisplayNames = async () => {
+      const confluenceSites = await getAvailableSites('confluence');
+      const sortedAvailableSites = [...confluenceSites].sort((a, b) => a.displayName.localeCompare(b.displayName));
+      setAvailableSites(sortedAvailableSites);
+    };
+    void fetchSiteDisplayNames();
+  }, []);
+  const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(Modal, {
+    testId: "confluence-search-datasource-modal",
+    onClose: onCancel,
+    width: "calc(100% - 80px)",
+    shouldScrollInViewport: true
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    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",
+    isSearching: status === 'loading',
+    onChange: handleSearchChange,
+    onSearch: () => {},
+    searchTerm: searchTerm,
+    placeholder: confluenceSearchModalMessages.searchLabel,
+    fullWidth: true
+  }), jsx(Box, {
+    xcss: contentContainerStyles
+  }, jsx(InitialStateView, {
+    icon: jsx(ConfluenceSearchInitialStateSVG, null),
+    title: confluenceSearchModalMessages.initialViewSearchTitle,
+    description: confluenceSearchModalMessages.initialViewSearchDescription
+  }))) : jsx(NoInstancesView, {
+    title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
+    description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
+    testId: 'no-confluence-instances-content'
+  })), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "default",
+    onClick: onCancel
+  }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
+    appearance: "primary",
+    onClick: () => {},
+    isDisabled: true,
+    testId: "confluence-search-datasource-modal--insert-button"
+  }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
+};

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

@@ -0,0 +1,48 @@
+import { defineMessages } from 'react-intl-next';
+export const confluenceSearchModalMessages = defineMessages({
+  cancelButtonText: {
+    id: 'linkDataSource.confluence-search.configmodal.cancelButtonText',
+    description: 'Button text to close the modal with no changes being made',
+    defaultMessage: 'Cancel'
+  },
+  insertResultsButtonText: {
+    id: 'linkDataSource.confluence-search.configmodal.insertResultsButtonText',
+    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'
+  },
+  insertIssuesTitle: {
+    id: 'linkDataSource.confluence-search.configmodal.insertConfluenceTitle',
+    description: 'Title for the Confluence Search Datasource Confluence Search config modal',
+    defaultMessage: 'Insert Confluence list'
+  },
+  insertIssuesTitleManySites: {
+    id: 'linkDataSource.confluence-search.configmodal.insertConfluenceTitleManySites',
+    description: 'Title for the Confluence Search config modal when a user has to select a site to insert issues from',
+    defaultMessage: 'Insert Confluence list from'
+  },
+  initialViewSearchTitle: {
+    id: 'linkDataSource.modal-initial-state.confluenceSearchTitle',
+    description: 'The initial modal search state title explains to user how to get information',
+    defaultMessage: 'Search for Confluence pages'
+  },
+  initialViewSearchDescription: {
+    id: 'linkDataSource.modal-initial-state.searchDescription-confluence',
+    description: 'The initial modal search state helper message for confluence search displayed under the search title',
+    defaultMessage: 'Search by keyword for pages to insert.'
+  },
+  noAccessToConfluenceSitesTitle: {
+    id: 'linkDataSource.confluence-search.no.confluence.sites.access.title',
+    description: 'Title that shows in the modal when user has no access to any Confluence sites',
+    defaultMessage: "You don't have access to any Confluence sites"
+  },
+  noAccessToConfluenceSitesDescription: {
+    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.'
+  }
+});

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

@@ -7,9 +7,8 @@ import { columnPickerMessages } from './messages';
 export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 const messageStyles = css({
   color: "var(--ds-text-subtle, #44546F)",
-  fontSize: "var(--ds-font-size-050, 11px)",
-  fontWeight: "var(--ds-font-weight-regular, 400)",
-  lineHeight: "var(--ds-font-lineHeight-100, 14px)"
+  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)",
+  fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 export const ConcatenatedMenuList = ({
   children,

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

@@ -32,7 +32,7 @@ const tableStyles = css({
   background: "var(--ds-surface, #FFF)",
   borderCollapse: 'separate',
   borderSpacing: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   maxWidth
 });
 export const DragColumnPreview = ({

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

@@ -60,7 +60,7 @@ const truncateStyles = css({
 });
 const TableCell = styled.td({
   [`${withTablePluginBodyPrefix()}`]: {
-    fontSize: fieldTextFontSize,
+    font: fieldTextFontSize,
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
     border: 0,
     minWidth: 'auto',
@@ -223,7 +223,7 @@ const noDefaultBorderStyles = css({
   borderBottom: 0
 });
 const headerStyles = css({
-  fontSize: "var(--ds-font-size-075, 12px)",
+  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)",
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const headingHoverEffectStyles = css({

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

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
 export const ScrollableContainerHeight = 590;
-export const fieldTextFontSize = "var(--ds-font-size-100, 14px)";
+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 Table = styled.table({
   width: '100%'
 });
-const lineHeight = "var(--ds-font-lineHeight-300, 24px)";
+const lineHeight = '24px';
 const verticalPadding = "var(--ds-space-025, 2px)";
 
 /**

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

@@ -6,7 +6,7 @@ const LazyJiraIssuesConfigModal = /*#__PURE__*/lazy(() => import( /* webpackChun
 const JiraIssuesConfigModalWithWrappers = props => {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement("div", {
-      "data-testid": 'jira-jql-datasource-table-suspense'
+      "data-testid": 'jira-datasource-table-suspense'
     })
   }, /*#__PURE__*/React.createElement(LazyJiraIssuesConfigModal, props));
 };

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

@@ -6,10 +6,11 @@ import { useDebouncedCallback } from 'use-debounce';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
-import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
 import { ModeSwitcher } from '../mode-switcher';
 import { buildJQL } from './buildJQL';
@@ -192,7 +193,9 @@ export const JiraSearchContainer = props => {
     isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
-    searchTerm: basicSearchTerm
+    searchTerm: basicSearchTerm,
+    placeholder: basicSearchInputMessages.basicTextSearchLabel,
+    testId: "jira-datasource-modal"
   }), showBasicFilters && jsx(BasicFilters, {
     jql: searchBarJql,
     site: site,