@commercetools-frontend-extensions/operations 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @commercetools-frontend-extensions/operations
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1669](https://github.com/commercetools/merchant-center-operations/pull/1669) [`a4a9c65`](https://github.com/commercetools/merchant-center-operations/commit/a4a9c6513e9a0b6da7d0681f044d7640ad8f0132) Thanks [@yassinejebli](https://github.com/yassinejebli)! - feat(useFileUpload): add `total` to `validationProgress` for tracking validation progress
+
+  The `validationProgress` object returned by `useFileUpload` now includes a `total` field representing the total number of unique resources in the CSV file (counted by unique keys). This allows consumers to display progress like "Validating X of Y resources" during the job-based validation flow.
+
+- [#1669](https://github.com/commercetools/merchant-center-operations/pull/1669) [`a4a9c65`](https://github.com/commercetools/merchant-center-operations/commit/a4a9c6513e9a0b6da7d0681f044d7640ad8f0132) Thanks [@yassinejebli](https://github.com/yassinejebli)! - feat(import): server side pagination for new import flow errors
+
+### Patch Changes
+
+- [#1669](https://github.com/commercetools/merchant-center-operations/pull/1669) [`a4a9c65`](https://github.com/commercetools/merchant-center-operations/commit/a4a9c6513e9a0b6da7d0681f044d7640ad8f0132) Thanks [@yassinejebli](https://github.com/yassinejebli)! - feat: add `total` for tracking validation progress
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -2,6 +2,12 @@
 
 Shared functionality for import/export operations across multiple frontend applications and extensions.
 
+## Installation
+
+```bash
+pnpm add @commercetools-frontend-extensions/operations
+```
+
 ## Hooks
 
 ### `useFileUpload`
@@ -27,7 +33,10 @@ const { upload, isUploading, progress, validationProgress } = useFileUpload({
 - `upload` - Function to start the upload
 - `isUploading` - Whether upload is in progress
 - `progress` - Upload progress (0-100)
-- `validationProgress` - `{ processed: number, isValidating: boolean }` (job-based flow only)
+- `validationProgress` - `{ processed: number, total: number, isValidating: boolean }` (job-based flow only)
+  - `processed`: Number of resources validated so far (from backend)
+  - `total`: Total number of unique resources in the file (counted by unique keys in the CSV)
+  - `isValidating`: Whether validation is in progress
 
 **Usage:**
 ```typescript
@@ -149,6 +158,55 @@ const { data, error, isLoading, refetch } = useFetchFileImportJob({
 
 ---
 
+### `useFetchFileImportJobRecords`
+
+Fetches records (errors or valid entries) from a File Import Job with pagination support. Keeps previous data visible while loading new pages.
+
+```typescript
+const { data, error, isLoading, refetch } = useFetchFileImportJobRecords({
+  projectKey,
+  importContainerKey,
+  jobId,
+  limit?: number,
+  offset?: number,
+  isValid?: boolean,
+  skip?: boolean
+})
+```
+
+**Parameters:**
+- `projectKey`: The commercetools project key
+- `importContainerKey`: The import container key
+- `jobId`: The file import job ID
+- `limit` (optional): Number of records to fetch per page
+- `offset` (optional): Offset for pagination
+- `isValid` (optional): Filter by valid (`true`) or invalid (`false`) records
+- `skip` (optional): Skip fetching (useful for conditional fetching)
+
+**Returns:**
+- `data` - `{ results, total, limit, offset, count }` or `null`
+- `error` - Error object if fetch failed
+- `isLoading` - Whether fetch is in progress
+- `refetch` - Function to manually trigger a refetch
+
+**Usage example (paginated error table):**
+```typescript
+const pagination = usePaginationState()
+const offset = (pagination.page.value - 1) * pagination.perPage.value
+
+const { data, isLoading } = useFetchFileImportJobRecords({
+  projectKey,
+  importContainerKey: containerKey,
+  jobId,
+  offset,
+  limit: pagination.perPage.value,
+  isValid: false, // Fetch only invalid records (errors)
+})
+
+```
+
+---
+
 ## Helper Functions
 
 ```typescript

package/dist/commercetools-frontend-extensions-operations.cjs.dev.js

@@ -2679,6 +2679,39 @@ const useFetchFileImportJob = _ref => {
   });
 };
 
+const EMPTY_RESPONSE = {
+  results: [],
+  total: 0,
+  limit: 0,
+  offset: 0,
+  count: 0
+};
+const useFetchFileImportJobRecords = _ref => {
+  let projectKey = _ref.projectKey,
+    importContainerKey = _ref.importContainerKey,
+    jobId = _ref.jobId,
+    limit = _ref.limit,
+    offset = _ref.offset,
+    isValid = _ref.isValid,
+    _ref$skip = _ref.skip,
+    skip = _ref$skip === void 0 ? false : _ref$skip;
+  const shouldSkip = skip || !projectKey || !importContainerKey || !jobId;
+  const fetchData = React__default["default"].useCallback(() => {
+    if (shouldSkip) {
+      return _Promise__default["default"].resolve(EMPTY_RESPONSE);
+    }
+    return getFileImportJobRecords({
+      projectKey: projectKey,
+      importContainerKey: importContainerKey,
+      jobId: jobId,
+      limit,
+      offset,
+      isValid
+    });
+  }, [shouldSkip, projectKey, importContainerKey, jobId, limit, offset, isValid]);
+  return useFetch(fetchData);
+};
+
 const useFetchImportContainerDetails = _ref => {
   let projectKey = _ref.projectKey,
     importContainerKey = _ref.importContainerKey,
@@ -2946,6 +2979,7 @@ const useFileUpload = _ref2 => {
     setProgress = _React$useState4[1];
   const _React$useState5 = React__default["default"].useState({
       processed: 0,
+      total: 0,
       isValidating: false
     }),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -2962,6 +2996,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     setValidationProgress({
       processed: 0,
+      total: 0,
       isValidating: false
     });
   }, []);
@@ -2970,6 +3005,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     try {
       if (useJobBasedFlow) {
+        const totalResources = await countUniqueResourcesInCsv(config.file);
         await jobUpload.upload({
           file: config.file,
           resourceType: config.resourceType,
@@ -2979,6 +3015,7 @@ const useFileUpload = _ref2 => {
             try {
               setValidationProgress({
                 processed: 0,
+                total: totalResources,
                 isValidating: true
               });
               const validatedJob = await pollJobUntilValidated({
@@ -2992,6 +3029,7 @@ const useFileUpload = _ref2 => {
                   const processed = job.summary?.total ?? 0;
                   setValidationProgress({
                     processed,
+                    total: totalResources,
                     isValidating: true
                   });
                   config.onValidationProgress?.(job);
@@ -3003,16 +3041,7 @@ const useFileUpload = _ref2 => {
               if (validatedJob.jobError) {
                 throw new HttpError(400, validatedJob.jobError.message, validatedJob.jobError);
               }
-              let results = [];
               if (validatedJob.summary.invalid > 0) {
-                const recordsResponse = await getFileImportJobRecords({
-                  projectKey,
-                  importContainerKey: containerKey,
-                  jobId,
-                  limit: 500,
-                  isValid: false
-                });
-                results = recordsResponse.results;
                 await safeDeleteContainer({
                   projectKey,
                   containerKey
@@ -3021,7 +3050,8 @@ const useFileUpload = _ref2 => {
               const result = {
                 containerKey,
                 summary: _objectSpread(_objectSpread({}, validatedJob.summary), {}, {
-                  results
+                  // TODO: Remove this once the old flow is fully removed
+                  results: []
                 }),
                 jobId,
                 job: validatedJob
@@ -3029,6 +3059,7 @@ const useFileUpload = _ref2 => {
               setIsUploading(false);
               setValidationProgress({
                 processed: 0,
+                total: 0,
                 isValidating: false
               });
               config.onSuccess(result);
@@ -3258,6 +3289,7 @@ exports.toImportApiResourceType = toImportApiResourceType;
 exports.uploadFileForImport = uploadFileForImport;
 exports.useFetchExportOperations = useFetchExportOperations;
 exports.useFetchFileImportJob = useFetchFileImportJob;
+exports.useFetchFileImportJobRecords = useFetchFileImportJobRecords;
 exports.useFetchImportContainerDetails = useFetchImportContainerDetails;
 exports.useFetchImportOperations = useFetchImportOperations;
 exports.useFetchImportSummaries = useFetchImportSummaries;

package/dist/commercetools-frontend-extensions-operations.cjs.prod.js

@@ -2671,6 +2671,39 @@ const useFetchFileImportJob = _ref => {
   });
 };
 
+const EMPTY_RESPONSE = {
+  results: [],
+  total: 0,
+  limit: 0,
+  offset: 0,
+  count: 0
+};
+const useFetchFileImportJobRecords = _ref => {
+  let projectKey = _ref.projectKey,
+    importContainerKey = _ref.importContainerKey,
+    jobId = _ref.jobId,
+    limit = _ref.limit,
+    offset = _ref.offset,
+    isValid = _ref.isValid,
+    _ref$skip = _ref.skip,
+    skip = _ref$skip === void 0 ? false : _ref$skip;
+  const shouldSkip = skip || !projectKey || !importContainerKey || !jobId;
+  const fetchData = React__default["default"].useCallback(() => {
+    if (shouldSkip) {
+      return _Promise__default["default"].resolve(EMPTY_RESPONSE);
+    }
+    return getFileImportJobRecords({
+      projectKey: projectKey,
+      importContainerKey: importContainerKey,
+      jobId: jobId,
+      limit,
+      offset,
+      isValid
+    });
+  }, [shouldSkip, projectKey, importContainerKey, jobId, limit, offset, isValid]);
+  return useFetch(fetchData);
+};
+
 const useFetchImportContainerDetails = _ref => {
   let projectKey = _ref.projectKey,
     importContainerKey = _ref.importContainerKey,
@@ -2938,6 +2971,7 @@ const useFileUpload = _ref2 => {
     setProgress = _React$useState4[1];
   const _React$useState5 = React__default["default"].useState({
       processed: 0,
+      total: 0,
       isValidating: false
     }),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -2954,6 +2988,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     setValidationProgress({
       processed: 0,
+      total: 0,
       isValidating: false
     });
   }, []);
@@ -2962,6 +2997,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     try {
       if (useJobBasedFlow) {
+        const totalResources = await countUniqueResourcesInCsv(config.file);
         await jobUpload.upload({
           file: config.file,
           resourceType: config.resourceType,
@@ -2971,6 +3007,7 @@ const useFileUpload = _ref2 => {
             try {
               setValidationProgress({
                 processed: 0,
+                total: totalResources,
                 isValidating: true
               });
               const validatedJob = await pollJobUntilValidated({
@@ -2984,6 +3021,7 @@ const useFileUpload = _ref2 => {
                   const processed = job.summary?.total ?? 0;
                   setValidationProgress({
                     processed,
+                    total: totalResources,
                     isValidating: true
                   });
                   config.onValidationProgress?.(job);
@@ -2995,16 +3033,7 @@ const useFileUpload = _ref2 => {
               if (validatedJob.jobError) {
                 throw new HttpError(400, validatedJob.jobError.message, validatedJob.jobError);
               }
-              let results = [];
               if (validatedJob.summary.invalid > 0) {
-                const recordsResponse = await getFileImportJobRecords({
-                  projectKey,
-                  importContainerKey: containerKey,
-                  jobId,
-                  limit: 500,
-                  isValid: false
-                });
-                results = recordsResponse.results;
                 await safeDeleteContainer({
                   projectKey,
                   containerKey
@@ -3013,7 +3042,8 @@ const useFileUpload = _ref2 => {
               const result = {
                 containerKey,
                 summary: _objectSpread(_objectSpread({}, validatedJob.summary), {}, {
-                  results
+                  // TODO: Remove this once the old flow is fully removed
+                  results: []
                 }),
                 jobId,
                 job: validatedJob
@@ -3021,6 +3051,7 @@ const useFileUpload = _ref2 => {
               setIsUploading(false);
               setValidationProgress({
                 processed: 0,
+                total: 0,
                 isValidating: false
               });
               config.onSuccess(result);
@@ -3250,6 +3281,7 @@ exports.toImportApiResourceType = toImportApiResourceType;
 exports.uploadFileForImport = uploadFileForImport;
 exports.useFetchExportOperations = useFetchExportOperations;
 exports.useFetchFileImportJob = useFetchFileImportJob;
+exports.useFetchFileImportJobRecords = useFetchFileImportJobRecords;
 exports.useFetchImportContainerDetails = useFetchImportContainerDetails;
 exports.useFetchImportOperations = useFetchImportOperations;
 exports.useFetchImportSummaries = useFetchImportSummaries;

package/dist/commercetools-frontend-extensions-operations.esm.js

@@ -2639,6 +2639,39 @@ const useFetchFileImportJob = _ref => {
   });
 };
 
+const EMPTY_RESPONSE = {
+  results: [],
+  total: 0,
+  limit: 0,
+  offset: 0,
+  count: 0
+};
+const useFetchFileImportJobRecords = _ref => {
+  let projectKey = _ref.projectKey,
+    importContainerKey = _ref.importContainerKey,
+    jobId = _ref.jobId,
+    limit = _ref.limit,
+    offset = _ref.offset,
+    isValid = _ref.isValid,
+    _ref$skip = _ref.skip,
+    skip = _ref$skip === void 0 ? false : _ref$skip;
+  const shouldSkip = skip || !projectKey || !importContainerKey || !jobId;
+  const fetchData = React.useCallback(() => {
+    if (shouldSkip) {
+      return _Promise.resolve(EMPTY_RESPONSE);
+    }
+    return getFileImportJobRecords({
+      projectKey: projectKey,
+      importContainerKey: importContainerKey,
+      jobId: jobId,
+      limit,
+      offset,
+      isValid
+    });
+  }, [shouldSkip, projectKey, importContainerKey, jobId, limit, offset, isValid]);
+  return useFetch(fetchData);
+};
+
 const useFetchImportContainerDetails = _ref => {
   let projectKey = _ref.projectKey,
     importContainerKey = _ref.importContainerKey,
@@ -2906,6 +2939,7 @@ const useFileUpload = _ref2 => {
     setProgress = _React$useState4[1];
   const _React$useState5 = React.useState({
       processed: 0,
+      total: 0,
       isValidating: false
     }),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -2922,6 +2956,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     setValidationProgress({
       processed: 0,
+      total: 0,
       isValidating: false
     });
   }, []);
@@ -2930,6 +2965,7 @@ const useFileUpload = _ref2 => {
     setProgress(0);
     try {
       if (useJobBasedFlow) {
+        const totalResources = await countUniqueResourcesInCsv(config.file);
         await jobUpload.upload({
           file: config.file,
           resourceType: config.resourceType,
@@ -2939,6 +2975,7 @@ const useFileUpload = _ref2 => {
             try {
               setValidationProgress({
                 processed: 0,
+                total: totalResources,
                 isValidating: true
               });
               const validatedJob = await pollJobUntilValidated({
@@ -2952,6 +2989,7 @@ const useFileUpload = _ref2 => {
                   const processed = job.summary?.total ?? 0;
                   setValidationProgress({
                     processed,
+                    total: totalResources,
                     isValidating: true
                   });
                   config.onValidationProgress?.(job);
@@ -2963,16 +3001,7 @@ const useFileUpload = _ref2 => {
               if (validatedJob.jobError) {
                 throw new HttpError(400, validatedJob.jobError.message, validatedJob.jobError);
               }
-              let results = [];
               if (validatedJob.summary.invalid > 0) {
-                const recordsResponse = await getFileImportJobRecords({
-                  projectKey,
-                  importContainerKey: containerKey,
-                  jobId,
-                  limit: 500,
-                  isValid: false
-                });
-                results = recordsResponse.results;
                 await safeDeleteContainer({
                   projectKey,
                   containerKey
@@ -2981,7 +3010,8 @@ const useFileUpload = _ref2 => {
               const result = {
                 containerKey,
                 summary: _objectSpread(_objectSpread({}, validatedJob.summary), {}, {
-                  results
+                  // TODO: Remove this once the old flow is fully removed
+                  results: []
                 }),
                 jobId,
                 job: validatedJob
@@ -2989,6 +3019,7 @@ const useFileUpload = _ref2 => {
               setIsUploading(false);
               setValidationProgress({
                 processed: 0,
+                total: 0,
                 isValidating: false
               });
               config.onSuccess(result);
@@ -3071,4 +3102,4 @@ const useFileUpload = _ref2 => {
   };
 };
 
-export { ActiveDragDropArea, COLUMN_DELIMITERS, CT_API_DOCS_URL, DELIMITERS, DisabledDropArea, DropAreaWrapper, EnabledDropArea, FILE_IMPORT_JOB_POLLING_INTERVAL, FileDropArea, FileDroppedArea, FileIcon, HttpError, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_ROW_COUNT, IMPORT_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_TAG_KEYS, IMPORT_TAG_VALUES, ImportStates, InfoBox, InvalidResponseError, LockIcon, NoResourcesToExportError, PollingAbortedError, ProjectKeyNotAvailableError, QueryPredicateError, RESOURCE_TYPE_DOCUMENTATION_LINKS, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, TAG_KEY_SOURCE_FILE_UPLOAD, UnexpectedColumnError, UnexpectedOperationStateError, UnexpectedResourceTypeError, UploadSeparator, UploadSettings, UploadingModal, allAutomatedImportOperations, allAutomatedImportOperationsResponse, allFileUploadImportOperations, allFileUploadImportOperationsResponse, appendCsvOrJsonExtensionIfAbsent, assertCancelContainerResponse, assertExportOperationsDownloadFileResponse, assertFileImportJob, assertFileImportJobRecordsResponse, assertFileUploadResponse, assertImportContainer, assertImportContainerPagedResponse, assertImportOperationPagedResponse, assertImportSummary, assertListFileImportJobsResponse, assertPaginatedExportOperationResponse, assertProcessFileImportJobResponse, assertProcessFileResponse, assertResourceType, automatedImportContainerKey, automatedImports, cancelImportContainerByKey, checkIfFileUploadImport, convertFileSizeToKB, countJsonFileItems, countUniqueResourcesInCsv, createFileImportJob, createImportContainerForFileUpload, decodeFileNameFromImportContainerKey, deleteFileImportJob, deleteImportContainer, dropAreaStyles, encodeFileNameWithTimestampToContainerKey, exportOperationsCompleted, exportOperationsProcessing, extractErrorDescriptionFromValidationMessage, fetchExportOperations, fetchImportContainerByKey, fetchImportContainerDetails, fetchImportContainers, fetchImportOperations, fetchImportSummaries, fetchImportSummary, fetchUsingXhr, fetcher, fileUploadImportContainerKey, fileUploadMissingKeysResponse, formatErrorCode, formatKeys, formatQueryString, getCreateImportContainerURL, getDeleteImportContainerURL, getExportOperationsURL, getFileImportJob, getFileImportJobByIdURL, getFileImportJobDeleteURL, getFileImportJobFileType, getFileImportJobProcessURL, getFileImportJobRecords, getFileImportJobRecordsURL, getFileImportJobsListURL, getFileImportJobsURL, getFileUploadErrorsCount, getFileUploadURL, getImportContainerByKeyURL, getImportContainerTasksURL, getImportContainersURL, getImportOperationsURL, getImportState, getImportSummaryURL, getMissingRequiredFields, getProccessFileURL, getRowCount, getValidatedColumns, hasOwnProperty, hasRequiredFields, hasSingleKeyColumn, importContainers, importStatesMap, importsSummaries, invalidFileImportJobRecordsResponse, invalidFileImportJobValidated, invalidFileUploadResponse, isAbortError, isError, isImportJobInitializing, isImportJobProcessing, isImportJobQueued, isImportJobReady, isImportJobRejected, isImportJobTerminal, isImportJobValidated, isResourceType, listFileImportJobs, manualImports, mapFileUploadErrorsToUploadFileErrorRows, mapFormikErrors, mapUploadFileErrorsResponseToUploadFileErrorRows, pollJobUntilValidated, processFileImportJob, processFileImportJobResponse, processUploadedFile, shouldContinuePollingForImportValidation, successfulAutomatedImportOperations, successfulAutomatedImportOperationsResponse, successfulFileUploadImportOperations, successfulFileUploadImportOperationsResponse, toBytes, toImportApiResourceType, uploadFileForImport, useFetchExportOperations, useFetchFileImportJob, useFetchImportContainerDetails, useFetchImportOperations, useFetchImportSummaries, useFileImportJobUpload, useFileUpload, useImportContainerUpload, validFileImportJobProcessing, validFileImportJobQueued, validFileImportJobRecordsResponse, validFileImportJobValidated, validFileUploadResponse, validProcessFileResponse, validateDelimiter };
+export { ActiveDragDropArea, COLUMN_DELIMITERS, CT_API_DOCS_URL, DELIMITERS, DisabledDropArea, DropAreaWrapper, EnabledDropArea, FILE_IMPORT_JOB_POLLING_INTERVAL, FileDropArea, FileDroppedArea, FileIcon, HttpError, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_ROW_COUNT, IMPORT_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_TAG_KEYS, IMPORT_TAG_VALUES, ImportStates, InfoBox, InvalidResponseError, LockIcon, NoResourcesToExportError, PollingAbortedError, ProjectKeyNotAvailableError, QueryPredicateError, RESOURCE_TYPE_DOCUMENTATION_LINKS, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, TAG_KEY_SOURCE_FILE_UPLOAD, UnexpectedColumnError, UnexpectedOperationStateError, UnexpectedResourceTypeError, UploadSeparator, UploadSettings, UploadingModal, allAutomatedImportOperations, allAutomatedImportOperationsResponse, allFileUploadImportOperations, allFileUploadImportOperationsResponse, appendCsvOrJsonExtensionIfAbsent, assertCancelContainerResponse, assertExportOperationsDownloadFileResponse, assertFileImportJob, assertFileImportJobRecordsResponse, assertFileUploadResponse, assertImportContainer, assertImportContainerPagedResponse, assertImportOperationPagedResponse, assertImportSummary, assertListFileImportJobsResponse, assertPaginatedExportOperationResponse, assertProcessFileImportJobResponse, assertProcessFileResponse, assertResourceType, automatedImportContainerKey, automatedImports, cancelImportContainerByKey, checkIfFileUploadImport, convertFileSizeToKB, countJsonFileItems, countUniqueResourcesInCsv, createFileImportJob, createImportContainerForFileUpload, decodeFileNameFromImportContainerKey, deleteFileImportJob, deleteImportContainer, dropAreaStyles, encodeFileNameWithTimestampToContainerKey, exportOperationsCompleted, exportOperationsProcessing, extractErrorDescriptionFromValidationMessage, fetchExportOperations, fetchImportContainerByKey, fetchImportContainerDetails, fetchImportContainers, fetchImportOperations, fetchImportSummaries, fetchImportSummary, fetchUsingXhr, fetcher, fileUploadImportContainerKey, fileUploadMissingKeysResponse, formatErrorCode, formatKeys, formatQueryString, getCreateImportContainerURL, getDeleteImportContainerURL, getExportOperationsURL, getFileImportJob, getFileImportJobByIdURL, getFileImportJobDeleteURL, getFileImportJobFileType, getFileImportJobProcessURL, getFileImportJobRecords, getFileImportJobRecordsURL, getFileImportJobsListURL, getFileImportJobsURL, getFileUploadErrorsCount, getFileUploadURL, getImportContainerByKeyURL, getImportContainerTasksURL, getImportContainersURL, getImportOperationsURL, getImportState, getImportSummaryURL, getMissingRequiredFields, getProccessFileURL, getRowCount, getValidatedColumns, hasOwnProperty, hasRequiredFields, hasSingleKeyColumn, importContainers, importStatesMap, importsSummaries, invalidFileImportJobRecordsResponse, invalidFileImportJobValidated, invalidFileUploadResponse, isAbortError, isError, isImportJobInitializing, isImportJobProcessing, isImportJobQueued, isImportJobReady, isImportJobRejected, isImportJobTerminal, isImportJobValidated, isResourceType, listFileImportJobs, manualImports, mapFileUploadErrorsToUploadFileErrorRows, mapFormikErrors, mapUploadFileErrorsResponseToUploadFileErrorRows, pollJobUntilValidated, processFileImportJob, processFileImportJobResponse, processUploadedFile, shouldContinuePollingForImportValidation, successfulAutomatedImportOperations, successfulAutomatedImportOperationsResponse, successfulFileUploadImportOperations, successfulFileUploadImportOperationsResponse, toBytes, toImportApiResourceType, uploadFileForImport, useFetchExportOperations, useFetchFileImportJob, useFetchFileImportJobRecords, useFetchImportContainerDetails, useFetchImportOperations, useFetchImportSummaries, useFileImportJobUpload, useFileUpload, useImportContainerUpload, validFileImportJobProcessing, validFileImportJobQueued, validFileImportJobRecordsResponse, validFileImportJobValidated, validFileUploadResponse, validProcessFileResponse, validateDelimiter };

package/dist/declarations/src/@hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./use-fetch-export-operations.js";
 export * from "./use-fetch-file-import-job.js";
+export * from "./use-fetch-file-import-job-records.js";
 export * from "./use-fetch-import-container-details.js";
 export * from "./use-fetch-import-operations.js";
 export * from "./use-fetch-import-summaries.js";

package/dist/declarations/src/@hooks/use-fetch-file-import-job-records.d.ts

@@ -0,0 +1,18 @@
+import type { FileImportJobRecordsResponse } from "../@types/index.js";
+type UseFetchFileImportJobRecordsConfig = {
+    projectKey?: string;
+    importContainerKey?: string;
+    jobId?: string;
+    limit?: number;
+    offset?: number;
+    isValid?: boolean;
+    skip?: boolean;
+};
+export declare const useFetchFileImportJobRecords: ({ projectKey, importContainerKey, jobId, limit, offset, isValid, skip, }: UseFetchFileImportJobRecordsConfig) => {
+    data: FileImportJobRecordsResponse | null;
+    error: Error | null;
+    isLoading: boolean;
+    refetch: () => void;
+    lastFetchTime: Date;
+};
+export {};

package/dist/declarations/src/@hooks/use-file-upload.d.ts

@@ -2,6 +2,7 @@ import type { ResourceTypeId } from '@commercetools/importapi-sdk';
 import type { ExtendedImportContainerDraft, FileUploadResult, FileImportJob } from "../@types/index.js";
 export type ValidationProgress = {
     processed: number;
+    total: number;
     isValidating: boolean;
 };
 export type FileUploadConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend-extensions/operations",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "license": "Proprietary",
   "publishConfig": {
     "access": "public"
@@ -18,14 +18,14 @@
     "react-dropzone": "14.3.8"
   },
   "devDependencies": {
-    "@commercetools-frontend/actions-global": "24.11.0",
-    "@commercetools-frontend/application-components": "24.11.0",
-    "@commercetools-frontend/application-shell": "24.11.0",
-    "@commercetools-frontend/application-shell-connectors": "24.11.0",
-    "@commercetools-frontend/constants": "24.11.0",
-    "@commercetools-frontend/jest-preset-mc-app": "24.11.0",
-    "@commercetools-frontend/permissions": "24.11.0",
-    "@commercetools-frontend/sentry": "24.11.0",
+    "@commercetools-frontend/actions-global": "24.12.0",
+    "@commercetools-frontend/application-components": "24.12.0",
+    "@commercetools-frontend/application-shell": "24.12.0",
+    "@commercetools-frontend/application-shell-connectors": "24.12.0",
+    "@commercetools-frontend/constants": "24.12.0",
+    "@commercetools-frontend/jest-preset-mc-app": "24.12.0",
+    "@commercetools-frontend/permissions": "24.12.0",
+    "@commercetools-frontend/sentry": "24.12.0",
     "@commercetools-frontend/ui-kit": "20.3.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",

package/src/@hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './use-fetch-export-operations'
 export * from './use-fetch-file-import-job'
+export * from './use-fetch-file-import-job-records'
 export * from './use-fetch-import-container-details'
 export * from './use-fetch-import-operations'
 export * from './use-fetch-import-summaries'

package/src/@hooks/use-fetch-file-import-job-records.ts

@@ -0,0 +1,58 @@
+import React from 'react'
+import { getFileImportJobRecords } from '../@api'
+import type { FileImportJobRecordsResponse } from '../@types'
+import { useFetch } from './use-fetch'
+
+type UseFetchFileImportJobRecordsConfig = {
+  projectKey?: string
+  importContainerKey?: string
+  jobId?: string
+  limit?: number
+  offset?: number
+  isValid?: boolean
+  skip?: boolean
+}
+
+const EMPTY_RESPONSE: FileImportJobRecordsResponse = {
+  results: [],
+  total: 0,
+  limit: 0,
+  offset: 0,
+  count: 0,
+}
+
+export const useFetchFileImportJobRecords = ({
+  projectKey,
+  importContainerKey,
+  jobId,
+  limit,
+  offset,
+  isValid,
+  skip = false,
+}: UseFetchFileImportJobRecordsConfig) => {
+  const shouldSkip = skip || !projectKey || !importContainerKey || !jobId
+
+  const fetchData = React.useCallback(() => {
+    if (shouldSkip) {
+      return Promise.resolve(EMPTY_RESPONSE)
+    }
+    return getFileImportJobRecords({
+      projectKey: projectKey!,
+      importContainerKey: importContainerKey!,
+      jobId: jobId!,
+      limit,
+      offset,
+      isValid,
+    })
+  }, [
+    shouldSkip,
+    projectKey,
+    importContainerKey,
+    jobId,
+    limit,
+    offset,
+    isValid,
+  ])
+
+  return useFetch<FileImportJobRecordsResponse>(fetchData)
+}

package/src/@hooks/use-file-upload.ts

@@ -2,9 +2,9 @@ import React from 'react'
 import type { ResourceTypeId } from '@commercetools/importapi-sdk'
 import { useImportContainerUpload } from './use-import-container-upload'
 import { useFileImportJobUpload } from './use-file-import-job-upload'
-import { getFileImportJobRecords, deleteImportContainer } from '../@api'
+import { deleteImportContainer } from '../@api'
 import { HttpError, PollingAbortedError } from '../@errors'
-import { pollJobUntilValidated } from '../@utils'
+import { pollJobUntilValidated, countUniqueResourcesInCsv } from '../@utils'
 import type {
   ExtendedImportContainerDraft,
   FileUploadResult,
@@ -13,6 +13,7 @@ import type {
 
 export type ValidationProgress = {
   processed: number
+  total: number
   isValidating: boolean
 }
 
@@ -60,6 +61,7 @@ export const useFileUpload = ({
   const [validationProgress, setValidationProgress] =
     React.useState<ValidationProgress>({
       processed: 0,
+      total: 0,
       isValidating: false,
     })
 
@@ -69,7 +71,7 @@ export const useFileUpload = ({
   const resetState = React.useCallback(() => {
     setIsUploading(false)
     setProgress(0)
-    setValidationProgress({ processed: 0, isValidating: false })
+    setValidationProgress({ processed: 0, total: 0, isValidating: false })
   }, [])
 
   const upload = React.useCallback(
@@ -79,6 +81,8 @@ export const useFileUpload = ({
 
       try {
         if (useJobBasedFlow) {
+          const totalResources = await countUniqueResourcesInCsv(config.file)
+
           await jobUpload.upload({
             file: config.file,
             resourceType: config.resourceType,
@@ -86,7 +90,11 @@ export const useFileUpload = ({
             abortSignal: config.abortSignal,
             onSuccess: async (jobId, containerKey) => {
               try {
-                setValidationProgress({ processed: 0, isValidating: true })
+                setValidationProgress({
+                  processed: 0,
+                  total: totalResources,
+                  isValidating: true,
+                })
 
                 const validatedJob = await pollJobUntilValidated({
                   projectKey,
@@ -97,7 +105,11 @@ export const useFileUpload = ({
                   abortSignal: config.abortSignal,
                   onJobUpdate: (job) => {
                     const processed = job.summary?.total ?? 0
-                    setValidationProgress({ processed, isValidating: true })
+                    setValidationProgress({
+                      processed,
+                      total: totalResources,
+                      isValidating: true,
+                    })
                     config.onValidationProgress?.(job)
                   },
                 })
@@ -112,16 +124,7 @@ export const useFileUpload = ({
                   )
                 }
 
-                let results: FileUploadResult['summary']['results'] = []
                 if (validatedJob.summary.invalid > 0) {
-                  const recordsResponse = await getFileImportJobRecords({
-                    projectKey,
-                    importContainerKey: containerKey,
-                    jobId,
-                    limit: 500,
-                    isValid: false,
-                  })
-                  results = recordsResponse.results
                   await safeDeleteContainer({ projectKey, containerKey })
                 }
 
@@ -129,14 +132,19 @@ export const useFileUpload = ({
                   containerKey,
                   summary: {
                     ...validatedJob.summary,
-                    results,
+                    // TODO: Remove this once the old flow is fully removed
+                    results: [],
                   },
                   jobId,
                   job: validatedJob,
                 }
 
                 setIsUploading(false)
-                setValidationProgress({ processed: 0, isValidating: false })
+                setValidationProgress({
+                  processed: 0,
+                  total: 0,
+                  isValidating: false,
+                })
                 config.onSuccess(result)
               } catch (error) {
                 await safeDeleteContainer({ projectKey, containerKey })