@atlaskit/link-datasource 0.31.2 → 0.31.3

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

@@ -1,11 +1,29 @@
 import styled from '@emotion/styled';
+import { N40 } from '@atlaskit/theme/colors';
 export const Table = styled.table`
   width: 100%;
 `;
 export const TableHeading = styled.th`
+  cursor: grab;
   position: relative;
   padding-block: ${"var(--ds-space-100, 8px)"};
   line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
+  .ProseMirror & h5,
+  & h5 {
+    margin-top: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */
+  }
+
+  &:hover .issue-like-table-drag-handle {
+    width: 24px;
+  }
+  &:hover .issue-like-table-drag-handle-spacer {
+    width: 0px;
+  }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`
   &:first-child {

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

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -23,8 +23,9 @@ const dropdownContainerStyles = css({
 });
 const contentContainerStyles = css({
   display: 'grid',
-  height: '420px',
-  overflow: 'auto'
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
 });
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,
@@ -159,7 +160,9 @@ export const JiraIssuesConfigModal = props => {
   const handleViewModeChange = selectedMode => {
     setCurrentViewMode(selectedMode);
   };
-  const issueLikeDataTableView = useMemo(() => jsx(IssueLikeDataTableView, {
+  const issueLikeDataTableView = useMemo(() => jsx("div", {
+    css: contentContainerStyles
+  }, jsx(IssueLikeDataTableView, {
     testId: "jira-jql-datasource-table",
     status: status,
     columns: columns,
@@ -169,7 +172,7 @@ export const JiraIssuesConfigModal = props => {
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: setVisibleColumnKeys
-  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, 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 === 'unauthorized') {
@@ -205,9 +208,11 @@ export const JiraIssuesConfigModal = props => {
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx(EmptyState, {
+      return jsx("div", {
+        css: contentContainerStyles
+      }, jsx(EmptyState, {
         testId: `jira-jql-datasource-modal--empty-state`
-      });
+      }));
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -250,9 +255,7 @@ export const JiraIssuesConfigModal = props => {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
-  }), jsx("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(FormattedNumber, {

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

@@ -11,20 +11,18 @@ import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
 import { footerMessages } from './messages';
 import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div`
+  padding: 0 ${"var(--ds-space-200, 16px)"};
+  box-sizing: border-box;
+  background: ${`var(--ds-background-input, ${N0})`};
+`;
+const TopBorderWrapper = styled.div`
   display: flex;
+  box-sizing: border-box;
   justify-content: space-between;
-  width: 100%;
   padding: ${"var(--ds-space-250, 20px)"} 0;
-  position: sticky;
-  bottom: 0;
-  background: ${`var(--ds-background-input, ${N0})`};
-  border-top-style: solid;
-  border-top-color: ${`var(--ds-background-neutral, ${N40})`};
-  margin-top: -2px;
-  align-self: center;
+  border-top: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
 `;
 const IssueCounterWrapper = styled.div`
-  margin-left: 10px;
   display: flex;
   align-self: center;
   color: ${`var(--ds-text-accent-gray, ${N800})`};
@@ -55,7 +53,9 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showIssueCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
+  }, jsx(TopBorderWrapper, null, jsx(IssueCounterWrapper, {
+    "data-testid": 'issue-count-wrapper'
+  }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
     level: "h400"
   }, jsx(FormattedNumber, {
@@ -76,5 +76,5 @@ export const TableFooter = ({
     }),
     isDisabled: isLoading,
     testId: "refresh-button"
-  })))) : null;
+  }))))) : null;
 };

package/dist/es2019/version.json

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

package/dist/esm/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';
-var TableViewWrapperStyles = css({
-  display: 'grid',
-  position: 'relative',
-  padding: "var(--ds-space-200, 16px)",
-  paddingBottom: 0,
-  boxSizing: 'border-box'
-});
 export var DatasourceTableView = function DatasourceTableView(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -57,9 +50,8 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
       onRefresh: reset
     });
   }
-  return columns.length > 0 ? jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(IssueLikeDataTableView, {
+  var isDataReady = columns.length > 0;
+  return jsx("div", null, isDataReady ? jsx(IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -68,18 +60,14 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     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/esm/ui/issue-like-table/column-picker/index.js

@@ -13,8 +13,7 @@ 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 isDatasourceLoading = _ref.isDatasourceLoading,
-    columns = _ref.columns,
+  var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
     onOpen = _ref.onOpen;
@@ -120,8 +119,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button",
-        isDisabled: isDatasourceLoading
+        testId: "column-picker-trigger-button"
       }));
     }
   });

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

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

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

@@ -2,16 +2,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @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';
-var tableHeadingStyles = css({
-  cursor: 'grab'
-});
 var tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -31,7 +31,14 @@ var verticallyAlignedStyles = css({
 var dragHandleStyles = css({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  overflow: 'hidden',
+  width: 0,
+  transition: 'width 0.5s'
+});
+var dragHandleSpacerStyles = css({
+  width: 24,
+  transition: 'width 0.5s'
 });
 var dropTargetStyles = css({
   position: 'absolute',
@@ -42,20 +49,25 @@ var dropTargetStyles = css({
 var noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+var idleState = {
+  type: 'idle'
+};
+var draggingState = {
+  type: 'dragging'
+};
 export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   var children = _ref.children,
     id = _ref.id,
     index = _ref.index,
     tableId = _ref.tableId,
     dndPreviewHeight = _ref.dndPreviewHeight,
-    maxWidth = _ref.maxWidth,
-    onDragPreviewStart = _ref.onDragPreviewStart,
-    onDragPreviewEnd = _ref.onDragPreviewEnd;
+    dragPreview = _ref.dragPreview,
+    maxWidth = _ref.maxWidth;
   var ref = useRef(null);
-  var _useState = useState('idle'),
+  var _useState = useState(idleState),
     _useState2 = _slicedToArray(_useState, 2),
-    status = _useState2[0],
-    setStatus = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isDraggingAnyColumn = _useState4[0],
@@ -78,19 +90,38 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
           tableId: tableId
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview() {
-        setStatus('preview');
-        onDragPreviewStart();
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        setCustomNativeDragPreview({
+          getOffset: offsetFromPointer({
+            x: '18px',
+            y: '18px'
+          }),
+          render: function render(_ref3) {
+            var container = _ref3.container;
+            // Cause a `react` re-render to create your portal synchronously
+            setState({
+              type: 'preview',
+              container: 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 function () {
+              return setState(draggingState);
+            };
+          },
+          nativeSetDragImage: nativeSetDragImage
+        });
       },
       onDragStart: function onDragStart() {
-        setStatus('dragging');
-        onDragPreviewEnd();
+        setState(draggingState);
       },
       onDrop: function 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
@@ -102,9 +133,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       getIsSticky: function getIsSticky() {
         return true;
       },
-      getData: function getData(_ref2) {
-        var input = _ref2.input,
-          element = _ref2.element;
+      getData: function getData(_ref4) {
+        var input = _ref4.input,
+          element = _ref4.element;
         var data = {
           id: id,
           index: index
@@ -135,8 +166,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
   useEffect(function () {
     return monitorForElements({
-      canMonitor: function canMonitor(_ref3) {
-        var source = _ref3.source;
+      canMonitor: function canMonitor(_ref5) {
+        var source = _ref5.source;
         return source.data.type === 'table-header' && source.data.tableId === tableId;
       },
       onDragStart: function onDragStart() {
@@ -152,7 +183,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   }, [tableId]);
   return jsx(TableHeading, {
     ref: ref,
-    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
       maxWidth: maxWidth
@@ -169,9 +200,13 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   })), jsx("div", {
     css: verticallyAlignedStyles
   }, jsx("div", {
-    css: dragHandleStyles
+    css: dragHandleStyles,
+    className: "issue-like-table-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "".concat(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/esm/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';
+var tableBodyStyles = css({
+  borderBottom: 0
+});
 var baseColumns = [{
   key: 'type',
   width: 50
@@ -118,7 +121,9 @@ export default (function (_ref3) {
       height: 13,
       borderRadius: 8
     }));
-  }))), jsx("tbody", null, rows.map(function (row) {
+  }))), jsx("tbody", {
+    css: tableBodyStyles
+  }, rows.map(function (row) {
     return jsx("tr", {
       key: row.id
     }, columnsToRender.map(function (column) {