@commercetools-frontend-extensions/operations 0.0.0-canary-20251209161906

package/src/@utils/error-mapping.spec.ts

@@ -0,0 +1,126 @@
+import { mapUploadFileErrorsResponseToUploadFileErrorRows } from './error-mapping'
+
+type RowErrorsResponse = {
+  row?: number
+  index?: number
+  errors: Array<{ field: string; code: string; message: string }>
+}
+
+describe('mapUploadFileErrorsResponseToUploadFileErrorRows', () => {
+  it('should return an empty array if uploadFileErrorsResponse is undefined', () => {
+    const result = mapUploadFileErrorsResponseToUploadFileErrorRows(undefined)
+    expect(result).toEqual([])
+  })
+  it('should map the response errors correctly', () => {
+    const sampleErrorsResponse: Array<RowErrorsResponse> = [
+      {
+        row: 1,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"name.de2" is not allowed',
+            field: 'name.de2',
+          },
+          {
+            code: 'InvalidField',
+            message: '"name.enn" is not allowed',
+            field: 'name.enn',
+          },
+        ],
+      },
+      {
+        row: 2,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"slug.RU" is not allowed',
+            field: 'slug.RU',
+          },
+        ],
+      },
+    ]
+    const result =
+      mapUploadFileErrorsResponseToUploadFileErrorRows(sampleErrorsResponse)
+    expect(result).toMatchInlineSnapshot(`
+      [
+        {
+          "code": "InvalidField",
+          "field": "name.de2",
+          "id": "1",
+          "row": 1,
+          "validationMessage": ""name.de2" is not allowed",
+        },
+        {
+          "code": "InvalidField",
+          "field": "name.enn",
+          "id": "2",
+          "row": 1,
+          "validationMessage": ""name.enn" is not allowed",
+        },
+        {
+          "code": "InvalidField",
+          "field": "slug.RU",
+          "id": "3",
+          "row": 2,
+          "validationMessage": ""slug.RU" is not allowed",
+        },
+      ]
+    `)
+  })
+  it('should map the response errors correctly for json payload', () => {
+    const sampleErrorsResponse: Array<RowErrorsResponse> = [
+      {
+        index: 0,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"name.de2" is not allowed',
+            field: 'name.de2',
+          },
+          {
+            code: 'InvalidField',
+            message: '"name.enn" is not allowed',
+            field: 'name.enn',
+          },
+        ],
+      },
+      {
+        index: 1,
+        errors: [
+          {
+            code: 'InvalidField',
+            message: '"slug.RU" is not allowed',
+            field: 'slug.RU',
+          },
+        ],
+      },
+    ]
+    const result =
+      mapUploadFileErrorsResponseToUploadFileErrorRows(sampleErrorsResponse)
+    expect(result).toMatchInlineSnapshot(`
+      [
+        {
+          "code": "InvalidField",
+          "field": "name.de2",
+          "id": "1",
+          "index": 0,
+          "validationMessage": ""name.de2" is not allowed",
+        },
+        {
+          "code": "InvalidField",
+          "field": "name.enn",
+          "id": "2",
+          "index": 0,
+          "validationMessage": ""name.enn" is not allowed",
+        },
+        {
+          "code": "InvalidField",
+          "field": "slug.RU",
+          "id": "3",
+          "index": 1,
+          "validationMessage": ""slug.RU" is not allowed",
+        },
+      ]
+    `)
+  })
+})

package/src/@utils/error-mapping.ts

@@ -0,0 +1,40 @@
+export function getFileUploadErrorsCount(
+  errors?: Array<{ errors: Array<unknown> }>
+): number {
+  if (!errors || !Array.isArray(errors)) return 0
+  return errors.reduce((acc, curr) => (acc += curr.errors.length), 0)
+}
+
+// TODO: After fully migrating to new flow, remove `row` and only use `index`
+export function mapUploadFileErrorsResponseToUploadFileErrorRows(
+  uploadFileErrorsResponse?: Array<{
+    row?: number
+    index?: number
+    errors: Array<{ field: string; code: string; message: string }>
+  }>
+): Array<{
+  id: string
+  row?: number
+  index?: number
+  field: string
+  code: string
+  validationMessage: string
+}> {
+  if (!uploadFileErrorsResponse || !Array.isArray(uploadFileErrorsResponse))
+    return []
+  let idCounter = 1
+  return uploadFileErrorsResponse.flatMap((rowErrorsResponse) => {
+    // TODO: use `row` if available, otherwise fall back to `index`
+    // Old flow uses `row`, new flow uses `index`
+    const rowNumber = rowErrorsResponse.row ?? rowErrorsResponse.index
+
+    return rowErrorsResponse.errors.map((rowError) => ({
+      id: String(idCounter++),
+      row: rowNumber,
+      index: rowNumber,
+      field: rowError.field,
+      code: rowError.code,
+      validationMessage: rowError.message,
+    }))
+  })
+}

