@atlaskit/link-datasource 0.19.0 → 0.20.0

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

@@ -0,0 +1,275 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JiraIssuesConfigModal = 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 _modeSwitcher = require("../mode-switcher");
+var _siteSelector = require("../site-selector");
+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 */
+
+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'
+});
+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
+            },
+
+            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 || status === 'loading',
+    testId: 'jira-jql-datasource-modal--insert-button'
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText))))));
+};
+exports.JiraIssuesConfigModal = JiraIssuesConfigModal;

package/dist/cjs/version.json

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

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -35,7 +35,7 @@ export const useDatasourceTableState = (datasourceId, parameters, fields) => {
       totalIssues
     } = await getDatasourceData(datasourceId, {
       parameters,
-      pageSize: 10,
+      pageSize: 20,
       pageCursor: nextCursor,
       fields
     });

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
-export { JiraIssuesConfigModal } from './ui/jira-issues-modal';
-export { DatasourceTableView } from './ui/datasourceTableView';
+export { default as JiraIssuesConfigModal } from './ui/jira-issues-modal';
+export { default as DatasourceTableView } from './ui/datasource-table-view';
 export { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from './ui/jira-issues-modal';

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

@@ -2,9 +2,9 @@
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import { useDatasourceTableState } from '../hooks/useDatasourceTableState';
-import { IssueLikeDataTableView } from './issue-like-table';
-import { TableFooter } from './table-footer';
+import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { IssueLikeDataTableView } from '../issue-like-table';
+import { TableFooter } from '../table-footer';
 const TableViewWrapperStyles = css({
   display: 'flex',
   flexDirection: 'column',

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

@@ -0,0 +1,12 @@
+import React, { lazy, Suspense } from 'react';
+const LazyDatasourceTableView = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_linkdatasource-tableview" */'./datasourceTableView').then(module => ({
+  default: module.DatasourceTableView
+})));
+const DatasourceTableViewWithWrappers = props => {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      "data-testid": 'datasource-table-view-suspense'
+    })
+  }, /*#__PURE__*/React.createElement(LazyDatasourceTableView, props));
+};
+export default DatasourceTableViewWithWrappers;

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

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

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

