@atlaskit/link-datasource 0.31.2 → 0.31.3

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

@@ -37,8 +37,9 @@ var dropdownContainerStyles = (0, _react2.css)({
 });
 var contentContainerStyles = (0, _react2.css)({
   display: 'grid',
-  height: '420px',
-  overflow: 'auto'
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"))
 });
 var placeholderSmartLinkStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
@@ -211,7 +212,9 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     setCurrentViewMode(selectedMode);
   };
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+    return (0, _react2.jsx)("div", {
+      css: contentContainerStyles
+    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
       status: status,
       columns: columns,
@@ -221,7 +224,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: setVisibleColumnKeys
-    });
+    }));
   }, [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;
@@ -258,9 +261,11 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       return (0, _react2.jsx)(_noResults.NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
+      return (0, _react2.jsx)("div", {
+        css: contentContainerStyles
+      }, (0, _react2.jsx)(_issueLikeTable.EmptyState, {
         testId: "jira-jql-datasource-modal--empty-state"
-      });
+      }));
     }
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -303,9 +308,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
-  }), (0, _react2.jsx)("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {

package/dist/cjs/ui/table-footer/index.js

@@ -18,12 +18,13 @@ var _refresh = _interopRequireDefault(require("@atlaskit/icon/glyph/refresh"));
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("./messages");
 var _syncInfo = require("./sync-info");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
-var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  padding: ", " 0;\n  position: sticky;\n  bottom: 0;\n  background: ", ";\n  border-top-style: solid;\n  border-top-color: ", ";\n  margin-top: -2px;\n  align-self: center;\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-input, ".concat(_colors.N0, ")"), "var(--ds-background-neutral, ".concat(_colors.N40, ")"));
-var IssueCounterWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 10px;\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"));
-var SyncWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N90, ")"));
-var SyncTextWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
+var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(_colors.N0, ")"));
+var TopBorderWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: ", " 0;\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
+var IssueCounterWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"));
+var SyncWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N90, ")"));
+var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
 var TableFooter = function TableFooter(_ref) {
   var issueCount = _ref.issueCount,
     onRefresh = _ref.onRefresh,
@@ -44,7 +45,9 @@ var TableFooter = function TableFooter(_ref) {
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showIssueCount ? (0, _react2.jsx)(FooterWrapper, {
     "data-testid": "table-footer"
-  }, (0, _react2.jsx)(IssueCounterWrapper, null, showIssueCount && (0, _react2.jsx)(_heading.default, {
+  }, (0, _react2.jsx)(TopBorderWrapper, null, (0, _react2.jsx)(IssueCounterWrapper, {
+    "data-testid": 'issue-count-wrapper'
+  }, showIssueCount && (0, _react2.jsx)(_heading.default, {
     testId: "issue-count",
     level: "h400"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
@@ -65,6 +68,6 @@ var TableFooter = function TableFooter(_ref) {
     }),
     isDisabled: isLoading,
     testId: "refresh-button"
-  })))) : null;
+  }))))) : null;
 };
 exports.TableFooter = TableFooter;

package/dist/cjs/version.json

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -8,13 +8,6 @@ import { NoResults } from '../common/error-state/no-results';
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
-const TableViewWrapperStyles = css({
-  display: 'grid',
-  position: 'relative',
-  padding: "var(--ds-space-200, 16px)",
-  paddingBottom: 0,
-  boxSizing: 'border-box'
-});
 export const DatasourceTableView = ({
   datasourceId,
   parameters,
@@ -59,9 +52,8 @@ export const DatasourceTableView = ({
       onRefresh: reset
     });
   }
-  return columns.length > 0 ? jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(IssueLikeDataTableView, {
+  const isDataReady = columns.length > 0;
+  return jsx("div", null, isDataReady ? jsx(IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -70,18 +62,14 @@ export const DatasourceTableView = ({
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  }), jsx(TableFooter, {
-    issueCount: totalCount,
-    onRefresh: reset,
-    isLoading: status === 'loading'
-  })) : jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(EmptyState, {
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    scrollableContainerHeight: 590
+  }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), jsx(TableFooter, {
+    issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,
-    isLoading: true
+    isLoading: !isDataReady || status === 'loading'
   }));
 };

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

@@ -9,7 +9,6 @@ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { columnPickerMessages } from './messages';
 export const ColumnPicker = ({
-  isDatasourceLoading,
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange,
@@ -102,8 +101,7 @@ export const ColumnPicker = ({
       })),
       spacing: "compact",
       appearance: "subtle",
-      testId: "column-picker-trigger-button",
-      isDisabled: isDatasourceLoading
+      testId: "column-picker-trigger-button"
     }))
   });
 };

