@atlaskit/link-datasource 1.7.6 → 1.9.0

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

@@ -1,25 +1,39 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
-import UserType from '../render-type/user';
-import { EmptyStateTableHeading } from '../styled';
-import Priority from './priority';
-import Type from './type';
+import { ScrollableContainerHeight, TableHeading } from '../styled';
+var SkeletonComponent = function SkeletonComponent(_ref) {
+  var width = _ref.width,
+    itemName = _ref.itemName;
+  return jsx(Skeleton, {
+    borderRadius: 8,
+    testId: "".concat(itemName, "-empty-state-skeleton"),
+    height: 14,
+    width: width
+  });
+};
+var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableBodyStyles = css({
   borderBottom: 0
 });
+var cellStyles = css({
+  paddingBlock: "var(--ds-space-100, 12px)",
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
 var baseColumns = [{
   key: 'type',
-  width: 50
+  width: 35
 }, {
   key: 'issue',
   width: 50
 }, {
   key: 'summary',
-  width: 70
+  width: 100
 }, {
   key: 'assignee',
-  width: 100
+  width: 70
 }, {
   key: 'priority',
   width: 60
@@ -36,91 +50,64 @@ var baseColumns = [{
   key: 'due',
   width: 50
 }];
-var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
-var types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
-var summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
-var statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
-var rows = new Array(10).fill(null).map(function (_, index) {
-  return {
-    id: index,
-    priority: priorities[index],
-    type: types[index],
-    summaryWidth: summaryColumnWidths[index],
-    statusWidth: statusColumnWidths[index]
-  };
-});
-var cellStyles = css({
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
-var renderItem = function renderItem(_ref, _ref2, isShimmering) {
-  var key = _ref.key,
-    width = _ref.width;
-  var priority = _ref2.priority,
-    type = _ref2.type,
-    summaryWidth = _ref2.summaryWidth,
-    statusWidth = _ref2.statusWidth;
+var longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+var shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
+var renderItem = function renderItem(_ref2, _ref3) {
+  var key = _ref2.key,
+    width = _ref2.width;
+  var longWidth = _ref3.longWidth,
+    shortWidth = _ref3.shortWidth;
   switch (key) {
-    case 'assignee':
-      return jsx(UserType, null, jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
-      }));
-    case 'priority':
-      return jsx(Priority, {
-        priority: priority
-      });
-    case 'type':
-      return jsx(Type, {
-        type: type
+    case 'status':
+      return jsx(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
       });
     case 'summary':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 10,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: summaryWidth
-      });
-    case 'status':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 3,
-        testId: "empty-state-skeleton",
-        height: 16,
-        isShimmering: isShimmering,
-        width: statusWidth
+      return jsx(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
       });
     default:
-      return jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
+      return jsx(SkeletonComponent, {
+        width: width,
+        itemName: key
       });
   }
 };
-export default (function (_ref3) {
-  var isCompact = _ref3.isCompact,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    testId = _ref3.testId;
+export default (function (_ref4) {
+  var isCompact = _ref4.isCompact,
+    testId = _ref4.testId;
   var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
-  return jsx("table", {
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  var rowsNumber = isCompact ? 14 : 10;
+  var rows = new Array(rowsNumber).fill(null).map(function (_, index) {
+    return {
+      id: index,
+      longWidth: longColumnWidths[index],
+      shortWidth: shortColumnWidths[index]
+    };
+  });
+  return jsx("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // the isCompact prop is applied to non-modal empty states which require additional padding
+      // this maxHeight comes from scrollableContainerHeight
+      maxHeight: ScrollableContainerHeight,
+      padding: isCompact ? "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding) : '0',
+      boxSizing: 'border-box'
+    }
+  }, jsx("table", {
     "data-testid": testId
-  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(function (_ref4) {
-    var key = _ref4.key,
-      width = _ref4.width;
-    return jsx(EmptyStateTableHeading, {
+  }, jsx("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, jsx("tr", null, columnsToRender.map(function (_ref5) {
+    var key = _ref5.key,
+      width = _ref5.width;
+    return jsx(TableHeading, {
       key: key,
       style: {
         width: width
@@ -129,8 +116,7 @@ export default (function (_ref3) {
       appearance: "darkGray",
       borderRadius: 8,
       testId: "empty-state-skeleton",
-      isShimmering: isLoading,
-      height: 13,
+      height: 12,
       width: width
     }));
   }))), jsx("tbody", {
@@ -142,7 +128,7 @@ export default (function (_ref3) {
       return jsx("td", {
         css: cellStyles,
         key: column.key
-      }, renderItem(column, row, isLoading));
+      }, renderItem(column, row));
     }));
-  })));
+  }))));
 });

