@atlaskit/link-datasource 0.32.0 → 0.33.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 (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ui/datasource-table-view/datasourceTableView.js +2 -1
  3. package/dist/cjs/ui/issue-like-table/empty-state/index.js +24 -12
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/ui/datasource-table-view/datasourceTableView.js +2 -1
  6. package/dist/es2019/ui/issue-like-table/empty-state/index.js +23 -12
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/ui/datasource-table-view/datasourceTableView.js +2 -1
  9. package/dist/esm/ui/issue-like-table/empty-state/index.js +24 -12
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/ui/issue-like-table/empty-state/index.d.ts +2 -1
  12. package/dist/types/ui/issue-like-table/index.d.ts +1 -1
  13. package/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts +2 -1
  14. package/dist/types-ts4.5/ui/issue-like-table/index.d.ts +1 -1
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 0.33.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`6ee82691c4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ee82691c4e) - [ux] Changed shimmer on empty state view to only occur when loading data initially
8
+
3
9
  ## 0.32.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -72,7 +72,8 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
72
72
  scrollableContainerHeight: 590
73
73
  }) : (0, _react2.jsx)(_emptyState.default, {
74
74
  testId: "datasource-table-view-skeleton",
75
- isCompact: true
75
+ isCompact: true,
76
+ isLoading: !isDataReady || status === 'loading'
76
77
  }), (0, _react2.jsx)(_tableFooter.TableFooter, {
77
78
  issueCount: isDataReady ? totalCount : undefined,
78
79
  onRefresh: reset,
package/dist/cjs/ui/issue-like-table/empty-state/index.js CHANGED
@@ -65,7 +65,7 @@ var cellStyles = (0, _react.css)({
65
65
  paddingRight: "var(--ds-space-100, 8px)"
66
66
  }
67
67
  });
68
- var renderItem = function renderItem(_ref, _ref2) {
68
+ var renderItem = function renderItem(_ref, _ref2, isShimmering) {
69
69
  var key = _ref.key,
70
70
  width = _ref.width;
71
71
  var priority = _ref2.priority,
@@ -75,9 +75,11 @@ var renderItem = function renderItem(_ref, _ref2) {
75
75
  switch (key) {
76
76
  case 'assignee':
77
77
  return (0, _react.jsx)(_user.default, null, (0, _react.jsx)(_linkingCommon.Skeleton, {
78
- width: width,
78
+ borderRadius: 8,
79
+ testId: "empty-state-skeleton",
79
80
  height: 13,
80
- borderRadius: 8
81
+ isShimmering: isShimmering,
82
+ width: width
81
83
  }));
82
84
  case 'priority':
83
85
  return (0, _react.jsx)(_priority.default, {
@@ -90,27 +92,35 @@ var renderItem = function renderItem(_ref, _ref2) {
90
92
  case 'summary':
91
93
  return (0, _react.jsx)(_linkingCommon.Skeleton, {
92
94
  appearance: "blue",
93
- width: summaryWidth,
94
95
  borderRadius: 10,
95
- height: 13
96
+ testId: "empty-state-skeleton",
97
+ height: 13,
98
+ isShimmering: isShimmering,
99
+ width: summaryWidth
96
100
  });
97
101
  case 'status':
98
102
  return (0, _react.jsx)(_linkingCommon.Skeleton, {
99
103
  appearance: "blue",
100
- width: statusWidth,
104
+ borderRadius: 3,
105
+ testId: "empty-state-skeleton",
101
106
  height: 16,
102
- borderRadius: 3
107
+ isShimmering: isShimmering,
108
+ width: statusWidth
103
109
  });
104
110
  default:
105
111
  return (0, _react.jsx)(_linkingCommon.Skeleton, {
106
- width: width,
112
+ borderRadius: 8,
113
+ testId: "empty-state-skeleton",
107
114
  height: 13,
108
- borderRadius: 8
115
+ isShimmering: isShimmering,
116
+ width: width
109
117
  });
110
118
  }
111
119
  };
112
120
  var _default = function _default(_ref3) {
113
121
  var isCompact = _ref3.isCompact,
122
+ _ref3$isLoading = _ref3.isLoading,
123
+ isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
114
124
  testId = _ref3.testId;
115
125
  var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
116
126
  return (0, _react.jsx)("table", {
@@ -125,9 +135,11 @@ var _default = function _default(_ref3) {
125
135
  }
126
136
  }, (0, _react.jsx)(_linkingCommon.Skeleton, {
127
137
  appearance: "darkGray",
128
- width: width,
138
+ borderRadius: 8,
139
+ testId: "empty-state-skeleton",
140
+ isShimmering: isLoading,
129
141
  height: 13,
130
- borderRadius: 8
142
+ width: width
131
143
  }));
132
144
  }))), (0, _react.jsx)("tbody", {
133
145
  css: tableBodyStyles
@@ -138,7 +150,7 @@ var _default = function _default(_ref3) {
138
150
  return (0, _react.jsx)("td", {
139
151
  css: cellStyles,
140
152
  key: column.key
141
- }, renderItem(column, row));
153
+ }, renderItem(column, row, isLoading));
142
154
  }));
143
155
  })));
144
156
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -66,7 +66,8 @@ export const DatasourceTableView = ({
66
66
  scrollableContainerHeight: 590
67
67
  }) : jsx(EmptyState, {
68
68
  testId: "datasource-table-view-skeleton",
69
- isCompact: true
69
+ isCompact: true,
70
+ isLoading: !isDataReady || status === 'loading'
70
71
  }), jsx(TableFooter, {
71
72
  issueCount: isDataReady ? totalCount : undefined,
72
73
  onRefresh: reset,
package/dist/es2019/ui/issue-like-table/empty-state/index.js CHANGED
@@ -63,13 +63,15 @@ const renderItem = ({
63
63
  type,
64
64
  summaryWidth,
65
65
  statusWidth
66
- }) => {
66
+ }, isShimmering) => {
67
67
  switch (key) {
68
68
  case 'assignee':
69
69
  return jsx(UserType, null, jsx(Skeleton, {
70
- width: width,
70
+ borderRadius: 8,
71
+ testId: "empty-state-skeleton",
71
72
  height: 13,
72
- borderRadius: 8
73
+ isShimmering: isShimmering,
74
+ width: width
73
75
  }));
74
76
  case 'priority':
75
77
  return jsx(Priority, {
@@ -82,27 +84,34 @@ const renderItem = ({
82
84
  case 'summary':
83
85
  return jsx(Skeleton, {
84
86
  appearance: "blue",
85
- width: summaryWidth,
86
87
  borderRadius: 10,
87
- height: 13
88
+ testId: "empty-state-skeleton",
89
+ height: 13,
90
+ isShimmering: isShimmering,
91
+ width: summaryWidth
88
92
  });
89
93
  case 'status':
90
94
  return jsx(Skeleton, {
91
95
  appearance: "blue",
92
- width: statusWidth,
96
+ borderRadius: 3,
97
+ testId: "empty-state-skeleton",
93
98
  height: 16,
94
- borderRadius: 3
99
+ isShimmering: isShimmering,
100
+ width: statusWidth
95
101
  });
96
102
  default:
97
103
  return jsx(Skeleton, {
98
- width: width,
104
+ borderRadius: 8,
105
+ testId: "empty-state-skeleton",
99
106
  height: 13,
100
- borderRadius: 8
107
+ isShimmering: isShimmering,
108
+ width: width
101
109
  });
102
110
  }
103
111
  };
104
112
  export default (({
105
113
  isCompact,
114
+ isLoading = false,
106
115
  testId
107
116
  }) => {
108
117
  const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
@@ -118,9 +127,11 @@ export default (({
118
127
  }
119
128
  }, jsx(Skeleton, {
120
129
  appearance: "darkGray",
121
- width: width,
130
+ borderRadius: 8,
131
+ testId: "empty-state-skeleton",
132
+ isShimmering: isLoading,
122
133
  height: 13,
123
- borderRadius: 8
134
+ width: width
124
135
  }))))), jsx("tbody", {
125
136
  css: tableBodyStyles
126
137
  }, rows.map(row => jsx("tr", {
@@ -128,5 +139,5 @@ export default (({
128
139
  }, columnsToRender.map(column => jsx("td", {
129
140
  css: cellStyles,
130
141
  key: column.key
131
- }, renderItem(column, row)))))));
142
+ }, renderItem(column, row, isLoading)))))));
132
143
  });
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/ui/datasource-table-view/datasourceTableView.js CHANGED
@@ -64,7 +64,8 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
64
64
  scrollableContainerHeight: 590
65
65
  }) : jsx(EmptyState, {
66
66
  testId: "datasource-table-view-skeleton",
67
- isCompact: true
67
+ isCompact: true,
68
+ isLoading: !isDataReady || status === 'loading'
68
69
  }), jsx(TableFooter, {
69
70
  issueCount: isDataReady ? totalCount : undefined,
70
71
  onRefresh: reset,
package/dist/esm/ui/issue-like-table/empty-state/index.js CHANGED
@@ -57,7 +57,7 @@ var cellStyles = css({
57
57
  paddingRight: "var(--ds-space-100, 8px)"
58
58
  }
59
59
  });
60
- var renderItem = function renderItem(_ref, _ref2) {
60
+ var renderItem = function renderItem(_ref, _ref2, isShimmering) {
61
61
  var key = _ref.key,
62
62
  width = _ref.width;
63
63
  var priority = _ref2.priority,
@@ -67,9 +67,11 @@ var renderItem = function renderItem(_ref, _ref2) {
67
67
  switch (key) {
68
68
  case 'assignee':
69
69
  return jsx(UserType, null, jsx(Skeleton, {
70
- width: width,
70
+ borderRadius: 8,
71
+ testId: "empty-state-skeleton",
71
72
  height: 13,
72
- borderRadius: 8
73
+ isShimmering: isShimmering,
74
+ width: width
73
75
  }));
74
76
  case 'priority':
75
77
  return jsx(Priority, {
@@ -82,27 +84,35 @@ var renderItem = function renderItem(_ref, _ref2) {
82
84
  case 'summary':
83
85
  return jsx(Skeleton, {
84
86
  appearance: "blue",
85
- width: summaryWidth,
86
87
  borderRadius: 10,
87
- height: 13
88
+ testId: "empty-state-skeleton",
89
+ height: 13,
90
+ isShimmering: isShimmering,
91
+ width: summaryWidth
88
92
  });
89
93
  case 'status':
90
94
  return jsx(Skeleton, {
91
95
  appearance: "blue",
92
- width: statusWidth,
96
+ borderRadius: 3,
97
+ testId: "empty-state-skeleton",
93
98
  height: 16,
94
- borderRadius: 3
99
+ isShimmering: isShimmering,
100
+ width: statusWidth
95
101
  });
96
102
  default:
97
103
  return jsx(Skeleton, {
98
- width: width,
104
+ borderRadius: 8,
105
+ testId: "empty-state-skeleton",
99
106
  height: 13,
100
- borderRadius: 8
107
+ isShimmering: isShimmering,
108
+ width: width
101
109
  });
102
110
  }
103
111
  };
104
112
  export default (function (_ref3) {
105
113
  var isCompact = _ref3.isCompact,
114
+ _ref3$isLoading = _ref3.isLoading,
115
+ isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
106
116
  testId = _ref3.testId;
107
117
  var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
108
118
  return jsx("table", {
@@ -117,9 +127,11 @@ export default (function (_ref3) {
117
127
  }
118
128
  }, jsx(Skeleton, {
119
129
  appearance: "darkGray",
120
- width: width,
130
+ borderRadius: 8,
131
+ testId: "empty-state-skeleton",
132
+ isShimmering: isLoading,
121
133
  height: 13,
122
- borderRadius: 8
134
+ width: width
123
135
  }));
124
136
  }))), jsx("tbody", {
125
137
  css: tableBodyStyles
@@ -130,7 +142,7 @@ export default (function (_ref3) {
130
142
  return jsx("td", {
131
143
  css: cellStyles,
132
144
  key: column.key
133
- }, renderItem(column, row));
145
+ }, renderItem(column, row, isLoading));
134
146
  }));
135
147
  })));
136
148
  });
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/ui/issue-like-table/empty-state/index.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  import { jsx } from '@emotion/react';
3
3
  export interface Props {
4
4
  isCompact?: boolean;
5
+ isLoading?: boolean;
5
6
  testId?: string;
6
7
  }
7
- declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
8
+ declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
8
9
  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, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
16
- export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;
16
+ export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
package/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  import { jsx } from '@emotion/react';
3
3
  export interface Props {
4
4
  isCompact?: boolean;
5
+ isLoading?: boolean;
5
6
  testId?: string;
6
7
  }
7
- declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
8
+ declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
8
9
  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, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
16
- export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;
16
+ export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
55
55
  "@atlaskit/tag": "^11.5.0",
56
56
  "@atlaskit/textfield": "5.6.3",
57
57
  "@atlaskit/theme": "^12.5.0",
58
- "@atlaskit/tokens": "^1.13.0",
58
+ "@atlaskit/tokens": "^1.14.0",
59
59
  "@atlassianlabs/jql-editor": "^2.0.1",
60
60
  "@atlassianlabs/jql-editor-autocomplete-rest": "^1.1.2",
61
61
  "@babel/runtime": "^7.0.0",