package/dist/es2019/ui/issue-like-table/drag-column-preview.js

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
+import { TableHeading } from './styled';
+const maxWidth = '200px';
+const firstLastChildOverride = `
+  &:first-of-type, &:last-of-type {
+    padding-left: ${"var(--ds-space-100, 8px)"};
+    padding-right: ${"var(--ds-space-100, 8px)"};
+  }
+`;
+const TablePreviewHeading = styled(TableHeading)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: ${"var(--ds-background-disabled, #091E4224)"};
+  color: ${"var(--ds-text-disabled, #091E424F)"};
+  max-width: ${maxWidth};
+  ${firstLastChildOverride}
+`;
+const TablePreviewCell = styled.td`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: ${maxWidth};
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+  ${firstLastChildOverride}
+`;
+const tableStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  fontSize: "var(--ds-font-size-200, 16px)",
+  maxWidth
+});
+export const DragColumnPreview = ({
+  title,
+  rows
+}) => {
+  return jsx("table", {
+    css: tableStyles
+  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map((data, i) => jsx("tr", {
+    key: i
+  }, jsx(TablePreviewCell, null, data))), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+};

package/dist/es2019/ui/issue-like-table/draggable-table-heading.js

@@ -1,16 +1,16 @@
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import ReactDOM from 'react-dom';
 import invariant from 'tiny-invariant';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-const tableHeadingStyles = css({
-  cursor: 'grab'
-});
 const tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -30,7 +30,14 @@ const verticallyAlignedStyles = css({
 const dragHandleStyles = css({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  overflow: 'hidden',
+  width: 0,
+  transition: 'width 0.5s'
+});
+const dragHandleSpacerStyles = css({
+  width: 24,
+  transition: 'width 0.5s'
 });
 const dropTargetStyles = css({
   position: 'absolute',
@@ -41,18 +48,23 @@ const dropTargetStyles = css({
 const noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+const idleState = {
+  type: 'idle'
+};
+const draggingState = {
+  type: 'dragging'
+};
 export const DraggableTableHeading = ({
   children,
   id,
   index,
   tableId,
   dndPreviewHeight,
-  maxWidth,
-  onDragPreviewStart,
-  onDragPreviewEnd
+  dragPreview,
+  maxWidth
 }) => {
   const ref = useRef(null);
-  const [status, setStatus] = useState('idle');
+  const [state, setState] = useState(idleState);
   const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
   const [closestEdge, setClosestEdge] = useState(null);
   const dropTargetRef = useRef(null);
@@ -69,19 +81,38 @@ export const DraggableTableHeading = ({
           tableId
         };
       },
-      onGenerateDragPreview() {
-        setStatus('preview');
-        onDragPreviewStart();
+      onGenerateDragPreview({
+        nativeSetDragImage
+      }) {
+        setCustomNativeDragPreview({
+          getOffset: offsetFromPointer({
+            x: '18px',
+            y: '18px'
+          }),
+          render: ({
+            container
+          }) => {
+            // Cause a `react` re-render to create your portal synchronously
+            setState({
+              type: 'preview',
+              container
+            });
+            // In our cleanup function: cause a `react` re-render to create remove your portal
+            // Note: you can also remove the portal in `onDragStart`,
+            // which is when the cleanup function is called
+            return () => setState(draggingState);
+          },
+          nativeSetDragImage
+        });
       },
       onDragStart() {
-        setStatus('dragging');
-        onDragPreviewEnd();
+        setState(draggingState);
       },
       onDrop() {
-        setStatus('idle');
+        setState(idleState);
       }
     }));
-  }, [id, index, onDragPreviewEnd, onDragPreviewStart, tableId]);
+  }, [id, index, tableId]);
 
   // Here we handle drop target, that in our case is absolutely positioned div that covers full width and height
   // of this column (has height of whole table). It sits on top of everything, but has `pointerEvents: 'none'` by default
@@ -145,7 +176,7 @@ export const DraggableTableHeading = ({
   }, [tableId]);
   return jsx(TableHeading, {
     ref: ref,
-    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    css: [tableHeadingStatusStyles[state.type]],
     "data-testid": `${id}-column-heading`,
     style: {
       maxWidth
@@ -162,9 +193,13 @@ export const DraggableTableHeading = ({
   })), jsx("div", {
     css: verticallyAlignedStyles
   }, jsx("div", {
-    css: dragHandleStyles
+    css: dragHandleStyles,
+    className: "issue-like-table-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: `${id}-drag-icon`,
     size: "medium"
-  })), children));
+  })), children, jsx("div", {
+    css: dragHandleSpacerStyles,
+    className: "issue-like-table-drag-handle-spacer"
+  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

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

@@ -5,6 +5,9 @@ import UserType from '../render-type/user';
 import { EmptyStateTableHeading } from '../styled';
 import Priority from './priority';
 import Type from './type';
+const tableBodyStyles = css({
+  borderBottom: 0
+});
 const baseColumns = [{
   key: 'type',
   width: 50
@@ -118,7 +121,9 @@ export default (({
     width: width,
     height: 13,
     borderRadius: 8
-  }))))), jsx("tbody", null, rows.map(row => jsx("tr", {
+  }))))), jsx("tbody", {
+    css: tableBodyStyles
+  }, rows.map(row => jsx("tr", {
     key: row.id
   }, columnsToRender.map(column => jsx("td", {
     css: cellStyles,

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

@@ -3,30 +3,42 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import invariant from 'tiny-invariant';
+import Heading from '@atlaskit/heading';
 import { Skeleton } from '@atlaskit/linking-common';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { N40 } from '@atlaskit/theme/colors';
 import { ColumnPicker } from './column-picker';
+import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
-  borderTop: '2px solid transparent'
+  position: 'sticky',
+  top: 0,
+  zIndex: 10
 });
-const ColumnPickerHeader = styled.td`
+const ColumnPickerHeader = styled.th`
   width: 40px;
-  padding-block: ${"var(--ds-space-100, 8px)"};
   position: sticky;
-  right: 0px;
+  right: calc(-1 * ${tableSidePadding});
   background-color: ${"var(--ds-surface, #FFF)"};
-  &:last-child {
-    padding-right: ${"var(--ds-space-100, 8px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    ${"var(--ds-surface, #FFF)"} 10%
+  );
+  vertical-align: middle; /* Keeps dropdown button in the middle */
+  &:last-of-type {
+    padding-right: ${tableSidePadding};
   }
 `;
 const truncatedCellStyles = css({
@@ -34,11 +46,22 @@ const truncatedCellStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const tableDragPreviewStyles = css({
-  backgroundColor: "var(--ds-surface, #FFF)"
+const scrollableContainerStyles = css({
+  overflow: 'auto',
+  padding: `0 ${tableSidePadding} 0 ${tableSidePadding}`,
+  boxSizing: 'border-box'
 });
-const containerDragPreviewStyles = css({
-  overflow: 'hidden'
+const tableStyles = css({
+  // These styles are needed to prevent thead bottom border from scrolling away.
+  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+  borderCollapse: 'separate',
+  borderSpacing: 0
+});
+
+// By default tbody and thead have border-bottom: 2px ...
+// This removes it, because for header we handle it via `th` styling and footer supply bottom border
+const noDefaultBorderStyles = css({
+  borderBottom: 0
 });
 function extractIndex(data) {
   const {
@@ -69,7 +92,6 @@ const BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
   const keyBasedWidth = {
     assignee: BASE_WIDTH * 22,
-    key: BASE_WIDTH * 10,
     labels: BASE_WIDTH * 22,
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
@@ -98,11 +120,11 @@ export const IssueLikeDataTableView = ({
   visibleColumnKeys,
   onVisibleColumnKeysChange,
   status,
-  hasNextPage
+  hasNextPage,
+  scrollableContainerHeight
 }) => {
   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);
@@ -135,7 +157,7 @@ export const IssueLikeDataTableView = ({
       };
     })
   }), [visibleSortedColumns]);
-  const headColumns = visibleSortedColumns.map(({
+  const headColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
@@ -144,7 +166,7 @@ export const IssueLikeDataTableView = ({
     content: title,
     shouldTruncate: true,
     maxWidth: getColumnWidth(key, type)
-  }));
+  })), [visibleSortedColumns]);
   useEffect(() => {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -152,37 +174,41 @@ export const IssueLikeDataTableView = ({
       });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  let dndPreviewHeight = 0;
-  if (items.length > 0 && containerRef.current) {
-    const containerEl = containerRef.current;
-    invariant(containerEl);
-    dndPreviewHeight = containerEl.offsetHeight;
-  }
+  const hasData = items.length > 0;
 
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   const initialAutoScrollerClientY = useRef();
   useEffect(() => {
-    if (!onVisibleColumnKeysChange) {
+    if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
     return combine(monitorForElements({
       onDragStart: ({
         location
       }) => {
+        var _containerRef$current;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         autoScroller.start({
-          input: location.current.input,
+          input: {
+            ...location.current.input,
+            clientY:
+            // The goal is to have clientY the same and in the middle of the scrollable area
+            // Since clientY is taken from to of the viewport we need to plus that in order to get
+            // middle of the scrollable area in reference to the viewport
+            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+          },
           behavior: 'container-only'
         });
       },
       onDrag: ({
         location
       }) => {
+        var _containerRef$current2;
         autoScroller.updateInput({
           input: {
             ...location.current.input,
-            clientY: initialAutoScrollerClientY.current || 0
+            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
           }
         });
       },
@@ -190,7 +216,6 @@ export const IssueLikeDataTableView = ({
         source,
         location
       }) {
-        initialAutoScrollerClientY.current = null;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -220,7 +245,7 @@ export const IssueLikeDataTableView = ({
         }
       }
     }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   const tableRows = useMemo(() => items.map((newRowData, rowIndex) => ({
     key: `${identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex}`,
     cells: visibleSortedColumns.map(({
@@ -242,9 +267,7 @@ export const IssueLikeDataTableView = ({
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
   })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  const rows = [...tableRows, ...(status === 'loading' ? [loadingRow] : [])];
-  const setIsDragPreviewOn = useCallback(() => setIsDragPreview(true), [setIsDragPreview]);
-  const setIsDragPreviewOff = useCallback(() => setIsDragPreview(false), [setIsDragPreview]);
+  const rows = useMemo(() => [...tableRows, ...(status === 'loading' ? [loadingRow] : [])], [loadingRow, status, tableRows]);
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -261,32 +284,50 @@ export const IssueLikeDataTableView = ({
   }, [hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
-    css: isDragPreview ? containerDragPreviewStyles : null
+    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    style: scrollableContainerHeight ? {
+      maxHeight: `${scrollableContainerHeight}px`
+    } : undefined
   }, jsx(Table, {
-    css: isDragPreview ? tableDragPreviewStyles : null,
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: tableHeadStyles
+    css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", null, headColumns.map(({
     key,
     content,
     maxWidth
   }, cellIndex) => {
-    const TruncatedContent = () => jsx("div", {
-      css: truncatedCellStyles
-    }, content);
-    if (onVisibleColumnKeysChange && status !== 'loading') {
+    if (onVisibleColumnKeysChange && hasData) {
+      var _containerRef$current3;
+      const previewRows = tableRows.map(({
+        cells
+      }) => {
+        const cell = cells.find(({
+          key: cellKey
+        }) => cellKey === key);
+        if (cell) {
+          return cell.content;
+        }
+      }).slice(0, 5);
+      const dragPreview = jsx(DragColumnPreview, {
+        title: jsx(Heading, {
+          level: "h400"
+        }, content),
+        rows: previewRows
+      });
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
         index: cellIndex,
         maxWidth: maxWidth,
-        dndPreviewHeight: dndPreviewHeight,
-        onDragPreviewStart: setIsDragPreviewOn,
-        onDragPreviewEnd: setIsDragPreviewOff
-      }, jsx(TruncatedContent, null));
+        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
+        dragPreview: dragPreview
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -294,15 +335,17 @@ export const IssueLikeDataTableView = ({
         style: {
           maxWidth
         }
-      }, jsx(TruncatedContent, null));
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+  }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
-    isDatasourceLoading: status === 'loading',
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
   })))), jsx("tbody", {
+    css: noDefaultBorderStyles,
     "data-testid": testId && `${testId}--body`
   }, rows.map(({
     key,