@atlaskit/link-datasource 0.31.1 → 0.31.3

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

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3;
 var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
-var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
+var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  .ProseMirror & h5,\n  & h5 {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */\n  }\n\n  &:hover .issue-like-table-drag-handle {\n    width: 24px;\n  }\n  &:hover .issue-like-table-drag-handle-spacer {\n    width: 0px;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
 exports.TableHeading = TableHeading;
 var EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.EmptyStateTableHeading = EmptyStateTableHeading;

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.1",
+	"version": "0.31.3",
 	"sideEffects": false
 }

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -71,7 +71,7 @@ export const AssetsConfigModal = props => {
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
   const onInsertPressed = useCallback(() => {
-    if (!aql || !schemaId) {
+    if (!aql || !schemaId || !workspaceId) {
       return;
     }
     const firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -89,8 +89,8 @@ export const AssetsConfigModal = props => {
           datasource: {
             id: datasourceId,
             parameters: {
-              workspaceId: '',
-              aql: aql,
+              workspaceId,
+              aql,
               schemaId
             },
             views: [{
@@ -105,7 +105,7 @@ export const AssetsConfigModal = props => {
         }
       });
     }
-  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
+  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, workspaceId, visibleColumnKeys]);
   const handleOnSearch = useCallback((aql, schemaId) => {
     reset();
     setAql(aql);

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,