@atlaskit/link-datasource 3.6.15 → 3.7.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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/ui/issue-like-table/edit-type/index.js +16 -6
- package/dist/cjs/ui/issue-like-table/edit-type/status/index.js +117 -0
- package/dist/cjs/ui/issue-like-table/styled.js +1 -2
- package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js +7 -0
- package/dist/es2019/ui/issue-like-table/edit-type/index.js +15 -6
- package/dist/es2019/ui/issue-like-table/edit-type/status/index.js +78 -0
- package/dist/es2019/ui/issue-like-table/styled.js +1 -2
- package/dist/es2019/ui/issue-like-table/table-cell-content/inline-edit.js +10 -0
- package/dist/esm/ui/issue-like-table/edit-type/index.js +16 -6
- package/dist/esm/ui/issue-like-table/edit-type/status/index.js +107 -0
- package/dist/esm/ui/issue-like-table/styled.js +1 -2
- package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js +7 -0
- package/dist/types/ui/issue-like-table/edit-type/status/index.d.ts +9 -0
- package/dist/types-ts4.5/ui/issue-like-table/edit-type/status/index.d.ts +9 -0
- package/examples-helpers/buildIssueLikeTable.tsx +13 -14
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/link-datasource
|
|
2
2
|
|
|
3
|
+
## 3.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#159162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159162)
|
|
8
|
+
[`bfd053853f59d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfd053853f59d) -
|
|
9
|
+
[ux] Enable updating jira issue statues in datasource list view via inline edit.
|
|
10
|
+
|
|
11
|
+
## 3.6.16
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#159176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159176)
|
|
16
|
+
[`8f1d77592a9dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f1d77592a9dc) -
|
|
17
|
+
Bump adf-schema to 44.2.0
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 3.6.15
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -9,6 +9,8 @@ exports.isEditTypeSupported = exports.editType = void 0;
|
|
|
9
9
|
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
+
var _status = _interopRequireDefault(require("./status"));
|
|
12
14
|
var _text = _interopRequireWildcard(require("./text"));
|
|
13
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -31,6 +33,18 @@ var editType = exports.editType = function editType(_ref) {
|
|
|
31
33
|
}));
|
|
32
34
|
}
|
|
33
35
|
};
|
|
36
|
+
case 'status':
|
|
37
|
+
return {
|
|
38
|
+
defaultValue: (0, _text.toTextValue)(defaultValue),
|
|
39
|
+
editView: function editView(_ref3) {
|
|
40
|
+
var fieldProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref3), _ref3));
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_status.default, (0, _extends2.default)({}, fieldProps, {
|
|
42
|
+
currentValue: currentValue,
|
|
43
|
+
setEditValues: setEditValues,
|
|
44
|
+
id: ACTIVE_INLINE_EDIT_ID
|
|
45
|
+
}));
|
|
46
|
+
}
|
|
47
|
+
};
|
|
34
48
|
default:
|
|
35
49
|
return {
|
|
36
50
|
defaultValue: '',
|
|
@@ -41,10 +55,6 @@ var editType = exports.editType = function editType(_ref) {
|
|
|
41
55
|
}
|
|
42
56
|
};
|
|
43
57
|
var isEditTypeSupported = exports.isEditTypeSupported = function isEditTypeSupported(type) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return true;
|
|
47
|
-
default:
|
|
48
|
-
return false;
|
|
49
|
-
}
|
|
58
|
+
var supportedEditType = (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync-statuses') ? ['string', 'status'] : ['string'];
|
|
59
|
+
return supportedEditType.includes(type);
|
|
50
60
|
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
+
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
|
|
15
|
+
var _select = _interopRequireDefault(require("@atlaskit/select"));
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
|
+
// FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
|
|
19
|
+
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
|
|
20
|
+
|
|
21
|
+
var StatusEditType = function StatusEditType(props) {
|
|
22
|
+
var _props$currentValue;
|
|
23
|
+
var _useStatusOptions = useStatusOptions(),
|
|
24
|
+
options = _useStatusOptions.options,
|
|
25
|
+
isLoading = _useStatusOptions.isLoading;
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
|
|
28
|
+
className: "single-select",
|
|
29
|
+
testId: "inline-edit-status",
|
|
30
|
+
autoFocus: true,
|
|
31
|
+
defaultMenuIsOpen: true,
|
|
32
|
+
blurInputOnSelect: true,
|
|
33
|
+
getOptionValue: function getOptionValue(option) {
|
|
34
|
+
return option.text;
|
|
35
|
+
},
|
|
36
|
+
options: options,
|
|
37
|
+
isLoading: isLoading,
|
|
38
|
+
defaultValue: (_props$currentValue = props.currentValue) === null || _props$currentValue === void 0 || (_props$currentValue = _props$currentValue.values) === null || _props$currentValue === void 0 ? void 0 : _props$currentValue[0],
|
|
39
|
+
filterOption: filterOption,
|
|
40
|
+
formatOptionLabel: function formatOptionLabel(option) {
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({
|
|
42
|
+
testId: "inline-edit-status-option-".concat(option.text)
|
|
43
|
+
}, option.style), option.text);
|
|
44
|
+
},
|
|
45
|
+
onChange: function onChange(e) {
|
|
46
|
+
return props.setEditValues({
|
|
47
|
+
type: 'status',
|
|
48
|
+
values: e ? [e] : []
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
})));
|
|
52
|
+
};
|
|
53
|
+
var filterOption = function filterOption(option, inputValue) {
|
|
54
|
+
return option.data.text.toLowerCase().includes(inputValue.toLowerCase());
|
|
55
|
+
};
|
|
56
|
+
var useStatusOptions = function useStatusOptions() {
|
|
57
|
+
var _useState = (0, _react.useState)({
|
|
58
|
+
isLoading: true,
|
|
59
|
+
options: []
|
|
60
|
+
}),
|
|
61
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
62
|
+
_useState2$ = _useState2[0],
|
|
63
|
+
options = _useState2$.options,
|
|
64
|
+
isLoading = _useState2$.isLoading,
|
|
65
|
+
setOptions = _useState2[1];
|
|
66
|
+
(0, _react.useEffect)(function () {
|
|
67
|
+
loadOptions().then(function (options) {
|
|
68
|
+
return setOptions({
|
|
69
|
+
isLoading: false,
|
|
70
|
+
options: options
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
}, []);
|
|
74
|
+
return {
|
|
75
|
+
options: options,
|
|
76
|
+
isLoading: isLoading
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
var loadOptions = /*#__PURE__*/function () {
|
|
80
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
81
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
82
|
+
while (1) switch (_context.prev = _context.next) {
|
|
83
|
+
case 0:
|
|
84
|
+
return _context.abrupt("return", new Promise(function (resolve) {
|
|
85
|
+
setTimeout(function () {
|
|
86
|
+
return resolve([{
|
|
87
|
+
text: 'To Do',
|
|
88
|
+
id: '1',
|
|
89
|
+
style: {
|
|
90
|
+
appearance: 'default'
|
|
91
|
+
}
|
|
92
|
+
}, {
|
|
93
|
+
text: 'In Progress',
|
|
94
|
+
id: '1',
|
|
95
|
+
style: {
|
|
96
|
+
appearance: 'inprogress'
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
text: 'Done',
|
|
100
|
+
id: '2',
|
|
101
|
+
style: {
|
|
102
|
+
appearance: 'success'
|
|
103
|
+
}
|
|
104
|
+
}]);
|
|
105
|
+
}, 1000);
|
|
106
|
+
}));
|
|
107
|
+
case 1:
|
|
108
|
+
case "end":
|
|
109
|
+
return _context.stop();
|
|
110
|
+
}
|
|
111
|
+
}, _callee);
|
|
112
|
+
}));
|
|
113
|
+
return function loadOptions() {
|
|
114
|
+
return _ref.apply(this, arguments);
|
|
115
|
+
};
|
|
116
|
+
}();
|
|
117
|
+
var _default = exports.default = StatusEditType;
|
|
@@ -109,8 +109,7 @@ var InlineEditableTableCell = exports.InlineEditableTableCell = _styled.default.
|
|
|
109
109
|
verticalAlign: 'inherit',
|
|
110
110
|
boxSizing: 'content-box',
|
|
111
111
|
borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
|
|
112
|
-
borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")"))
|
|
113
|
-
overflow: 'hidden'
|
|
112
|
+
borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")"))
|
|
114
113
|
}), (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
|
|
115
114
|
borderRight: 0
|
|
116
115
|
}), (0, _defineProperty2.default)(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
|
|
@@ -26,9 +26,12 @@ var editContainerStyles = (0, _primitives.xcss)({
|
|
|
26
26
|
marginBlockStart: 'space.negative.100'
|
|
27
27
|
});
|
|
28
28
|
var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
|
|
29
|
+
var _typedNewValue$values;
|
|
29
30
|
switch (typedNewValue.type) {
|
|
30
31
|
case 'string':
|
|
31
32
|
return typedNewValue.values[0] || '';
|
|
33
|
+
case 'status':
|
|
34
|
+
return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.id) || '';
|
|
32
35
|
}
|
|
33
36
|
throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
|
|
34
37
|
};
|
|
@@ -38,6 +41,10 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
|
|
|
38
41
|
return _objectSpread(_objectSpread({}, existingItem), {}, (0, _defineProperty2.default)({}, columnKey, {
|
|
39
42
|
data: newValue.values[0] || ''
|
|
40
43
|
}));
|
|
44
|
+
case 'status':
|
|
45
|
+
return newValue.values[0] ? _objectSpread(_objectSpread({}, existingItem), {}, (0, _defineProperty2.default)({}, columnKey, {
|
|
46
|
+
data: newValue.values[0]
|
|
47
|
+
})) : existingItem;
|
|
41
48
|
default:
|
|
42
49
|
}
|
|
43
50
|
return null;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
+
import StatusEditType from './status';
|
|
3
5
|
import TextEditType, { toTextValue } from './text';
|
|
4
6
|
|
|
5
7
|
// This is used in editor-card-plugin to identify if any type of inline edit is active.
|
|
@@ -21,6 +23,17 @@ export const editType = ({
|
|
|
21
23
|
id: ACTIVE_INLINE_EDIT_ID
|
|
22
24
|
}))
|
|
23
25
|
};
|
|
26
|
+
case 'status':
|
|
27
|
+
return {
|
|
28
|
+
defaultValue: toTextValue(defaultValue),
|
|
29
|
+
editView: ({
|
|
30
|
+
...fieldProps
|
|
31
|
+
}) => /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
|
|
32
|
+
currentValue: currentValue,
|
|
33
|
+
setEditValues: setEditValues,
|
|
34
|
+
id: ACTIVE_INLINE_EDIT_ID
|
|
35
|
+
}))
|
|
36
|
+
};
|
|
24
37
|
default:
|
|
25
38
|
return {
|
|
26
39
|
defaultValue: '',
|
|
@@ -29,10 +42,6 @@ export const editType = ({
|
|
|
29
42
|
}
|
|
30
43
|
};
|
|
31
44
|
export const isEditTypeSupported = type => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return true;
|
|
35
|
-
default:
|
|
36
|
-
return false;
|
|
37
|
-
}
|
|
45
|
+
const supportedEditType = fg('platform-datasources-enable-two-way-sync-statuses') ? ['string', 'status'] : ['string'];
|
|
46
|
+
return supportedEditType.includes(type);
|
|
38
47
|
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
4
|
+
// FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
|
|
5
|
+
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
|
|
6
|
+
|
|
7
|
+
import Select from '@atlaskit/select';
|
|
8
|
+
const StatusEditType = props => {
|
|
9
|
+
var _props$currentValue, _props$currentValue$v;
|
|
10
|
+
const {
|
|
11
|
+
options,
|
|
12
|
+
isLoading
|
|
13
|
+
} = useStatusOptions();
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
|
|
16
|
+
className: "single-select",
|
|
17
|
+
testId: "inline-edit-status",
|
|
18
|
+
autoFocus: true,
|
|
19
|
+
defaultMenuIsOpen: true,
|
|
20
|
+
blurInputOnSelect: true,
|
|
21
|
+
getOptionValue: option => option.text,
|
|
22
|
+
options: options,
|
|
23
|
+
isLoading: isLoading,
|
|
24
|
+
defaultValue: (_props$currentValue = props.currentValue) === null || _props$currentValue === void 0 ? void 0 : (_props$currentValue$v = _props$currentValue.values) === null || _props$currentValue$v === void 0 ? void 0 : _props$currentValue$v[0],
|
|
25
|
+
filterOption: filterOption,
|
|
26
|
+
formatOptionLabel: option => /*#__PURE__*/React.createElement(Lozenge, _extends({
|
|
27
|
+
testId: `inline-edit-status-option-${option.text}`
|
|
28
|
+
}, option.style), option.text),
|
|
29
|
+
onChange: e => props.setEditValues({
|
|
30
|
+
type: 'status',
|
|
31
|
+
values: e ? [e] : []
|
|
32
|
+
})
|
|
33
|
+
})));
|
|
34
|
+
};
|
|
35
|
+
const filterOption = (option, inputValue) => option.data.text.toLowerCase().includes(inputValue.toLowerCase());
|
|
36
|
+
const useStatusOptions = () => {
|
|
37
|
+
const [{
|
|
38
|
+
options,
|
|
39
|
+
isLoading
|
|
40
|
+
}, setOptions] = useState({
|
|
41
|
+
isLoading: true,
|
|
42
|
+
options: []
|
|
43
|
+
});
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
loadOptions().then(options => setOptions({
|
|
46
|
+
isLoading: false,
|
|
47
|
+
options
|
|
48
|
+
}));
|
|
49
|
+
}, []);
|
|
50
|
+
return {
|
|
51
|
+
options,
|
|
52
|
+
isLoading
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const loadOptions = async () => {
|
|
56
|
+
return new Promise(resolve => {
|
|
57
|
+
setTimeout(() => resolve([{
|
|
58
|
+
text: 'To Do',
|
|
59
|
+
id: '1',
|
|
60
|
+
style: {
|
|
61
|
+
appearance: 'default'
|
|
62
|
+
}
|
|
63
|
+
}, {
|
|
64
|
+
text: 'In Progress',
|
|
65
|
+
id: '1',
|
|
66
|
+
style: {
|
|
67
|
+
appearance: 'inprogress'
|
|
68
|
+
}
|
|
69
|
+
}, {
|
|
70
|
+
text: 'Done',
|
|
71
|
+
id: '2',
|
|
72
|
+
style: {
|
|
73
|
+
appearance: 'success'
|
|
74
|
+
}
|
|
75
|
+
}]), 1000);
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
export default StatusEditType;
|
|
@@ -126,8 +126,7 @@ export const InlineEditableTableCell = styled.td({
|
|
|
126
126
|
verticalAlign: 'inherit',
|
|
127
127
|
boxSizing: 'content-box',
|
|
128
128
|
borderRight: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
|
|
129
|
-
borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}
|
|
130
|
-
overflow: 'hidden'
|
|
129
|
+
borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`
|
|
131
130
|
},
|
|
132
131
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
133
132
|
[`${withTablePluginBodyPrefix('&:last-child')}`]: {
|
|
@@ -11,9 +11,12 @@ const editContainerStyles = xcss({
|
|
|
11
11
|
marginBlockStart: 'space.negative.100'
|
|
12
12
|
});
|
|
13
13
|
const getBackendUpdateValue = typedNewValue => {
|
|
14
|
+
var _typedNewValue$values;
|
|
14
15
|
switch (typedNewValue.type) {
|
|
15
16
|
case 'string':
|
|
16
17
|
return typedNewValue.values[0] || '';
|
|
18
|
+
case 'status':
|
|
19
|
+
return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.id) || '';
|
|
17
20
|
}
|
|
18
21
|
throw new Error(`Datasource 2 way sync Backend update value not implemented for type ${typedNewValue.type}`);
|
|
19
22
|
};
|
|
@@ -26,6 +29,13 @@ const mapUpdatedItem = (existingItem, columnKey, newValue) => {
|
|
|
26
29
|
data: newValue.values[0] || ''
|
|
27
30
|
}
|
|
28
31
|
};
|
|
32
|
+
case 'status':
|
|
33
|
+
return newValue.values[0] ? {
|
|
34
|
+
...existingItem,
|
|
35
|
+
[columnKey]: {
|
|
36
|
+
data: newValue.values[0]
|
|
37
|
+
}
|
|
38
|
+
} : existingItem;
|
|
29
39
|
default:
|
|
30
40
|
}
|
|
31
41
|
return null;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
import StatusEditType from './status';
|
|
4
6
|
import TextEditType, { toTextValue } from './text';
|
|
5
7
|
|
|
6
8
|
// This is used in editor-card-plugin to identify if any type of inline edit is active.
|
|
@@ -22,6 +24,18 @@ export var editType = function editType(_ref) {
|
|
|
22
24
|
}));
|
|
23
25
|
}
|
|
24
26
|
};
|
|
27
|
+
case 'status':
|
|
28
|
+
return {
|
|
29
|
+
defaultValue: toTextValue(defaultValue),
|
|
30
|
+
editView: function editView(_ref3) {
|
|
31
|
+
var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
|
32
|
+
return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
|
|
33
|
+
currentValue: currentValue,
|
|
34
|
+
setEditValues: setEditValues,
|
|
35
|
+
id: ACTIVE_INLINE_EDIT_ID
|
|
36
|
+
}));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
25
39
|
default:
|
|
26
40
|
return {
|
|
27
41
|
defaultValue: '',
|
|
@@ -32,10 +46,6 @@ export var editType = function editType(_ref) {
|
|
|
32
46
|
}
|
|
33
47
|
};
|
|
34
48
|
export var isEditTypeSupported = function isEditTypeSupported(type) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return true;
|
|
38
|
-
default:
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
49
|
+
var supportedEditType = fg('platform-datasources-enable-two-way-sync-statuses') ? ['string', 'status'] : ['string'];
|
|
50
|
+
return supportedEditType.includes(type);
|
|
41
51
|
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
5
|
+
import React, { useEffect, useState } from 'react';
|
|
6
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
7
|
+
// FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
|
|
8
|
+
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
|
|
9
|
+
|
|
10
|
+
import Select from '@atlaskit/select';
|
|
11
|
+
var StatusEditType = function StatusEditType(props) {
|
|
12
|
+
var _props$currentValue;
|
|
13
|
+
var _useStatusOptions = useStatusOptions(),
|
|
14
|
+
options = _useStatusOptions.options,
|
|
15
|
+
isLoading = _useStatusOptions.isLoading;
|
|
16
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
|
|
18
|
+
className: "single-select",
|
|
19
|
+
testId: "inline-edit-status",
|
|
20
|
+
autoFocus: true,
|
|
21
|
+
defaultMenuIsOpen: true,
|
|
22
|
+
blurInputOnSelect: true,
|
|
23
|
+
getOptionValue: function getOptionValue(option) {
|
|
24
|
+
return option.text;
|
|
25
|
+
},
|
|
26
|
+
options: options,
|
|
27
|
+
isLoading: isLoading,
|
|
28
|
+
defaultValue: (_props$currentValue = props.currentValue) === null || _props$currentValue === void 0 || (_props$currentValue = _props$currentValue.values) === null || _props$currentValue === void 0 ? void 0 : _props$currentValue[0],
|
|
29
|
+
filterOption: filterOption,
|
|
30
|
+
formatOptionLabel: function formatOptionLabel(option) {
|
|
31
|
+
return /*#__PURE__*/React.createElement(Lozenge, _extends({
|
|
32
|
+
testId: "inline-edit-status-option-".concat(option.text)
|
|
33
|
+
}, option.style), option.text);
|
|
34
|
+
},
|
|
35
|
+
onChange: function onChange(e) {
|
|
36
|
+
return props.setEditValues({
|
|
37
|
+
type: 'status',
|
|
38
|
+
values: e ? [e] : []
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
})));
|
|
42
|
+
};
|
|
43
|
+
var filterOption = function filterOption(option, inputValue) {
|
|
44
|
+
return option.data.text.toLowerCase().includes(inputValue.toLowerCase());
|
|
45
|
+
};
|
|
46
|
+
var useStatusOptions = function useStatusOptions() {
|
|
47
|
+
var _useState = useState({
|
|
48
|
+
isLoading: true,
|
|
49
|
+
options: []
|
|
50
|
+
}),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
_useState2$ = _useState2[0],
|
|
53
|
+
options = _useState2$.options,
|
|
54
|
+
isLoading = _useState2$.isLoading,
|
|
55
|
+
setOptions = _useState2[1];
|
|
56
|
+
useEffect(function () {
|
|
57
|
+
loadOptions().then(function (options) {
|
|
58
|
+
return setOptions({
|
|
59
|
+
isLoading: false,
|
|
60
|
+
options: options
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
}, []);
|
|
64
|
+
return {
|
|
65
|
+
options: options,
|
|
66
|
+
isLoading: isLoading
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
var loadOptions = /*#__PURE__*/function () {
|
|
70
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
71
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
72
|
+
while (1) switch (_context.prev = _context.next) {
|
|
73
|
+
case 0:
|
|
74
|
+
return _context.abrupt("return", new Promise(function (resolve) {
|
|
75
|
+
setTimeout(function () {
|
|
76
|
+
return resolve([{
|
|
77
|
+
text: 'To Do',
|
|
78
|
+
id: '1',
|
|
79
|
+
style: {
|
|
80
|
+
appearance: 'default'
|
|
81
|
+
}
|
|
82
|
+
}, {
|
|
83
|
+
text: 'In Progress',
|
|
84
|
+
id: '1',
|
|
85
|
+
style: {
|
|
86
|
+
appearance: 'inprogress'
|
|
87
|
+
}
|
|
88
|
+
}, {
|
|
89
|
+
text: 'Done',
|
|
90
|
+
id: '2',
|
|
91
|
+
style: {
|
|
92
|
+
appearance: 'success'
|
|
93
|
+
}
|
|
94
|
+
}]);
|
|
95
|
+
}, 1000);
|
|
96
|
+
}));
|
|
97
|
+
case 1:
|
|
98
|
+
case "end":
|
|
99
|
+
return _context.stop();
|
|
100
|
+
}
|
|
101
|
+
}, _callee);
|
|
102
|
+
}));
|
|
103
|
+
return function loadOptions() {
|
|
104
|
+
return _ref.apply(this, arguments);
|
|
105
|
+
};
|
|
106
|
+
}();
|
|
107
|
+
export default StatusEditType;
|
|
@@ -103,8 +103,7 @@ export var InlineEditableTableCell = styled.td((_styled$td2 = {}, _definePropert
|
|
|
103
103
|
verticalAlign: 'inherit',
|
|
104
104
|
boxSizing: 'content-box',
|
|
105
105
|
borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
|
|
106
|
-
borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")"))
|
|
107
|
-
overflow: 'hidden'
|
|
106
|
+
borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")"))
|
|
108
107
|
}), _defineProperty(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
|
|
109
108
|
borderRight: 0
|
|
110
109
|
}), _defineProperty(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
|
|
@@ -16,9 +16,12 @@ var editContainerStyles = xcss({
|
|
|
16
16
|
marginBlockStart: 'space.negative.100'
|
|
17
17
|
});
|
|
18
18
|
var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
|
|
19
|
+
var _typedNewValue$values;
|
|
19
20
|
switch (typedNewValue.type) {
|
|
20
21
|
case 'string':
|
|
21
22
|
return typedNewValue.values[0] || '';
|
|
23
|
+
case 'status':
|
|
24
|
+
return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.id) || '';
|
|
22
25
|
}
|
|
23
26
|
throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
|
|
24
27
|
};
|
|
@@ -28,6 +31,10 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
|
|
|
28
31
|
return _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
|
|
29
32
|
data: newValue.values[0] || ''
|
|
30
33
|
}));
|
|
34
|
+
case 'status':
|
|
35
|
+
return newValue.values[0] ? _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
|
|
36
|
+
data: newValue.values[0]
|
|
37
|
+
})) : existingItem;
|
|
31
38
|
default:
|
|
32
39
|
}
|
|
33
40
|
return null;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FieldProps } from '@atlaskit/form';
|
|
3
|
+
import type { DatasourceTypeWithOnlyValues } from '../../types';
|
|
4
|
+
interface Props extends Omit<FieldProps<string>, 'value'> {
|
|
5
|
+
currentValue: DatasourceTypeWithOnlyValues;
|
|
6
|
+
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
7
|
+
}
|
|
8
|
+
declare const StatusEditType: (props: Props) => JSX.Element;
|
|
9
|
+
export default StatusEditType;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FieldProps } from '@atlaskit/form';
|
|
3
|
+
import type { DatasourceTypeWithOnlyValues } from '../../types';
|
|
4
|
+
interface Props extends Omit<FieldProps<string>, 'value'> {
|
|
5
|
+
currentValue: DatasourceTypeWithOnlyValues;
|
|
6
|
+
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
7
|
+
}
|
|
8
|
+
declare const StatusEditType: (props: Props) => JSX.Element;
|
|
9
|
+
export default StatusEditType;
|
|
@@ -30,6 +30,7 @@ interface Props {
|
|
|
30
30
|
canControlWrapping?: boolean;
|
|
31
31
|
skipIntl?: boolean;
|
|
32
32
|
forceLoading?: boolean;
|
|
33
|
+
visibleColumnKeys?: string[];
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
|
|
@@ -46,6 +47,7 @@ const ExampleBody = ({
|
|
|
46
47
|
canResizeColumns = true,
|
|
47
48
|
canControlWrapping = true,
|
|
48
49
|
forceLoading = false,
|
|
50
|
+
visibleColumnKeys: overrideVisibleColumnKeys,
|
|
49
51
|
}: Props) => {
|
|
50
52
|
const parameters = useMemo<JiraIssueDatasourceParameters>(
|
|
51
53
|
() => ({
|
|
@@ -85,10 +87,17 @@ const ExampleBody = ({
|
|
|
85
87
|
});
|
|
86
88
|
|
|
87
89
|
useEffect(() => {
|
|
88
|
-
if (
|
|
90
|
+
if (overrideVisibleColumnKeys) {
|
|
91
|
+
onVisibleColumnKeysChange(overrideVisibleColumnKeys);
|
|
92
|
+
} else if (visibleColumnKeys.length === 0 && defaultVisibleColumnKeys.length > 0) {
|
|
89
93
|
onVisibleColumnKeysChange(defaultVisibleColumnKeys);
|
|
90
94
|
}
|
|
91
|
-
}, [
|
|
95
|
+
}, [
|
|
96
|
+
visibleColumnKeys,
|
|
97
|
+
defaultVisibleColumnKeys,
|
|
98
|
+
onVisibleColumnKeysChange,
|
|
99
|
+
overrideVisibleColumnKeys,
|
|
100
|
+
]);
|
|
92
101
|
|
|
93
102
|
return (
|
|
94
103
|
<TableViewWrapper>
|
|
@@ -116,22 +125,12 @@ const ExampleBody = ({
|
|
|
116
125
|
);
|
|
117
126
|
};
|
|
118
127
|
|
|
119
|
-
export const ExampleIssueLikeTable = ({
|
|
120
|
-
isReadonly,
|
|
121
|
-
canResizeColumns,
|
|
122
|
-
canControlWrapping,
|
|
123
|
-
forceLoading,
|
|
124
|
-
}: Props) => {
|
|
128
|
+
export const ExampleIssueLikeTable = (props: Props) => {
|
|
125
129
|
return (
|
|
126
130
|
<DatasourceExperienceIdProvider>
|
|
127
131
|
<IntlMessagesProvider loaderFn={fetchMessagesForLocale}>
|
|
128
132
|
<SmartCardProvider client={new SmartLinkClient()}>
|
|
129
|
-
<ExampleBody
|
|
130
|
-
isReadonly={isReadonly}
|
|
131
|
-
canResizeColumns={canResizeColumns}
|
|
132
|
-
canControlWrapping={canControlWrapping}
|
|
133
|
-
forceLoading={forceLoading}
|
|
134
|
-
/>
|
|
133
|
+
<ExampleBody {...props} />
|
|
135
134
|
</SmartCardProvider>
|
|
136
135
|
</IntlMessagesProvider>
|
|
137
136
|
</DatasourceExperienceIdProvider>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/link-datasource",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "UI Components to support linking platform dataset feature",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
"analytics:codegen": "yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource --output ./src/analytics/generated"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@atlaskit/adf-schema": "^
|
|
37
|
+
"@atlaskit/adf-schema": "^44.2.0",
|
|
38
38
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
39
39
|
"@atlaskit/atlassian-context": "^0.0.2",
|
|
40
|
-
"@atlaskit/avatar": "^21.
|
|
40
|
+
"@atlaskit/avatar": "^21.17.0",
|
|
41
41
|
"@atlaskit/avatar-group": "^10.0.0",
|
|
42
42
|
"@atlaskit/badge": "^16.4.0",
|
|
43
43
|
"@atlaskit/button": "^20.3.0",
|
|
44
|
-
"@atlaskit/datetime-picker": "^15.
|
|
44
|
+
"@atlaskit/datetime-picker": "^15.7.0",
|
|
45
45
|
"@atlaskit/dropdown-menu": "^12.22.0",
|
|
46
46
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
47
47
|
"@atlaskit/empty-state": "^7.12.0",
|
|
@@ -164,6 +164,9 @@
|
|
|
164
164
|
"enable_datasource_supporting_actions": {
|
|
165
165
|
"type": "boolean"
|
|
166
166
|
},
|
|
167
|
+
"platform-datasources-enable-two-way-sync-statuses": {
|
|
168
|
+
"type": "boolean"
|
|
169
|
+
},
|
|
167
170
|
"platform.linking-platform.datasource-assets_add_version_parameter": {
|
|
168
171
|
"type": "boolean"
|
|
169
172
|
},
|