@atlaskit/link-datasource 2.9.0 → 2.9.2

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = void 0;
+exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _styled$th; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _styled$th, _styled$td; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
 
@@ -71,4 +71,26 @@ var TableHeading = exports.TableHeading = _styled.default.th((_styled$th = {}, (
   whiteSpace: 'normal',
   overflow: 'hidden',
   wordWrap: 'break-word'
-}), _styled$th));
+}), _styled$th));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var TableCell = exports.TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.default)(_styled$td, "".concat(withTablePluginBodyPrefix()), {
+  /* First section here is to override things editor table plugin css defines */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  font: fieldTextFontSize,
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
+  border: 0,
+  minWidth: 'auto',
+  verticalAlign: 'inherit',
+  boxSizing: 'border-box',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden'
+}), (0, _defineProperty2.default)(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
+  paddingLeft: "var(--ds-space-100, 8px)"
+}), (0, _defineProperty2.default)(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
+  borderRight: 0,
+  paddingRight: "var(--ds-space-100, 8px)"
+}), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
+}), _styled$td));

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableCellContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _state = require("../../../state");
+var _renderType = require("../render-type");
+var _truncateTextTag = require("../truncate-text-tag");
+var TableCellContent = exports.TableCellContent = function TableCellContent(_ref) {
+  var _rowData$columnKey;
+  var columnKey = _ref.columnKey,
+    columnType = _ref.columnType,
+    id = _ref.id,
+    renderItem = _ref.renderItem,
+    wrappedColumnKeys = _ref.wrappedColumnKeys;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var rowData = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  var values = Array.isArray(value) ? value : [value];
+  var renderedValues = renderItem({
+    type: columnType,
+    values: values
+  });
+  var stringifiedContent = values.map(function (value) {
+    return (0, _renderType.stringifyType)({
+      type: columnType,
+      value: value
+    }, intl.formatMessage, intl.formatDate);
+  }).filter(function (value) {
+    return value !== '';
+  }).join(', ');
+  if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    , {
+      tag: _truncateTextTag.TruncateTextTag,
+      content: stringifiedContent,
+      testId: "issues-table-cell-tooltip"
+    }, renderedValues);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderedValues);
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TruncateTextTag = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var truncateTextStyles = (0, _react2.css)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var TruncateTextTag = exports.TruncateTextTag = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});

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

@@ -132,6 +132,7 @@ var PlainJiraIssuesConfigModalOld = exports.PlainJiraIssuesConfigModalOld = func
     status = _useDatasourceTableSt.status,
     onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -369,6 +370,7 @@ var PlainJiraIssuesConfigModalOld = exports.PlainJiraIssuesConfigModalOld = func
       status: status,
       columns: columns,
       items: responseItems,
