@commercetools-frontend-extensions/operations 0.0.0

package/src/@hooks/use-import-container-upload.spec.ts

@@ -0,0 +1,294 @@
+import { renderHook, waitFor, act } from '@testing-library/react'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  uploadFileForImport,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import {
+  useImportContainerUpload,
+  type UseImportContainerUploadConfig,
+} from './use-import-container-upload'
+
+jest.mock('../@api')
+jest.mock('../@utils')
+
+const mockCreateImportContainerForFileUpload =
+  createImportContainerForFileUpload as jest.MockedFunction<
+    typeof createImportContainerForFileUpload
+  >
+const mockUploadFileForImport = uploadFileForImport as jest.MockedFunction<
+  typeof uploadFileForImport
+>
+const mockDeleteImportContainer = deleteImportContainer as jest.MockedFunction<
+  typeof deleteImportContainer
+>
+const mockEncodeFileNameWithTimestampToContainerKey =
+  encodeFileNameWithTimestampToContainerKey as jest.MockedFunction<
+    typeof encodeFileNameWithTimestampToContainerKey
+  >
+
+describe('useImportContainerUpload', () => {
+  const projectKey = 'test-with-big-data'
+  const importContainerKey = 'test-container-key'
+  const mockFile = new File(['test content'], 'test.csv', { type: 'text/csv' })
+  const mockXhr = { abort: jest.fn() } as unknown as XMLHttpRequest
+  const mockFileUploadResponse = {
+    results: [],
+    invalid: 0,
+    valid: 10,
+    fileName: 'test.csv',
+    itemsCount: 10,
+    rowsCount: 10,
+    columnsCount: 2,
+    columns: ['key', 'value'],
+    ignoredColumns: [],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEncodeFileNameWithTimestampToContainerKey.mockReturnValue(
+      importContainerKey
+    )
+    mockCreateImportContainerForFileUpload.mockResolvedValue(undefined)
+    mockDeleteImportContainer.mockResolvedValue(undefined)
+  })
+
+  it('should throw "ProjectKeyNotAvailableError" if "projectKey" is not available', async () => {
+    const { result } = renderHook(() =>
+      // @ts-ignore
+      useImportContainerUpload({ projectKey: undefined })
+    )
+
+    await expect(
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    ).rejects.toThrow(ProjectKeyNotAvailableError)
+  })
+
+  it('should create container and upload file successfully', async () => {
+    const onSuccess = jest.fn()
+    const onProgress = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(({ onSuccess: _onSuccess }) => {
+      _onSuccess(mockFileUploadResponse)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    const uploadConfig: UseImportContainerUploadConfig = {
+      file: mockFile,
+      resourceType: 'product',
+      settings: { format: 'CSV' },
+      onSuccess,
+      onProgress,
+    }
+
+    await act(async () => {
+      await result.current.upload(uploadConfig)
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'product',
+        tags: ['source:file-upload'],
+        settings: { format: 'CSV' },
+      },
+      projectKey,
+    })
+
+    expect(mockUploadFileForImport).toHaveBeenCalledWith({
+      projectKey,
+      importContainerKey,
+      resourceType: 'product',
+      file: mockFile,
+      onSuccess: expect.any(Function),
+      onProgress: expect.any(Function),
+      onError: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith(
+      mockFileUploadResponse,
+      importContainerKey
+    )
+  })
+
+  it('should delete container on upload error', async () => {
+    const onError = jest.fn()
+    const uploadError = new Error('Upload failed')
+
+    mockUploadFileForImport.mockImplementation(({ onError: _onError }) => {
+      _onError?.(uploadError)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onError,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+        projectKey,
+        importContainerKey,
+      })
+    })
+    expect(onError).toHaveBeenCalledWith(uploadError)
+  })
+
+  it('should delete container if upload throws before starting', async () => {
+    const error = new Error('Container creation failed')
+    mockCreateImportContainerForFileUpload.mockRejectedValue(error)
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await expect(
+      act(async () => {
+        await result.current.upload({
+          file: mockFile,
+          resourceType: 'product',
+          onSuccess: jest.fn(),
+        })
+      })
+    ).rejects.toThrow(error)
+
+    expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+      projectKey,
+      importContainerKey,
+    })
+  })
+
+  it('should update progress during upload', async () => {
+    const onProgress = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(
+      ({ onProgress: _onProgress }) => {
+        _onProgress?.(50)
+        _onProgress?.(100)
+        return mockXhr
+      }
+    )
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onProgress,
+      })
+    })
+
+    expect(onProgress).toHaveBeenCalledWith(50)
+    expect(onProgress).toHaveBeenCalledWith(100)
+  })
+
+  it('should update isUploading state correctly', async () => {
+    mockUploadFileForImport.mockImplementation(({ onSuccess }) => {
+      setTimeout(() => onSuccess(mockFileUploadResponse), 100)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    expect(result.current.isUploading).toBe(false)
+
+    act(() => {
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    expect(result.current.isUploading).toBe(true)
+
+    await waitFor(() => {
+      expect(result.current.isUploading).toBe(false)
+    })
+  })
+
+  it('should abort upload when abort is called', async () => {
+    mockUploadFileForImport.mockReturnValue(mockXhr)
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    act(() => {
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockUploadFileForImport).toHaveBeenCalled()
+    })
+
+    act(() => {
+      result.current.abort()
+    })
+
+    expect(mockXhr.abort).toHaveBeenCalled()
+  })
+
+  it('should work without optional settings', async () => {
+    const onSuccess = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(({ onSuccess: _onSuccess }) => {
+      _onSuccess(mockFileUploadResponse)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess,
+      })
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'product',
+        tags: ['source:file-upload'],
+      },
+      projectKey,
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith(
+      mockFileUploadResponse,
+      importContainerKey
+    )
+  })
+})

