@atlaskit/link-datasource 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.9.0
+
+### Minor Changes
+
+- [#41407](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41407) [`2e336273b6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e336273b6e) - [ux] Added an optional url prop for JiraConfigModal
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.8.0"
+  packageVersion: "1.9.0"
 };

package/dist/cjs/common/zindex.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stickyTableHeadersIndex = exports.siteSelectorIndex = void 0;
+var stickyTableHeadersIndex = exports.stickyTableHeadersIndex = 10;
+var siteSelectorIndex = exports.siteSelectorIndex = stickyTableHeadersIndex + 1;

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

@@ -234,7 +234,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.8.0",
+  packageVersion: "1.9.0",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -9,13 +9,41 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../analytics");
 var _accessRequiredSvg = require("./access-required-svg");
 var _messages = require("./messages");
 /** @jsx jsx */
 
-var AccessRequired = exports.AccessRequired = function AccessRequired(_ref) {
-  var siteName = _ref.siteName;
+var urlStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N400, ")"),
+  fontSize: "var(--ds-font-size-100, 14px)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+});
+var descriptionMessageStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+var iconContainerStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var Description = function Description(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return (0, _react2.jsx)("div", {
+    css: descriptionMessageStyles
+  }, (0, _react2.jsx)("span", {
+    css: urlStyles
+  }, url), (0, _react2.jsx)("span", null, message));
+};
+var IconContainer = function IconContainer() {
+  return (0, _react2.jsx)("div", {
+    css: iconContainerStyles
+  }, (0, _react2.jsx)(_accessRequiredSvg.AccessRequiredSVG, null));
+};
+var AccessRequired = exports.AccessRequired = function AccessRequired(_ref2) {
+  var url = _ref2.url;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
@@ -25,13 +53,19 @@ var AccessRequired = exports.AccessRequired = function AccessRequired(_ref) {
       reason: 'access'
     });
   }, [fireEvent]);
+  if (url) {
+    return (0, _react2.jsx)(_emptyState.default, {
+      header: formatMessage(_messages.loadingErrorMessages.accessRequiredWithSite),
+      description: (0, _react2.jsx)(Description, {
+        message: formatMessage(_messages.loadingErrorMessages.accessInstructions),
+        url: url
+      }),
+      renderImage: IconContainer
+    });
+  }
   return (0, _react2.jsx)(_emptyState.default, {
-    header: siteName ? formatMessage(_messages.loadingErrorMessages.accessRequiredWithSite, {
-      siteName: siteName
-    }) : formatMessage(_messages.loadingErrorMessages.accessRequired),
+    header: formatMessage(_messages.loadingErrorMessages.accessRequired),
     description: formatMessage(_messages.loadingErrorMessages.accessInstructions),
-    renderImage: function renderImage() {
-      return (0, _react2.jsx)(_accessRequiredSvg.AccessRequiredSVG, null);
-    }
+    renderImage: IconContainer
   });
 };

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

