@atlaskit/link-datasource 3.12.0 → 3.13.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 (40) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/hooks/useLoadOptions.js +100 -0
  3. package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js +16 -106
  4. package/dist/cjs/ui/issue-like-table/edit-type/index.js +26 -9
  5. package/dist/cjs/ui/issue-like-table/edit-type/status/index.js +10 -112
  6. package/dist/cjs/ui/issue-like-table/edit-type/text/index.js +4 -6
  7. package/dist/cjs/ui/issue-like-table/edit-type/user/index.js +97 -0
  8. package/dist/cjs/ui/issue-like-table/index.js +28 -26
  9. package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js +5 -2
  10. package/dist/es2019/hooks/useLoadOptions.js +63 -0
  11. package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js +13 -74
  12. package/dist/es2019/ui/issue-like-table/edit-type/index.js +24 -5
  13. package/dist/es2019/ui/issue-like-table/edit-type/status/index.js +8 -76
  14. package/dist/es2019/ui/issue-like-table/edit-type/text/index.js +5 -5
  15. package/dist/es2019/ui/issue-like-table/edit-type/user/index.js +74 -0
  16. package/dist/es2019/ui/issue-like-table/index.js +29 -27
  17. package/dist/es2019/ui/issue-like-table/table-cell-content/inline-edit.js +5 -2
  18. package/dist/esm/hooks/useLoadOptions.js +93 -0
  19. package/dist/esm/ui/issue-like-table/edit-type/icon/index.js +18 -107
  20. package/dist/esm/ui/issue-like-table/edit-type/index.js +25 -5
  21. package/dist/esm/ui/issue-like-table/edit-type/status/index.js +11 -113
  22. package/dist/esm/ui/issue-like-table/edit-type/text/index.js +3 -5
  23. package/dist/esm/ui/issue-like-table/edit-type/user/index.js +87 -0
  24. package/dist/esm/ui/issue-like-table/index.js +28 -26
  25. package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js +5 -2
  26. package/dist/types/hooks/useLoadOptions.d.ts +11 -0
  27. package/dist/types/ui/issue-like-table/edit-type/icon/index.d.ts +2 -2
  28. package/dist/types/ui/issue-like-table/edit-type/index.d.ts +1 -0
  29. package/dist/types/ui/issue-like-table/edit-type/status/index.d.ts +4 -4
  30. package/dist/types/ui/issue-like-table/edit-type/text/index.d.ts +2 -3
  31. package/dist/types/ui/issue-like-table/edit-type/user/index.d.ts +11 -0
  32. package/dist/types/ui/issue-like-table/types.d.ts +3 -0
  33. package/dist/types-ts4.5/hooks/useLoadOptions.d.ts +11 -0
  34. package/dist/types-ts4.5/ui/issue-like-table/edit-type/icon/index.d.ts +2 -2
  35. package/dist/types-ts4.5/ui/issue-like-table/edit-type/index.d.ts +1 -0
  36. package/dist/types-ts4.5/ui/issue-like-table/edit-type/status/index.d.ts +4 -4
  37. package/dist/types-ts4.5/ui/issue-like-table/edit-type/text/index.d.ts +2 -3
  38. package/dist/types-ts4.5/ui/issue-like-table/edit-type/user/index.d.ts +11 -0
  39. package/dist/types-ts4.5/ui/issue-like-table/types.d.ts +3 -0
  40. package/package.json +8 -5
@@ -692,36 +692,38 @@ export const IssueLikeDataTableView = ({
692
692
  shouldUseWidth,
693
693
  width
694
694
  });
