@atlaskit/link-datasource 0.31.2 → 0.32.0

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

@@ -5,19 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraIssuesConfigModal = void 0;
+exports.PlainJiraIssuesConfigModal = exports.JiraIssuesConfigModal = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _colors = require("@atlaskit/theme/colors");
+var _analytics = require("../../../analytics");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
+var _version = require("../../../version.json");
 var _accessRequired = require("../../common/error-state/access-required");
 var _modalLoadingError = require("../../common/error-state/modal-loading-error");
 var _noResults = require("../../common/error-state/no-results");
@@ -29,16 +33,17 @@ var _siteSelector = require("../site-selector");
 var _messages = require("./messages");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsx jsx */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
 var dropdownContainerStyles = (0, _react2.css)({
   display: 'flex',
   gap: "var(--ds-space-100, 0.5rem)"
 });
 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, ")"),
@@ -55,7 +60,7 @@ var issueCountStyles = (0, _react2.css)({
 var smartLinkContainerStyles = (0, _react2.css)({
   paddingLeft: '1px'
 });
-var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
+var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
     initialVisibleColumnKeys = props.visibleColumnKeys,
@@ -104,6 +109,8 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     totalCount = _useDatasourceTableSt.totalCount;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
   var selectedJiraSite = (0, _react.useMemo)(function () {
     return availableSites.find(function (jiraSite) {
       return jiraSite.cloudId === cloudId;
@@ -113,6 +120,9 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
   var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
+  (0, _react.useEffect)(function () {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
   (0, _react.useEffect)(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -129,7 +139,10 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
             case 2:
               jiraSites = _context.sent;
               setAvailableSites(jiraSites);
-            case 4:
+              fireEvent('ui.modal.ready.datasource', {
+                instancesCount: jiraSites.length
+              });
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -140,7 +153,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       };
     }();
     void fetchSiteDisplayNames();
-  }, []);
+  }, [fireEvent]);
   (0, _react.useEffect)(function () {
     if (!cloudId && selectedJiraSite) {
       setCloudId(selectedJiraSite.cloudId);
@@ -211,7 +224,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 +236,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 +273,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 +320,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, {
@@ -324,4 +339,17 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     testId: 'jira-jql-datasource-modal--insert-button'
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText)))));
 };
+exports.PlainJiraIssuesConfigModal = PlainJiraIssuesConfigModal;
+var analyticsContextAttributes = {
+  dataProvider: 'jira-issues'
+};
+var analyticsContextData = {
+  packageName: _version.name,
+  packageVersion: _version.version,
+  source: 'datasourceConfigModal'
+};
+var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
+  attributes: _objectSpread({}, analyticsContextAttributes)
+});
+var JiraIssuesConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(PlainJiraIssuesConfigModal);
 exports.JiraIssuesConfigModal = JiraIssuesConfigModal;

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.32.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/constants.js

@@ -0,0 +1 @@
+export const EVENT_CHANNEL = 'media';

package/dist/es2019/analytics/generated/analytics.types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/analytics/generated/create-event-payload.js

@@ -0,0 +1,28 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates Typescript types for analytics events from analytics.spec.yaml
+ *
+ * @codegen <<SignedSource::819168596ba17484cadda969f8ecf82d>>
+ * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
+ */
+
+const createEventPayload = (eventKey, ...[attributes]) => {
+  const [eventType, actionSubject, action, actionSubjectId] = eventKey.split('.');
+  if (eventType === 'screen') {
+    return {
+      eventType,
+      name: actionSubject,
+      action: 'viewed',
+      attributes: attributes
+    };
+  }
+  return {
+    eventType,
+    actionSubject,
+    action,
+    actionSubjectId,
+    attributes: attributes
+  };
+};
+export default createEventPayload;

package/dist/es2019/analytics/generated/use-analytics-events.js

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates Typescript types for analytics events from analytics.spec.yaml
+ *
+ * @codegen <<SignedSource::415836762b378b7d79f3aff4ba051c14>>
+ * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
+ */
+import { useCallback } from 'react';
+import { useAnalyticsEvents as useAnalyticsNextEvents } from '@atlaskit/analytics-next';
+import { EVENT_CHANNEL } from '../constants';
+import createEventPayload from './create-event-payload';
+export const useAnalyticsEvents = () => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsNextEvents();
+  const fireEvent = useCallback((...params) => {
+    const event = createAnalyticsEvent(createEventPayload(...params));
+    event.fire(EVENT_CHANNEL);
+  }, [createAnalyticsEvent]);
+  return {
+    fireEvent
+  };
+};

package/dist/es2019/analytics/index.js

@@ -0,0 +1,3 @@
+export { EVENT_CHANNEL } from './constants';
+import { useAnalyticsEvents } from './generated/use-analytics-events';
+export const useDatasourceAnalyticsEvents = () => useAnalyticsEvents();

package/dist/es2019/ui/common/error-state/access-required.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
 export const AccessRequired = ({
@@ -10,6 +12,14 @@ export const AccessRequired = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  useEffect(() => {
+    fireEvent('ui.error.shown', {
+      reason: 'access'
+    });
+  }, [fireEvent]);
   return jsx(EmptyState, {
     header: siteName ? formatMessage(loadingErrorMessages.accessRequiredWithSite, {
       siteName

package/dist/es2019/ui/common/error-state/loading-error.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
 const errorContainerStyles = css({
@@ -25,6 +27,14 @@ const errorDescriptionStyles = css({
 export const LoadingError = ({
   onRefresh
 }) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  useEffect(() => {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
     "data-testid": "jira-jql-datasource--loading-error"

package/dist/es2019/ui/common/error-state/modal-loading-error.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
 const errorContainerStyles = css({
@@ -25,6 +27,14 @@ const errorDescriptionStyles = css({
 export const ModalLoadingError = ({
   url
 }) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  useEffect(() => {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
     "data-testid": "jira-jql-datasource-modal--loading-error"

package/dist/es2019/ui/common/error-state/no-results.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { loadingErrorMessages } from './messages';
 const noResultsContainerStyles = css({
   display: 'grid',
@@ -21,6 +23,12 @@ const noResultsMessageStyles = css({
 export const NoResults = ({
   onRefresh
 }) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  useEffect(() => {
+    fireEvent('ui.emptyResult.shown.datasource', {});
+  }, [fireEvent]);
   return jsx("div", {
     css: noResultsContainerStyles,
     "data-testid": "jira-jql-datasource-modal--no-results"

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,