@atlaskit/link-datasource 1.7.6 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.8.0
+
+### Minor Changes
+
+- [#41368](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41368) [`1daa2514bcc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1daa2514bcc) - [ux] Updates empty state and loading row skeletons to prevent visual jumps once data loads.
+
 ## 1.7.6
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6"
+  packageVersion: "1.8.0"
 };

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -280,7 +280,6 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
         reset();
         void onNextPage({
           isSchemaFromData: false,
-          // since this is not inital load, we will already have schema
           shouldRequestFirstPage: true
         });
       }

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

@@ -234,7 +234,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6",
+  packageVersion: "1.8.0",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -15,6 +15,7 @@ var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _useColumnPickerRenderedFailedUfoExperience = require("../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
 var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
+var _styled = require("../../ui/issue-like-table/styled");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
 var _noResults = require("../common/error-state/no-results");
@@ -134,13 +135,12 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590,
+      scrollableContainerHeight: _styled.ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey
     }) : (0, _react2.jsx)(_emptyState.default, {
       testId: "datasource-table-view-skeleton",
-      isCompact: true,
-      isLoading: !isDataReady || status === 'loading'
+      isCompact: true
     }), (0, _react2.jsx)(_tableFooter.TableFooter, {
       itemCount: isDataReady ? totalCount : undefined,
       onRefresh: forcedReset,

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

@@ -1,33 +1,46 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _linkingCommon = require("@atlaskit/linking-common");
-var _user = _interopRequireDefault(require("../render-type/user"));
 var _styled = require("../styled");
-var _priority = _interopRequireDefault(require("./priority"));
-var _type = _interopRequireDefault(require("./type"));
 /** @jsx jsx */
 
+var SkeletonComponent = function SkeletonComponent(_ref) {
+  var width = _ref.width,
+    itemName = _ref.itemName;
+  return (0, _react.jsx)(_linkingCommon.Skeleton, {
+    borderRadius: 8,
+    testId: "".concat(itemName, "-empty-state-skeleton"),
+    height: 14,
+    width: width
+  });
+};
+var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableBodyStyles = (0, _react.css)({
   borderBottom: 0
 });
+var cellStyles = (0, _react.css)({
+  paddingBlock: "var(--ds-space-100, 12px)",
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
 var baseColumns = [{
   key: 'type',
-  width: 50
+  width: 35
 }, {
   key: 'issue',
   width: 50
 }, {
   key: 'summary',
-  width: 70
+  width: 100
 }, {
   key: 'assignee',
-  width: 100
+  width: 70
 }, {
   key: 'priority',
   width: 60
@@ -44,91 +57,64 @@ var baseColumns = [{
   key: 'due',
   width: 50
 }];
-var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
-var types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
-var summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
-var statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
-var rows = new Array(10).fill(null).map(function (_, index) {
-  return {
-    id: index,
-    priority: priorities[index],
-    type: types[index],
-    summaryWidth: summaryColumnWidths[index],
-    statusWidth: statusColumnWidths[index]
-  };
-});
-var cellStyles = (0, _react.css)({
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
-var renderItem = function renderItem(_ref, _ref2, isShimmering) {
-  var key = _ref.key,
-    width = _ref.width;
-  var priority = _ref2.priority,
-    type = _ref2.type,
-    summaryWidth = _ref2.summaryWidth,
-    statusWidth = _ref2.statusWidth;
+var longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+var shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
+var renderItem = function renderItem(_ref2, _ref3) {
+  var key = _ref2.key,
+    width = _ref2.width;
+  var longWidth = _ref3.longWidth,
+    shortWidth = _ref3.shortWidth;
   switch (key) {
-    case 'assignee':
-      return (0, _react.jsx)(_user.default, null, (0, _react.jsx)(_linkingCommon.Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
-      }));
-    case 'priority':
-      return (0, _react.jsx)(_priority.default, {
-        priority: priority
-      });
-    case 'type':
-      return (0, _react.jsx)(_type.default, {
-        type: type
+    case 'status':
+      return (0, _react.jsx)(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
       });
     case 'summary':
-      return (0, _react.jsx)(_linkingCommon.Skeleton, {
-        appearance: "blue",
-        borderRadius: 10,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: summaryWidth
-      });
-    case 'status':
-      return (0, _react.jsx)(_linkingCommon.Skeleton, {
-        appearance: "blue",
-        borderRadius: 3,
-        testId: "empty-state-skeleton",
-        height: 16,
-        isShimmering: isShimmering,
-        width: statusWidth
+      return (0, _react.jsx)(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
       });
     default:
-      return (0, _react.jsx)(_linkingCommon.Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
+      return (0, _react.jsx)(SkeletonComponent, {
+        width: width,
+        itemName: key
       });
   }
 };
-var _default = exports.default = function _default(_ref3) {
-  var isCompact = _ref3.isCompact,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    testId = _ref3.testId;
+var _default = exports.default = function _default(_ref4) {
+  var isCompact = _ref4.isCompact,
+    testId = _ref4.testId;
   var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
-  return (0, _react.jsx)("table", {
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  var rowsNumber = isCompact ? 14 : 10;
+  var rows = new Array(rowsNumber).fill(null).map(function (_, index) {
+    return {
+      id: index,
+      longWidth: longColumnWidths[index],
+      shortWidth: shortColumnWidths[index]
+    };
+  });
+  return (0, _react.jsx)("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // the isCompact prop is applied to non-modal empty states which require additional padding
+      // this maxHeight comes from scrollableContainerHeight
+      maxHeight: _styled.ScrollableContainerHeight,
+      padding: isCompact ? "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding) : '0',
+      boxSizing: 'border-box'
+    }
+  }, (0, _react.jsx)("table", {
     "data-testid": testId
-  }, (0, _react.jsx)("thead", null, (0, _react.jsx)("tr", null, columnsToRender.map(function (_ref4) {
-    var key = _ref4.key,
-      width = _ref4.width;
-    return (0, _react.jsx)(_styled.EmptyStateTableHeading, {
+  }, (0, _react.jsx)("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, (0, _react.jsx)("tr", null, columnsToRender.map(function (_ref5) {
+    var key = _ref5.key,
+      width = _ref5.width;
+    return (0, _react.jsx)(_styled.TableHeading, {
       key: key,
       style: {
         width: width
@@ -137,8 +123,7 @@ var _default = exports.default = function _default(_ref3) {
       appearance: "darkGray",
       borderRadius: 8,
       testId: "empty-state-skeleton",
-      isShimmering: isLoading,
-      height: 13,
+      height: 12,
       width: width
     }));
   }))), (0, _react.jsx)("tbody", {
@@ -150,7 +135,7 @@ var _default = exports.default = function _default(_ref3) {
       return (0, _react.jsx)("td", {
         css: cellStyles,
         key: column.key
-      }, renderItem(column, row, isLoading));
+      }, renderItem(column, row));
     }));
-  })));
+  }))));
 };

package/dist/cjs/ui/issue-like-table/empty-state/type.js

@@ -15,7 +15,7 @@ var _4 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/issue/16"))
 var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/story/16"));
 var _6 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/task/16"));
 var _templateObject;
-var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: left;\n"])));
 var _default = exports.default = function _default(_ref) {
   var type = _ref.type;
   var TypeIcon = function TypeIcon() {

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

@@ -93,8 +93,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -174,9 +173,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       cells: visibleSortedColumns.map(function (_ref3) {
         var key = _ref3.key;
         var content = (0, _react2.jsx)(_linkingCommon.Skeleton, {
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          width: '100%',
-          height: '20px'
+          borderRadius: 8,
+          width: "100%",
+          height: 14,
+          testId: "issues-table-row-loading"
         });
         return {
           key: key,
@@ -302,8 +302,24 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
   var rows = (0, _react.useMemo)(function () {
-    return [].concat((0, _toConsumableArray2.default)(tableRows), (0, _toConsumableArray2.default)(status === 'loading' ? [loadingRow] : []));
-  }, [loadingRow, status, tableRows]);
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [].concat((0, _toConsumableArray2.default)(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(tableRows.length)
+      })]);
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return (0, _toConsumableArray2.default)(Array(loadingRowsCount)).map(function (_, index) {
+      return _objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(index)
+      });
+    });
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   var onSelectedColumnKeysChange = (0, _react.useCallback)(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -396,6 +412,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth: maxWidth
         }
       }, heading);
@@ -421,14 +439,21 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       var cellKey = _ref14.key,
         content = _ref14.content,
         maxWidth = _ref14.maxWidth;
+      var loadingRowStyle = {
+        maxWidth: maxWidth
+      };
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 12px)"
+        });
+      }
       return (0, _react2.jsx)("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
         css: truncatedCellStyles,
-        style: {
-          maxWidth: maxWidth
-        }
+        style: loadingRowStyle
       }, content);
     }));
   }))));

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableHeading = exports.Table = exports.FieldTextFontSize = exports.EmptyStateTableHeading = void 0;
+exports.TableHeading = exports.Table = exports.ScrollableContainerHeight = exports.FieldTextFontSize = 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 _templateObject, _templateObject2;
+var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var FieldTextFontSize = exports.FieldTextFontSize = '14px';
 var Table = exports.Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
