@atlaskit/link-datasource 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 0.20.0
+
+### Minor Changes
+
+- [`0407e628d5b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0407e628d5b) - [ux] Fix some table bugs
+
+## 0.19.1
+
+### Patch Changes
+
+- [`f5d34a140ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5d34a140ad) - Move both exported components to be behind lazy loading
+
 ## 0.19.0
 
 ### Minor Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -87,7 +87,7 @@ var useDatasourceTableState = function useDatasourceTableState(datasourceId, par
           _context2.next = 5;
           return getDatasourceData(datasourceId, {
             parameters: parameters,
-            pageSize: 10,
+            pageSize: 20,
             pageCursor: nextCursor,
             fields: fields
           });

package/dist/cjs/index.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "DatasourceTableView", {
   enumerable: true,
   get: function get() {
-    return _datasourceTableView.DatasourceTableView;
+    return _datasourceTableView.default;
   }
 });
 Object.defineProperty(exports, "JIRA_LIST_OF_LINKS_DATASOURCE_ID", {
@@ -18,8 +20,10 @@ Object.defineProperty(exports, "JIRA_LIST_OF_LINKS_DATASOURCE_ID", {
 Object.defineProperty(exports, "JiraIssuesConfigModal", {
   enumerable: true,
   get: function get() {
-    return _jiraIssuesModal.JiraIssuesConfigModal;
+    return _jiraIssuesModal.default;
   }
 });
-var _jiraIssuesModal = require("./ui/jira-issues-modal");
-var _datasourceTableView = require("./ui/datasourceTableView");
+var _jiraIssuesModal = _interopRequireWildcard(require("./ui/jira-issues-modal"));
+var _datasourceTableView = _interopRequireDefault(require("./ui/datasource-table-view"));
+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; }

package/dist/cjs/ui/{datasourceTableView.js → datasource-table-view/datasourceTableView.js}

@@ -8,9 +8,9 @@ exports.DatasourceTableView = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _useDatasourceTableState = require("../hooks/useDatasourceTableState");
-var _issueLikeTable = require("./issue-like-table");
-var _tableFooter = require("./table-footer");
+var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
+var _issueLikeTable = require("../issue-like-table");
+var _tableFooter = require("../table-footer");
 /** @jsx jsx */
 
 var TableViewWrapperStyles = (0, _react2.css)({

package/dist/cjs/ui/datasource-table-view/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+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 || (0, _typeof2.default)(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; }
+var LazyDatasourceTableView = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_linkdatasource-tableview" */'./datasourceTableView'));
+  }).then(function (module) {
+    return {
+      default: module.DatasourceTableView
+    };
+  });
+});
+var DatasourceTableViewWithWrappers = function DatasourceTableViewWithWrappers(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": 'datasource-table-view-suspense'
+    })
+  }, /*#__PURE__*/_react.default.createElement(LazyDatasourceTableView, props));
+};
+var _default = DatasourceTableViewWithWrappers;
+exports.default = _default;

package/dist/cjs/ui/datasource-table-view/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -11,16 +11,20 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _select = require("@atlaskit/select");
+var _messages = require("./messages");
 var _excluded = ["isOpen"];
 /** @jsx jsx */
 var ColumnPicker = function ColumnPicker(_ref) {
-  var columns = _ref.columns,
+  var isDatasourceLoading = _ref.isDatasourceLoading,
+    columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     allOptions = _useState2[0],
@@ -85,8 +89,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
     target: function target(_ref8) {
@@ -103,7 +106,8 @@ var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button"
+        testId: "column-picker-trigger-button",
+        isDisabled: isDatasourceLoading
       }));
     }
   });

package/dist/cjs/ui/issue-like-table/column-picker/messages.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnPickerMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var columnPickerMessages = (0, _reactIntlNext.defineMessages)({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});
+exports.columnPickerMessages = columnPickerMessages;

package/dist/cjs/ui/issue-like-table/index.js

@@ -87,7 +87,7 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
@@ -129,7 +129,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
 
-  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
 