695
-
696
695
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
697
- if (fg('platform-datasources-enable-two-way-sync')) {
698
- return jsx(InlineEditableTableCell, {
699
- key: cellKey,
700
- "data-testid": testId && `${testId}--cell-${cellIndex}`,
701
- colSpan: isEditable && isLastCell ? 2 : undefined
702
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
703
- ,
704
- style: loadingRowStyle,
705
- css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
706
- }, content);
707
- } else {
708
- // extra padding is required around skeleton loader to avoid vertical jumps when data loads
709
- if (key !== null && key !== void 0 && key.includes('loading')) {
710
- loadingRowStyle = {
711
- ...loadingRowStyle,
712
- paddingBlock: "var(--ds-space-100, 8px)"
713
- };
696
+ if (fg('enable_datasource_react_sweet_state')) {
697
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
698
+ if (fg('platform-datasources-enable-two-way-sync')) {
699
+ return jsx(InlineEditableTableCell, {
700
+ key: cellKey,
701
+ "data-testid": testId && `${testId}--cell-${cellIndex}`,
702
+ colSpan: isEditable && isLastCell ? 2 : undefined
703
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
704
+ ,
705
+ style: loadingRowStyle,
706
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
707
+ }, content);
714
708
  }
715
- return jsx(TableCell, {
716
- key: cellKey,
717
- "data-testid": testId && `${testId}--cell-${cellIndex}`,
718
- colSpan: isEditable && isLastCell ? 2 : undefined
719
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
720
- ,
721
- style: loadingRowStyle,
722
- css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
723
- }, content);
724
709
  }
710
+
711
+ // extra padding is required around skeleton loader to avoid vertical jumps when data loads
712
+ if (key !== null && key !== void 0 && key.includes('loading')) {
713
+ loadingRowStyle = {
714
+ ...loadingRowStyle,
715
+ paddingBlock: "var(--ds-space-100, 8px)"
716
+ };
717
+ }
718
+ return jsx(TableCell, {
719
+ key: cellKey,
720
+ "data-testid": testId && `${testId}--cell-${cellIndex}`,
721
+ colSpan: isEditable && isLastCell ? 2 : undefined
722
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
723
+ ,
724
+ style: loadingRowStyle,
725
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
726
+ }, content);
725
727
  }))))));
726
728
  return fg('platform-datasources-enable-two-way-sync') ? jsx(FlagsProvider, null, view) : view;
727
729
  };
@@ -14,14 +14,16 @@ const editContainerStyles = xcss({
14
14
  marginBlockStart: 'space.negative.100'
15
15
  });
16
16
  const getBackendUpdateValue = typedNewValue => {
17
- var _typedNewValue$values, _typedNewValue$values2;
17
+ var _typedNewValue$values, _typedNewValue$values2, _typedNewValue$values3;
18
18
  switch (typedNewValue.type) {
19
19
  case 'string':
20
20
  return typedNewValue.values[0] || '';
21
21
  case 'status':
22
22
  return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.transitionId) || '';
23
+ case 'user':
24
+ return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.atlassianUserId) || '';
23
25
  case 'icon':
24
- return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.id) || '';
26
+ return ((_typedNewValue$values3 = typedNewValue.values[0]) === null || _typedNewValue$values3 === void 0 ? void 0 : _typedNewValue$values3.id) || '';
25
27
  }
26
28
  throw new Error(`Datasource 2 way sync Backend update value not implemented for type ${typedNewValue.type}`);
27
29
  };
@@ -35,6 +37,7 @@ const mapUpdatedItem = (existingItem, columnKey, newValue) => {
35
37
  }
36
38
  };
37
39
  case 'status':
40
+ case 'user':
38
41
  case 'icon':
