@atlaskit/link-datasource 2.9.0 → 2.9.2

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 (79) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/hooks/useDatasourceTableState.js +2 -0
  3. package/dist/cjs/ui/assets-modal/modal/index.js +2 -0
  4. package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js +3 -1
  5. package/dist/cjs/ui/common/modal/datasource-modal/createDatasourceModal.js +55 -0
  6. package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/index.js +15 -2
  7. package/dist/cjs/ui/common/modal/insert-button/index.js +5 -4
  8. package/dist/cjs/ui/confluence-search-modal/modal/ModalOld.js +3 -1
  9. package/dist/cjs/ui/confluence-search-modal/modal/index.js +35 -39
  10. package/dist/cjs/ui/datasource-table-view/datasourceTableView.js +2 -0
  11. package/dist/cjs/ui/issue-like-table/index.js +56 -66
  12. package/dist/cjs/ui/issue-like-table/styled.js +25 -3
  13. package/dist/cjs/ui/issue-like-table/table-cell-content/index.js +54 -0
  14. package/dist/cjs/ui/issue-like-table/truncate-text-tag/index.js +32 -0
  15. package/dist/cjs/ui/jira-issues-modal/modal/ModalOld.js +3 -1
  16. package/dist/cjs/ui/jira-issues-modal/modal/index.js +141 -211
  17. package/dist/es2019/hooks/useDatasourceTableState.js +2 -1
  18. package/dist/es2019/ui/assets-modal/modal/index.js +2 -0
  19. package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js +3 -1
  20. package/dist/es2019/ui/common/modal/datasource-context/index.js +1 -1
  21. package/dist/es2019/ui/common/modal/datasource-modal/createDatasourceModal.js +51 -0
  22. package/dist/es2019/ui/common/modal/datasources-table-in-modal-preview/index.js +11 -2
  23. package/dist/es2019/ui/common/modal/insert-button/index.js +5 -4
  24. package/dist/es2019/ui/confluence-search-modal/modal/ModalOld.js +3 -1
  25. package/dist/es2019/ui/confluence-search-modal/modal/index.js +35 -39
  26. package/dist/es2019/ui/datasource-table-view/datasourceTableView.js +2 -0
  27. package/dist/es2019/ui/issue-like-table/index.js +32 -52
  28. package/dist/es2019/ui/issue-like-table/styled.js +33 -0
  29. package/dist/es2019/ui/issue-like-table/table-cell-content/index.js +44 -0
  30. package/dist/es2019/ui/issue-like-table/truncate-text-tag/index.js +21 -0
  31. package/dist/es2019/ui/jira-issues-modal/modal/ModalOld.js +3 -1
  32. package/dist/es2019/ui/jira-issues-modal/modal/index.js +133 -202
  33. package/dist/esm/hooks/useDatasourceTableState.js +2 -0
  34. package/dist/esm/ui/assets-modal/modal/index.js +2 -0
  35. package/dist/esm/ui/assets-modal/modal/render-assets-content/index.js +3 -1
  36. package/dist/esm/ui/common/modal/datasource-modal/createDatasourceModal.js +48 -0
  37. package/dist/esm/ui/common/modal/datasources-table-in-modal-preview/index.js +12 -2
  38. package/dist/esm/ui/common/modal/insert-button/index.js +5 -4
  39. package/dist/esm/ui/confluence-search-modal/modal/ModalOld.js +3 -1
  40. package/dist/esm/ui/confluence-search-modal/modal/index.js +38 -42
  41. package/dist/esm/ui/datasource-table-view/datasourceTableView.js +2 -0
  42. package/dist/esm/ui/issue-like-table/index.js +53 -61
  43. package/dist/esm/ui/issue-like-table/styled.js +24 -2
  44. package/dist/esm/ui/issue-like-table/table-cell-content/index.js +47 -0
  45. package/dist/esm/ui/issue-like-table/truncate-text-tag/index.js +21 -0
  46. package/dist/esm/ui/jira-issues-modal/modal/ModalOld.js +3 -1
  47. package/dist/esm/ui/jira-issues-modal/modal/index.js +146 -216
  48. package/dist/types/common/types.d.ts +2 -1
  49. package/dist/types/hooks/useDatasourceTableState.d.ts +2 -0
  50. package/dist/types/ui/assets-modal/modal/render-assets-content/index.d.ts +1 -0
  51. package/dist/types/ui/common/modal/datasource-context/index.d.ts +9 -12
  52. package/dist/types/ui/common/modal/datasource-modal/createDatasourceModal.d.ts +15 -0
  53. package/dist/types/ui/common/modal/insert-button/index.d.ts +4 -2
  54. package/dist/types/ui/confluence-search-modal/modal/index.d.ts +3 -4
  55. package/dist/types/ui/confluence-search-modal/types.d.ts +6 -1
  56. package/dist/types/ui/issue-like-table/index.d.ts +1 -17
  57. package/dist/types/ui/issue-like-table/styled.d.ts +4 -0
  58. package/dist/types/ui/issue-like-table/table-cell-content/index.d.ts +12 -0
  59. package/dist/types/ui/issue-like-table/truncate-text-tag/index.d.ts +6 -0
  60. package/dist/types/ui/issue-like-table/types.d.ts +20 -1
  61. package/dist/types/ui/jira-issues-modal/modal/index.d.ts +3 -3
  62. package/dist/types/ui/jira-issues-modal/types.d.ts +3 -0
  63. package/dist/types-ts4.5/common/types.d.ts +2 -1
  64. package/dist/types-ts4.5/hooks/useDatasourceTableState.d.ts +2 -0
  65. package/dist/types-ts4.5/ui/assets-modal/modal/render-assets-content/index.d.ts +1 -0
  66. package/dist/types-ts4.5/ui/common/modal/datasource-context/index.d.ts +9 -12
  67. package/dist/types-ts4.5/ui/common/modal/datasource-modal/createDatasourceModal.d.ts +15 -0
  68. package/dist/types-ts4.5/ui/common/modal/insert-button/index.d.ts +4 -2
  69. package/dist/types-ts4.5/ui/confluence-search-modal/modal/index.d.ts +3 -4
  70. package/dist/types-ts4.5/ui/confluence-search-modal/types.d.ts +6 -1
  71. package/dist/types-ts4.5/ui/issue-like-table/index.d.ts +1 -17
  72. package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts +4 -0
  73. package/dist/types-ts4.5/ui/issue-like-table/table-cell-content/index.d.ts +12 -0
  74. package/dist/types-ts4.5/ui/issue-like-table/truncate-text-tag/index.d.ts +6 -0
  75. package/dist/types-ts4.5/ui/issue-like-table/types.d.ts +20 -1
  76. package/dist/types-ts4.5/ui/jira-issues-modal/modal/index.d.ts +3 -3
  77. package/dist/types-ts4.5/ui/jira-issues-modal/types.d.ts +3 -0
  78. package/examples-helpers/buildIssueLikeTable.tsx +2 -0
  79. package/package.json +8 -8