-var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
-var EmptyStateTableHeading = exports.EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
+var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));

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

@@ -454,8 +454,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       return (0, _react2.jsx)("div", {
         css: contentContainerStyles
       }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state",
-        isLoading: true
+        testId: "jira-jql-datasource-modal--empty-state"
       }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {
         searchMethod: currentSearchMethod
       }));

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6"
+  packageVersion: "1.8.0"
 };

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -177,7 +177,6 @@ export const useDatasourceTableState = ({
         reset();
         void onNextPage({
           isSchemaFromData: false,
-          // since this is not inital load, we will already have schema
           shouldRequestFirstPage: true
         });
       }

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

@@ -194,7 +194,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6",
+  packageVersion: "1.8.0",
   source: 'datasourceConfigModal'
 };
 const contextData = {

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

@@ -9,6 +9,7 @@ import { startUfoExperience } from '../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
@@ -129,13 +130,12 @@ const DatasourceTableViewWithoutAnalytics = ({
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590,
+      scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
-      isCompact: true,
-      isLoading: !isDataReady || status === 'loading'
+      isCompact: true
     }), jsx(TableFooter, {
       itemCount: isDataReady ? totalCount : undefined,
       onRefresh: forcedReset,

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

@@ -1,25 +1,38 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
-import UserType from '../render-type/user';
-import { EmptyStateTableHeading } from '../styled';
-import Priority from './priority';
-import Type from './type';
+import { ScrollableContainerHeight, TableHeading } from '../styled';
+const SkeletonComponent = ({
+  width,
+  itemName
+}) => jsx(Skeleton, {
+  borderRadius: 8,
+  testId: `${itemName}-empty-state-skeleton`,
+  height: 14,
+  width: width
+});
+const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableBodyStyles = css({
   borderBottom: 0
 });
+const cellStyles = css({
+  paddingBlock: "var(--ds-space-100, 12px)",
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
 const baseColumns = [{
   key: 'type',
-  width: 50
+  width: 35
 }, {
   key: 'issue',
   width: 50
 }, {
   key: 'summary',
-  width: 70
+  width: 100
 }, {
   key: 'assignee',
-  width: 100
+  width: 70
 }, {
   key: 'priority',
   width: 60
@@ -36,91 +49,65 @@ const baseColumns = [{
   key: 'due',
   width: 50
 }];
-const priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
-const types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
-const summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
-const statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
-const rows = new Array(10).fill(null).map((_, index) => ({
-  id: index,
-  priority: priorities[index],
-  type: types[index],
-  summaryWidth: summaryColumnWidths[index],
-  statusWidth: statusColumnWidths[index]
-}));
-const cellStyles = css({
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
+const longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+const shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
 const renderItem = ({
   key,
   width
 }, {
-  priority,
-  type,
-  summaryWidth,
-  statusWidth
-}, isShimmering) => {
+  longWidth,
+  shortWidth
+}) => {
   switch (key) {
-    case 'assignee':
-      return jsx(UserType, null, jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
-      }));
-    case 'priority':
-      return jsx(Priority, {
-        priority: priority
-      });
-    case 'type':
-      return jsx(Type, {
-        type: type
+    case 'status':
+      return jsx(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
       });
     case 'summary':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 10,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: summaryWidth
-      });
-    case 'status':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 3,
-        testId: "empty-state-skeleton",
-        height: 16,
-        isShimmering: isShimmering,
-        width: statusWidth
+      return jsx(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
       });
     default:
-      return jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
+      return jsx(SkeletonComponent, {
+        width: width,
+        itemName: key
       });
   }
 };
 export default (({
   isCompact,
-  isLoading = false,
   testId
 }) => {
   const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
-  return jsx("table", {
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  const rowsNumber = isCompact ? 14 : 10;
+  const rows = new Array(rowsNumber).fill(null).map((_, index) => ({
+    id: index,
+    longWidth: longColumnWidths[index],
+    shortWidth: shortColumnWidths[index]
+  }));
+  return jsx("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // the isCompact prop is applied to non-modal empty states which require additional padding
+      // this maxHeight comes from scrollableContainerHeight
+      maxHeight: ScrollableContainerHeight,
+      padding: isCompact ? `0 ${tableSidePadding} 0 ${tableSidePadding}` : '0',
+      boxSizing: 'border-box'
+    }
+  }, jsx("table", {
     "data-testid": testId
-  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(({
+  }, jsx("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, jsx("tr", null, columnsToRender.map(({
     key,
     width
-  }) => jsx(EmptyStateTableHeading, {
+  }) => jsx(TableHeading, {
     key: key,
     style: {
       width
@@ -129,8 +116,7 @@ export default (({
     appearance: "darkGray",
     borderRadius: 8,
     testId: "empty-state-skeleton",
-    isShimmering: isLoading,
-    height: 13,
+    height: 12,
     width: width
   }))))), jsx("tbody", {
     css: tableBodyStyles
@@ -139,5 +125,5 @@ export default (({
   }, columnsToRender.map(column => jsx("td", {
     css: cellStyles,
     key: column.key
-  }, renderItem(column, row, isLoading)))))));
+  }, renderItem(column, row))))))));
 });

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