+      itemIds: responseItemIds,
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: handleOnNextPage,
@@ -380,7 +382,7 @@ var PlainJiraIssuesConfigModalOld = exports.PlainJiraIssuesConfigModalOld = func
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: (0, _platformFeatureFlags.fg)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
     }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  }, [status, columns, responseItems, responseItemIds, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {

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

@@ -12,7 +12,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -23,11 +22,9 @@ var _ufoExperiences = require("../../../analytics/ufoExperiences");
 var _useColumnPickerRenderedFailedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
 var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _utils = require("../../../analytics/utils");
-var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
 var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
 var _userInteractions = require("../../../contexts/user-interactions");
-var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _useAvailableSites2 = require("../../../services/useAvailableSites");
 var _state = require("../../../state");
@@ -41,15 +38,16 @@ var _messages2 = require("../../common/initial-state-view/messages");
 var _cancelButton = require("../../common/modal/cancel-button");
 var _contentContainer = require("../../common/modal/content-container");
 var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
+var _datasourceContext = require("../../common/modal/datasource-context");
 var _datasourceModal = require("../../common/modal/datasource-modal");
-var _useColumnResize2 = require("../../common/modal/datasources-table-in-modal-preview/use-column-resize");
-var _useColumnWrapping2 = require("../../common/modal/datasources-table-in-modal-preview/use-column-wrapping");
+var _createDatasourceModal = require("../../common/modal/datasource-modal/createDatasourceModal");
+var _datasourcesTableInModalPreview = _interopRequireDefault(require("../../common/modal/datasources-table-in-modal-preview"));
+var _insertButton = require("../../common/modal/insert-button");
 var _modeSwitcher = require("../../common/modal/mode-switcher");
 var _useViewModeContext2 = require("../../common/modal/mode-switcher/useViewModeContext");
 var _searchCount = _interopRequireDefault(require("../../common/modal/search-count"));
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
-var _utils2 = require("../../issue-like-table/utils");
 var _ui = require("../basic-filters/ui");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _jiraSearchContainer = require("../jira-search-container");
@@ -61,7 +59,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var DEFAULT_VIEW_MODE = 'table';
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'table') {
     return _types.DatasourceDisplay.DATASOURCE_TABLE;
@@ -69,81 +66,55 @@ var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   return itemCount === 1 ? _types.DatasourceDisplay.INLINE : _types.DatasourceDisplay.DATASOURCE_INLINE;
 };
 var jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
+var isValidParameters = function isValidParameters(parameters) {
+  return typeof (parameters === null || parameters === void 0 ? void 0 : parameters.jql) === 'string' && parameters.jql.length > 0 && typeof (parameters === null || parameters === void 0 ? void 0 : parameters.cloudId) === 'string' && parameters.cloudId.length > 0;
+};
 var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
-  var datasourceId = props.datasourceId,
-    initialColumnCustomSizes = props.columnCustomSizes,
-    initialWrappedColumnKeys = props.wrappedColumnKeys,
-    onCancel = props.onCancel,
-    onInsert = props.onInsert,
-    initialParameters = props.parameters,
-    urlBeingEdited = props.url,
-    initialVisibleColumnKeys = props.visibleColumnKeys;
+  var onCancel = props.onCancel,
+    urlBeingEdited = props.url;
+  var _useDatasourceContext = (0, _datasourceContext.useDatasourceContext)(),
+    visibleColumnCount = _useDatasourceContext.visibleColumnCount,
+    visibleColumnKeys = _useDatasourceContext.visibleColumnKeys,
+    parameters = _useDatasourceContext.parameters,
+    setParameters = _useDatasourceContext.setParameters,
+    tableState = _useDatasourceContext.tableState;
+  var reset = tableState.reset,
+    status = tableState.status,
+    responseItems = tableState.responseItems,
+    columns = tableState.columns,
+    totalCount = tableState.totalCount,
+    _tableState$extension = tableState.extensionKey,
+    extensionKey = _tableState$extension === void 0 ? null : _tableState$extension,
+    destinationObjectTypes = tableState.destinationObjectTypes;
+  var _ref = parameters !== null && parameters !== void 0 ? parameters : {},
+    cloudId = _ref.cloudId,
+    jql = _ref.jql;
+  var _useState = (0, _react.useState)(jql),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    initialJql = _useState2[0];
   var _useViewModeContext = (0, _useViewModeContext2.useViewModeContext)(),
     currentViewMode = _useViewModeContext.currentViewMode;
-  var _useState = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    cloudId = _useState2[0],
-    setCloudId = _useState2[1];
   var _useAvailableSites = (0, _useAvailableSites2.useAvailableSites)('jira', cloudId),
     availableSites = _useAvailableSites.availableSites,
     selectedJiraSite = _useAvailableSites.selectedSite;
-  var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql),
+  var _useState3 = (0, _react.useState)(jql),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    jql = _useState4[0],
-    setJql = _useState4[1];
-  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    searchBarJql = _useState6[0],
-    setSearchBarJql = _useState6[1];
-  var _useState7 = (0, _react.useState)(initialVisibleColumnKeys),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    visibleColumnKeys = _useState8[0],
-    setVisibleColumnKeys = _useState8[1];
+    searchBarJql = _useState4[0],
+    setSearchBarJql = _useState4[1];
 
   // analytics related parameters
   var searchCount = (0, _react.useRef)(0);
   var userInteractions = (0, _userInteractions.useUserInteractions)();
   var initialSearchMethod =
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  (0, _platformFeatureFlags.fg)('platform.linking-platform.datasource.show-jlol-basic-filters') && !(0, _isQueryTooComplex.isQueryTooComplex)((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql) || '') ? 'basic' : 'jql';
-  var _useState9 = (0, _react.useState)(initialSearchMethod),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    currentSearchMethod = _useState10[0],
-    setCurrentSearchMethod = _useState10[1];
+  (0, _platformFeatureFlags.fg)('platform.linking-platform.datasource.show-jlol-basic-filters') && !(0, _isQueryTooComplex.isQueryTooComplex)(initialJql || '') ? 'basic' : 'jql';
+  var _useState5 = (0, _react.useState)(initialSearchMethod),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    currentSearchMethod = _useState6[0],
+    setCurrentSearchMethod = _useState6[1];
   var searchMethodSearchedWith = (0, _react.useRef)(null);