@@ -128,6 +128,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
128
128
  status = _useDatasourceTableSt.status,
129
129
  onNextPage = _useDatasourceTableSt.onNextPage,
130
130
  responseItems = _useDatasourceTableSt.responseItems,
131
+ responseItemIds = _useDatasourceTableSt.responseItemIds,
131
132
  hasNextPage = _useDatasourceTableSt.hasNextPage,
132
133
  columns = _useDatasourceTableSt.columns,
133
134
  defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -200,6 +201,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
200
201
  status: status,
201
202
  columns: columns,
202
203
  items: responseItems,
204
+ itemIds: responseItemIds,
203
205
  hasNextPage: hasNextPage,
204
206
  visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
205
207
  onNextPage: onNextPage,
@@ -211,7 +213,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
211
213
  wrappedColumnKeys: wrappedColumnKeys,
212
214
  onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
213
215
  }));
214
- }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
216
+ }, [status, columns, responseItems, responseItemIds, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
215
217
  var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
216
218
  var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
217
219
  var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -12,7 +12,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
12
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
13
  import { jsx } from '@emotion/react';
14
14
  import { FormattedMessage } from 'react-intl-next';
15
- import { withAnalyticsContext } from '@atlaskit/analytics-next';
15
+ import { AnalyticsContext } from '@atlaskit/analytics-next';
16
16
  import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
17
17
  import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
18
18
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -34,12 +34,13 @@ import { InitialStateView } from '../../common/initial-state-view';
34
34
  import { CancelButton } from '../../common/modal/cancel-button';
35
35
  import { ContentContainer } from '../../common/modal/content-container';
36
36
  import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
37
- import { DatasourceContextProvider, useDatasourceContext } from '../../common/modal/datasource-context';
37
+ import { useDatasourceContext } from '../../common/modal/datasource-context';
38
38
  import { DatasourceModal } from '../../common/modal/datasource-modal';
39
+ import { createDatasourceModal } from '../../common/modal/datasource-modal/createDatasourceModal';
39
40
  import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
40
41
  import { InsertButton } from '../../common/modal/insert-button';
41
42
  import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
42
- import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
43
+ import { useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
43
44
  import TableSearchCount from '../../common/modal/search-count';
44
45
  import { SiteSelector } from '../../common/modal/site-selector';
45
46
  import { EmptyState } from '../../issue-like-table';
@@ -47,7 +48,6 @@ import ConfluenceSearchContainer from '../confluence-search-container';
47
48
  import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
48
49
  import { confluenceSearchModalMessages } from './messages';
49
50
  import { PlainConfluenceSearchConfigModal as PlainConfluenceSearchConfigModalOld } from './ModalOld';
50
- var DEFAULT_VIEW_MODE = 'table';
51
51
  var inputContainerStyles = xcss({
52
52
  alignItems: 'baseline',
53
53
  display: 'flex',
@@ -75,32 +75,44 @@ var useUpdateParametersOnFormUpdate = function useUpdateParametersOnFormUpdate(c
75
75
  };
76
76
  export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
77
77
  var onCancel = props.onCancel,
78
- initialParameters = props.parameters,
79
78
  urlBeingEdited = props.url,
80
79
  _props$disableDisplay = props.disableDisplayDropdown,
81
80
  disableDisplayDropdown = _props$disableDisplay === void 0 ? false : _props$disableDisplay,
82
81
  overrideParameters = props.overrideParameters;
83
82
  var _useViewModeContext = useViewModeContext(),
84
83
  currentViewMode = _useViewModeContext.currentViewMode;
85
- var _useState = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
84
+ var _useDatasourceContext2 = useDatasourceContext(),
85
+ visibleColumnKeys = _useDatasourceContext2.visibleColumnKeys,
86
+ _useDatasourceContext3 = _useDatasourceContext2.tableState,
87
+ reset = _useDatasourceContext3.reset,
88
+ status = _useDatasourceContext3.status,
89
+ responseItems = _useDatasourceContext3.responseItems,
90
+ _useDatasourceContext4 = _useDatasourceContext3.extensionKey,
91
+ extensionKey = _useDatasourceContext4 === void 0 ? null : _useDatasourceContext4,
92
+ destinationObjectTypes = _useDatasourceContext3.destinationObjectTypes,
93
+ totalCount = _useDatasourceContext3.totalCount,
94
+ columns = _useDatasourceContext3.columns,
95
+ visibleColumnCount = _useDatasourceContext2.visibleColumnCount,
96
+ parameters = _useDatasourceContext2.parameters;
97
+ var _useState = useState(parameters === null || parameters === void 0 ? void 0 : parameters.cloudId),
86
98
  _useState2 = _slicedToArray(_useState, 2),
87
99
  cloudId = _useState2[0],
88
100
  setCloudId = _useState2[1];
89
101
  var _useAvailableSites = useAvailableSites('confluence', cloudId),
90
102
  availableSites = _useAvailableSites.availableSites,
91
103
  selectedConfluenceSite = _useAvailableSites.selectedSite;
92
- var _useState3 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
104
+ var _useState3 = useState(parameters === null || parameters === void 0 ? void 0 : parameters.searchString),
93
105
  _useState4 = _slicedToArray(_useState3, 2),
94
106
  searchString = _useState4[0],
95
107
  setSearchString = _useState4[1];
96
- var _useState5 = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []),
108
+ var _useState5 = useState((parameters === null || parameters === void 0 ? void 0 : parameters.contributorAccountIds) || []),
97
109
  _useState6 = _slicedToArray(_useState5, 2),
98
110
  contributorAccountIds = _useState6[0],
99
111
  setContributorAccountIds = _useState6[1];
100
- var _useState7 = useState(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
101
- value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
102
- from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
103
- to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
112
+ var _useState7 = useState(parameters !== null && parameters !== void 0 && parameters.lastModified ? {
113
+ value: parameters === null || parameters === void 0 ? void 0 : parameters.lastModified,
114
+ from: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedFrom,
115
+ to: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedTo
104
116
  } : undefined),
105
117
  _useState8 = _slicedToArray(_useState7, 2),
106
118
  lastModified = _useState8[0],
@@ -110,19 +122,6 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
110
122
  var searchCount = useRef(0);
111
123
  var userInteractions = useUserInteractions();
112
124
  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
113
- var _useDatasourceContext2 = useDatasourceContext(),
114
- visibleColumnKeys = _useDatasourceContext2.visibleColumnKeys,
115
- _useDatasourceContext3 = _useDatasourceContext2.tableState,
116
- reset = _useDatasourceContext3.reset,
117
- status = _useDatasourceContext3.status,
118
- responseItems = _useDatasourceContext3.responseItems,
119
- _useDatasourceContext4 = _useDatasourceContext3.extensionKey,
120
- extensionKey = _useDatasourceContext4 === void 0 ? null : _useDatasourceContext4,
121
- destinationObjectTypes = _useDatasourceContext3.destinationObjectTypes,
122
- totalCount = _useDatasourceContext3.totalCount,
123
- columns = _useDatasourceContext3.columns,
124
- visibleColumnCount = _useDatasourceContext2.visibleColumnCount,
125
- parameters = _useDatasourceContext2.parameters;
126
125
  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
127
126
  fireEvent = _useDatasourceAnalyti.fireEvent;
128
127
  var hasNoConfluenceSites = availableSites && availableSites.length === 0;
@@ -316,7 +315,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
316
315
  }, jsx(ConfluenceSearchContainer, {
317
316
  isSearching: status === 'loading',
318
317
  onSearch: onSearch,
319
- parameters: isValidParameters(parameters) ? parameters : {
318
+ parameters: parameters && isValidParameters(parameters) ? parameters : {
320
319
  cloudId: ''
321
320
  }
322
321
  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
@@ -347,19 +346,16 @@ var analyticsContextData = _objectSpread(_objectSpread({}, componentMetadata.con
347
346
  var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
348
347
  attributes: _objectSpread({}, analyticsContextAttributes)
349
348
  });
350
- export var ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(function (props) {
351
- var _props$viewMode;
352
- return jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform-datasources-use-refactored-config-modal') ? jsx(DatasourceContextProvider, {
353
- datasourceId: props.datasourceId,
354
- initialVisibleColumnKeys: props.visibleColumnKeys,
355
- initialColumnCustomSizes: props.columnCustomSizes,
356
- initialWrappedColumnKeys: props.wrappedColumnKeys,
357
- initialParameters: props.parameters,
358
- isValidParameters: isValidParameters,
359
- onInsert: props.onInsert
360
- }, jsx(DatasourceViewModeProvider, {
361
- viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
362
- }, jsx(PlainConfluenceSearchConfigModal, props))) :
363
- // TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
364
- jsx(PlainConfluenceSearchConfigModalOld, props))));
365
- });
349
+ var ConnectedConfluenceSearchConfigModal = createDatasourceModal({
350
+ isValidParameters: isValidParameters,
351
+ dataProvider: 'confluence-search',
352
+ component: PlainConfluenceSearchConfigModal
353
+ });
354
+ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
355
+ if (fg('platform-datasources-use-refactored-config-modal')) {
356
+ return jsx(StoreContainer, null, jsx(ConnectedConfluenceSearchConfigModal, props));
357
+ }
358
+ return jsx(StoreContainer, null, jsx(AnalyticsContext, {
359
+ data: contextData
360
+ }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModalOld, props)))));
361
+ };
@@ -50,6 +50,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
50
50
  status = _useDatasourceTableSt.status,
