@atlaskit/link-datasource 3.13.3 → 3.13.5
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 +18 -0
- package/dist/cjs/hooks/useLoadOptions.js +5 -3
- package/dist/cjs/ui/issue-like-table/edit-type/user/index.js +24 -7
- package/dist/cjs/ui/issue-like-table/render-type/user/index.js +8 -1
- package/dist/cjs/ui/issue-like-table/utils.js +3 -1
- package/dist/es2019/hooks/useLoadOptions.js +4 -3
- package/dist/es2019/ui/issue-like-table/edit-type/user/index.js +24 -6
- package/dist/es2019/ui/issue-like-table/render-type/user/index.js +9 -2
- package/dist/es2019/ui/issue-like-table/utils.js +3 -1
- package/dist/esm/hooks/useLoadOptions.js +5 -3
- package/dist/esm/ui/issue-like-table/edit-type/user/index.js +25 -8
- package/dist/esm/ui/issue-like-table/render-type/user/index.js +9 -2
- package/dist/esm/ui/issue-like-table/utils.js +3 -1
- package/dist/types/hooks/useLoadOptions.d.ts +3 -2
- package/dist/types-ts4.5/hooks/useLoadOptions.d.ts +3 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/link-datasource
|
|
2
2
|
|
|
3
|
+
## 3.13.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#168167](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168167)
|
|
8
|
+
[`2f949715bc7af`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f949715bc7af) -
|
|
9
|
+
[ux] updating design of J2WS assignee column and dropdown and add unassigned option
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 3.13.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
|
|
17
|
+
[`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
|
|
18
|
+
Bump adf-schema to 46.0.0
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 3.13.3
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.useLoadOptions = void 0;
|
|
8
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
11
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
12
|
var _react = require("react");
|
|
@@ -54,7 +55,8 @@ var loadOptions = /*#__PURE__*/function () {
|
|
|
54
55
|
}();
|
|
55
56
|
var useLoadOptions = exports.useLoadOptions = function useLoadOptions(_ref2) {
|
|
56
57
|
var fetchInputs = _ref2.fetchInputs,
|
|
57
|
-
executeFetch = _ref2.executeFetch
|
|
58
|
+
executeFetch = _ref2.executeFetch,
|
|
59
|
+
emptyOption = _ref2.emptyOption;
|
|
58
60
|
var _useState = (0, _react.useState)({
|
|
59
61
|
isLoading: true,
|
|
60
62
|
options: [],
|
|
@@ -76,7 +78,7 @@ var useLoadOptions = exports.useLoadOptions = function useLoadOptions(_ref2) {
|
|
|
76
78
|
if (isMounted) {
|
|
77
79
|
setOptions({
|
|
78
80
|
isLoading: false,
|
|
79
|
-
options: options,
|
|
81
|
+
options: emptyOption ? [emptyOption].concat((0, _toConsumableArray2.default)(options)) : options,
|
|
80
82
|
hasFailed: false
|
|
81
83
|
});
|
|
82
84
|
}
|
|
@@ -91,7 +93,7 @@ var useLoadOptions = exports.useLoadOptions = function useLoadOptions(_ref2) {
|
|
|
91
93
|
return function () {
|
|
92
94
|
isMounted = false;
|
|
93
95
|
};
|
|
94
|
-
}, [fetchInputs, executeFetch, showErrorFlag]);
|
|
96
|
+
}, [fetchInputs, executeFetch, showErrorFlag, emptyOption]);
|
|
95
97
|
return {
|
|
96
98
|
options: options,
|
|
97
99
|
isLoading: isLoading,
|
|
@@ -9,14 +9,17 @@ exports.default = void 0;
|
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _reactIntlNext = require("react-intl-next");
|
|
12
13
|
var _useDebounce = require("use-debounce");
|
|
13
14
|
var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
|
|
14
15
|
var _select = _interopRequireDefault(require("@atlaskit/select"));
|
|
16
|
+
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
15
17
|
var _ufoExperiences = require("../../../../analytics/ufoExperiences");
|
|
16
18
|
var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
|
|
17
19
|
var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
|
|
18
20
|
var _constants = require("../../../common/modal/popup-select/constants");
|
|
19
21
|
var _user = require("../../render-type/user");
|
|
22
|
+
var _messages = require("../../render-type/user/messages");
|
|
20
23
|
var _inlineEdit = require("../../table-cell-content/inline-edit");
|
|
21
24
|
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); }
|
|
22
25
|
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; }
|
|
@@ -37,9 +40,19 @@ var UserEditType = function UserEditType(props) {
|
|
|
37
40
|
}, _constants.SEARCH_DEBOUNCE_MS),
|
|
38
41
|
_useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
|
|
39
42
|
handleUserInputDebounced = _useDebouncedCallback2[0];
|
|
43
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
44
|
+
formatMessage = _useIntl.formatMessage;
|
|
45
|
+
var emptyUser = (0, _react.useMemo)(function () {
|
|
46
|
+
return {
|
|
47
|
+
accountId: null,
|
|
48
|
+
displayName: formatMessage(_messages.userTypeMessages.userDefaultdisplayNameValue),
|
|
49
|
+
avatarUrls: {}
|
|
50
|
+
};
|
|
51
|
+
}, [formatMessage]);
|
|
40
52
|
var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
|
|
41
53
|
executeFetch: executeFetch,
|
|
42
|
-
fetchInputs: fetchInputs
|
|
54
|
+
fetchInputs: fetchInputs,
|
|
55
|
+
emptyOption: emptyUser
|
|
43
56
|
}),
|
|
44
57
|
options = _useLoadOptions.options,
|
|
45
58
|
isLoading = _useLoadOptions.isLoading,
|
|
@@ -66,17 +79,17 @@ var UserEditType = function UserEditType(props) {
|
|
|
66
79
|
options: options,
|
|
67
80
|
isLoading: isLoading,
|
|
68
81
|
testId: "inline-edit-user",
|
|
69
|
-
filterOption:
|
|
70
|
-
|
|
71
|
-
} // necessary, otherwise by default all options will be filtered out on user input
|
|
72
|
-
,
|
|
82
|
+
filterOption: filterOption,
|
|
83
|
+
menuPlacement: "auto",
|
|
73
84
|
onInputChange: handleUserInputDebounced,
|
|
74
85
|
defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
|
|
75
86
|
getOptionValue: function getOptionValue(option) {
|
|
76
87
|
return option.atlassianUserId;
|
|
77
88
|
},
|
|
78
89
|
formatOptionLabel: function formatOptionLabel(option) {
|
|
79
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
91
|
+
content: option.displayName
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(_avatar.AvatarItem, {
|
|
80
93
|
avatar: /*#__PURE__*/_react.default.createElement(_avatar.default, {
|
|
81
94
|
appearance: "circle",
|
|
82
95
|
size: 'small',
|
|
@@ -84,7 +97,7 @@ var UserEditType = function UserEditType(props) {
|
|
|
84
97
|
testId: "".concat(_user.USER_TYPE_TEST_ID, "--avatar--").concat(option.atlassianUserId)
|
|
85
98
|
}),
|
|
86
99
|
primaryText: option.displayName
|
|
87
|
-
});
|
|
100
|
+
}));
|
|
88
101
|
},
|
|
89
102
|
onChange: function onChange(e) {
|
|
90
103
|
return props.setEditValues({
|
|
@@ -94,4 +107,8 @@ var UserEditType = function UserEditType(props) {
|
|
|
94
107
|
}
|
|
95
108
|
}));
|
|
96
109
|
};
|
|
110
|
+
var filterOption = function filterOption(option, inputValue) {
|
|
111
|
+
var _option$data$displayN, _option$data$displayN2;
|
|
112
|
+
return (_option$data$displayN = (_option$data$displayN2 = option.data.displayName) === null || _option$data$displayN2 === void 0 ? void 0 : _option$data$displayN2.toLowerCase().includes(inputValue.toLowerCase())) !== null && _option$data$displayN !== void 0 ? _option$data$displayN : false;
|
|
113
|
+
};
|
|
97
114
|
var _default = exports.default = UserEditType;
|
|
@@ -40,6 +40,11 @@ var avatarWrapperStyles = (0, _primitives.xcss)({
|
|
|
40
40
|
var widthObserverWrapperStyles = (0, _primitives.xcss)({
|
|
41
41
|
position: 'relative'
|
|
42
42
|
});
|
|
43
|
+
var labelWrapperStyles = (0, _react2.css)({
|
|
44
|
+
textOverflow: 'ellipsis',
|
|
45
|
+
whiteSpace: 'nowrap',
|
|
46
|
+
overflow: 'hidden'
|
|
47
|
+
});
|
|
43
48
|
|
|
44
49
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
|
|
45
50
|
var AvatarGroupWrapperStyles = _styled.default.div({
|
|
@@ -84,7 +89,9 @@ var UserType = function UserType(_ref) {
|
|
|
84
89
|
size: avatarSize || 'small',
|
|
85
90
|
src: avatarSource,
|
|
86
91
|
testId: "".concat(testId, "--avatar")
|
|
87
|
-
})),
|
|
92
|
+
})), (0, _react2.jsx)("span", {
|
|
93
|
+
css: labelWrapperStyles
|
|
94
|
+
}, children || displayName || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.userTypeMessages.userDefaultdisplayNameValue)));
|
|
88
95
|
} else {
|
|
89
96
|
var maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
|
|
90
97
|
var data = users.filter(function (user) {
|
|
@@ -10,7 +10,9 @@ var COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 4;
|
|
|
10
10
|
var keyBasedMinWidthMap = {
|
|
11
11
|
summary: COLUMN_BASE_WIDTH * 26,
|
|
12
12
|
status: COLUMN_BASE_WIDTH * 15,
|
|
13
|
-
priority: COLUMN_BASE_WIDTH * 12.5
|
|
13
|
+
priority: COLUMN_BASE_WIDTH * 12.5,
|
|
14
|
+
// 100px
|
|
15
|
+
assignee: COLUMN_BASE_WIDTH * 12.5
|
|
14
16
|
};
|
|
15
17
|
var getColumnMinWidth = exports.getColumnMinWidth = function getColumnMinWidth(key) {
|
|
16
18
|
return keyBasedMinWidthMap[key] || COLUMN_MIN_WIDTH;
|
|
@@ -17,7 +17,8 @@ const loadOptions = async (fetchInputs = {}, executeFetch) => {
|
|
|
17
17
|
};
|
|
18
18
|
export const useLoadOptions = ({
|
|
19
19
|
fetchInputs,
|
|
20
|
-
executeFetch
|
|
20
|
+
executeFetch,
|
|
21
|
+
emptyOption
|
|
21
22
|
}) => {
|
|
22
23
|
const [{
|
|
23
24
|
options,
|
|
@@ -39,7 +40,7 @@ export const useLoadOptions = ({
|
|
|
39
40
|
if (isMounted) {
|
|
40
41
|
setOptions({
|
|
41
42
|
isLoading: false,
|
|
42
|
-
options,
|
|
43
|
+
options: emptyOption ? [emptyOption, ...options] : options,
|
|
43
44
|
hasFailed: false
|
|
44
45
|
});
|
|
45
46
|
}
|
|
@@ -54,7 +55,7 @@ export const useLoadOptions = ({
|
|
|
54
55
|
return () => {
|
|
55
56
|
isMounted = false;
|
|
56
57
|
};
|
|
57
|
-
}, [fetchInputs, executeFetch, showErrorFlag]);
|
|
58
|
+
}, [fetchInputs, executeFetch, showErrorFlag, emptyOption]);
|
|
58
59
|
return {
|
|
59
60
|
options,
|
|
60
61
|
isLoading,
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
3
4
|
import { useDebouncedCallback } from 'use-debounce';
|
|
4
5
|
import Avatar, { AvatarItem } from '@atlaskit/avatar';
|
|
5
6
|
import Select from '@atlaskit/select';
|
|
7
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
6
8
|
import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
|
|
7
9
|
import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
|
|
8
10
|
import { useLoadOptions } from '../../../../hooks/useLoadOptions';
|
|
9
11
|
import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants';
|
|
10
12
|
import { USER_TYPE_TEST_ID } from '../../render-type/user';
|
|
13
|
+
import { userTypeMessages } from '../../render-type/user/messages';
|
|
11
14
|
import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
|
|
12
15
|
const UserEditType = props => {
|
|
13
16
|
var _currentValue$values;
|
|
@@ -21,13 +24,22 @@ const UserEditType = props => {
|
|
|
21
24
|
const [handleUserInputDebounced] = useDebouncedCallback(query => setFetchInputs({
|
|
22
25
|
query
|
|
23
26
|
}), SEARCH_DEBOUNCE_MS);
|
|
27
|
+
const {
|
|
28
|
+
formatMessage
|
|
29
|
+
} = useIntl();
|
|
30
|
+
const emptyUser = useMemo(() => ({
|
|
31
|
+
accountId: null,
|
|
32
|
+
displayName: formatMessage(userTypeMessages.userDefaultdisplayNameValue),
|
|
33
|
+
avatarUrls: {}
|
|
34
|
+
}), [formatMessage]);
|
|
24
35
|
const {
|
|
25
36
|
options,
|
|
26
37
|
isLoading,
|
|
27
38
|
hasFailed
|
|
28
39
|
} = useLoadOptions({
|
|
29
40
|
executeFetch,
|
|
30
|
-
fetchInputs
|
|
41
|
+
fetchInputs,
|
|
42
|
+
emptyOption: emptyUser
|
|
31
43
|
});
|
|
32
44
|
const experienceId = useDatasourceExperienceId();
|
|
33
45
|
useEffect(() => {
|
|
@@ -51,12 +63,14 @@ const UserEditType = props => {
|
|
|
51
63
|
options: options,
|
|
52
64
|
isLoading: isLoading,
|
|
53
65
|
testId: "inline-edit-user",
|
|
54
|
-
filterOption:
|
|
55
|
-
,
|
|
66
|
+
filterOption: filterOption,
|
|
67
|
+
menuPlacement: "auto",
|
|
56
68
|
onInputChange: handleUserInputDebounced,
|
|
57
69
|
defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
|
|
58
70
|
getOptionValue: option => option.atlassianUserId,
|
|
59
|
-
formatOptionLabel: option => /*#__PURE__*/React.createElement(
|
|
71
|
+
formatOptionLabel: option => /*#__PURE__*/React.createElement(Tooltip, {
|
|
72
|
+
content: option.displayName
|
|
73
|
+
}, /*#__PURE__*/React.createElement(AvatarItem, {
|
|
60
74
|
avatar: /*#__PURE__*/React.createElement(Avatar, {
|
|
61
75
|
appearance: "circle",
|
|
62
76
|
size: 'small',
|
|
@@ -64,11 +78,15 @@ const UserEditType = props => {
|
|
|
64
78
|
testId: `${USER_TYPE_TEST_ID}--avatar--${option.atlassianUserId}`
|
|
65
79
|
}),
|
|
66
80
|
primaryText: option.displayName
|
|
67
|
-
}),
|
|
81
|
+
})),
|
|
68
82
|
onChange: e => props.setEditValues({
|
|
69
83
|
type: 'user',
|
|
70
84
|
values: e ? [e] : []
|
|
71
85
|
})
|
|
72
86
|
}));
|
|
73
87
|
};
|
|
88
|
+
const filterOption = (option, inputValue) => {
|
|
89
|
+
var _option$data$displayN, _option$data$displayN2;
|
|
90
|
+
return (_option$data$displayN = (_option$data$displayN2 = option.data.displayName) === null || _option$data$displayN2 === void 0 ? void 0 : _option$data$displayN2.toLowerCase().includes(inputValue.toLowerCase())) !== null && _option$data$displayN !== void 0 ? _option$data$displayN : false;
|
|
91
|
+
};
|
|
74
92
|
export default UserEditType;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import React, { useState } from 'react';
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
8
|
+
import { css, jsx } from '@emotion/react';
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
10
|
import styled from '@emotion/styled';
|
|
11
11
|
import { FormattedMessage } from 'react-intl-next';
|
|
@@ -27,6 +27,11 @@ const avatarWrapperStyles = xcss({
|
|
|
27
27
|
const widthObserverWrapperStyles = xcss({
|
|
28
28
|
position: 'relative'
|
|
29
29
|
});
|
|
30
|
+
const labelWrapperStyles = css({
|
|
31
|
+
textOverflow: 'ellipsis',
|
|
32
|
+
whiteSpace: 'nowrap',
|
|
33
|
+
overflow: 'hidden'
|
|
34
|
+
});
|
|
30
35
|
|
|
31
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
|
|
32
37
|
const AvatarGroupWrapperStyles = styled.div({
|
|
@@ -68,7 +73,9 @@ const UserType = ({
|
|
|
68
73
|
size: avatarSize || 'small',
|
|
69
74
|
src: avatarSource,
|
|
70
75
|
testId: `${testId}--avatar`
|
|
71
|
-
})),
|
|
76
|
+
})), jsx("span", {
|
|
77
|
+
css: labelWrapperStyles
|
|
78
|
+
}, children || displayName || jsx(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue)));
|
|
72
79
|
} else {
|
|
73
80
|
const maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
|
|
74
81
|
const data = users.filter(user => !!user.displayName).map(({
|
|
@@ -4,7 +4,9 @@ const COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 4;
|
|
|
4
4
|
const keyBasedMinWidthMap = {
|
|
5
5
|
summary: COLUMN_BASE_WIDTH * 26,
|
|
6
6
|
status: COLUMN_BASE_WIDTH * 15,
|
|
7
|
-
priority: COLUMN_BASE_WIDTH * 12.5
|
|
7
|
+
priority: COLUMN_BASE_WIDTH * 12.5,
|
|
8
|
+
// 100px
|
|
9
|
+
assignee: COLUMN_BASE_WIDTH * 12.5
|
|
8
10
|
};
|
|
9
11
|
export const getColumnMinWidth = key => {
|
|
10
12
|
return keyBasedMinWidthMap[key] || COLUMN_MIN_WIDTH;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
4
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
@@ -47,7 +48,8 @@ var loadOptions = /*#__PURE__*/function () {
|
|
|
47
48
|
}();
|
|
48
49
|
export var useLoadOptions = function useLoadOptions(_ref2) {
|
|
49
50
|
var fetchInputs = _ref2.fetchInputs,
|
|
50
|
-
executeFetch = _ref2.executeFetch
|
|
51
|
+
executeFetch = _ref2.executeFetch,
|
|
52
|
+
emptyOption = _ref2.emptyOption;
|
|
51
53
|
var _useState = useState({
|
|
52
54
|
isLoading: true,
|
|
53
55
|
options: [],
|
|
@@ -69,7 +71,7 @@ export var useLoadOptions = function useLoadOptions(_ref2) {
|
|
|
69
71
|
if (isMounted) {
|
|
70
72
|
setOptions({
|
|
71
73
|
isLoading: false,
|
|
72
|
-
options: options,
|
|
74
|
+
options: emptyOption ? [emptyOption].concat(_toConsumableArray(options)) : options,
|
|
73
75
|
hasFailed: false
|
|
74
76
|
});
|
|
75
77
|
}
|
|
@@ -84,7 +86,7 @@ export var useLoadOptions = function useLoadOptions(_ref2) {
|
|
|
84
86
|
return function () {
|
|
85
87
|
isMounted = false;
|
|
86
88
|
};
|
|
87
|
-
}, [fetchInputs, executeFetch, showErrorFlag]);
|
|
89
|
+
}, [fetchInputs, executeFetch, showErrorFlag, emptyOption]);
|
|
88
90
|
return {
|
|
89
91
|
options: options,
|
|
90
92
|
isLoading: isLoading,
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
-
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { useIntl } from 'react-intl-next';
|
|
4
5
|
import { useDebouncedCallback } from 'use-debounce';
|
|
5
6
|
import Avatar, { AvatarItem } from '@atlaskit/avatar';
|
|
6
7
|
import Select from '@atlaskit/select';
|
|
8
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
7
9
|
import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
|
|
8
10
|
import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
|
|
9
11
|
import { useLoadOptions } from '../../../../hooks/useLoadOptions';
|
|
10
12
|
import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants';
|
|
11
13
|
import { USER_TYPE_TEST_ID } from '../../render-type/user';
|
|
14
|
+
import { userTypeMessages } from '../../render-type/user/messages';
|
|
12
15
|
import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
|
|
13
16
|
var UserEditType = function UserEditType(props) {
|
|
14
17
|
var _currentValue$values;
|
|
@@ -27,9 +30,19 @@ var UserEditType = function UserEditType(props) {
|
|
|
27
30
|
}, SEARCH_DEBOUNCE_MS),
|
|
28
31
|
_useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
|
|
29
32
|
handleUserInputDebounced = _useDebouncedCallback2[0];
|
|
33
|
+
var _useIntl = useIntl(),
|
|
34
|
+
formatMessage = _useIntl.formatMessage;
|
|
35
|
+
var emptyUser = useMemo(function () {
|
|
36
|
+
return {
|
|
37
|
+
accountId: null,
|
|
38
|
+
displayName: formatMessage(userTypeMessages.userDefaultdisplayNameValue),
|
|
39
|
+
avatarUrls: {}
|
|
40
|
+
};
|
|
41
|
+
}, [formatMessage]);
|
|
30
42
|
var _useLoadOptions = useLoadOptions({
|
|
31
43
|
executeFetch: executeFetch,
|
|
32
|
-
fetchInputs: fetchInputs
|
|
44
|
+
fetchInputs: fetchInputs,
|
|
45
|
+
emptyOption: emptyUser
|
|
33
46
|
}),
|
|
34
47
|
options = _useLoadOptions.options,
|
|
35
48
|
isLoading = _useLoadOptions.isLoading,
|
|
@@ -56,17 +69,17 @@ var UserEditType = function UserEditType(props) {
|
|
|
56
69
|
options: options,
|
|
57
70
|
isLoading: isLoading,
|
|
58
71
|
testId: "inline-edit-user",
|
|
59
|
-
filterOption:
|
|
60
|
-
|
|
61
|
-
} // necessary, otherwise by default all options will be filtered out on user input
|
|
62
|
-
,
|
|
72
|
+
filterOption: filterOption,
|
|
73
|
+
menuPlacement: "auto",
|
|
63
74
|
onInputChange: handleUserInputDebounced,
|
|
64
75
|
defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
|
|
65
76
|
getOptionValue: function getOptionValue(option) {
|
|
66
77
|
return option.atlassianUserId;
|
|
67
78
|
},
|
|
68
79
|
formatOptionLabel: function formatOptionLabel(option) {
|
|
69
|
-
return /*#__PURE__*/React.createElement(
|
|
80
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
81
|
+
content: option.displayName
|
|
82
|
+
}, /*#__PURE__*/React.createElement(AvatarItem, {
|
|
70
83
|
avatar: /*#__PURE__*/React.createElement(Avatar, {
|
|
71
84
|
appearance: "circle",
|
|
72
85
|
size: 'small',
|
|
@@ -74,7 +87,7 @@ var UserEditType = function UserEditType(props) {
|
|
|
74
87
|
testId: "".concat(USER_TYPE_TEST_ID, "--avatar--").concat(option.atlassianUserId)
|
|
75
88
|
}),
|
|
76
89
|
primaryText: option.displayName
|
|
77
|
-
});
|
|
90
|
+
}));
|
|
78
91
|
},
|
|
79
92
|
onChange: function onChange(e) {
|
|
80
93
|
return props.setEditValues({
|
|
@@ -84,4 +97,8 @@ var UserEditType = function UserEditType(props) {
|
|
|
84
97
|
}
|
|
85
98
|
}));
|
|
86
99
|
};
|
|
100
|
+
var filterOption = function filterOption(option, inputValue) {
|
|
101
|
+
var _option$data$displayN, _option$data$displayN2;
|
|
102
|
+
return (_option$data$displayN = (_option$data$displayN2 = option.data.displayName) === null || _option$data$displayN2 === void 0 ? void 0 : _option$data$displayN2.toLowerCase().includes(inputValue.toLowerCase())) !== null && _option$data$displayN !== void 0 ? _option$data$displayN : false;
|
|
103
|
+
};
|
|
87
104
|
export default UserEditType;
|
|
@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
6
6
|
import React, { useState } from 'react';
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
|
-
import { jsx } from '@emotion/react';
|
|
9
|
+
import { css, jsx } from '@emotion/react';
|
|
10
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
11
|
import styled from '@emotion/styled';
|
|
12
12
|
import { FormattedMessage } from 'react-intl-next';
|
|
@@ -28,6 +28,11 @@ var avatarWrapperStyles = xcss({
|
|
|
28
28
|
var widthObserverWrapperStyles = xcss({
|
|
29
29
|
position: 'relative'
|
|
30
30
|
});
|
|
31
|
+
var labelWrapperStyles = css({
|
|
32
|
+
textOverflow: 'ellipsis',
|
|
33
|
+
whiteSpace: 'nowrap',
|
|
34
|
+
overflow: 'hidden'
|
|
35
|
+
});
|
|
31
36
|
|
|
32
37
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
|
|
33
38
|
var AvatarGroupWrapperStyles = styled.div({
|
|
@@ -72,7 +77,9 @@ var UserType = function UserType(_ref) {
|
|
|
72
77
|
size: avatarSize || 'small',
|
|
73
78
|
src: avatarSource,
|
|
74
79
|
testId: "".concat(testId, "--avatar")
|
|
75
|
-
})),
|
|
80
|
+
})), jsx("span", {
|
|
81
|
+
css: labelWrapperStyles
|
|
82
|
+
}, children || displayName || jsx(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue)));
|
|
76
83
|
} else {
|
|
77
84
|
var maxCount = width !== null ? getMaxUserCount(users.length, width) : 5;
|
|
78
85
|
var data = users.filter(function (user) {
|
|
@@ -4,7 +4,9 @@ var COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 4;
|
|
|
4
4
|
var keyBasedMinWidthMap = {
|
|
5
5
|
summary: COLUMN_BASE_WIDTH * 26,
|
|
6
6
|
status: COLUMN_BASE_WIDTH * 15,
|
|
7
|
-
priority: COLUMN_BASE_WIDTH * 12.5
|
|
7
|
+
priority: COLUMN_BASE_WIDTH * 12.5,
|
|
8
|
+
// 100px
|
|
9
|
+
assignee: COLUMN_BASE_WIDTH * 12.5
|
|
8
10
|
};
|
|
9
11
|
export var getColumnMinWidth = function getColumnMinWidth(key) {
|
|
10
12
|
return keyBasedMinWidthMap[key] || COLUMN_MIN_WIDTH;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { type AtomicActionExecuteRequest } from '@atlaskit/linking-types';
|
|
2
2
|
import type { ExecuteFetch } from '../state/actions';
|
|
3
|
-
export type LoadOptionsProps = {
|
|
3
|
+
export type LoadOptionsProps<T> = {
|
|
4
4
|
fetchInputs?: AtomicActionExecuteRequest['parameters']['inputs'];
|
|
5
5
|
executeFetch?: ExecuteFetch;
|
|
6
|
+
emptyOption?: T;
|
|
6
7
|
};
|
|
7
|
-
export declare const useLoadOptions: <T>({ fetchInputs, executeFetch }: LoadOptionsProps) => {
|
|
8
|
+
export declare const useLoadOptions: <T>({ fetchInputs, executeFetch, emptyOption }: LoadOptionsProps<T>) => {
|
|
8
9
|
options: T[];
|
|
9
10
|
isLoading: boolean;
|
|
10
11
|
hasFailed: boolean;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { type AtomicActionExecuteRequest } from '@atlaskit/linking-types';
|
|
2
2
|
import type { ExecuteFetch } from '../state/actions';
|
|
3
|
-
export type LoadOptionsProps = {
|
|
3
|
+
export type LoadOptionsProps<T> = {
|
|
4
4
|
fetchInputs?: AtomicActionExecuteRequest['parameters']['inputs'];
|
|
5
5
|
executeFetch?: ExecuteFetch;
|
|
6
|
+
emptyOption?: T;
|
|
6
7
|
};
|
|
7
|
-
export declare const useLoadOptions: <T>({ fetchInputs, executeFetch }: LoadOptionsProps) => {
|
|
8
|
+
export declare const useLoadOptions: <T>({ fetchInputs, executeFetch, emptyOption }: LoadOptionsProps<T>) => {
|
|
8
9
|
options: T[];
|
|
9
10
|
isLoading: boolean;
|
|
10
11
|
hasFailed: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/link-datasource",
|
|
3
|
-
"version": "3.13.
|
|
3
|
+
"version": "3.13.5",
|
|
4
4
|
"description": "UI Components to support linking platform dataset feature",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
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": "^46.1.0",
|
|
38
38
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
39
39
|
"@atlaskit/atlassian-context": "^0.0.2",
|
|
40
40
|
"@atlaskit/avatar": "^21.17.0",
|
|
@@ -70,14 +70,14 @@
|
|
|
70
70
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
71
71
|
"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
|
|
72
72
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
|
|
73
|
-
"@atlaskit/primitives": "^13.
|
|
73
|
+
"@atlaskit/primitives": "^13.3.0",
|
|
74
74
|
"@atlaskit/react-select": "^1.4.0",
|
|
75
75
|
"@atlaskit/select": "^18.6.0",
|
|
76
76
|
"@atlaskit/smart-card": "^31.0.0",
|
|
77
77
|
"@atlaskit/smart-user-picker": "6.11.2",
|
|
78
78
|
"@atlaskit/spinner": "^16.3.0",
|
|
79
79
|
"@atlaskit/tag": "^12.6.0",
|
|
80
|
-
"@atlaskit/textfield": "6.
|
|
80
|
+
"@atlaskit/textfield": "6.6.0",
|
|
81
81
|
"@atlaskit/theme": "^14.0.0",
|
|
82
82
|
"@atlaskit/tokens": "^2.3.0",
|
|
83
83
|
"@atlaskit/tooltip": "^18.9.0",
|