@atlaskit/link-datasource 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-datasource
 
+## 1.19.0
+
+### Minor Changes
+
+- [#43353](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43353) [`6f08647add6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f08647add6) - [ux] Adds new UI in modal for case where user has no Jira instances connected to their account.
+
+### Patch Changes
+
+- [#43536](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43536) [`a55b74ae54e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a55b74ae54e) - Basic filter selection state has been moved to the jira-search-container component. Basic filter select labels will now be hydrated on the initial opening of the modal, and on any following searches where the JQL is deemed to not be complex.
+- Updated dependencies
+
+## 1.18.1
+
+### Patch Changes
+
+- [#43497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43497) [`049969f8eb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/049969f8eb1) - Added error logging to the datasource try catches.
+- Updated dependencies
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.18.0"
+  packageVersion: "1.19.0"
 };

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -13,6 +13,7 @@ var _react = require("react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _linkClientExtension = require("@atlaskit/link-client-extension");
 var _analytics = require("../analytics");
+var _useErrorLogger2 = _interopRequireDefault(require("./useErrorLogger"));
 var useDatasourceTableState = exports.useDatasourceTableState = function useDatasourceTableState(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -20,6 +21,8 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     fieldKeys = _ref$fieldKeys === void 0 ? [] : _ref$fieldKeys;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useErrorLogger = (0, _useErrorLogger2.default)(),
+    captureError = _useErrorLogger.captureError;
   var idFieldCount = 1;
   var keyFieldCount = 1;
   var _useState = (0, _react.useState)([]),
@@ -110,25 +113,26 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           allColumns = schema.properties;
           newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
           newColumns.length > 0 && setColumns([].concat((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(newColumns)));
-          _context.next = 23;
+          _context.next = 24;
           break;
         case 17:
           _context.prev = 17;
           _context.t0 = _context["catch"](2);
+          captureError('loadDatasourceDetails', _context.t0);
           if (!(_context.t0 instanceof Response && (_context.t0.status === 401 || _context.t0.status === 403))) {
-            _context.next = 22;
+            _context.next = 23;
             break;
           }
           setStatus('unauthorized');
           return _context.abrupt("return");
-        case 22:
-          setStatus('rejected');
         case 23:
+          setStatus('rejected');
+        case 24:
         case "end":
           return _context.stop();
       }
     }, _callee, null, [[2, 17]]);
-  })), [columns, datasourceId, getDatasourceDetails, parameters]);
+  })), [captureError, columns, datasourceId, getDatasourceDetails, parameters]);
   var applySchemaProperties = (0, _react.useCallback)(function (schema, fieldKeys) {
     var properties = schema.properties,
       _schema$defaultProper = schema.defaultProperties,
@@ -256,25 +260,26 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
             });
           }
           setStatus('resolved');
-          _context2.next = 42;
+          _context2.next = 43;
           break;
         case 36:
           _context2.prev = 36;
           _context2.t0 = _context2["catch"](7);
+          captureError('onNextPage', _context2.t0);
           if (!(_context2.t0 instanceof Response && (_context2.t0.status === 401 || _context2.t0.status === 403))) {
-            _context2.next = 41;
+            _context2.next = 42;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 41:
-          setStatus('rejected');
         case 42:
+          setStatus('rejected');
+        case 43:
         case "end":
           return _context2.stop();
       }
     }, _callee2, null, [[7, 36]]);
-  })), [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]);
   var reset = (0, _react.useCallback)(function (options) {
     setStatus('empty');
     setResponseItems([]);

package/dist/cjs/hooks/useErrorLogger.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _sentry = require("@atlaskit/linking-common/sentry");
+var _utils = require("@atlaskit/linking-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _analytics = require("../analytics");
+var getNetworkFields = function getNetworkFields(error) {
+  return error instanceof Response ? {
+    traceId: (0, _utils.getTraceId)(error),
+    status: error.status
+  } : {
+    traceId: null,
+    status: null
+  };
+};
+var useErrorLogger = function useErrorLogger() {
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+
+  /**
+   * 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.
+   */
+  var captureError = (0, _react.useCallback)(function (errorLocation, error) {
+    var _getNetworkFields = getNetworkFields(error),
+      traceId = _getNetworkFields.traceId,
+      status = _getNetworkFields.status;
+    fireEvent('operational.datasource.operationFailed', {
+      errorLocation: errorLocation,
+      traceId: traceId,
+      status: status
+    });
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasources.enable-sentry-client') && error instanceof Error) {
+      (0, _sentry.captureException)(error, 'link-datasource');
+    }
+  }, [fireEvent]);
+  return {
+    captureError: captureError
+  };
+};
+var _default = exports.default = useErrorLogger;

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

@@ -50,5 +50,15 @@ var loadingErrorMessages = exports.loadingErrorMessages = (0, _reactIntlNext.def
     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/cjs/ui/common/error-state/no-instances-svg.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoInstancesSvg = void 0;
+var _react = _interopRequireDefault(require("react"));
+var NoInstancesSvg = exports.NoInstancesSvg = function NoInstancesSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "147",
+    height: "171",
+    viewBox: "0 0 147 171",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    clipPath: "url(#clip0_1442_1679)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "146.22",
+    height: "169.36",
+    transform: "translate(0.0300293 0.875)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/_react.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "paint0_linear_1442_1679",
+    x1: "95.4796",
+    y1: "139.562",
+    x2: "146.445",
+    y2: "140.204",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    stopColor: "#B3BAC5"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: "#DFE1E5",
+    stopOpacity: "0.5"
+  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "paint1_linear_1442_1679",
+    x1: "31.1877",
+    y1: "122.181",
+    x2: "102.046",
+    y2: "53.0865",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0.5572",
+    stopColor: "#C1C7D0"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0.966",
+    stopColor: "#E9EBEF",
+    stopOpacity: "0.5"
+  })), /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: "clip0_1442_1679"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "146.22",
+    height: "169.36",
+    fill: "white",
+    transform: "translate(0.0300293 0.875)"
+  }))));
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoInstancesView = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _messages = require("./messages");
+var _noInstancesSvg = require("./no-instances-svg");
+/** @jsx jsx */
+
+var titleStyles = (0, _react.css)({
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  fontSize: "var(--ds-font-size-200, 16px)",
+  marginTop: "var(--ds-space-200, 16px)"
+});
+var descriptionStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+var containerStyles = (0, _primitives.xcss)({
+  marginTop: '60px'
+});
+var NoInstancesView = exports.NoInstancesView = function NoInstancesView() {
+  return (0, _react.jsx)(_primitives.Flex, {
+    testId: "no-jira-instances-content",
+    direction: "column",
+    alignItems: "center",
+    xcss: containerStyles
+  }, (0, _react.jsx)(_noInstancesSvg.NoInstancesSvg, null), (0, _react.jsx)("span", {
+    css: titleStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.noAccessToJiraSitesTitle)), (0, _react.jsx)("span", {
+    css: descriptionStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.noAccessToJiraSitesDescription)));
+};

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