51
51
  onNextPage = _useDatasourceTableSt.onNextPage,
52
52
  responseItems = _useDatasourceTableSt.responseItems,
53
+ responseItemIds = _useDatasourceTableSt.responseItemIds,
53
54
  hasNextPage = _useDatasourceTableSt.hasNextPage,
54
55
  columns = _useDatasourceTableSt.columns,
55
56
  defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -161,6 +162,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
161
162
  testId: 'datasource-table-view',
162
163
  hasNextPage: hasNextPage,
163
164
  items: responseItems,
165
+ itemIds: responseItemIds,
164
166
  onNextPage: onNextPage,
165
167
  onLoadDatasourceDetails: loadDatasourceDetails,
166
168
  status: status,
@@ -1,9 +1,7 @@
1
1
  import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import _extends from "@babel/runtime/helpers/extends";
4
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
5
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
- var _styled$td;
7
5
  import _regeneratorRuntime from "@babel/runtime/regenerator";
8
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -11,7 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
11
9
  * @jsxRuntime classic
12
10
  * @jsx jsx
13
11
  */
14
- import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
12
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
15
13
 
16
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
15
  import { css, jsx } from '@emotion/react';
@@ -21,6 +19,7 @@ import debounce from 'lodash/debounce';
21
19
  import { useIntl } from 'react-intl-next';
