@atlaskit/link-datasource 2.9.0 → 2.9.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-datasource
 
+## 2.9.2
+
+### Patch Changes
+
+- [#126362](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126362)
+  [`9e45954d2bba0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e45954d2bba0) -
+  We are testing refactoring datasource table view to use react-sweet-state behind a feature flag.
+  If this is successful it will be available in a later release.
+- Updated dependencies
+
+## 2.9.1
+
+### Patch Changes
+
+- [#124652](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124652)
+  [`265b4500eb956`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/265b4500eb956) -
+  Extract ADF creation related code and move into InsertButton
+
 ## 2.9.0
 
 ### Minor Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -62,6 +62,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     setResponseItems = _useState14[1];
   var _useState15 = (0, _react.useState)(initialEmptyArray),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    responseItemIds = _useState16[0],
     setResponseItemIds = _useState16[1];
   var _useState17 = (0, _react.useState)(true),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
@@ -422,6 +423,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     status: status,
     onNextPage: onNextPage,
     responseItems: responseItems,
+    responseItemIds: responseItemIds,
     reset: reset,
     loadDatasourceDetails: loadDatasourceDetails,
     hasNextPage: hasNextPage,

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -141,6 +141,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     status = _useDatasourceTableSt.status,
     onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
     reset = _useDatasourceTableSt.reset,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
     hasNextPage = _useDatasourceTableSt.hasNextPage,
@@ -358,6 +359,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
+    responseItemIds: responseItemIds,
     visibleColumnKeys: visibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     datasourceId: datasourceId,

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -74,6 +74,7 @@ var LoadingView = function LoadingView() {
 var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
     responseItems = props.responseItems,
+    responseItemIds = props.responseItemIds,
     visibleColumnKeys = props.visibleColumnKeys,
     onNextPage = props.onNextPage,
     hasNextPage = props.hasNextPage,
@@ -91,13 +92,14 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
       status: status,
       columns: columns,
       items: responseItems,
+      itemIds: responseItemIds,
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange
     }));
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, responseItemIds, status, visibleColumnKeys]);
   var renderAssetsContentView = (0, _react.useCallback)(function () {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others

package/dist/cjs/ui/common/modal/datasource-modal/createDatasourceModal.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDatasourceModal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
+var _userInteractions = require("../../../../contexts/user-interactions");
+var _datasourceContext = require("../datasource-context");
+var _useViewModeContext = require("../mode-switcher/useViewModeContext");
+/**
+ * @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 createDatasourceModal = exports.createDatasourceModal = function createDatasourceModal(_ref) {
+  var isValidParameters = _ref.isValidParameters,
+    dataProvider = _ref.dataProvider,
+    ModalContent = _ref.component;
+  return function (props) {
+    var datasourceId = props.datasourceId,
+      visibleColumnKeys = props.visibleColumnKeys,
+      columnCustomSizes = props.columnCustomSizes,
+      wrappedColumnKeys = props.wrappedColumnKeys,
+      parameters = props.parameters,
+      onInsert = props.onInsert,
+      viewMode = props.viewMode;
+    return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+      data: {
+        source: 'datasourceConfigModal',
+        component: 'datasourceConfigModal',
+        attributes: {
+          dataProvider: dataProvider
+        }
+      }
+    }, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _react2.jsx)(_datasourceContext.DatasourceContextProvider, {
+      datasourceId: datasourceId,
+      initialVisibleColumnKeys: visibleColumnKeys,
+      initialColumnCustomSizes: columnCustomSizes,
+      initialWrappedColumnKeys: wrappedColumnKeys,
+      initialParameters: parameters,
+      isValidParameters: isValidParameters,
+      onInsert: onInsert
+    }, (0, _react2.jsx)(_useViewModeContext.DatasourceViewModeProvider, {
+      viewMode: viewMode !== null && viewMode !== void 0 ? viewMode : DEFAULT_VIEW_MODE
+    }, (0, _react2.jsx)(ModalContent, props))))));
+  };
+};

package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -1,15 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _types = require("../../../../analytics/types");
+var _userInteractions = require("../../../../contexts/user-interactions");
 var _issueLikeTable = require("../../../issue-like-table");
 var _datasourceContext = require("../datasource-context");
+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 Table = function Table(props) {
   var _useDatasourceContext = (0, _datasourceContext.useDatasourceContext)(),
     columnCustomSizes = _useDatasourceContext.columnCustomSizes,
@@ -22,19 +27,27 @@ var Table = function Table(props) {
     status = _useDatasourceContext2.status,
     onNextPage = _useDatasourceContext2.onNextPage,
     responseItems = _useDatasourceContext2.responseItems,
+    responseItemIds = _useDatasourceContext2.responseItemIds,
     hasNextPage = _useDatasourceContext2.hasNextPage,
     columns = _useDatasourceContext2.columns,
     defaultVisibleColumnKeys = _useDatasourceContext2.defaultVisibleColumnKeys,
     loadDatasourceDetails = _useDatasourceContext2.loadDatasourceDetails,
     _useDatasourceContext3 = _useDatasourceContext2.extensionKey,
     extensionKey = _useDatasourceContext3 === void 0 ? null : _useDatasourceContext3;
+  var userInteractions = (0, _userInteractions.useUserInteractions)();
+  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]);
   return /*#__PURE__*/_react.default.createElement(_issueLikeTable.IssueLikeDataTableView, (0, _extends2.default)({}, props, {
     status: status,
     columns: columns,
     items: responseItems,
+    itemIds: responseItemIds,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: onNextPage,
+    onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     extensionKey: extensionKey,

package/dist/cjs/ui/common/modal/insert-button/index.js

@@ -24,6 +24,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
   var testId = _ref.testId,
     url = _ref.url,
     getAnalyticsPayload = _ref.getAnalyticsPayload,
+    overwriteParameters = _ref.overwriteParameters,
     children = _ref.children;
   var _useDatasourceContext = (0, _datasourceContext.useDatasourceContext)(),
     datasourceId = _useDatasourceContext.datasourceId,
@@ -48,13 +49,13 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
     }
     var insertButtonClickedEvent = analyticsEvent.update({
       actionSubjectId: 'insert',
-      attributes: _objectSpread(_objectSpread({}, getAnalyticsPayload()), {}, {
+      attributes: _objectSpread({
         totalItemCount: totalCount || 0,
         displayedColumnCount: visibleColumnCount.current,
         display: currentViewMode === 'inline' ? _types.DatasourceDisplay.DATASOURCE_INLINE : _types.DatasourceDisplay.DATASOURCE_TABLE,
         searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
         actions: userInteractions.get()
-      }),
+      }, getAnalyticsPayload()),
       eventType: 'ui'
     });
     var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
@@ -69,7 +70,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
     } else {
       onInsert((0, _adf.buildDatasourceAdf)({
         id: datasourceId,
-        parameters: parameters,
+        parameters: overwriteParameters ? overwriteParameters(parameters) : parameters,
         views: [{
           type: 'table',
           properties: {
@@ -88,7 +89,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
         }]
       }, url), consumerEvent);
     }
-  }, [isValidParameters, parameters, url, getAnalyticsPayload, totalCount, visibleColumnCount, currentViewMode, userInteractions, onInsert, datasourceId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  }, [columnCustomSizes, currentViewMode, datasourceId, getAnalyticsPayload, isValidParameters, onInsert, overwriteParameters, parameters, totalCount, url, userInteractions, visibleColumnCount, visibleColumnKeys, wrappedColumnKeys]);
   return (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,

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

@@ -132,6 +132,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     status = _useDatasourceTableSt.status,
     onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -204,6 +205,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       status: status,
       columns: columns,
       items: responseItems,
+      itemIds: responseItemIds,
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
@@ -215,7 +217,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       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]);
+  }, [status, columns, responseItems, responseItemIds, 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;

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

@@ -34,6 +34,7 @@ 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 _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");
@@ -50,7 +51,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 inputContainerStyles = (0, _primitives.xcss)({
   alignItems: 'baseline',
   display: 'flex',
@@ -78,32 +78,44 @@ var useUpdateParametersOnFormUpdate = function useUpdateParametersOnFormUpdate(c
 };
 var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var onCancel = props.onCancel,
-    initialParameters = props.parameters,
     urlBeingEdited = props.url,
     _props$disableDisplay = props.disableDisplayDropdown,
     disableDisplayDropdown = _props$disableDisplay === void 0 ? false : _props$disableDisplay,
     overrideParameters = props.overrideParameters;
   var _useViewModeContext = (0, _useViewModeContext2.useViewModeContext)(),
     currentViewMode = _useViewModeContext.currentViewMode;
-  var _useState = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
+  var _useDatasourceContext2 = (0, _datasourceContext.useDatasourceContext)(),
+    visibleColumnKeys = _useDatasourceContext2.visibleColumnKeys,
+    _useDatasourceContext3 = _useDatasourceContext2.tableState,
+    reset = _useDatasourceContext3.reset,
+    status = _useDatasourceContext3.status,
+    responseItems = _useDatasourceContext3.responseItems,
+    _useDatasourceContext4 = _useDatasourceContext3.extensionKey,
+    extensionKey = _useDatasourceContext4 === void 0 ? null : _useDatasourceContext4,
+    destinationObjectTypes = _useDatasourceContext3.destinationObjectTypes,
+    totalCount = _useDatasourceContext3.totalCount,
+    columns = _useDatasourceContext3.columns,
+    visibleColumnCount = _useDatasourceContext2.visibleColumnCount,
+    parameters = _useDatasourceContext2.parameters;
+  var _useState = (0, _react.useState)(parameters === null || parameters === void 0 ? void 0 : parameters.cloudId),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     cloudId = _useState2[0],
     setCloudId = _useState2[1];
   var _useAvailableSites = (0, _useAvailableSites2.useAvailableSites)('confluence', cloudId),
     availableSites = _useAvailableSites.availableSites,
     selectedConfluenceSite = _useAvailableSites.selectedSite;
-  var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
+  var _useState3 = (0, _react.useState)(parameters === null || parameters === void 0 ? void 0 : parameters.searchString),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     searchString = _useState4[0],
     setSearchString = _useState4[1];
-  var _useState5 = (0, _react.useState)((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
+  var _useState5 = (0, _react.useState)((parameters === null || parameters === void 0 ? void 0 : parameters.contributorAccountIds) || []),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     contributorAccountIds = _useState6[0],
     setContributorAccountIds = _useState6[1];
-  var _useState7 = (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
+  var _useState7 = (0, _react.useState)(parameters !== null && parameters !== void 0 && parameters.lastModified ? {
+      value: parameters === null || parameters === void 0 ? void 0 : parameters.lastModified,
+      from: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedFrom,
+      to: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedTo
     } : undefined),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     lastModified = _useState8[0],
@@ -113,19 +125,6 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   var searchCount = (0, _react.useRef)(0);
   var userInteractions = (0, _userInteractions.useUserInteractions)();
   useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
-  var _useDatasourceContext2 = (0, _datasourceContext.useDatasourceContext)(),
-    visibleColumnKeys = _useDatasourceContext2.visibleColumnKeys,
-    _useDatasourceContext3 = _useDatasourceContext2.tableState,
-    reset = _useDatasourceContext3.reset,
-    status = _useDatasourceContext3.status,
-    responseItems = _useDatasourceContext3.responseItems,
-    _useDatasourceContext4 = _useDatasourceContext3.extensionKey,
-    extensionKey = _useDatasourceContext4 === void 0 ? null : _useDatasourceContext4,
-    destinationObjectTypes = _useDatasourceContext3.destinationObjectTypes,
-    totalCount = _useDatasourceContext3.totalCount,
-    columns = _useDatasourceContext3.columns,
-    visibleColumnCount = _useDatasourceContext2.visibleColumnCount,
-    parameters = _useDatasourceContext2.parameters;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
@@ -319,7 +318,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   }, (0, _react2.jsx)(_confluenceSearchContainer.default, {
     isSearching: status === 'loading',
     onSearch: onSearch,
-    parameters: isValidParameters(parameters) ? parameters : {
+    parameters: parameters && isValidParameters(parameters) ? parameters : {
       cloudId: ''
     }
   })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
@@ -350,19 +349,16 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = (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)(_datasourceContext.DatasourceContextProvider, {
-    datasourceId: props.datasourceId,
-    initialVisibleColumnKeys: props.visibleColumnKeys,
-    initialColumnCustomSizes: props.columnCustomSizes,
-    initialWrappedColumnKeys: props.wrappedColumnKeys,
-    initialParameters: props.parameters,
-    isValidParameters: isValidParameters,
-    onInsert: props.onInsert
-  }, (0, _react2.jsx)(_useViewModeContext2.DatasourceViewModeProvider, {
-    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
-  }, (0, _react2.jsx)(PlainConfluenceSearchConfigModal, props))) :
-  // TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
-  (0, _react2.jsx)(_ModalOld.PlainConfluenceSearchConfigModal, props))));
-});
+var ConnectedConfluenceSearchConfigModal = (0, _createDatasourceModal.createDatasourceModal)({
+  isValidParameters: isValidParameters,
+  dataProvider: 'confluence-search',
+  component: PlainConfluenceSearchConfigModal
+});
+var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-datasources-use-refactored-config-modal')) {
+    return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(ConnectedConfluenceSearchConfigModal, 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.PlainConfluenceSearchConfigModal, props)))));
+};

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

@@ -58,6 +58,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     status = _useDatasourceTableSt.status,
     onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -169,6 +170,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
+    itemIds: responseItemIds,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     status: status,

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

@@ -8,7 +8,6 @@ exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = ex
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -18,6 +17,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
@@ -36,17 +36,16 @@ var _draggableTableHeading = require("./draggable-table-heading");
 var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _renderType = require("./render-type");
 var _styled2 = require("./styled");
+var _tableCellContent = require("./table-cell-content");
+var _truncateTextTag = require("./truncate-text-tag");
 var _useIsOnScreen = require("./useIsOnScreen");
 var _utils = require("./utils");
-var _styled$td;
-/**
+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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = (0, _react2.css)({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -55,11 +54,6 @@ var tableHeadStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _zindex.stickyTableHeadersIndex
 });
-var truncateTextStyles = (0, _react2.css)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
 var columnPickerWidth = 80;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ColumnPickerHeader = _styled.default.th((0, _defineProperty2.default)({}, "".concat((0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type')), {
@@ -83,28 +77,6 @@ var truncateStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.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: _styled2.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((0, _styled2.withTablePluginBodyPrefix)('&:first-child')), {
-  paddingLeft: "var(--ds-space-100, 8px)"
-}), (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.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));
 var tableContainerStyles = (0, _react2.css)({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -280,18 +252,12 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-var TruncateTextTag = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
-    css: truncateTextStyles
-  }, props, {
-    ref: ref
-  }), props.children);
-});
 var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   var testId = _ref5.testId,
     onNextPage = _ref5.onNextPage,
     onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
     items = _ref5.items,
+    itemIds = _ref5.itemIds,
     columns = _ref5.columns,
     _ref5$renderItem = _ref5.renderItem,
     renderItem = _ref5$renderItem === void 0 ? _renderType.renderType : _ref5$renderItem,
@@ -400,14 +366,15 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return {
       key: 'loading',
       cells: headerColumns.map(function (column) {
-        return _objectSpread(_objectSpread({}, column), {}, {
+        return {
           content: (0, _react2.jsx)(_linkingCommon.Skeleton, {
             borderRadius: 8,
             width: "100%",
             height: 14,
             testId: "issues-table-row-loading"
-          })
-        });
+          }),
+          key: column.key
+        };
       })
     };
   }, [headerColumns]);
@@ -493,13 +460,36 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   var tableRows = (0, _react.useMemo)(function () {
-    return items.map(function (newRowData, rowIndex) {
+    return (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
       return {
-        key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
+        key: id,
         cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
-          var _newRowData$key;
           var key = _ref12.key,
             type = _ref12.type;
+          return {
+            key: key,
+            columnKey: key,
+            content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+              id: id,
+              columnKey: key,
+              columnType: type,
+              wrappedColumnKeys: wrappedColumnKeys,
+              renderItem: renderItem
+            }),
+            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+          };
+        }),
+        ref: rowIndex === items.length - 1 ? function (el) {
+          return setLastRowElement(el);
+        } : undefined
+      };
+    }) : items.map(function (newRowData, rowIndex) {
+      return {
+        key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
+        cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
+          var _newRowData$key;
+          var key = _ref13.key,
+            type = _ref13.type;
           // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
           var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
           var values = Array.isArray(value) ? value : [value];
@@ -518,7 +508,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
           // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
           , {
-            tag: TruncateTextTag,
+            tag: _truncateTextTag.TruncateTextTag,
             content: stringifiedContent,
             testId: "issues-table-cell-tooltip"
           }, renderedValues) : renderedValues;
@@ -533,7 +523,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         } : undefined
       };
     });
-  }, [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
+  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -624,10 +614,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, (0, _react2.jsx)("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref14, cellIndex) {
-    var key = _ref14.key,
-      content = _ref14.content,
-      width = _ref14.width;
+  }, headerColumns.map(function (_ref15, cellIndex) {
+    var key = _ref15.key,
+      content = _ref15.content,
+      width = _ref15.width;
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
@@ -644,10 +634,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
     if (isEditable) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref15) {
-        var cells = _ref15.cells;
-        var cell = cells.find(function (_ref16) {
-          var cellKey = _ref16.key;
+      var previewRows = tableRows.map(function (_ref16) {
+        var cells = _ref16.cells;
+        var cell = cells.find(function (_ref17) {
+          var cellKey = _ref17.key;
           return cellKey === key;
         });
         if (cell) {
@@ -690,18 +680,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref17) {
-    var key = _ref17.key,
-      cells = _ref17.cells,
-      ref = _ref17.ref;
+  }, rows.map(function (_ref18) {
+    var key = _ref18.key,
+      cells = _ref18.cells,
+      ref = _ref18.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref18, cellIndex) {
-      var cellKey = _ref18.key,
-        content = _ref18.content,
-        width = _ref18.width;
+    }, cells.map(function (_ref19, cellIndex) {
+      var cellKey = _ref19.key,
+        content = _ref19.content,
+        width = _ref19.width;
       var isLastCell = cellIndex === cells.length - 1;
       var loadingRowStyle = (0, _utils.getWidthCss)({
         shouldUseWidth: shouldUseWidth,
@@ -713,7 +703,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return (0, _react2.jsx)(TableCell, {
+      return (0, _react2.jsx)(_styled2.TableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: isEditable && isLastCell ? 2 : undefined