@atlaskit/link-datasource 3.9.1 → 3.10.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 +11 -0
- package/dist/cjs/hooks/useDatasourceTableFlag.js +12 -3
- package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js +134 -0
- package/dist/cjs/ui/issue-like-table/edit-type/index.js +25 -8
- package/dist/cjs/ui/issue-like-table/edit-type/status/index.js +7 -1
- package/dist/cjs/ui/issue-like-table/messages.js +10 -0
- package/dist/cjs/ui/issue-like-table/render-type/icon/index.js +5 -0
- package/dist/cjs/ui/issue-like-table/render-type/index.js +5 -1
- package/dist/cjs/ui/issue-like-table/render-type/new-icon/index.js +25 -0
- package/dist/cjs/ui/issue-like-table/shared-components/icon/index.js +42 -0
- package/dist/es2019/hooks/useDatasourceTableFlag.js +12 -3
- package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js +94 -0
- package/dist/es2019/ui/issue-like-table/edit-type/index.js +19 -6
- package/dist/es2019/ui/issue-like-table/edit-type/status/index.js +8 -1
- package/dist/es2019/ui/issue-like-table/messages.js +10 -0
- package/dist/es2019/ui/issue-like-table/render-type/icon/index.js +5 -0
- package/dist/es2019/ui/issue-like-table/render-type/index.js +3 -1
- package/dist/es2019/ui/issue-like-table/render-type/new-icon/index.js +18 -0
- package/dist/es2019/ui/issue-like-table/shared-components/icon/index.js +36 -0
- package/dist/esm/hooks/useDatasourceTableFlag.js +12 -3
- package/dist/esm/ui/issue-like-table/edit-type/icon/index.js +124 -0
- package/dist/esm/ui/issue-like-table/edit-type/index.js +25 -8
- package/dist/esm/ui/issue-like-table/edit-type/status/index.js +7 -1
- package/dist/esm/ui/issue-like-table/messages.js +10 -0
- package/dist/esm/ui/issue-like-table/render-type/icon/index.js +5 -0
- package/dist/esm/ui/issue-like-table/render-type/index.js +5 -1
- package/dist/esm/ui/issue-like-table/render-type/new-icon/index.js +18 -0
- package/dist/esm/ui/issue-like-table/shared-components/icon/index.js +35 -0
- package/dist/types/hooks/useDatasourceTableFlag.d.ts +1 -0
- package/dist/types/ui/issue-like-table/edit-type/icon/index.d.ts +14 -0
- package/dist/types/ui/issue-like-table/edit-type/index.d.ts +2 -1
- package/dist/types/ui/issue-like-table/messages.d.ts +10 -0
- package/dist/types/ui/issue-like-table/render-type/icon/index.d.ts +4 -0
- package/dist/types/ui/issue-like-table/render-type/new-icon/index.d.ts +9 -0
- package/dist/types/ui/issue-like-table/shared-components/icon/index.d.ts +23 -0
- package/dist/types/ui/issue-like-table/types.d.ts +7 -0
- package/dist/types-ts4.5/hooks/useDatasourceTableFlag.d.ts +1 -0
- package/dist/types-ts4.5/ui/issue-like-table/edit-type/icon/index.d.ts +14 -0
- package/dist/types-ts4.5/ui/issue-like-table/edit-type/index.d.ts +2 -1
- package/dist/types-ts4.5/ui/issue-like-table/messages.d.ts +10 -0
- package/dist/types-ts4.5/ui/issue-like-table/render-type/icon/index.d.ts +4 -0
- package/dist/types-ts4.5/ui/issue-like-table/render-type/new-icon/index.d.ts +9 -0
- package/dist/types-ts4.5/ui/issue-like-table/shared-components/icon/index.d.ts +23 -0
- package/dist/types-ts4.5/ui/issue-like-table/types.d.ts +7 -0
- package/package.json +4 -1
|
@@ -18,6 +18,11 @@ const textWrapperStyles = xcss({
|
|
|
18
18
|
});
|
|
19
19
|
export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
|
|
20
20
|
export const ICON_TYPE_TEXT_TEST_ID = `${ICON_TYPE_TEST_ID}-text`;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated: To be cleaned up and replaced with new-icon after
|
|
24
|
+
* `platform-datasources-enable-two-way-sync-priority` rollout.
|
|
25
|
+
*/
|
|
21
26
|
const IconRenderType = ({
|
|
22
27
|
label,
|
|
23
28
|
text,
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
import BooleanRenderType from './boolean';
|
|
4
5
|
import DateTimeRenderType, { getFormattedDate } from './date-time';
|
|
5
6
|
import IconRenderType from './icon';
|
|
6
7
|
import LinkRenderType from './link';
|
|
8
|
+
import NewIconRenderType from './new-icon';
|
|
7
9
|
import NumberRenderType from './number';
|
|
8
10
|
import RichTextRenderType, { parseRichText } from './richtext';
|
|
9
11
|
import StatusRenderType from './status';
|
|
@@ -60,7 +62,7 @@ export const renderType = item => {
|
|
|
60
62
|
display: "datetime"
|
|
61
63
|
}));
|
|
62
64
|
case 'icon':
|
|
63
|
-
return item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
|
|
65
|
+
return fg('platform-datasources-enable-two-way-sync-priority') ? item.values.map(iconValue => /*#__PURE__*/React.createElement(NewIconRenderType, iconValue)) : item.values.map(iconValue => /*#__PURE__*/React.createElement(IconRenderType, iconValue));
|
|
64
66
|
case 'link':
|
|
65
67
|
return item.values.map(linkValue => /*#__PURE__*/React.createElement(LinkRenderType, _extends({
|
|
66
68
|
key: linkValue === null || linkValue === void 0 ? void 0 : linkValue.url
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SharedIconComponent } from '../../shared-components/icon';
|
|
3
|
+
export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
|
|
4
|
+
export const ICON_TYPE_TEXT_TEST_ID = `${ICON_TYPE_TEST_ID}-text`;
|
|
5
|
+
const IconRenderType = ({
|
|
6
|
+
label,
|
|
7
|
+
text,
|
|
8
|
+
source,
|
|
9
|
+
testId = ICON_TYPE_TEST_ID
|
|
10
|
+
}) => {
|
|
11
|
+
return /*#__PURE__*/React.createElement(SharedIconComponent, {
|
|
12
|
+
testId: testId,
|
|
13
|
+
iconUrl: source,
|
|
14
|
+
label: label,
|
|
15
|
+
text: text
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
export default IconRenderType;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, Flex, Inline, xcss } from '@atlaskit/primitives';
|
|
3
|
+
const labelStyles = xcss({
|
|
4
|
+
overflow: 'hidden',
|
|
5
|
+
textOverflow: 'ellipsis',
|
|
6
|
+
width: '100%'
|
|
7
|
+
});
|
|
8
|
+
/**
|
|
9
|
+
* Renders a icon and label.
|
|
10
|
+
* If the text is undefined, render the capitalised label.
|
|
11
|
+
*/
|
|
12
|
+
export function SharedIconComponent({
|
|
13
|
+
iconUrl,
|
|
14
|
+
label,
|
|
15
|
+
text,
|
|
16
|
+
testId
|
|
17
|
+
}) {
|
|
18
|
+
const displayText = text === undefined || text === '' ? label ? label.charAt(0).toUpperCase() + label.slice(1) : undefined : text;
|
|
19
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
20
|
+
gap: "space.100",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
testId: testId
|
|
23
|
+
}, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("img", {
|
|
24
|
+
src: iconUrl,
|
|
25
|
+
alt: label
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
27
|
+
,
|
|
28
|
+
style: {
|
|
29
|
+
minWidth: '24px',
|
|
30
|
+
maxWidth: '24px'
|
|
31
|
+
} // having just width: '24px' shrinks it when table width is reduced
|
|
32
|
+
})), displayText && /*#__PURE__*/React.createElement(Box, {
|
|
33
|
+
xcss: labelStyles,
|
|
34
|
+
testId: `${testId}-text`
|
|
35
|
+
}, displayText));
|
|
36
|
+
}
|
|
@@ -16,7 +16,7 @@ var getErrorReason = function getErrorReason(status) {
|
|
|
16
16
|
return 'request_failed';
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
var
|
|
19
|
+
var getExecuteActionErrorMessage = function getExecuteActionErrorMessage(status) {
|
|
20
20
|
switch (status) {
|
|
21
21
|
case 403:
|
|
22
22
|
return {
|
|
@@ -30,6 +30,15 @@ var getGenericErrorMessage = function getGenericErrorMessage(status) {
|
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
+
var getFetchActionErrorMessage = function getFetchActionErrorMessage(status) {
|
|
34
|
+
switch (status) {
|
|
35
|
+
default:
|
|
36
|
+
return {
|
|
37
|
+
title: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.fetchActionErrorGenericTitle),
|
|
38
|
+
description: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.fetchActionErrorGenericDescription)
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
};
|
|
33
42
|
export var useDatasourceTableFlag = function useDatasourceTableFlag(options) {
|
|
34
43
|
var _useFlags = useFlags(),
|
|
35
44
|
showFlag = _useFlags.showFlag;
|
|
@@ -45,11 +54,11 @@ export var useDatasourceTableFlag = function useDatasourceTableFlag(options) {
|
|
|
45
54
|
}),
|
|
46
55
|
id: uuid(),
|
|
47
56
|
isAutoDismiss: true
|
|
48
|
-
},
|
|
57
|
+
}, options !== null && options !== void 0 && options.isFetchAction ? getFetchActionErrorMessage(args === null || args === void 0 ? void 0 : args.status) : getExecuteActionErrorMessage(args === null || args === void 0 ? void 0 : args.status)), args));
|
|
49
58
|
fireEvent('ui.error.shown.inlineEdit', {
|
|
50
59
|
reason: getErrorReason(args === null || args === void 0 ? void 0 : args.status)
|
|
51
60
|
});
|
|
52
|
-
}, [fireEvent, showFlag]);
|
|
61
|
+
}, [fireEvent, options === null || options === void 0 ? void 0 : options.isFetchAction, showFlag]);
|
|
53
62
|
return {
|
|
54
63
|
showErrorFlag: showErrorFlag
|
|
55
64
|
};
|
|
@@ -0,0 +1,124 @@
|
|
|
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 { ActionOperationStatus } from '@atlaskit/linking-types';
|
|
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
|
+
import { SharedIconComponent } from '../../shared-components/icon';
|
|
12
|
+
/**
|
|
13
|
+
* Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
|
|
14
|
+
*/
|
|
15
|
+
var PriorityEditType = function PriorityEditType(props) {
|
|
16
|
+
var _currentValue$values;
|
|
17
|
+
var currentValue = props.currentValue,
|
|
18
|
+
executeFetch = props.executeFetch;
|
|
19
|
+
var _usePriorityOptions = usePriorityOptions(currentValue, executeFetch),
|
|
20
|
+
options = _usePriorityOptions.options,
|
|
21
|
+
isLoading = _usePriorityOptions.isLoading;
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
|
|
23
|
+
testId: "inline-edit-priority",
|
|
24
|
+
autoFocus: true,
|
|
25
|
+
defaultMenuIsOpen: true,
|
|
26
|
+
blurInputOnSelect: true,
|
|
27
|
+
getOptionValue: function getOptionValue(option) {
|
|
28
|
+
return option.label || '';
|
|
29
|
+
},
|
|
30
|
+
options: options,
|
|
31
|
+
isLoading: isLoading,
|
|
32
|
+
defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
|
|
33
|
+
filterOption: filterOption,
|
|
34
|
+
formatOptionLabel: function formatOptionLabel(_ref) {
|
|
35
|
+
var source = _ref.source,
|
|
36
|
+
label = _ref.label,
|
|
37
|
+
text = _ref.text;
|
|
38
|
+
return /*#__PURE__*/React.createElement(SharedIconComponent, {
|
|
39
|
+
iconUrl: source,
|
|
40
|
+
text: text,
|
|
41
|
+
label: label,
|
|
42
|
+
testId: "inline-edit-priority-option-".concat(label)
|
|
43
|
+
});
|
|
44
|
+
},
|
|
45
|
+
onChange: function onChange(e) {
|
|
46
|
+
return props.setEditValues({
|
|
47
|
+
type: 'icon',
|
|
48
|
+
values: e ? [e] : []
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
})));
|
|
52
|
+
};
|
|
53
|
+
var filterOption = function filterOption(option, inputValue) {
|
|
54
|
+
return option.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
55
|
+
};
|
|
56
|
+
var usePriorityOptions = function usePriorityOptions(currentValue, executeFetch) {
|
|
57
|
+
var _useState = useState({
|
|
58
|
+
isLoading: true,
|
|
59
|
+
options: []
|
|
60
|
+
}),
|
|
61
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
62
|
+
_useState2$ = _useState2[0],
|
|
63
|
+
options = _useState2$.options,
|
|
64
|
+
isLoading = _useState2$.isLoading,
|
|
65
|
+
setOptions = _useState2[1];
|
|
66
|
+
useEffect(function () {
|
|
67
|
+
var isMounted = true;
|
|
68
|
+
loadOptions(currentValue, executeFetch).then(function (options) {
|
|
69
|
+
if (isMounted) {
|
|
70
|
+
setOptions({
|
|
71
|
+
isLoading: false,
|
|
72
|
+
options: options
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
return function () {
|
|
77
|
+
isMounted = false;
|
|
78
|
+
};
|
|
79
|
+
}, [currentValue, executeFetch]);
|
|
80
|
+
return {
|
|
81
|
+
options: options,
|
|
82
|
+
isLoading: isLoading
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Load options for the select
|
|
88
|
+
*/
|
|
89
|
+
var loadOptions = /*#__PURE__*/function () {
|
|
90
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_currentValue, executeFetch) {
|
|
91
|
+
var _yield$executeFetch, operationStatus, entities;
|
|
92
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
93
|
+
while (1) switch (_context.prev = _context.next) {
|
|
94
|
+
case 0:
|
|
95
|
+
if (executeFetch) {
|
|
96
|
+
_context.next = 2;
|
|
97
|
+
break;
|
|
98
|
+
}
|
|
99
|
+
return _context.abrupt("return", []);
|
|
100
|
+
case 2:
|
|
101
|
+
_context.next = 4;
|
|
102
|
+
return executeFetch({});
|
|
103
|
+
case 4:
|
|
104
|
+
_yield$executeFetch = _context.sent;
|
|
105
|
+
operationStatus = _yield$executeFetch.operationStatus;
|
|
106
|
+
entities = _yield$executeFetch.entities;
|
|
107
|
+
if (!(operationStatus === ActionOperationStatus.SUCCESS && entities)) {
|
|
108
|
+
_context.next = 9;
|
|
109
|
+
break;
|
|
110
|
+
}
|
|
111
|
+
return _context.abrupt("return", entities);
|
|
112
|
+
case 9:
|
|
113
|
+
return _context.abrupt("return", []);
|
|
114
|
+
case 10:
|
|
115
|
+
case "end":
|
|
116
|
+
return _context.stop();
|
|
117
|
+
}
|
|
118
|
+
}, _callee);
|
|
119
|
+
}));
|
|
120
|
+
return function loadOptions(_x, _x2) {
|
|
121
|
+
return _ref2.apply(this, arguments);
|
|
122
|
+
};
|
|
123
|
+
}();
|
|
124
|
+
export default PriorityEditType;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
1
3
|
import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
|
|
2
4
|
import _extends from "@babel/runtime/helpers/extends";
|
|
5
|
+
var _excluded = ["value"];
|
|
3
6
|
import React from 'react';
|
|
4
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import PriorityEditType from './icon';
|
|
5
9
|
import StatusEditType from './status';
|
|
6
10
|
import TextEditType, { toTextValue } from './text';
|
|
7
11
|
|
|
@@ -25,12 +29,13 @@ export var editType = function editType(_ref) {
|
|
|
25
29
|
}));
|
|
26
30
|
}
|
|
27
31
|
};
|
|
28
|
-
case '
|
|
32
|
+
case 'icon':
|
|
29
33
|
return {
|
|
30
34
|
defaultValue: toTextValue(defaultValue),
|
|
31
35
|
editView: function editView(_ref3) {
|
|
32
|
-
var
|
|
33
|
-
|
|
36
|
+
var value = _ref3.value,
|
|
37
|
+
fieldProps = _objectWithoutProperties(_ref3, _excluded);
|
|
38
|
+
return /*#__PURE__*/React.createElement(PriorityEditType, _extends({}, fieldProps, {
|
|
34
39
|
currentValue: currentValue,
|
|
35
40
|
setEditValues: setEditValues,
|
|
36
41
|
id: ACTIVE_INLINE_EDIT_ID,
|
|
@@ -38,17 +43,29 @@ export var editType = function editType(_ref) {
|
|
|
38
43
|
}));
|
|
39
44
|
}
|
|
40
45
|
};
|
|
41
|
-
|
|
46
|
+
case 'status':
|
|
42
47
|
return {
|
|
43
|
-
defaultValue:
|
|
44
|
-
editView: function editView() {
|
|
45
|
-
|
|
48
|
+
defaultValue: toTextValue(defaultValue),
|
|
49
|
+
editView: function editView(_ref4) {
|
|
50
|
+
var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
|
|
51
|
+
return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
|
|
52
|
+
currentValue: currentValue,
|
|
53
|
+
setEditValues: setEditValues,
|
|
54
|
+
id: ACTIVE_INLINE_EDIT_ID,
|
|
55
|
+
executeFetch: executeFetch
|
|
56
|
+
}));
|
|
46
57
|
}
|
|
47
58
|
};
|
|
48
59
|
}
|
|
60
|
+
return {
|
|
61
|
+
defaultValue: '',
|
|
62
|
+
editView: function editView() {
|
|
63
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
49
66
|
};
|
|
50
67
|
export var isEditTypeSupported = function isEditTypeSupported(type) {
|
|
51
|
-
var supportedEditType = fg('platform-datasources-enable-two-way-sync-statuses') ? ['
|
|
68
|
+
var supportedEditType = ['string'].concat(_toConsumableArray(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), _toConsumableArray(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : []));
|
|
52
69
|
return supportedEditType.includes(type);
|
|
53
70
|
};
|
|
54
71
|
export var isEditTypeSelectable = function isEditTypeSelectable(type) {
|
|
@@ -8,6 +8,7 @@ import Lozenge from '@atlaskit/lozenge';
|
|
|
8
8
|
import Select from '@atlaskit/select';
|
|
9
9
|
import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
|
|
10
10
|
import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
|
|
11
|
+
import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
|
|
11
12
|
import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
|
|
12
13
|
var StatusEditType = function StatusEditType(props) {
|
|
13
14
|
var _currentValue$values;
|
|
@@ -77,6 +78,10 @@ var useStatusOptions = function useStatusOptions(_ref) {
|
|
|
77
78
|
isLoading = _useState2$.isLoading,
|
|
78
79
|
hasFailed = _useState2$.hasFailed,
|
|
79
80
|
setOptions = _useState2[1];
|
|
81
|
+
var _useDatasourceTableFl = useDatasourceTableFlag({
|
|
82
|
+
isFetchAction: true
|
|
83
|
+
}),
|
|
84
|
+
showErrorFlag = _useDatasourceTableFl.showErrorFlag;
|
|
80
85
|
useEffect(function () {
|
|
81
86
|
var isMounted = true;
|
|
82
87
|
loadOptions(fetchInputs, executeFetch).then(function (options) {
|
|
@@ -88,6 +93,7 @@ var useStatusOptions = function useStatusOptions(_ref) {
|
|
|
88
93
|
});
|
|
89
94
|
}
|
|
90
95
|
}).catch(function (err) {
|
|
96
|
+
showErrorFlag();
|
|
91
97
|
setOptions({
|
|
92
98
|
isLoading: false,
|
|
93
99
|
options: [],
|
|
@@ -97,7 +103,7 @@ var useStatusOptions = function useStatusOptions(_ref) {
|
|
|
97
103
|
return function () {
|
|
98
104
|
isMounted = false;
|
|
99
105
|
};
|
|
100
|
-
}, [fetchInputs, executeFetch]);
|
|
106
|
+
}, [fetchInputs, executeFetch, showErrorFlag]);
|
|
101
107
|
return {
|
|
102
108
|
options: options,
|
|
103
109
|
isLoading: isLoading,
|
|
@@ -20,6 +20,16 @@ export var issueLikeTableMessages = defineMessages({
|
|
|
20
20
|
description: 'Generic error message title shown when updating issue field fails',
|
|
21
21
|
defaultMessage: 'Something went wrong'
|
|
22
22
|
},
|
|
23
|
+
fetchActionErrorGenericDescription: {
|
|
24
|
+
id: 'linkDataSource.issue-line-table.fetch-action-error-generic-description',
|
|
25
|
+
description: 'Generic error message description shown when fetching inline edit dropdown field fails',
|
|
26
|
+
defaultMessage: 'Wait a few minutes, then try again. Check your project settings or contact support if this keeps happening.'
|
|
27
|
+
},
|
|
28
|
+
fetchActionErrorGenericTitle: {
|
|
29
|
+
id: 'linkDataSource.issue-line-table.fetch-action-error-generic-title',
|
|
30
|
+
description: 'Generic error message title shown when fetching inline edit dropdown field fails',
|
|
31
|
+
defaultMessage: 'We’re having trouble fetching options'
|
|
32
|
+
},
|
|
23
33
|
wrapText: {
|
|
24
34
|
id: 'linkDataSource.issue-line-table.wrap-text',
|
|
25
35
|
description: 'Table header Dropdown item for making whole column to wrap text',
|
|
@@ -18,6 +18,11 @@ var textWrapperStyles = xcss({
|
|
|
18
18
|
});
|
|
19
19
|
export var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
|
|
20
20
|
export var ICON_TYPE_TEXT_TEST_ID = "".concat(ICON_TYPE_TEST_ID, "-text");
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated: To be cleaned up and replaced with new-icon after
|
|
24
|
+
* `platform-datasources-enable-two-way-sync-priority` rollout.
|
|
25
|
+
*/
|
|
21
26
|
var IconRenderType = function IconRenderType(_ref) {
|
|
22
27
|
var label = _ref.label,
|
|
23
28
|
text = _ref.text,
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
import BooleanRenderType from './boolean';
|
|
4
5
|
import DateTimeRenderType, { getFormattedDate } from './date-time';
|
|
5
6
|
import IconRenderType from './icon';
|
|
6
7
|
import LinkRenderType from './link';
|
|
8
|
+
import NewIconRenderType from './new-icon';
|
|
7
9
|
import NumberRenderType from './number';
|
|
8
10
|
import RichTextRenderType, { parseRichText } from './richtext';
|
|
9
11
|
import StatusRenderType from './status';
|
|
@@ -65,7 +67,9 @@ export var renderType = function renderType(item) {
|
|
|
65
67
|
});
|
|
66
68
|
});
|
|
67
69
|
case 'icon':
|
|
68
|
-
return item.values.map(function (iconValue) {
|
|
70
|
+
return fg('platform-datasources-enable-two-way-sync-priority') ? item.values.map(function (iconValue) {
|
|
71
|
+
return /*#__PURE__*/React.createElement(NewIconRenderType, iconValue);
|
|
72
|
+
}) : item.values.map(function (iconValue) {
|
|
69
73
|
return /*#__PURE__*/React.createElement(IconRenderType, iconValue);
|
|
70
74
|
});
|
|
71
75
|
case 'link':
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SharedIconComponent } from '../../shared-components/icon';
|
|
3
|
+
export var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
|
|
4
|
+
export var ICON_TYPE_TEXT_TEST_ID = "".concat(ICON_TYPE_TEST_ID, "-text");
|
|
5
|
+
var IconRenderType = function IconRenderType(_ref) {
|
|
6
|
+
var label = _ref.label,
|
|
7
|
+
text = _ref.text,
|
|
8
|
+
source = _ref.source,
|
|
9
|
+
_ref$testId = _ref.testId,
|
|
10
|
+
testId = _ref$testId === void 0 ? ICON_TYPE_TEST_ID : _ref$testId;
|
|
11
|
+
return /*#__PURE__*/React.createElement(SharedIconComponent, {
|
|
12
|
+
testId: testId,
|
|
13
|
+
iconUrl: source,
|
|
14
|
+
label: label,
|
|
15
|
+
text: text
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
export default IconRenderType;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, Flex, Inline, xcss } from '@atlaskit/primitives';
|
|
3
|
+
var labelStyles = xcss({
|
|
4
|
+
overflow: 'hidden',
|
|
5
|
+
textOverflow: 'ellipsis',
|
|
6
|
+
width: '100%'
|
|
7
|
+
});
|
|
8
|
+
/**
|
|
9
|
+
* Renders a icon and label.
|
|
10
|
+
* If the text is undefined, render the capitalised label.
|
|
11
|
+
*/
|
|
12
|
+
export function SharedIconComponent(_ref) {
|
|
13
|
+
var iconUrl = _ref.iconUrl,
|
|
14
|
+
label = _ref.label,
|
|
15
|
+
text = _ref.text,
|
|
16
|
+
testId = _ref.testId;
|
|
17
|
+
var displayText = text === undefined || text === '' ? label ? label.charAt(0).toUpperCase() + label.slice(1) : undefined : text;
|
|
18
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
19
|
+
gap: "space.100",
|
|
20
|
+
alignItems: "center",
|
|
21
|
+
testId: testId
|
|
22
|
+
}, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("img", {
|
|
23
|
+
src: iconUrl,
|
|
24
|
+
alt: label
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
26
|
+
,
|
|
27
|
+
style: {
|
|
28
|
+
minWidth: '24px',
|
|
29
|
+
maxWidth: '24px'
|
|
30
|
+
} // having just width: '24px' shrinks it when table width is reduced
|
|
31
|
+
})), displayText && /*#__PURE__*/React.createElement(Box, {
|
|
32
|
+
xcss: labelStyles,
|
|
33
|
+
testId: "".concat(testId, "-text")
|
|
34
|
+
}, displayText));
|
|
35
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type CreateFlagArgs } from '@atlaskit/flag';
|
|
2
2
|
interface DatasourceTableFlagOptions {
|
|
3
3
|
url?: string;
|
|
4
|
+
isFetchAction?: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
|
|
6
7
|
showErrorFlag: (args?: Partial<CreateFlagArgs> & {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FieldProps } from '@atlaskit/form';
|
|
3
|
+
import { type ExecuteFetch } from '../../../../state/actions';
|
|
4
|
+
import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
|
|
5
|
+
interface Props extends Omit<FieldProps<string>, 'value'> {
|
|
6
|
+
currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
|
|
7
|
+
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
8
|
+
executeFetch?: ExecuteFetch;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
|
|
12
|
+
*/
|
|
13
|
+
declare const PriorityEditType: (props: Props) => JSX.Element;
|
|
14
|
+
export default PriorityEditType;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type InlineEdit from '@atlaskit/inline-edit';
|
|
3
3
|
import type { DatasourceType } from '@atlaskit/linking-types';
|
|
4
|
+
import { type ExecuteFetch } from '../../../state/actions';
|
|
4
5
|
import { type DatasourceTypeWithOnlyValues } from '../types';
|
|
5
6
|
export declare const editType: ({ defaultValue, currentValue, setEditValues, executeFetch, }: {
|
|
6
7
|
defaultValue: DatasourceTypeWithOnlyValues;
|
|
7
8
|
currentValue: DatasourceTypeWithOnlyValues;
|
|
8
9
|
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
9
|
-
executeFetch?:
|
|
10
|
+
executeFetch?: ExecuteFetch | undefined;
|
|
10
11
|
}) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
|
|
11
12
|
export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
|
|
12
13
|
export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;
|
|
@@ -19,6 +19,16 @@ export declare const issueLikeTableMessages: {
|
|
|
19
19
|
description: string;
|
|
20
20
|
defaultMessage: string;
|
|
21
21
|
};
|
|
22
|
+
fetchActionErrorGenericDescription: {
|
|
23
|
+
id: string;
|
|
24
|
+
description: string;
|
|
25
|
+
defaultMessage: string;
|
|
26
|
+
};
|
|
27
|
+
fetchActionErrorGenericTitle: {
|
|
28
|
+
id: string;
|
|
29
|
+
description: string;
|
|
30
|
+
defaultMessage: string;
|
|
31
|
+
};
|
|
22
32
|
wrapText: {
|
|
23
33
|
id: string;
|
|
24
34
|
description: string;
|
|
@@ -5,5 +5,9 @@ interface IconProps extends Icon {
|
|
|
5
5
|
}
|
|
6
6
|
export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
|
|
7
7
|
export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated: To be cleaned up and replaced with new-icon after
|
|
10
|
+
* `platform-datasources-enable-two-way-sync-priority` rollout.
|
|
11
|
+
*/
|
|
8
12
|
declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
|
|
9
13
|
export default IconRenderType;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type Icon } from '@atlaskit/linking-types';
|
|
3
|
+
interface IconProps extends Icon {
|
|
4
|
+
testId?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
|
|
7
|
+
export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
|
|
8
|
+
declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
|
|
9
|
+
export default IconRenderType;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface SharedIconComponentProps {
|
|
3
|
+
/**
|
|
4
|
+
* URL or SVG for the priority icon
|
|
5
|
+
*/
|
|
6
|
+
iconUrl: string;
|
|
7
|
+
/**
|
|
8
|
+
* Text that labels the icon. Will not be capitalised.
|
|
9
|
+
*/
|
|
10
|
+
text?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Label.
|
|
13
|
+
* Used for icon alt.
|
|
14
|
+
*/
|
|
15
|
+
label?: string;
|
|
16
|
+
testId: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Renders a icon and label.
|
|
20
|
+
* If the text is undefined, render the capitalised label.
|
|
21
|
+
*/
|
|
22
|
+
export declare function SharedIconComponent({ iconUrl, label, text, testId }: SharedIconComponentProps): JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -9,6 +9,13 @@ export type DatasourceTypeWithOnlyValues = {
|
|
|
9
9
|
}>['value'][];
|
|
10
10
|
};
|
|
11
11
|
}[DatasourceType['type']];
|
|
12
|
+
/** Object typing a list of data objects for type K */
|
|
13
|
+
export type DatasourceTypeWithOnlyTypeValues<K> = {
|
|
14
|
+
type: K;
|
|
15
|
+
values: Extract<DatasourceType, {
|
|
16
|
+
type: K;
|
|
17
|
+
}>['value'][];
|
|
18
|
+
};
|
|
12
19
|
export type TableViewPropsRenderType = (item: DatasourceTypeWithOnlyValues) => React.ReactNode;
|
|
13
20
|
export interface ColumnSizesMap {
|
|
14
21
|
[key: string]: number;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type CreateFlagArgs } from '@atlaskit/flag';
|
|
2
2
|
interface DatasourceTableFlagOptions {
|
|
3
3
|
url?: string;
|
|
4
|
+
isFetchAction?: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
|
|
6
7
|
showErrorFlag: (args?: Partial<CreateFlagArgs> & {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FieldProps } from '@atlaskit/form';
|
|
3
|
+
import { type ExecuteFetch } from '../../../../state/actions';
|
|
4
|
+
import type { DatasourceTypeWithOnlyTypeValues, DatasourceTypeWithOnlyValues } from '../../types';
|
|
5
|
+
interface Props extends Omit<FieldProps<string>, 'value'> {
|
|
6
|
+
currentValue: DatasourceTypeWithOnlyTypeValues<'icon'>;
|
|
7
|
+
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
8
|
+
executeFetch?: ExecuteFetch;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
|
|
12
|
+
*/
|
|
13
|
+
declare const PriorityEditType: (props: Props) => JSX.Element;
|
|
14
|
+
export default PriorityEditType;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type InlineEdit from '@atlaskit/inline-edit';
|
|
3
3
|
import type { DatasourceType } from '@atlaskit/linking-types';
|
|
4
|
+
import { type ExecuteFetch } from '../../../state/actions';
|
|
4
5
|
import { type DatasourceTypeWithOnlyValues } from '../types';
|
|
5
6
|
export declare const editType: ({ defaultValue, currentValue, setEditValues, executeFetch, }: {
|
|
6
7
|
defaultValue: DatasourceTypeWithOnlyValues;
|
|
7
8
|
currentValue: DatasourceTypeWithOnlyValues;
|
|
8
9
|
setEditValues: React.Dispatch<React.SetStateAction<DatasourceTypeWithOnlyValues>>;
|
|
9
|
-
executeFetch?:
|
|
10
|
+
executeFetch?: ExecuteFetch | undefined;
|
|
10
11
|
}) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
|
|
11
12
|
export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;
|
|
12
13
|
export declare const isEditTypeSelectable: (type: DatasourceType['type']) => boolean;
|
|
@@ -19,6 +19,16 @@ export declare const issueLikeTableMessages: {
|
|
|
19
19
|
description: string;
|
|
20
20
|
defaultMessage: string;
|
|
21
21
|
};
|
|
22
|
+
fetchActionErrorGenericDescription: {
|
|
23
|
+
id: string;
|
|
24
|
+
description: string;
|
|
25
|
+
defaultMessage: string;
|
|
26
|
+
};
|
|
27
|
+
fetchActionErrorGenericTitle: {
|
|
28
|
+
id: string;
|
|
29
|
+
description: string;
|
|
30
|
+
defaultMessage: string;
|
|
31
|
+
};
|
|
22
32
|
wrapText: {
|
|
23
33
|
id: string;
|
|
24
34
|
description: string;
|
|
@@ -5,5 +5,9 @@ interface IconProps extends Icon {
|
|
|
5
5
|
}
|
|
6
6
|
export declare const ICON_TYPE_TEST_ID = "link-datasource-render-type--icon";
|
|
7
7
|
export declare const ICON_TYPE_TEXT_TEST_ID = "link-datasource-render-type--icon-text";
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated: To be cleaned up and replaced with new-icon after
|
|
10
|
+
* `platform-datasources-enable-two-way-sync-priority` rollout.
|
|
11
|
+
*/
|
|
8
12
|
declare const IconRenderType: ({ label, text, source, testId }: IconProps) => JSX.Element;
|
|
9
13
|
export default IconRenderType;
|