@atlaskit/link-datasource 0.19.1 → 0.21.0

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

@@ -6,14 +6,19 @@ var _excluded = ["isOpen"];
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
 export 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 = useIntl();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     allOptions = _useState2[0],
@@ -54,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;
     }
@@ -66,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',
@@ -74,14 +83,14 @@ export 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(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);
@@ -96,7 +105,8 @@ export var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button"
+        testId: "column-picker-trigger-button",
+        isDisabled: isDatasourceLoading
       }));
     }
   });

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var columnPickerMessages = defineMessages({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});

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

@@ -1,6 +1,8 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -81,12 +83,13 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 export 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,
@@ -106,14 +109,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     isDragPreview = _useState4[0],
     setIsDragPreview = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasFullSchema = _useState6[0],
+    setHasFullSchema = _useState6[1];
   var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   var containerRef = useRef(null);
-  var _useState5 = useState(function () {
+  var _useState7 = useState(function () {
       return orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    orderedColumns = _useState6[0],
-    setOrderedColumns = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    orderedColumns = _useState8[0],
+    setOrderedColumns = _useState8[1];
+  useEffect(function () {
+    setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
+  }, [columns, visibleColumnKeys]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref3) {
@@ -123,7 +133,7 @@ export 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.
 
@@ -157,8 +167,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     };
   });
   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;
@@ -264,6 +276,33 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
+  var handlePickerOpen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.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 jsx("div", {
     ref: containerRef,
     css: isDragPreview ? containerDragPreviewStyles : null
@@ -273,16 +312,16 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: tableHeadStyles
-  }, jsx("tr", null, headColumns.map(function (_ref10, cellIndex) {
-    var key = _ref10.key,
-      content = _ref10.content,
-      maxWidth = _ref10.maxWidth;
+  }, jsx("tr", null, headColumns.map(function (_ref11, cellIndex) {
+    var key = _ref11.key,
+      content = _ref11.content,
+      maxWidth = _ref11.maxWidth;
     var TruncatedContent = function TruncatedContent() {
       return jsx("div", {
         css: truncatedCellStyles
       }, content);
     };
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -305,23 +344,25 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), onVisibleColumnKeysChange && jsx("th", {
     css: columnPickerHeaderStyles
   }, jsx(ColumnPicker, {
-    columns: orderedColumns,
-    selectedColumnKeys: visibleColumnKeys,
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange
+    columns: hasFullSchema ? orderedColumns : [],
+    selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
+    isDatasourceLoading: status === 'loading',
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
   })))), 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 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 jsx("td", {
         key: key,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
-export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: auto;\n"])));
+export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");

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

@@ -61,18 +61,23 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       jql: jql || ''
     } : undefined;
   }, [cloudId, jql]);
-  var _useDatasourceTableSt = useDatasourceTableState(datasourceId, parameters),
+  var _useState9 = useState(initialVisibleColumnKeys),
+    _useState10 = _slicedToArray(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
+  var _useDatasourceTableSt = 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 = useState(initialVisibleColumnKeys || defaultVisibleColumnKeys),
-    _useState10 = _slicedToArray(_useState9, 2),
-    visibleColumnKeys = _useState10[0],
-    setVisibleColumnKeys = _useState10[1];
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -172,11 +177,6 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
     setCurrentViewMode(selectedMode);
   };
-  useEffect(function () {
-    if (status === 'empty' && isParametersSet) {
-      void onNextPage();
-    }
-  }, [status, isParametersSet, onNextPage, reset]);
   var issueLikeDataTableView = useMemo(function () {
     return jsx(IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
@@ -186,9 +186,10 @@ export 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 = useCallback(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'empty' || !jql || !url) {
@@ -257,7 +258,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
+    isDisabled: !isParametersSet || status === 'loading',
     testId: 'jira-jql-datasource-modal--insert-button'
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };

package/dist/esm/version.json

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

package/dist/types/hooks/useDatasourceTableState.d.ts

@@ -1,12 +1,23 @@
-import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType } from '@atlaskit/linking-types';
+import { DatasourceDataResponseItem, DatasourceParameters, DatasourceResponseSchemaProperty, DatasourceTableStatusType } from '@atlaskit/linking-types';
+export interface onNextPageProps {
+    isSchemaFromData?: boolean;
+    shouldRequestFirstPage?: boolean;
+}
+export type NextPageType = (requestInfo?: onNextPageProps) => void;
 export interface DatasourceTableState {
     status: DatasourceTableStatusType;
-    onNextPage: () => void;
+    onNextPage: NextPageType;
     reset: () => void;
+    loadDatasourceDetails: () => void;
     responseItems: DatasourceDataResponseItem[];
     hasNextPage: boolean;
     columns: DatasourceResponseSchemaProperty[];
     defaultVisibleColumnKeys: string[];
     totalIssueCount?: number;
 }
-export declare const useDatasourceTableState: (datasourceId: string, parameters?: object, fields?: string[]) => DatasourceTableState;
+export interface DatasourceTableStateProps {
+    datasourceId: string;
+    parameters?: DatasourceParameters;
+    fieldKeys?: string[];
+}
+export declare const useDatasourceTableState: ({ datasourceId, parameters, fieldKeys, }: DatasourceTableStateProps) => DatasourceTableState;

package/dist/types/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/column-picker/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const columnPickerMessages: {
+    search: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types/ui/issue-like-table/column-picker/types.d.ts

@@ -1,6 +1,8 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
+    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;
+    onOpen?: () => void;
 };

package/dist/types/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: (props: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType, DatasourceType } from '@atlaskit/linking-types';
+import { NextPageType } from '../../hooks/useDatasourceTableState';
 export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
 export interface IssueLikeDataTableViewProps {
     testId?: string;
@@ -16,7 +17,8 @@ export interface IssueLikeDataTableViewProps {
     hasNextPage: boolean;
     status: DatasourceTableStatusType;
     items: DatasourceDataResponseItem[];
-    onNextPage: () => void;
+    onNextPage: NextPageType;
+    onLoadDatasourceDetails: () => void;
     /**
      * A function to define new or override existing render components.
      * eg:

package/dist/types-ts4.5/hooks/useDatasourceTableState.d.ts

@@ -1,12 +1,23 @@
-import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType } from '@atlaskit/linking-types';
+import { DatasourceDataResponseItem, DatasourceParameters, DatasourceResponseSchemaProperty, DatasourceTableStatusType } from '@atlaskit/linking-types';
+export interface onNextPageProps {
+    isSchemaFromData?: boolean;
+    shouldRequestFirstPage?: boolean;
+}
+export type NextPageType = (requestInfo?: onNextPageProps) => void;
 export interface DatasourceTableState {
     status: DatasourceTableStatusType;
-    onNextPage: () => void;
+    onNextPage: NextPageType;
     reset: () => void;
+    loadDatasourceDetails: () => void;
     responseItems: DatasourceDataResponseItem[];
     hasNextPage: boolean;
     columns: DatasourceResponseSchemaProperty[];
     defaultVisibleColumnKeys: string[];
     totalIssueCount?: number;
 }
-export declare const useDatasourceTableState: (datasourceId: string, parameters?: object, fields?: string[]) => DatasourceTableState;
+export interface DatasourceTableStateProps {
+    datasourceId: string;
+    parameters?: DatasourceParameters;
+    fieldKeys?: string[];
+}
+export declare const useDatasourceTableState: ({ datasourceId, parameters, fieldKeys, }: DatasourceTableStateProps) => DatasourceTableState;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const columnPickerMessages: {
+    search: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/issue-like-table/column-picker/types.d.ts

@@ -1,6 +1,8 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
+    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;
+    onOpen?: () => void;
 };

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: (props: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { DatasourceDataResponseItem, DatasourceResponseSchemaProperty, DatasourceTableStatusType, DatasourceType } from '@atlaskit/linking-types';
+import { NextPageType } from '../../hooks/useDatasourceTableState';
 export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
 export interface IssueLikeDataTableViewProps {
     testId?: string;
@@ -16,7 +17,8 @@ export interface IssueLikeDataTableViewProps {
     hasNextPage: boolean;
     status: DatasourceTableStatusType;
     items: DatasourceDataResponseItem[];
-    onNextPage: () => void;
+    onNextPage: NextPageType;
+    onLoadDatasourceDetails: () => void;
     /**
      * A function to define new or override existing render components.
      * eg:

package/examples-helpers/buildIssueLikeTable.tsx

@@ -6,7 +6,10 @@ import styled from '@emotion/styled';
 import { IntlProvider } from 'react-intl-next';
 
 import { SmartCardProvider } from '@atlaskit/link-provider';
-import { mockDatasourceFetchRequests } from '@atlaskit/link-test-helpers/datasource';
+import {
+  initialVisibleColumnKeys,
+  mockDatasourceFetchRequests,
+} from '@atlaskit/link-test-helpers/datasource';
 
 import { useDatasourceTableState } from '../src/hooks/useDatasourceTableState';
 import { IssueLikeDataTableView } from '../src/ui/issue-like-table';
@@ -44,10 +47,14 @@ const ExampleBody = ({ isReadonly }: Props) => {
     hasNextPage,
     defaultVisibleColumnKeys,
     columns,
-  } = useDatasourceTableState('some-datasource-id', parameters);
+    loadDatasourceDetails,
+  } = useDatasourceTableState({
+    datasourceId: 'some-datasource-id',
+    parameters,
+  });
 
   const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>(
-    defaultVisibleColumnKeys,
+    initialVisibleColumnKeys,
   );
 
   useEffect(() => {
@@ -63,6 +70,7 @@ const ExampleBody = ({ isReadonly }: Props) => {
           testId="link-datasource"
           items={responseItems}
           onNextPage={onNextPage}
+          onLoadDatasourceDetails={loadDatasourceDetails}
           hasNextPage={hasNextPage}
           status={status}
           columns={columns}

package/examples-helpers/buildJiraIssuesTable.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo, useState } from 'react';
 
-import { mockDatasourceFetchRequests } from '@atlaskit/link-test-helpers/datasource';
+import {
+  initialVisibleColumnKeys,
+  mockDatasourceFetchRequests,
+} from '@atlaskit/link-test-helpers/datasource';
 
 import { DatasourceTableView } from '../src';
 import { JiraIssueDatasourceParameters } from '../src/ui/jira-issues-modal/types';
@@ -10,7 +13,9 @@ mockDatasourceFetchRequests();
 export const ExampleJiraIssuesTableView = () => {
   const cloudId = 'some-cloud-id';
 
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>([]);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>(
+    initialVisibleColumnKeys,
+  );
 
   const parameters = useMemo<JiraIssueDatasourceParameters>(
     () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/image": "^1.1.0",
-    "@atlaskit/link-client-extension": "^1.1.0",
+    "@atlaskit/link-client-extension": "^1.2.0",
     "@atlaskit/linking-common": "^2.14.0",
     "@atlaskit/linking-types": "^5.0.0",
     "@atlaskit/lozenge": "^11.4.0",