@@ -2,15 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
 export const ColumnPicker = ({
+  isDatasourceLoading,
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange
 }) => {
+  const intl = useIntl();
   const [allOptions, setAllOptions] = useState([]);
   const mapColumnToOption = useCallback(({
     key,
@@ -62,8 +66,7 @@ export const ColumnPicker = ({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
     target: ({
@@ -80,7 +83,8 @@ export const ColumnPicker = ({
       })),
       spacing: "compact",
       appearance: "subtle",
-      testId: "column-picker-trigger-button"
+      testId: "column-picker-trigger-button",
+      isDisabled: isDatasourceLoading
     }))
   });
 };

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const columnPickerMessages = defineMessages({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});

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

@@ -79,7 +79,7 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 export const IssueLikeDataTableView = ({
@@ -103,7 +103,7 @@ export const IssueLikeDataTableView = ({
     key
   }) => visibleKey === key)).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.
 
@@ -252,7 +252,7 @@ export const IssueLikeDataTableView = ({
     const TruncatedContent = () => jsx("div", {
       css: truncatedCellStyles
     }, content);
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -275,6 +275,7 @@ export const IssueLikeDataTableView = ({
   }), onVisibleColumnKeysChange && jsx("th", {
     css: columnPickerHeaderStyles
   }, jsx(ColumnPicker, {
+    isDatasourceLoading: status === 'loading',
     columns: orderedColumns,
     selectedColumnKeys: visibleColumnKeys,
     onSelectedColumnKeysChange: onSelectedColumnKeysChange

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 export const Table = styled.table`
-  width: auto;
+  width: 100%;
 `;
 export const TableHeading = styled.th`
   position: relative;

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

@@ -1,224 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { FormattedMessage, IntlProvider, useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0 } from '@atlaskit/theme/colors';
-import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
-import { getAvailableJiraSites } from '../../services/getAvailableJiraSites';
-import { EmptyState, IssueLikeDataTableView } from '../issue-like-table';
-import LinkRenderType from '../issue-like-table/render-type/link';
-import { JiraSearchContainer } from './jira-search-container';
-import { modalMessages } from './messages';
-import { ModeSwitcher } from './mode-switcher';
-import { JiraSiteSelector } from './site-selector';
-const dropdownContainerStyles = css({
-  display: 'flex',
-  gap: "var(--ds-space-100, 0.5rem)"
-});
-const contentContainerStyles = css({
-  height: '420px',
-  overflow: 'auto'
-});
-const placeholderSmartLinkStyles = css({
-  backgroundColor: `var(--ds-surface-raised, ${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, ${B400})`,
-  padding: '0px 2px'
-});
+import React, { lazy, Suspense } from 'react';
 export const JIRA_LIST_OF_LINKS_DATASOURCE_ID = 'd8b75300-dfda-4519-b6cd-e49abbd50401';
-export const JiraIssuesConfigModal = props => {
-  const {
-    datasourceId,
-    parameters: initialParameters,
-    visibleColumnKeys: initialVisibleColumnKeys,
-    onCancel,
-    onInsert
-  } = props;
-  const [availableSites, setAvailableSites] = useState([]);
-  const [currentViewMode, setCurrentViewMode] = useState('issue');
-  const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
-  const [jql, setJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
-  const isParametersSet = !!(jql && cloudId);
-  const parameters = useMemo(() => !!cloudId ? {
-    cloudId,
-    jql: jql || ''
-  } : undefined, [cloudId, jql]);
-  const {
-    reset,
-    status,
-    onNextPage,
-    responseItems,
-    hasNextPage,
-    columns,
-    defaultVisibleColumnKeys
-  } = useDatasourceTableState(datasourceId, parameters);
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys || defaultVisibleColumnKeys);
-  useEffect(() => {
-    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  const {
-    formatMessage
-  } = useIntl();
-  useEffect(() => {
-    const fetchSiteDisplayNames = async () => {
-      const jiraSites = await getAvailableJiraSites();
-      setAvailableSites(jiraSites);
-    };
-    void fetchSiteDisplayNames();
-  }, []);
-  const onSearch = useCallback(newParameters => {
-    setJql(newParameters.jql);
-    reset();
-  }, [reset]);
-  const onSiteSelection = useCallback(site => {
-    setCloudId(site.cloudId);
-    reset();
-  }, [reset]);
-  const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
-  useEffect(() => {
-    if (!cloudId && selectedJiraSite) {
-      setCloudId(selectedJiraSite.cloudId);
-    }
-  }, [cloudId, selectedJiraSite]);
-  const retrieveUrlForSmartCardRender = useCallback(() => {
-    var _data$key, _data$key$data;
-    const [data] = responseItems;
-    // 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]);
-  const onInsertPressed = useCallback(() => {
-    if (!isParametersSet || !jql || !selectedJiraSite) {
-      return;
-    }
-    const firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (currentViewMode === 'count') {
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: `${selectedJiraSite.url}/issues/${encodeURI(jql)}`
-        }
-      });
-    } else if (responseItems.length === 1 && firstIssueUrl) {
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: firstIssueUrl
-        }
-      });
-    } else {
-      onInsert({
-        type: 'blockCard',
-        attrs: {
-          datasource: {
-            id: datasourceId,
-            parameters: {
-              cloudId,
-              jql // TODO support non JQL type
-            },
+const LazyJiraIssuesConfigModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_linkdatasource-jiraissuesmodal" */'./modal').then(module => ({
+  default: module.JiraIssuesConfigModal
+})));
 
-            views: [{
-              type: 'table',
-              properties: {
-                columnKeys: visibleColumnKeys
-              }
-            }]
-          }
-        }
-      });
-    }
-  }, [isParametersSet, jql, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
-  const handleViewModeChange = selectedMode => {
-    setCurrentViewMode(selectedMode);
-  };
-  useEffect(() => {
-    if (status === 'empty' && isParametersSet) {
-      void onNextPage();
-    }
-  }, [status, isParametersSet, onNextPage, reset]);
-  const issueLikeDataTableView = useMemo(() => jsx(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]);
-  const renderCountModeContent = useCallback(() => {
-    const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
-    if (status === 'empty' || !jql || !url) {
-      return jsx("span", {
-        "data-testid": `jira-jql-datasource-modal--smart-card-placeholder`,
-        css: placeholderSmartLinkStyles
-      }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText));
-    } else {
-      const urlWithEncodedJql = `${url}/issues/?jql=${encodeURI(jql)}`;
-      return jsx(LinkRenderType, {
-        url: urlWithEncodedJql
-      });
-    }
-  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
-  const renderIssuesModeContent = useCallback(() => {
-    if (status === 'empty' || columns.length === 0) {
-      return jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`
-      });
-    }
-    const firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (responseItems.length === 1 && firstIssueUrl) {
-      return jsx(LinkRenderType, {
-        url: firstIssueUrl
-      });
-    }
-    return issueLikeDataTableView;
-  }, [columns.length, issueLikeDataTableView, responseItems.length, retrieveUrlForSmartCardRender, status]);
-  return jsx(IntlProvider, {
-    locale: "en"
-  }, jsx(ModalTransition, null, jsx(Modal, {
-    testId: 'jira-jql-datasource-modal',
-    onClose: onCancel,
-    width: "x-large",
-    shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, availableSites.length < 2 ? jsx(FormattedMessage, modalMessages.insertIssuesTitle) : jsx("div", {
-    css: dropdownContainerStyles
-  }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), jsx(JiraSiteSelector, {
-    testId: `jira-jql-datasource-modal--site-selector`,
-    availableSites: availableSites,
-    onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), jsx(ModeSwitcher, {
-    isCompact: true,
-    options: [{
-      label: formatMessage(modalMessages.issueViewModeLabel),
-      value: 'issue'
-    }, {
-      label: formatMessage(modalMessages.countViewModeLabel),
-      value: 'count'
-    }],
-    onOptionValueChange: handleViewModeChange,
-    selectedOptionValue: currentViewMode
-  })), jsx(ModalBody, null, jsx(JiraSearchContainer, {
-    parameters: parameters,
-    onSearch: onSearch
-  }), jsx("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, jsx(Button, {
-    appearance: "default",
-    onClick: onCancel
-  }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
-    appearance: "primary",
-    onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
-    testId: 'jira-jql-datasource-modal--insert-button'
-  }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
-};
+//
+const JiraIssuesConfigModalWithWrappers = props => {
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      "data-testid": 'jira-jql-datasource-table-suspense'
+    })
+  }, /*#__PURE__*/React.createElement(LazyJiraIssuesConfigModal, props));
+};
+export default JiraIssuesConfigModalWithWrappers;