@commercetools-frontend-extensions/import-resources-modal 1.12.0 → 1.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 (4) hide show
  1. package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.dev.js +120 -31
  2. package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.prod.js +120 -31
  3. package/dist/commercetools-frontend-extensions-import-resources-modal.esm.js +122 -33
  4. package/package.json +12 -12
package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.dev.js CHANGED
@@ -64,26 +64,26 @@ let CurrentStep$1 = /*#__PURE__*/function (CurrentStep) {
64
64
  return CurrentStep;
65
65
  }({});
66
66
 
67
- function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
- function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
67
+ function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
+ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$b(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$b(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
69
 
70
70
  // TODO: make this resource type specific
71
71
 
72
72
  function reducer(state, action) {
73
- if (action.type === 'setCurrentStep') return _objectSpread$a(_objectSpread$a({}, state), {}, {
73
+ if (action.type === 'setCurrentStep') return _objectSpread$b(_objectSpread$b({}, state), {}, {
74
74
  currentStep: action.currentStep,
75
75
  progress: 0
76
76
  });
77
- if (action.type === 'setUploadFileResponse') return _objectSpread$a(_objectSpread$a({}, state), {}, {
77
+ if (action.type === 'setUploadFileResponse') return _objectSpread$b(_objectSpread$b({}, state), {}, {
78
78
  uploadFileResponse: action.uploadFileResponse
79
79
  });
80
- if (action.type === 'setResourceType') return _objectSpread$a(_objectSpread$a({}, state), {}, {
80
+ if (action.type === 'setResourceType') return _objectSpread$b(_objectSpread$b({}, state), {}, {
81
81
  resourceType: action.resourceType
82
82
  });
83
- if (action.type === 'setContainerKey') return _objectSpread$a(_objectSpread$a({}, state), {}, {
83
+ if (action.type === 'setContainerKey') return _objectSpread$b(_objectSpread$b({}, state), {}, {
84
84
  containerKey: action.containerKey
85
85
  });
86
- if (action.type === 'cancelImport') return _objectSpread$a(_objectSpread$a({}, state), {}, {
86
+ if (action.type === 'cancelImport') return _objectSpread$b(_objectSpread$b({}, state), {}, {
87
87
  currentStep: CurrentStep$1.Upload,
88
88
  containerKey: undefined,
89
89
  jobId: undefined,
@@ -96,7 +96,7 @@ function reducer(state, action) {
96
96
  validationProcessed: undefined,
97
97
  isValidating: false
98
98
  });
99
- if (action.type === 'uploadNewFile') return _objectSpread$a(_objectSpread$a({}, state), {}, {
99
+ if (action.type === 'uploadNewFile') return _objectSpread$b(_objectSpread$b({}, state), {}, {
100
100
  currentStep: CurrentStep$1.Upload,
101
101
  containerKey: undefined,
102
102
  jobId: undefined,
@@ -110,42 +110,42 @@ function reducer(state, action) {
110
110
  isValidating: false
111
111
  });
112
112
  if (action.type === 'setDroppedFile') {
113
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
113
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
114
114
  droppedFile: action.droppedFile
115
115
  });
116
116
  }
117
117
  if (action.type === 'setFileUploadErrors') {
118
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
118
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
119
119
  fileUploadErrors: action.fileUploadErrors
120
120
  });
121
121
  }
122
122
  if (action.type === 'setAbortController') {
123
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
123
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
124
124
  abortController: action.abortController
125
125
  });
126
126
  }
127
127
  if (action.type === 'setProgress') {
128
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
128
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
129
129
  progress: action.progress
130
130
  });
131
131
  }
132
132
  if (action.type === 'setUploadSettings') {
133
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
134
- settings: _objectSpread$a(_objectSpread$a({}, state.settings), action.settings)
133
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
134
+ settings: _objectSpread$b(_objectSpread$b({}, state.settings), action.settings)
135
135
  });
136
136
  }
137
137
  if (action.type === 'setJobId') {
138
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
138
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
139
139
  jobId: action.jobId
140
140
  });
141
141
  }
142
142
  if (action.type === 'setTotalResourceCount') {
143
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
143
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
144
144
  totalResourceCount: action.totalResourceCount
145
145
  });
146
146
  }
147
147
  if (action.type === 'setValidationProgress') {
148
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
148
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
149
149
  validationProcessed: action.validationProcessed,
150
150
  isValidating: action.isValidating
151
151
  });
@@ -217,8 +217,8 @@ const initialActions = {
217
217
  }
218
218
  };
219
219
 
220
- function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
221
- function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
220
+ function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
221
+ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
222
222
  const ImportResourcesContext = /*#__PURE__*/React__default["default"].createContext({
223
223
  state: initialState,
224
224
  resourceTypes: [],
@@ -231,7 +231,7 @@ const ImportResourcesProvider = props => {
231
231
  projectKey: context.project?.key
232
232
  })),
233
233
  projectKey = _useApplicationContex.projectKey;
234
- const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$9(_objectSpread$9({}, initialState), {}, {
234
+ const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$a(_objectSpread$a({}, initialState), {}, {
235
235
  resourceType: props.resourceTypes[0]
236
236
  })),
237
237
  _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -956,17 +956,17 @@ const PERMISSIONS = {
956
956
  ViewBusinessUnits: 'ViewBusinessUnits'
957
957
  };
958
958
 
959
- function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
960
- function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
959
+ function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
960
+ function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
961
961
  const FILE_IMPORT_JOB_FLOW = 'fileImportJobFlow';
962
962
  const DEFAULT_SHORT_LIVED_FLAGS = {
963
963
  [FILE_IMPORT_JOB_FLOW]: false
964
964
  };
965
965
  const DEFAULT_LONG_LIVED_FLAGS = {};
966
- _objectSpread$8(_objectSpread$8({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
966
+ _objectSpread$9(_objectSpread$9({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
967
967
 
968
- function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
969
- function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
968
+ function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
969
+ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
970
970
  const useUpload = () => {
971
971
  const intl = reactIntl.useIntl();
972
972
  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
@@ -1083,7 +1083,7 @@ const useUpload = () => {
1083
1083
  actions.setAbortController(abortController);
1084
1084
  actions.setCurrentStep(CurrentStep$1.Uploading);
1085
1085
  const shouldApplyPublishSettings = state.resourceType === 'product';
1086
- const uploadSettings = _objectSpread$7({
1086
+ const uploadSettings = _objectSpread$8({
1087
1087
  format: 'CSV',
1088
1088
  decimalSeparator: state.settings?.decimalSeparator
1089
1089
  }, shouldApplyPublishSettings ? {
@@ -1370,6 +1370,89 @@ var messages$4 = reactIntl.defineMessages({
1370
1370
  }
1371
1371
  });
1372
1372
 
1373
+ function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
1374
+ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
1375
+ const PER_PAGE = 20;
1376
+ const columns = [{
1377
+ key: 'row',
1378
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.row)),
1379
+ width: 'max-content'
1380
+ }, {
1381
+ key: 'errorType',
1382
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.errorType)),
1383
+ width: 'max-content'
1384
+ }, {
1385
+ key: 'details',
1386
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.details))
1387
+ }];
1388
+ const ServerPaginatedErrorTable = _ref => {
1389
+ let jobId = _ref.jobId,
1390
+ containerKey = _ref.containerKey,
1391
+ totalInvalid = _ref.totalInvalid;
1392
+ const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
1393
+ const pagination = uiKit.usePaginationState({
1394
+ perPage: PER_PAGE
1395
+ });
1396
+ const offset = (pagination.page.value - 1) * PER_PAGE;
1397
+ const totalPages = Math.ceil(totalInvalid / PER_PAGE);
1398
+ const _useFetchFileImportJo = operations.useFetchFileImportJobRecords({
1399
+ projectKey: projectKey,
1400
+ importContainerKey: containerKey,
1401
+ jobId,
1402
+ offset,
1403
+ limit: PER_PAGE,
1404
+ isValid: false
1405
+ }),
1406
+ data = _useFetchFileImportJo.data,
1407
+ isLoading = _useFetchFileImportJo.isLoading;
1408
+ const rows = React__default["default"].useMemo(() => data ? operations.mapUploadFileErrorsResponseToUploadFileErrorRows(data.results) : [], [data]);
1409
+ const showInitialLoading = isLoading && !data;
1410
+ if (showInitialLoading) {
1411
+ return jsxRuntime.jsx(uiKit.Spacings.Stack, {
1412
+ alignItems: "center",
1413
+ children: jsxRuntime.jsx(uiKit.LoadingSpinner, {})
1414
+ });
1415
+ }
1416
+ return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
1417
+ scale: "l",
1418
+ children: [jsxRuntime.jsx(uiKit.DataTable, {
1419
+ verticalCellAlignment: "center",
1420
+ isCondensed: true,
1421
+ rows: rows,
1422
+ columns: columns,
1423
+ itemRenderer: itemRenderer
1424
+ }), totalPages > 1 && jsxRuntime.jsx(uiKit.PageNavigator, {
1425
+ onPageChange: pagination.page.onChange,
1426
+ page: pagination.page.value,
1427
+ totalPages: totalPages
1428
+ })]
1429
+ });
1430
+ };
1431
+ function itemRenderer(item, column) {
1432
+ switch (column.key) {
1433
+ case 'row':
1434
+ return item.row;
1435
+ case 'errorType':
1436
+ return jsxRuntime.jsx(uiKit.Stamp, {
1437
+ isCondensed: true,
1438
+ label: operations.formatErrorCode(item.code),
1439
+ tone: "critical"
1440
+ });
1441
+ case 'details':
1442
+ return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
1443
+ scale: "xs",
1444
+ children: [jsxRuntime.jsx(uiKit.Text.Body, {
1445
+ tone: "information",
1446
+ children: item.field
1447
+ }), jsxRuntime.jsx(uiKit.Text.Body, {
1448
+ children: operations.extractErrorDescriptionFromValidationMessage(item.validationMessage)
1449
+ })]
1450
+ });
1451
+ default:
1452
+ throw new operations.UnexpectedColumnError(column.key);
1453
+ }
1454
+ }
1455
+
1373
1456
  function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
1374
1457
  function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
1375
1458
  const fileLevelColumns = [{
@@ -1499,9 +1582,11 @@ const UploadErrorsModal = () => {
1499
1582
  state = _useImportResourcesCo.state,
1500
1583
  actions = _useImportResourcesCo.actions,
1501
1584
  onClose = _useImportResourcesCo.onClose;
1502
- const isRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1585
+ const isNewFlow = Boolean(state.jobId);
1586
+ const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
1587
+ const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1503
1588
  const isFileLevelErrors = state.fileUploadErrors.length > 0;
1504
- const errorsCount = isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1589
+ const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1505
1590
  const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
1506
1591
  return jsxRuntime.jsx(applicationComponents.InfoDialog, {
1507
1592
  size: 16,
@@ -1523,7 +1608,7 @@ const UploadErrorsModal = () => {
1523
1608
  }
1524
1609
  })
1525
1610
  })
1526
- }), isRowLevelErrors && jsxRuntime.jsx(uiKit.Text.Body, {
1611
+ }), hasInvalidRecords && jsxRuntime.jsx(uiKit.Text.Body, {
1527
1612
  intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.supportedValuesDocumentation), {}, {
1528
1613
  values: {
1529
1614
  documentationLink: msg => jsxRuntime.jsx(uiKit.Link, {
@@ -1535,7 +1620,11 @@ const UploadErrorsModal = () => {
1535
1620
  }
1536
1621
  })
1537
1622
  })]
1538
- }), isRowLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
1623
+ }), isNewFlow && hasInvalidRecords && state.containerKey && jsxRuntime.jsx(ServerPaginatedErrorTable, {
1624
+ jobId: state.jobId,
1625
+ containerKey: state.containerKey,
1626
+ totalInvalid: state.uploadFileResponse?.invalid ?? 0
1627
+ }), !isNewFlow && isRowLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
1539
1628
  variant: "row-level",