package/dist/esm/ui/issue-like-table/empty-state/type.js

@@ -8,7 +8,7 @@ import Epic16Icon from '@atlaskit/icon-object/glyph/epic/16';
 import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
 import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
 import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
-var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: left;\n"])));
 export default (function (_ref) {
   var type = _ref.type;
   var TypeIcon = function TypeIcon() {

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

@@ -22,6 +22,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';
@@ -34,7 +35,7 @@ var tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
   position: 'sticky',
   top: 0,
-  zIndex: 10
+  zIndex: stickyTableHeadersIndex
 });
 var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  position: sticky;\n  right: calc(-1 * ", ");\n  background-color: ", ";\n  border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0%,\n    ", " 10%\n  );\n  vertical-align: middle; /* Keeps dropdown button in the middle */\n  &:last-of-type {\n    padding-right: ", ";\n  }\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
@@ -86,8 +87,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -167,9 +167,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       cells: visibleSortedColumns.map(function (_ref3) {
         var key = _ref3.key;
         var content = jsx(Skeleton, {
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          width: '100%',
-          height: '20px'
+          borderRadius: 8,
+          width: "100%",
+          height: 14,
+          testId: "issues-table-row-loading"
         });
         return {
           key: key,
@@ -295,8 +296,24 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
   var rows = useMemo(function () {
-    return [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
-  }, [loadingRow, status, tableRows]);
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [].concat(_toConsumableArray(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(tableRows.length)
+      })]);
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return _toConsumableArray(Array(loadingRowsCount)).map(function (_, index) {
+      return _objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(index)
+      });
+    });
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -389,6 +406,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth: maxWidth
         }
       }, heading);
@@ -414,14 +433,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       var cellKey = _ref14.key,
         content = _ref14.content,
         maxWidth = _ref14.maxWidth;
+      var loadingRowStyle = {
+        maxWidth: maxWidth
+      };
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 12px)"
+        });
+      }
       return jsx("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
         css: truncatedCellStyles,
-        style: {
-          maxWidth: maxWidth
-        }
+        style: loadingRowStyle
       }, content);
     }));
   }))));

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

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export var ScrollableContainerHeight = 590;
 export var FieldTextFontSize = '14px';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", " ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
-export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", " ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));

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

@@ -7,7 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { 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';
@@ -37,8 +37,11 @@ import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
 var 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
 });
+
 var contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
@@ -83,12 +86,13 @@ export var getColumnAction = function getColumnAction(oldVisibleColumnKeys, newV
 };
 export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
-    initialParameters = props.parameters,
-    initialVisibleColumnKeys = props.visibleColumnKeys,
     onCancel = props.onCancel,
     onInsert = props.onInsert,
     _props$viewMode = props.viewMode,
-    viewMode = _props$viewMode === void 0 ? 'issue' : _props$viewMode;
+    viewMode = _props$viewMode === void 0 ? 'issue' : _props$viewMode,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     availableSites = _useState2[0],
@@ -152,11 +156,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = useMemo(function () {
     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(function (jiraSite) {
         return jiraSite.cloudId === cloudId;
-      }) || availableSites[0];
+      });
     } else {
       var currentlyLoggedInSiteUrl = window.location.origin;
       return availableSites.find(function (jiraSite) {
@@ -408,12 +410,12 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     }));
   }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   var renderCountModeContent = useCallback(function () {
-    var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    var 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", {
@@ -421,22 +423,23 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      var urlWithEncodedJql = "".concat(url, "/issues/?jql=").concat(encodeURI(jql));
+      var urlWithEncodedJql = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(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]);
   var renderIssuesModeContent = useCallback(function () {
+    var 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);
@@ -445,8 +448,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jsx("div", {
         css: contentContainerStyles
       }, !!jql ? jsx(EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state",
-        isLoading: true
+        testId: "jira-jql-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {
         searchMethod: currentSearchMethod
       }));
@@ -460,24 +462,20 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       }));
     }
     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),
