@atlaskit/link-datasource 1.7.5 → 1.8.0

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

@@ -86,8 +86,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -167,9 +166,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       cells: visibleSortedColumns.map(function (_ref3) {
         var key = _ref3.key;
         var content = jsx(Skeleton, {
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          width: '100%',
-          height: '20px'
+          borderRadius: 8,
+          width: "100%",
+          height: 14,
+          testId: "issues-table-row-loading"
         });
         return {
           key: key,
@@ -295,8 +295,24 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
   var rows = useMemo(function () {
-    return [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
-  }, [loadingRow, status, tableRows]);
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [].concat(_toConsumableArray(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(tableRows.length)
+      })]);
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return _toConsumableArray(Array(loadingRowsCount)).map(function (_, index) {
+      return _objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(index)
+      });
+    });
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -389,6 +405,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth: maxWidth
         }
       }, heading);
@@ -414,14 +432,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       var cellKey = _ref14.key,
         content = _ref14.content,
         maxWidth = _ref14.maxWidth;
+      var loadingRowStyle = {
+        maxWidth: maxWidth
+      };
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 12px)"
+        });
+      }
       return jsx("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
         css: truncatedCellStyles,
-        style: {
-          maxWidth: maxWidth
-        }
+        style: loadingRowStyle
       }, content);
     }));
   }))));

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

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export var ScrollableContainerHeight = 590;
 export var FieldTextFontSize = '14px';
 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  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
-export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", " ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));

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

@@ -379,8 +379,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     setCurrentViewMode(selectedMode);
   };
   var handleOnNextPage = useCallback(function () {
+    var onNextPageProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     userInteractionActions.current.add(DatasourceAction.NEXT_PAGE_SCROLLED);
-    onNextPage();
+    onNextPage(onNextPageProps);
   }, [onNextPage]);
   var handleVisibleColumnKeysChange = useCallback(function () {
     var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -444,8 +445,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jsx("div", {
         css: contentContainerStyles
       }, !!jql ? jsx(EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state",
-        isLoading: true
+        testId: "jira-jql-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {
         searchMethod: currentSearchMethod
       }));

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

@@ -2,8 +2,7 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
-    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -15,4 +15,4 @@ export interface RowCellType {
 }
 export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ScrollableContainerHeight = 590;
 export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,11 +9,3 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
-export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

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

@@ -2,8 +2,7 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
-    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -15,4 +15,4 @@ export interface RowCellType {
 }
 export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ScrollableContainerHeight = 590;
 export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,11 +9,3 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
-export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"