@atlaskit/link-datasource 0.33.1 → 0.33.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 0.33.3
+
+### Patch Changes
+
+- [`60170e1d0cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60170e1d0cd) - Fixes to table view header: Remove drag handles, add tooltip, fix padding in editor context
+
+## 0.33.2
+
+### Patch Changes
+
+- [`7e77ad40512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e77ad40512) - [ux] Add question mark to search field with link to aql docs
+
 ## 0.33.1
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/index.js

@@ -16,8 +16,11 @@ var _form = require("@atlaskit/form");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useValidateAqlText2 = require("../../../../hooks/useValidateAqlText");
 var _types = require("../../../../types/assets/types");
 var _styled = require("../styled");
@@ -27,6 +30,16 @@ var _messages = require("./messages");
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+var buttonBaseStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = (0, _react2.css)({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -143,7 +156,19 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
           width: 24
         }
       }, renderValidatorIcon(fieldProps.value, error, meta)),
-      elemAfterInput: (0, _react2.jsx)(_button.LoadingButton, {
+      elemAfterInput: (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
+        content: formatMessage(_messages.searchInputMessages.helpTooltipText),
+        position: "bottom"
+      }, (0, _react2.jsx)("a", {
+        href: AQLSupportDocumentLink,
+        target: "_blank",
+        css: buttonBaseStyles
+      }, (0, _react2.jsx)(_questionCircle.default, {
+        label: "label",
+        primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
+        size: "medium",
+        testId: "assets-datasource-modal-help"
+      }))), (0, _react2.jsx)(_button.LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
         iconBefore: (0, _react2.jsx)(_search.default, {
@@ -154,7 +179,7 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
         spacing: "none",
         testId: "assets-datasource-modal--aql-search-button",
         type: "submit"
-      }),
+      })),
       placeholder: formatMessage(_messages.searchInputMessages.placeholder),
       testId: testId
     }));

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/messages.js

@@ -10,6 +10,11 @@ var searchInputMessages = (0, _reactIntlNext.defineMessages)({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });
 exports.searchInputMessages = searchInputMessages;

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

@@ -10,7 +10,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
@@ -36,18 +35,6 @@ var verticallyAlignedStyles = (0, _react2.css)({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-var dragHandleStyles = (0, _react2.css)({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-var dragHandleSpacerStyles = (0, _react2.css)({
-  width: 24,
-  transition: 'width 0.5s'
-});
 var dropTargetStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
@@ -207,15 +194,6 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
     edge: closestEdge
   })), (0, _react2.jsx)("div", {
     css: verticallyAlignedStyles
-  }, (0, _react2.jsx)("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, (0, _react2.jsx)(_dragHandler.default, {
-    label: "".concat(id, "-drag-icon"),
-    size: "medium"
-  })), children, (0, _react2.jsx)("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
 };
 exports.DraggableTableHeading = DraggableTableHeading;

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

@@ -23,6 +23,7 @@ var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragma
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -338,6 +339,14 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
+    var heading = (0, _react2.jsx)(_tooltip.default, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, (0, _react2.jsx)(_heading.default, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref12) {
@@ -351,9 +360,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }).slice(0, 5);
       var dragPreview = (0, _react2.jsx)(_dragColumnPreview.DragColumnPreview, {
-        title: (0, _react2.jsx)(_heading.default, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
@@ -364,9 +371,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, (0, _react2.jsx)(_heading.default, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
@@ -374,9 +379,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, (0, _react2.jsx)(_heading.default, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

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

@@ -11,7 +11,7 @@ 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  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, ")"));
+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  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
 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/version.json

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

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useRef } from 'react';
+import { Fragment, useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -8,8 +8,11 @@ import { Field } from '@atlaskit/form';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
+import { N500 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
@@ -18,6 +21,16 @@ import { searchInputMessages } from './messages';
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+const buttonBaseStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -113,7 +126,19 @@ export const AqlSearchInput = ({
         width: 24
       }
     }, renderValidatorIcon(fieldProps.value, error, meta)),
-    elemAfterInput: jsx(LoadingButton, {
+    elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+      content: formatMessage(searchInputMessages.helpTooltipText),
+      position: "bottom"
+    }, jsx("a", {
+      href: AQLSupportDocumentLink,
+      target: "_blank",
+      css: buttonBaseStyles
+    }, jsx(QuestionCircleIcon, {
+      label: "label",
+      primaryColor: `var(--ds-icon, ${N500})`,
+      size: "medium",
+      testId: "assets-datasource-modal-help"
+    }))), jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
       iconBefore: jsx(SearchIcon, {
@@ -124,7 +149,7 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit"
-    }),
+    })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
   }))));

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/messages.js

@@ -4,5 +4,10 @@ export const searchInputMessages = defineMessages({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });

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