@@ -517,7 +515,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: 'jira-jql-datasource-modal--insert-button'
+    testId: "jira-jql-datasource-modal--insert-button"
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText)))));
 };
 var analyticsContextAttributes = {

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

@@ -17,8 +17,8 @@ export var 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/esm/ui/jira-issues-modal/site-selector/index.js

@@ -1,45 +1,70 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["triggerRef"];
+var _excluded = ["width"];
+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; }
 /** @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';
+var 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 var JiraSiteSelector = function JiraSiteSelector(props) {
   var availableSites = props.availableSites,
     onSiteSelection = props.onSiteSelection,
     selectedJiraSite = props.selectedJiraSite,
     testId = props.testId;
-  var intl = useIntl();
-  return jsx(DropdownMenu, {
-    spacing: "compact",
-    testId: testId,
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        props = _objectWithoutProperties(_ref, _excluded);
-      return jsx(Button, _extends({}, props, {
-        testId: "".concat(testId, "--trigger"),
-        spacing: "none",
-        iconBefore: jsx(ChevronDownIcon, {
-          label: intl.formatMessage(siteSelectorMessages.dropdownChevronLabel)
-        }),
-        ref: triggerRef
-      }));
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onChange = function onChange(newValue) {
+    var selectedSite = availableSites.find(function (site) {
+      return site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value);
+    });
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
     }
-  }, jsx(DropdownItemGroup, null, availableSites.map(function (availableSite) {
-    var displayName = availableSite.displayName,
-      cloudId = availableSite.cloudId;
-    var isSelected = displayName === (selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName);
-    return jsx(DropdownItem, {
-      isSelected: isSelected,
-      key: cloudId,
-      onClick: function onClick() {
-        return onSiteSelection(availableSite);
-      },
-      testId: testId && "".concat(testId, "--dropdown-item").concat(isSelected ? '__selected' : '')
-    }, displayName);
-  })));
+  };
+  var availableSitesOptions = useMemo(function () {
+    return availableSites.map(function (site) {
+      return {
+        label: site.displayName,
+        value: site.cloudId
+      };
+    });
+  }, [availableSites]);
+  var selectedSiteOption = selectedJiraSite && {
+    label: selectedJiraSite.displayName,
+    value: selectedJiraSite.cloudId
+  };
+  return jsx("span", {
+    "data-testid": "".concat(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: function menu(_ref) {
+        var width = _ref.width,
+          css = _objectWithoutProperties(_ref, _excluded);
+        return _objectSpread(_objectSpread({}, css), {}, {
+          minWidth: '100%',
+          width: 'max-content'
+        });
+      }
+    },
+    testId: testId,
+    value: selectedSiteOption
+  }));
 };

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

@@ -1,13 +1,8 @@
 import { defineMessages } from 'react-intl-next';
 export var 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/types/common/zindex.d.ts

@@ -0,0 +1,2 @@
+export declare const stickyTableHeadersIndex = 10;
+export declare const siteSelectorIndex: number;

package/dist/types/ui/common/error-state/access-required.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 interface AccessRequiredProps {
-    siteName?: string;
+    url?: string;
 }
-export declare const AccessRequired: ({ siteName }: AccessRequiredProps) => jsx.JSX.Element;
+export declare const AccessRequired: ({ url }: AccessRequiredProps) => jsx.JSX.Element;
 export {};

package/dist/types/ui/issue-like-table/empty-state/index.d.ts

@@ -2,8 +2,7 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
-    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types/ui/issue-like-table/index.d.ts

@@ -15,4 +15,4 @@ export interface RowCellType {
 }
 export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;