package/src/@utils/file-import-job-helpers.spec.ts

@@ -0,0 +1,147 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import type { FileImportJob } from '../@types'
+import {
+  getFileImportJobFileType,
+  isImportJobQueued,
+  isImportJobProcessing,
+  isImportJobValidated,
+  isImportJobInitializing,
+  isImportJobReady,
+  shouldContinuePollingForImportValidation,
+} from './file-import-job-helpers'
+
+describe('file-import-job-helpers', () => {
+  describe('getFileImportJobFileType', () => {
+    it('should return "json" for custom-object resource type', () => {
+      expect(getFileImportJobFileType('custom-object' as ResourceTypeId)).toBe(
+        'json'
+      )
+    })
+
+    it('should return "csv" for product resource type', () => {
+      expect(getFileImportJobFileType('product' as ResourceTypeId)).toBe('csv')
+    })
+
+    it('should return "csv" for category resource type', () => {
+      expect(getFileImportJobFileType('category' as ResourceTypeId)).toBe('csv')
+    })
+
+    it('should return "csv" for other resource types', () => {
+      expect(getFileImportJobFileType('price' as ResourceTypeId)).toBe('csv')
+      expect(
+        getFileImportJobFileType('inventory-entry' as ResourceTypeId)
+      ).toBe('csv')
+      expect(getFileImportJobFileType('customer' as ResourceTypeId)).toBe('csv')
+    })
+  })
+
+  const mockJob: FileImportJob = {
+    id: 'test-job-id',
+    fileName: 'test.csv',
+    importContainerKey: 'test-container',
+    state: 'validated',
+    summary: {
+      total: 100,
+      invalid: 5,
+      valid: 95,
+      fieldsCount: 10,
+      fields: ['field1', 'field2'],
+      ignoredFields: ['ignored1'],
+    },
+  }
+
+  describe('isImportJobQueued', () => {
+    it('should return true when job is queued', () => {
+      const queuedJob = { ...mockJob, state: 'queued' as const }
+      expect(isImportJobQueued(queuedJob)).toBe(true)
+    })
+
+    it('should return false when job is not queued', () => {
+      expect(isImportJobQueued(mockJob)).toBe(false)
+    })
+
+    it('should return false when job is undefined', () => {
+      expect(isImportJobQueued(undefined)).toBe(false)
+    })
+  })
+
+  describe('isImportJobProcessing', () => {
+    it('should return true when job is processing', () => {
+      const processingJob = { ...mockJob, state: 'processing' as const }
+      expect(isImportJobProcessing(processingJob)).toBe(true)
+    })
+
+    it('should return false when job is not processing', () => {
+      expect(isImportJobProcessing(mockJob)).toBe(false)
+    })
+  })
+
+  describe('isImportJobValidated', () => {
+    it('should return true when job is validated', () => {
+      expect(isImportJobValidated(mockJob)).toBe(true)
+    })
+
+    it('should return false when job is not validated', () => {
+      const processingJob = { ...mockJob, state: 'processing' as const }
+      expect(isImportJobValidated(processingJob)).toBe(false)
+    })
+
+    it('should return false when job is undefined', () => {
+      expect(isImportJobValidated(undefined)).toBe(false)
+    })
+  })
+
+  describe('isImportJobInitializing', () => {
+    it('should return true when job is initialising', () => {
+      const initialisingJob = { ...mockJob, state: 'initialising' as const }
+      expect(isImportJobInitializing(initialisingJob)).toBe(true)
+    })
+
+    it('should return false when job is not initialising', () => {
+      expect(isImportJobInitializing(mockJob)).toBe(false)
+    })
+  })
+
+  describe('isImportJobReady', () => {
+    it('should return true when job is ready', () => {
+      const readyJob = { ...mockJob, state: 'ready' as const }
+      expect(isImportJobReady(readyJob)).toBe(true)
+    })
+
+    it('should return false when job is not ready', () => {
+      expect(isImportJobReady(mockJob)).toBe(false)
+    })
+  })
+
+  describe('shouldContinuePollingForImportValidation', () => {
+    it('should return true when job is undefined', () => {
+      expect(shouldContinuePollingForImportValidation(undefined)).toBe(true)
+    })
+
+    it('should return true when job is queued', () => {
+      const queuedJob = { ...mockJob, state: 'queued' as const }
+      expect(shouldContinuePollingForImportValidation(queuedJob)).toBe(true)
+    })
+
+    it('should return true when job is processing', () => {
+      const processingJob = { ...mockJob, state: 'processing' as const }
+      expect(shouldContinuePollingForImportValidation(processingJob)).toBe(true)
+    })
+
+    it('should return false when job is validated', () => {
+      expect(shouldContinuePollingForImportValidation(mockJob)).toBe(false)
+    })
+
+    it('should return false when job is initialising', () => {
+      const initialisingJob = { ...mockJob, state: 'initialising' as const }
+      expect(shouldContinuePollingForImportValidation(initialisingJob)).toBe(
+        false
+      )
+    })
+
+    it('should return false when job is ready', () => {
+      const readyJob = { ...mockJob, state: 'ready' as const }
+      expect(shouldContinuePollingForImportValidation(readyJob)).toBe(false)
+    })
+  })
+})

