@atlaskit/link-datasource 1.18.0 → 1.19.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JiraSearchContainer = exports.ALLOWED_ORDER_BY_KEYS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -15,6 +16,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../../analytics");
 var _basicFilters = require("../basic-filters");
+var _useHydrateJqlQuery2 = require("../basic-filters/hooks/useHydrateJqlQuery");
 var _asyncPopupSelect = require("../basic-filters/ui/async-popup-select");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _basicSearchInput = require("../basic-search-input");
@@ -24,8 +26,8 @@ var _buildJQL = require("./buildJQL");
 var _messages = require("./messages");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsx jsx */
-
+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 inputContainerStyles = (0, _react2.css)({
   alignItems: 'baseline',
   display: 'flex',
@@ -76,8 +78,18 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     setOrderDirection = _useState12[1];
   var _useState13 = (0, _react.useState)({}),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    filters = _useState14[0],
-    setFilters = _useState14[1];
+    filterSelections = _useState14[0],
+    setFilterSelections = _useState14[1];
+  var showBasicFilters = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.show-jlol-basic-filters')) {
+      return true;
+    }
+    return false;
+  }, []);
+  var _useHydrateJqlQuery = (0, _useHydrateJqlQuery2.useHydrateJqlQuery)(cloudId || '', jql),
+    hydratedOptions = _useHydrateJqlQuery.hydratedOptions,
+    fetchHydratedJqlOptions = _useHydrateJqlQuery.fetchHydratedJqlOptions,
+    basicFilterHydrationStatus = _useHydrateJqlQuery.status;
   var onSearchMethodChange = (0, _react.useCallback)(function (searchMethod) {
     onSearchMethodChangeCallback(searchMethod);
     setCurrentSearchMethod(searchMethod);
@@ -87,11 +99,11 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     setBasicSearchTerm(rawSearch);
     setJql((0, _buildJQL.buildJQL)({
       rawSearch: rawSearch,
-      filterValues: filters,
+      filterValues: filterSelections,
       orderDirection: orderDirection,
       orderKey: orderKey
     }));
-  }, [filters, orderDirection, orderKey]);
+  }, [filterSelections, orderDirection, orderKey]);
   var onQueryChange = (0, _react.useCallback)(function (query) {
     var _query$split$map$filt, _fragments$at, _fragments$at2, _fragments$at3;
     // determine if order keys have been set so they can be saved and persisted when changes occur in basic search
@@ -113,13 +125,17 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onSearch({
       jql: jql
     }, currentSearchMethod);
-    setIsComplexQuery((0, _isQueryTooComplex.isQueryTooComplex)(jql));
     if (currentSearchMethod === 'basic') {
       fireEvent('ui.form.submitted.basicSearch', {});
     } else if (currentSearchMethod === 'jql') {
       fireEvent('ui.jqlEditor.searched', {});
+      var isCurrentQueryComplex = (0, _isQueryTooComplex.isQueryTooComplex)(jql);
+      setIsComplexQuery(isCurrentQueryComplex);
+      if (showBasicFilters && !isCurrentQueryComplex) {
+        fetchHydratedJqlOptions();
+      }
     }
-  }, [currentSearchMethod, fireEvent, jql, onSearch]);
+  }, [currentSearchMethod, fetchHydratedJqlOptions, fireEvent, jql, onSearch, showBasicFilters]);
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (filterValues) {
       var jqlWithFilterValues = (0, _buildJQL.buildJQL)({
         rawSearch: basicSearchTerm,
@@ -135,21 +151,35 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
   var handleBasicFilterSelectionChange = (0, _react.useCallback)(function (filterValues) {
-    setFilters(filterValues);
+    setFilterSelections(filterValues);
     debouncedBasicFilterSelectionChange(filterValues);
   }, [debouncedBasicFilterSelectionChange]);
   (0, _react.useEffect)(function () {
-    setIsComplexQuery((0, _isQueryTooComplex.isQueryTooComplex)(jql));
+    var isCurrentQueryComplex = (0, _isQueryTooComplex.isQueryTooComplex)(jql);
+    setIsComplexQuery(isCurrentQueryComplex);
+    if (showBasicFilters && !isCurrentQueryComplex && jql !== DEFAULT_JQL_QUERY) {
+      fetchHydratedJqlOptions();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var showBasicFilters = (0, _react.useMemo)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.show-jlol-basic-filters')) {
-      return true;
+  (0, _react.useEffect)(function () {
+    if (basicFilterHydrationStatus === 'resolved') {
+      setFilterSelections(hydratedOptions);
     }
-    return false;
-  }, []);
+  }, [hydratedOptions, basicFilterHydrationStatus]);
+  var handleSelectionChange = (0, _react.useCallback)(function (filterType, options) {
+    var updatedSelection = _objectSpread(_objectSpread({}, filterSelections), {}, (0, _defineProperty2.default)({}, filterType, options));
+    setFilterSelections(updatedSelection);
+    handleBasicFilterSelectionChange(updatedSelection);
+  }, [handleBasicFilterSelectionChange, filterSelections]);
+  var handleBasicFiltersReset = (0, _react.useCallback)(function () {
+    if (Object.keys(filterSelections).length > 0) {
+      setFilterSelections({});
+    }
+  }, [filterSelections]);
   return (0, _react2.jsx)("div", {
-    css: inputContainerStyles
+    css: inputContainerStyles,
+    "data-testid": "jira-search-container"
   }, currentSearchMethod === 'basic' && (0, _react2.jsx)(_primitives.Flex, {
     alignItems: "center",
     xcss: basicSearchInputContainerStyles
@@ -159,9 +189,11 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), showBasicFilters && (0, _react2.jsx)(_basicFilters.BasicFilters, {
-    jql: jql,
     cloudId: cloudId || '',
-    onChange: handleBasicFilterSelectionChange
+    onChange: handleSelectionChange,
+    selections: filterSelections,
+    onReset: handleBasicFiltersReset,
+    isJQLHydrating: basicFilterHydrationStatus === 'loading'
   })), currentSearchMethod === 'jql' && (0, _react2.jsx)(_jqlEditor.JiraJQLEditor, {
     cloudId: cloudId || '',
     isSearching: isSearching,

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

@@ -32,6 +32,7 @@ var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState")
 var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
 var _accessRequired = require("../../common/error-state/access-required");
 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 _issueLikeTable = require("../../issue-like-table");
 var _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
@@ -108,7 +109,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     initialParameters = props.parameters,
     urlBeingEdited = props.url,
     initialVisibleColumnKeys = props.visibleColumnKeys;
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     availableSites = _useState2[0],
     setAvailableSites = _useState2[1];
@@ -178,14 +179,14 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = (0, _react.useMemo)(function () {
     if (cloudId) {
-      return availableSites.find(function (jiraSite) {
+      return availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(function (jiraSite) {
         return jiraSite.cloudId === cloudId;
       });
     } else {
       var currentlyLoggedInSiteUrl = window.location.origin;
-      return availableSites.find(function (jiraSite) {
+      return (availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(function (jiraSite) {
         return jiraSite.url === currentlyLoggedInSiteUrl;
-      }) || availableSites[0];
+      })) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
   var analyticsPayload = (0, _react.useMemo)(function () {
@@ -199,6 +200,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
   var isDataReady = (visibleColumnKeys || []).length > 0;
+  var hasNoJiraSites = availableSites && availableSites.length === 0;
   (0, _react.useEffect)(function () {
     var shouldStartUfoExperience = status === 'loading';
     if (shouldStartUfoExperience) {
@@ -515,12 +517,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     shouldScrollInViewport: true
   }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)("div", {
     css: dropdownContainerStyles
-  }, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitleManySites), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
+  }, availableSites && availableSites.length > 1 ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitleManySites), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
     selectedJiraSite: selectedJiraSite,
     testId: "jira-jql-datasource-modal--site-selector"
-  })))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
+  })) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle))), !hasNoJiraSites && (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
     isCompact: true,
     options: [{
       label: formatMessage(_messages.modalMessages.issueViewModeLabel),
@@ -531,13 +533,13 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     }],
     onOptionValueChange: handleViewModeChange,
     selectedOptionValue: currentViewMode
-  })), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {
+  })), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoJiraSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch,
     initialSearchMethod: initialSearchMethod,
     onSearchMethodChange: setCurrentSearchMethod