@@ -38,6 +38,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
     cloudId = _ref.cloudId,
     selection = _ref.selection,
+    isJQLHydrating = _ref.isJQLHydrating,
     _ref$onSelectionChang = _ref.onSelectionChange,
     onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
     _ref$onReset = _ref.onReset,
@@ -200,7 +201,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, selection]);
   var filterOptionsLength = filterOptions.length;
-  var isJQLHydrating = false;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';

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

@@ -50,33 +50,40 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref2 = selectedOptions || [],
     _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
     firstOption = _ref3[0];
-  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
-  if (showButtonLoading) {
+  var LoadingButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       iconAfter: /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: 'xsmall'
-      }),
-      testId: testId
+      })
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")])));
-  }
-  return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  }, [filterType]);
+  var DefaultButton = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      appearance: "default",
+      isSelected: isSelected || hasOptions,
+      isDisabled: isDisabled,
+      iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        label: ""
+      })
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: triggerButtonLabelStyles
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+      xcss: badgeStyles,
+      alignItems: "center"
+    }, /*#__PURE__*/_react.default.createElement(_badge.default, {
+      appearance: "primary"
+    }, "+", 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.default.createElement(_primitives.Box, {
     ref: ref,
-    appearance: "default",
-    isSelected: isSelected || hasOptions,
-    isDisabled: isDisabled,
-    testId: testId,
-    iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-      label: ""
-    })
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: triggerButtonLabelStyles
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-    xcss: badgeStyles,
-    alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement(_badge.default, {
-    appearance: "primary"
-  }, "+", selectedOptions.length - 1))));
+    testId: "jlol-basic-filter-".concat(filterType, "-trigger")
+  }, showButtonLoading ? /*#__PURE__*/_react.default.createElement(LoadingButton, null) : /*#__PURE__*/_react.default.createElement(DefaultButton, null));
 });
 var _default = exports.default = PopupTrigger;

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

@@ -1,48 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
-var _utils = require("../utils");
 var _asyncPopupSelect = _interopRequireDefault(require("./async-popup-select"));
-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; }
-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; }
 var availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
 var basicFilterContainerStyles = (0, _primitives.xcss)({
   paddingLeft: "var(--ds-space-100, 8px)"
 });
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
-  var jql = _ref.jql,
-    cloudId = _ref.cloudId,
-    onChange = _ref.onChange;
-  var _useState = (0, _react.useState)({}),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selection = _useState2[0],
-    setSelection = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if ((0, _utils.isValidJql)(jql)) {
-      // hydrate hook call goes in here
-    }
-  }, [jql]);
-  var handleSelectionChange = (0, _react.useCallback)(function (filterType, options) {
-    var updatedSelection = _objectSpread(_objectSpread({}, selection), {}, (0, _defineProperty2.default)({}, filterType, options));
-    setSelection(updatedSelection);
-    onChange(updatedSelection);
-  }, [onChange, selection]);
-  var handleReset = (0, _react.useCallback)(function () {
-    if (Object.keys(selection).length > 0) {
-      setSelection({});
-    }
-  }, [selection]);
+  var cloudId = _ref.cloudId,
+    onChange = _ref.onChange,
+    selections = _ref.selections,
+    onReset = _ref.onReset,
+    isJQLHydrating = _ref.isJQLHydrating;
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -52,10 +27,11 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
-      selection: selection[filter] || [],
+      selection: selections[filter] || [],
+      isJQLHydrating: isJQLHydrating,
       isDisabled: !cloudId,
-      onSelectionChange: handleSelectionChange,
-      onReset: handleReset
+      onSelectionChange: onChange,
+      onReset: onReset
     });
   }));
 };