package/src/@utils/file-import-job-helpers.ts

@@ -0,0 +1,47 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import type { FileImportJob } from '../@types'
+
+export function getFileImportJobFileType(
+  resourceType: ResourceTypeId
+): 'csv' | 'json' {
+  return resourceType === 'custom-object' ? 'json' : 'csv'
+}
+
+export function toImportApiResourceType(resourceType: string): string {
+  return resourceType === 'product' ? 'product-draft' : resourceType
+}
+
+export function isImportJobQueued(job?: FileImportJob): boolean {
+  return job?.state === 'queued'
+}
+
+export function isImportJobProcessing(job?: FileImportJob): boolean {
+  return job?.state === 'processing'
+}
+
+export function isImportJobValidated(job?: FileImportJob): boolean {
+  return job?.state === 'validated'
+}
+
+export function isImportJobInitializing(job?: FileImportJob): boolean {
+  return job?.state === 'initialising'
+}
+
+export function isImportJobReady(job?: FileImportJob): boolean {
+  return job?.state === 'ready'
+}
+
+export function isImportJobRejected(job?: FileImportJob): boolean {
+  return job?.state === 'rejected'
+}
+
+export function isImportJobTerminal(job?: FileImportJob): boolean {
+  return isImportJobValidated(job) || isImportJobRejected(job)
+}
+
+export function shouldContinuePollingForImportValidation(
+  job?: FileImportJob
+): boolean {
+  if (!job) return true
+  return isImportJobQueued(job) || isImportJobProcessing(job)
+}

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