22
20
  import invariant from 'tiny-invariant';
23
21
  import { Skeleton } from '@atlaskit/linking-common';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
24
23
  import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
25
24
  import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
26
25
  import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -38,7 +37,9 @@ import { DragColumnPreview } from './drag-column-preview';
38
37
  import { DraggableTableHeading } from './draggable-table-heading';
39
38
  import TableEmptyState from './empty-state';
40
39
  import { renderType, stringifyType } from './render-type';
41
- import { fieldTextFontSize, Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
40
+ import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
41
+ import { TableCellContent } from './table-cell-content';
42
+ import { TruncateTextTag } from './truncate-text-tag';
42
43
  import { useIsOnScreen } from './useIsOnScreen';
43
44
  import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
44
45
  var tableSidePadding = "var(--ds-space-200, 16px)";
@@ -49,11 +50,6 @@ var tableHeadStyles = css({
49
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
50
51
  zIndex: stickyTableHeadersIndex
51
52
  });
52
- var truncateTextStyles = css({
53
- overflow: 'hidden',
54
- textOverflow: 'ellipsis',
55
- whiteSpace: 'nowrap'
56
- });
57
53
  var columnPickerWidth = 80;
58
54
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
59
55
  var ColumnPickerHeader = styled.th(_defineProperty({}, "".concat(withTablePluginHeaderPrefix('&:last-of-type')), {
@@ -77,28 +73,6 @@ var truncateStyles = css({
77
73
  textOverflow: 'ellipsis',
78
74
  whiteSpace: 'nowrap'
79
75
  });
80
-
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
82
- var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix()), {
83
- /* First section here is to override things editor table plugin css defines */
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
85
- font: fieldTextFontSize,
86
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
87
- border: 0,
88
- minWidth: 'auto',
89
- verticalAlign: 'inherit',
90
- boxSizing: 'border-box',
91
- borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
92
- borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
93
- overflow: 'hidden'
94
- }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
95
- paddingLeft: "var(--ds-space-100, 8px)"
96
- }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
97
- borderRight: 0,
98
- paddingRight: "var(--ds-space-100, 8px)"
99
- }), _defineProperty(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
100
- whiteSpace: 'unset'
101
- }), _styled$td));
102
76
  var tableContainerStyles = css({
103
77
  borderRadius: 'inherit',
104
78
  borderBottomLeftRadius: 0,
@@ -274,18 +248,12 @@ function getDefaultColumnWidth(key, type) {
274
248
  return DEFAULT_WIDTH;
275
249
  }
276
250
  }
277
- var TruncateTextTag = /*#__PURE__*/forwardRef(function (props, ref) {
278
- return jsx("span", _extends({
279
- css: truncateTextStyles
280
- }, props, {
281
- ref: ref
282
- }), props.children);
283
- });
284
251
  export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
285
252
  var testId = _ref5.testId,
286
253
  onNextPage = _ref5.onNextPage,
287
254
  onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
288
255
  items = _ref5.items,
256
+ itemIds = _ref5.itemIds,
289
257
  columns = _ref5.columns,
290
258
  _ref5$renderItem = _ref5.renderItem,
291
259
  renderItem = _ref5$renderItem === void 0 ? renderType : _ref5$renderItem,
@@ -394,14 +362,15 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
394
362
  return {
395
363
  key: 'loading',
396
364
  cells: headerColumns.map(function (column) {
397
- return _objectSpread(_objectSpread({}, column), {}, {
365
+ return {
398
366
  content: jsx(Skeleton, {
399
367
  borderRadius: 8,
400
368
  width: "100%",
401
369
  height: 14,
402
370
  testId: "issues-table-row-loading"
403
- })
404
- });
371
+ }),
372
+ key: column.key
373
+ };
405
374
  })
