@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.
Files changed (45) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/hooks/useDatasourceTableFlag.js +12 -3
  3. package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js +134 -0
  4. package/dist/cjs/ui/issue-like-table/edit-type/index.js +25 -8
  5. package/dist/cjs/ui/issue-like-table/edit-type/status/index.js +7 -1
  6. package/dist/cjs/ui/issue-like-table/messages.js +10 -0
  7. package/dist/cjs/ui/issue-like-table/render-type/icon/index.js +5 -0
  8. package/dist/cjs/ui/issue-like-table/render-type/index.js +5 -1
  9. package/dist/cjs/ui/issue-like-table/render-type/new-icon/index.js +25 -0
  10. package/dist/cjs/ui/issue-like-table/shared-components/icon/index.js +42 -0
  11. package/dist/es2019/hooks/useDatasourceTableFlag.js +12 -3
  12. package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js +94 -0
  13. package/dist/es2019/ui/issue-like-table/edit-type/index.js +19 -6
  14. package/dist/es2019/ui/issue-like-table/edit-type/status/index.js +8 -1
  15. package/dist/es2019/ui/issue-like-table/messages.js +10 -0
  16. package/dist/es2019/ui/issue-like-table/render-type/icon/index.js +5 -0
  17. package/dist/es2019/ui/issue-like-table/render-type/index.js +3 -1
  18. package/dist/es2019/ui/issue-like-table/render-type/new-icon/index.js +18 -0
  19. package/dist/es2019/ui/issue-like-table/shared-components/icon/index.js +36 -0
  20. package/dist/esm/hooks/useDatasourceTableFlag.js +12 -3
  21. package/dist/esm/ui/issue-like-table/edit-type/icon/index.js +124 -0
  22. package/dist/esm/ui/issue-like-table/edit-type/index.js +25 -8
  23. package/dist/esm/ui/issue-like-table/edit-type/status/index.js +7 -1
  24. package/dist/esm/ui/issue-like-table/messages.js +10 -0
  25. package/dist/esm/ui/issue-like-table/render-type/icon/index.js +5 -0
  26. package/dist/esm/ui/issue-like-table/render-type/index.js +5 -1
  27. package/dist/esm/ui/issue-like-table/render-type/new-icon/index.js +18 -0
  28. package/dist/esm/ui/issue-like-table/shared-components/icon/index.js +35 -0
  29. package/dist/types/hooks/useDatasourceTableFlag.d.ts +1 -0
  30. package/dist/types/ui/issue-like-table/edit-type/icon/index.d.ts +14 -0
  31. package/dist/types/ui/issue-like-table/edit-type/index.d.ts +2 -1
  32. package/dist/types/ui/issue-like-table/messages.d.ts +10 -0
  33. package/dist/types/ui/issue-like-table/render-type/icon/index.d.ts +4 -0
  34. package/dist/types/ui/issue-like-table/render-type/new-icon/index.d.ts +9 -0
  35. package/dist/types/ui/issue-like-table/shared-components/icon/index.d.ts +23 -0
  36. package/dist/types/ui/issue-like-table/types.d.ts +7 -0
  37. package/dist/types-ts4.5/hooks/useDatasourceTableFlag.d.ts +1 -0
  38. package/dist/types-ts4.5/ui/issue-like-table/edit-type/icon/index.d.ts +14 -0
  39. package/dist/types-ts4.5/ui/issue-like-table/edit-type/index.d.ts +2 -1
  40. package/dist/types-ts4.5/ui/issue-like-table/messages.d.ts +10 -0
  41. package/dist/types-ts4.5/ui/issue-like-table/render-type/icon/index.d.ts +4 -0
  42. package/dist/types-ts4.5/ui/issue-like-table/render-type/new-icon/index.d.ts +9 -0
  43. package/dist/types-ts4.5/ui/issue-like-table/shared-components/icon/index.d.ts +23 -0
  44. package/dist/types-ts4.5/ui/issue-like-table/types.d.ts +7 -0
  45. 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 getGenericErrorMessage = function getGenericErrorMessage(status) {
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
- }, getGenericErrorMessage(args === null || args === void 0 ? void 0 : args.status)), args));
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 'status':
32
+ case 'icon':
29
33
  return {
30
34
  defaultValue: toTextValue(defaultValue),
31
35
  editView: function editView(_ref3) {
32
- var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
33
- return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
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
- default:
46
+ case 'status':
42
47
  return {
43
- defaultValue: '',
44
- editView: function editView() {
45
- return /*#__PURE__*/React.createElement(React.Fragment, null);
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') ? ['string', 'status'] : ['string'];
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?: (<E>(inputs: any) => Promise<E>) | undefined;
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?: (<E>(inputs: any) => Promise<E>) | undefined;
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;