@atlaskit/link-datasource 2.5.5 → 2.5.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/link-datasource
 
+## 2.5.6
+
+### Patch Changes
+
+- [#117026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117026)
+  [`dbba7a8f78916`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dbba7a8f78916) -
+  Refactored confluence config modal so that the 1p makers don't need to worry about column resizing
+  and line wraps
+
 ## 2.5.5
 
 ### Patch Changes

package/dist/cjs/ui/common/modal/datasource-context/DatasourceContext.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatasourceContext = exports.DatasourceContext = void 0;
+var _react = _interopRequireWildcard(require("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; }
+var DatasourceContext = exports.DatasourceContext = /*#__PURE__*/_react.default.createContext(null);
+var useDatasourceContext = exports.useDatasourceContext = function useDatasourceContext() {
+  var value = (0, _react.useContext)(DatasourceContext);
+  if (!value) {
+    throw new Error('useDatasourceStore must be used within DatasourceContextProvider');
+  }
+  return value;
+};

package/dist/cjs/ui/common/modal/datasource-context/DatasourceContextProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceContextProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useColumnResize2 = require("../../../issue-like-table/use-column-resize");
+var _useColumnWrapping2 = require("../../../issue-like-table/use-column-wrapping");
+var _DatasourceContext = require("./DatasourceContext");
+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; }
+var DatasourceContextProvider = exports.DatasourceContextProvider = function DatasourceContextProvider(_ref) {
+  var children = _ref.children,
+    initialColumnCustomSizes = _ref.initialColumnCustomSizes,
+    initialWrappedColumnKeys = _ref.initialWrappedColumnKeys;
+  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 contextValue = (0, _react.useMemo)(function () {
+    return {
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: onWrappedColumnChange
+    };
+  }, [columnCustomSizes, onColumnResize, onWrappedColumnChange, wrappedColumnKeys]);
+  return /*#__PURE__*/_react.default.createElement(_DatasourceContext.DatasourceContext.Provider, {
+    value: contextValue
+  }, children);
+};

package/dist/cjs/ui/confluence-search-modal/modal/ModalOld.js

@@ -0,0 +1,451 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlainConfluenceSearchConfigModal = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _analytics = require("../../../analytics");
+var _types = require("../../../analytics/types");
+var _adf = require("../../../common/utils/adf");
+var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _userInteractions = require("../../../contexts/user-interactions");
+var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
+var _en = _interopRequireDefault(require("../../../i18n/en"));
+var _useAvailableSites2 = require("../../../services/useAvailableSites");
+var _accessRequired = require("../../common/error-state/access-required");
+var _modalLoadingError = require("../../common/error-state/modal-loading-error");
+var _noInstances = require("../../common/error-state/no-instances");
+var _noResults = require("../../common/error-state/no-results");
+var _initialStateView = require("../../common/initial-state-view");
+var _cancelButton = require("../../common/modal/cancel-button");
+var _contentContainer = require("../../common/modal/content-container");
+var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
+var _datasourceModal = require("../../common/modal/datasource-modal");
+var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
+var _searchCount = _interopRequireDefault(require("../../common/modal/search-count"));
+var _siteSelector = require("../../common/modal/site-selector");
+var _issueLikeTable = require("../../issue-like-table");
+var _useColumnResize2 = require("../../issue-like-table/use-column-resize");
+var _useColumnWrapping2 = require("../../issue-like-table/use-column-wrapping");
+var _utils = require("../../issue-like-table/utils");
+var _confluenceSearchContainer = _interopRequireDefault(require("../confluence-search-container"));
+var _confluenceSearchInitialStateSvg = require("./confluence-search-initial-state-svg");
+var _messages = require("./messages");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var inputContainerStyles = (0, _primitives.xcss)({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
+  var datasourceId = props.datasourceId,
+    initialColumnCustomSizes = props.columnCustomSizes,
+    initialWrappedColumnKeys = props.wrappedColumnKeys,
+    onCancel = props.onCancel,
+    onInsert = props.onInsert,
+    _props$viewMode = props.viewMode,
+    viewMode = _props$viewMode === void 0 ? 'table' : _props$viewMode,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys,
+    _props$disableDisplay = props.disableDisplayDropdown,
+    disableDisplayDropdown = _props$disableDisplay === void 0 ? false : _props$disableDisplay,
+    overrideParameters = props.overrideParameters;
+  var _useState = (0, _react.useState)(viewMode),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentViewMode = _useState2[0],
+    setCurrentViewMode = _useState2[1];
+  var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    cloudId = _useState4[0],
+    setCloudId = _useState4[1];
+  var _useAvailableSites = (0, _useAvailableSites2.useAvailableSites)('confluence', cloudId),
+    availableSites = _useAvailableSites.availableSites,
+    selectedConfluenceSite = _useAvailableSites.selectedSite;
+  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    searchString = _useState6[0],
+    setSearchString = _useState6[1];
+  var _useState7 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    visibleColumnKeys = _useState8[0],
+    setVisibleColumnKeys = _useState8[1];
+  var _useState9 = (0, _react.useState)((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    contributorAccountIds = _useState10[0],
+    setContributorAccountIds = _useState10[1];
+  var _useState11 = (0, _react.useState)(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
+      value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
+      from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
+      to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
+    } : undefined),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    lastModified = _useState12[0],
+    setLastModified = _useState12[1];
+
+  // analytics related parameters
+  var searchCount = (0, _react.useRef)(0);
+  var userInteractions = (0, _userInteractions.useUserInteractions)();
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  var parameters = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, initialParameters), {}, {
+      cloudId: cloudId || '',
+      searchString: searchString,
+      lastModified: lastModified === null || lastModified === void 0 ? void 0 : lastModified.value,
+      lastModifiedFrom: lastModified === null || lastModified === void 0 ? void 0 : lastModified.from,
+      lastModifiedTo: lastModified === null || lastModified === void 0 ? void 0 : lastModified.to,
+      contributorAccountIds: (contributorAccountIds === null || contributorAccountIds === void 0 ? void 0 : contributorAccountIds.length) > 0 ? contributorAccountIds : undefined
+    });
+  }, [initialParameters, cloudId, searchString, lastModified, contributorAccountIds]);
+  var isParametersSet = (0, _react.useMemo)(function () {
+    return !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(function (v) {
+      return v !== undefined;
+    }).length > 1;
+  }, [cloudId, parameters]);
+  var parametersToSend = (0, _react.useMemo)(function () {
+    if (!isParametersSet) {
+      return undefined;
+    }
+    return _objectSpread(_objectSpread({}, parameters), overrideParameters !== null && overrideParameters !== void 0 ? overrideParameters : {});
+  }, [parameters, overrideParameters, isParametersSet]);
+  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
+      datasourceId: datasourceId,
+      parameters: parametersToSend,
+      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 hasNoConfluenceSites = availableSites && availableSites.length === 0;
+  (0, _react.useEffect)(function () {
+    if (availableSites) {
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: availableSites.length,
+        schemasCount: null
+      });
+    }
+  }, [fireEvent, availableSites]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  (0, _react.useEffect)(function () {
+    if (selectedConfluenceSite && (!cloudId || cloudId !== selectedConfluenceSite.cloudId)) {
+      setCloudId(selectedConfluenceSite.cloudId);
+    }
+  }, [cloudId, selectedConfluenceSite]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
+  var onSiteSelection = (0, _react.useCallback)(function (site) {
+    userInteractions.add(_types.DatasourceAction.INSTANCE_UPDATED);
+    setSearchString(undefined);
+    setLastModified(undefined);
+    setContributorAccountIds([]);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions]);
+  (0, _react.useEffect)(function () {
+    var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
+  var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages.confluenceSearchModalMessages.insertIssuesTitleManySites : _messages.confluenceSearchModalMessages.insertIssuesTitle;
+  var _useColumnResize = (0, _useColumnResize2.useColumnResize)(initialColumnCustomSizes),
+    columnCustomSizes = _useColumnResize.columnCustomSizes,
+    onColumnResize = _useColumnResize.onColumnResize;
+  var _useColumnWrapping = (0, _useColumnWrapping2.useColumnWrapping)(initialWrappedColumnKeys),
+    wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
+    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
+
+  // TODO: common functionality of all modals refactor in EDM-9573
+  var handleVisibleColumnKeysChange = (0, _react.useCallback)(function () {
+    var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var columnAction = (0, _utils.getColumnAction)(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractions.add(columnAction);
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys, userInteractions]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
+  var confluenceSearchTable = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_contentContainer.ContentContainer, {
+      withTableBorder: true
+    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+      testId: "confluence-search-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      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, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
+  var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  var confluenceSearchUrl = (0, _react.useMemo)(function () {
+    if (!selectedConfluenceSiteUrl || searchString === undefined) {
+      return undefined;
+    }
+    var params = new URLSearchParams();
+    // we are appending "text" without checking searchString as we need the url to have "text" when a user does an empty search
+    params.append('text', searchString);
+    if (contributorAccountIds.length > 0) {
+      params.append('contributors', contributorAccountIds.join(','));
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.value) {
+      params.append('lastModified', lastModified.value);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.from) {
+      params.append('from', lastModified === null || lastModified === void 0 ? void 0 : lastModified.from);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.to) {
+      params.append('to', lastModified === null || lastModified === void 0 ? void 0 : lastModified.to);
+    }
+    return "".concat(selectedConfluenceSiteUrl, "/wiki/search?").concat(params.toString());
+  }, [contributorAccountIds, lastModified, searchString, selectedConfluenceSiteUrl]);
+  var analyticsPayload = (0, _react.useMemo)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var fireInlineViewedEvent = (0, _react.useCallback)(function () {
+    fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    }));
+  }, [analyticsPayload, fireEvent, totalCount]);
+  var fireTableViewedEvent = (0, _react.useCallback)(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  (0, _react.useEffect)(function () {
+    var isResolved = status === 'resolved';
+    var isTableViewMode = currentViewMode === 'table';
+    var isInlineViewMode = currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  var renderTableModalContent = (0, _react.useCallback)(function () {
+    if (status === 'rejected') {
+      return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return (0, _react2.jsx)(_accessRequired.AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return (0, _react2.jsx)(_noResults.NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      if (hasConfluenceSearchParams !== undefined) {
+        return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
+          testId: "confluence-search-datasource-modal--empty-state"
+        });
+      }
+      return (0, _react2.jsx)(_contentContainer.ContentContainer, null, (0, _react2.jsx)(_initialStateView.InitialStateView, {
+        icon: (0, _react2.jsx)(_confluenceSearchInitialStateSvg.ConfluenceSearchInitialStateSVG, null),
+        title: _messages.confluenceSearchModalMessages.initialViewSearchTitle,
+        description: _messages.confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return confluenceSearchTable;
+  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  var renderInlineLinkModalContent = (0, _react.useCallback)(function () {
+    if (status === 'unauthorized') {
+      return (0, _react2.jsx)(_accessRequired.AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
+      return (0, _react2.jsx)(_countViewSmartLink.SmartCardPlaceholder, {
+        placeholderText: _messages.confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
+      });
+    } else {
+      return confluenceSearchUrl && (0, _react2.jsx)(_countViewSmartLink.SmartLink, {
+        url: confluenceSearchUrl
+      });
+    }
+  }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
+  var shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
+  var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
+    var _insertButtonClickedE;
+    if (!isParametersSet || !cloudId || !confluenceSearchUrl) {
+      return;
+    }
+    var insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: currentViewMode === 'inline' ? _types.DatasourceDisplay.DATASOURCE_INLINE : _types.DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: userInteractions.get()
+      }),
+      eventType: 'ui'
+    });
+    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
+    if (currentViewMode === 'inline') {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: confluenceSearchUrl
+        }
+      }, consumerEvent);
+    } else {
+      onInsert((0, _adf.buildDatasourceAdf)({
+        id: datasourceId,
+        parameters: _objectSpread(_objectSpread({}, parametersToSend), {}, {
+          cloudId: cloudId
+        }),
+        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
+              } : {});
+            })
+          }
+        }]
+      }, confluenceSearchUrl), consumerEvent);
+    }
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
+  var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractions.add(_types.DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  var onSearch = (0, _react.useCallback)(function (newSearchString, filters) {
+    searchCount.current++;
+    userInteractions.add(_types.DatasourceAction.QUERY_UPDATED);
+    if (filters) {
+      var editedOrCreatedBy = filters.editedOrCreatedBy,
+        lastModifiedList = filters.lastModified;
+      if (lastModifiedList) {
+        var updatedDateRangeOption = lastModifiedList.find(function (range) {
+          return range.value;
+        });
+        if ((updatedDateRangeOption === null || updatedDateRangeOption === void 0 ? void 0 : updatedDateRangeOption.optionType) === 'dateRange') {
+          setLastModified({
+            value: updatedDateRangeOption.value,
+            from: updatedDateRangeOption.from,
+            to: updatedDateRangeOption.to
+          });
+        }
+      }
+      if (editedOrCreatedBy) {
+        var accountIds = editedOrCreatedBy.map(function (user) {
+          return user.value;
+        });
+        setContributorAccountIds(accountIds);
+      }
+    }
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions]);
+  var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
+  return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
+    defaultMessages: _en.default,
+    loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
+  }, (0, _react2.jsx)(_datasourceModal.DatasourceModal, {
+    testId: "confluence-search-datasource-modal",
+    onClose: onCancel
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_siteSelector.SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    selectedSite: selectedConfluenceSite,
+    testId: "confluence-search-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoConfluenceSites && !disableDisplayDropdown && (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  })), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoConfluenceSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
+    xcss: inputContainerStyles
+  }, (0, _react2.jsx)(_confluenceSearchContainer.default, {
+    isSearching: status === 'loading',
+    onSearch: onSearch,
+    parameters: parameters
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
+    title: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
+    description: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
+    testId: 'no-confluence-instances-content'
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && (0, _react2.jsx)(_searchCount.default, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), (0, _react2.jsx)(_cancelButton.CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && (0, _react2.jsx)(_standardButton.default, {
+    appearance: "primary",
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
+    testId: "confluence-search-datasource-modal--insert-button"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.confluenceSearchModalMessages.insertResultsButtonText)))));
+};

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -11,7 +11,7 @@ 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 _button = _interopRequireDefault(require("@atlaskit/button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -34,17 +34,19 @@ var _initialStateView = require("../../common/initial-state-view");
 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/DatasourceContext");
+var _DatasourceContextProvider = require("../../common/modal/datasource-context/DatasourceContextProvider");
 var _datasourceModal = require("../../common/modal/datasource-modal");
 var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
 var _searchCount = _interopRequireDefault(require("../../common/modal/search-count"));
 var _siteSelector = require("../../common/modal/site-selector");
+var _datasourcesTableInModalPreview = _interopRequireDefault(require("../../datasources-table-in-modal-preview"));
 var _issueLikeTable = require("../../issue-like-table");
-var _useColumnResize2 = require("../../issue-like-table/use-column-resize");
-var _useColumnWrapping2 = require("../../issue-like-table/use-column-wrapping");
 var _utils = require("../../issue-like-table/utils");
 var _confluenceSearchContainer = _interopRequireDefault(require("../confluence-search-container"));
 var _confluenceSearchInitialStateSvg = require("./confluence-search-initial-state-svg");
 var _messages = require("./messages");
+var _ModalOld = require("./ModalOld");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var inputContainerStyles = (0, _primitives.xcss)({
@@ -54,8 +56,6 @@ var inputContainerStyles = (0, _primitives.xcss)({
 });
 var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var datasourceId = props.datasourceId,
-    initialColumnCustomSizes = props.columnCustomSizes,
-    initialWrappedColumnKeys = props.wrappedColumnKeys,
     onCancel = props.onCancel,
     onInsert = props.onInsert,
     _props$viewMode = props.viewMode,
@@ -178,12 +178,6 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages.confluenceSearchModalMessages.insertIssuesTitleManySites : _messages.confluenceSearchModalMessages.insertIssuesTitle;
-  var _useColumnResize = (0, _useColumnResize2.useColumnResize)(initialColumnCustomSizes),
-    columnCustomSizes = _useColumnResize.columnCustomSizes,
-    onColumnResize = _useColumnResize.onColumnResize;
-  var _useColumnWrapping = (0, _useColumnWrapping2.useColumnWrapping)(initialWrappedColumnKeys),
-    wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
-    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
 
   // TODO: common functionality of all modals refactor in EDM-9573
   var handleVisibleColumnKeysChange = (0, _react.useCallback)(function () {
@@ -193,13 +187,10 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys, userInteractions]);
-
-  // TODO: further refactoring in EDM-9573
-  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
   var confluenceSearchTable = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_contentContainer.ContentContainer, {
       withTableBorder: true
-    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+    }, (0, _react2.jsx)(_datasourcesTableInModalPreview.default, {
       testId: "confluence-search-datasource-table",
       status: status,
       columns: columns,
@@ -209,13 +200,9 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      extensionKey: extensionKey,
-      columnCustomSizes: columnCustomSizes,
-      onColumnResize: onColumnResize,
-      wrappedColumnKeys: wrappedColumnKeys,
-      onWrappedColumnChange: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+      extensionKey: extensionKey
     }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -317,6 +304,9 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     }
   }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
   var shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
+  var _useDatasourceContext = (0, _DatasourceContext.useDatasourceContext)(),
+    columnCustomSizes = _useDatasourceContext.columnCustomSizes,
+    wrappedColumnKeys = _useDatasourceContext.wrappedColumnKeys;
   var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
     var _insertButtonClickedE;
     if (!isParametersSet || !cloudId || !confluenceSearchUrl) {
@@ -445,7 +435,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "confluence-search-modal--cancel-button"
-  }), !hasNoConfluenceSites && (0, _react2.jsx)(_standardButton.default, {
+  }), !hasNoConfluenceSites && (0, _react2.jsx)(_button.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
@@ -462,5 +452,10 @@ var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
 var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
-  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _react2.jsx)(PlainConfluenceSearchConfigModal, props)));
+  return (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _platformFeatureFlags.fg)('platform.linking-platform.datasources.use-refactored-config-modal') ? (0, _react2.jsx)(_DatasourceContextProvider.DatasourceContextProvider, {
+    initialColumnCustomSizes: props.columnCustomSizes,
+    initialWrappedColumnKeys: props.wrappedColumnKeys
+  }, (0, _react2.jsx)(PlainConfluenceSearchConfigModal, props)) :
+  // TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
+  (0, _react2.jsx)(_ModalOld.PlainConfluenceSearchConfigModal, props)));
 });