@atlaskit/link-datasource 0.20.0 → 0.21.1

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 */
@@ -87,6 +89,7 @@ function getColumnWidth(key, type) {
 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) {
@@ -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,10 +312,10 @@ 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
@@ -305,24 +344,25 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), 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 && "".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/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) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.20.0",
+	"version": "0.21.1",
 	"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: ({ isDatasourceLoading, 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/types.d.ts

@@ -4,4 +4,5 @@ export type ColumnPickerProps = {
     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: ({ isDatasourceLoading, 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/types.d.ts

@@ -4,4 +4,5 @@ export type ColumnPickerProps = {
     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.20.0",
+  "version": "0.21.1",
   "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",
@@ -47,7 +47,7 @@
     "@atlaskit/smart-card": "^26.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tag": "^11.5.0",
-    "@atlaskit/textfield": "5.5.0",
+    "@atlaskit/textfield": "5.5.1",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.5.0",
     "@atlassianlabs/jql-editor": "^1.2.0",