@atlaskit/link-datasource 0.30.3 → 0.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/datasource-table-view/datasourceTableView.js +10 -4
  3. package/dist/cjs/ui/issue-like-table/empty-state/index.js +82 -69
  4. package/dist/cjs/ui/issue-like-table/styled.js +5 -3
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/ui/datasource-table-view/datasourceTableView.js +10 -4
  7. package/dist/es2019/ui/issue-like-table/empty-state/index.js +80 -66
  8. package/dist/es2019/ui/issue-like-table/styled.js +5 -0
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/ui/datasource-table-view/datasourceTableView.js +10 -4
  11. package/dist/esm/ui/issue-like-table/empty-state/index.js +79 -66
  12. package/dist/esm/ui/issue-like-table/styled.js +3 -2
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/ui/issue-like-table/empty-state/index.d.ts +3 -1
  15. package/dist/types/ui/issue-like-table/index.d.ts +1 -1
  16. package/dist/types/ui/issue-like-table/styled.d.ts +8 -0
  17. package/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts +3 -1
  18. package/dist/types-ts4.5/ui/issue-like-table/index.d.ts +1 -1
  19. package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts +8 -0
  20. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 0.31.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`220d407e10c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/220d407e10c) - [ux] Update empty state skeleton UI and add empty state to datasourceTableView
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 0.30.3
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.DatasourceTableView = void 0;
8
8
  var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
- var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
11
10
  var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
12
11
  var _accessRequired = require("../common/error-state/access-required");
13
12
  var _loadingError = require("../common/error-state/loading-error");
14
13
  var _noResults = require("../common/error-state/no-results");
15
14
  var _issueLikeTable = require("../issue-like-table");
15
+ var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-state"));
16
16
  var _tableFooter = require("../table-footer");
17
17
  /** @jsx jsx */
18
18
 
@@ -81,8 +81,14 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
81
81
  issueCount: totalCount,
82
82
  onRefresh: reset,
83
83
  isLoading: status === 'loading'
84
- })) : (0, _react2.jsx)(_spinner.default, {
85
- testId: 'datasource-table-view-spinner'
86
- });
84
+ })) : (0, _react2.jsx)("div", {
85
+ css: TableViewWrapperStyles
86
+ }, (0, _react2.jsx)(_emptyState.default, {
87
+ testId: "datasource-table-view-skeleton",
88
+ isCompact: true
89
+ }), (0, _react2.jsx)(_tableFooter.TableFooter, {
90
+ onRefresh: reset,
91
+ isLoading: true
92
+ }));
87
93
  };
88
94
  exports.DatasourceTableView = DatasourceTableView;
package/dist/cjs/ui/issue-like-table/empty-state/index.js CHANGED
@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _react = require("react");
9
- var _react2 = require("@emotion/react");
8
+ var _react = require("@emotion/react");
10
9
  var _linkingCommon = require("@atlaskit/linking-common");
11
10
  var _user = _interopRequireDefault(require("../render-type/user"));
12
11
  var _styled = require("../styled");
@@ -14,35 +13,33 @@ var _priority = _interopRequireDefault(require("./priority"));
14
13
  var _type = _interopRequireDefault(require("./type"));
15
14
  /** @jsx jsx */
16
15
 
17
- var columns = [{
16
+ var baseColumns = [{
18
17
  key: 'type',
19
- title: 'Type'
18
+ width: 50
20
19
  }, {
21
20
  key: 'issue',
22
- title: 'Key',
23
21
  width: 50
24
22
  }, {
25
23
  key: 'summary',
26
- title: 'Summary'
24
+ width: 70
27
25
  }, {
28
26
  key: 'assignee',
29
- title: 'Assignee',
30
27
  width: 100
31
28
  }, {
32
29
  key: 'priority',
33
- title: 'P'
30
+ width: 60
34
31
  }, {
35
32
  key: 'status',
36
- title: 'Status'
33
+ width: 60
37
34
  }, {
38
35
  key: 'resolution',
39
- title: 'Resolution'
36
+ width: 55
40
37
  }, {
41
38
  key: 'created',
42
- title: 'Created'
39
+ width: 50
43
40
  }, {
44
41
  key: 'due',
45
- title: 'Updated'
42
+ width: 50
46
43
  }];
47
44
  var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
48
45
  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) {
57
54
  statusWidth: statusColumnWidths[index]
58
55
  };
59
56
  });
60
- var _default = function _default(props) {
61
- var renderItem = (0, _react.useCallback)(function (_ref, _ref2) {
62
- var key = _ref.key,
63
- width = _ref.width;
64
- var priority = _ref2.priority,
65
- type = _ref2.type,
66
- summaryWidth = _ref2.summaryWidth,
67
- statusWidth = _ref2.statusWidth;
68
- switch (key) {
69
- case 'assignee':
70
- return (0, _react2.jsx)(_user.default, null, (0, _react2.jsx)(_linkingCommon.Skeleton, {
71
- width: width,
72
- height: 13,
73
- borderRadius: 8
74
- }));
75
- case 'priority':
76
- return (0, _react2.jsx)(_priority.default, {
77
- priority: priority
78
- });
79
- case 'type':
80
- return (0, _react2.jsx)(_type.default, {
81
- type: type
82
- });
83
- case 'summary':
84
- return (0, _react2.jsx)(_linkingCommon.Skeleton, {
85
- appearance: "blue",
86
- width: summaryWidth,
87
- borderRadius: 10,
88
- height: 13
89
- });
90
- case 'status':
91
- return (0, _react2.jsx)(_linkingCommon.Skeleton, {
92
- appearance: "blue",
93
- width: statusWidth,
94
- height: 16,
95
- borderRadius: 3
96
- });
97
- default:
98
- return (0, _react2.jsx)(_linkingCommon.Skeleton, {
99
- width: width,
100
- height: 13,
101
- borderRadius: 8
102
- });
103
- }
104
- }, []);
105
- return (0, _react2.jsx)("table", {
106
- "data-testid": props.testId
107
- }, (0, _react2.jsx)("thead", null, (0, _react2.jsx)("tr", null, columns.map(function (_ref3) {
108
- var title = _ref3.title,
109
- key = _ref3.key,
110
- width = _ref3.width;
111
- return (0, _react2.jsx)(_styled.TableHeading, {
57
+ var cellStyles = (0, _react.css)({
58
+ '&:first-child': {
59
+ paddingLeft: "var(--ds-space-100, 8px)"
60
+ },
61
+ '&:last-child': {
62
+ paddingRight: "var(--ds-space-100, 8px)"
63
+ }
64
+ });
65
+ var renderItem = function renderItem(_ref, _ref2) {
66
+ var key = _ref.key,
67
+ width = _ref.width;
68
+ var priority = _ref2.priority,
69
+ type = _ref2.type,
70
+ summaryWidth = _ref2.summaryWidth,
71
+ statusWidth = _ref2.statusWidth;
72
+ switch (key) {
73
+ case 'assignee':
74
+ return (0, _react.jsx)(_user.default, null, (0, _react.jsx)(_linkingCommon.Skeleton, {
75
+ width: width,
76
+ height: 13,
77
+ borderRadius: 8
78
+ }));
79
+ case 'priority':
80
+ return (0, _react.jsx)(_priority.default, {
81
+ priority: priority
82
+ });
83
+ case 'type':
84
+ return (0, _react.jsx)(_type.default, {
85
+ type: type
86
+ });
87
+ case 'summary':
88
+ return (0, _react.jsx)(_linkingCommon.Skeleton, {
89
+ appearance: "blue",
90
+ width: summaryWidth,
91
+ borderRadius: 10,
92
+ height: 13
93
+ });
94
+ case 'status':
95
+ return (0, _react.jsx)(_linkingCommon.Skeleton, {
96
+ appearance: "blue",
97
+ width: statusWidth,
98
+ height: 16,
99
+ borderRadius: 3
100
+ });
101
+ default:
102
+ return (0, _react.jsx)(_linkingCommon.Skeleton, {
103
+ width: width,
104
+ height: 13,
105
+ borderRadius: 8
106
+ });
107
+ }
108
+ };
109
+ var _default = function _default(_ref3) {
110
+ var isCompact = _ref3.isCompact,
111
+ testId = _ref3.testId;
112
+ var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
113
+ return (0, _react.jsx)("table", {
114
+ "data-testid": testId
115
+ }, (0, _react.jsx)("thead", null, (0, _react.jsx)("tr", null, columnsToRender.map(function (_ref4) {
116
+ var key = _ref4.key,
117
+ width = _ref4.width;
118
+ return (0, _react.jsx)(_styled.EmptyStateTableHeading, {
112
119
  key: key,
113
120
  style: {
114
121
  width: width
115
122
  }
116
- }, title);
117
- }))), (0, _react2.jsx)("tbody", null, rows.map(function (row) {
118
- return (0, _react2.jsx)("tr", {
123
+ }, (0, _react.jsx)(_linkingCommon.Skeleton, {
124
+ appearance: "darkGray",
125
+ width: width,
126
+ height: 13,
127
+ borderRadius: 8
128
+ }));
129
+ }))), (0, _react.jsx)("tbody", null, rows.map(function (row) {
130
+ return (0, _react.jsx)("tr", {
119
131
  key: row.id
120
- }, columns.map(function (column) {
121
- return (0, _react2.jsx)("td", {
132
+ }, columnsToRender.map(function (column) {
133
+ return (0, _react.jsx)("td", {
134
+ css: cellStyles,
122
135
  key: column.key
123
136
  }, renderItem(column, row));
124
137
  }));
package/dist/cjs/ui/issue-like-table/styled.js CHANGED
@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TableHeading = exports.Table = void 0;
7
+ exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _templateObject, _templateObject2;
10
+ var _templateObject, _templateObject2, _templateObject3;
11
11
  var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n"])));
12
12
  exports.Table = Table;
13
13
  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)");
14
- exports.TableHeading = TableHeading;
14
+ exports.TableHeading = TableHeading;
15
+ var EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n &:first-child {\n padding-left: ", ";\n }\n"])), "var(--ds-space-100, 8px)");
16
+ exports.EmptyStateTableHeading = EmptyStateTableHeading;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.30.3",
3
+ "version": "0.31.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /** @jsx jsx */
2
2
  import { useEffect } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
- import Spinner from '@atlaskit/spinner';
5
4
  import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
6
5
  import { AccessRequired } from '../common/error-state/access-required';
7
6
  import { LoadingError } from '../common/error-state/loading-error';
8
7
  import { NoResults } from '../common/error-state/no-results';
9
8
  import { IssueLikeDataTableView } from '../issue-like-table';
9
+ import EmptyState from '../issue-like-table/empty-state';
10
10
  import { TableFooter } from '../table-footer';
11
11
  const TableViewWrapperStyles = css({
12
12
  display: 'grid',
@@ -75,7 +75,13 @@ export const DatasourceTableView = ({
75
75
  issueCount: totalCount,
76
76
  onRefresh: reset,
77
77
  isLoading: status === 'loading'
78
- })) : jsx(Spinner, {
79
- testId: 'datasource-table-view-spinner'
80
- });
78
+ })) : jsx("div", {
79
+ css: TableViewWrapperStyles
80
+ }, jsx(EmptyState, {
81
+ testId: "datasource-table-view-skeleton",
82
+ isCompact: true
83
+ }), jsx(TableFooter, {
84
+ onRefresh: reset,
85
+ isLoading: true
86
+ }));
81
87
  };
package/dist/es2019/ui/issue-like-table/empty-state/index.js CHANGED
@@ -1,40 +1,37 @@
1
1
  /** @jsx jsx */
2
- import { useCallback } from 'react';
3
- import { jsx } from '@emotion/react';
2
+ import { css, jsx } from '@emotion/react';
4
3
  import { Skeleton } from '@atlaskit/linking-common';
5
4
  import UserType from '../render-type/user';
6
- import { TableHeading } from '../styled';
5
+ import { EmptyStateTableHeading } from '../styled';
7
6
  import Priority from './priority';
8
7
  import Type from './type';
9
- const columns = [{
8
+ const baseColumns = [{
10
9
  key: 'type',
11
- title: 'Type'
10
+ width: 50
12
11
  }, {
13
12
  key: 'issue',
14
- title: 'Key',
15
13
  width: 50
16
14
  }, {
17
15
  key: 'summary',
18
- title: 'Summary'
16
+ width: 70
19
17
  }, {
20
18
  key: 'assignee',
21
- title: 'Assignee',
22
19
  width: 100
23
20
  }, {
24
21
  key: 'priority',
25
- title: 'P'
22
+ width: 60
26
23
  }, {
27
24
  key: 'status',
28
- title: 'Status'
25
+ width: 60
29
26
  }, {
30
27
  key: 'resolution',
31
- title: 'Resolution'
28
+ width: 55
32
29
  }, {
33
30
  key: 'created',
34
- title: 'Created'
31
+ width: 50
35
32
  }, {
36
33
  key: 'due',
37
- title: 'Updated'
34
+ width: 50
38
35
  }];
39
36
  const priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
40
37
  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) => ({
47
44
  summaryWidth: summaryColumnWidths[index],
48
45
  statusWidth: statusColumnWidths[index]
49
46
  }));
50
- export default (props => {
51
- const renderItem = useCallback(({
52
- key,
53
- width
54
- }, {
55
- priority,
56
- type,
57
- summaryWidth,
58
- statusWidth
59
- }) => {
60
- switch (key) {
61
- case 'assignee':
62
- return jsx(UserType, null, jsx(Skeleton, {
63
- width: width,
64
- height: 13,
65
- borderRadius: 8
66
- }));
67
- case 'priority':
68
- return jsx(Priority, {
69
- priority: priority
70
- });
71
- case 'type':
72
- return jsx(Type, {
73
- type: type
74
- });
75
- case 'summary':
76
- return jsx(Skeleton, {
77
- appearance: "blue",
78
- width: summaryWidth,
79
- borderRadius: 10,
80
- height: 13
81
- });
82
- case 'status':
83
- return jsx(Skeleton, {
84
- appearance: "blue",
85
- width: statusWidth,
86
- height: 16,
87
- borderRadius: 3
88
- });
89
- default:
90
- return jsx(Skeleton, {
91
- width: width,
92
- height: 13,
93
- borderRadius: 8
94
- });
95
- }
96
- }, []);
47
+ const cellStyles = css({
48
+ '&:first-child': {
49
+ paddingLeft: "var(--ds-space-100, 8px)"
50
+ },
51
+ '&:last-child': {
52
+ paddingRight: "var(--ds-space-100, 8px)"
53
+ }
54
+ });
55
+ const renderItem = ({
56
+ key,
57
+ width
58
+ }, {
59
+ priority,
60
+ type,
61
+ summaryWidth,
62
+ statusWidth
63
+ }) => {
64
+ switch (key) {
65
+ case 'assignee':
66
+ return jsx(UserType, null, jsx(Skeleton, {
67
+ width: width,
68
+ height: 13,
69
+ borderRadius: 8
70
+ }));
71
+ case 'priority':
72
+ return jsx(Priority, {
73
+ priority: priority
74
+ });
75
+ case 'type':
76
+ return jsx(Type, {
77
+ type: type
78
+ });
79
+ case 'summary':
80
+ return jsx(Skeleton, {
81
+ appearance: "blue",
82
+ width: summaryWidth,
83
+ borderRadius: 10,
84
+ height: 13
85
+ });
86
+ case 'status':
87
+ return jsx(Skeleton, {
88
+ appearance: "blue",
89
+ width: statusWidth,
90
+ height: 16,
91
+ borderRadius: 3
92
+ });
93
+ default:
94
+ return jsx(Skeleton, {
95
+ width: width,
96
+ height: 13,
97
+ borderRadius: 8
98
+ });
99
+ }
100
+ };
101
+ export default (({
102
+ isCompact,
103
+ testId
104
+ }) => {
105
+ const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
97
106
  return jsx("table", {
98
- "data-testid": props.testId
99
- }, jsx("thead", null, jsx("tr", null, columns.map(({
100
- title,
107
+ "data-testid": testId
108
+ }, jsx("thead", null, jsx("tr", null, columnsToRender.map(({
101
109
  key,
102
110
  width
103
- }) => jsx(TableHeading, {
111
+ }) => jsx(EmptyStateTableHeading, {
104
112
  key: key,
105
113
  style: {
106
114
  width
107
115
  }
108
- }, title)))), jsx("tbody", null, rows.map(row => jsx("tr", {
116
+ }, jsx(Skeleton, {
117
+ appearance: "darkGray",
118
+ width: width,
119
+ height: 13,
120
+ borderRadius: 8
121
+ }))))), jsx("tbody", null, rows.map(row => jsx("tr", {
109
122
  key: row.id
110
- }, columns.map(column => jsx("td", {
123
+ }, columnsToRender.map(column => jsx("td", {
124
+ css: cellStyles,
111
125
  key: column.key
112
126
  }, renderItem(column, row)))))));
113
127
  });
package/dist/es2019/ui/issue-like-table/styled.js CHANGED
@@ -6,4 +6,9 @@ export const TableHeading = styled.th`
6
6
  position: relative;
