@atlaskit/link-datasource 1.24.4 → 1.24.6

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

@@ -34,30 +34,27 @@ var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
-var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
+var _getAvailableSites = require("../../../services/getAvailableSites");
 var _accessRequired = require("../../common/error-state/access-required");
+var _messages = require("../../common/error-state/messages");
 var _modalLoadingError = require("../../common/error-state/modal-loading-error");
 var _noInstances = require("../../common/error-state/no-instances");
 var _noResults = require("../../common/error-state/no-results");
+var _initialStateView = require("../../common/initial-state-view");
+var _messages2 = require("../../common/initial-state-view/messages");
+var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
 var _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
 var _ui = require("../basic-filters/ui");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
-var _initialStateView = require("../initial-state-view");
 var _jiraSearchContainer = require("../jira-search-container");
-var _siteSelector = require("../site-selector");
-var _displayViewDropDown = require("./display-view-dropdown/display-view-drop-down");
-var _messages = require("./messages");
+var _jiraDisplayViewDropDown = require("./jira-display-view-dropdown/jira-display-view-drop-down");
+var _jiraIssuesInitialStateSvg = require("./jira-issues-initial-state-svg");
+var _messages3 = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /** @jsx jsx */
-var dropdownContainerStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  gap: "var(--ds-space-100, 0.5rem)",
-  minHeight: '40px' // to prevent vertical shifting when site selector pops in
-});
 var tableContainerStyles = (0, _react2.css)({
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
   borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
@@ -94,6 +91,7 @@ var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   }
   return itemCount === 1 ? _types.DatasourceDisplay.INLINE : _types.DatasourceDisplay.DATASOURCE_INLINE;
 };
+var 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.
@@ -264,7 +262,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return (0, _getAvailableJiraSites.getAvailableJiraSites)();
+              return (0, _getAvailableSites.getAvailableSites)('jira');
             case 2:
               jiraSites = _context.sent;
               sortedAvailableSites = (0, _toConsumableArray2.default)(jiraSites).sort(function (a, b) {
@@ -387,7 +385,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     // 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
     var upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    var upToDateJqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(upToDateJql));
+    var upToDateJqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(upToDateJql) : encodeURI(upToDateJql));
     var filterSelectionCount = _ui.availableBasicFilterTypes.reduce(function (current, filter) {
       var _basicFilterSelection;
       return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, "".concat(filter, "BasicFilterSelectionCount"), ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0));
@@ -480,7 +478,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     return (0, _react2.jsx)("div", {
       css: [tableContainerStyles, contentContainerStyles]
     }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
-      testId: "jira-jql-datasource-table",
+      testId: "jira-datasource-table",
       status: status,
       columns: columns,
       items: responseItems,
@@ -507,15 +505,15 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       return (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
       }, (0, _react2.jsx)("span", {
-        "data-testid": "jira-jql-datasource-modal--smart-card-placeholder",
+        "data-testid": "jira-datasource-modal--smart-card-placeholder",
         css: placeholderSmartLinkStyles
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.issuesCountSmartCardPlaceholderText)));
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
       var url;
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
         url = retrieveUrlForSmartCardRender();
       } else {
-        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURI(jql));
+        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql));
       }
       return (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
@@ -541,29 +539,36 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       return (0, _react2.jsx)("div", {
         css: [contentContainerStyles, !!jql && tableContainerStyles]
       }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state"
+        testId: "jira-datasource-modal--empty-state"
       }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {
-        searchMethod: currentSearchMethod
+        showBeta: !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.show-jlol-basic-filters'),
+        icon: (0, _react2.jsx)(_jiraIssuesInitialStateSvg.JiraInitialStateSVG, null),
+        title: _messages3.modalMessages.searchJiraTitle,
+        description: currentSearchMethod === 'jql' ? _messages2.initialStateViewMessages.searchDescriptionForJQLSearch : _messages2.initialStateViewMessages.searchDescriptionForBasicSearch,
+        learnMoreLink: currentSearchMethod === 'jql' ? {
+          href: jqlSupportDocumentLink,
+          text: _messages2.initialStateViewMessages.learnMoreLink
+        } : undefined
       }));
     }
     return issueLikeDataTableView;
   }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages3.modalMessages.insertIssuesTitleManySites : _messages3.modalMessages.insertIssuesTitle;
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
   }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
-    testId: "jira-jql-datasource-modal",
+    testId: "jira-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)("div", {
-    css: dropdownContainerStyles
-  }, availableSites && availableSites.length > 1 ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitleManySites), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_siteSelector.SiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite,
-    testId: "jira-jql-datasource-modal--site-selector"
-  })) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle))), !hasNoJiraSites && (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
+    selectedSite: selectedJiraSite,
+    testId: "jira-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoJiraSites && (0, _react2.jsx)(_jiraDisplayViewDropDown.JiraDisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoJiraSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {
@@ -575,8 +580,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     initialSearchMethod: initialSearchMethod,
     onSearchMethodChange: setCurrentSearchMethod,
     site: selectedJiraSite
-  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, null)), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
-    "data-testid": "jira-jql-datasource-modal-total-issues-count",
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
+    title: _messages.loadingErrorMessages.noAccessToJiraSitesTitle,
+    description: _messages.loadingErrorMessages.noAccessToJiraSitesDescription,
+    testId: "no-jira-instances-content"
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
+    "data-testid": "jira-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, (0, _react2.jsx)(_linkUrl.default, {
     href: jqlUrl,
@@ -587,19 +596,19 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     }
   }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
     value: totalCount
