@atlaskit/link-datasource 1.24.4 → 1.24.6

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

@@ -22,26 +22,23 @@ import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
-import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
+import { getAvailableSites } from '../../../services/getAvailableSites';
 import { AccessRequired } from '../../common/error-state/access-required';
+import { loadingErrorMessages } from '../../common/error-state/messages';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
+import { InitialStateView } from '../../common/initial-state-view';
+import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
-import { InitialStateView } from '../initial-state-view';
 import { JiraSearchContainer } from '../jira-search-container';
-import { JiraSiteSelector } from '../site-selector';
-import { DisplayViewDropDown } from './display-view-dropdown/display-view-drop-down';
+import { JiraDisplayViewDropDown } from './jira-display-view-dropdown/jira-display-view-drop-down';
+import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-const dropdownContainerStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: "var(--ds-space-100, 0.5rem)",
-  minHeight: '40px' // to prevent vertical shifting when site selector pops in
-});
 const tableContainerStyles = css({
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
   borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
@@ -78,6 +75,7 @@ const getDisplayValue = (currentViewMode, itemCount) => {
   }
   return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
 };
+const jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
 
 /**
  * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
@@ -215,7 +213,7 @@ export const PlainJiraIssuesConfigModal = props => {
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   useEffect(() => {
     const fetchSiteDisplayNames = async () => {
-      const jiraSites = await getAvailableJiraSites();
+      const jiraSites = await getAvailableSites('jira');
       const sortedAvailableSites = [...jiraSites].sort((a, b) => a.displayName.localeCompare(b.displayName));
       setAvailableSites(sortedAvailableSites);
       fireEvent('ui.modal.ready.datasource', {
@@ -329,7 +327,7 @@ export const PlainJiraIssuesConfigModal = props => {
     // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
     // even if the user didn't previously click search
     const upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(upToDateJql)}`;
+    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${getBooleanFF('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(upToDateJql) : encodeURI(upToDateJql)}`;
     const filterSelectionCount = availableBasicFilterTypes.reduce((current, filter) => {
       var _basicFilterSelection;
       return {
@@ -429,7 +427,7 @@ export const PlainJiraIssuesConfigModal = props => {
   const issueLikeDataTableView = useMemo(() => jsx("div", {
     css: [tableContainerStyles, contentContainerStyles]
   }, jsx(IssueLikeDataTableView, {
-    testId: "jira-jql-datasource-table",
+    testId: "jira-datasource-table",
     status: status,
     columns: columns,
     items: responseItems,
@@ -455,7 +453,7 @@ export const PlainJiraIssuesConfigModal = props => {
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx("span", {
-        "data-testid": `jira-jql-datasource-modal--smart-card-placeholder`,
+        "data-testid": `jira-datasource-modal--smart-card-placeholder`,
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
@@ -463,7 +461,7 @@ export const PlainJiraIssuesConfigModal = props => {
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
         url = retrieveUrlForSmartCardRender();
       } else {
-        url = `${selectedJiraSiteUrl}/issues/?jql=${encodeURI(jql)}`;
+        url = `${selectedJiraSiteUrl}/issues/?jql=${getBooleanFF('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql)}`;
       }
       return jsx("div", {
         css: smartLinkContainerStyles
@@ -489,29 +487,36 @@ export const PlainJiraIssuesConfigModal = props => {
       return jsx("div", {
         css: [contentContainerStyles, !!jql && tableContainerStyles]
       }, !!jql ? jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`
+        testId: `jira-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {
-        searchMethod: currentSearchMethod
+        showBeta: !getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters'),
+        icon: jsx(JiraInitialStateSVG, null),
+        title: modalMessages.searchJiraTitle,
+        description: currentSearchMethod === 'jql' ? initialStateViewMessages.searchDescriptionForJQLSearch : initialStateViewMessages.searchDescriptionForBasicSearch,
+        learnMoreLink: currentSearchMethod === 'jql' ? {
+          href: jqlSupportDocumentLink,
+          text: initialStateViewMessages.learnMoreLink
+        } : undefined
       }));
     }
     return issueLikeDataTableView;
   }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  const siteSelectorLabel = availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySites : modalMessages.insertIssuesTitle;
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
   }, jsx(ModalTransition, null, jsx(Modal, {
-    testId: "jira-jql-datasource-modal",
+    testId: "jira-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx("div", {
-    css: dropdownContainerStyles
-  }, availableSites && availableSites.length > 1 ? jsx(Fragment, null, jsx(FormattedMessage, modalMessages.insertIssuesTitleManySites), jsx(JiraSiteSelector, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite,
-    testId: "jira-jql-datasource-modal--site-selector"
-  })) : jsx(FormattedMessage, modalMessages.insertIssuesTitle))), !hasNoJiraSites && jsx(DisplayViewDropDown, {
+    selectedSite: selectedJiraSite,
+    testId: "jira-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoJiraSites && jsx(JiraDisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
@@ -523,8 +528,12 @@ export const PlainJiraIssuesConfigModal = props => {
     initialSearchMethod: initialSearchMethod,
     onSearchMethodChange: setCurrentSearchMethod,
     site: selectedJiraSite
-  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()) : jsx(NoInstancesView, null)), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
-    "data-testid": "jira-jql-datasource-modal-total-issues-count",
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()) : jsx(NoInstancesView, {
+    title: loadingErrorMessages.noAccessToJiraSitesTitle,
+    description: loadingErrorMessages.noAccessToJiraSitesDescription,
+    testId: `no-jira-instances-content`
+  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
+    "data-testid": "jira-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(LinkUrl, {
     href: jqlUrl,
@@ -546,7 +555,7 @@ export const PlainJiraIssuesConfigModal = props => {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: "jira-jql-datasource-modal--insert-button"
+    testId: "jira-datasource-modal--insert-button"
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };
 const analyticsContextAttributes = {

package/dist/es2019/ui/jira-issues-modal/modal/{display-view-dropdown/display-view-drop-down.js → jira-display-view-dropdown/jira-display-view-drop-down.js}

@@ -24,7 +24,7 @@ const InlineIcon = jsx("svg", {
   d: "M4 9C2.89543 9 2 9.67155 2 10.5V13.5C2 14.3285 2.89543 15 4 15H20C21.1046 15 22 14.3285 22 13.5V10.5C22 9.67155 21.1046 9 20 9H4ZM4.22222 11.25C4.22222 10.5 4.22222 10.5 5 10.5H7C7.55556 10.5 7.55556 10.5 7.55556 11.25V13C7.55556 13.5 7.55556 13.5 7 13.5H5C4.22222 13.5 4.22222 13.5 4.22222 13V11.25ZM9 12C9 11.7929 9.2239 11.625 9.5 11.625H19.5C19.7761 11.625 20 11.7929 20 12C20 12.2071 19.7761 12.375 19.5 12.375H9.5C9.2239 12.375 9 12.2071 9 12Z",
   fill: 'currentColor'
 }));
-export const DisplayViewDropDown = ({
+export const JiraDisplayViewDropDown = ({
   onViewModeChange,
   viewMode
 }) => {
@@ -34,7 +34,7 @@ export const DisplayViewDropDown = ({
   const triggerText = viewMode === 'issue' ? formatMessage(modalMessages.tableViewModeLabel) : formatMessage(modalMessages.inlineLinkViewModeLabel);
   return jsx(DropdownMenu, {
     trigger: triggerText,
-    testId: "jira-jql-datasource-modal--view-drop-down"
+    testId: "jira-datasource-modal--view-drop-down"
   }, jsx(Box, {
     xcss: dropDownItemGroupStyles
   }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export const InitialStateSVG = () => /*#__PURE__*/React.createElement("svg", {
+export const JiraInitialStateSVG = () => /*#__PURE__*/React.createElement("svg", {
   width: "188",
   height: "112",
   viewBox: "0 0 188 112",

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

@@ -49,5 +49,71 @@ export const modalMessages = defineMessages({
     id: 'linkDataSource.jira-issues.configmodal.issue',
     description: 'Text that appears after issue count number.',
     defaultMessage: '{totalCount, plural, one {issue} other {issues}}'
+  },
+  searchJiraTitleDuplicate: {
+    id: 'linkDataSource.jira-issues.searchJiraTitle',
+    description: 'The initial modal search state title that gives the user some idea about how to get information',
+    defaultMessage: 'Search for Jira issues'
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  searchJiraTitle: {
+    id: 'linkDataSource.modal-initial-state.searchTitle',
+    description: 'The initial modal search state title that gives the user some idea about how to get information',
+    defaultMessage: 'Search for Jira issues'
+  },
+  searchDescriptionForJiraBasicSearchDuplicate: {
+    id: 'linkDataSource.jira-issues.searchDescription-basic',
+    description: 'The initial modal search state helper message displayed under the search title when basic search mode is selected',
+    defaultMessage: 'Search by keyword for issues to insert.'
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  searchDescriptionForJiraBasicSearch: {
+    id: 'linkDataSource.modal-initial-state.searchDescription-basic',
+    description: 'The initial modal search state helper message displayed under the search title when basic search mode is selected',
+    defaultMessage: 'Search by keyword for issues to insert.'
+  },
+  searchDescriptionForJiraJQLSearchDuplicate: {
+    id: 'linkDataSource.jira-issues.searchDescription-jql',
+    description: 'The initial modal search state helper message displayed under the search title when JQL search mode is selected',
+    defaultMessage: 'Use JQL (Jira Query Language) to search for issues.'
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  searchDescriptionForJiraJQLSearch: {
+    id: 'linkDataSource.modal-initial-state.searchDescription-jql',
+    description: 'The initial modal search state helper message displayed under the search title when JQL search mode is selected',
+    defaultMessage: 'Use JQL (Jira Query Language) to search for issues.'
+  },
+  learnMoreLinkDuplicate: {
+    id: 'linkDataSource.jira-issues.learnMoreLink',
+    description: 'The link that displays under the search description to help people know more about JQL',
+    defaultMessage: 'Learn how to search with JQL'
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  learnMoreLink: {
+    id: 'linkDataSource.modal-initial-state.learnMoreLink',
+    description: 'The link that displays under the search description to help people know more about JQL',
+    defaultMessage: 'Learn how to search with JQL'
+  },
+  noAccessToJiraSitesTitleDuplicate: {
+    id: 'linkDataSource.no.jira.sites.access.title',
+    description: 'Title that shows in the modal when user has no access to any Jira sites',
+    defaultMessage: "You don't have access to any Jira sites"
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  noAccessToJiraSitesTitle: {
+    id: 'linkDataSource.jira-issues.no.jira.sites.access.title',
+    description: 'Title that shows in the modal when user has no access to any Jira sites',
+    defaultMessage: "You don't have access to any Jira sites"
+  },
+  noAccessToJiraSitesDescriptionDuplicate: {
+    id: 'linkDataSource.no.jira.sites.access.description',
+    description: 'Description that shows in the modal when user has no access to any Jira sites',
+    defaultMessage: 'To request access, contact your admin.'
+  },
+  // delete and remove duplicate from title above once EDM-9407 is merged
+  noAccessToJiraSitesDescription: {
+    id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
+    description: 'Description that shows in the modal when user has no access to any Jira sites',
+    defaultMessage: 'To request access, contact your admin.'
   }
 });

package/dist/esm/common/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/{getAvailableJiraSites.js → getAvailableSites.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-export var getAvailableJiraSites = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+export var getAvailableSites = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(product) {
     var requestConfig, response, res;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -15,7 +15,7 @@ export var getAvailableJiraSites = /*#__PURE__*/function () {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-              products: ['jira-software.ondemand', 'jira-core.ondemand', 'jira-incident-manager.ondemand', 'jira-product-discovery', 'jira-servicedesk.ondemand']
+              products: product === 'confluence' ? ['confluence.ondemand'] : ['jira-software.ondemand', 'jira-core.ondemand', 'jira-incident-manager.ondemand', 'jira-product-discovery', 'jira-servicedesk.ondemand']
             })
           };
           _context.next = 3;
@@ -51,7 +51,7 @@ export var getAvailableJiraSites = /*#__PURE__*/function () {
       }
     }, _callee);
   }));
-  return function getAvailableJiraSites() {
+  return function getAvailableSites(_x) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js

@@ -14,9 +14,7 @@ var svgAndTextsWrapperStyles = css({
   alignSelf: 'center'
 });
 var searchTitleStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)",
-  lineHeight: "var(--ds-font-lineHeight-300, 24px)",
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)"
 });

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

@@ -10,8 +10,7 @@ import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
 var urlStyles = css({
   color: "var(--ds-text-subtlest, ".concat(N400, ")"),
-  fontSize: "var(--ds-font-size-100, 14px)",
-  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var descriptionMessageStyles = css({
   display: 'flex',

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

@@ -18,8 +18,7 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var errorMessageStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)"
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var errorDescriptionStyles = css({
   margin: 0
@@ -35,7 +34,7 @@ export var LoadingError = function LoadingError(_ref) {
   }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
-    "data-testid": "jira-jql-datasource--loading-error"
+    "data-testid": "datasource--loading-error"
   }, jsx(LoadingErrorSVG, null), jsx("div", {
     css: errorMessageContainerStyles
   }, jsx("span", {

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

@@ -1,55 +1,111 @@
 import { defineMessages } from 'react-intl-next';
 export var loadingErrorMessages = defineMessages({
+  accessInstructionsDuplicate: {
+    id: 'linkDataSource.accessInstructions',
+    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.'
+  },
+  //delete and remove duplicate from title above
   accessInstructions: {
     id: 'linkDataSource.jira-issues.accessInstructions',
     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.'
   },
+  accessRequiredDuplicate: {
+    id: 'linkDataSource.accessRequired',
+    description: 'Message letting user know that they do not have access to this content',
+    defaultMessage: "You don't have access to this content"
+  },
+  //delete and remove duplicate from title above
   accessRequired: {
     id: 'linkDataSource.jira-issues.accessRequired',
     description: 'Message letting user know that they do not have access to this content',
     defaultMessage: "You don't have access to this content"
   },
+  accessRequiredWithSiteDuplicate: {
+    id: 'linkDataSource.accessRequiredWithSite',
+    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:"
+  },
+  //delete and remove duplicate from title above
   accessRequiredWithSite: {
     id: 'linkDataSource.jira-issues.accessRequiredWithSite',
     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:"
   },
+  checkConnectionDuplicate: {
+    id: 'linkDataSource.checkConnection',
+    description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
+    defaultMessage: 'Check your connection and refresh, or try again later.'
+  },
+  //delete and remove duplicate from title above
   checkConnection: {
     id: 'linkDataSource.jira-issues.checkConnection',
     description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
     defaultMessage: 'Check your connection and refresh, or try again later.'
   },
+  checkConnectionWithSourceDuplicate: {
+    id: 'linkDataSource.checkConnectionWithSource',
+    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
+    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
+  },
+  //delete and remove duplicate from title above
   checkConnectionWithSource: {
     id: 'linkDataSource.jira-issues.checkConnectionWithSource',
     description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
     defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
   },
+  noResultsFoundDuplicate: {
+    id: 'linkDataSource.noResultsFound',
+    description: 'Status message letting the user know their query did not have any results',
+    defaultMessage: 'No results found'
+  },
+  //delete and remove duplicate from title above
   noResultsFound: {
     id: 'linkDataSource.jira-issues.noResultsFound',
     description: 'Status message letting the user know their query did not have any results',
     defaultMessage: 'No results found'
   },
+  refreshDuplicate: {
+    id: 'linkDataSource.refresh',
+    description: 'Button text to allow the user to refresh the table to see results',
+    defaultMessage: 'Refresh'
+  },
+  //delete and remove duplicate from title above
   refresh: {
     id: 'linkDataSource.jira-issues.refresh',
     description: 'Button text to allow the user to refresh the table to see results',
     defaultMessage: 'Refresh'
   },
+  unableToLoadItemsDuplicate: {
+    id: 'linkDataSource.unableToLoadItems',
+    description: 'Error state message letting the user know we were unable the load the requested list of items',
+    defaultMessage: 'Unable to load items'
+  },
+  //delete and remove duplicate from title above
   unableToLoadItems: {
     id: 'linkDataSource.jira-issues.unableToLoadItems',
     description: 'Error state message letting the user know we were unable the load the requested list of items',
     defaultMessage: 'Unable to load items'
   },
+  unableToLoadResultsDuplicate: {
+    id: 'linkDataSource.unableToLoadResults',
+    description: 'Error state message letting the user know we were unable the load the requested list of results',
+    defaultMessage: 'Unable to load results'
+  },
+  //delete and remove duplicate from title above
   unableToLoadResults: {
     id: 'linkDataSource.jira-issues.unableToLoadResults',
     description: 'Error state message letting the user know we were unable the load the requested list of results',
     defaultMessage: 'Unable to load results'
   },
+  // delete once EDM-9407 is merged
   noAccessToJiraSitesTitle: {
     id: 'linkDataSource.jira-issues.no.jira.sites.access.title',
     description: 'Title that shows in the modal when user has no access to any Jira sites',
     defaultMessage: "You don't have access to any Jira sites"
   },
+  // delete once EDM-9407 is merged
   noAccessToJiraSitesDescription: {
     id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Jira sites',

package/dist/esm/ui/common/error-state/modal-loading-error.js

@@ -18,8 +18,7 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var errorMessageStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)"
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var errorDescriptionStyles = css({
   margin: 0
@@ -35,7 +34,7 @@ export var ModalLoadingError = function ModalLoadingError(_ref) {
   }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
-    "data-testid": "jira-jql-datasource-modal--loading-error"
+    "data-testid": "datasource-modal--loading-error"
   }, jsx(LoadingErrorSVG, null), jsx("div", {
     css: errorMessageContainerStyles
   }, jsx("span", {

package/dist/esm/ui/common/error-state/no-instances.js

@@ -1,12 +1,10 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import { Flex, xcss } from '@atlaskit/primitives';
-import { loadingErrorMessages } from './messages';
 import { NoInstancesSvg } from './no-instances-svg';
 var titleStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)",
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   marginTop: "var(--ds-space-200, 16px)"
 });
 var descriptionStyles = css({
@@ -15,15 +13,20 @@ var descriptionStyles = css({
 var containerStyles = xcss({
   marginTop: '60px'
 });
-export var NoInstancesView = function NoInstancesView() {
+export var NoInstancesView = function NoInstancesView(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    testId = _ref.testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   return jsx(Flex, {
-    testId: "no-jira-instances-content",
+    testId: testId,
     direction: "column",
     alignItems: "center",
     xcss: containerStyles
   }, jsx(NoInstancesSvg, null), jsx("span", {
     css: titleStyles
-  }, jsx(FormattedMessage, loadingErrorMessages.noAccessToJiraSitesTitle)), jsx("span", {
+  }, formatMessage(title)), jsx("span", {
     css: descriptionStyles
-  }, jsx(FormattedMessage, loadingErrorMessages.noAccessToJiraSitesDescription)));
+  }, formatMessage(description)));
 };

package/dist/esm/ui/common/error-state/no-results.js

@@ -17,8 +17,7 @@ var noResultsMessageContainerStyles = css({
   placeItems: 'center'
 });
 var noResultsMessageStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)"
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 export var NoResults = function NoResults(_ref) {
   var onRefresh = _ref.onRefresh;
@@ -29,7 +28,7 @@ export var NoResults = function NoResults(_ref) {
   }, [fireEvent]);
   return jsx("div", {
     css: noResultsContainerStyles,
-    "data-testid": "jira-jql-datasource-modal--no-results"
+    "data-testid": "datasource-modal--no-results"
   }, jsx("svg", {
     width: "131",
     height: "120",

package/dist/esm/ui/common/initial-state-view/index.js

@@ -0,0 +1,65 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Lozenge from '@atlaskit/lozenge';
+import { N300 } from '@atlaskit/theme/colors';
+import { initialStateViewMessages } from './messages';
+var initialStateViewContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%'
+});
+var svgAndTextsWrapperStyles = css({
+  textAlign: 'center',
+  alignSelf: 'center',
+  paddingTop: "var(--ds-space-600, 48px)",
+  paddingBottom: "var(--ds-space-600, 48px)"
+});
+var betaTagStyles = css({
+  display: 'flex'
+});
+var searchTitleStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N300, ")"),
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  paddingTop: "var(--ds-space-200, 16px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 8px)"
+});
+var mainTextStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N300, ")")
+});
+var learnMoreLinkStyles = css({
+  paddingTop: "var(--ds-space-200, 16px)",
+  display: 'inline-block'
+});
+export var InitialStateView = function InitialStateView(_ref) {
+  var icon = _ref.icon,
+    _ref$showBeta = _ref.showBeta,
+    showBeta = _ref$showBeta === void 0 ? false : _ref$showBeta,
+    title = _ref.title,
+    description = _ref.description,
+    learnMoreLink = _ref.learnMoreLink;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return jsx("div", {
+    css: initialStateViewContainerStyles,
+    "data-testid": "datasource-modal--initial-state-view"
+  }, jsx("div", {
+    css: svgAndTextsWrapperStyles
+  }, icon, jsx("div", {
+    css: searchTitleStyles
+  }, showBeta && jsx("div", {
+    css: betaTagStyles
+  }, jsx(Lozenge, {
+    appearance: "new"
+  }, jsx(FormattedMessage, initialStateViewMessages.beta))), formatMessage(title)), jsx("div", {
+    css: mainTextStyles
+  }, formatMessage(description)), learnMoreLink && jsx("a", {
+    href: learnMoreLink.href,
+    target: "_blank",
+    css: learnMoreLinkStyles
+  }, formatMessage(learnMoreLink.text))));
+};

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

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