@atlaskit/link-datasource 0.30.3 → 0.31.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 0.31.1
+
+### Patch Changes
+
+- [`ac9d6f74970`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9d6f74970) - List of Links Assets Modal uses workspaceId instead of cloudId
+
+## 0.31.0
+
+### Minor Changes
+
+- [`220d407e10c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/220d407e10c) - [ux] Update empty state skeleton UI and add empty state to datasourceTableView
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.30.3
 
 ### Patch Changes

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

@@ -58,8 +58,7 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: workspaceId || '',
-      cloudId: ''
+      workspaceId: workspaceId || ''
     };
   }, [aql, schemaId, workspaceId]);
   var isParametersSet = !!(aql && workspaceId && schemaId);
@@ -110,8 +109,7 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
           datasource: {
             id: datasourceId,
             parameters: {
-              cloudId: '',
-              // TODO FLY-1278: get actual cloudID
+              workspaceId: '',
               aql: aql,
               schemaId: schemaId
             },

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatasourceTableView = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
 var _noResults = require("../common/error-state/no-results");
 var _issueLikeTable = require("../issue-like-table");
+var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-state"));
 var _tableFooter = require("../table-footer");
 /** @jsx jsx */
 
@@ -81,8 +81,14 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
-  })) : (0, _react2.jsx)(_spinner.default, {
-    testId: 'datasource-table-view-spinner'
-  });
+  })) : (0, _react2.jsx)("div", {
+    css: TableViewWrapperStyles
+  }, (0, _react2.jsx)(_emptyState.default, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), (0, _react2.jsx)(_tableFooter.TableFooter, {
+    onRefresh: reset,
+    isLoading: true
+  }));
 };
 exports.DatasourceTableView = DatasourceTableView;

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

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _user = _interopRequireDefault(require("../render-type/user"));
 var _styled = require("../styled");
@@ -14,35 +13,33 @@ var _priority = _interopRequireDefault(require("./priority"));
 var _type = _interopRequireDefault(require("./type"));
 /** @jsx jsx */
 
-var columns = [{
+var baseColumns = [{
   key: 'type',
-  title: 'Type'
+  width: 50
 }, {
   key: 'issue',
-  title: 'Key',
   width: 50
 }, {
   key: 'summary',
-  title: 'Summary'
+  width: 70
 }, {
   key: 'assignee',
-  title: 'Assignee',
   width: 100
 }, {
   key: 'priority',
-  title: 'P'
+  width: 60
 }, {
   key: 'status',
-  title: 'Status'
+  width: 60
 }, {
   key: 'resolution',
-  title: 'Resolution'
+  width: 55
 }, {
   key: 'created',
-  title: 'Created'
+  width: 50
 }, {
   key: 'due',
-  title: 'Updated'
+  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'];
@@ -57,68 +54,84 @@ var rows = new Array(10).fill(null).map(function (_, index) {
     statusWidth: statusColumnWidths[index]
   };
 });
-var _default = function _default(props) {
-  var renderItem = (0, _react.useCallback)(function (_ref, _ref2) {
-    var key = _ref.key,
-      width = _ref.width;
-    var priority = _ref2.priority,
-      type = _ref2.type,
-      summaryWidth = _ref2.summaryWidth,
-      statusWidth = _ref2.statusWidth;
-    switch (key) {
-      case 'assignee':
-        return (0, _react2.jsx)(_user.default, null, (0, _react2.jsx)(_linkingCommon.Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        }));
-      case 'priority':
-        return (0, _react2.jsx)(_priority.default, {
-          priority: priority
-        });
-      case 'type':
-        return (0, _react2.jsx)(_type.default, {
-          type: type
-        });
-      case 'summary':
-        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
-          appearance: "blue",
-          width: summaryWidth,
-          borderRadius: 10,
-          height: 13
-        });
-      case 'status':
-        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
-          appearance: "blue",
-          width: statusWidth,
-          height: 16,
-          borderRadius: 3
-        });
-      default:
-        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        });
-    }
-  }, []);
-  return (0, _react2.jsx)("table", {
-    "data-testid": props.testId
-  }, (0, _react2.jsx)("thead", null, (0, _react2.jsx)("tr", null, columns.map(function (_ref3) {
-    var title = _ref3.title,
-      key = _ref3.key,
-      width = _ref3.width;
-    return (0, _react2.jsx)(_styled.TableHeading, {
+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) {
+  var key = _ref.key,
+    width = _ref.width;
+  var priority = _ref2.priority,
+    type = _ref2.type,
+    summaryWidth = _ref2.summaryWidth,
+    statusWidth = _ref2.statusWidth;
+  switch (key) {
+    case 'assignee':
+      return (0, _react.jsx)(_user.default, null, (0, _react.jsx)(_linkingCommon.Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      }));
+    case 'priority':
+      return (0, _react.jsx)(_priority.default, {
+        priority: priority
+      });
+    case 'type':
+      return (0, _react.jsx)(_type.default, {
+        type: type
+      });
+    case 'summary':
+      return (0, _react.jsx)(_linkingCommon.Skeleton, {
+        appearance: "blue",
+        width: summaryWidth,
+        borderRadius: 10,
+        height: 13
+      });
+    case 'status':
+      return (0, _react.jsx)(_linkingCommon.Skeleton, {
+        appearance: "blue",
+        width: statusWidth,
+        height: 16,
+        borderRadius: 3
+      });
+    default:
+      return (0, _react.jsx)(_linkingCommon.Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      });
+  }
+};
+var _default = function _default(_ref3) {
+  var isCompact = _ref3.isCompact,
+    testId = _ref3.testId;
+  var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
+  return (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, {
       key: key,
       style: {
         width: width
       }
-    }, title);
-  }))), (0, _react2.jsx)("tbody", null, rows.map(function (row) {
-    return (0, _react2.jsx)("tr", {
+    }, (0, _react.jsx)(_linkingCommon.Skeleton, {
+      appearance: "darkGray",
+      width: width,
+      height: 13,
+      borderRadius: 8
+    }));
+  }))), (0, _react.jsx)("tbody", null, rows.map(function (row) {
+    return (0, _react.jsx)("tr", {
       key: row.id
-    }, columns.map(function (column) {
-      return (0, _react2.jsx)("td", {
+    }, columnsToRender.map(function (column) {
+      return (0, _react.jsx)("td", {
+        css: cellStyles,
         key: column.key
       }, renderItem(column, row));
     }));

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

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableHeading = exports.Table = void 0;
+exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
 var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
-exports.TableHeading = TableHeading;
+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.30.3",
+	"version": "0.31.1",
 	"sideEffects": false
 }

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

@@ -39,8 +39,7 @@ export const AssetsConfigModal = props => {
   const parameters = useMemo(() => ({
     aql: aql || '',
     schemaId: schemaId || '',
-    workspaceId: workspaceId || '',
-    cloudId: ''
+    workspaceId: workspaceId || ''
   }), [aql, schemaId, workspaceId]);
   const isParametersSet = !!(aql && workspaceId && schemaId);
   const {
@@ -90,8 +89,7 @@ export const AssetsConfigModal = props => {
           datasource: {
             id: datasourceId,
             parameters: {
-              cloudId: '',
-              // TODO FLY-1278: get actual cloudID
+              workspaceId: '',
               aql: aql,
               schemaId
             },

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import Spinner from '@atlaskit/spinner';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 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',
@@ -75,7 +75,13 @@ export const DatasourceTableView = ({
     issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
-  })) : jsx(Spinner, {
-    testId: 'datasource-table-view-spinner'
-  });
+  })) : jsx("div", {
+    css: TableViewWrapperStyles
+  }, jsx(EmptyState, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), jsx(TableFooter, {
+    onRefresh: reset,
+    isLoading: true
+  }));
 };

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

@@ -1,40 +1,37 @@
 /** @jsx jsx */
-import { useCallback } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
 import UserType from '../render-type/user';
-import { TableHeading } from '../styled';
+import { EmptyStateTableHeading } from '../styled';
 import Priority from './priority';
 import Type from './type';
-const columns = [{
+const baseColumns = [{
   key: 'type',
-  title: 'Type'
+  width: 50
 }, {
   key: 'issue',
-  title: 'Key',
   width: 50
 }, {
   key: 'summary',
-  title: 'Summary'
+  width: 70
 }, {
   key: 'assignee',
-  title: 'Assignee',
   width: 100
 }, {
   key: 'priority',
-  title: 'P'
+  width: 60
 }, {
   key: 'status',
-  title: 'Status'
+  width: 60
 }, {
   key: 'resolution',
-  title: 'Resolution'
+  width: 55
 }, {
   key: 'created',
-  title: 'Created'
+  width: 50
 }, {
   key: 'due',
-  title: 'Updated'
+  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'];
@@ -47,67 +44,84 @@ const rows = new Array(10).fill(null).map((_, index) => ({
   summaryWidth: summaryColumnWidths[index],
   statusWidth: statusColumnWidths[index]
 }));
-export default (props => {
-  const renderItem = useCallback(({
-    key,
-    width
-  }, {
-    priority,
-    type,
-    summaryWidth,
-    statusWidth
-  }) => {
-    switch (key) {
-      case 'assignee':
-        return jsx(UserType, null, jsx(Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        }));
-      case 'priority':
-        return jsx(Priority, {
-          priority: priority
-        });
-      case 'type':
-        return jsx(Type, {
-          type: type
-        });
-      case 'summary':
-        return jsx(Skeleton, {
-          appearance: "blue",
-          width: summaryWidth,
-          borderRadius: 10,
-          height: 13
-        });
-      case 'status':
-        return jsx(Skeleton, {
-          appearance: "blue",
-          width: statusWidth,
-          height: 16,
-          borderRadius: 3
-        });
-      default:
-        return jsx(Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        });
-    }
-  }, []);
+const cellStyles = css({
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
+const renderItem = ({
+  key,
+  width
+}, {
+  priority,
+  type,
+  summaryWidth,
+  statusWidth
+}) => {
+  switch (key) {
+    case 'assignee':
+      return jsx(UserType, null, jsx(Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      }));
+    case 'priority':
+      return jsx(Priority, {
+        priority: priority
+      });
+    case 'type':
+      return jsx(Type, {
+        type: type
+      });
+    case 'summary':
+      return jsx(Skeleton, {
+        appearance: "blue",
+        width: summaryWidth,
+        borderRadius: 10,
+        height: 13
+      });
+    case 'status':
+      return jsx(Skeleton, {
+        appearance: "blue",
+        width: statusWidth,
+        height: 16,
+        borderRadius: 3
+      });
+    default:
+      return jsx(Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      });
+  }
+};
+export default (({
+  isCompact,
+  testId
+}) => {
+  const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
   return jsx("table", {
-    "data-testid": props.testId
-  }, jsx("thead", null, jsx("tr", null, columns.map(({
-    title,
+    "data-testid": testId
+  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(({
     key,
     width
-  }) => jsx(TableHeading, {
+  }) => jsx(EmptyStateTableHeading, {
     key: key,
     style: {
       width
     }
-  }, title)))), jsx("tbody", null, rows.map(row => jsx("tr", {
+  }, jsx(Skeleton, {
+    appearance: "darkGray",
+    width: width,
+    height: 13,
+    borderRadius: 8
+  }))))), jsx("tbody", null, rows.map(row => jsx("tr", {
     key: row.id
-  }, columns.map(column => jsx("td", {
+  }, columnsToRender.map(column => jsx("td", {
+    css: cellStyles,
     key: column.key
   }, renderItem(column, row)))))));
 });

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

@@ -6,4 +6,9 @@ export const TableHeading = styled.th`
   position: relative;
   padding-block: ${"var(--ds-space-100, 8px)"};
   line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
+`;
+export const EmptyStateTableHeading = styled(TableHeading)`
+  &:first-child {
+    padding-left: ${"var(--ds-space-100, 8px)"};
+  }
 `;

package/dist/es2019/version.json

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

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

@@ -47,8 +47,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: workspaceId || '',
-      cloudId: ''
+      workspaceId: workspaceId || ''
     };
   }, [aql, schemaId, workspaceId]);
   var isParametersSet = !!(aql && workspaceId && schemaId);
@@ -99,8 +98,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
           datasource: {
             id: datasourceId,
             parameters: {
-              cloudId: '',
-              // TODO FLY-1278: get actual cloudID
+              workspaceId: '',
               aql: aql,
               schemaId: schemaId
             },

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import Spinner from '@atlaskit/spinner';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
 import { IssueLikeDataTableView } from '../issue-like-table';
+import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
 var TableViewWrapperStyles = css({
   display: 'grid',
@@ -73,7 +73,13 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
-  })) : jsx(Spinner, {
-    testId: 'datasource-table-view-spinner'
-  });
+  })) : jsx("div", {
+    css: TableViewWrapperStyles
+  }, jsx(EmptyState, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), jsx(TableFooter, {
+    onRefresh: reset,
+    isLoading: true
+  }));
 };

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

@@ -1,40 +1,37 @@
 /** @jsx jsx */
-import { useCallback } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
 import UserType from '../render-type/user';
-import { TableHeading } from '../styled';
+import { EmptyStateTableHeading } from '../styled';
 import Priority from './priority';
 import Type from './type';
-var columns = [{
+var baseColumns = [{
   key: 'type',
-  title: 'Type'
+  width: 50
 }, {
   key: 'issue',
-  title: 'Key',
   width: 50
 }, {
   key: 'summary',
-  title: 'Summary'
+  width: 70
 }, {
   key: 'assignee',
-  title: 'Assignee',
   width: 100
 }, {
   key: 'priority',
-  title: 'P'
+  width: 60
 }, {
   key: 'status',
-  title: 'Status'
+  width: 60
 }, {
   key: 'resolution',
-  title: 'Resolution'
+  width: 55
 }, {
   key: 'created',
-  title: 'Created'
+  width: 50
 }, {
   key: 'due',
-  title: 'Updated'
+  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'];
@@ -49,68 +46,84 @@ var rows = new Array(10).fill(null).map(function (_, index) {
     statusWidth: statusColumnWidths[index]
   };
 });
-export default (function (props) {
-  var renderItem = useCallback(function (_ref, _ref2) {
-    var key = _ref.key,
-      width = _ref.width;
-    var priority = _ref2.priority,
-      type = _ref2.type,
-      summaryWidth = _ref2.summaryWidth,
-      statusWidth = _ref2.statusWidth;
-    switch (key) {
-      case 'assignee':
-        return jsx(UserType, null, jsx(Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        }));
-      case 'priority':
-        return jsx(Priority, {
-          priority: priority
-        });
-      case 'type':
-        return jsx(Type, {
-          type: type
-        });
-      case 'summary':
-        return jsx(Skeleton, {
-          appearance: "blue",
-          width: summaryWidth,
-          borderRadius: 10,
-          height: 13
-        });
-      case 'status':
-        return jsx(Skeleton, {
-          appearance: "blue",
-          width: statusWidth,
-          height: 16,
-          borderRadius: 3
-        });
-      default:
-        return jsx(Skeleton, {
-          width: width,
-          height: 13,
-          borderRadius: 8
-        });
-    }
-  }, []);
+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) {
+  var key = _ref.key,
+    width = _ref.width;
+  var priority = _ref2.priority,
+    type = _ref2.type,
+    summaryWidth = _ref2.summaryWidth,
+    statusWidth = _ref2.statusWidth;
+  switch (key) {
+    case 'assignee':
+      return jsx(UserType, null, jsx(Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      }));
+    case 'priority':
+      return jsx(Priority, {
+        priority: priority
+      });
+    case 'type':
+      return jsx(Type, {
+        type: type
+      });
+    case 'summary':
+      return jsx(Skeleton, {
+        appearance: "blue",
+        width: summaryWidth,
+        borderRadius: 10,
+        height: 13
+      });
+    case 'status':
+      return jsx(Skeleton, {
+        appearance: "blue",
+        width: statusWidth,
+        height: 16,
+        borderRadius: 3
+      });
+    default:
+      return jsx(Skeleton, {
+        width: width,
+        height: 13,
+        borderRadius: 8
+      });
+  }
+};
+export default (function (_ref3) {
+  var isCompact = _ref3.isCompact,
+    testId = _ref3.testId;
+  var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
   return jsx("table", {
-    "data-testid": props.testId
-  }, jsx("thead", null, jsx("tr", null, columns.map(function (_ref3) {
-    var title = _ref3.title,
-      key = _ref3.key,
-      width = _ref3.width;
-    return jsx(TableHeading, {
+    "data-testid": testId
+  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(function (_ref4) {
+    var key = _ref4.key,
+      width = _ref4.width;
+    return jsx(EmptyStateTableHeading, {
       key: key,
       style: {
         width: width
       }
-    }, title);
+    }, jsx(Skeleton, {
+      appearance: "darkGray",
+      width: width,
+      height: 13,
+      borderRadius: 8
+    }));
   }))), jsx("tbody", null, rows.map(function (row) {
     return jsx("tr", {
       key: row.id
-    }, columns.map(function (column) {
+    }, columnsToRender.map(function (column) {
       return jsx("td", {
+        css: cellStyles,
         key: column.key
       }, renderItem(column, row));
     }));

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

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import styled from '@emotion/styled';
 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"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "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.30.3",
+	"version": "0.31.1",
 	"sideEffects": false
 }

package/dist/types/ui/assets-modal/types.d.ts

@@ -1,8 +1,8 @@
 import { DatasourceAdf, DatasourceAdfView, InlineCardAdf } from '@atlaskit/linking-common/types';
 export interface AssetsDatasourceParameters {
-    cloudId: string;
+    workspaceId: string;
     aql: string;
-    schemaId?: string;
+    schemaId: string;
 }
 export interface AssetsDatasourceAdf extends DatasourceAdf {
     attrs: {

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

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export interface Props {
+    isCompact?: boolean;
     testId?: string;
 }
-declare const _default: (props: 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

@@ -13,4 +13,4 @@ export interface RowCellType {
     maxWidth?: number;
 }
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: (props: 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

@@ -7,3 +7,11 @@ 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/assets-modal/types.d.ts

@@ -1,8 +1,8 @@
 import { DatasourceAdf, DatasourceAdfView, InlineCardAdf } from '@atlaskit/linking-common/types';
 export interface AssetsDatasourceParameters {
-    cloudId: string;
+    workspaceId: string;
     aql: string;
-    schemaId?: string;
+    schemaId: string;
 }
 export interface AssetsDatasourceAdf extends DatasourceAdf {
     attrs: {

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

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export interface Props {
+    isCompact?: boolean;
     testId?: string;
 }
-declare const _default: (props: 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

@@ -13,4 +13,4 @@ export interface RowCellType {
     maxWidth?: number;
 }
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: (props: 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

@@ -7,3 +7,11 @@ 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": "0.30.3",
+  "version": "0.31.1",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/image": "^1.1.0",
     "@atlaskit/link-client-extension": "^1.5.0",
-    "@atlaskit/linking-common": "^4.1.0",
+    "@atlaskit/linking-common": "^4.3.0",
     "@atlaskit/linking-types": "^8.2.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.6.0",
@@ -46,7 +46,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/smart-card": "^26.12.0",
+    "@atlaskit/smart-card": "^26.13.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tag": "^11.5.0",
     "@atlaskit/textfield": "5.6.3",

package/report.api.md

@@ -65,9 +65,9 @@ export interface AssetsDatasourceParameters {
   // (undocumented)
   aql: string;
   // (undocumented)
-  cloudId: string;
+  schemaId: string;
   // (undocumented)
-  schemaId?: string;
+  workspaceId: string;
 }
 
 export { DatasourceAdf };

package/tmp/api-report-tmp.d.ts

@@ -51,9 +51,9 @@ export interface AssetsDatasourceParameters {
     // (undocumented)
     aql: string;
     // (undocumented)
-    cloudId: string;
+    schemaId: string;
     // (undocumented)
-    schemaId?: string;
+    workspaceId: string;
 }
 
 export { DatasourceAdf }