406
375
  };
407
376
  }, [headerColumns]);
@@ -487,13 +456,36 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
487
456
  }));
488
457
  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
489
458
  var tableRows = useMemo(function () {
490
- return items.map(function (newRowData, rowIndex) {
459
+ return fg('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
491
460
  return {
492
- key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
461
+ key: id,
493
462
  cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
494
- var _newRowData$key;
495
463
  var key = _ref12.key,
496
464
  type = _ref12.type;
465
+ return {
466
+ key: key,
467
+ columnKey: key,
468
+ content: jsx(TableCellContent, {
469
+ id: id,
470
+ columnKey: key,
471
+ columnType: type,
472
+ wrappedColumnKeys: wrappedColumnKeys,
473
+ renderItem: renderItem
474
+ }),
475
+ width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
476
+ };
477
+ }),
478
+ ref: rowIndex === items.length - 1 ? function (el) {
479
+ return setLastRowElement(el);
480
+ } : undefined
481
+ };
482
+ }) : items.map(function (newRowData, rowIndex) {
483
+ return {
484
+ key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
485
+ cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
486
+ var _newRowData$key;
487
+ var key = _ref13.key,
488
+ type = _ref13.type;
497
489
  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
498
490
  var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
499
491
  var values = Array.isArray(value) ? value : [value];
@@ -527,7 +519,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
527
519
  } : undefined
528
520
  };
529
521
  });