@@ -9,7 +9,7 @@ import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
 const IconWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 `;
 export default (({
   type

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

@@ -90,8 +90,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -153,9 +152,10 @@ export const IssueLikeDataTableView = ({
       key
     }) => {
       const content = jsx(Skeleton, {
-        borderRadius: "var(--ds-border-radius-100, 3px)",
-        width: '100%',
-        height: '20px'
+        borderRadius: 8,
+        width: "100%",
+        height: 14,
+        testId: "issues-table-row-loading"
       });
       return {
         key,
@@ -274,7 +274,25 @@ export const IssueLikeDataTableView = ({
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
   })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  const rows = useMemo(() => [...tableRows, ...(status === 'loading' ? [loadingRow] : [])], [loadingRow, status, tableRows]);
+  const rows = useMemo(() => {
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [...tableRows, {
+        ...loadingRow,
+        key: `loading-${tableRows.length}`
+      }];
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    const loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return [...Array(loadingRowsCount)].map((_, index) => ({
+      ...loadingRow,
+      key: `loading-${index}`
+    }));
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -352,6 +370,8 @@ export const IssueLikeDataTableView = ({
         key: key,
         "data-testid": `${key}-column-heading`,
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth
         }
       }, heading);
@@ -377,14 +397,24 @@ export const IssueLikeDataTableView = ({
     key: cellKey,
     content,
     maxWidth
-  }, cellIndex) => jsx("td", {
-    key: cellKey,
-    "data-testid": testId && `${testId}--cell-${cellIndex}`,
-    colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-    css: truncatedCellStyles,
-    style: {
+  }, cellIndex) => {
+    let loadingRowStyle = {
       maxWidth
+    };
+    // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+    if (key !== null && key !== void 0 && key.includes('loading')) {
+      loadingRowStyle = {
+        ...loadingRowStyle,
+        paddingBlock: "var(--ds-space-100, 12px)"
+      };
     }
-  }, content)))))));
+    return jsx("td", {
+      key: cellKey,
+      "data-testid": testId && `${testId}--cell-${cellIndex}`,
+      colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
+      css: truncatedCellStyles,
+      style: loadingRowStyle
+    }, content);
+  }))))));
 };
 export const EmptyState = TableEmptyState;

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export const ScrollableContainerHeight = 590;
 export const FieldTextFontSize = '14px';
 export const Table = styled.table`
   width: 100%;