1540
1629
  rows: operations.mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
1541
1630
  }), isFileLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
@@ -1967,7 +2056,7 @@ const UploadResult = () => {
1967
2056
  const _useImportResourcesCo = useImportResourcesContext(),
1968
2057
  state = _useImportResourcesCo.state;
1969
2058
  const hasFileLevelErrors = state.fileUploadErrors.length > 0;
1970
- const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
2059
+ const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0;
1971
2060
  if (hasFileLevelErrors || hasRowLevelErrors) {
1972
2061
  return jsxRuntime.jsx(UploadErrorsModal, {});
1973
2062
  }
package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.prod.js CHANGED
@@ -64,26 +64,26 @@ let CurrentStep$1 = /*#__PURE__*/function (CurrentStep) {
64
64
  return CurrentStep;
65
65
  }({});
66
66
 
67
- function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
- function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
67
+ function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
+ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$b(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$b(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
69
 
70
70
  // TODO: make this resource type specific
71
71
 
72
72
  function reducer(state, action) {
73
- if (action.type === 'setCurrentStep') return _objectSpread$a(_objectSpread$a({}, state), {}, {
73
+ if (action.type === 'setCurrentStep') return _objectSpread$b(_objectSpread$b({}, state), {}, {
74
74
  currentStep: action.currentStep,
75
75
  progress: 0
76
76
  });
77
- if (action.type === 'setUploadFileResponse') return _objectSpread$a(_objectSpread$a({}, state), {}, {
77
+ if (action.type === 'setUploadFileResponse') return _objectSpread$b(_objectSpread$b({}, state), {}, {
78
78
  uploadFileResponse: action.uploadFileResponse
79
79
  });
80
- if (action.type === 'setResourceType') return _objectSpread$a(_objectSpread$a({}, state), {}, {
80
+ if (action.type === 'setResourceType') return _objectSpread$b(_objectSpread$b({}, state), {}, {
81
81
  resourceType: action.resourceType
82
82
  });
83
- if (action.type === 'setContainerKey') return _objectSpread$a(_objectSpread$a({}, state), {}, {
83
+ if (action.type === 'setContainerKey') return _objectSpread$b(_objectSpread$b({}, state), {}, {
84
84
  containerKey: action.containerKey
85
85
  });
86
- if (action.type === 'cancelImport') return _objectSpread$a(_objectSpread$a({}, state), {}, {
86
+ if (action.type === 'cancelImport') return _objectSpread$b(_objectSpread$b({}, state), {}, {
87
87
  currentStep: CurrentStep$1.Upload,
88
88
  containerKey: undefined,
89
89
  jobId: undefined,
@@ -96,7 +96,7 @@ function reducer(state, action) {
96
96
  validationProcessed: undefined,
97
97
  isValidating: false
98
98
  });
99
- if (action.type === 'uploadNewFile') return _objectSpread$a(_objectSpread$a({}, state), {}, {
99
+ if (action.type === 'uploadNewFile') return _objectSpread$b(_objectSpread$b({}, state), {}, {
100
100
  currentStep: CurrentStep$1.Upload,
101
101
  containerKey: undefined,
102
102
  jobId: undefined,
@@ -110,42 +110,42 @@ function reducer(state, action) {
110
110
  isValidating: false
111
111
  });
112
112
  if (action.type === 'setDroppedFile') {
113
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
113
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
114
114
  droppedFile: action.droppedFile
115
115
  });
116
116
  }
117
117
  if (action.type === 'setFileUploadErrors') {
118
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
118
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
119
119
  fileUploadErrors: action.fileUploadErrors
120
120
  });
121
121
  }
122
122
  if (action.type === 'setAbortController') {
123
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
123
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
124
124
  abortController: action.abortController
125
125
  });
126
126
  }
127
127
  if (action.type === 'setProgress') {
128
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
128
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
129
129
  progress: action.progress
130
130
  });
131
131
  }
132
132
  if (action.type === 'setUploadSettings') {
133
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
134
- settings: _objectSpread$a(_objectSpread$a({}, state.settings), action.settings)
133
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
134
+ settings: _objectSpread$b(_objectSpread$b({}, state.settings), action.settings)
135
135
  });
136
136
  }
137
137
  if (action.type === 'setJobId') {
138
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
138
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
139
139
  jobId: action.jobId
140
140
  });
141
141
  }
142
142
  if (action.type === 'setTotalResourceCount') {
143
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
143
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
144
144
  totalResourceCount: action.totalResourceCount
145
145
  });
146
146
  }
147
147
  if (action.type === 'setValidationProgress') {
148
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
148
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
149
149
  validationProcessed: action.validationProcessed,
150
150
  isValidating: action.isValidating
151
151
  });
@@ -217,8 +217,8 @@ const initialActions = {
217
217
  }
218
218
  };
219
219
 
220
- function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
221
- function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
220
+ function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
221
+ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
222
222
  const ImportResourcesContext = /*#__PURE__*/React__default["default"].createContext({
223
223
  state: initialState,
224
224
  resourceTypes: [],
@@ -231,7 +231,7 @@ const ImportResourcesProvider = props => {
231
231
  projectKey: context.project?.key
232
232
  })),
233
233
  projectKey = _useApplicationContex.projectKey;
234
- const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$9(_objectSpread$9({}, initialState), {}, {
234
+ const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$a(_objectSpread$a({}, initialState), {}, {
235
235
  resourceType: props.resourceTypes[0]
236
236
  })),
237
237
  _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -956,17 +956,17 @@ const PERMISSIONS = {
956
956
  ViewBusinessUnits: 'ViewBusinessUnits'
957
957
  };
958
958
 
959
- function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
960
- function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
959
+ function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
960
+ function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
961
961
  const FILE_IMPORT_JOB_FLOW = 'fileImportJobFlow';
962
962
  const DEFAULT_SHORT_LIVED_FLAGS = {
963
963
  [FILE_IMPORT_JOB_FLOW]: false
964
964
  };
965
965
  const DEFAULT_LONG_LIVED_FLAGS = {};
966
- _objectSpread$8(_objectSpread$8({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
966
+ _objectSpread$9(_objectSpread$9({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
967
967
 
968
- function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
969
- function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
968
+ function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
969
+ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
970
970
  const useUpload = () => {
971
971
  const intl = reactIntl.useIntl();
972
972
  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
@@ -1083,7 +1083,7 @@ const useUpload = () => {
1083
1083
  actions.setAbortController(abortController);
1084
1084
  actions.setCurrentStep(CurrentStep$1.Uploading);
1085
1085
  const shouldApplyPublishSettings = state.resourceType === 'product';
1086
- const uploadSettings = _objectSpread$7({
1086
+ const uploadSettings = _objectSpread$8({
1087
1087
  format: 'CSV',
1088
1088
  decimalSeparator: state.settings?.decimalSeparator
1089
1089
  }, shouldApplyPublishSettings ? {
@@ -1370,6 +1370,89 @@ var messages$4 = reactIntl.defineMessages({
1370
1370
  }
1371
1371
  });
1372
1372
 
1373
+ function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
1374
+ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
1375
+ const PER_PAGE = 20;
1376
+ const columns = [{
1377
+ key: 'row',
1378
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.row)),
1379
+ width: 'max-content'
1380
+ }, {
1381
+ key: 'errorType',
1382
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.errorType)),
1383
+ width: 'max-content'
1384
+ }, {
1385
+ key: 'details',
1386
+ label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.details))
1387
+ }];
1388
+ const ServerPaginatedErrorTable = _ref => {
1389
+ let jobId = _ref.jobId,
1390
+ containerKey = _ref.containerKey,
1391
+ totalInvalid = _ref.totalInvalid;
1392
+ const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
1393
+ const pagination = uiKit.usePaginationState({
1394
+ perPage: PER_PAGE
1395
+ });
1396
+ const offset = (pagination.page.value - 1) * PER_PAGE;
1397
+ const totalPages = Math.ceil(totalInvalid / PER_PAGE);
1398
+ const _useFetchFileImportJo = operations.useFetchFileImportJobRecords({
1399
+ projectKey: projectKey,
1400
+ importContainerKey: containerKey,
1401
+ jobId,
1402
+ offset,
1403
+ limit: PER_PAGE,
1404
+ isValid: false
1405
+ }),
1406
+ data = _useFetchFileImportJo.data,
1407
+ isLoading = _useFetchFileImportJo.isLoading;
1408
+ const rows = React__default["default"].useMemo(() => data ? operations.mapUploadFileErrorsResponseToUploadFileErrorRows(data.results) : [], [data]);
1409
+ const showInitialLoading = isLoading && !data;
1410
+ if (showInitialLoading) {
1411
+ return jsxRuntime.jsx(uiKit.Spacings.Stack, {
1412
+ alignItems: "center",
1413
+ children: jsxRuntime.jsx(uiKit.LoadingSpinner, {})
1414
+ });
1415
+ }
1416
+ return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
1417
+ scale: "l",
1418
+ children: [jsxRuntime.jsx(uiKit.DataTable, {
1419
+ verticalCellAlignment: "center",
1420
+ isCondensed: true,
1421
+ rows: rows,
1422
+ columns: columns,
1423
+ itemRenderer: itemRenderer
1424
+ }), totalPages > 1 && jsxRuntime.jsx(uiKit.PageNavigator, {
1425
+ onPageChange: pagination.page.onChange,
1426
+ page: pagination.page.value,
1427
+ totalPages: totalPages
1428
+ })]
1429
+ });
1430
+ };
1431
+ function itemRenderer(item, column) {
1432
+ switch (column.key) {
1433
+ case 'row':
1434
+ return item.row;
1435
+ case 'errorType':
1436
+ return jsxRuntime.jsx(uiKit.Stamp, {
1437
+ isCondensed: true,
1438
+ label: operations.formatErrorCode(item.code),
1439
+ tone: "critical"
1440
+ });
1441
+ case 'details':
1442
+ return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
1443
+ scale: "xs",
1444
+ children: [jsxRuntime.jsx(uiKit.Text.Body, {
1445
+ tone: "information",
1446
+ children: item.field
1447
+ }), jsxRuntime.jsx(uiKit.Text.Body, {
1448
+ children: operations.extractErrorDescriptionFromValidationMessage(item.validationMessage)
1449
+ })]
1450
+ });
1451
+ default:
1452
+ throw new operations.UnexpectedColumnError(column.key);
1453
+ }
1454
+ }
1455
+
1373
1456
  function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
1374
1457
  function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
1375
1458
  const fileLevelColumns = [{
@@ -1499,9 +1582,11 @@ const UploadErrorsModal = () => {
1499
1582
  state = _useImportResourcesCo.state,
1500
1583
  actions = _useImportResourcesCo.actions,
1501
1584
  onClose = _useImportResourcesCo.onClose;
1502
- const isRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1585
+ const isNewFlow = Boolean(state.jobId);
1586
+ const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
1587
+ const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1503
1588
  const isFileLevelErrors = state.fileUploadErrors.length > 0;
1504
- const errorsCount = isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1589
+ const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1505
1590
  const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
1506
1591
  return jsxRuntime.jsx(applicationComponents.InfoDialog, {
1507
1592
  size: 16,
@@ -1523,7 +1608,7 @@ const UploadErrorsModal = () => {
1523
1608
  }
1524
1609
  })
1525
1610
  })
1526
- }), isRowLevelErrors && jsxRuntime.jsx(uiKit.Text.Body, {
1611
+ }), hasInvalidRecords && jsxRuntime.jsx(uiKit.Text.Body, {
1527
1612
  intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.supportedValuesDocumentation), {}, {
1528
1613
  values: {
1529
1614
  documentationLink: msg => jsxRuntime.jsx(uiKit.Link, {
@@ -1535,7 +1620,11 @@ const UploadErrorsModal = () => {
1535
1620
  }
1536
1621
  })
1537
1622
  })]
1538
- }), isRowLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
1623
+ }), isNewFlow && hasInvalidRecords && state.containerKey && jsxRuntime.jsx(ServerPaginatedErrorTable, {
1624
+ jobId: state.jobId,
1625
+ containerKey: state.containerKey,
1626
+ totalInvalid: state.uploadFileResponse?.invalid ?? 0
1627
+ }), !isNewFlow && isRowLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
1539
1628
  variant: "row-level",