-  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   var basicFilterSelectionsSearchedWith = (0, _react.useRef)({});
   var isSearchedWithComplexQuery = (0, _react.useRef)(false);
-  var parameters = (0, _react.useMemo)(function () {
-    return !!cloudId ? {
-      cloudId: cloudId,
-      jql: jql || ''
-    } : undefined;
-  }, [cloudId, jql]);
-  var isParametersSet = !!(jql && cloudId);
-  var _useColumnResize = (0, _useColumnResize2.useColumnResize)(initialColumnCustomSizes),
-    columnCustomSizes = _useColumnResize.columnCustomSizes,
-    onColumnResize = _useColumnResize.onColumnResize;
-  var _useColumnWrapping = (0, _useColumnWrapping2.useColumnWrapping)(initialWrappedColumnKeys),
-    wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
-    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
-  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
-      datasourceId: datasourceId,
-      parameters: isParametersSet ? parameters : undefined,
-      fieldKeys: visibleColumnKeys
-    }),
-    reset = _useDatasourceTableSt.reset,
-    status = _useDatasourceTableSt.status,
-    onNextPage = _useDatasourceTableSt.onNextPage,
-    responseItems = _useDatasourceTableSt.responseItems,
-    hasNextPage = _useDatasourceTableSt.hasNextPage,
-    columns = _useDatasourceTableSt.columns,
-    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
-    totalCount = _useDatasourceTableSt.totalCount,
-    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
-    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
-    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
@@ -155,7 +126,6 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   }, [destinationObjectTypes, extensionKey]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
-  var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
   var isDataReady = (visibleColumnKeys || []).length > 0;
   var hasNoJiraSites = availableSites && availableSites.length === 0;
@@ -182,16 +152,21 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     canBeLink: currentViewMode === 'inline',
     extensionKey: extensionKey
   });
-  (0, _react.useEffect)(function () {
-    var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
-    visibleColumnCount.current = newVisibleColumnKeys.length;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
+
+  /**
+   * If the selected Jira site changes, update the cloudId in the parameters
+   * This is mainly useful for setting the initial cloudId after the site selection loads
+   */
   (0, _react.useEffect)(function () {
     if (selectedJiraSite && (!cloudId || cloudId !== selectedJiraSite.cloudId)) {
-      setCloudId(selectedJiraSite.cloudId);
+      setParameters(function () {
+        return {
+          jql: '',
+          cloudId: selectedJiraSite.cloudId
+        };
+      });
     }
-  }, [cloudId, selectedJiraSite]);
+  }, [cloudId, selectedJiraSite, setParameters]);
   var fireSingleItemViewedEvent = (0, _react.useCallback)(function () {
     fireEvent('ui.link.viewed.singleItem', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
       searchMethod: (0, _utils.mapSearchMethod)(searchMethodSearchedWith.current)
@@ -211,7 +186,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
         displayedColumnCount: visibleColumnCount.current
       }));
     }