7
7
  padding-block: ${"var(--ds-space-100, 8px)"};
8
8
  line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
9
+ `;
10
+ export const EmptyStateTableHeading = styled(TableHeading)`
11
+ &:first-child {
12
+ padding-left: ${"var(--ds-space-100, 8px)"};
13
+ }
9
14
  `;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.30.3",
3
+ "version": "0.31.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /** @jsx jsx */
2
2
  import { useEffect } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
- import Spinner from '@atlaskit/spinner';
5
4
  import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
6
5
  import { AccessRequired } from '../common/error-state/access-required';
7
6
  import { LoadingError } from '../common/error-state/loading-error';
8
7
  import { NoResults } from '../common/error-state/no-results';
9
8
  import { IssueLikeDataTableView } from '../issue-like-table';
9
+ import EmptyState from '../issue-like-table/empty-state';
10
10
  import { TableFooter } from '../table-footer';
11
11
  var TableViewWrapperStyles = css({
12
12
  display: 'grid',
@@ -73,7 +73,13 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
73
73
  issueCount: totalCount,
74
74
  onRefresh: reset,
75
75
  isLoading: status === 'loading'
76
- })) : jsx(Spinner, {
77
- testId: 'datasource-table-view-spinner'
78
- });
76
+ })) : jsx("div", {
77
+ css: TableViewWrapperStyles
78
+ }, jsx(EmptyState, {
79
+ testId: "datasource-table-view-skeleton",
80
+ isCompact: true
81
+ }), jsx(TableFooter, {
82
+ onRefresh: reset,
83
+ isLoading: true
84
+ }));
79
85
  };
package/dist/esm/ui/issue-like-table/empty-state/index.js CHANGED
@@ -1,40 +1,37 @@
1
1
  /** @jsx jsx */
2
- import { useCallback } from 'react';
3
- import { jsx } from '@emotion/react';
2
+ import { css, jsx } from '@emotion/react';
4
3
  import { Skeleton } from '@atlaskit/linking-common';
5
4
  import UserType from '../render-type/user';
6
- import { TableHeading } from '../styled';
5
+ import { EmptyStateTableHeading } from '../styled';
7
6
  import Priority from './priority';
8
7
  import Type from './type';
9
- var columns = [{
8
+ var baseColumns = [{
10
9
  key: 'type',
11
- title: 'Type'
10
+ width: 50
12
11
  }, {
13
12
  key: 'issue',
14
- title: 'Key',
15
13
  width: 50
16
14
  }, {
17
15
  key: 'summary',
18
- title: 'Summary'
16
+ width: 70
19
17
  }, {
20
18
  key: 'assignee',
21
- title: 'Assignee',
22
19
  width: 100
23
20
  }, {
24
21
  key: 'priority',
25
- title: 'P'
22
+ width: 60
26
23
  }, {
27
24
  key: 'status',
28
- title: 'Status'
25
+ width: 60
29
26
  }, {
30
27
  key: 'resolution',
31
- title: 'Resolution'
28
+ width: 55
32
29
  }, {
33
30
  key: 'created',
34
- title: 'Created'
31
+ width: 50
35
32
  }, {
36
33
  key: 'due',
37
- title: 'Updated'
34
+ width: 50
38
35
  }];
39
36
  var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
40
37
  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) {
49
46
  statusWidth: statusColumnWidths[index]
50
47
  };
51
48
  });
52
- export default (function (props) {
53
- var renderItem = useCallback(function (_ref, _ref2) {
54
- var key = _ref.key,
55
- width = _ref.width;
56
- var priority = _ref2.priority,
57
- type = _ref2.type,
58
- summaryWidth = _ref2.summaryWidth,
59
- statusWidth = _ref2.statusWidth;
60
- switch (key) {
61
- case 'assignee':
62
- return jsx(UserType, null, jsx(Skeleton, {
63
- width: width,
64
- height: 13,
65
- borderRadius: 8
66
- }));
67
- case 'priority':
68
- return jsx(Priority, {
69
- priority: priority
70
- });
71
- case 'type':
72
- return jsx(Type, {
73
- type: type
74
- });
75
- case 'summary':
76
- return jsx(Skeleton, {
77
- appearance: "blue",
78
- width: summaryWidth,
79
- borderRadius: 10,
80
- height: 13
81
- });
82
- case 'status':
83
- return jsx(Skeleton, {
84
- appearance: "blue",
85
- width: statusWidth,
86
- height: 16,
87
- borderRadius: 3
88
- });
89
- default:
90
- return jsx(Skeleton, {
91
- width: width,
92
- height: 13,
93
- borderRadius: 8
94
- });
95
- }
96
- }, []);
49
+ var cellStyles = css({
50
+ '&:first-child': {
51
+ paddingLeft: "var(--ds-space-100, 8px)"
52
+ },
53
+ '&:last-child': {
54
+ paddingRight: "var(--ds-space-100, 8px)"
55
+ }
56
+ });
57
+ var renderItem = function renderItem(_ref, _ref2) {
58
+ var key = _ref.key,
59
+ width = _ref.width;
60
+ var priority = _ref2.priority,
61
+ type = _ref2.type,
62
+ summaryWidth = _ref2.summaryWidth,
63
+ statusWidth = _ref2.statusWidth;
64
+ switch (key) {
65
+ case 'assignee':
66
+ return jsx(UserType, null, jsx(Skeleton, {
67
+ width: width,
68
+ height: 13,
69
+ borderRadius: 8
70
+ }));
71
+ case 'priority':
72
+ return jsx(Priority, {
73
+ priority: priority
74
+ });
75
+ case 'type':
76
+ return jsx(Type, {
77
+ type: type
78
+ });
79
+ case 'summary':
80
+ return jsx(Skeleton, {
81
+ appearance: "blue",
82
+ width: summaryWidth,
83
+ borderRadius: 10,
84
+ height: 13
85
+ });
86
+ case 'status':
87
+ return jsx(Skeleton, {
88
+ appearance: "blue",
89
+ width: statusWidth,
90
+ height: 16,
91
+ borderRadius: 3
92
+ });
93
+ default:
94
+ return jsx(Skeleton, {
95
+ width: width,
96
+ height: 13,
97
+ borderRadius: 8
98
+ });
99
+ }
100
+ };
101
+ export default (function (_ref3) {
102
+ var isCompact = _ref3.isCompact,
103
+ testId = _ref3.testId;
104
+ var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
97
105
  return jsx("table", {
98
- "data-testid": props.testId
99
- }, jsx("thead", null, jsx("tr", null, columns.map(function (_ref3) {
100
- var title = _ref3.title,
101
- key = _ref3.key,
102
- width = _ref3.width;
103
- return jsx(TableHeading, {
106
+ "data-testid": testId
107
+ }, jsx("thead", null, jsx("tr", null, columnsToRender.map(function (_ref4) {
108
+ var key = _ref4.key,
109
+ width = _ref4.width;
110
+ return jsx(EmptyStateTableHeading, {
104
111
  key: key,
105
112
  style: {
106
113
  width: width
107
114
  }
108
- }, title);
115
+ }, jsx(Skeleton, {
116
+ appearance: "darkGray",
117
+ width: width,
118
+ height: 13,
119
+ borderRadius: 8
120
+ }));
109
121
  }))), jsx("tbody", null, rows.map(function (row) {
110
122
  return jsx("tr", {
111
123
  key: row.id
112
- }, columns.map(function (column) {
124
+ }, columnsToRender.map(function (column) {
113
125
  return jsx("td", {
126
+ css: cellStyles,
114
127
  key: column.key
115
128
  }, renderItem(column, row));
116
129
  }));
package/dist/esm/ui/issue-like-table/styled.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2;
2
+ var _templateObject, _templateObject2, _templateObject3;
3
3
  import styled from '@emotion/styled';
4
4
  export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n"])));
5
- 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)");
5
+ 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)");
6
+ 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 CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.30.3",
3
+ "version": "0.31.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/ui/issue-like-table/empty-state/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
+ /** @jsx jsx */
1
2
  import { jsx } from '@emotion/react';
2
3
  export interface Props {
4
+ isCompact?: boolean;
3
5
  testId?: string;
4
6
  }
5
- declare const _default: (props: Props) => jsx.JSX.Element;
7
+ declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
6
8
  export default _default;
package/dist/types/ui/issue-like-table/index.d.ts CHANGED
@@ -13,4 +13,4 @@ export interface RowCellType {
13
13
  maxWidth?: number;
14
14
  }
15
15
  export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
16
- export declare const EmptyState: (props: import("./empty-state").Props) => jsx.JSX.Element;
16
+ export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;
package/dist/types/ui/issue-like-table/styled.d.ts CHANGED
@@ -7,3 +7,11 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
7
7
  theme?: import("@emotion/react").Theme | undefined;
8
8
  as?: import("react").ElementType<any> | undefined;
9
9
  }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
10
+ export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
11
+ theme?: import("@emotion/react").Theme | undefined;
12
+ as?: import("react").ElementType<any> | undefined;
13
+ } & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
14
+ children?: import("react").ReactNode;
15
+ } & {
16
+ theme?: import("@emotion/react").Theme | undefined;
17
+ }, {}, {}>;
package/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
+ /** @jsx jsx */
1
2
  import { jsx } from '@emotion/react';
2
3
  export interface Props {
4
+ isCompact?: boolean;
3
5
  testId?: string;
4
6
  }
5
- declare const _default: (props: Props) => jsx.JSX.Element;
7
+ declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
6
8
  export default _default;
package/dist/types-ts4.5/ui/issue-like-table/index.d.ts CHANGED
@@ -13,4 +13,4 @@ export interface RowCellType {
13
13
  maxWidth?: number;
14
14
  }
15
15
  export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
16
- export declare const EmptyState: (props: import("./empty-state").Props) => jsx.JSX.Element;
16
+ 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 CHANGED
@@ -7,3 +7,11 @@ export declare const TableHeading: import("@emotion/styled").StyledComponent<{
7
7
  theme?: import("@emotion/react").Theme | undefined;
8
8
  as?: import("react").ElementType<any> | undefined;
9
9
  }, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
10
+ export declare const EmptyStateTableHeading: import("@emotion/styled").StyledComponent<{
11
+ theme?: import("@emotion/react").Theme | undefined;
12
+ as?: import("react").ElementType<any> | undefined;
13
+ } & import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
14
+ children?: import("react").ReactNode;
15
+ } & {
16
+ theme?: import("@emotion/react").Theme | undefined;
17
+ }, {}, {}>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.30.3",
3
+ "version": "0.31.0",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/icon-object": "^6.3.0",
38
38
  "@atlaskit/image": "^1.1.0",
39
39
  "@atlaskit/link-client-extension": "^1.5.0",
40
- "@atlaskit/linking-common": "^4.1.0",
40
+ "@atlaskit/linking-common": "^4.3.0",
41
41
  "@atlaskit/linking-types": "^8.2.0",
42
42
  "@atlaskit/lozenge": "^11.4.0",
43
43
  "@atlaskit/modal-dialog": "^12.6.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
48
48
  "@atlaskit/select": "^16.5.0",
49
- "@atlaskit/smart-card": "^26.12.0",
49
+ "@atlaskit/smart-card": "^26.13.0",
50
50
  "@atlaskit/spinner": "^15.5.0",
51
51
  "@atlaskit/tag": "^11.5.0",
52
52
  "@atlaskit/textfield": "5.6.3",