39
42
  return newValue.values[0] ? {
40
43
  ...existingItem,
@@ -0,0 +1,93 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
4
+ import { useEffect, useState } from 'react';
5
+ import { ActionOperationStatus } from '@atlaskit/linking-types';
6
+ import { useDatasourceTableFlag } from './useDatasourceTableFlag';
7
+ var loadOptions = /*#__PURE__*/function () {
8
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
9
+ var fetchInputs,
10
+ executeFetch,
11
+ result,
12
+ operationStatus,
13
+ entities,
14
+ _args = arguments;
15
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
16
+ while (1) switch (_context.prev = _context.next) {
17
+ case 0:
18
+ fetchInputs = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
19
+ executeFetch = _args.length > 1 ? _args[1] : undefined;
20
+ if (executeFetch) {
21
+ _context.next = 4;
22
+ break;
23
+ }
24
+ return _context.abrupt("return", []);
25
+ case 4:
26
+ _context.next = 6;
27
+ return executeFetch(fetchInputs);
28
+ case 6:
29
+ result = _context.sent;
30
+ operationStatus = result.operationStatus, entities = result.entities;
31
+ if (!(operationStatus === ActionOperationStatus.FAILURE)) {
32
+ _context.next = 10;
33
+ break;
34
+ }
35
+ throw new Error('Failed to fetch status options');
36
+ case 10:
37
+ return _context.abrupt("return", entities !== null && entities !== void 0 ? entities : []);
38
+ case 11:
39
+ case "end":
40
+ return _context.stop();
41
+ }
42
+ }, _callee);
43
+ }));
44
+ return function loadOptions() {
45
+ return _ref.apply(this, arguments);
46
+ };
47
+ }();
48
+ export var useLoadOptions = function useLoadOptions(_ref2) {
49
+ var fetchInputs = _ref2.fetchInputs,
50
+ executeFetch = _ref2.executeFetch;
51
+ var _useState = useState({
52
+ isLoading: true,
53
+ options: [],
54
+ hasFailed: false
55
+ }),
56
+ _useState2 = _slicedToArray(_useState, 2),
57
+ _useState2$ = _useState2[0],
58
+ options = _useState2$.options,
59
+ isLoading = _useState2$.isLoading,
60
+ hasFailed = _useState2$.hasFailed,
61
+ setOptions = _useState2[1];
62
+ var _useDatasourceTableFl = useDatasourceTableFlag({
63
+ isFetchAction: true
64
+ }),
65
+ showErrorFlag = _useDatasourceTableFl.showErrorFlag;
66
+ useEffect(function () {
67
+ var isMounted = true;
68
+ loadOptions(fetchInputs, executeFetch).then(function (options) {
69
+ if (isMounted) {
70
+ setOptions({
71
+ isLoading: false,
72
+ options: options,
73
+ hasFailed: false
74
+ });
75
+ }
76
+ }).catch(function (err) {
77
+ showErrorFlag();
78
+ setOptions({
79
+ isLoading: false,
80
+ options: [],
81
+ hasFailed: true
82
+ });
83
+ });
84
+ return function () {
85
+ isMounted = false;
86
+ };
87
+ }, [fetchInputs, executeFetch, showErrorFlag]);
88
+ return {
89
+ options: options,
90
+ isLoading: isLoading,
91
+ hasFailed: hasFailed
92
+ };
93
+ };
@@ -1,16 +1,13 @@
1
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
1
  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';
2
+ import React, { useEffect } from 'react';
3
+
7
4
  // FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
8
5
  // eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
9
6
 
10
7
  import Select from '@atlaskit/select';
11
8
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
12
9
  import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
13
- import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
10
+ import { useLoadOptions } from '../../../../hooks/useLoadOptions';
14
11
  import { SharedIconComponent } from '../../shared-components/icon';
15
12
  import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
