@atlaskit/link-datasource 1.8.0 → 1.9.1

package/dist/es2019/i18n/sv.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': 'Uppdatera',
   'linkDataSource.jira-issues.unableToLoadItems': 'Det gick inte att läsa in objekten',
   'linkDataSource.jira-issues.unableToLoadResults': 'Det gick inte att läsa in resultat',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'Läs mer om att söka med JQL',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'Läs mer om att söka med JQL.',
   'linkDataSource.modal-initial-state.searchDescription': 'Börja skriva eller använd JQL för att söka.',
   'linkDataSource.modal-initial-state.searchTitle': 'Sök efter Jira-ärenden',
   'linkDataSource.render-type.boolean.false': 'Nej',

package/dist/es2019/i18n/tr.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': 'Yenile',
   'linkDataSource.jira-issues.unableToLoadItems': 'Öğeler yüklenemiyor',
   'linkDataSource.jira-issues.unableToLoadResults': 'Sonuçlar yüklenemiyor',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'JQL ile arama yapmak hakkında daha fazla bilgi edinin',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'JQL ile arama yapmak hakkında daha fazla bilgi edinin.',
   'linkDataSource.modal-initial-state.searchDescription': 'Aramak için yazmaya başlayın veya JQL kullanın.',
   'linkDataSource.modal-initial-state.searchTitle': 'Jira konuları arayın',
   'linkDataSource.render-type.boolean.false': 'Hayır',

package/dist/es2019/i18n/uk.js