@@ -288,7 +288,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         css: truncatedCellStyles
       }, content);
     };
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -311,6 +311,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), onVisibleColumnKeysChange && (0, _react2.jsx)("th", {
     css: columnPickerHeaderStyles
   }, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
+    isDatasourceLoading: status === 'loading',
     columns: orderedColumns,
     selectedColumnKeys: visibleColumnKeys,
     onSelectedColumnKeysChange: onSelectedColumnKeysChange

package/dist/cjs/ui/issue-like-table/styled.js

@@ -8,7 +8,7 @@ exports.TableHeading = exports.Table = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2;
-var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n"])));
+var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
 var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
 exports.TableHeading = TableHeading;

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

@@ -1,277 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraIssuesConfigModal = exports.JIRA_LIST_OF_LINKS_DATASOURCE_ID = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-var _colors = require("@atlaskit/theme/colors");
-var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
-var _getAvailableJiraSites = require("../../services/getAvailableJiraSites");
-var _issueLikeTable = require("../issue-like-table");
-var _link = _interopRequireDefault(require("../issue-like-table/render-type/link"));
-var _jiraSearchContainer = require("./jira-search-container");
-var _messages = require("./messages");
-var _modeSwitcher = require("./mode-switcher");
-var _siteSelector = require("./site-selector");
+exports.default = exports.JIRA_LIST_OF_LINKS_DATASOURCE_ID = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
 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 */
-
-var dropdownContainerStyles = (0, _react2.css)({
-  display: 'flex',
-  gap: "var(--ds-space-100, 0.5rem)"
-});
-var contentContainerStyles = (0, _react2.css)({
-  height: '420px',
-  overflow: 'auto'
-});
-var placeholderSmartLinkStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
-  borderRadius: '3px',
-  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
-  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
-  padding: '0px 2px'
-});
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(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; }
 var JIRA_LIST_OF_LINKS_DATASOURCE_ID = 'd8b75300-dfda-4519-b6cd-e49abbd50401';
 exports.JIRA_LIST_OF_LINKS_DATASOURCE_ID = JIRA_LIST_OF_LINKS_DATASOURCE_ID;