-  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.modalMessages.issueText, {
+  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages3.modalMessages.issueText, {
     values: {
       totalCount: totalCount
     }
   })))), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
     onClick: onCancelClick
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.cancelButtonText)), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: "jira-jql-datasource-modal--insert-button"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText))))));
+    testId: "jira-datasource-modal--insert-button"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.insertIssuesButtonText))))));
 };
 var analyticsContextAttributes = {
   dataProvider: 'jira-issues'

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DisplayViewDropDown = void 0;
+exports.JiraDisplayViewDropDown = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
@@ -35,7 +35,7 @@ var InlineIcon = (0, _react.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'
 }));
-var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDropDown(_ref) {
+var JiraDisplayViewDropDown = exports.JiraDisplayViewDropDown = function JiraDisplayViewDropDown(_ref) {
   var onViewModeChange = _ref.onViewModeChange,
     viewMode = _ref.viewMode;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -43,7 +43,7 @@ var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDrop
   var triggerText = viewMode === 'issue' ? formatMessage(_messages.modalMessages.tableViewModeLabel) : formatMessage(_messages.modalMessages.inlineLinkViewModeLabel);
   return (0, _react.jsx)(_dropdownMenu.default, {
     trigger: triggerText,
-    testId: "jira-jql-datasource-modal--view-drop-down"
+    testId: "jira-datasource-modal--view-drop-down"
   }, (0, _react.jsx)(_primitives.Box, {
     xcss: dropDownItemGroupStyles
   }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react.jsx)(_dropdownMenu.DropdownItem, {

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

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InitialStateSVG = void 0;
+exports.JiraInitialStateSVG = void 0;
 var _react = _interopRequireDefault(require("react"));
-var InitialStateSVG = exports.InitialStateSVG = function InitialStateSVG() {
+var JiraInitialStateSVG = exports.JiraInitialStateSVG = function JiraInitialStateSVG() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "188",
     height: "112",

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

@@ -55,5 +55,71 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.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/es2019/common/types.js

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

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

@@ -1,4 +1,4 @@
-export const getAvailableJiraSites = async () => {
+export const getAvailableSites = async product => {
   const requestConfig = {
     method: 'POST',
     credentials: 'include',
@@ -8,7 +8,7 @@ export const getAvailableJiraSites = async () => {
       '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']
     })
   };
   const response = await fetch(`/gateway/api/available-sites`, requestConfig);

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

@@ -14,9 +14,7 @@ const svgAndTextsWrapperStyles = css({
   alignSelf: 'center'
 });
 const 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/es2019/ui/common/error-state/access-required.js

@@ -10,8 +10,7 @@ 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)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 const descriptionMessageStyles = css({
   display: 'flex',

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

@@ -18,8 +18,7 @@ const errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 const 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)"
 });
 const errorDescriptionStyles = css({
   margin: 0
@@ -37,7 +36,7 @@ export const LoadingError = ({
   }, [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/es2019/ui/common/error-state/messages.js

@@ -1,55 +1,111 @@
 import { defineMessages } from 'react-intl-next';
 export const 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/es2019/ui/common/error-state/modal-loading-error.js

@@ -18,8 +18,7 @@ const errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 const 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)"
 });
 const errorDescriptionStyles = css({
   margin: 0
@@ -37,7 +36,7 @@ export const ModalLoadingError = ({
   }, [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/es2019/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';
 const 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)"
 });
 const descriptionStyles = css({
@@ -15,13 +13,22 @@ const descriptionStyles = css({
 const containerStyles = xcss({
   marginTop: '60px'
 });
-export const NoInstancesView = () => jsx(Flex, {
-  testId: "no-jira-instances-content",
-  direction: "column",
-  alignItems: "center",
-  xcss: containerStyles
-}, jsx(NoInstancesSvg, null), jsx("span", {
-  css: titleStyles
-}, jsx(FormattedMessage, loadingErrorMessages.noAccessToJiraSitesTitle)), jsx("span", {
-  css: descriptionStyles
-}, jsx(FormattedMessage, loadingErrorMessages.noAccessToJiraSitesDescription)));
+export const NoInstancesView = ({
+  title,
+  description,
+  testId
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return jsx(Flex, {
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    xcss: containerStyles
+  }, jsx(NoInstancesSvg, null), jsx("span", {
+    css: titleStyles
+  }, formatMessage(title)), jsx("span", {
+    css: descriptionStyles
+  }, formatMessage(description)));
+};

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

@@ -17,8 +17,7 @@ const noResultsMessageContainerStyles = css({
   placeItems: 'center'
 });
 const 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 const NoResults = ({
   onRefresh
@@ -31,7 +30,7 @@ export const NoResults = ({
   }, [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/es2019/ui/common/initial-state-view/index.js

@@ -0,0 +1,66 @@
+/** @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';
+const initialStateViewContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%'
+});
+const svgAndTextsWrapperStyles = css({
+  textAlign: 'center',
+  alignSelf: 'center',
+  paddingTop: "var(--ds-space-600, 48px)",
+  paddingBottom: "var(--ds-space-600, 48px)"
+});
+const betaTagStyles = css({
+  display: 'flex'
+});
+const searchTitleStyles = css({
+  color: `var(--ds-text-subtlest, ${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)"
+});
+const mainTextStyles = css({
+  color: `var(--ds-text-subtlest, ${N300})`
+});
+const learnMoreLinkStyles = css({
+  paddingTop: "var(--ds-space-200, 16px)",
+  display: 'inline-block'
+});
+export const InitialStateView = ({
+  icon,
+  showBeta = false,
+  title,
+  description,
+  learnMoreLink
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  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))));
+};