package/src/@hooks/use-import-container-upload.ts

@@ -0,0 +1,126 @@
+import React from 'react'
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  uploadFileForImport,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { TAG_KEY_SOURCE_FILE_UPLOAD } from '../@constants'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import type {
+  FileUploadResponse,
+  ExtendedImportContainerDraft,
+} from '../@types'
+
+export type UseImportContainerUploadConfig = {
+  file: File
+  resourceType: ResourceTypeId
+  settings?: ExtendedImportContainerDraft['settings']
+  onSuccess: (response: FileUploadResponse, importContainerKey: string) => void
+  onError?: (error: unknown) => void
+  onProgress?: (progress: number) => void
+}
+
+export const useImportContainerUpload = ({
+  projectKey,
+}: {
+  projectKey: string
+}) => {
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+  const xhrRef = React.useRef<XMLHttpRequest | null>(null)
+
+  const upload = async ({
+    file,
+    resourceType,
+    settings,
+    onSuccess,
+    onError,
+    onProgress,
+  }: UseImportContainerUploadConfig): Promise<XMLHttpRequest> => {
+    if (!projectKey) {
+      throw new ProjectKeyNotAvailableError()
+    }
+
+    setIsUploading(true)
+    setProgress(0)
+
+    const importContainerKey = encodeFileNameWithTimestampToContainerKey(
+      file.name
+    )
+
+    try {
+      await createImportContainerForFileUpload({
+        importContainerDraft: {
+          key: importContainerKey,
+          resourceType,
+          tags: [TAG_KEY_SOURCE_FILE_UPLOAD],
+          ...(settings ? { settings } : {}),
+        },
+        projectKey,
+      })
+
+      const xhr = uploadFileForImport({
+        projectKey,
+        importContainerKey,
+        resourceType,
+        file,
+        onSuccess: (response) => {
+          setIsUploading(false)
+          setProgress(100)
+          onSuccess(response, importContainerKey)
+        },
+        onProgress: (prog) => {
+          setProgress(prog)
+          onProgress?.(prog)
+        },
+        onError: async (error) => {
+          try {
+            await deleteImportContainer({
+              projectKey,
+              importContainerKey,
+            })
+          } catch {
+            // Ignore cleanup errors - container will be cleaned up by TTL retention policy
+            // Cleanup errors are unlikely unless there is a network issue or container was removed externally
+          }
+
+          setIsUploading(false)
+          setProgress(0)
+          onError?.(error)
+        },
+      })
+
+      xhrRef.current = xhr
+      return xhr
+    } catch (error) {
+      try {
+        await deleteImportContainer({
+          projectKey,
+          importContainerKey,
+        })
+      } catch {
+        // Ignore cleanup errors - container will be cleaned up by TTL retention policy
+        // Cleanup errors are unlikely unless there is a network issue or container was removed externally
+      }
+
+      setIsUploading(false)
+      setProgress(0)
+      throw error
+    }
+  }
+
+  const abort = () => {
+    xhrRef.current?.abort()
+    setIsUploading(false)
+    setProgress(0)
+  }
+
+  return {
+    upload,
+    abort,
+    isUploading,
+    progress,
+  }
+}

package/src/@types/api.ts

@@ -0,0 +1,14 @@
+type METHOD = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+
+export type ApiConfig = {
+  headers?: Record<string, string | null>
+  method?: METHOD
+  proxy?: string
+  abortSignal?: AbortSignal
+}
+
+export type Fetcher = {
+  url: string
+  payload?: BodyInit
+  config?: ApiConfig
+}

package/src/@types/basic-error-data-type.ts

@@ -0,0 +1,5 @@
+export interface BasicErrorDataType {
+  message: string
+  code: string
+  [key: string]: unknown
+}

package/src/@types/export-operation.ts