-  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  }, [isDataReady, fireEvent, analyticsPayload, totalCount, visibleColumnCount]);
   var fireIssueViewAnalytics = (0, _react.useCallback)(function () {
     if (!totalCount) {
       return;
@@ -236,10 +211,10 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
   (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
-  var onSearch = (0, _react.useCallback)(function (newParameters, _ref) {
-    var searchMethod = _ref.searchMethod,
-      basicFilterSelections = _ref.basicFilterSelections,
-      isQueryComplex = _ref.isQueryComplex;
+  var onSearch = (0, _react.useCallback)(function (newParameters, _ref2) {
+    var searchMethod = _ref2.searchMethod,
+      basicFilterSelections = _ref2.basicFilterSelections,
+      isQueryComplex = _ref2.isQueryComplex;
     searchCount.current++;
     searchMethodSearchedWith.current = searchMethod;
     basicFilterSelectionsSearchedWith.current = basicFilterSelections;
@@ -247,19 +222,26 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     if (jql !== newParameters.jql) {
       userInteractions.add(_types.DatasourceAction.QUERY_UPDATED);
     }
-    setJql(newParameters.jql);
+    setParameters(function (state) {
+      return state && newParameters.jql ? {
+        cloudId: state.cloudId,
+        jql: newParameters.jql
+      } : undefined;
+    });
     reset({
       shouldForceRequest: true
     });
-  }, [jql, reset, userInteractions]);
+  }, [jql, reset, userInteractions, setParameters]);
   var onSiteSelection = (0, _react.useCallback)(function (site) {
     userInteractions.add(_types.DatasourceAction.INSTANCE_UPDATED);
-    setJql('');
-    setCloudId(site.cloudId);
+    setParameters({
+      jql: '',
+      cloudId: site.cloudId
+    });
     reset({
       shouldForceRequest: true
     });
-  }, [reset, userInteractions]);
+  }, [reset, userInteractions, setParameters]);
   var retrieveUrlForSmartCardRender = (0, _react.useCallback)(function () {
     var _data$key;
     var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
@@ -267,120 +249,6 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 || (_data$key = data.key) === null || _data$key === void 0 || (_data$key = _data$key.data) === null || _data$key === void 0 ? void 0 : _data$key.url;
   }, [responseItems]);
-  var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
-    var _insertButtonClickedE;
-    if (!isParametersSet || !jql || !selectedJiraSite) {
-      return;
-    }
-
-    // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
-    // even if the user didn't previously click search
-    var upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    var upToDateJqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURIComponent(upToDateJql));
-    var filterSelectionCount = _ui.availableBasicFilterTypes.reduce(function (current, filter) {
-      var _basicFilterSelection;
-      return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, "".concat(filter, "BasicFilterSelectionCount"), ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0));
-    }, {});
-    var insertButtonClickedEvent = analyticsEvent.update({
-      actionSubjectId: 'insert',
-      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-        totalItemCount: totalCount || 0,
-        displayedColumnCount: visibleColumnCount.current,
-        display: getDisplayValue(currentViewMode, totalCount || 0),
-        searchCount: searchCount.current,
-        searchMethod: (0, _utils.mapSearchMethod)(searchMethodSearchedWith.current),
-        actions: userInteractions.get(),
-        isQueryComplex: isSearchedWithComplexQuery.current
-      }, searchMethodSearchedWith.current === 'basic' ? _objectSpread({}, filterSelectionCount) : {}),
-      eventType: 'ui'
-    });
-
-    // additional event for tracking in confluence against JIM
-    var macroInsertedEvent = analyticsEvent.clone();
-    macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.update({
-      eventType: 'track',
-      action: 'inserted',
-      actionSubject: 'macro',
-      actionSubjectId: 'jlol',
-      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-        totalItemCount: totalCount || 0,
-        displayedColumnCount: visibleColumnCount.current,
-        display: getDisplayValue(currentViewMode, totalCount || 0),
-        searchCount: searchCount.current,
-        searchMethod: (0, _utils.mapSearchMethod)(searchMethodSearchedWith.current),
-        actions: userInteractions.get()
-      })
-    });
-    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
-    insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
-    var firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (currentViewMode === 'inline') {
-      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.fire(_analytics.EVENT_CHANNEL);
-      var url = responseItems.length === 1 ? firstIssueUrl : upToDateJqlUrl;
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: url
-        }
-      }, consumerEvent);
-    } else {
-      onInsert((0, _adf.buildDatasourceAdf)({
-        id: datasourceId,
-        parameters: {
-          cloudId: cloudId,
-          jql: upToDateJql // TODO support non JQL type
-        },
-        views: [{
-          type: 'table',
-          properties: {
-            columns: (visibleColumnKeys || []).map(function (key) {
-              var width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
-              var isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
-              return _objectSpread(_objectSpread({
-                key: key
-              }, width ? {
-                width: width
-              } : {}), isWrapped ? {
-                isWrapped: isWrapped
-              } : {});
-            })
-          }
-        }]
-      }, upToDateJqlUrl), consumerEvent);
-    }
-  }, [isParametersSet, jql, selectedJiraSite, searchBarJql, analyticsPayload, totalCount, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
-  var handleOnNextPage = (0, _react.useCallback)(function () {
-    var onNextPageProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    userInteractions.add(_types.DatasourceAction.NEXT_PAGE_SCROLLED);
-    onNextPage(onNextPageProps);
-  }, [onNextPage, userInteractions]);
-  var handleVisibleColumnKeysChange = (0, _react.useCallback)(function () {
-    var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var columnAction = (0, _utils2.getColumnAction)(visibleColumnKeys || [], newVisibleColumnKeys);
-    userInteractions.add(columnAction);
-    visibleColumnCount.current = newVisibleColumnKeys.length;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [visibleColumnKeys, userInteractions]);
-  var issueLikeDataTableView = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_contentContainer.ContentContainer, {
-      withTableBorder: true
-    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
-      testId: "jira-datasource-table",
-      status: status,
-      columns: columns,
-      items: responseItems,
-      hasNextPage: hasNextPage,
-      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-      onNextPage: handleOnNextPage,
-      onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      extensionKey: extensionKey,
-      columnCustomSizes: columnCustomSizes,
-      onColumnResize: onColumnResize,
-      wrappedColumnKeys: wrappedColumnKeys,
-      onWrappedColumnChange: (0, _platformFeatureFlags.fg)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-    }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -440,8 +308,12 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
         } : undefined
       }));
     }