16
13
  /**
@@ -20,10 +17,12 @@ var IconEditType = function IconEditType(props) {
20
17
  var _currentValue$values;
21
18
  var currentValue = props.currentValue,
22
19
  executeFetch = props.executeFetch;
23
- var _usePriorityOptions = usePriorityOptions(currentValue, executeFetch),
24
- options = _usePriorityOptions.options,
25
- isLoading = _usePriorityOptions.isLoading,
26
- hasFailed = _usePriorityOptions.hasFailed;
20
+ var _useLoadOptions = useLoadOptions({
21
+ executeFetch: executeFetch
22
+ }),
23
+ options = _useLoadOptions.options,
24
+ isLoading = _useLoadOptions.isLoading,
25
+ hasFailed = _useLoadOptions.hasFailed;
27
26
  var experienceId = useDatasourceExperienceId();
28
27
  useEffect(function () {
29
28
  if (!experienceId) {
@@ -39,18 +38,19 @@ var IconEditType = function IconEditType(props) {
39
38
  }, experienceId);
40
39
  }
41
40
  }, [experienceId, isLoading, hasFailed]);
42
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
43
- testId: "inline-edit-priority",
41
+ return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
44
42
  autoFocus: true,
45
- defaultMenuIsOpen: true,
46
43
  blurInputOnSelect: true,
47
- getOptionValue: function getOptionValue(option) {
48
- return option.text || '';
49
- },
44
+ defaultMenuIsOpen: true,
50
45
  options: options,
46
+ menuPlacement: "auto",
51
47
  isLoading: isLoading,
52
- defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
53
48
  filterOption: filterOption,
49
+ testId: "inline-edit-priority",
50
+ defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
51
+ getOptionValue: function getOptionValue(option) {
52
+ return option.text || '';
53
+ },
54
54
  formatOptionLabel: function formatOptionLabel(_ref) {
55
55
  var source = _ref.source,
56
56
  label = _ref.label,
@@ -68,98 +68,9 @@ var IconEditType = function IconEditType(props) {
68
68
  values: e ? [e] : []
69
69
  });
70
70
  }
71
- })));
71
+ }));
72
72
  };
73
73
  var filterOption = function filterOption(option, inputValue) {
74
74
  return option.label.toLowerCase().includes(inputValue.toLowerCase());
75
75
  };
76
- var usePriorityOptions = function usePriorityOptions(currentValue, executeFetch) {
77
- var _useState = useState({
78
- isLoading: true,
79
- options: [],
80
- hasFailed: false
81
- }),
82
- _useState2 = _slicedToArray(_useState, 2),
83
- _useState2$ = _useState2[0],
84
- options = _useState2$.options,
85
- isLoading = _useState2$.isLoading,
86
- hasFailed = _useState2$.hasFailed,
87
- setOptions = _useState2[1];
88
- var _useDatasourceTableFl = useDatasourceTableFlag({
89
- isFetchAction: true
90
- }),
91
- showErrorFlag = _useDatasourceTableFl.showErrorFlag;
92
- useEffect(function () {
93
- var isMounted = true;
94
- loadOptions(currentValue, executeFetch).then(function (options) {
95
- if (isMounted) {
96
- setOptions({
97
- isLoading: false,
98
- options: options,
99
- hasFailed: false
100
- });
101
- }
102
- }).catch(function (err) {
103
- showErrorFlag();
104
- setOptions({
105
- isLoading: false,
106
- options: [],
107
- hasFailed: true
108
- });
109
- });
110
- return function () {
111
- isMounted = false;
112
- };
113
- }, [currentValue, executeFetch, showErrorFlag]);
114
- return {
115
- options: options,
116
- isLoading: isLoading,
117
- hasFailed: hasFailed
118
- };
119
- };
120
-
121
- /**
122
- * Load options for the select
123
- */
124
- var loadOptions = /*#__PURE__*/function () {
125
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_currentValue, executeFetch) {
126
- var _yield$executeFetch, operationStatus, entities;
127
- return _regeneratorRuntime.wrap(function _callee$(_context) {
128
- while (1) switch (_context.prev = _context.next) {
129
- case 0:
130
- if (executeFetch) {
131
- _context.next = 2;
132
- break;
133
- }
134
- return _context.abrupt("return", []);
135
- case 2:
136
- _context.next = 4;
137
- return executeFetch({});
138
- case 4:
139
- _yield$executeFetch = _context.sent;
140
- operationStatus = _yield$executeFetch.operationStatus;
141
- entities = _yield$executeFetch.entities;
142
- if (!(operationStatus === ActionOperationStatus.FAILURE)) {
143
- _context.next = 9;
144
- break;
145
- }
146
- throw new Error('Failed to fetch icon options');
147
- case 9:
148
- if (!(operationStatus === ActionOperationStatus.SUCCESS && entities)) {
149
- _context.next = 11;
150
- break;
151
- }
152
- return _context.abrupt("return", entities);
153
- case 11:
154
- return _context.abrupt("return", []);
155
- case 12:
156
- case "end":
157
- return _context.stop();
158
- }
159
- }, _callee);
160
- }));
161
- return function loadOptions(_x, _x2) {
162
- return _ref2.apply(this, arguments);
163
- };
164
- }();
165
76
  export default IconEditType;