@@ -0,0 +1,151 @@
+import { act } from '@testing-library/react'
+import { validateDelimiter, getRowCount } from './file-upload'
+import { COLUMN_DELIMITERS } from '../@constants'
+
+const createFakeFile = (content: string) => {
+  const blob = new Blob([content], { type: 'text/csv' })
+  return new File([blob], 'test.csv', {
+    type: 'text/csv',
+  })
+}
+
+describe('validateDelimiter', () => {
+  it('returns true for an allowed delimiter ","', async () => {
+    const fileContent =
+      'key,externalId,orderHint,name.de\nsample-category-key,sample-category-external-id,0.5,sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(true)
+  })
+  it('returns true for an allowed delimiter ";"', async () => {
+    const fileContent =
+      'key;externalId;orderHint;name.de\nsample-category-key;sample-category-external-id;0.5;sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(true)
+  })
+  it('returns true for an allowed delimiter "|"', async () => {
+    const fileContent =
+      'key|externalId|orderHint|name.de\nsample-category-key|sample-category-external-id|0.5|sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(true)
+  })
+  it('returns true for an allowed delimiter "\\t"', async () => {
+    const fileContent =
+      'key\texternalId\torderHint\tname.de\nsample-category-key\tsample-category-external-id\t0.5\tsample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(true)
+  })
+  it('returns false for a non-allowed delimiter "."', async () => {
+    const fileContent =
+      'key.externalId.orderHint.name.de\nsample-category-key.sample-category-external-id.0.5.sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(false)
+  })
+  it('returns false for a non-allowed delimiter " "', async () => {
+    const fileContent =
+      'key externalId orderHint name.de\nsample-category-key sample-category-external-id 0.5 sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(false)
+  })
+  it('returns false for a non-allowed delimiter "%"', async () => {
+    const fileContent =
+      'key%externalId%orderHint%name.de\nsample-category-key%sample-category-external-id%0.5%sample-category-name-de'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(false)
+  })
+  it('returns true for a single-column file', async () => {
+    const fileContent = 'key'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(true)
+  })
+  it('returns false for a file with undetectable delimiter', async () => {
+    const fileContent =
+      'key.externalId.orderHint.name\nvalue1.value2.value3.value4'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(false)
+  })
+  it('returns false for a file with a non allowed column delimiter', async () => {
+    const fileContent =
+      'key externalId orderHint name\nvalue1 value2 value3 value4'
+    const file = createFakeFile(fileContent)
+    let result: boolean = false
+    await act(async () => {
+      result = await validateDelimiter(file, COLUMN_DELIMITERS)
+    })
+    expect(result).toBe(false)
+  })
+})
+
+describe('getRowCount', () => {
+  it('returns count > 1 for a file with a header and at least one data row', async () => {
+    const fileContent = 'header1,header2\nsample-cell1,sample-cell2'
+    const file = createFakeFile(fileContent)
+    let rowCount: number
+    await act(async () => {
+      rowCount = await getRowCount(file)
+    })
+    expect(rowCount!).toBeGreaterThanOrEqual(1)
+  })
+  it('returns count of 0 for a file with only a header', async () => {
+    const fileContent = 'header1,header2'
+    const file = createFakeFile(fileContent)
+    let rowCount: number
+    await act(async () => {
+      rowCount = await getRowCount(file)
+    })
+    expect(rowCount!).toBe(0)
+  })
+  it('returns count of 0 for a file with only a header and empty line', async () => {
+    const fileContent = 'header1,header2\n'
+    const file = createFakeFile(fileContent)
+    let rowCount: number
+    await act(async () => {
+      rowCount = await getRowCount(file)
+    })
+    expect(rowCount!).toBe(0)
+  })
+  it('returns count of 0 for an empty file', async () => {
+    const fileContent = ''
+    const file = createFakeFile(fileContent)
+    let rowCount: number
+    await act(async () => {
+      rowCount = await getRowCount(file)
+    })
+    expect(rowCount!).toBe(0)
+  })
+})

package/src/@utils/file-upload.ts