@@ -39,9 +39,9 @@ export default {
   'linkDataSource.jira-issues.configmodal.selectedJiraSiteLabel': 'Вибрано сайт {siteName}',
   'linkDataSource.jira-issues.noResultsFound': 'Немає результатів',
   'linkDataSource.jira-issues.refresh': 'Оновити',
-  'linkDataSource.jira-issues.unableToLoadItems': 'Не вдалося завантажити завдання',
+  'linkDataSource.jira-issues.unableToLoadItems': 'Не вдалося завантажити елементи',
   'linkDataSource.jira-issues.unableToLoadResults': 'Не вдалося завантажити результати',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'Докладніше про пошук засобами JQL',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'Докладніше про пошук засобами JQL.',
   'linkDataSource.modal-initial-state.searchDescription': 'Почніть вводити запит або скористайтеся JQL для пошуку.',
   'linkDataSource.modal-initial-state.searchTitle': 'Пошук завдань Jira',
   'linkDataSource.render-type.boolean.false': 'Ні',
@@ -49,7 +49,7 @@ export default {
   'linkDataSource.render-type.user.default.display.name': 'Не призначено',
   'linkDataSource.table-footer.date_formatter.under_one_minute': 'Синхронізовано щойно',
   'linkDataSource.table-footer.date_formatter.under_over_minute': 'Синхронізація: {date}',
-  'linkDataSource.table-footer.item': '{itemCount, plural, one {елемент} few {елементи} many {елементів} other {елементів}}',
+  'linkDataSource.table-footer.item': '{itemCount, plural, one {елемент} few {елементи} many {елементів} other {елементи}}',
   'linkDataSource.table-footer.loading': 'Завантаження…',
   'linkDataSource.table-footer.refresh': 'Оновити'
 };

package/dist/es2019/i18n/vi.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': 'Làm mới',
   'linkDataSource.jira-issues.unableToLoadItems': 'Không thể tải được các mục',
   'linkDataSource.jira-issues.unableToLoadResults': 'Không tải được kết quả',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'Tìm hiểu thêm về việc tìm kiếm bằng JQL',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'Tìm hiểu thêm về việc tìm kiếm bằng JQL.',
   'linkDataSource.modal-initial-state.searchDescription': 'Bắt đầu nhập hoặc sử dụng JQL để tìm kiếm.',
   'linkDataSource.modal-initial-state.searchTitle': 'Tìm kiếm vấn đề Jira',
   'linkDataSource.render-type.boolean.false': 'Không',
@@ -49,7 +49,7 @@ export default {
   'linkDataSource.render-type.user.default.display.name': 'Chưa được chỉ định',
   'linkDataSource.table-footer.date_formatter.under_one_minute': 'Vừa mới đồng bộ',
   'linkDataSource.table-footer.date_formatter.under_over_minute': 'Đã đồng bộ trong {date}',
-  'linkDataSource.table-footer.item': '{itemCount, plural, other {các mục}}',
+  'linkDataSource.table-footer.item': '{itemCount, plural, other {mục}}',
   'linkDataSource.table-footer.loading': 'Đang tải...',
   'linkDataSource.table-footer.refresh': 'Làm mới'
 };

package/dist/es2019/i18n/zh.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': '刷新',
   'linkDataSource.jira-issues.unableToLoadItems': '无法加载项目',
   'linkDataSource.jira-issues.unableToLoadResults': '无法加载结果',
-  'linkDataSource.modal-initial-state.learnMoreLink': '详细了解如何使用 JQL 进行搜索',
+  'linkDataSource.modal-initial-state.learnMoreLink': '详细了解如何使用 JQL 进行搜索。',
   'linkDataSource.modal-initial-state.searchDescription': '开始输入搜索内容或使用 JQL 进行搜索。',
   'linkDataSource.modal-initial-state.searchTitle': '搜索 Jira 事务',
   'linkDataSource.render-type.boolean.false': '否',

package/dist/es2019/i18n/zh_TW.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': '重新整理',
   'linkDataSource.jira-issues.unableToLoadItems': '無法載入項目',
   'linkDataSource.jira-issues.unableToLoadResults': '無法載入結果',
-  'linkDataSource.modal-initial-state.learnMoreLink': '進一步了解如何使用 JQL 進行搜尋',
+  'linkDataSource.modal-initial-state.learnMoreLink': '進一步了解如何使用 JQL 進行搜尋。',
   'linkDataSource.modal-initial-state.searchDescription': '開始輸入或使用 JQL 進行搜尋。',
   'linkDataSource.modal-initial-state.searchTitle': '搜尋 Jira 議題',
   'linkDataSource.render-type.boolean.false': '否',

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -194,7 +194,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.8.0",
+  packageVersion: "1.9.1",
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback, useRef } from 'react';
+import { Fragment, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
-import { Field } from '@atlaskit/form';
+import { ErrorMessage, Field } from '@atlaskit/form';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
@@ -76,6 +76,7 @@ export const AqlSearchInput = ({
   const timeout = useRef();
   const lastValue = useRef(value);
   const lastResult = useRef(Promise.resolve(undefined));
+  const [message, setMessage] = useState(null);
   const {
     validateAqlText
   } = useValidateAqlText(workspaceId);
@@ -85,8 +86,9 @@ export const AqlSearchInput = ({
     if (!newUnvalidatedQlQuery) {
       return undefined;
     }
-    const isValid = await validateAqlText(newUnvalidatedQlQuery);
-    return isValid ? undefined : 'invalid';
+    const validation = await validateAqlText(newUnvalidatedQlQuery);
+    setMessage(validation.message);
+    return validation.isValid ? undefined : 'invalid';
   }, [validateAqlText]);
 
   /* Debounce async validation for input, validation is also called on every field change
@@ -119,7 +121,7 @@ export const AqlSearchInput = ({
     fieldProps,
     meta,
     error
-  }) => jsx(Textfield, _extends({}, fieldProps, {
+  }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
     elemBeforeInput: jsx("span", {
       style: {
         paddingLeft: 6,
@@ -153,5 +155,5 @@ export const AqlSearchInput = ({
     })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
-  }))));
+  })), fieldProps.value && error && message && jsx(ErrorMessage, null, message))));
 };

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

@@ -1,13 +1,40 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { N400 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
+const urlStyles = css({
+  color: `var(--ds-text-subtlest, ${N400})`,
+  fontSize: "var(--ds-font-size-100, 14px)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+});
+const descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+const iconContainerStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+const Description = ({
+  message,
+  url
+}) => {
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+const IconContainer = () => jsx("div", {
+  css: iconContainerStyles
+}, jsx(AccessRequiredSVG, null));
 export const AccessRequired = ({
-  siteName
+  url
 }) => {
   const {
     formatMessage
@@ -20,11 +47,19 @@ export const AccessRequired = ({
       reason: 'access'
     });
   }, [fireEvent]);
+  if (url) {
+    return jsx(EmptyState, {
+      header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
+      description: jsx(Description, {
+        message: formatMessage(loadingErrorMessages.accessInstructions),
+        url: url
+      }),
+      renderImage: IconContainer
+    });
+  }
   return jsx(EmptyState, {
-    header: siteName ? formatMessage(loadingErrorMessages.accessRequiredWithSite, {
-      siteName
-    }) : formatMessage(loadingErrorMessages.accessRequired),
+    header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
-    renderImage: () => jsx(AccessRequiredSVG, null)
+    renderImage: IconContainer
   });
 };

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

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl-next';
 export const loadingErrorMessages = defineMessages({
   accessInstructions: {
     id: 'linkDataSource.jira-issues.accessInstructions',
-    description: "Instructions to let the user know they must contact an administrator in order to access this site's content",
-    defaultMessage: 'To request access, contact your admin.'
+    description: "Instructions to let the user know they must contact their site administrator in order to access this site's content",
+    defaultMessage: 'To request access, contact your site administrator.'
   },
   accessRequired: {
     id: 'linkDataSource.jira-issues.accessRequired',
@@ -12,8 +12,8 @@ export const loadingErrorMessages = defineMessages({
   },
   accessRequiredWithSite: {
     id: 'linkDataSource.jira-issues.accessRequiredWithSite',
-    description: 'Message letting user know that they do not have access to the site by name',
-    defaultMessage: "You don't have access to {siteName}"
+    description: 'Message letting user know that they do not have access to the site that will be listed below this message',
+    defaultMessage: "You don't have access to the following site:"
   },
   checkConnection: {
     id: 'linkDataSource.jira-issues.checkConnection',

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -109,7 +109,9 @@ const DatasourceTableViewWithoutAnalytics = ({
     });
   }
   if (status === 'unauthorized') {
-    return jsx(AccessRequired, null);
+    return jsx(AccessRequired, {
+      url: url
+    });
   }
   if (status === 'rejected') {
     return jsx(LoadingError, {

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

@@ -13,6 +13,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
+import { stickyTableHeadersIndex } from '../../common/zindex';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -25,7 +26,7 @@ const tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
   position: 'sticky',
   top: 0,
-  zIndex: 10
+  zIndex: stickyTableHeadersIndex
 });
 const ColumnPickerHeader = styled.th`
   width: 40px;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
@@ -30,8 +30,11 @@ import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
 const dropdownContainerStyles = css({
   display: 'flex',
-  gap: "var(--ds-space-100, 0.5rem)"
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 0.5rem)",
+  minHeight: '40px' // to prevent vertical shifting when site selector pops in
 });
+
 const contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
@@ -77,11 +80,12 @@ export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
 export const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
-    parameters: initialParameters,
-    visibleColumnKeys: initialVisibleColumnKeys,
     onCancel,
     onInsert,
-    viewMode = 'issue'
+    viewMode = 'issue',
+    parameters: initialParameters,
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys
   } = props;
   const [availableSites, setAvailableSites] = useState([]);
   const [currentViewMode, setCurrentViewMode] = useState(viewMode);
@@ -129,9 +133,7 @@ export const PlainJiraIssuesConfigModal = props => {
   } = useRef(uuidv4());
   const selectedJiraSite = useMemo(() => {
     if (cloudId) {
-      // if the cloud id we're editing isn't in available sites then user is likely unauthorized for that site
-      // TODO: unauthorized to edit flow https://product-fabric.atlassian.net/browse/EDM-7216
-      return availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0];
+      return availableSites.find(jiraSite => jiraSite.cloudId === cloudId);
     } else {
       const currentlyLoggedInSiteUrl = window.location.origin;
       return availableSites.find(jiraSite => jiraSite.url === currentlyLoggedInSiteUrl) || availableSites[0];
@@ -360,12 +362,12 @@ export const PlainJiraIssuesConfigModal = props => {
     extensionKey: extensionKey
   })), [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   const renderCountModeContent = useCallback(() => {
-    const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
       return jsx(AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
-    } else if (status === 'empty' || !jql || !url) {
+    } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx("span", {
@@ -373,22 +375,23 @@ export const PlainJiraIssuesConfigModal = props => {
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      const urlWithEncodedJql = `${url}/issues/?jql=${encodeURI(jql)}`;
+      const urlWithEncodedJql = `${selectedJiraSiteUrl}/issues/?jql=${encodeURI(jql)}`;
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx(LinkRenderType, {
         url: urlWithEncodedJql
       }));
     }
-  }, [jql, selectedJiraSite, status]);
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   const renderIssuesModeContent = useCallback(() => {
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return jsx(ModalLoadingError, {
         url: jqlUrl
       });
     } else if (status === 'unauthorized') {
       return jsx(AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (resolvedWithNoResults) {
       return jsx(NoResults, null);
@@ -411,24 +414,20 @@ export const PlainJiraIssuesConfigModal = props => {
       }));
     }
     return issueLikeDataTableView;
-  }, [status, jqlUrl, resolvedWithNoResults, columns.length, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName, jql, currentSearchMethod]);
+  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, responseItems.length, retrieveUrlForSmartCardRender, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   return jsx(ModalTransition, null, jsx(Modal, {
-    testId: 'jira-jql-datasource-modal',
+    testId: "jira-jql-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, availableSites.length < 2 ? jsx(FormattedMessage, modalMessages.insertIssuesTitle) : jsx("div", {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx("div", {
     css: dropdownContainerStyles
-  }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), jsx(JiraSiteSelector, {
-    testId: `jira-jql-datasource-modal--site-selector`,
+  }, availableSites.length < 2 ? jsx(FormattedMessage, modalMessages.insertIssuesTitle) : jsx(Fragment, null, jsx(FormattedMessage, modalMessages.insertIssuesTitleManySites), jsx(JiraSiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), jsx(ModeSwitcher, {
+    selectedJiraSite: selectedJiraSite,
+    testId: "jira-jql-datasource-modal--site-selector"
+  })))), jsx(ModeSwitcher, {
     isCompact: true,
     options: [{
       label: formatMessage(modalMessages.issueViewModeLabel),
@@ -468,7 +467,7 @@ export const PlainJiraIssuesConfigModal = props => {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: 'jira-jql-datasource-modal--insert-button'
+    testId: "jira-jql-datasource-modal--insert-button"
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText)))));
 };
 const analyticsContextAttributes = {

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

@@ -17,8 +17,8 @@ export const modalMessages = defineMessages({
   },
   insertIssuesTitleManySites: {
     id: 'linkDataSource.jira-issues.configmodal.insertIssuesTitleManySites',
-    description: 'Title for the Jira Issues Datasource config modal when multiple sites are available',
-    defaultMessage: 'Insert Jira issues from {siteName}'
+    description: 'Title for the Jira Issues modal when a user has to select a site to inserting issues from',
+    defaultMessage: 'Insert Jira issues from'
   },
   issueViewModeLabel: {
     id: 'linkDataSource.jira-issues.configmodal.issueViewModeLabel',

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

@@ -1,11 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import Select from '@atlaskit/select';
+import { siteSelectorIndex } from '../../../common/zindex';
 import { siteSelectorMessages } from './messages';
+const selectStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  zIndex: siteSelectorIndex
+});
 export const JiraSiteSelector = props => {
   const {
     availableSites,
@@ -13,32 +18,45 @@ export const JiraSiteSelector = props => {
     selectedJiraSite,
     testId
   } = props;
-  const intl = useIntl();
-  return jsx(DropdownMenu, {
-    spacing: "compact",
+  const {
+    formatMessage
+  } = useIntl();
+  const onChange = newValue => {
+    const selectedSite = availableSites.find(site => site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value));
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
+    }
+  };
+  const availableSitesOptions = useMemo(() => availableSites.map(site => ({
+    label: site.displayName,
+    value: site.cloudId
+  })), [availableSites]);
+  const selectedSiteOption = selectedJiraSite && {
+    label: selectedJiraSite.displayName,
+    value: selectedJiraSite.cloudId
+  };
+  return jsx("span", {
+    "data-testid": `${testId}--trigger`
+  }, jsx(Select, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: availableSites.length === 0,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(siteSelectorMessages.chooseSite),
+    styles: {
+      // prevents the popup menu with available sites from being too narrow
+      // if the selected site is much shorter than the other options
+      menu: ({
+        width,
+        ...css
+      }) => ({
+        ...css,
+        minWidth: '100%',
+        width: 'max-content'
+      })
+    },
     testId: testId,
-    trigger: ({
-      triggerRef,
-      ...props
-    }) => jsx(Button, _extends({}, props, {
-      testId: `${testId}--trigger`,
-      spacing: "none",
-      iconBefore: jsx(ChevronDownIcon, {
-        label: intl.formatMessage(siteSelectorMessages.dropdownChevronLabel)
-      }),
-      ref: triggerRef
-    }))
-  }, jsx(DropdownItemGroup, null, availableSites.map(availableSite => {
-    const {
-      displayName,
-      cloudId
-    } = availableSite;
-    const isSelected = displayName === (selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName);
-    return jsx(DropdownItem, {
-      isSelected: isSelected,
-      key: cloudId,
-      onClick: () => onSiteSelection(availableSite),
-      testId: testId && `${testId}--dropdown-item${isSelected ? '__selected' : ''}`
-    }, displayName);
-  })));
+    value: selectedSiteOption
+  }));
 };

package/dist/es2019/ui/jira-issues-modal/site-selector/messages.js

@@ -1,13 +1,8 @@
 import { defineMessages } from 'react-intl-next';
 export const siteSelectorMessages = defineMessages({
-  dropdownChevronLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.dropdownChevronLabel',
-    description: 'Label for button that reveals more available site options to choose from',
-    defaultMessage: 'Pick jira site'
-  },
-  selectedJiraSiteLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.selectedJiraSiteLabel',
-    description: 'Label for a check icon declaring which option is selected',
-    defaultMessage: '{siteName} is selected'
+  chooseSite: {
+    id: 'linkDataSource.jira-issues.configmodal.chooseSite',
+    description: 'Label for input letting user know they have to choose a site',
+    defaultMessage: 'Choose site'
   }
 });

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.8.0"
+  packageVersion: "1.9.1"
 };

package/dist/esm/common/zindex.js

@@ -0,0 +1,2 @@
+export var stickyTableHeadersIndex = 10;
+export var siteSelectorIndex = stickyTableHeadersIndex + 1;

package/dist/esm/hooks/useValidateAqlText.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useState } from 'react';
 import { validateAql } from '../services/cmdbService';
-export var useValidateAqlText = function useValidateAqlText(workspaceId, hostname) {
+export var useValidateAqlText = function useValidateAqlText(workspaceId) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
@@ -18,43 +18,48 @@ export var useValidateAqlText = function useValidateAqlText(workspaceId, hostnam
     setError = _useState6[1];
   var validateAqlText = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(aql) {
-      var isValid, validateAqlResponse;
+      var isValid, message, _validateAqlResponse$, validateAqlResponse;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             setLoading(true);
             setError(undefined);
             isValid = false;
-            _context.prev = 3;
-            _context.next = 6;
+            message = null;
+            _context.prev = 4;
+            _context.next = 7;
             return validateAql(workspaceId, {
               qlQuery: aql
             });
-          case 6:
+          case 7:
             validateAqlResponse = _context.sent;
             setIsValidAqlText(validateAqlResponse.isValid);
             isValid = validateAqlResponse.isValid;
-            _context.next = 14;
+            message = ((_validateAqlResponse$ = validateAqlResponse.errors) === null || _validateAqlResponse$ === void 0 ? void 0 : _validateAqlResponse$.iql) || null;
+            _context.next = 16;
             break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](3);
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](4);
             if (_context.t0 instanceof Error) {
               setError(_context.t0);
             } else {
               setError(new Error('Unexpected error occured'));
             }
-          case 14:
-            _context.prev = 14;
+          case 16:
+            _context.prev = 16;
             setLoading(false);
-            return _context.finish(14);
-          case 17:
-            return _context.abrupt("return", isValid);
-          case 18:
+            return _context.finish(16);
+          case 19:
+            return _context.abrupt("return", {
+              isValid: isValid,
+              message: message
+            });
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 11, 14, 17]]);
+      }, _callee, null, [[4, 13, 16, 19]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);

package/dist/esm/i18n/da.js

@@ -41,7 +41,7 @@ export default {
   'linkDataSource.jira-issues.refresh': 'Opdater',
   'linkDataSource.jira-issues.unableToLoadItems': 'Kunne ikke indlæse elementer',
   'linkDataSource.jira-issues.unableToLoadResults': 'Kunne ikke indlæse resultater',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'Få mere at vide om søgning med JQL',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'Få mere at vide om at søge med JQL.',
   'linkDataSource.modal-initial-state.searchDescription': 'Begynd at indtaste, eller brug JQL til at søge.',
   'linkDataSource.modal-initial-state.searchTitle': 'Søg efter Jira-sager',
   'linkDataSource.render-type.boolean.false': 'Nej',

package/dist/esm/i18n/en.js

@@ -21,13 +21,14 @@ export default {
   'linkDataSource.column-picker.no-all-items-shown-message.line-1': 'Your search returned too many results.',
   'linkDataSource.column-picker.no-all-items-shown-message.line-2': 'Try again with more specific keywords.',
   'linkDataSource.column-picker.search': 'Search for fields',
+  'linkDataSource.column-picker.tooltip': 'Configure columns',
   'linkDataSource.jira-issues.accessInstructions': 'To request access, contact your admin.',
   'linkDataSource.jira-issues.accessRequired': "You don't have access to this site",
   'linkDataSource.jira-issues.accessRequiredWithSite': "You don't have access to {siteName}",
   'linkDataSource.jira-issues.checkConnection': 'Check your connection and refresh, or try again later.',
   'linkDataSource.jira-issues.checkConnectionWithSource': 'Check your connection and refresh, or <a>open this query in Jira</a> to review.',
   'linkDataSource.jira-issues.configmodal.basicModeText': 'Basic',
-  'linkDataSource.jira-issues.configmodal.basicTextSearchPlaceholder': 'Search',
+  'linkDataSource.jira-issues.configmodal.basicTextSearchPlaceholder': 'Search for issues by keyword',
   'linkDataSource.jira-issues.configmodal.cancelButtonText': 'Cancel',
   'linkDataSource.jira-issues.configmodal.countViewModeLabel': 'Count view',
   'linkDataSource.jira-issues.configmodal.dropdownChevronLabel': 'Pick jira site',
@@ -42,8 +43,9 @@ export default {
   'linkDataSource.jira-issues.refresh': 'Refresh',
   'linkDataSource.jira-issues.unableToLoadItems': 'Unable to load items',
   'linkDataSource.jira-issues.unableToLoadResults': 'Unable to load results',
-  'linkDataSource.modal-initial-state.learnMoreLink': 'Learn more about searching with JQL',
-  'linkDataSource.modal-initial-state.searchDescription': 'Start typing or use JQL to search.',
+  'linkDataSource.modal-initial-state.beta': 'Beta',
+  'linkDataSource.modal-initial-state.learnMoreLink': 'Learn how to search with JQL',
+  'linkDataSource.modal-initial-state.searchDescription': 'Use JQL (Jira Query Language) to search for issues.',
   'linkDataSource.modal-initial-state.searchTitle': 'Search for Jira issues',
   'linkDataSource.render-type.boolean.false': 'No',
   'linkDataSource.render-type.boolean.true': 'Yes',