@atlaskit/link-datasource 0.19.1 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 0.21.0
+
+### Minor Changes
+
+- [`0b68480a270`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b68480a270) - Update logic to call `/details` only when full schema is required and added field list, includeSchema flag to `/data` call
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.20.0
+
+### Minor Changes
+
+- [`0407e628d5b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0407e628d5b) - [ux] Fix some table bugs
+
 ## 0.19.1
 
 ### Patch Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -11,116 +11,196 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _linkClientExtension = require("@atlaskit/link-client-extension");
-var useDatasourceTableState = function useDatasourceTableState(datasourceId, parameters, fields) {
+var useDatasourceTableState = function useDatasourceTableState(_ref) {
+  var datasourceId = _ref.datasourceId,
+    parameters = _ref.parameters,
+    _ref$fieldKeys = _ref.fieldKeys,
+    fieldKeys = _ref$fieldKeys === void 0 ? [] : _ref$fieldKeys;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     defaultVisibleColumnKeys = _useState2[0],
     setDefaultVisibleColumnKeys = _useState2[1];
-  var _useState3 = (0, _react.useState)('empty'),
+  var _useState3 = (0, _react.useState)([]),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
+    lastRequestedFieldKeys = _useState4[0],
+    setLastRequestedFieldKeys = _useState4[1];
+  var _useState5 = (0, _react.useState)('empty'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    responseItems = _useState6[0],
-    setResponseItems = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    hasNextPage = _useState8[0],
-    setHasNextPage = _useState8[1];
-  var _useState9 = (0, _react.useState)(undefined),
+    responseItems = _useState8[0],
+    setResponseItems = _useState8[1];
+  var _useState9 = (0, _react.useState)(true),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    nextCursor = _useState10[0],
-    setNextCursor = _useState10[1];
-  var _useState11 = (0, _react.useState)([]),
+    hasNextPage = _useState10[0],
+    setHasNextPage = _useState10[1];
+  var _useState11 = (0, _react.useState)(undefined),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    columns = _useState12[0],
-    setColumns = _useState12[1];
-  var _useState13 = (0, _react.useState)(undefined),
+    nextCursor = _useState12[0],
+    setNextCursor = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    totalIssueCount = _useState14[0],
-    setTotalIssueCount = _useState14[1];
+    columns = _useState14[0],
+    setColumns = _useState14[1];
+  var _useState15 = (0, _react.useState)(undefined),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    totalIssueCount = _useState16[0],
+    setTotalIssueCount = _useState16[1];
   var _useDatasourceClientE = (0, _linkClientExtension.useDatasourceClientExtension)(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
-  var loadDatasourceDetails = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(parameters) {
-      var result;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
+  var loadDatasourceDetails = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var result, isColumnNotPresentInCurrentColumnsList, allColumns, newColumns;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (parameters) {
             _context.next = 2;
-            return getDatasourceDetails(datasourceId, {
-              parameters: parameters
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _context.next = 4;
+          return getDatasourceDetails(datasourceId, {
+            parameters: parameters
+          });
+        case 4:
+          result = _context.sent;
+          isColumnNotPresentInCurrentColumnsList = function isColumnNotPresentInCurrentColumnsList(col) {
+            return !columns.find(function (column) {
+              return column.key === col.key;
             });
-          case 2:
-            result = _context.sent;
-            setColumns(result.schema.properties);
-            setDefaultVisibleColumnKeys(result.schema.defaultProperties);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [datasourceId, getDatasourceDetails]);
-  (0, _react.useEffect)(function () {
-    if (parameters) {
-      void loadDatasourceDetails(parameters);
+          };
+          allColumns = result.schema.properties;
+          newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
+          newColumns.length > 0 && setColumns([].concat((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(newColumns)));
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [columns, datasourceId, getDatasourceDetails, parameters]);
+  var applySchemaProperties = (0, _react.useCallback)(function (properties) {
+    if (columns.length === 0) {
+      setColumns(properties);
+    }
+    var defaultProperties = properties.map(function (prop) {
+      return prop.key;
+    });
+
+    // when loading for the first time, we will need to set default visible props as /data does not give you that info
+    // also, since we dont pass any fields, we will need to set this info as lastRequestedFieldKeys
+    if (defaultVisibleColumnKeys.length === 0) {
+      setDefaultVisibleColumnKeys(defaultProperties);
+    }
+    if (lastRequestedFieldKeys.length === 0) {
+      setLastRequestedFieldKeys(defaultProperties);
     }
-  }, [loadDatasourceDetails, parameters]);
+  }, [columns.length, defaultVisibleColumnKeys.length, lastRequestedFieldKeys === null || lastRequestedFieldKeys === void 0 ? void 0 : lastRequestedFieldKeys.length]);
   var onNextPage = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    var _yield$getDatasourceD, data, nextPageCursor, totalIssues;
+    var requestInfo,
+      _requestInfo$isSchema,
+      isSchemaFromData,
+      shouldRequestFirstPage,
+      datasourceDataRequest,
+      _yield$getDatasourceD,
+      data,
+      nextPageCursor,
+      totalIssues,
+      schema,
+      _args2 = arguments;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
+          requestInfo = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
           if (parameters) {
-            _context2.next = 2;
+            _context2.next = 3;
             break;
           }
           return _context2.abrupt("return");
-        case 2:
-          setStatus('loading');
-          _context2.next = 5;
-          return getDatasourceData(datasourceId, {
+        case 3:
+          _requestInfo$isSchema = requestInfo.isSchemaFromData, isSchemaFromData = _requestInfo$isSchema === void 0 ? true : _requestInfo$isSchema, shouldRequestFirstPage = requestInfo.shouldRequestFirstPage;
+          datasourceDataRequest = {
             parameters: parameters,
-            pageSize: 10,
-            pageCursor: nextCursor,
-            fields: fields
-          });
-        case 5:
+            pageSize: 20,
+            pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
+            fields: fieldKeys,
+            includeSchema: isSchemaFromData
+          };
+          setStatus('loading');
+          _context2.next = 8;
+          return getDatasourceData(datasourceId, datasourceDataRequest);
+        case 8:
           _yield$getDatasourceD = _context2.sent;
           data = _yield$getDatasourceD.data;
           nextPageCursor = _yield$getDatasourceD.nextPageCursor;
           totalIssues = _yield$getDatasourceD.totalIssues;
+          schema = _yield$getDatasourceD.schema;
           setTotalIssueCount(totalIssues);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
+            if (shouldRequestFirstPage) {
+              return data;
+            }
             return [].concat((0, _toConsumableArray2.default)(currentResponseItems), (0, _toConsumableArray2.default)(data));
           });
           setStatus('resolved');
           setHasNextPage(Boolean(nextPageCursor));
-        case 14:
+          if (fieldKeys.length > 0) {
+            setLastRequestedFieldKeys(fieldKeys);
+          }
+          if (isSchemaFromData && schema) {
+            applySchemaProperties(schema.properties);
+          }
+        case 20:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
-  })), [parameters, getDatasourceData, datasourceId, nextCursor, fields]);
+  })), [parameters, fieldKeys, getDatasourceData, datasourceId, nextCursor, applySchemaProperties]);
   var reset = (0, _react.useCallback)(function () {
     setStatus('empty');
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
     setTotalIssueCount(undefined);
+    setLastRequestedFieldKeys([]);
   }, []);
+
+  // this takes care of requesting /data initally
+  (0, _react.useEffect)(function () {
+    var isEmptyState = Object.keys(parameters || {}).length > 0 && lastRequestedFieldKeys.length === 0 && status === 'empty';
+    if (isEmptyState) {
+      void onNextPage();
+    }
+  }, [lastRequestedFieldKeys, loadDatasourceDetails, onNextPage, parameters, status]);
+
+  // this takes care of requesting /data when user selects/unselects a column
+  (0, _react.useEffect)(function () {
+    var canHaveNewColumns = fieldKeys.length > 0 && lastRequestedFieldKeys.length > 0;
+    if (canHaveNewColumns) {
+      var hasNewColumns = fieldKeys.some(function (key) {
+        return !lastRequestedFieldKeys.includes(key);
+      });
+      if (!hasNewColumns) {
+        return;
+      }
+      reset();
+      void onNextPage({
+        isSchemaFromData: false,
+        // since this is not inital load, we will already have schema
+        shouldRequestFirstPage: true
+      });
+    }
+  }, [fieldKeys, lastRequestedFieldKeys, onNextPage, reset]);
   return {
     status: status,
     onNextPage: onNextPage,
     responseItems: responseItems,
     reset: reset,
+    loadDatasourceDetails: loadDatasourceDetails,
     hasNextPage: hasNextPage,
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,

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

@@ -28,7 +28,11 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     parameters = _ref.parameters,
     visibleColumnKeys = _ref.visibleColumnKeys,
     onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange;
-  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)(datasourceId, parameters),
+  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
+      datasourceId: datasourceId,
+      parameters: parameters,
+      fieldKeys: visibleColumnKeys
+    }),
     reset = _useDatasourceTableSt.reset,
     status = _useDatasourceTableSt.status,
     onNextPage = _useDatasourceTableSt.onNextPage,
@@ -36,7 +40,8 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    totalIssueCount = _useDatasourceTableSt.totalIssueCount;
+    totalIssueCount = _useDatasourceTableSt.totalIssueCount,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
   (0, _react.useEffect)(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -49,6 +54,7 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     hasNextPage: hasNextPage,
     items: responseItems,
     onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,

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

@@ -11,16 +11,21 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _select = require("@atlaskit/select");
+var _messages = require("./messages");
 var _excluded = ["isOpen"];
 /** @jsx jsx */
 var ColumnPicker = function ColumnPicker(_ref) {
-  var columns = _ref.columns,
+  var isDatasourceLoading = _ref.isDatasourceLoading,
+    columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
-    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
+    onOpen = _ref.onOpen;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     allOptions = _useState2[0],
@@ -61,7 +66,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
-  var onPopupOpen = (0, _react.useCallback)(function () {
+  var sortSelectedColumnsTop = (0, _react.useCallback)(function () {
     if (!allOptions.length) {
       return;
     }
@@ -73,6 +78,10 @@ var ColumnPicker = function ColumnPicker(_ref) {
     var sortedOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  var handleOpen = (0, _react.useCallback)(function () {
+    onOpen && void onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
   return (0, _react2.jsx)(_select.PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -81,14 +90,14 @@ var ColumnPicker = function ColumnPicker(_ref) {
     },
     options: allOptions,
     value: selectedOptions,
-    onOpen: onPopupOpen,
+    onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
+    isLoading: allOptions.length === 0,
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
@@ -103,7 +112,8 @@ var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button"
+        testId: "column-picker-trigger-button",
+        isDisabled: isDatasourceLoading
       }));
     }
   });

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

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

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IssueLikeDataTableView = exports.EmptyState = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -87,12 +89,13 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   var testId = _ref2.testId,
     onNextPage = _ref2.onNextPage,
+    onLoadDatasourceDetails = _ref2.onLoadDatasourceDetails,
     items = _ref2.items,
     columns = _ref2.columns,
     _ref2$renderItem = _ref2.renderItem,
@@ -112,14 +115,21 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isDragPreview = _useState4[0],
     setIsDragPreview = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasFullSchema = _useState6[0],
+    setHasFullSchema = _useState6[1];
   var isBottomOfTableVisibleRaw = (0, _useIsOnScreen.useIsOnScreen)(lastRowElement);
   var containerRef = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(function () {
+  var _useState7 = (0, _react.useState)(function () {
       return orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys));
     }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    orderedColumns = _useState6[0],
-    setOrderedColumns = _useState6[1];
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    orderedColumns = _useState8[0],
+    setOrderedColumns = _useState8[1];
+  (0, _react.useEffect)(function () {
+    setOrderedColumns(orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
+  }, [columns, visibleColumnKeys]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref3) {
@@ -129,7 +139,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
 
-  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
 
@@ -163,8 +173,10 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     };
   });
   (0, _react.useEffect)(function () {
-    if (status === 'empty' || isBottomOfTableVisibleRaw && hasNextPage && status !== 'loading') {
-      void onNextPage();
+    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
+      void onNextPage({
+        isSchemaFromData: false
+      });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
   var dndPreviewHeight = 0;
@@ -270,6 +282,33 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   var onSelectedColumnKeysChange = (0, _react.useCallback)(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
+  var handlePickerOpen = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!hasFullSchema) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _context.prev = 2;
+          _context.next = 5;
+          return onLoadDatasourceDetails();
+        case 5:
+          setHasFullSchema(true);
+          _context.next = 11;
+          break;
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](2);
+          setHasFullSchema(false);
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 8]]);
+  })), [hasFullSchema, onLoadDatasourceDetails]);
   return (0, _react2.jsx)("div", {
     ref: containerRef,
     css: isDragPreview ? containerDragPreviewStyles : null
@@ -279,16 +318,16 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: tableHeadStyles
-  }, (0, _react2.jsx)("tr", null, headColumns.map(function (_ref10, cellIndex) {
-    var key = _ref10.key,
-      content = _ref10.content,
-      maxWidth = _ref10.maxWidth;
+  }, (0, _react2.jsx)("tr", null, headColumns.map(function (_ref11, cellIndex) {
+    var key = _ref11.key,
+      content = _ref11.content,
+      maxWidth = _ref11.maxWidth;
     var TruncatedContent = function TruncatedContent() {
       return (0, _react2.jsx)("div", {
         css: truncatedCellStyles
       }, content);
     };
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -311,23 +350,25 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), onVisibleColumnKeysChange && (0, _react2.jsx)("th", {
     css: columnPickerHeaderStyles
   }, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
-    columns: orderedColumns,
-    selectedColumnKeys: visibleColumnKeys,
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange
+    columns: hasFullSchema ? orderedColumns : [],
+    selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
+    isDatasourceLoading: status === 'loading',
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
   })))), (0, _react2.jsx)("tbody", {
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref11) {
-    var key = _ref11.key,
-      cells = _ref11.cells,
-      ref = _ref11.ref;
+  }, rows.map(function (_ref12) {
+    var key = _ref12.key,
+      cells = _ref12.cells,
+      ref = _ref12.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref12, cellIndex) {
-      var key = _ref12.key,
-        content = _ref12.content,
-        maxWidth = _ref12.maxWidth;
+    }, cells.map(function (_ref13, cellIndex) {
+      var key = _ref13.key,
+        content = _ref13.content,
+        maxWidth = _ref13.maxWidth;
       return (0, _react2.jsx)("td", {
         key: key,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

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

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

@@ -72,18 +72,23 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       jql: jql || ''
     } : undefined;
   }, [cloudId, jql]);
-  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)(datasourceId, parameters),
+  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
+  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;
-  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys || defaultVisibleColumnKeys),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    visibleColumnKeys = _useState10[0],
-    setVisibleColumnKeys = _useState10[1];
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
   (0, _react.useEffect)(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -183,11 +188,6 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
     setCurrentViewMode(selectedMode);
   };
-  (0, _react.useEffect)(function () {
-    if (status === 'empty' && isParametersSet) {
-      void onNextPage();
-    }
-  }, [status, isParametersSet, onNextPage, reset]);
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
@@ -197,9 +197,10 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: setVisibleColumnKeys
     });
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, onNextPage, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'empty' || !jql || !url) {
@@ -268,7 +269,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
+    isDisabled: !isParametersSet || status === 'loading',
     testId: 'jira-jql-datasource-modal--insert-button'
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText))))));
 };

package/dist/cjs/version.json

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