@@ -7,11 +7,13 @@ import React from 'react';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import IconEditType from './icon';
9
9
  import StatusEditType from './status';
10
- import TextEditType, { toTextValue } from './text';
10
+ import TextEditType from './text';
11
+ import UserEditType from './user';
11
12
 
12
13
  // This is used in editor-card-plugin to identify if any type of inline edit is active.
13
14
  var ACTIVE_INLINE_EDIT_ID = 'sllv-active-inline-edit';
14
15
  export var editType = function editType(_ref) {
16
+ var _toValueType, _value$atlassianUserI;
15
17
  var defaultValue = _ref.defaultValue,
16
18
  currentValue = _ref.currentValue,
17
19
  setEditValues = _ref.setEditValues,
@@ -19,7 +21,7 @@ export var editType = function editType(_ref) {
19
21
  switch (defaultValue.type) {
20
22
  case 'string':
21
23
  return {
22
- defaultValue: toTextValue(defaultValue),
24
+ defaultValue: (_toValueType = toValueType(defaultValue)) !== null && _toValueType !== void 0 ? _toValueType : '',
23
25
  editView: function editView(_ref2) {
24
26
  var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
25
27
  return /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
@@ -31,7 +33,7 @@ export var editType = function editType(_ref) {
31
33
  };
32
34
  case 'icon':
33
35
  return {
34
- defaultValue: toTextValue(defaultValue),
36
+ defaultValue: toValueType(defaultValue),
35
37
  editView: function editView(_ref3) {
36
38
  var value = _ref3.value,
37
39
  fieldProps = _objectWithoutProperties(_ref3, _excluded);
@@ -45,7 +47,7 @@ export var editType = function editType(_ref) {
45
47
  };
46
48
  case 'status':
47
49
  return {
48
- defaultValue: toTextValue(defaultValue),
50
+ defaultValue: toValueType(defaultValue),
49
51
  editView: function editView(_ref4) {
50
52
  var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
51
53
  return /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
@@ -56,6 +58,20 @@ export var editType = function editType(_ref) {
56
58
  }));
57
59
  }
58
60
  };
61
+ case 'user':
62
+ var value = toValueType(defaultValue);
63
+ return {
64
+ defaultValue: (_value$atlassianUserI = value === null || value === void 0 ? void 0 : value.atlassianUserId) !== null && _value$atlassianUserI !== void 0 ? _value$atlassianUserI : '',
65
+ editView: function editView(_ref5) {
66
+ var fieldProps = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
67
+ return /*#__PURE__*/React.createElement(UserEditType, _extends({}, fieldProps, {
68
+ currentValue: currentValue,
69
+ setEditValues: setEditValues,
70
+ id: ACTIVE_INLINE_EDIT_ID,
71
+ executeFetch: executeFetch
72
+ }));
73
+ }
74
+ };
59
75
  }
60
76
  return {
61
77
  defaultValue: '',
@@ -65,10 +81,14 @@ export var editType = function editType(_ref) {
65
81
  };
66
82
  };
67
83
  export var isEditTypeSupported = function isEditTypeSupported(type) {
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'] : []));
84
+ var supportedEditType = ['string'].concat(_toConsumableArray(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), _toConsumableArray(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : []), _toConsumableArray(fg('platform-datasources-enable-two-way-sync-assignee') ? ['user'] : []));
69
85
  return supportedEditType.includes(type);
70
86
  };
71
87
  export var isEditTypeSelectable = function isEditTypeSelectable(type) {
72
88
  var selectEditTypes = ['status', 'icon', 'user'];
73
89
  return selectEditTypes.includes(type);
90
+ };
91
+ export var toValueType = function toValueType(typeWithValues) {
92
+ var _typeWithValues$value;
93
+ return (_typeWithValues$value = typeWithValues.values) === null || _typeWithValues$value === void 0 ? void 0 : _typeWithValues$value[0];
74
94
  };
@@ -1,25 +1,21 @@
1
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
1
  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';
2
+ import React, { useEffect } from 'react';
7
3
  import Lozenge from '@atlaskit/lozenge';
8
4
  import Select from '@atlaskit/select';
9
5
  import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
10
6
  import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
11
- import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
7
+ import { useLoadOptions } from '../../../../hooks/useLoadOptions';
12
8
  import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
13
9
  var StatusEditType = function StatusEditType(props) {
14
10
  var _currentValue$values;
15
11
  var currentValue = props.currentValue,
16
12
  executeFetch = props.executeFetch;
17
- var _useStatusOptions = useStatusOptions({
13
+ var _useLoadOptions = useLoadOptions({
18
14
  executeFetch: executeFetch
19
15
  }),
20
- options = _useStatusOptions.options,
21
- isLoading = _useStatusOptions.isLoading,
22
- hasFailed = _useStatusOptions.hasFailed;
16
+ options = _useLoadOptions.options,
17
+ isLoading = _useLoadOptions.isLoading,
18
+ hasFailed = _useLoadOptions.hasFailed;
23
19
  var experienceId = useDatasourceExperienceId();
24
20
  useEffect(function () {
25
21
  if (!experienceId) {
@@ -36,18 +32,18 @@ var StatusEditType = function StatusEditType(props) {
36
32
  }
37
33
  }, [experienceId, isLoading, hasFailed]);
38
34
  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
39
- testId: "inline-edit-status",
40
35
  autoFocus: true,
36
+ options: options,
41
37
  defaultMenuIsOpen: true,
42
38
  blurInputOnSelect: true,
39
+ menuPlacement: "auto",
40
+ isLoading: isLoading,
41
+ filterOption: filterOption,
42
+ testId: "inline-edit-status",
43
43
  getOptionValue: function getOptionValue(option) {
44
44
  return option.text;
45
45
  },
46
- options: options,
47
- isLoading: isLoading,
48
46
  defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
49
- filterOption: filterOption,
50
- menuPlacement: "auto",
51
47
  formatOptionLabel: function formatOptionLabel(option) {
52
48
  return /*#__PURE__*/React.createElement(Lozenge, _extends({
53
49
  testId: "inline-edit-status-option-".concat(option.text)
@@ -64,102 +60,4 @@ var StatusEditType = function StatusEditType(props) {
64
60
  var filterOption = function filterOption(option, inputValue) {
65
61
  return option.data.text.toLowerCase().includes(inputValue.toLowerCase());
66
62
  };
67
- var useStatusOptions = function useStatusOptions(_ref) {
68
- var fetchInputs = _ref.fetchInputs,
69
- executeFetch = _ref.executeFetch;
70
- var _useState = useState({
71
- isLoading: true,
72
- options: [],
73
- hasFailed: false
74
- }),
75
- _useState2 = _slicedToArray(_useState, 2),
76
- _useState2$ = _useState2[0],
77
- options = _useState2$.options,
78
- isLoading = _useState2$.isLoading,
79
- hasFailed = _useState2$.hasFailed,
80
- setOptions = _useState2[1];
81
- var _useDatasourceTableFl = useDatasourceTableFlag({
82
- isFetchAction: true
83
- }),
84
- showErrorFlag = _useDatasourceTableFl.showErrorFlag;
85
- useEffect(function () {
86
- var isMounted = true;
87
- loadOptions(fetchInputs, executeFetch).then(function (options) {
88
- if (isMounted) {
89
- setOptions({
90
- isLoading: false,
91
- options: options,
92
- hasFailed: false
93
- });
94
- }
95
- }).catch(function (err) {
96
- showErrorFlag();
97
- setOptions({
98
- isLoading: false,
99
- options: [],
100
- hasFailed: true
101
- });
102
- });
103
- return function () {
104
- isMounted = false;
105
- };
106
- }, [fetchInputs, executeFetch, showErrorFlag]);
107
- return {
108
- options: options,
109
- isLoading: isLoading,
110
- hasFailed: hasFailed
111
- };
112
- };
113
- var loadOptions = /*#__PURE__*/function () {
114
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
115
- var fetchInputs,
116
- executeFetch,
117
- result,
118
- operationStatus,
119
- entities,
120
- _args = arguments;
121
- return _regeneratorRuntime.wrap(function _callee$(_context) {
122
- while (1) switch (_context.prev = _context.next) {
123
- case 0:
124
- fetchInputs = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
125
- executeFetch = _args.length > 1 ? _args[1] : undefined;
126
- if (!executeFetch) {
127
- _context.next = 11;
128
- break;
129
- }
130
- _context.next = 5;
131
- return executeFetch(fetchInputs);
132
- case 5:
133
- result = _context.sent;
134
- operationStatus = result.operationStatus, entities = result.entities;
135
- if (!(operationStatus === ActionOperationStatus.FAILURE)) {
136
- _context.next = 9;
137
- break;
138
- }
139
- throw new Error('Failed to fetch status options');
140
- case 9:
141
- if (!entities) {
142
- _context.next = 11;
143
- break;
144
- }
145
- return _context.abrupt("return", entities.map(function (entity) {
146
- return {
147
- id: entity.id,
148
- text: entity.text,
149
- style: entity.style,
150
- transitionId: entity.transitionId
151
- };
152
- }));
153
- case 11:
154
- return _context.abrupt("return", []);
155
- case 12:
156
- case "end":
157
- return _context.stop();
158
- }
159
- }, _callee);
160
- }));
161
- return function loadOptions() {
162
- return _ref2.apply(this, arguments);
163
- };
164
- }();
165
63
  export default StatusEditType;
@@ -4,12 +4,10 @@ import { Layering } from '@atlaskit/layering';
4
4
  import Textfield from '@atlaskit/textfield';
5
5
  import { succeedUfoExperience } from '../../../../analytics/ufoExperiences';
6
6
  import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
7
- export var toTextValue = function toTextValue(typeWithValues) {
8
- var _ref, _typeWithValues$value;
9
- return (_ref = (_typeWithValues$value = typeWithValues.values) === null || _typeWithValues$value === void 0 ? void 0 : _typeWithValues$value[0]) !== null && _ref !== void 0 ? _ref : '';
10
- };
11
7
  var TextEditType = function TextEditType(props) {
8
+ var _currentValue$values$, _currentValue$values;
12
9
  var experienceId = useDatasourceExperienceId();
10
+ var currentValue = props.currentValue;
13
11
  useEffect(function () {
14
12
  if (experienceId) {
15
13
  succeedUfoExperience({
@@ -27,7 +25,7 @@ var TextEditType = function TextEditType(props) {
27
25
  // We need 8px left padding to match read only version, but there is already 1px of border
28
26
  padding: "var(--ds-space-100, 8px)".concat(" calc(", "var(--ds-space-100, 8px)", " - 1px)")
29
27
  },
30
- value: toTextValue(props.currentValue),
28
+ value: (_currentValue$values$ = currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0]) !== null && _currentValue$values$ !== void 0 ? _currentValue$values$ : '',
31
29
  onChange: function onChange(e) {
32
30
  return props.setEditValues({
33
31
  type: 'string',