@atlaskit/link-datasource 0.20.0 → 0.21.1

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -1,7 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useDatasourceClientExtension } from '@atlaskit/link-client-extension';
-export const useDatasourceTableState = (datasourceId, parameters, fields) => {
+export const useDatasourceTableState = ({
+  datasourceId,
+  parameters,
+  fieldKeys = []
+}) => {
   const [defaultVisibleColumnKeys, setDefaultVisibleColumnKeys] = useState([]);
+  const [lastRequestedFieldKeys, setLastRequestedFieldKeys] = useState([]);
   const [status, setStatus] = useState('empty');
   const [responseItems, setResponseItems] = useState([]);
   const [hasNextPage, setHasNextPage] = useState(true);
@@ -12,51 +17,111 @@ export const useDatasourceTableState = (datasourceId, parameters, fields) => {
     getDatasourceData,
     getDatasourceDetails
   } = useDatasourceClientExtension();
-  const loadDatasourceDetails = useCallback(async parameters => {
+  const loadDatasourceDetails = useCallback(async () => {
+    if (!parameters) {
+      return;
+    }
     const result = await getDatasourceDetails(datasourceId, {
       parameters
     });
-    setColumns(result.schema.properties);
-    setDefaultVisibleColumnKeys(result.schema.defaultProperties);
-  }, [datasourceId, getDatasourceDetails]);
-  useEffect(() => {
-    if (parameters) {
-      void loadDatasourceDetails(parameters);
+    const isColumnNotPresentInCurrentColumnsList = col => !columns.find(column => column.key === col.key);
+    const allColumns = result.schema.properties;
+    const newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
+    newColumns.length > 0 && setColumns([...columns, ...newColumns]);
+  }, [columns, datasourceId, getDatasourceDetails, parameters]);
+  const applySchemaProperties = useCallback(properties => {
+    if (columns.length === 0) {
+      setColumns(properties);
+    }
+    const defaultProperties = properties.map(prop => 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);
     }
-  }, [loadDatasourceDetails, parameters]);
-  const onNextPage = useCallback(async () => {
+    if (lastRequestedFieldKeys.length === 0) {
+      setLastRequestedFieldKeys(defaultProperties);
+    }
+  }, [columns.length, defaultVisibleColumnKeys.length, lastRequestedFieldKeys === null || lastRequestedFieldKeys === void 0 ? void 0 : lastRequestedFieldKeys.length]);
+  const onNextPage = useCallback(async (requestInfo = {}) => {
     if (!parameters) {
       return;
     }
+    const {
+      isSchemaFromData = true,
+      shouldRequestFirstPage
+    } = requestInfo;
+    const datasourceDataRequest = {
+      parameters,
+      pageSize: 20,
+      pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
+      fields: fieldKeys,
+      includeSchema: isSchemaFromData
+    };
     setStatus('loading');
     const {
       data,
       nextPageCursor,
-      totalIssues
-    } = await getDatasourceData(datasourceId, {
-      parameters,
-      pageSize: 20,
-      pageCursor: nextCursor,
-      fields
-    });
+      totalIssues,
+      schema
+    } = await getDatasourceData(datasourceId, datasourceDataRequest);
     setTotalIssueCount(totalIssues);
     setNextCursor(nextPageCursor);
-    setResponseItems(currentResponseItems => [...currentResponseItems, ...data]);
+    setResponseItems(currentResponseItems => {
+      if (shouldRequestFirstPage) {
+        return data;
+      }
+      return [...currentResponseItems, ...data];
+    });
     setStatus('resolved');
     setHasNextPage(Boolean(nextPageCursor));
-  }, [parameters, getDatasourceData, datasourceId, nextCursor, fields]);
+    if (fieldKeys.length > 0) {
+      setLastRequestedFieldKeys(fieldKeys);
+    }
+    if (isSchemaFromData && schema) {
+      applySchemaProperties(schema.properties);
+    }
+  }, [parameters, fieldKeys, getDatasourceData, datasourceId, nextCursor, applySchemaProperties]);
   const reset = useCallback(() => {
     setStatus('empty');
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
     setTotalIssueCount(undefined);
+    setLastRequestedFieldKeys([]);
   }, []);
+
+  // this takes care of requesting /data initally
+  useEffect(() => {
+    const 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
+  useEffect(() => {
+    const canHaveNewColumns = fieldKeys.length > 0 && lastRequestedFieldKeys.length > 0;
+    if (canHaveNewColumns) {
+      const hasNewColumns = fieldKeys.some(key => !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,
     onNextPage,
     responseItems,
     reset,
+    loadDatasourceDetails,
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,

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

@@ -29,8 +29,13 @@ export const DatasourceTableView = ({
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
-    totalIssueCount
-  } = useDatasourceTableState(datasourceId, parameters);
+    totalIssueCount,
+    loadDatasourceDetails
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters,
+    fieldKeys: visibleColumnKeys
+  });
   useEffect(() => {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -43,6 +48,7 @@ export const DatasourceTableView = ({
     hasNextPage: hasNextPage,
     items: responseItems,
     onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,

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

@@ -12,7 +12,8 @@ export const ColumnPicker = ({
   isDatasourceLoading,
   columns,
   selectedColumnKeys,
-  onSelectedColumnKeysChange
+  onSelectedColumnKeysChange,
+  onOpen
 }) => {
   const intl = useIntl();
   const [allOptions, setAllOptions] = useState([]);
@@ -46,7 +47,7 @@ export const ColumnPicker = ({
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
-  const onPopupOpen = useCallback(() => {
+  const sortSelectedColumnsTop = useCallback(() => {
     if (!allOptions.length) {
       return;
     }
@@ -54,6 +55,10 @@ export const ColumnPicker = ({
     const sortedOptions = [...selectedOptions, ...nonSelectedOptions];
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  const handleOpen = useCallback(() => {
+    onOpen && void onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -62,13 +67,14 @@ export const ColumnPicker = ({
     },
     options: allOptions,
     value: selectedOptions,
-    onOpen: onPopupOpen,
+    onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
     placeholder: intl.formatMessage(columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
+    isLoading: allOptions.length === 0,
     target: ({
       isOpen,
       ...triggerProps

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

@@ -85,6 +85,7 @@ function getColumnWidth(key, type) {
 export const IssueLikeDataTableView = ({
   testId,
   onNextPage,
+  onLoadDatasourceDetails,
   items,
   columns,
   renderItem = fallbackRenderType,
@@ -96,9 +97,13 @@ export const IssueLikeDataTableView = ({
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const [lastRowElement, setLastRowElement] = useState(null);
   const [isDragPreview, setIsDragPreview] = useState(false);
+  const [hasFullSchema, setHasFullSchema] = useState(false);
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
   const [orderedColumns, setOrderedColumns] = useState(() => orderColumns([...columns], [...visibleColumnKeys]));
+  useEffect(() => {
+    setOrderedColumns(orderColumns([...columns], [...visibleColumnKeys]));
+  }, [columns, visibleColumnKeys]);
   const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
@@ -135,8 +140,10 @@ export const IssueLikeDataTableView = ({
     maxWidth: getColumnWidth(key, type)
   }));
   useEffect(() => {
-    if (status === 'empty' || isBottomOfTableVisibleRaw && hasNextPage && status !== 'loading') {
-      void onNextPage();
+    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
+      void onNextPage({
+        isSchemaFromData: false
+      });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
   let dndPreviewHeight = 0;
@@ -235,6 +242,17 @@ export const IssueLikeDataTableView = ({
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
+  const handlePickerOpen = useCallback(async () => {
+    if (hasFullSchema) {
+      return;
+    }
+    try {
+      await onLoadDatasourceDetails();
+      setHasFullSchema(true);
+    } catch (e) {
+      setHasFullSchema(false);
+    }
+  }, [hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
     css: isDragPreview ? containerDragPreviewStyles : null
@@ -275,10 +293,11 @@ export const IssueLikeDataTableView = ({
   }), onVisibleColumnKeysChange && jsx("th", {
     css: columnPickerHeaderStyles
   }, jsx(ColumnPicker, {
+    columns: hasFullSchema ? orderedColumns : [],
+    selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     isDatasourceLoading: status === 'loading',
-    columns: orderedColumns,
-    selectedColumnKeys: visibleColumnKeys,
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
   })))), jsx("tbody", {
     "data-testid": testId && `${testId}--body`
   }, rows.map(({

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

@@ -46,6 +46,7 @@ export const JiraIssuesConfigModal = props => {
     cloudId,
     jql: jql || ''
   } : undefined, [cloudId, jql]);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
   const {
     reset,
     status,
@@ -53,9 +54,13 @@ export const JiraIssuesConfigModal = props => {
     responseItems,
     hasNextPage,
     columns,
-    defaultVisibleColumnKeys
-  } = useDatasourceTableState(datasourceId, parameters);
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys || defaultVisibleColumnKeys);
+    defaultVisibleColumnKeys,
+    loadDatasourceDetails
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
+  });
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -134,11 +139,6 @@ export const JiraIssuesConfigModal = props => {
   const handleViewModeChange = selectedMode => {
     setCurrentViewMode(selectedMode);
   };
-  useEffect(() => {
-    if (status === 'empty' && isParametersSet) {
-      void onNextPage();
-    }
-  }, [status, isParametersSet, onNextPage, reset]);
   const issueLikeDataTableView = useMemo(() => jsx(IssueLikeDataTableView, {
     testId: "jira-jql-datasource-table",
     status: status,
@@ -147,8 +147,9 @@ export const 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]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'empty' || !jql || !url) {

package/dist/es2019/version.json

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

package/dist/esm/hooks/useDatasourceTableState.js

@@ -4,116 +4,196 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useState } from 'react';
 import { useDatasourceClientExtension } from '@atlaskit/link-client-extension';
-export var useDatasourceTableState = function useDatasourceTableState(datasourceId, parameters, fields) {
+export 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 = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     defaultVisibleColumnKeys = _useState2[0],
     setDefaultVisibleColumnKeys = _useState2[1];
-  var _useState3 = useState('empty'),
+  var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
-  var _useState5 = useState([]),
+    lastRequestedFieldKeys = _useState4[0],
+    setLastRequestedFieldKeys = _useState4[1];
+  var _useState5 = useState('empty'),
     _useState6 = _slicedToArray(_useState5, 2),
-    responseItems = _useState6[0],
-    setResponseItems = _useState6[1];
-  var _useState7 = useState(true),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    hasNextPage = _useState8[0],
-    setHasNextPage = _useState8[1];
-  var _useState9 = useState(undefined),
+    responseItems = _useState8[0],
+    setResponseItems = _useState8[1];
+  var _useState9 = useState(true),
     _useState10 = _slicedToArray(_useState9, 2),
-    nextCursor = _useState10[0],
-    setNextCursor = _useState10[1];
-  var _useState11 = useState([]),
+    hasNextPage = _useState10[0],
+    setHasNextPage = _useState10[1];
+  var _useState11 = useState(undefined),
     _useState12 = _slicedToArray(_useState11, 2),
-    columns = _useState12[0],
-    setColumns = _useState12[1];
-  var _useState13 = useState(undefined),
+    nextCursor = _useState12[0],
+    setNextCursor = _useState12[1];
+  var _useState13 = useState([]),
     _useState14 = _slicedToArray(_useState13, 2),
-    totalIssueCount = _useState14[0],
-    setTotalIssueCount = _useState14[1];
+    columns = _useState14[0],
+    setColumns = _useState14[1];
+  var _useState15 = useState(undefined),
+    _useState16 = _slicedToArray(_useState15, 2),
+    totalIssueCount = _useState16[0],
+    setTotalIssueCount = _useState16[1];
   var _useDatasourceClientE = useDatasourceClientExtension(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
-  var loadDatasourceDetails = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(parameters) {
-      var result;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
+  var loadDatasourceDetails = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var result, isColumnNotPresentInCurrentColumnsList, allColumns, newColumns;
+    return _regeneratorRuntime.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]);
-  useEffect(function () {
-    if (parameters) {
-      void loadDatasourceDetails(parameters);
+          };
+          allColumns = result.schema.properties;
+          newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
+          newColumns.length > 0 && setColumns([].concat(_toConsumableArray(columns), _toConsumableArray(newColumns)));
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [columns, datasourceId, getDatasourceDetails, parameters]);
+  var applySchemaProperties = 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 = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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: 20,
-            pageCursor: nextCursor,
-            fields: fields
-          });
-        case 5:
+            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(_toConsumableArray(currentResponseItems), _toConsumableArray(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 = useCallback(function () {
     setStatus('empty');
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
     setTotalIssueCount(undefined);
+    setLastRequestedFieldKeys([]);
   }, []);
+
+  // this takes care of requesting /data initally
+  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
+  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/esm/ui/datasource-table-view/datasourceTableView.js

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

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

@@ -16,7 +16,8 @@ export var ColumnPicker = function ColumnPicker(_ref) {
   var isDatasourceLoading = _ref.isDatasourceLoading,
     columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
-    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
+    onOpen = _ref.onOpen;
   var intl = useIntl();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -58,7 +59,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
-  var onPopupOpen = useCallback(function () {
+  var sortSelectedColumnsTop = useCallback(function () {
     if (!allOptions.length) {
       return;
     }
@@ -70,6 +71,10 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     var sortedOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  var handleOpen = useCallback(function () {
+    onOpen && void onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -78,13 +83,14 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     },
     options: allOptions,
     value: selectedOptions,
-    onOpen: onPopupOpen,
+    onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
     placeholder: intl.formatMessage(columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
+    isLoading: allOptions.length === 0,
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = _objectWithoutProperties(_ref8, _excluded);