@@ -8,8 +8,8 @@ var _reactIntlNext = require("react-intl-next");
 var loadingErrorMessages = exports.loadingErrorMessages = (0, _reactIntlNext.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',
@@ -18,8 +18,8 @@ var loadingErrorMessages = exports.loadingErrorMessages = (0, _reactIntlNext.def
   },
   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/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -114,7 +114,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
   }
   if (status === 'unauthorized') {
-    return (0, _react2.jsx)(_accessRequired.AccessRequired, null);
+    return (0, _react2.jsx)(_accessRequired.AccessRequired, {
+      url: url
+    });
   }
   if (status === 'rejected') {
     return (0, _react2.jsx)(_loadingError.LoadingError, {

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

@@ -25,6 +25,7 @@ var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
+var _zindex = require("../../common/zindex");
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -41,7 +42,7 @@ var tableHeadStyles = (0, _react2.css)({
   background: "var(--ds-surface, #FFF)",
   position: 'sticky',
   top: 0,
-  zIndex: 10
+  zIndex: _zindex.stickyTableHeadersIndex
 });
 var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = (0, _react2.css)({

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

@@ -46,8 +46,11 @@ 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) { (0, _defineProperty2.default)(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 */
 var dropdownContainerStyles = (0, _react2.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 = (0, _react2.css)({
   display: 'grid',
   maxHeight: '420px',
@@ -92,12 +95,13 @@ var getColumnAction = exports.getColumnAction = function getColumnAction(oldVisi
 };
 var PlainJiraIssuesConfigModal = exports.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 = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     availableSites = _useState2[0],
@@ -161,11 +165,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = (0, _react.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) {
@@ -417,12 +419,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     }));
   }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   var renderCountModeContent = (0, _react.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 (0, _react2.jsx)(_accessRequired.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 (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
       }, (0, _react2.jsx)("span", {
@@ -430,22 +432,23 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
         css: placeholderSmartLinkStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      var urlWithEncodedJql = "".concat(url, "/issues/?jql=").concat(encodeURI(jql));
+      var urlWithEncodedJql = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURI(jql));
       return (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
       }, (0, _react2.jsx)(_link.default, {
         url: urlWithEncodedJql
       }));
     }
-  }, [jql, selectedJiraSite, status]);
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   var renderIssuesModeContent = (0, _react.useCallback)(function () {
+    var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
         url: jqlUrl
       });
     } else if (status === 'unauthorized') {
       return (0, _react2.jsx)(_accessRequired.AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (resolvedWithNoResults) {
       return (0, _react2.jsx)(_noResults.NoResults, null);
@@ -468,24 +471,20 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       }));
     }
     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 (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
-    testId: 'jira-jql-datasource-modal',
+    testId: "jira-jql-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)("div", {
     css: dropdownContainerStyles
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
-    testId: "jira-jql-datasource-modal--site-selector",
+  }, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitleManySites), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
+    selectedJiraSite: selectedJiraSite,
+    testId: "jira-jql-datasource-modal--site-selector"
+  })))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
     isCompact: true,
     options: [{
       label: formatMessage(_messages.modalMessages.issueViewModeLabel),
@@ -525,7 +524,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: 'jira-jql-datasource-modal--insert-button'
+    testId: "jira-jql-datasource-modal--insert-button"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText)))));
 };
 var analyticsContextAttributes = {

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

@@ -23,8 +23,8 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.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/cjs/ui/jira-issues-modal/site-selector/index.js

@@ -1,55 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JiraSiteSelector = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _zindex = require("../../../common/zindex");
 var _messages = require("./messages");
-var _excluded = ["triggerRef"];
+var _excluded = ["width"];
 /** @jsx jsx */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
+var selectStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-100, 14px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  zIndex: _zindex.siteSelectorIndex
+});
 var JiraSiteSelector = exports.JiraSiteSelector = function JiraSiteSelector(props) {
   var availableSites = props.availableSites,
     onSiteSelection = props.onSiteSelection,
     selectedJiraSite = props.selectedJiraSite,
     testId = props.testId;
-  var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)(_dropdownMenu.default, {
-    spacing: "compact",
-    testId: testId,
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
-        testId: "".concat(testId, "--trigger"),
-        spacing: "none",
-        iconBefore: (0, _react.jsx)(_chevronDown.default, {
-          label: intl.formatMessage(_messages.siteSelectorMessages.dropdownChevronLabel)
-        }),
-        ref: triggerRef
-      }));
+  var _useIntl = (0, _reactIntlNext.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);
     }
-  }, (0, _react.jsx)(_dropdownMenu.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 (0, _react.jsx)(_dropdownMenu.DropdownItem, {
-      isSelected: isSelected,
-      key: cloudId,
-      onClick: function onClick() {
-        return onSiteSelection(availableSite);
-      },
-      testId: testId && "".concat(testId, "--dropdown-item").concat(isSelected ? '__selected' : '')
-    }, displayName);
-  })));
+  };
+  var availableSitesOptions = (0, _react.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 (0, _react2.jsx)("span", {
+    "data-testid": "".concat(testId, "--trigger")
+  }, (0, _react2.jsx)(_select.default, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: availableSites.length === 0,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(_messages.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+        return _objectSpread(_objectSpread({}, css), {}, {
+          minWidth: '100%',
+          width: 'max-content'
+        });
+      }
+    },
+    testId: testId,
+    value: selectedSiteOption
+  }));
 };

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

@@ -6,14 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.siteSelectorMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var siteSelectorMessages = exports.siteSelectorMessages = (0, _reactIntlNext.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/es2019/analytics/constants.js

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

package/dist/es2019/common/zindex.js

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

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.0",
   source: 'datasourceConfigModal'
 };
 const contextData = {

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;