@atlaskit/link-datasource 1.8.0 → 1.9.0

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.0"
 };

package/dist/esm/common/zindex.js

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

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

@@ -225,7 +225,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/esm/ui/common/error-state/access-required.js

@@ -1,13 +1,41 @@
 /** @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';
-export var AccessRequired = function AccessRequired(_ref) {
-  var siteName = _ref.siteName;
+var urlStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
+  fontSize: "var(--ds-font-size-100, 14px)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+});
+var descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+var iconContainerStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var Description = function Description(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+var IconContainer = function IconContainer() {
+  return jsx("div", {
+    css: iconContainerStyles
+  }, jsx(AccessRequiredSVG, null));
+};
+export var AccessRequired = function AccessRequired(_ref2) {
+  var url = _ref2.url;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -17,13 +45,19 @@ export var AccessRequired = function AccessRequired(_ref) {
       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: siteName
-    }) : formatMessage(loadingErrorMessages.accessRequired),
+    header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
-    renderImage: function renderImage() {
-      return jsx(AccessRequiredSVG, null);
-    }
+    renderImage: IconContainer
   });
 };

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

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl-next';
 export var 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 var 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/esm/ui/datasource-table-view/datasourceTableView.js

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

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({

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);
@@ -459,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),
@@ -516,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',