@@ -15,9 +16,4 @@ export const TableHeading = styled.th`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-`;
-export const EmptyStateTableHeading = styled(TableHeading)`
-  &:first-child {
-    padding-left: ${"var(--ds-space-100, 8px)"};
-  }
 `;

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

@@ -397,8 +397,7 @@ export const PlainJiraIssuesConfigModal = props => {
       return jsx("div", {
         css: contentContainerStyles
       }, !!jql ? jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`,
-        isLoading: true
+        testId: `jira-jql-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {
         searchMethod: currentSearchMethod
       }));

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6"
+  packageVersion: "1.8.0"
 };

package/dist/esm/hooks/useDatasourceTableState.js

@@ -273,7 +273,6 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
         reset();
         void onNextPage({
           isSchemaFromData: false,
-          // since this is not inital load, we will already have schema
           shouldRequestFirstPage: true
         });
       }

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

@@ -225,7 +225,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6",
+  packageVersion: "1.8.0",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -9,6 +9,7 @@ import { startUfoExperience } from '../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
@@ -126,13 +127,12 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590,
+      scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
-      isCompact: true,
-      isLoading: !isDataReady || status === 'loading'
+      isCompact: true
     }), jsx(TableFooter, {
       itemCount: isDataReady ? totalCount : undefined,
       onRefresh: forcedReset,

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

@@ -1,25 +1,39 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
-import UserType from '../render-type/user';
-import { EmptyStateTableHeading } from '../styled';
-import Priority from './priority';
-import Type from './type';
+import { ScrollableContainerHeight, TableHeading } from '../styled';
+var SkeletonComponent = function SkeletonComponent(_ref) {
+  var width = _ref.width,
+    itemName = _ref.itemName;
+  return jsx(Skeleton, {
+    borderRadius: 8,
+    testId: "".concat(itemName, "-empty-state-skeleton"),
+    height: 14,
+    width: width
+  });
+};
+var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableBodyStyles = css({
   borderBottom: 0
 });
+var cellStyles = css({
+  paddingBlock: "var(--ds-space-100, 12px)",
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
 var baseColumns = [{
   key: 'type',
-  width: 50
+  width: 35
 }, {
   key: 'issue',
   width: 50
 }, {
   key: 'summary',
-  width: 70
+  width: 100
 }, {
   key: 'assignee',
-  width: 100
+  width: 70
 }, {
   key: 'priority',
   width: 60
@@ -36,91 +50,64 @@ var baseColumns = [{
   key: 'due',
   width: 50
 }];
-var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
-var types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
-var summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
-var statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
-var rows = new Array(10).fill(null).map(function (_, index) {
-  return {
-    id: index,
-    priority: priorities[index],
-    type: types[index],
-    summaryWidth: summaryColumnWidths[index],
-    statusWidth: statusColumnWidths[index]
-  };
-});
-var cellStyles = css({
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
-var renderItem = function renderItem(_ref, _ref2, isShimmering) {
-  var key = _ref.key,
-    width = _ref.width;
-  var priority = _ref2.priority,
-    type = _ref2.type,
-    summaryWidth = _ref2.summaryWidth,
-    statusWidth = _ref2.statusWidth;
+var longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+var shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
+var renderItem = function renderItem(_ref2, _ref3) {
+  var key = _ref2.key,
+    width = _ref2.width;
+  var longWidth = _ref3.longWidth,
+    shortWidth = _ref3.shortWidth;
   switch (key) {
-    case 'assignee':
-      return jsx(UserType, null, jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
-      }));
-    case 'priority':
-      return jsx(Priority, {
-        priority: priority
-      });
-    case 'type':
-      return jsx(Type, {
-        type: type
+    case 'status':
+      return jsx(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
       });
     case 'summary':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 10,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: summaryWidth
-      });
-    case 'status':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 3,
-        testId: "empty-state-skeleton",
-        height: 16,
-        isShimmering: isShimmering,
-        width: statusWidth
+      return jsx(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
       });
     default:
-      return jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
+      return jsx(SkeletonComponent, {
+        width: width,
+        itemName: key
       });
   }
 };
-export default (function (_ref3) {
-  var isCompact = _ref3.isCompact,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    testId = _ref3.testId;
+export default (function (_ref4) {
+  var isCompact = _ref4.isCompact,
+    testId = _ref4.testId;
   var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
-  return jsx("table", {
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  var rowsNumber = isCompact ? 14 : 10;
+  var rows = new Array(rowsNumber).fill(null).map(function (_, index) {
+    return {
+      id: index,
+      longWidth: longColumnWidths[index],
+      shortWidth: shortColumnWidths[index]
+    };
+  });
+  return jsx("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // the isCompact prop is applied to non-modal empty states which require additional padding
+      // this maxHeight comes from scrollableContainerHeight
+      maxHeight: ScrollableContainerHeight,
+      padding: isCompact ? "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding) : '0',
+      boxSizing: 'border-box'
+    }
+  }, jsx("table", {
     "data-testid": testId
-  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(function (_ref4) {
-    var key = _ref4.key,
-      width = _ref4.width;
-    return jsx(EmptyStateTableHeading, {
+  }, jsx("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, jsx("tr", null, columnsToRender.map(function (_ref5) {
+    var key = _ref5.key,
+      width = _ref5.width;
+    return jsx(TableHeading, {
       key: key,
       style: {
         width: width
@@ -129,8 +116,7 @@ export default (function (_ref3) {
       appearance: "darkGray",
       borderRadius: 8,
       testId: "empty-state-skeleton",
-      isShimmering: isLoading,
-      height: 13,
+      height: 12,
       width: width
     }));
   }))), jsx("tbody", {
@@ -142,7 +128,7 @@ export default (function (_ref3) {
       return jsx("td", {
         css: cellStyles,
         key: column.key
-      }, renderItem(column, row, isLoading));
+      }, renderItem(column, row));
     }));
-  })));
+  }))));
 });

package/dist/esm/ui/issue-like-table/empty-state/type.js

@@ -8,7 +8,7 @@ import Epic16Icon from '@atlaskit/icon-object/glyph/epic/16';
 import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
 import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
 import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
-var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: left;\n"])));
 export default (function (_ref) {
   var type = _ref.type;
   var TypeIcon = function TypeIcon() {

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

@@ -86,8 +86,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -167,9 +166,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       cells: visibleSortedColumns.map(function (_ref3) {
         var key = _ref3.key;
         var content = jsx(Skeleton, {
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          width: '100%',
-          height: '20px'
+          borderRadius: 8,
+          width: "100%",
+          height: 14,
+          testId: "issues-table-row-loading"
         });
         return {
           key: key,
@@ -295,8 +295,24 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
   var rows = useMemo(function () {
-    return [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
-  }, [loadingRow, status, tableRows]);
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [].concat(_toConsumableArray(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(tableRows.length)
+      })]);
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return _toConsumableArray(Array(loadingRowsCount)).map(function (_, index) {
+      return _objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(index)
+      });
+    });
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -389,6 +405,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth: maxWidth
         }
       }, heading);
@@ -414,14 +432,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       var cellKey = _ref14.key,
         content = _ref14.content,
         maxWidth = _ref14.maxWidth;
+      var loadingRowStyle = {
+        maxWidth: maxWidth
+      };
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 12px)"
+        });
+      }
       return jsx("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
         colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
         css: truncatedCellStyles,
-        style: {
-          maxWidth: maxWidth
-        }
+        style: loadingRowStyle
       }, content);
     }));
   }))));

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

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

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

@@ -445,8 +445,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jsx("div", {
         css: contentContainerStyles
       }, !!jql ? jsx(EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state",
-        isLoading: true
+        testId: "jira-jql-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {
         searchMethod: currentSearchMethod
       }));

package/dist/types/ui/issue-like-table/empty-state/index.d.ts

@@ -2,8 +2,7 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
-    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types/ui/issue-like-table/index.d.ts

@@ -15,4 +15,4 @@ export interface RowCellType {
 }
 export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ScrollableContainerHeight = 590;
 export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,11 +9,3 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
-export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts

@@ -2,8 +2,7 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
-    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -15,4 +15,4 @@ export interface RowCellType {
 }
 export declare const orderColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ScrollableContainerHeight = 590;
 export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,11 +9,3 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
-export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"