1540
1629
  rows: operations.mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
1541
1630
  }), isFileLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
@@ -1943,7 +2032,7 @@ const UploadResult = () => {
1943
2032
  const _useImportResourcesCo = useImportResourcesContext(),
1944
2033
  state = _useImportResourcesCo.state;
1945
2034
  const hasFileLevelErrors = state.fileUploadErrors.length > 0;
1946
- const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
2035
+ const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0;
1947
2036
  if (hasFileLevelErrors || hasRowLevelErrors) {
1948
2037
  return jsxRuntime.jsx(UploadErrorsModal, {});
1949
2038
  }
package/dist/commercetools-frontend-extensions-import-resources-modal.esm.js CHANGED
@@ -10,14 +10,14 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
10
  import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
11
11
  import { defineMessages, useIntl, FormattedMessage, IntlProvider } from 'react-intl';
12
12
  import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
13
- import { deleteImportContainer, FileDroppedArea, DisabledDropArea, EnabledDropArea, ActiveDragDropArea, COLUMN_DELIMITERS, useFileUpload, validateDelimiter, getRowCount, toBytes, countUniqueResourcesInCsv, isAbortError, HttpError, formatKeys, isError, IMPORT_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_LEGACY_MAX_ROW_COUNT, assertResourceType, FileDropArea as FileDropArea$1, InfoBox, CT_API_DOCS_URL, UploadSeparator, UploadSettings, UnexpectedColumnError, extractErrorDescriptionFromValidationMessage, formatErrorCode, getFileUploadErrorsCount, RESOURCE_TYPE_DOCUMENTATION_LINKS, mapUploadFileErrorsResponseToUploadFileErrorRows, mapFileUploadErrorsToUploadFileErrorRows, getValidatedColumns, processFileImportJob, processUploadedFile, UploadingModal, UnexpectedResourceTypeError as UnexpectedResourceTypeError$1, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, isResourceType } from '@commercetools-frontend-extensions/operations';
13
+ import { deleteImportContainer, FileDroppedArea, DisabledDropArea, EnabledDropArea, ActiveDragDropArea, COLUMN_DELIMITERS, useFileUpload, validateDelimiter, getRowCount, toBytes, countUniqueResourcesInCsv, isAbortError, HttpError, formatKeys, isError, IMPORT_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_LEGACY_MAX_ROW_COUNT, assertResourceType, FileDropArea as FileDropArea$1, InfoBox, CT_API_DOCS_URL, UploadSeparator, UploadSettings, useFetchFileImportJobRecords, mapUploadFileErrorsResponseToUploadFileErrorRows, UnexpectedColumnError, extractErrorDescriptionFromValidationMessage, formatErrorCode, getFileUploadErrorsCount, RESOURCE_TYPE_DOCUMENTATION_LINKS, mapFileUploadErrorsToUploadFileErrorRows, getValidatedColumns, processFileImportJob, processUploadedFile, UploadingModal, UnexpectedResourceTypeError as UnexpectedResourceTypeError$1, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, isResourceType } from '@commercetools-frontend-extensions/operations';
14
14
  import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
15
15
  import React, { useContext, useMemo, useState, useEffect } from 'react';
16
16
  import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
17
17
  import { FormDialog, InfoDialog, PageContentNarrow, ConfirmationDialog } from '@commercetools-frontend/application-components';
18
18
  import { Masking } from '@commercetools-frontend/fullstory';
19
19
  import { useIsAuthorized } from '@commercetools-frontend/permissions';
20
- import { Spacings, Grid, designTokens, Text, Link, usePaginationState, DataTable, PageNavigator, Stamp, SecondaryButton, PrimaryButton, ImportIcon, TagList, Card, CheckBoldIcon, EyeCrossedIcon, RadioInput } from '@commercetools-frontend/ui-kit';
20
+ import { Spacings, Grid, designTokens, Text, Link, usePaginationState, LoadingSpinner, DataTable, PageNavigator, Stamp, SecondaryButton, PrimaryButton, ImportIcon, TagList, Card, CheckBoldIcon, EyeCrossedIcon, RadioInput } from '@commercetools-frontend/ui-kit';
21
21
  import { useShowNotification } from '@commercetools-frontend/actions-global';
22
22
  import { DOMAINS } from '@commercetools-frontend/constants';
23
23
  import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
@@ -43,26 +43,26 @@ let CurrentStep$1 = /*#__PURE__*/function (CurrentStep) {
43
43
  return CurrentStep;
44
44
  }({});
45
45
 
46
- function ownKeys$a(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
47
- function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
46
+ function ownKeys$b(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
47
+ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$b(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$b(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
48
48
 
49
49
  // TODO: make this resource type specific
50
50
 
51
51
  function reducer(state, action) {
52
- if (action.type === 'setCurrentStep') return _objectSpread$a(_objectSpread$a({}, state), {}, {
52
+ if (action.type === 'setCurrentStep') return _objectSpread$b(_objectSpread$b({}, state), {}, {
53
53
  currentStep: action.currentStep,
54
54
  progress: 0
55
55
  });
56
- if (action.type === 'setUploadFileResponse') return _objectSpread$a(_objectSpread$a({}, state), {}, {
56
+ if (action.type === 'setUploadFileResponse') return _objectSpread$b(_objectSpread$b({}, state), {}, {
57
57
  uploadFileResponse: action.uploadFileResponse
58
58
  });
59
- if (action.type === 'setResourceType') return _objectSpread$a(_objectSpread$a({}, state), {}, {
59
+ if (action.type === 'setResourceType') return _objectSpread$b(_objectSpread$b({}, state), {}, {
60
60
  resourceType: action.resourceType
61
61
  });
62
- if (action.type === 'setContainerKey') return _objectSpread$a(_objectSpread$a({}, state), {}, {
62
+ if (action.type === 'setContainerKey') return _objectSpread$b(_objectSpread$b({}, state), {}, {
63
63
  containerKey: action.containerKey
64
64
  });
65
- if (action.type === 'cancelImport') return _objectSpread$a(_objectSpread$a({}, state), {}, {
65
+ if (action.type === 'cancelImport') return _objectSpread$b(_objectSpread$b({}, state), {}, {
66
66
  currentStep: CurrentStep$1.Upload,
67
67
  containerKey: undefined,
68
68
  jobId: undefined,
@@ -75,7 +75,7 @@ function reducer(state, action) {
75
75
  validationProcessed: undefined,
76
76
  isValidating: false
77
77
  });
78
- if (action.type === 'uploadNewFile') return _objectSpread$a(_objectSpread$a({}, state), {}, {
78
+ if (action.type === 'uploadNewFile') return _objectSpread$b(_objectSpread$b({}, state), {}, {
79
79
  currentStep: CurrentStep$1.Upload,
80
80
  containerKey: undefined,
81
81
  jobId: undefined,
@@ -89,42 +89,42 @@ function reducer(state, action) {
89
89
  isValidating: false
90
90
  });
91
91
  if (action.type === 'setDroppedFile') {
92
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
92
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
93
93
  droppedFile: action.droppedFile
94
94
  });
95
95
  }
96
96
  if (action.type === 'setFileUploadErrors') {
97
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
97
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
98
98
  fileUploadErrors: action.fileUploadErrors
99
99
  });
100
100
  }
101
101
  if (action.type === 'setAbortController') {
102
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
102
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
103
103
  abortController: action.abortController
104
104
  });
105
105
  }
106
106
  if (action.type === 'setProgress') {
107
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
107
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
108
108
  progress: action.progress
109
109
  });
110
110
  }
111
111
  if (action.type === 'setUploadSettings') {
112
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
113
- settings: _objectSpread$a(_objectSpread$a({}, state.settings), action.settings)
112
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
113
+ settings: _objectSpread$b(_objectSpread$b({}, state.settings), action.settings)
114
114
  });
115
115
  }
116
116
  if (action.type === 'setJobId') {
117
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
117
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
118
118
  jobId: action.jobId
119
119
  });
120
120
  }
121
121
  if (action.type === 'setTotalResourceCount') {
122
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
122
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
123
123
  totalResourceCount: action.totalResourceCount
124
124
  });
125
125
  }
126
126
  if (action.type === 'setValidationProgress') {
127
- return _objectSpread$a(_objectSpread$a({}, state), {}, {
127
+ return _objectSpread$b(_objectSpread$b({}, state), {}, {
128
128
  validationProcessed: action.validationProcessed,
129
129
  isValidating: action.isValidating
130
130
  });
@@ -196,8 +196,8 @@ const initialActions = {
196
196
  }
197
197
  };
198
198
 
199
- function ownKeys$9(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
200
- function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
199
+ function ownKeys$a(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
200
+ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
201
201
  const ImportResourcesContext = /*#__PURE__*/React.createContext({
202
202
  state: initialState,
203
203
  resourceTypes: [],
@@ -210,7 +210,7 @@ const ImportResourcesProvider = props => {
210
210
  projectKey: context.project?.key
211
211
  })),
212
212
  projectKey = _useApplicationContex.projectKey;
213
- const _React$useReducer = React.useReducer(reducer, _objectSpread$9(_objectSpread$9({}, initialState), {}, {
213
+ const _React$useReducer = React.useReducer(reducer, _objectSpread$a(_objectSpread$a({}, initialState), {}, {
214
214
  resourceType: props.resourceTypes[0]
215
215
  })),
216
216
  _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -935,17 +935,17 @@ const PERMISSIONS = {
935
935
  ViewBusinessUnits: 'ViewBusinessUnits'
936
936
  };
937
937
 
938
- function ownKeys$8(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
939
- function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
938
+ function ownKeys$9(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
939
+ function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
940
940
  const FILE_IMPORT_JOB_FLOW = 'fileImportJobFlow';
941
941
  const DEFAULT_SHORT_LIVED_FLAGS = {
942
942
  [FILE_IMPORT_JOB_FLOW]: false
943
943
  };
944
944
  const DEFAULT_LONG_LIVED_FLAGS = {};
945
- _objectSpread$8(_objectSpread$8({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
945
+ _objectSpread$9(_objectSpread$9({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
946
946
 
947
- function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
948
- function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
947
+ function ownKeys$8(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
948
+ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
949
949
  const useUpload = () => {
950
950
  const intl = useIntl();
951
951
  const _useApplicationContex = useApplicationContext(context => ({
@@ -1062,7 +1062,7 @@ const useUpload = () => {
1062
1062
  actions.setAbortController(abortController);
1063
1063
  actions.setCurrentStep(CurrentStep$1.Uploading);
1064
1064
  const shouldApplyPublishSettings = state.resourceType === 'product';
1065
- const uploadSettings = _objectSpread$7({
1065
+ const uploadSettings = _objectSpread$8({
1066
1066
  format: 'CSV',
1067
1067
  decimalSeparator: state.settings?.decimalSeparator
1068
1068
  }, shouldApplyPublishSettings ? {
@@ -1349,6 +1349,89 @@ var messages$4 = defineMessages({
1349
1349
  }
1350
1350
  });
1351
1351
 
1352
+ function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1353
+ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
1354
+ const PER_PAGE = 20;
1355
+ const columns = [{
1356
+ key: 'row',
1357
+ label: jsx(FormattedMessage, _objectSpread$7({}, messages$4.row)),
1358
+ width: 'max-content'
1359
+ }, {
1360
+ key: 'errorType',
1361
+ label: jsx(FormattedMessage, _objectSpread$7({}, messages$4.errorType)),
1362
+ width: 'max-content'
1363
+ }, {
1364
+ key: 'details',
1365
+ label: jsx(FormattedMessage, _objectSpread$7({}, messages$4.details))
1366
+ }];
1367
+ const ServerPaginatedErrorTable = _ref => {
1368
+ let jobId = _ref.jobId,
1369
+ containerKey = _ref.containerKey,
1370
+ totalInvalid = _ref.totalInvalid;
1371
+ const projectKey = useApplicationContext(context => context.project?.key);
1372
+ const pagination = usePaginationState({
1373
+ perPage: PER_PAGE
1374
+ });
1375
+ const offset = (pagination.page.value - 1) * PER_PAGE;
1376
+ const totalPages = Math.ceil(totalInvalid / PER_PAGE);
1377
+ const _useFetchFileImportJo = useFetchFileImportJobRecords({
1378
+ projectKey: projectKey,
1379
+ importContainerKey: containerKey,
1380
+ jobId,
1381
+ offset,
1382
+ limit: PER_PAGE,
1383
+ isValid: false
1384
+ }),
1385
+ data = _useFetchFileImportJo.data,
1386
+ isLoading = _useFetchFileImportJo.isLoading;
1387
+ const rows = React.useMemo(() => data ? mapUploadFileErrorsResponseToUploadFileErrorRows(data.results) : [], [data]);
1388
+ const showInitialLoading = isLoading && !data;
1389
+ if (showInitialLoading) {
1390
+ return jsx(Spacings.Stack, {
1391
+ alignItems: "center",
1392
+ children: jsx(LoadingSpinner, {})
1393
+ });
1394
+ }
1395
+ return jsxs(Spacings.Stack, {
1396
+ scale: "l",
1397
+ children: [jsx(DataTable, {
1398
+ verticalCellAlignment: "center",
1399
+ isCondensed: true,
1400
+ rows: rows,
1401
+ columns: columns,
1402
+ itemRenderer: itemRenderer
1403
+ }), totalPages > 1 && jsx(PageNavigator, {
1404
+ onPageChange: pagination.page.onChange,
1405
+ page: pagination.page.value,
1406
+ totalPages: totalPages
1407
+ })]
1408
+ });
1409
+ };
1410
+ function itemRenderer(item, column) {
1411
+ switch (column.key) {
1412
+ case 'row':
1413
+ return item.row;
1414
+ case 'errorType':
1415
+ return jsx(Stamp, {
1416
+ isCondensed: true,
1417
+ label: formatErrorCode(item.code),
1418
+ tone: "critical"
1419
+ });
1420
+ case 'details':
1421
+ return jsxs(Spacings.Inline, {
1422
+ scale: "xs",
1423
+ children: [jsx(Text.Body, {
1424
+ tone: "information",
1425
+ children: item.field
1426
+ }), jsx(Text.Body, {
1427
+ children: extractErrorDescriptionFromValidationMessage(item.validationMessage)
1428
+ })]
1429
+ });
1430
+ default:
1431
+ throw new UnexpectedColumnError(column.key);
1432
+ }
1433
+ }
1434
+
1352
1435
  function ownKeys$6(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1353
1436
  function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
1354
1437
  const fileLevelColumns = [{
@@ -1478,9 +1561,11 @@ const UploadErrorsModal = () => {
1478
1561
  state = _useImportResourcesCo.state,
1479
1562
  actions = _useImportResourcesCo.actions,
1480
1563
  onClose = _useImportResourcesCo.onClose;
1481
- const isRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1564
+ const isNewFlow = Boolean(state.jobId);
1565
+ const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
1566
+ const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
1482
1567
  const isFileLevelErrors = state.fileUploadErrors.length > 0;
1483
- const errorsCount = isRowLevelErrors ? getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1568
+ const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
1484
1569
  const documentationLink = RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
1485
1570
  return jsx(InfoDialog, {
1486
1571
  size: 16,
@@ -1502,7 +1587,7 @@ const UploadErrorsModal = () => {
1502
1587
  }
1503
1588
  })
1504
1589
  })
1505
- }), isRowLevelErrors && jsx(Text.Body, {
1590
+ }), hasInvalidRecords && jsx(Text.Body, {
1506
1591
  intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.supportedValuesDocumentation), {}, {
1507
1592
  values: {
1508
1593
  documentationLink: msg => jsx(Link, {
@@ -1514,7 +1599,11 @@ const UploadErrorsModal = () => {
1514
1599
  }
1515
1600
  })
1516
1601
  })]
1517
- }), isRowLevelErrors && jsx(UploadErrorTable, {
1602
+ }), isNewFlow && hasInvalidRecords && state.containerKey && jsx(ServerPaginatedErrorTable, {
1603
+ jobId: state.jobId,
1604
+ containerKey: state.containerKey,
1605
+ totalInvalid: state.uploadFileResponse?.invalid ?? 0
1606
+ }), !isNewFlow && isRowLevelErrors && jsx(UploadErrorTable, {
1518
1607
  variant: "row-level",
1519
1608
  rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
1520
1609
  }), isFileLevelErrors && jsx(UploadErrorTable, {
@@ -1946,7 +2035,7 @@ const UploadResult = () => {
1946
2035
  const _useImportResourcesCo = useImportResourcesContext(),
1947
2036
  state = _useImportResourcesCo.state;
1948
2037
  const hasFileLevelErrors = state.fileUploadErrors.length > 0;
1949
- const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0 && (state.uploadFileResponse?.results?.length ?? 0) > 0;
2038
+ const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0;
1950
2039
  if (hasFileLevelErrors || hasRowLevelErrors) {
1951
2040
  return jsx(UploadErrorsModal, {});
1952
2041
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-frontend-extensions/import-resources-modal",
3
3
  "description": "Shared import modal for importing resources",
4
- "version": "1.12.0",
4
+ "version": "1.13.0",
5
5
  "license": "BSD-3-Clause",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -31,20 +31,20 @@
31
31
  "pluralize": "8.0.0",
32
32
  "prop-types": "15.8.1",
33
33
  "ramda": "^0.32.0",
34
- "@commercetools-frontend-extensions/operations": "3.0.0"
34
+ "@commercetools-frontend-extensions/operations": "3.1.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@commercetools-frontend/actions-global": "24.11.0",
38
- "@commercetools-frontend/application-components": "24.11.0",
39
- "@commercetools-frontend/application-shell": "24.11.0",
40
- "@commercetools-frontend/application-shell-connectors": "24.11.0",
41
- "@commercetools-frontend/constants": "24.11.0",
37
+ "@commercetools-frontend/actions-global": "24.12.0",
38
+ "@commercetools-frontend/application-components": "24.12.0",
39
+ "@commercetools-frontend/application-shell": "24.12.0",
40
+ "@commercetools-frontend/application-shell-connectors": "24.12.0",
41
+ "@commercetools-frontend/constants": "24.12.0",
42
42
  "@commercetools-frontend/fullstory": "4.0.3",
43
- "@commercetools-frontend/i18n": "24.11.0",
44
- "@commercetools-frontend/jest-preset-mc-app": "24.11.0",
45
- "@commercetools-frontend/permissions": "24.11.0",
46
- "@commercetools-frontend/sdk": "24.11.0",
47
- "@commercetools-frontend/sentry": "24.11.0",
43
+ "@commercetools-frontend/i18n": "24.12.0",
44
+ "@commercetools-frontend/jest-preset-mc-app": "24.12.0",
45
+ "@commercetools-frontend/permissions": "24.12.0",
46
+ "@commercetools-frontend/sdk": "24.12.0",
47
+ "@commercetools-frontend/sentry": "24.12.0",
48
48
  "@commercetools-frontend/ui-kit": "20.3.0",
49
49
  "@commercetools-uikit/data-table": "20.3.0",
50
50
  "@commercetools-uikit/design-system": "20.3.0",