@@ -0,0 +1,189 @@
+import Papa from 'papaparse'
+
+/**
+ * Convert megabytes to bytes
+ */
+export const toBytes = (megabytes: number): number => megabytes * 1024 * 1024
+
+/**
+ * Returns the number of rows in a CSV file excluding the header
+ * @param file The CSV file to process
+ * @returns A promise that resolves to the number of rows
+ */
+export const getRowCount = (file: File): Promise<number> => {
+  return new Promise((resolve) => {
+    let lineCount = 0
+    Papa.parse(file, {
+      step: ({ data }: { data: unknown[] }) => {
+        // empty lines at the end of the file should not be counted
+        if (Array.isArray(data) && data.find(Boolean)) lineCount++
+      },
+      complete: () => {
+        // Subtract 1 for the header row
+        // We use Math.max to make sure the count is not less than 0, this is needed for empty files
+        resolve(Math.max(0, lineCount - 1))
+      },
+    })
+  })
+}
+
+/**
+ * Check if a CSV file has a single key column
+ * @param file The CSV file to check
+ * @returns A promise that resolves to true if the file has only one column named 'key'
+ */
+export const hasSingleKeyColumn = (file: File): Promise<boolean> => {
+  return new Promise((resolve) => {
+    Papa.parse(file, {
+      preview: 1,
+      complete: (result) => {
+        const headerRow = result.data?.[0]
+        const hasSingleColumn =
+          Array.isArray(headerRow) && headerRow.length === 1
+        const isKeyColumn =
+          hasSingleColumn && headerRow[0].toLowerCase() === 'key'
+        resolve(isKeyColumn)
+      },
+    })
+  })
+}
+
+/**
+ * Validate delimiter in a CSV file
+ * @param file The CSV file to validate
+ * @param allowedDelimiters Array of allowed delimiters
+ * @returns A promise that resolves to false if delimiter is invalid
+ */
+export const validateDelimiter = (
+  file: File,
+  allowedDelimiters: string[]
+): Promise<boolean> => {
+  // Delimiters not included in this array may be treated as part of a column content
+  // potentially causing the file to be parsed as a single-column CSV and pass this validation
+  const NON_ALLOWED_COLUMN_DELIMITERS = ['%', '.', ' ']
+  const DELIMITERS_TO_GUESS = [
+    ...allowedDelimiters,
+    ...NON_ALLOWED_COLUMN_DELIMITERS,
+  ]
+
+  return new Promise((resolve) => {
+    Papa.parse<unknown[]>(file, {
+      delimitersToGuess: DELIMITERS_TO_GUESS,
+      preview: 10,
+      complete: (result) => {
+        const headerRow = result.data?.[0]
+        const isOnlyOneColumn =
+          Array.isArray(headerRow) && headerRow.length === 1
+
+        if (isOnlyOneColumn) {
+          resolve(true)
+          return
+        }
+
+        const detectedDelimiter = result.meta.delimiter
+        let isValid = false
+
+        if (
+          detectedDelimiter !== null &&
+          allowedDelimiters.includes(detectedDelimiter)
+        ) {
+          const isUndetectableDelimiter = result.errors.some(
+            (error) => error.code === 'UndetectableDelimiter'
+          )
+          if (!isUndetectableDelimiter) {
+            isValid = true
+          }
+        }
+        resolve(isValid)
+      },
+    })
+  })
+}
+
+/**
+ * Returns columns from the provided `columns` excluding those specified in the `ignoredColumns`
+ */
+export const getValidatedColumns = (
+  columns: string[],
+  ignoredColumns: string[]
+): string[] => {
+  return columns.filter((column) => !ignoredColumns.includes(column))
+}
+
+/**
+ * Count items in a JSON file
+ * @param file The JSON file to process
+ * @returns Object with isValid flag and optional itemsCount
+ */
+export const countJsonFileItems = async (
+  file: File
+): Promise<{ isValid: false } | { isValid: true; itemsCount: number }> => {
+  const jsonContent = await file.text()
+  try {
+    const content = JSON.parse(jsonContent)
+    const isValid = Array.isArray(content)
+    if (isValid) {
+      return { isValid, itemsCount: content.length }
+    }
+    return { isValid }
+  } catch {
+    return { isValid: false }
+  }
+}
+
+/**
+ * Count unique resources in a CSV file by counting unique values in the "key" column.
+ * A single resource can span multiple rows (when it has array fields like variants, assets...),
+ * so we count unique keys rather than rows.
+ * @param file The CSV file to process
+ * @returns A promise that resolves to the number of unique resources
+ */
+export const countUniqueResourcesInCsv = (file: File): Promise<number> => {
+  return new Promise((resolve) => {
+    const uniqueKeys = new Set<string>()
+    let keyColumnIndex = -1
+    let isFirstRow = true
+
+    Papa.parse<string[]>(file, {
+      step: ({ data }) => {
+        if (!Array.isArray(data)) return
+
+        if (isFirstRow) {
+          keyColumnIndex = data.findIndex(
+            (col) => col?.toLowerCase().trim() === 'key'
+          )
+          isFirstRow = false
+          return
+        }
+
+        if (keyColumnIndex === -1) return
+
+        const keyValue = data[keyColumnIndex]?.trim()
+        if (keyValue) {
+          uniqueKeys.add(keyValue)
+        }
+      },
+      complete: () => {
+        resolve(uniqueKeys.size)
+      },
+    })
+  })
+}
+
+/**
+ * Map file upload errors to upload file error rows with unique IDs
+ * @param uploadFileErrors Array of file upload errors
+ * @returns Array of upload file errors with unique id field
+ */
+export const mapFileUploadErrorsToUploadFileErrorRows = <
+  T extends Record<string, unknown>
+>(
+  uploadFileErrors: T[]
+): Array<T & { id: string }> => {
+  let idCounter = 1
+  return uploadFileErrors.map((uploadFileError) => ({
+    // DataTable component requires unique `id` field
+    ...uploadFileError,
+    id: String(idCounter++),
+  }))
+}