@commercetools-frontend-extensions/operations 2.0.1 → 3.0.0

package/src/@api/file-import-jobs.ts

@@ -0,0 +1,217 @@
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import type {
+  FileImportJob,
+  CreateFileImportJobParameters,
+  GetFileImportJobParameters,
+  GetFileImportJobRecordsParameters,
+  ProcessFileImportJobParameters,
+  ProcessFileImportJobResponse,
+  DeleteFileImportJobParameters,
+  ListFileImportJobsParameters,
+  ListFileImportJobsResponse,
+  FileImportJobRecordsResponse,
+} from '../@types'
+import {
+  assertFileImportJob,
+  assertFileImportJobRecordsResponse,
+  assertProcessFileImportJobResponse,
+  assertListFileImportJobsResponse,
+} from '../@types'
+import { fetcher, fetchUsingXhr } from './fetcher'
+import {
+  getFileImportJobsURL,
+  getFileImportJobByIdURL,
+  getFileImportJobRecordsURL,
+  getFileImportJobProcessURL,
+  getFileImportJobDeleteURL,
+  getFileImportJobsListURL,
+} from './urls'
+import { formatQueryString } from '../@utils'
+
+export function createFileImportJob({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  payload,
+  onProgress,
+  abortSignal,
+}: CreateFileImportJobParameters): Promise<FileImportJob> {
+  const url = getFileImportJobsURL({
+    projectKey,
+    resourceType,
+    importContainerKey,
+  })
+
+  if ('fileType' in payload) {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData()
+      formData.append('fileType', payload.fileType)
+      formData.append('fileName', payload.fileName)
+      formData.append('file', payload.file, payload.fileName)
+
+      fetchUsingXhr({
+        url,
+        payload: formData,
+        config: {
+          proxy: MC_API_PROXY_TARGETS.IMPORT,
+          method: 'POST',
+          headers: {
+            'Content-Type': null,
+          },
+          abortSignal,
+        },
+        onProgress: onProgress || (() => {}),
+        onSuccess: (response: FileImportJob) => {
+          assertFileImportJob(response)
+          resolve(response)
+        },
+        onError: reject,
+      })
+    })
+  }
+
+  return fetcher<FileImportJob>({
+    url,
+    payload: JSON.stringify(payload),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    },
+  }).then((response) => {
+    assertFileImportJob(response)
+    return response
+  })
+}
+
+export async function getFileImportJob({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: GetFileImportJobParameters): Promise<FileImportJob> {
+  const url = getFileImportJobByIdURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+
+  const response = await fetcher<FileImportJob>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertFileImportJob(response)
+  return response
+}
+
+export async function getFileImportJobRecords({
+  projectKey,
+  importContainerKey,
+  jobId,
+  limit,
+  offset,
+  isValid,
+}: GetFileImportJobRecordsParameters): Promise<FileImportJobRecordsResponse> {
+  const baseUrl = getFileImportJobRecordsURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+  const queryString = formatQueryString({ limit, offset, isValid })
+  const url = `${baseUrl}${queryString}`
+
+  const response = await fetcher<FileImportJobRecordsResponse>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertFileImportJobRecordsResponse(response)
+  return response
+}
+
+export async function processFileImportJob({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  jobId,
+  action,
+}: ProcessFileImportJobParameters): Promise<ProcessFileImportJobResponse> {
+  const url = getFileImportJobProcessURL({
+    projectKey,
+    resourceType,
+    importContainerKey,
+    jobId,
+  })
+
+  const payload = action ? { action } : {}
+
+  const response = await fetcher<ProcessFileImportJobResponse>({
+    url,
+    payload: JSON.stringify(payload),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    },
+  })
+
+  assertProcessFileImportJobResponse(response)
+  return response
+}
+
+export async function deleteFileImportJob({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: DeleteFileImportJobParameters): Promise<void> {
+  const url = getFileImportJobDeleteURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+
+  await fetcher<void>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'DELETE',
+    },
+  })
+}
+
+export async function listFileImportJobs({
+  projectKey,
+  importContainerKey,
+  limit,
+  offset,
+}: ListFileImportJobsParameters): Promise<ListFileImportJobsResponse> {
+  const baseUrl = getFileImportJobsListURL({
+    projectKey,
+    importContainerKey,
+  })
+  const queryString = formatQueryString({ limit, offset })
+  const url = `${baseUrl}${queryString}`
+
+  const response = await fetcher<ListFileImportJobsResponse>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertListFileImportJobsResponse(response)
+  return response
+}

package/src/@api/file-upload.spec.ts

