@commercetools-frontend-extensions/operations 2.0.1 → 3.0.0

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

@@ -0,0 +1,131 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { getFileImportJob } from '../@api'
+import { useFetchFileImportJob } from './use-fetch-file-import-job'
+import type { FileImportJob } from '../@types'
+
+jest.mock('@commercetools-frontend/sentry', () => ({
+  reportErrorToSentry: jest.fn(),
+}))
+jest.mock('../@api', () => ({
+  getFileImportJob: jest.fn(),
+}))
+
+const mockGetFileImportJob = getFileImportJob as jest.MockedFunction<
+  typeof getFileImportJob
+>
+
+describe('useFetchFileImportJob', () => {
+  const projectKey = 'test-with-big-data'
+  const resourceType = 'product'
+  const importContainerKey = 'test-container'
+  const jobId = 'test-job-id'
+
+  const mockJob: FileImportJob = {
+    id: jobId,
+    fileName: 'test.csv',
+    importContainerKey,
+    state: 'validated',
+    summary: {
+      total: 100,
+      invalid: 5,
+      valid: 95,
+      fieldsCount: 10,
+      fields: ['field1', 'field2'],
+      ignoredFields: [],
+    },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should fetch job details', async () => {
+    mockGetFileImportJob.mockResolvedValue(mockJob)
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockJob)
+    })
+
+    expect(mockGetFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType,
+      importContainerKey,
+      jobId,
+    })
+  })
+
+  it('should handle errors', async () => {
+    const error = new Error('Failed to fetch job')
+    mockGetFileImportJob.mockRejectedValue(error)
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.error).toBeTruthy()
+    })
+  })
+
+  it('should pass polling config to useFetch', async () => {
+    mockGetFileImportJob.mockResolvedValue(mockJob)
+
+    const pollingInterval = 100
+    const shouldContinuePolling = jest.fn(
+      (data: typeof mockJob) => data.state !== 'validated'
+    )
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+        pollingInterval,
+        shouldContinuePolling,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockJob)
+    })
+
+    expect(mockGetFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType,
+      importContainerKey,
+      jobId,
+    })
+  })
+
+  it('should throw ProjectKeyNotAvailableError when projectKey is empty', async () => {
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey: '',
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.error).toBeTruthy()
+    })
+
+    expect(result.current.error?.message).toBe('Project key is not available')
+  })
+})

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { getFileImportJob } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import type { FileImportJob } from '../@types'
+import { useFetch } from './use-fetch'
+
+type UseFetchFileImportJobConfig = {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+  jobId: string
+  pollingInterval?: number
+  shouldContinuePolling?: (data: FileImportJob) => boolean
+}
+
+export const useFetchFileImportJob = ({
+  projectKey,
+  importContainerKey,
+  jobId,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchFileImportJobConfig) => {
+  const fetchData = React.useCallback(() => {
+    if (!projectKey) {
+      return Promise.reject(new ProjectKeyNotAvailableError())
+    }
+    return getFileImportJob({
+      projectKey,
+      importContainerKey,
+      jobId,
+    })
+  }, [projectKey, importContainerKey, jobId])
+
+  return useFetch(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}

package/src/@hooks/use-fetch.spec.ts

@@ -1,23 +1,15 @@
 import { renderHook, act, waitFor } from '@testing-library/react'
-import { useIntl } from 'react-intl'
 import { HttpError } from '../@errors'
 import { useFetch } from './use-fetch'
 
-jest.mock('react-intl', () => ({
-  useIntl: jest.fn(),
-  defineMessages: jest.fn(),
-}))
 jest.mock('@commercetools-frontend/sentry', () => ({
   reportErrorToSentry: jest.fn(),
 }))
 
 describe('useFetch', () => {
-  const mockIntl = {
-    formatMessage: jest.fn((message) => message.defaultMessage),
-  }
   const mockFetchFunction = jest.fn()
+
   beforeEach(() => {
-    ;(useIntl as jest.Mock).mockReturnValue(mockIntl)
     jest.clearAllMocks()
   })
   it('should fetch data successfully', async () => {

package/src/@hooks/use-fetch.ts

@@ -1,8 +1,6 @@
 import React from 'react'
-import { useIntl } from 'react-intl'
 import { reportErrorToSentry } from '@commercetools-frontend/sentry'
 import { HttpError } from '../@errors'
-import messages from './messages'
 
 export const useFetch = <Data>(
   fetchFunction: () => Promise<Data>,
@@ -11,7 +9,6 @@ export const useFetch = <Data>(
     shouldContinuePolling?: (data: Data) => boolean
   } = {}
 ) => {
-  const intl = useIntl()
   const [data, setData] = React.useState<Data | null>(null)
   const [error, setError] = React.useState<Error | null>(null)
   const [isLoading, setIsLoading] = React.useState(false)
@@ -40,10 +37,10 @@ export const useFetch = <Data>(
           }
         }
       } catch (err) {
-        if (err instanceof HttpError) {
-          setError(err)
-        } else {
-          setError(new Error(intl.formatMessage(messages.unexpectedError)))
+        const error = err instanceof Error ? err : new Error(String(err))
+        setError(error)
+
+        if (!(err instanceof HttpError)) {
           reportErrorToSentry(
             new Error('An unexpected error occurred in the `useFetch` hook'),
             {
@@ -71,7 +68,6 @@ export const useFetch = <Data>(
   }, [
     fetchFunction,
     refetchCount,
-    intl,
     config.pollingInterval,
     config.shouldContinuePolling,
   ])

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

@@ -0,0 +1,273 @@
+import { renderHook, waitFor, act } from '@testing-library/react'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  createFileImportJob,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import {
+  useFileImportJobUpload,
+  UseFileImportJobUploadConfig,
+} from './use-file-import-job-upload'
+
+jest.mock('../@api')
+jest.mock('../@utils')
+
+const mockCreateImportContainerForFileUpload =
+  createImportContainerForFileUpload as jest.MockedFunction<
+    typeof createImportContainerForFileUpload
+  >
+const mockCreateFileImportJob = createFileImportJob as jest.MockedFunction<
+  typeof createFileImportJob
+>
+const mockDeleteImportContainer = deleteImportContainer as jest.MockedFunction<
+  typeof deleteImportContainer
+>
+const mockEncodeFileNameWithTimestampToContainerKey =
+  encodeFileNameWithTimestampToContainerKey as jest.MockedFunction<
+    typeof encodeFileNameWithTimestampToContainerKey
+  >
+
+describe('useFileImportJobUpload', () => {
+  const projectKey = 'test-with-big-data'
+  const importContainerKey = 'test-container-key'
+  const mockFile = new File(['test content'], 'test.csv', { type: 'text/csv' })
+  const mockJobResponse = {
+    id: 'job-123',
+    fileName: 'test.csv',
+    importContainerKey,
+    state: 'queued' as const,
+    summary: {
+      total: 0,
+      invalid: 0,
+      valid: 0,
+      fieldsCount: 0,
+      fields: [],
+      ignoredFields: [],
+    },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEncodeFileNameWithTimestampToContainerKey.mockReturnValue(
+      importContainerKey
+    )
+    mockCreateImportContainerForFileUpload.mockResolvedValue({
+      key: importContainerKey,
+    })
+    mockCreateFileImportJob.mockResolvedValue(mockJobResponse)
+    mockDeleteImportContainer.mockResolvedValue(undefined)
+  })
+
+  it('should throw "ProjectKeyNotAvailableError" if "projectKey" is not available', async () => {
+    const { result } = renderHook(() =>
+      // @ts-ignore
+      useFileImportJobUpload({ projectKey: undefined })
+    )
+
+    await expect(
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    ).rejects.toThrow(ProjectKeyNotAvailableError)
+  })
+
+  it('should create container and file import job successfully', async () => {
+    const onSuccess = jest.fn()
+    const onProgress = jest.fn()
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    const uploadConfig: UseFileImportJobUploadConfig = {
+      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(mockCreateFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType: 'product',
+      importContainerKey,
+      payload: {
+        fileType: 'csv',
+        fileName: 'test.csv',
+        file: mockFile,
+      },
+      onProgress: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+
+  it('should use json fileType for custom-object resource type', async () => {
+    const onSuccess = jest.fn()
+    const mockJsonFile = new File(
+      ['[{"key": "test-key", "value": {"number": "1.5"}}]'],
+      'test.json',
+      { type: 'application/json' }
+    )
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    const uploadConfig: UseFileImportJobUploadConfig = {
+      file: mockJsonFile,
+      resourceType: 'custom-object',
+      onSuccess,
+    }
+
+    await act(async () => {
+      await result.current.upload(uploadConfig)
+    })
+
+    expect(mockCreateFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType: 'custom-object',
+      importContainerKey,
+      payload: {
+        fileType: 'json',
+        fileName: 'test.json',
+        file: mockJsonFile,
+      },
+      onProgress: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+
+  it('should delete container on job creation error', async () => {
+    const onError = jest.fn()
+    const jobError = new Error('Job creation failed')
+    mockCreateFileImportJob.mockRejectedValue(jobError)
+
+    const { result } = renderHook(() => useFileImportJobUpload({ 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(jobError)
+  })
+
+  it('should delete container if container creation throws', async () => {
+    const onError = jest.fn()
+    const error = new Error('Container creation failed')
+    mockCreateImportContainerForFileUpload.mockRejectedValue(error)
+
+    const { result } = renderHook(() => useFileImportJobUpload({ 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(error)
+  })
+
+  it('should update progress during upload', async () => {
+    const onProgress = jest.fn()
+
+    mockCreateFileImportJob.mockImplementation(
+      ({ onProgress: _onProgress }) => {
+        _onProgress?.(50)
+        _onProgress?.(100)
+        return Promise.resolve(mockJobResponse)
+      }
+    )
+
+    const { result } = renderHook(() => useFileImportJobUpload({ 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 () => {
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    expect(result.current.isUploading).toBe(false)
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    expect(result.current.isUploading).toBe(false)
+    expect(result.current.progress).toBe(100)
+  })
+
+  it('should work without optional settings', async () => {
+    const onSuccess = jest.fn()
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'category',
+        onSuccess,
+      })
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'category',
+        tags: ['source:file-upload'],
+      },
+      projectKey,
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+})

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

@@ -0,0 +1,101 @@
+import React from 'react'
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import {
+  createFileImportJob,
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { TAG_KEY_SOURCE_FILE_UPLOAD } from '../@constants'
+import {
+  encodeFileNameWithTimestampToContainerKey,
+  getFileImportJobFileType,
+} from '../@utils'
+import type { ExtendedImportContainerDraft } from '../@types'
+
+export type UseFileImportJobUploadConfig = {
+  file: File
+  resourceType: ResourceTypeId
+  settings?: ExtendedImportContainerDraft['settings']
+  onSuccess: (jobId: string, importContainerKey: string) => void
+  onError?: (error: unknown) => void
+  onProgress?: (progress: number) => void
+  abortSignal?: AbortSignal
+}
+
+export const useFileImportJobUpload = ({
+  projectKey,
+}: {
+  projectKey: string
+}) => {
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+
+  const upload = React.useCallback(
+    async (config: UseFileImportJobUploadConfig) => {
+      if (!projectKey) {
+        throw new ProjectKeyNotAvailableError()
+      }
+
+      setIsUploading(true)
+      setProgress(0)
+
+      const importContainerKey = encodeFileNameWithTimestampToContainerKey(
+        config.file.name
+      )
+
+      try {
+        await createImportContainerForFileUpload({
+          importContainerDraft: {
+            key: importContainerKey,
+            resourceType: config.resourceType,
+            tags: [TAG_KEY_SOURCE_FILE_UPLOAD],
+            ...(config.settings ? { settings: config.settings } : {}),
+          },
+          projectKey,
+        })
+
+        const jobResponse = await createFileImportJob({
+          projectKey,
+          resourceType: config.resourceType,
+          importContainerKey,
+          payload: {
+            fileType: getFileImportJobFileType(config.resourceType),
+            fileName: config.file.name,
+            file: config.file,
+          },
+          onProgress: (uploadProgress) => {
+            setProgress(uploadProgress)
+            config.onProgress?.(uploadProgress)
+          },
+          abortSignal: config.abortSignal,
+        })
+
+        setIsUploading(false)
+        setProgress(100)
+        config.onSuccess(jobResponse.id, importContainerKey)
+      } 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)
+        config.onError?.(error)
+      }
+    },
+    [projectKey]
+  )
+
+  return {
+    upload,
+    isUploading,
+    progress,
+  }
+}