-    return issueLikeDataTableView;
-  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+    return (0, _react2.jsx)(_contentContainer.ContentContainer, {
+      withTableBorder: true
+    }, (0, _react2.jsx)(_datasourcesTableInModalPreview.default, {
+      testId: "jira-datasource-table"
+    }));
+  }, [columns.length, currentSearchMethod, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages3.modalMessages.insertIssuesTitleManySites : _messages3.modalMessages.insertIssuesTitle;
   var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
     return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
@@ -449,6 +321,38 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       actions: userInteractions.get()
     });
   }, [analyticsPayload, userInteractions]);
+  var filterSelectionCount = _ui.availableBasicFilterTypes.reduce(function (current, filter) {
+    var _basicFilterSelection;
+    return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, "".concat(filter, "BasicFilterSelectionCount"), ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0));
+  }, {});
+  var getInsertButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      display: getDisplayValue(currentViewMode, totalCount || 0),
+      isQueryComplex: isSearchedWithComplexQuery.current,
+      searchMethod: (0, _utils.mapSearchMethod)(searchMethodSearchedWith.current),
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    }, searchMethodSearchedWith.current === 'basic' ? _objectSpread({}, filterSelectionCount) : {});
+  }, [analyticsPayload, currentViewMode, filterSelectionCount, totalCount, userInteractions]);
+  var urlToInsert = (0, _react.useMemo)(function () {
+    var jql = parameters === null || parameters === void 0 ? void 0 : parameters.jql;
+    if (!jql || !(selectedJiraSite !== null && selectedJiraSite !== void 0 && selectedJiraSite.url)) {
+      return;
+    }
+    // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
+    // even if the user didn't previously click search
+    var upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
+    var upToDateJqlUrl = "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURIComponent(upToDateJql));
+    return currentViewMode === 'inline' && responseItems.length === 1 ? retrieveUrlForSmartCardRender() : upToDateJqlUrl;
+  }, [currentViewMode, parameters === null || parameters === void 0 ? void 0 : parameters.jql, responseItems, retrieveUrlForSmartCardRender, searchBarJql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url]);
+  var updateParametersBeforeInsert = function updateParametersBeforeInsert(parameters) {
+    return {
+      cloudId: parameters.cloudId,
+      // searchBarJql will not be null at this point, since this function is only called when user press insert button
+      //
+      jql: searchBarJql || ''
+    };
+  };
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
@@ -483,11 +387,11 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "jira-datasource-modal--cancel-button"
-  }), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
-    appearance: "primary",
-    onClick: onInsertPressed,
-    isDisabled: isInsertDisabled,
-    testId: "jira-datasource-modal--insert-button"
+  }), !hasNoJiraSites && (0, _react2.jsx)(_insertButton.InsertButton, {
+    testId: "jira-datasource-modal--insert-button",
+    url: urlToInsert,
+    overwriteParameters: updateParametersBeforeInsert,
+    getAnalyticsPayload: getInsertButtonAnalyticsPayload
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.insertIssuesButtonText))))));
 };
 var analyticsContextAttributes = {
@@ -499,9 +403,35 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var JiraIssuesConfigModal = exports.JiraIssuesConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
-  var _props$viewMode;
-  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _platformFeatureFlags.fg)('platform-datasources-use-refactored-config-modal') ? (0, _react2.jsx)(_useViewModeContext2.DatasourceViewModeProvider, {
-    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
-  }, (0, _react2.jsx)(PlainJiraIssuesConfigModal, props)) : (0, _react2.jsx)(_ModalOld.PlainJiraIssuesConfigModalOld, props))));
-});
+var ConnectedJiraIssueConfigModal = (0, _createDatasourceModal.createDatasourceModal)({
+  isValidParameters: isValidParameters,
+  dataProvider: 'jira-issues',
+  component: PlainJiraIssuesConfigModal
+});
+var JiraIssuesConfigModalWithExtraAnalyticsOnInsert = function JiraIssuesConfigModalWithExtraAnalyticsOnInsert(props) {
+  var onInsert = props.onInsert;
+  var onInsertWithMacroAnalytics = (0, _react.useCallback)(function (adf, analyticsEvent) {
+    if (analyticsEvent && adf.type === 'inlineCard') {
+      var macroInsertedEvent = analyticsEvent.clone();
+      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.update({
+        eventType: 'track',
+        action: 'inserted',
+        actionSubject: 'macro',
+        actionSubjectId: 'jlol'
+      });
+      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.fire(_constants.EVENT_CHANNEL);
+    }
+    onInsert(adf, analyticsEvent);
+  }, [onInsert]);
+  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(ConnectedJiraIssueConfigModal, (0, _extends2.default)({}, props, {
+    onInsert: onInsertWithMacroAnalytics
+  })));
+};
+var JiraIssuesConfigModal = exports.JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-datasources-use-refactored-config-modal')) {
+    return (0, _react2.jsx)(JiraIssuesConfigModalWithExtraAnalyticsOnInsert, props);
+  }
+  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+    data: contextData
+  }, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _react2.jsx)(_ModalOld.PlainJiraIssuesConfigModalOld, props)))));
+};