@@ -10,10 +10,12 @@ const validFileUploadResponse: FileUploadResponse = {
   invalid: 0,
   fileName: 'file.csv',
   itemsCount: 0,
+  // TODO: Remove rowsCount and columnsCount once we remove the old flow
   rowsCount: 0,
   columnsCount: 0,
-  columns: [],
-  ignoredColumns: [],
+  //
+  fields: ['id', 'name', 'description'],
+  ignoredFields: ['id', 'name'],
 }
 
 type ResourceTypeEntry = {

package/src/@api/index.ts

@@ -1,5 +1,6 @@
 export * from './fetcher'
 export * from './file-upload'
+export * from './file-import-jobs'
 export * from './import-containers'
 export * from './import-operations'
 export * from './export-operations'

package/src/@api/test-fixtures.ts

@@ -3,7 +3,10 @@ import {
   type ExportOperation,
   ImportStates,
   type ImportSummary,
-  FileUploadResponse,
+  type FileUploadResponse,
+  type FileImportJob,
+  type FileImportJobRecordsResponse,
+  type ProcessFileImportJobResponse,
 } from '../@types'
 import { TAG_KEY_SOURCE_FILE_UPLOAD } from '../@constants'
 
@@ -292,7 +295,7 @@ export const validFileUploadResponse: FileUploadResponse = {
   itemsCount: 2,
   rowsCount: 2,
   columnsCount: 11,
-  columns: [
+  fields: [
     'id',
     'lastModifiedAt',
     'key',
@@ -305,7 +308,7 @@ export const validFileUploadResponse: FileUploadResponse = {
     'description.en',
     'description.de',
   ],
-  ignoredColumns: ['id', 'lastModifiedAt'],
+  ignoredFields: ['id', 'lastModifiedAt'],
 }
 
 export const invalidFileUploadResponse: FileUploadResponse = {
@@ -315,7 +318,7 @@ export const invalidFileUploadResponse: FileUploadResponse = {
   itemsCount: 2,
   rowsCount: 2,
   columnsCount: 11,
-  columns: [
+  fields: [
     'key',
     'externalId2',
     'orderHint',
@@ -328,7 +331,7 @@ export const invalidFileUploadResponse: FileUploadResponse = {
     'test1',
     'test2',
   ],
-  ignoredColumns: [],
+  ignoredFields: [],
   results: [
     {
       row: 1,
@@ -770,3 +773,122 @@ export const exportOperationsProcessing: ExportOperation[] = [
     locales: ['en'],
   },
 ]
+
+export const validFileImportJobQueued: FileImportJob = {
+  id: 'job-uuid-12345',
+  fileName: 'categories.csv',
+  importContainerKey: 'container-key',
+  state: 'queued',
+  summary: {
+    total: 0,
+    valid: 0,
+    invalid: 0,
+    fieldsCount: 0,
+    fields: [],
+    ignoredFields: [],
+  },
+}
+
+export const validFileImportJobProcessing: FileImportJob = {
+  id: 'job-uuid-12345',
+  fileName: 'categories.csv',
+  importContainerKey: 'container-key',
+  state: 'processing',
+  summary: {
+    total: 0,
+    valid: 0,
+    invalid: 0,
+    fieldsCount: 0,
+    fields: [],
+    ignoredFields: [],
+  },
+}
+
+export const validFileImportJobValidated: FileImportJob = {
+  id: 'job-uuid-12345',
+  fileName: 'categories.csv',
+  importContainerKey: 'container-key',
+  state: 'validated',
+  summary: {
+    total: 2,
+    valid: 2,
+    invalid: 0,
+    fieldsCount: 2,
+    fields: ['key', 'name.en'],
+    ignoredFields: ['id', 'lastModifiedAt'],
+  },
+}
+
+export const invalidFileImportJobValidated: FileImportJob = {
+  id: 'job-uuid-12345',
+  fileName: 'categories.csv',
+  importContainerKey: 'container-key',
+  state: 'validated',
+  summary: {
+    total: 2,
+    valid: 0,
+    invalid: 2,
+    fieldsCount: 11,
+    fields: [
+      'key',
+      'externalId2',
+      'orderHint',
+      'name.de2',
+      'description.de2',
+      'slug.RU',
+      'name.enn',
+      'description.en',
+      'slug.RU',
+      'test1',
+      'test2',
+    ],
+    ignoredFields: [],
+  },
+}
+
+export const validFileImportJobRecordsResponse: FileImportJobRecordsResponse = {
+  results: [],
+  total: 0,
+  limit: 20,
+  offset: 0,
+  count: 0,
+}
+
+export const invalidFileImportJobRecordsResponse: FileImportJobRecordsResponse =
+  {
+    results: [
+      {
+        index: 1,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"externalId2" is not allowed',
+            field: 'externalId2',
+          },
+          {
+            code: 'InvalidField',
+            message: '"orderHint" is not allowed',
+            field: 'orderHint',
+          },
+        ],
+      },
+      {
+        index: 2,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"name.de2" is not allowed',
+            field: 'name.de2',
+          },
+        ],
+      },
+    ],
+    total: 2,
+    limit: 20,
+    offset: 0,
+    count: 2,
+  }
+
+export const processFileImportJobResponse: ProcessFileImportJobResponse = {
+  message: 'acknowledged',
+}

package/src/@api/urls.ts

@@ -1,6 +1,6 @@
 import type { ResourceTypeId } from '@commercetools/importapi-sdk'
 import { plural } from 'pluralize'
-import { formatQueryString } from '../@utils'
+import { formatQueryString, toImportApiResourceType } from '../@utils'
 import type {
   ImportContainerQueryParams,
   ExportOperationQueryParams,
@@ -116,3 +116,79 @@ export function getExportOperationsURL({
   const queryString = formatQueryString(queryParams)
   return `/${projectKey}/export-operations${queryString}`
 }
+
+export function getFileImportJobsURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+}: {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/${plural(
+    toImportApiResourceType(resourceType)
+  )}/import-containers/${importContainerKey}/file-import-jobs`
+}
+
+export function getFileImportJobByIdURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}`
+}
+
+export function getFileImportJobRecordsURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}/records`
+}
+
+export function getFileImportJobProcessURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/${plural(
+    toImportApiResourceType(resourceType)
+  )}/import-containers/${importContainerKey}/file-import-jobs/${jobId}/process`
+}
+
+export function getFileImportJobDeleteURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}`
+}
+
+export function getFileImportJobsListURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs`
+}

package/src/@components/uploading-modal/uploading-modal.tsx

@@ -1,4 +1,3 @@
-import { useIntl } from 'react-intl'
 import { InfoDialog } from '@commercetools-frontend/application-components'
 import {
   Constraints,
@@ -15,10 +14,11 @@ type UploadingModalProps = {
   title: string
   fileName: string
   fileSize: number
-  progress: number
+  progress?: number
   cancelLabel: string
   onCancel: () => void
   onClose: () => void
+  statusMessage?: string
 }
 
 export const UploadingModal = ({
@@ -30,8 +30,8 @@ export const UploadingModal = ({
   cancelLabel,
   onCancel,
   onClose,
+  statusMessage,
 }: UploadingModalProps) => {
-  const intl = useIntl()
   return (
     <InfoDialog size={16} isOpen={isOpen} title={title} onClose={onClose}>
       <Spacings.Stack scale="m">
@@ -46,7 +46,7 @@ export const UploadingModal = ({
               </Constraints.Horizontal>
             </Spacings.Inline>
             <Text.Body tone="secondary">
-              ({intl.formatNumber(convertFileSizeToKB(fileSize))} KB)
+              ({convertFileSizeToKB(fileSize).toLocaleString()} KB)
             </Text.Body>
           </Spacings.Inline>
           <SecondaryButton
@@ -57,7 +57,9 @@ export const UploadingModal = ({
           />
         </Spacings.Inline>
         <ProgressBar barWidth="scale" height="10" progress={progress} />
-        <div />
+        {statusMessage && (
+          <Text.Detail tone="tertiary">{statusMessage}</Text.Detail>
+        )}
       </Spacings.Stack>
     </InfoDialog>
   )

package/src/@constants/file-import-job.ts

@@ -0,0 +1 @@
+export const FILE_IMPORT_JOB_POLLING_INTERVAL = 2000

package/src/@constants/import-limits.ts

@@ -0,0 +1,13 @@
+export const IMPORT_MAX_FILE_SIZE_MB = 200
+
+export const IMPORT_MAX_ITEM_COUNT = 500_000
+
+// =============================================================================
+// Legacy constants (old flow) - Remove after testing and migration is complete
+// =============================================================================
+
+/** @deprecated Use IMPORT_MAX_FILE_SIZE_MB instead. Remove after migration. */
+export const IMPORT_LEGACY_MAX_FILE_SIZE_MB = 35
+
+/** @deprecated Use IMPORT_MAX_ITEM_COUNT instead. Remove after migration. */
+export const IMPORT_LEGACY_MAX_ROW_COUNT = 80_000

package/src/@constants/index.ts

@@ -1,4 +1,5 @@
 export * from './delimiters'
+export * from './file-import-job'
+export * from './import-limits'
 export * from './import-tags'
 export * from './resource-links'
-export * from './upload-limits'

package/src/@errors/index.ts

@@ -1,8 +1,9 @@
-export * from './unexpected-column-error'
-export * from './unexpected-operation-state-error'
-export * from './unexpected-resource-type-error'
 export * from './http-error'
 export * from './invalid-response-error'
-export * from './query-predicate-error'
 export * from './no-resources-to-export-error'
+export * from './polling-aborted-error'
 export * from './project-key-not-available-error'
+export * from './query-predicate-error'
+export * from './unexpected-column-error'
+export * from './unexpected-operation-state-error'
+export * from './unexpected-resource-type-error'

package/src/@errors/polling-aborted-error.ts

@@ -0,0 +1,6 @@
+export class PollingAbortedError extends Error {
+  constructor() {
+    super('Polling was aborted')
+    this.name = 'PollingAbortedError'
+  }
+}

package/src/@hooks/index.ts

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