@@ -0,0 +1,144 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import { hasRequiredFields } from './shared'
+
+export type ExportOperationState =
+  | 'processing'
+  | 'completed'
+  | 'failed'
+  | 'queued'
+
+export type ResourceType = ResourceTypeId
+
+export type FileFormat = 'json' | 'csv'
+
+export type Separator = {
+  columns?: string
+  arrayValues?: string
+  decimal?: string
+}
+
+export type ExportOperation = {
+  id: string
+  fileName: string
+  createdAt: string
+  resourceType: ResourceType
+  state: ExportOperationState
+  completedPercentage: number
+  resourceCount: number
+  fileFormat: FileFormat
+  fields: string[]
+  locales: string[]
+  query?: string
+  filters?: {
+    filters: string[]
+    fullText?: {
+      text: string
+      locale: string
+    }
+  }
+  fillRows?: boolean
+  excelCompatible?: boolean
+  dryRun?: boolean
+  separator?: Separator
+}
+
+export interface PaginatedExportOperationResponse {
+  results: ExportOperation[]
+  limit: number
+  offset: number
+  total: number
+  count: number
+}
+
+export type DownloadFile = {
+  uri: string
+}
+
+export type ExportOperationQueryParams = {
+  limit: number
+  offset: number
+}
+
+export function assertPaginatedExportOperationResponse(
+  maybePaginatedExportOperationResponseOrExportOperationsResponse: unknown
+): asserts maybePaginatedExportOperationResponseOrExportOperationsResponse is PaginatedExportOperationResponse {
+  const requiredFields = ['results', 'total']
+  if (
+    hasRequiredFields(
+      maybePaginatedExportOperationResponseOrExportOperationsResponse,
+      requiredFields
+    )
+  )
+    return
+  throw new Error('Invalid response')
+}
+
+export function assertExportOperationsDownloadFileResponse(
+  maybeExportOperationDownloadFileResponse: unknown
+): asserts maybeExportOperationDownloadFileResponse is DownloadFile {
+  const requiredFields = ['uri']
+  if (
+    hasRequiredFields(maybeExportOperationDownloadFileResponse, requiredFields)
+  )
+    return
+  throw new Error('Invalid response')
+}
+
+export type QueryFilter = {
+  query?: Record<string, unknown>
+}
+
+export type SearchFilter = {
+  filters?: string[]
+  fullText?: {
+    text: string
+    locale: string
+  }
+}
+
+export interface ExportApiRequest {
+  projectKey: string
+  resourceType: string
+  fileName: string
+  fileFormat: string
+  fields: string[]
+  locales?: string[]
+  filters?: QueryFilter | SearchFilter
+  where?: string
+  fullText?: {
+    text: string
+    locale: string
+  }
+  fillRows?: boolean
+  excelCompatible?: boolean
+  separator?: Separator
+}
+
+export interface ExportApiSuccessResponse {
+  id: string
+  state: string
+  resourceType: string
+  resourceCount: number
+  createdAt: string
+}
+
+export interface ExportApiErrorResponse {
+  statusCode: number
+  error: string
+  errors: ValidationError[]
+  message: string
+}
+
+export type ValidationErrorCode =
+  | 'DuplicateFields'
+  | 'NotSupportedField'
+  | 'FieldDefinitionNotFound'
+  | 'AttributeDefinitionNotFound'
+  | 'LocalizedFieldWithoutLocale'
+  | 'IncompleteField'
+
+export type ValidationError = {
+  code: ValidationErrorCode
+  message: string
+  field?: string
+}

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

@@ -0,0 +1,81 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+
+export type FileUploadError = {
+  title: string
+  description: string
+}
+
+export type UploadFileErrorRow = {
+  id: string
+  row?: number
+  index?: number
+  code: string
+  field: string
+  validationMessage: string
+}
+
+export type RowError = {
+  code: string
+  message: string
+  field: string
+}
+
+export type RowErrorsResponse = {
+  row?: number
+  index?: number
+  errors: Array<RowError>
+}
+
+export type FileUploadResponse = {
+  results: Array<RowErrorsResponse>
+  invalid: number
+  valid: number
+  fileName: string
+  itemsCount: number
+  rowsCount: number
+  columnsCount: number
+  columns: Array<string>
+  ignoredColumns: Array<string>
+}
+
+export interface FileUploadRequestParameters {
+  projectKey: string
+  importContainerKey: string
+  resourceType: ResourceTypeId
+  file: File
+  abortSignal?: AbortSignal
+  onSuccess: (data: FileUploadResponse) => void
+  onProgress: (progress: number) => void
+  onError: (error: Error) => void
+}
+
+export interface ProcessUploadedFileRequestParameters {
+  projectKey: string
+  importContainerKey: string
+  resourceType: ResourceTypeId
+  action?: 'delete' // Currently only 'delete' action is supported
+}
+
+export type ProcessFileResponse = {
+  message: string
+}
+
+export type MissingCsvFieldIdentifierError = {
+  code: string
+  message: string
+  rowValue: Record<string, unknown>
+  metadata: {
+    row: number
+  }
+}
+
+export type DecimalSeparator = '.' | ','
+
+export type DropAreaState =
+  | 'default'
+  | 'active-drag'
+  | 'ready-for-drop'
+  | 'file-dropped'
+  | 'disabled'
+  | 'invalid'
+  | 'is-parsing'