-var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
-  var datasourceId = props.datasourceId,
-    initialParameters = props.parameters,
-    initialVisibleColumnKeys = props.visibleColumnKeys,
-    onCancel = props.onCancel,
-    onInsert = props.onInsert;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    availableSites = _useState2[0],
-    setAvailableSites = _useState2[1];
-  var _useState3 = (0, _react.useState)('issue'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    currentViewMode = _useState4[0],
-    setCurrentViewMode = _useState4[1];
-  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    cloudId = _useState6[0],
-    setCloudId = _useState6[1];
-  var _useState7 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    jql = _useState8[0],
-    setJql = _useState8[1];
-  var isParametersSet = !!(jql && cloudId);
-  var parameters = (0, _react.useMemo)(function () {
-    return !!cloudId ? {
-      cloudId: cloudId,
-      jql: jql || ''
-    } : undefined;
-  }, [cloudId, jql]);
-  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)(datasourceId, parameters),
-    reset = _useDatasourceTableSt.reset,
-    status = _useDatasourceTableSt.status,
-    onNextPage = _useDatasourceTableSt.onNextPage,
-    responseItems = _useDatasourceTableSt.responseItems,
-    hasNextPage = _useDatasourceTableSt.hasNextPage,
-    columns = _useDatasourceTableSt.columns,
-    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
-  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys || defaultVisibleColumnKeys),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    visibleColumnKeys = _useState10[0],
-    setVisibleColumnKeys = _useState10[1];
-  (0, _react.useEffect)(function () {
-    var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  (0, _react.useEffect)(function () {
-    var fetchSiteDisplayNames = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var jiraSites;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (0, _getAvailableJiraSites.getAvailableJiraSites)();
-            case 2:
-              jiraSites = _context.sent;
-              setAvailableSites(jiraSites);
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function fetchSiteDisplayNames() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    void fetchSiteDisplayNames();
-  }, []);
-  var onSearch = (0, _react.useCallback)(function (newParameters) {
-    setJql(newParameters.jql);
-    reset();
-  }, [reset]);
-  var onSiteSelection = (0, _react.useCallback)(function (site) {
-    setCloudId(site.cloudId);
-    reset();
-  }, [reset]);
-  var selectedJiraSite = (0, _react.useMemo)(function () {
-    return availableSites.find(function (jiraSite) {
-      return jiraSite.cloudId === cloudId;
-    }) || availableSites[0];
-  }, [availableSites, cloudId]);
-  (0, _react.useEffect)(function () {
-    if (!cloudId && selectedJiraSite) {
-      setCloudId(selectedJiraSite.cloudId);
-    }
-  }, [cloudId, selectedJiraSite]);
-  var retrieveUrlForSmartCardRender = (0, _react.useCallback)(function () {
-    var _data$key, _data$key$data;
-    var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
-      data = _responseItems[0];
-    // agrement with BE that we will use `key` for rendering smartlink
-    return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
-  }, [responseItems]);
-  var onInsertPressed = (0, _react.useCallback)(function () {
-    if (!isParametersSet || !jql || !selectedJiraSite) {
-      return;
-    }
-    var firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (currentViewMode === 'count') {
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: "".concat(selectedJiraSite.url, "/issues/").concat(encodeURI(jql))
-        }
-      });
-    } else if (responseItems.length === 1 && firstIssueUrl) {
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: firstIssueUrl
-        }
-      });
-    } else {
-      onInsert({
-        type: 'blockCard',
-        attrs: {
-          datasource: {
-            id: datasourceId,
-            parameters: {
-              cloudId: cloudId,
-              jql: jql // TODO support non JQL type
-            },
+var LazyJiraIssuesConfigModal = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_linkdatasource-jiraissuesmodal" */'./modal'));
+  }).then(function (module) {
+    return {
+      default: module.JiraIssuesConfigModal
+    };
+  });
+});
 
-            views: [{
-              type: 'table',
-              properties: {
-                columnKeys: visibleColumnKeys
-              }
-            }]
-          }
-        }
-      });
-    }
-  }, [isParametersSet, jql, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
-  var handleViewModeChange = function handleViewModeChange(selectedMode) {
-    setCurrentViewMode(selectedMode);
-  };
-  (0, _react.useEffect)(function () {
-    if (status === 'empty' && isParametersSet) {
-      void onNextPage();
-    }
-  }, [status, isParametersSet, onNextPage, reset]);
-  var issueLikeDataTableView = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
-      testId: "jira-jql-datasource-table",
-      status: status,
-      columns: columns,
-      items: responseItems,
-      hasNextPage: hasNextPage,
-      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-      onNextPage: onNextPage,
-      onVisibleColumnKeysChange: setVisibleColumnKeys
-    });
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, onNextPage, responseItems, status, visibleColumnKeys]);
-  var renderCountModeContent = (0, _react.useCallback)(function () {
-    var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
-    if (status === 'empty' || !jql || !url) {
-      return (0, _react2.jsx)("span", {
-        "data-testid": "jira-jql-datasource-modal--smart-card-placeholder",
-        css: placeholderSmartLinkStyles
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.issuesCountSmartCardPlaceholderText));
-    } else {
-      var urlWithEncodedJql = "".concat(url, "/issues/?jql=").concat(encodeURI(jql));
-      return (0, _react2.jsx)(_link.default, {
-        url: urlWithEncodedJql
-      });
-    }
-  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
-  var renderIssuesModeContent = (0, _react.useCallback)(function () {
-    if (status === 'empty' || columns.length === 0) {
-      return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state"
-      });
-    }
-    var firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (responseItems.length === 1 && firstIssueUrl) {
-      return (0, _react2.jsx)(_link.default, {
-        url: firstIssueUrl
-      });
-    }
-    return issueLikeDataTableView;
-  }, [columns.length, issueLikeDataTableView, responseItems.length, retrieveUrlForSmartCardRender, status]);
-  return (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
-    locale: "en"
-  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
-    testId: 'jira-jql-datasource-modal',
-    onClose: onCancel,
-    width: "x-large",
-    shouldScrollInViewport: true
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)("div", {
-    css: dropdownContainerStyles
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
-    testId: "jira-jql-datasource-modal--site-selector",
-    availableSites: availableSites,
-    onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
-    isCompact: true,
-    options: [{
-      label: formatMessage(_messages.modalMessages.issueViewModeLabel),
-      value: 'issue'
-    }, {
-      label: formatMessage(_messages.modalMessages.countViewModeLabel),
-      value: 'count'
-    }],
-    onOptionValueChange: handleViewModeChange,
-    selectedOptionValue: currentViewMode
-  })), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {
-    parameters: parameters,
-    onSearch: onSearch
-  }), (0, _react2.jsx)("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
-    appearance: "default",
-    onClick: onCancel
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
-    appearance: "primary",
-    onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
-    testId: 'jira-jql-datasource-modal--insert-button'
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText))))));
+//
+var JiraIssuesConfigModalWithWrappers = function JiraIssuesConfigModalWithWrappers(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": 'jira-jql-datasource-table-suspense'
+    })
+  }, /*#__PURE__*/_react.default.createElement(LazyJiraIssuesConfigModal, props));
 };
-exports.JiraIssuesConfigModal = JiraIssuesConfigModal;
+var _default = JiraIssuesConfigModalWithWrappers;
+exports.default = _default;