530
- }, [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
522
+ }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
531
523
  var rows = useMemo(function () {
532
524
  if (status !== 'loading') {
533
525
  return tableRows;
@@ -618,10 +610,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
618
610
  className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
619
611
  }, jsx("tr", {
620
612
  ref: tableHeaderRowRef
621
- }, headerColumns.map(function (_ref14, cellIndex) {
622
- var key = _ref14.key,
623
- content = _ref14.content,
624
- width = _ref14.width;
613
+ }, headerColumns.map(function (_ref15, cellIndex) {
614
+ var key = _ref15.key,
615
+ content = _ref15.content,
616
+ width = _ref15.width;
625
617
  var heading = jsx(Tooltip, {
626
618
  content: content,
627
619
  tag: "span",
@@ -638,10 +630,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
638
630
  }
639
631
  if (isEditable) {
640
632
  var _containerRef$current3;
641
- var previewRows = tableRows.map(function (_ref15) {
642
- var cells = _ref15.cells;
643
- var cell = cells.find(function (_ref16) {
644
- var cellKey = _ref16.key;
633
+ var previewRows = tableRows.map(function (_ref16) {
634
+ var cells = _ref16.cells;
635
+ var cell = cells.find(function (_ref17) {
636
+ var cellKey = _ref17.key;
645
637
  return cellKey === key;
646
638
  });
647
639
  if (cell) {
@@ -684,18 +676,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
684
676
  })))), jsx("tbody", {
685
677
  css: noDefaultBorderStyles,
686
678
  "data-testid": testId && "".concat(testId, "--body")
687
- }, rows.map(function (_ref17) {
688
- var key = _ref17.key,
689
- cells = _ref17.cells,
690
- ref = _ref17.ref;
679
+ }, rows.map(function (_ref18) {
680
+ var key = _ref18.key,
681
+ cells = _ref18.cells,
682
+ ref = _ref18.ref;
691
683
  return jsx("tr", {
692
684
  key: key,
693
685
  "data-testid": testId && "".concat(testId, "--row-").concat(key),
694
686
  ref: ref
695
- }, cells.map(function (_ref18, cellIndex) {
696
- var cellKey = _ref18.key,
697
- content = _ref18.content,
698
- width = _ref18.width;
687
+ }, cells.map(function (_ref19, cellIndex) {
688
+ var cellKey = _ref19.key,
689
+ content = _ref19.content,
690
+ width = _ref19.width;
699
691
  var isLastCell = cellIndex === cells.length - 1;
700
692
  var loadingRowStyle = getWidthCss({
701
693
  shouldUseWidth: shouldUseWidth,
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- var _styled$th;
2
+ var _styled$th, _styled$td;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import styled from '@emotion/styled';
5
5
  import { N40 } from '@atlaskit/theme/colors';
@@ -65,4 +65,26 @@ export var TableHeading = styled.th((_styled$th = {}, _defineProperty(_styled$th
65
65
  whiteSpace: 'normal',
66
66
  overflow: 'hidden',
67
67
  wordWrap: 'break-word'
68
- }), _styled$th));
68
+ }), _styled$th));
69
+
70
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
71
+ export var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix()), {
72
+ /* First section here is to override things editor table plugin css defines */
73
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
74
+ font: fieldTextFontSize,
75
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
76
+ border: 0,
77
+ minWidth: 'auto',
78
+ verticalAlign: 'inherit',
79
+ boxSizing: 'border-box',
80
+ borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
81
+ borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
82
+ overflow: 'hidden'
83
+ }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
84
+ paddingLeft: "var(--ds-space-100, 8px)"
85
+ }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
86
+ borderRight: 0,
87
+ paddingRight: "var(--ds-space-100, 8px)"
88
+ }), _defineProperty(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
89
+ whiteSpace: 'unset'
90
+ }), _styled$td));
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import Tooltip from '@atlaskit/tooltip';
4
+ import { useDatasourceItem } from '../../../state';
5
+ import { stringifyType } from '../render-type';
6
+ import { TruncateTextTag } from '../truncate-text-tag';
7
+ export var TableCellContent = function TableCellContent(_ref) {
8
+ var _rowData$columnKey;
9
+ var columnKey = _ref.columnKey,
10
+ columnType = _ref.columnType,
11
+ id = _ref.id,
12
+ renderItem = _ref.renderItem,
13
+ wrappedColumnKeys = _ref.wrappedColumnKeys;
14
+ var intl = useIntl();
15
+ var rowData = useDatasourceItem({
16
+ id: id
17
+ });
18
+ if (!rowData || !columnKey || !rowData[columnKey]) {
19
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
20
+ }
21
+
22
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
23
+ var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
24
+ var values = Array.isArray(value) ? value : [value];
25
+ var renderedValues = renderItem({
26
+ type: columnType,
27
+ values: values
28
+ });
29
+ var stringifiedContent = values.map(function (value) {
30
+ return stringifyType({
31
+ type: columnType,
32
+ value: value
33
+ }, intl.formatMessage, intl.formatDate);
34
+ }).filter(function (value) {
35
+ return value !== '';
36
+ }).join(', ');
37
+ if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
38
+ return /*#__PURE__*/React.createElement(Tooltip
39
+ // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
40
+ , {
41
+ tag: TruncateTextTag,
42
+ content: stringifiedContent,
43
+ testId: "issues-table-cell-tooltip"
44
+ }, renderedValues);
45
+ }
46
+ return /*#__PURE__*/React.createElement(React.Fragment, null, renderedValues);
47
+ };
@@ -0,0 +1,21 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+ import React, { forwardRef } from 'react';
7
+
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
9
+ import { css, jsx } from '@emotion/react';
10
+ var truncateTextStyles = css({
11
+ overflow: 'hidden',
12
+ textOverflow: 'ellipsis',
13
+ whiteSpace: 'nowrap'
14
+ });
15
+ export var TruncateTextTag = /*#__PURE__*/forwardRef(function (props, ref) {
16
+ return jsx("span", _extends({
17
+ css: truncateTextStyles
18
+ }, props, {
19
+ ref: ref
20
+ }), props.children);
21
+ });
@@ -129,6 +129,7 @@ export var PlainJiraIssuesConfigModalOld = function PlainJiraIssuesConfigModalOl
129
129
  status = _useDatasourceTableSt.status,
130
130
  onNextPage = _useDatasourceTableSt.onNextPage,
131
131
  responseItems = _useDatasourceTableSt.responseItems,
132
+ responseItemIds = _useDatasourceTableSt.responseItemIds,
132
133
  hasNextPage = _useDatasourceTableSt.hasNextPage,
133
134
  columns = _useDatasourceTableSt.columns,
134
135
  defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
@@ -366,6 +367,7 @@ export var PlainJiraIssuesConfigModalOld = function PlainJiraIssuesConfigModalOl
366
367
  status: status,
367
368
  columns: columns,
368
369
  items: responseItems,
370
+ itemIds: responseItemIds,
369
371
  hasNextPage: hasNextPage,
370
372
  visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
371
373
  onNextPage: handleOnNextPage,
@@ -377,7 +379,7 @@ export var PlainJiraIssuesConfigModalOld = function PlainJiraIssuesConfigModalOl
377
379
  wrappedColumnKeys: wrappedColumnKeys,
378
380
  onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
379
381
  }));
380
- }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
382
+ }, [status, columns, responseItems, responseItemIds, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
381
383
  var renderCountModeContent = useCallback(function () {
382
384
  var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
383
385
  if (status === 'unauthorized') {