@@ -3,7 +3,6 @@ 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';
@@ -27,18 +26,6 @@ const verticallyAlignedStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-const dragHandleStyles = css({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-const dragHandleSpacerStyles = css({
-  width: 24,
-  transition: 'width 0.5s'
-});
 const dropTargetStyles = css({
   position: 'absolute',
   top: 0,
@@ -192,14 +179,5 @@ export const DraggableTableHeading = ({
     edge: closestEdge
   })), jsx("div", {
     css: verticallyAlignedStyles
-  }, jsx("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, jsx(DragHandlerIcon, {
-    label: `${id}-drag-icon`,
-    size: "medium"
-  })), children, jsx("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

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

@@ -11,6 +11,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 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 Tooltip from '@atlaskit/tooltip';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -299,6 +300,14 @@ export const IssueLikeDataTableView = ({
     content,
     maxWidth
   }, cellIndex) => {
+    const heading = jsx(Tooltip, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, jsx(Heading, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       const previewRows = tableRows.map(({
@@ -312,9 +321,7 @@ export const IssueLikeDataTableView = ({
         }
       }).slice(0, 5);
       const dragPreview = jsx(DragColumnPreview, {
-        title: jsx(Heading, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return jsx(DraggableTableHeading, {
@@ -325,9 +332,7 @@ export const IssueLikeDataTableView = ({
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -335,9 +340,7 @@ export const IssueLikeDataTableView = ({
         style: {
           maxWidth
         }
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

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

@@ -9,20 +9,12 @@ export const TableHeading = styled.th`
   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 {
+  & [data-testid='datasource-header-content--container'] {
     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;
+    line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
   }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`

package/dist/es2019/version.json

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

package/dist/esm/ui/assets-modal/search-container/aql-search-input/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { useCallback, useRef } from 'react';
+import { Fragment, useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -10,8 +10,11 @@ import { Field } from '@atlaskit/form';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
+import { N500 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
@@ -20,6 +23,16 @@ import { searchInputMessages } from './messages';
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+var buttonBaseStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -135,7 +148,19 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
           width: 24
         }
       }, renderValidatorIcon(fieldProps.value, error, meta)),
-      elemAfterInput: jsx(LoadingButton, {
+      elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+        content: formatMessage(searchInputMessages.helpTooltipText),
+        position: "bottom"
+      }, jsx("a", {
+        href: AQLSupportDocumentLink,
+        target: "_blank",
+        css: buttonBaseStyles
+      }, jsx(QuestionCircleIcon, {
+        label: "label",
+        primaryColor: "var(--ds-icon, ".concat(N500, ")"),
+        size: "medium",
+        testId: "assets-datasource-modal-help"
+      }))), jsx(LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
         iconBefore: jsx(SearchIcon, {
@@ -146,7 +171,7 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
         spacing: "none",
         testId: "assets-datasource-modal--aql-search-button",
         type: "submit"
-      }),
+      })),
       placeholder: formatMessage(searchInputMessages.placeholder),
       testId: testId
     }));

package/dist/esm/ui/assets-modal/search-container/aql-search-input/messages.js

@@ -4,5 +4,10 @@ export var searchInputMessages = defineMessages({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });

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

@@ -4,7 +4,6 @@ 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';
@@ -28,18 +27,6 @@ var verticallyAlignedStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-var dragHandleStyles = css({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-var dragHandleSpacerStyles = css({
-  width: 24,
-  transition: 'width 0.5s'
-});
 var dropTargetStyles = css({
   position: 'absolute',
   top: 0,
@@ -199,14 +186,5 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     edge: closestEdge
   })), jsx("div", {
     css: verticallyAlignedStyles
-  }, jsx("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, jsx(DragHandlerIcon, {
-    label: "".concat(id, "-drag-icon"),
-    size: "medium"
-  })), children, jsx("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

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

@@ -20,6 +20,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 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 Tooltip from '@atlaskit/tooltip';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -331,6 +332,14 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
+    var heading = jsx(Tooltip, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, jsx(Heading, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref12) {
@@ -344,9 +353,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }).slice(0, 5);
       var dragPreview = jsx(DragColumnPreview, {
-        title: jsx(Heading, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return jsx(DraggableTableHeading, {
@@ -357,9 +364,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -367,9 +372,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

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

@@ -3,5 +3,5 @@ var _templateObject, _templateObject2, _templateObject3;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(N40, ")"));
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: grab;\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    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
 export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/version.json

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

package/dist/types/ui/assets-modal/search-container/aql-search-input/messages.d.ts

@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
         description: string;
         defaultMessage: string;
     };
+    helpTooltipText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/assets-modal/search-container/aql-search-input/messages.d.ts

@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
         description: string;
         defaultMessage: string;
     };
+    helpTooltipText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -56,6 +56,7 @@
     "@atlaskit/textfield": "5.6.3",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tooltip": "^17.8.0",
     "@atlassianlabs/jql-editor": "^2.0.1",
     "@atlassianlabs/jql-editor-autocomplete-rest": "^1.1.2",
     "@babel/runtime": "^7.0.0",