@atlaskit/link-datasource 0.21.2 → 0.23.0

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

@@ -8,6 +8,9 @@ import { basicSearchInputMessages } from './messages';
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
+const formStyles = css({
+  flex: 1
+});
 export const BasicSearchInput = ({
   isDisabled,
   isSearching,
@@ -19,7 +22,14 @@ export const BasicSearchInput = ({
   const {
     formatMessage
   } = useIntl();
-  return jsx(Textfield, {
+  const handleFormSubmit = e => {
+    e.preventDefault();
+    onSearch(searchTerm);
+  };
+  return jsx("form", {
+    css: formStyles,
+    onSubmit: handleFormSubmit
+  }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
@@ -38,5 +48,5 @@ export const BasicSearchInput = ({
     placeholder: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
     testId: testId,
     value: searchTerm
-  });
+  }));
 };

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

@@ -16,6 +16,7 @@ const inputContainerStyles = css({
 const DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export const JiraSearchContainer = props => {
   const {
+    isSearching,
     parameters,
     onSearch
   } = props;
@@ -68,11 +69,13 @@ export const JiraSearchContainer = props => {
   return jsx("div", {
     css: inputContainerStyles
   }, currentSearchMode === basicModeValue && jsx(BasicSearchInput, {
+    isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), currentSearchMode === jqlModeValue && jsx(JiraJQLEditor, {
     cloudId: cloudId || '',
+    isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql

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

@@ -6,6 +6,7 @@ import { makeGetJqlSuggestionsData } from '../../../services/makeGetJqlSuggestio
 export const JiraJQLEditor = props => {
   const {
     cloudId,
+    isSearching,
     onChange,
     onSearch,
     query
@@ -27,6 +28,7 @@ export const JiraJQLEditor = props => {
     autocompleteProvider: autocompleteProvider,
     onSearch: onSearch,
     onUpdate: onChange,
+    isSearching: isSearching,
     inputRef: inputRef,
     query: query
   });

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

@@ -8,6 +8,8 @@ import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition
 import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { NoResults } from '../../common/error-state/no-results';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { JiraSearchContainer } from '../jira-search-container';
@@ -19,6 +21,7 @@ const dropdownContainerStyles = css({
   gap: "var(--ds-space-100, 0.5rem)"
 });
 const contentContainerStyles = css({
+  display: 'grid',
   height: '420px',
   overflow: 'auto'
 });
@@ -34,6 +37,9 @@ const issueCountStyles = css({
   flex: 1,
   fontWeight: 600
 });
+const smartLinkContainerStyles = css({
+  paddingLeft: '1px'
+});
 export const JiraIssuesConfigModal = props => {
   const {
     datasourceId,
@@ -67,13 +73,18 @@ export const JiraIssuesConfigModal = props => {
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: visibleColumnKeys
   });
+  const {
+    formatMessage
+  } = useIntl();
+  const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
+  const isDisabled = !isParametersSet || status === 'rejected' || status === 'loading' || resolvedWithNoResults;
+  const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  const {
-    formatMessage
-  } = useIntl();
   useEffect(() => {
     const fetchSiteDisplayNames = async () => {
       const jiraSites = await getAvailableJiraSites();
@@ -81,6 +92,11 @@ export const JiraIssuesConfigModal = props => {
     };
     void fetchSiteDisplayNames();
   }, []);
+  useEffect(() => {
+    if (!cloudId && selectedJiraSite) {
+      setCloudId(selectedJiraSite.cloudId);
+    }
+  }, [cloudId, selectedJiraSite]);
   const onSearch = useCallback(newParameters => {
     setJql(newParameters.jql);
     reset();
@@ -89,12 +105,6 @@ export const JiraIssuesConfigModal = props => {
     setCloudId(site.cloudId);
     reset();
   }, [reset]);
-  const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
-  useEffect(() => {
-    if (!cloudId && selectedJiraSite) {
-      setCloudId(selectedJiraSite.cloudId);
-    }
-  }, [cloudId, selectedJiraSite]);
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
@@ -110,7 +120,7 @@ export const JiraIssuesConfigModal = props => {
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`
+          url: jqlUrl
         }
       });
     } else if (responseItems.length === 1 && firstIssueUrl) {
@@ -141,7 +151,7 @@ export const JiraIssuesConfigModal = props => {
         }
       });
     }
-  }, [isParametersSet, jql, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
+  }, [isParametersSet, jql, jqlUrl, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
   const handleViewModeChange = selectedMode => {
     setCurrentViewMode(selectedMode);
   };
@@ -159,31 +169,44 @@ export const JiraIssuesConfigModal = props => {
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'empty' || !jql || !url) {
-      return jsx("span", {
+      return jsx("div", {
+        css: smartLinkContainerStyles
+      }, jsx("span", {
         "data-testid": `jira-jql-datasource-modal--smart-card-placeholder`,
         css: placeholderSmartLinkStyles
-      }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText));
+      }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
       const urlWithEncodedJql = `${url}/issues/?jql=${encodeURI(jql)}`;
-      return jsx(LinkRenderType, {
+      return jsx("div", {
+        css: smartLinkContainerStyles
+      }, jsx(LinkRenderType, {
         url: urlWithEncodedJql
-      });
+      }));
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
   const renderIssuesModeContent = useCallback(() => {
-    if (status === 'empty' || columns.length === 0) {
+    if (status === 'rejected' && jqlUrl) {
+      return jsx(ModalLoadingError, {
+        url: jqlUrl
+      });
+    } else if (resolvedWithNoResults) {
+      return jsx(NoResults, null);
+      // persist the empty state when making the initial /data request which contains the columns
+    } else if (status === 'empty' || !columns.length) {
       return jsx(EmptyState, {
         testId: `jira-jql-datasource-modal--empty-state`
       });
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
-      return jsx(LinkRenderType, {
+      return jsx("div", {
+        css: smartLinkContainerStyles
+      }, jsx(LinkRenderType, {
         url: firstIssueUrl
-      });
+      }));
     }
     return issueLikeDataTableView;
-  }, [columns.length, issueLikeDataTableView, responseItems.length, retrieveUrlForSmartCardRender, status]);
+  }, [status, columns.length, resolvedWithNoResults, jqlUrl, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView]);
   return jsx(IntlProvider, {
     locale: "en"
   }, jsx(ModalTransition, null, jsx(Modal, {
@@ -214,11 +237,12 @@ export const JiraIssuesConfigModal = props => {
     onOptionValueChange: handleViewModeChange,
     selectedOptionValue: currentViewMode
   })), jsx(ModalBody, null, jsx(JiraSearchContainer, {
+    isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
   }), jsx("div", {
     css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, !!totalCount && currentViewMode === 'issue' && jsx("div", {
+  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(FormattedNumber, {
@@ -233,7 +257,7 @@ export const JiraIssuesConfigModal = props => {
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet || status === 'loading',
+    isDisabled: isDisabled,
     testId: 'jira-jql-datasource-modal--insert-button'
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.21.2",
+	"version": "0.23.0",
 	"sideEffects": false
 }

package/dist/esm/hooks/useDatasourceTableState.js

@@ -101,7 +101,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       _yield$getDatasourceD,
       data,
       nextPageCursor,
-      totalCount,
+      _totalCount,
       schema,
       _args2 = arguments;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -123,15 +123,16 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
             includeSchema: isSchemaFromData
           };
           setStatus('loading');
-          _context2.next = 8;
+          _context2.prev = 6;
+          _context2.next = 9;
           return getDatasourceData(datasourceId, datasourceDataRequest);
-        case 8:
+        case 9:
           _yield$getDatasourceD = _context2.sent;
           data = _yield$getDatasourceD.data;
           nextPageCursor = _yield$getDatasourceD.nextPageCursor;
-          totalCount = _yield$getDatasourceD.totalCount;
+          _totalCount = _yield$getDatasourceD.totalCount;
           schema = _yield$getDatasourceD.schema;
-          setTotalCount(totalCount);
+          setTotalCount(_totalCount);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
             if (shouldRequestFirstPage) {
@@ -147,11 +148,17 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           if (isSchemaFromData && schema) {
             applySchemaProperties(schema.properties);
           }
-        case 20:
+          _context2.next = 26;
+          break;
+        case 23:
+          _context2.prev = 23;
+          _context2.t0 = _context2["catch"](6);
+          setStatus('rejected');
+        case 26:
         case "end":
           return _context2.stop();
       }
-    }, _callee2);
+    }, _callee2, null, [[6, 23]]);
   })), [parameters, fieldKeys, getDatasourceData, datasourceId, nextCursor, applySchemaProperties]);
   var reset = useCallback(function () {
     setStatus('empty');

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

@@ -0,0 +1,79 @@
+import React from 'react';
+export var LoadingErrorSVG = function LoadingErrorSVG() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "92",
+    height: "124",
+    viewBox: "0 0 92 124",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_4923_331519)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "91",
+    height: "124",
+    transform: "translate(0.5)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M64.164 91.4343L59.8759 87.2682L54.1057 93.2511L58.3937 97.4172C59.4876 98.482 60.2588 99.8323 60.6198 101.32C60.9808 102.807 61.7519 104.158 62.8458 105.222L80.2385 122.123C82.8748 124.681 87.0808 124.615 89.6295 121.969C92.1783 119.323 92.1126 115.102 89.4764 112.545L72.0837 95.6443C70.9898 94.5794 69.6169 93.8494 68.1238 93.5365C66.6307 93.2291 65.2578 92.4991 64.164 91.4343Z",
+    fill: "url(#paint0_linear_4923_331519)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M67.9487 93.4981C66.5267 93.1688 65.214 92.4552 64.1639 91.4343L62.8567 90.1663C61.2104 88.5691 58.5851 88.6075 56.988 90.2597C55.3964 91.9118 55.4347 94.5465 57.081 96.1493L58.3882 97.4172C59.4383 98.4381 60.1876 99.7225 60.565 101.139C61.9707 100.068 63.3052 98.8827 64.5577 97.5873C65.7993 96.3029 66.9314 94.9307 67.9487 93.4981Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35.7559 104.915C26.4852 105.063 17.7123 101.583 11.0506 95.1119C-2.69953 81.7573 -3.05504 59.6645 10.252 45.8654C16.7005 39.1799 25.3585 35.4145 34.6292 35.2663C43.8998 35.1181 52.6727 38.598 59.3345 45.0695C65.9962 51.5409 69.7482 60.2298 69.8959 69.528C70.0436 78.8263 66.576 87.636 60.1275 94.3215C53.6791 101.001 45.021 104.767 35.7559 104.915ZM34.7604 43.5765C27.7049 43.6917 21.1143 46.557 16.2027 51.6452C6.06793 62.151 6.3414 78.9745 16.8098 89.1454C21.88 94.0745 28.5636 96.7201 35.6191 96.6103C42.6747 96.4951 49.2653 93.6299 54.1768 88.5416C59.0884 83.4534 61.7246 76.746 61.6098 69.6653C61.4949 62.5846 58.6399 55.9704 53.5697 51.0414C48.4996 46.1124 41.8214 43.4612 34.7604 43.5765Z",
+    fill: "url(#paint1_linear_4923_331519)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.9087 61.893L44.3536 58.391C43.741 57.7873 42.762 57.7982 42.1658 58.413L35.3783 65.351L28.465 58.5392C27.8524 57.9355 26.8734 57.9464 26.2772 58.5612L22.7877 62.129C22.1861 62.7437 22.197 63.7263 22.8096 64.3245L29.7229 71.1363L22.9354 78.0743C22.3338 78.689 22.3447 79.6715 22.9573 80.2698L26.5124 83.7718C27.125 84.3755 28.104 84.3646 28.7002 83.7498L35.4877 76.8118L42.401 83.6236C43.0136 84.2273 43.9926 84.2164 44.5888 83.6016L48.0783 80.0338C48.6799 79.4191 48.669 78.4365 48.0564 77.8382L41.1376 71.0265L47.9251 64.0885C48.5268 63.4793 48.5213 62.4967 47.9087 61.893Z",
+    fill: "#C1C7D0"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M39.3984 15.2317L34.1478 0.236014C34.0274 -0.115276 33.5188 -0.0548982 33.475 0.312859L31.7795 14.8475L28.4322 14.4523C28.1752 14.4248 27.9783 14.6719 28.0658 14.9134L33.3164 29.9091C33.4367 30.2604 33.9454 30.2 33.9891 29.8322L35.6847 15.2976L39.0319 15.6928C39.2835 15.7257 39.4804 15.4732 39.3984 15.2317Z",
+    fill: "#C1C7D0"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22.8754 24.7605L16.3504 20.287C16.2137 20.1937 16.0496 20.3474 16.1316 20.4901L19.7195 26.8188L18.2537 27.6586C18.1553 27.7135 18.1498 27.8562 18.2428 27.9166L24.7678 32.3901C24.9045 32.4834 25.0686 32.3297 24.9866 32.187L21.3987 25.8583L22.8645 25.0185C22.9629 24.9636 22.9684 24.8263 22.8754 24.7605Z",
+    fill: "#C1C7D0"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M46.4539 32.1266C46.3937 32.1266 46.339 32.1156 46.2789 32.0992C46.0109 32.0113 45.8577 31.7314 45.9179 31.457C45.7812 31.1606 44.7912 30.5513 44.1896 30.1835C42.8332 29.3492 41.6627 28.6302 41.9799 27.6806C42.2971 26.7255 43.6645 26.8627 45.2452 27.0164C45.8851 27.0823 46.9188 27.1811 47.3017 27.0768C47.0555 26.7585 46.175 26.2205 45.6226 25.8802C44.2661 25.0459 43.0957 24.3324 43.4129 23.3773C43.7301 22.4222 45.0975 22.5594 46.6781 22.7131C47.3181 22.779 48.3463 22.8778 48.7346 22.7735C48.4885 22.4552 47.6079 21.9172 47.0555 21.5769C45.6991 20.7426 44.5287 20.0291 44.8459 19.074C45.1631 18.1244 46.5305 18.2561 48.1111 18.4098C48.8112 18.4757 49.9653 18.591 50.2551 18.4373C50.37 18.1848 50.6599 18.053 50.9279 18.1464C51.2123 18.2452 51.3709 18.5525 51.2724 18.8434C50.9552 19.793 49.5879 19.6613 48.0072 19.5021C47.3673 19.4362 46.3336 19.3374 45.9507 19.4417C46.1968 19.7601 47.0774 20.298 47.6298 20.6383C48.9862 21.4726 50.1567 22.1862 49.8395 23.1413C49.5222 24.0908 48.1549 23.9591 46.5742 23.8054C45.9343 23.7396 44.9006 23.6408 44.5177 23.745C44.7639 24.0634 45.6444 24.6013 46.1968 24.9416C47.5533 25.7759 48.7237 26.4895 48.4065 27.4446C48.0893 28.3996 46.7219 28.2624 45.1412 28.1087C44.5013 28.0429 43.4676 27.9441 43.0847 28.0484C43.3309 28.3667 44.2114 28.9101 44.7639 29.2449C46.1203 30.0792 47.2907 30.7983 46.9735 31.7479C46.8969 31.9784 46.6836 32.1266 46.4539 32.1266Z",
+    fill: "#DFE1E5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M54.1988 34.9369C54.0073 34.9369 53.8214 34.8381 53.7229 34.657C53.1213 33.5921 52.4431 32.3846 53.165 31.7039C53.8925 31.0233 55.052 31.7918 56.2826 32.6096C56.8022 32.9554 57.639 33.5098 58.0109 33.5866C57.9617 33.2134 57.464 32.3352 57.1577 31.7918C56.4303 30.5074 55.7411 29.2943 56.4686 28.6082C57.196 27.9276 58.3555 28.696 59.5861 29.5139C60.144 29.8871 61.0683 30.4964 61.3856 30.4964C61.3856 30.4964 61.3856 30.4964 61.391 30.4964C61.6098 30.3262 61.9325 30.3482 62.1239 30.5568C62.3318 30.7763 62.3208 31.1276 62.0966 31.3307C61.3691 32.0168 60.2096 31.2429 58.979 30.425C58.4594 30.0792 57.6226 29.5248 57.2507 29.448C57.2999 29.8212 57.7976 30.6995 58.1039 31.2429C58.8313 32.5273 59.5205 33.7403 58.7931 34.4264C58.0656 35.1071 56.9061 34.3386 55.6755 33.5208C55.1559 33.175 54.3191 32.6206 53.9526 32.5437C54.0019 32.917 54.4996 33.8007 54.6746 34.1081C54.8223 34.3716 54.7293 34.7064 54.4668 34.8546C54.3847 34.915 54.2917 34.9369 54.1988 34.9369Z",
+    fill: "#DFE1E5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.8838 37.105C13.84 37.105 13.8017 37.105 13.758 37.0995C12.768 36.9788 12.6149 35.5901 12.4508 34.1246C12.3797 33.5043 12.2703 32.4998 12.0898 32.1705C11.8327 32.4504 11.4827 33.3945 11.2694 33.9818C10.7553 35.3705 10.263 36.6769 9.28399 36.5561C8.29402 36.4354 8.14088 35.0467 7.97133 33.5812C7.89476 32.9115 7.76896 31.7973 7.56659 31.5612C7.29312 31.5009 7.10716 31.2429 7.13998 30.9575C7.17827 30.6556 7.44627 30.447 7.74708 30.4799C8.73705 30.6007 8.89019 31.9894 9.05974 33.4604C9.13084 34.0806 9.24023 35.0851 9.42619 35.4144C9.68325 35.1345 10.0333 34.1904 10.2466 33.6031C10.7607 32.2199 11.2475 30.919 12.232 31.0288C13.222 31.1496 13.3751 32.5383 13.5447 34.0093C13.6158 34.6295 13.7251 35.6285 13.9056 35.9633C14.1572 35.6834 14.5127 34.7338 14.6385 34.399C14.7425 34.1136 15.0597 33.9709 15.3441 34.0752C15.6285 34.1794 15.7707 34.4978 15.6668 34.7832C15.2402 35.87 14.7807 37.105 13.8838 37.105Z",
+    fill: "#DFE1E5"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "paint0_linear_4923_331519",
+    x1: "68.4958",
+    y1: "110.901",
+    x2: "78.201",
+    y2: "101.23",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "1",
+    stopColor: "#DFE1E5",
+    stopOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "paint1_linear_4923_331519",
+    x1: "10.6494",
+    y1: "94.7201",
+    x2: "59.9078",
+    y2: "45.6368",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0.5572",
+    stopColor: "#C1C7D0"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "0.966",
+    stopColor: "#E9EBEF",
+    stopOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_4923_331519"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "91",
+    height: "124",
+    fill: "white",
+    transform: "translate(0.5)"
+  }))));
+};

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

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import { LoadingErrorSVG } from './loading-error-svg';
+import { loadingErrorMessages } from './messages';
+var errorContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-200, 16px)",
+  placeItems: 'center',
+  placeSelf: 'center'
+});
+var errorMessageContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-100, 8px)",
+  placeItems: 'center'
+});
+var errorMessageStyles = css({
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  fontSize: "var(--ds-font-size-200, 16px)"
+});
+var errorDescriptionStyles = css({
+  margin: 0
+});
+export var LoadingError = function LoadingError(_ref) {
+  var onRefresh = _ref.onRefresh;
+  return jsx("div", {
+    css: errorContainerStyles,
+    "data-testid": "jira-jql-datasource--loading-error"
+  }, jsx(LoadingErrorSVG, null), jsx("div", {
+    css: errorMessageContainerStyles
+  }, jsx("span", {
+    css: errorMessageStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadIssues)), jsx("p", {
+    css: errorDescriptionStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
+    appearance: "primary",
+    onClick: onRefresh
+  }, jsx(FormattedMessage, loadingErrorMessages.refresh))));
+};

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

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export var loadingErrorMessages = defineMessages({
+  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.'
+  },
+  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.'
+  },
+  noResultsFound: {
+    id: 'linkDataSource.jira-issues.noResultsFound',
+    description: 'Status message letting the user know their query did not have any results',
+    defaultMessage: 'No results found'
+  },
+  openInProject: {
+    id: 'linkDataSource.jira-issues.openInProject',
+    description: 'Prompt text that allows the user to visit the project page for the selected query',
+    defaultMessage: 'Open in project'
+  },
+  refresh: {
+    id: 'linkDataSource.jira-issues.refresh',
+    description: 'Button text to allow the user to refresh the table to see results',
+    defaultMessage: 'Refresh'
+  },
+  unableToLoadIssues: {
+    id: 'linkDataSource.jira-issues.unableToLoadIssues',
+    description: 'Error state message letting the user know we were unable the load the requested list of issues',
+    defaultMessage: 'Unable to load issues'
+  },
+  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'
+  }
+});

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

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { LoadingErrorSVG } from './loading-error-svg';
+import { loadingErrorMessages } from './messages';
+var errorContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-300, 24px)",
+  placeItems: 'center',
+  placeSelf: 'center'
+});
+var errorMessageContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-100, 8px)",
+  placeItems: 'center'
+});
+var errorMessageStyles = css({
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  fontSize: "var(--ds-font-size-200, 16px)"
+});
+var errorDescriptionStyles = css({
+  margin: 0
+});
+export var ModalLoadingError = function ModalLoadingError(_ref) {
+  var url = _ref.url;
+  return jsx("div", {
+    css: errorContainerStyles,
+    "data-testid": "jira-jql-datasource-modal--loading-error"
+  }, jsx(LoadingErrorSVG, null), jsx("div", {
+    css: errorMessageContainerStyles
+  }, jsx("span", {
+    css: errorMessageStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
+    css: errorDescriptionStyles
+  }, jsx(FormattedMessage, _extends({}, loadingErrorMessages.checkConnectionWithSource, {
+    values: {
+      a: function a(chunk) {
+        return jsx("a", {
+          href: url
+        }, chunk);
+      }
+    }
+  })))));
+};