-  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
+  }), 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",
     css: issueCountStyles
   }, (0, _react2.jsx)(_linkUrl.default, {
@@ -556,7 +558,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
   })))), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
     onClick: onCancelClick
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,

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

@@ -31,7 +31,7 @@ var JiraSiteSelector = exports.JiraSiteSelector = function JiraSiteSelector(prop
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var onChange = function onChange(newValue) {
-    var selectedSite = availableSites.find(function (site) {
+    var selectedSite = availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(function (site) {
       return site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value);
     });
     if (selectedSite) {
@@ -39,7 +39,7 @@ var JiraSiteSelector = exports.JiraSiteSelector = function JiraSiteSelector(prop
     }
   };
   var availableSitesOptions = (0, _react.useMemo)(function () {
-    return availableSites.map(function (site) {
+    return availableSites === null || availableSites === void 0 ? void 0 : availableSites.map(function (site) {
       return {
         label: site.displayName,
         value: site.cloudId
@@ -55,7 +55,7 @@ var JiraSiteSelector = exports.JiraSiteSelector = function JiraSiteSelector(prop
   }, (0, _react2.jsx)(_select.default, {
     css: selectStyles,
     classNamePrefix: testId,
-    isLoading: availableSites.length === 0,
+    isLoading: !availableSites,
     onChange: onChange,
     options: availableSitesOptions,
     placeholder: formatMessage(_messages.siteSelectorMessages.chooseSite),

package/dist/es2019/analytics/constants.js

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

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
 import { useDatasourceAnalyticsEvents } from '../analytics';
+import useErrorLogger from './useErrorLogger';
 export const useDatasourceTableState = ({
   datasourceId,
   parameters,
@@ -10,6 +11,9 @@ export const useDatasourceTableState = ({
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const {
+    captureError
+  } = useErrorLogger();
   const idFieldCount = 1;
   const keyFieldCount = 1;
   const [defaultVisibleColumnKeys, setDefaultVisibleColumnKeys] = useState([]);
@@ -54,13 +58,14 @@ export const useDatasourceTableState = ({
       const newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
       newColumns.length > 0 && setColumns([...columns, ...newColumns]);
     } catch (e) {
+      captureError('loadDatasourceDetails', e);
       if (e instanceof Response && (e.status === 401 || e.status === 403)) {
         setStatus('unauthorized');
         return;
       }
       setStatus('rejected');
     }
-  }, [columns, datasourceId, getDatasourceDetails, parameters]);
+  }, [captureError, columns, datasourceId, getDatasourceDetails, parameters]);
   const applySchemaProperties = useCallback((schema, fieldKeys) => {
     let {
       properties,
@@ -160,13 +165,14 @@ export const useDatasourceTableState = ({
       }
       setStatus('resolved');
     } catch (e) {
+      captureError('onNextPage', e);
       if (e instanceof Response && (e.status === 401 || e.status === 403)) {
         setStatus('unauthorized');
         return;
       }
       setStatus('rejected');
     }
-  }, [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
+  }, [captureError, parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
   const reset = useCallback(options => {
     setStatus('empty');
     setResponseItems([]);

package/dist/es2019/hooks/useErrorLogger.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { captureException } from '@atlaskit/linking-common/sentry';
+import { getTraceId } from '@atlaskit/linking-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useDatasourceAnalyticsEvents } from '../analytics';
+const getNetworkFields = error => {
+  return error instanceof Response ? {
+    traceId: getTraceId(error),
+    status: error.status
+  } : {
+    traceId: null,
+    status: null
+  };
+};
+const useErrorLogger = () => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+
+  /**
+   * Sentry is good because it can retrieve name, message, stacktrace of an Error. That's why we will send to Sentry only
+   * if an error is instance of `Error`. Sentry is also capable of some PII scrubbing of these risky fields.
+   *
+   * We will send to Splunk every single time, though, but we won't send PII risky fields.
+   */
+  const captureError = useCallback((errorLocation, error) => {
+    const {
+      traceId,
+      status
+    } = getNetworkFields(error);
+    fireEvent('operational.datasource.operationFailed', {
+      errorLocation,
+      traceId,
+      status
+    });
+    if (getBooleanFF('platform.linking-platform.datasources.enable-sentry-client') && error instanceof Error) {
+      captureException(error, 'link-datasource');
+    }
+  }, [fireEvent]);
+  return {
+    captureError
+  };
+};
+export default useErrorLogger;

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

@@ -44,5 +44,15 @@ export const loadingErrorMessages = defineMessages({
     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'
+  },
+  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"
+  },
+  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/ui/common/error-state/no-instances-svg.js

@@ -0,0 +1,147 @@
+import React from 'react';
+export const NoInstancesSvg = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "147",
+    height: "171",
+    viewBox: "0 0 147 171",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_1442_1679)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "146.22",
+    height: "169.36",
+    transform: "translate(0.0300293 0.875)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M110.62 170.234H97.46C96.31 170.234 95.38 169.304 95.38 168.154C95.38 167.004 96.31 166.074 97.46 166.074H110.62C111.77 166.074 112.7 167.004 112.7 168.154C112.7 169.304 111.77 170.234 110.62 170.234Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M85.24 170.234H72.08C70.93 170.234 70 169.304 70 168.154C70 167.004 70.93 166.074 72.08 166.074H85.24C86.39 166.074 87.32 167.004 87.32 168.154C87.32 169.304 86.39 170.234 85.24 170.234Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M59.86 170.234H46.71C45.56 170.234 44.63 169.304 44.63 168.154C44.63 167.004 45.56 166.074 46.71 166.074H59.87C61.02 166.074 61.95 167.004 61.95 168.154C61.95 169.304 61.01 170.234 59.86 170.234Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M34.49 170.234H21.33C20.18 170.234 19.25 169.304 19.25 168.154C19.25 167.004 20.18 166.074 21.33 166.074H34.49C35.64 166.074 36.57 167.004 36.57 168.154C36.57 169.304 35.64 170.234 34.49 170.234Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M9.11003 170.234H2.11003C0.960029 170.234 0.0300293 169.304 0.0300293 168.154V161.154C0.0300293 160.004 0.960029 159.074 2.11003 159.074C3.26003 159.074 4.19003 160.004 4.19003 161.154V166.074H9.11003C10.26 166.074 11.19 167.004 11.19 168.154C11.19 169.304 10.26 170.234 9.11003 170.234Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 149.954C0.960029 149.954 0.0300293 149.024 0.0300293 147.874V133.574C0.0300293 132.424 0.960029 131.494 2.11003 131.494C3.26003 131.494 4.19003 132.424 4.19003 133.574V147.874C4.19003 149.024 3.26003 149.954 2.11003 149.954Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 122.374C0.960029 122.374 0.0300293 121.444 0.0300293 120.294V105.994C0.0300293 104.844 0.960029 103.914 2.11003 103.914C3.26003 103.914 4.19003 104.844 4.19003 105.994V120.294C4.19003 121.444 3.26003 122.374 2.11003 122.374Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 94.7942C0.960029 94.7942 0.0300293 93.8542 0.0300293 92.7042V78.4042C0.0300293 77.2542 0.960029 76.3242 2.11003 76.3242C3.26003 76.3242 4.19003 77.2542 4.19003 78.4042V92.7042C4.19003 93.8542 3.26003 94.7942 2.11003 94.7942Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 67.2041C0.960029 67.2041 0.0300293 66.2741 0.0300293 65.1241V50.8241C0.0300293 49.6741 0.960029 48.7441 2.11003 48.7441C3.26003 48.7441 4.19003 49.6741 4.19003 50.8241V65.1241C4.19003 66.2741 3.26003 67.2041 2.11003 67.2041Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 39.6241C0.960029 39.6241 0.0300293 38.6841 0.0300293 37.5441V23.2441C0.0300293 22.0941 0.960029 21.1641 2.11003 21.1641C3.26003 21.1641 4.19003 22.0941 4.19003 23.2441V37.5441C4.19003 38.6841 3.26003 39.6241 2.11003 39.6241Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M2.11003 12.035C0.960029 12.035 0.0300293 11.105 0.0300293 9.955V2.955C0.0300293 1.805 0.960029 0.875 2.11003 0.875H9.11003C10.26 0.875 11.19 1.805 11.19 2.955C11.19 4.105 10.26 5.035 9.11003 5.035H4.19003V9.955C4.19003 11.105 3.26003 12.035 2.11003 12.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M110.6 5.035H97.44C96.29 5.035 95.36 4.105 95.36 2.955C95.36 1.805 96.29 0.875 97.44 0.875H110.6C111.75 0.875 112.68 1.805 112.68 2.955C112.68 4.105 111.74 5.035 110.6 5.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M85.22 5.035H72.07C70.92 5.035 69.99 4.105 69.99 2.955C69.99 1.805 70.92 0.875 72.07 0.875H85.23C86.38 0.875 87.31 1.805 87.31 2.955C87.31 4.105 86.37 5.035 85.22 5.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M59.85 5.035H46.7C45.55 5.035 44.62 4.105 44.62 2.955C44.62 1.805 45.55 0.875 46.7 0.875H59.86C61.01 0.875 61.94 1.805 61.94 2.955C61.94 4.105 61 5.035 59.85 5.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M34.48 5.035H21.33C20.18 5.035 19.25 4.105 19.25 2.955C19.25 1.805 20.18 0.875 21.33 0.875H34.49C35.64 0.875 36.57 1.805 36.57 2.955C36.57 4.105 35.63 5.035 34.48 5.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M129.81 12.035C128.66 12.035 127.73 11.105 127.73 9.955V5.035H122.81C121.66 5.035 120.73 4.105 120.73 2.955C120.73 1.805 121.66 0.875 122.81 0.875H129.81C130.96 0.875 131.89 1.805 131.89 2.955V9.955C131.89 11.105 130.96 12.035 129.81 12.035Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M129.83 122.374C128.68 122.374 127.75 121.444 127.75 120.294V105.994C127.75 104.844 128.68 103.914 129.83 103.914C130.98 103.914 131.91 104.844 131.91 105.994V120.294C131.91 121.444 130.98 122.374 129.83 122.374Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M129.82 94.7842C128.67 94.7842 127.74 93.8542 127.74 92.7042V78.4042C127.74 77.2542 128.67 76.3242 129.82 76.3242C130.97 76.3242 131.9 77.2542 131.9 78.4042V92.7042C131.91 93.8542 130.97 94.7842 129.82 94.7842Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M129.82 67.2041C128.67 67.2041 127.74 66.2741 127.74 65.1241V50.8241C127.74 49.6741 128.67 48.7441 129.82 48.7441C130.97 48.7441 131.9 49.6741 131.9 50.8241V65.1241C131.9 66.2741 130.97 67.2041 129.82 67.2041Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M129.82 39.6241C128.67 39.6241 127.74 38.6941 127.74 37.5441V23.2441C127.74 22.0941 128.67 21.1641 129.82 21.1641C130.97 21.1641 131.9 22.0941 131.9 23.2441V37.5441C131.9 38.6841 130.96 39.6241 129.82 39.6241Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M107.63 118.355L101.57 112.375L93.26 120.795L99.32 126.775C100.87 128.305 101.95 130.235 102.44 132.345C102.93 134.465 104.01 136.395 105.56 137.915L130.13 162.155C133.85 165.825 139.85 165.785 143.52 162.065C147.19 158.345 147.15 152.345 143.43 148.675L118.86 124.435C117.31 122.905 115.37 121.855 113.24 121.385C111.13 120.935 109.18 119.885 107.63 118.355Z",
+    fill: "#CFD4DB"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M107.63 118.355L105.79 116.535C103.46 114.235 99.72 114.265 97.42 116.595C95.12 118.925 95.15 122.665 97.48 124.965L99.32 126.785C100.87 128.315 101.95 130.245 102.44 132.355C102.93 134.475 104.01 136.405 105.56 137.925L130.13 162.165C133.85 165.835 139.85 165.795 143.52 162.075C147.19 158.355 147.15 152.355 143.43 148.685L118.86 124.445C117.31 122.915 115.37 121.865 113.24 121.395C111.13 120.935 109.18 119.885 107.63 118.355Z",
+    fill: "url(#paint0_linear_1442_1679)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M113 121.335C110.98 120.845 109.12 119.815 107.63 118.355L105.79 116.535C103.46 114.235 99.72 114.265 97.42 116.595C95.12 118.925 95.15 122.665 97.48 124.965L99.32 126.785C100.8 128.245 101.85 130.085 102.37 132.105C104.39 130.605 106.31 128.935 108.11 127.115C109.9 125.295 111.53 123.365 113 121.335Z",
+    fill: "#B3BAC5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M66.94 137.126C53.72 137.216 41.26 132.146 31.85 122.866C12.44 103.696 12.23 72.3057 31.39 52.8757C40.67 43.4657 53.07 38.2357 66.28 38.1457C79.5 38.0557 91.96 43.1257 101.37 52.4057C110.78 61.6857 116.01 74.0857 116.1 87.2957C116.19 100.506 111.12 112.976 101.84 122.386C92.55 131.806 80.16 137.036 66.94 137.126ZM39.8 61.1757C32.73 68.3357 28.88 77.8257 28.94 87.8857C29.08 108.656 46.09 125.446 66.87 125.316C76.93 125.246 86.37 121.266 93.44 114.106C100.51 106.946 104.37 97.4557 104.3 87.3957C104.23 77.3357 100.25 67.8957 93.09 60.8257C85.93 53.7557 76.44 49.8957 66.38 49.9657C56.3 50.0357 46.87 54.0157 39.8 61.1757Z",
+    fill: "url(#paint1_linear_1442_1679)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M84.27 75.5345L79.11 70.3345C78.35 69.5645 77.11 69.5645 76.34 70.3245L66.64 79.9545L57.03 70.2545C56.27 69.4845 55.03 69.4845 54.26 70.2445L49.06 75.4045C48.29 76.1645 48.29 77.4045 49.05 78.1745L58.68 87.8745L48.98 97.5045C48.21 98.2645 48.21 99.5045 48.97 100.275L54.13 105.475C54.89 106.245 56.13 106.245 56.9 105.485L66.6 95.8545L76.23 105.555C76.99 106.325 78.23 106.325 79 105.565L84.2 100.405C84.97 99.6445 84.97 98.4045 84.21 97.6345L74.58 87.9345L84.28 78.3045C85.03 77.5345 85.04 76.2945 84.27 75.5345Z",
+    fill: "#C1C7D0"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "paint0_linear_1442_1679",
+    x1: "95.4796",
+    y1: "139.562",
+    x2: "146.445",
+    y2: "140.204",
+    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_1442_1679",
+    x1: "31.1877",
+    y1: "122.181",
+    x2: "102.046",
+    y2: "53.0865",
+    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_1442_1679"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "146.22",
+    height: "169.36",
+    fill: "white",
+    transform: "translate(0.0300293 0.875)"
+  }))));
+};

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

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } 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)",
+  marginTop: "var(--ds-space-200, 16px)"
+});
+const descriptionStyles = css({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+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)));

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -20,6 +20,7 @@ const AsyncPopupSelect = ({
   filterType,
   cloudId,
   selection,
+  isJQLHydrating,
   onSelectionChange = () => {},
   onReset: resetSelection = () => {},
   isDisabled = false
@@ -151,7 +152,6 @@ const AsyncPopupSelect = ({
     }
   }, [selectedOptions, selection]);
   const filterOptionsLength = filterOptions.length;
-  const isJQLHydrating = false;
   const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/trigger.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
@@ -38,23 +38,17 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
   selectedOptions
 }, ref) => {
   const [firstOption] = selectedOptions || [];
-  const testId = `jlol-basic-filter-${filterType}-trigger`;
   const hasOptions = selectedOptions && selectedOptions.length > 0;
   const showButtonLoading = !isDisabled && isLoading;
-  if (showButtonLoading) {
-    return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
-      iconAfter: /*#__PURE__*/React.createElement(Spinner, {
-        size: 'xsmall'
-      }),
-      testId: testId
-    }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`])));
-  }
-  return /*#__PURE__*/React.createElement(Button, {
-    ref: ref,
+  const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+      size: 'xsmall'
+    })
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]))), [filterType]);
+  const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
-    testId: testId,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })
@@ -65,6 +59,15 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
-  }, "+", selectedOptions.length - 1))));
+  }, "+", selectedOptions.length - 1)))), [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions]);
+
+  /**
+   * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
+   * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
+   */
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    testId: `jlol-basic-filter-${filterType}-trigger`
+  }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
 export default PopupTrigger;