@commercetools-frontend-extensions/operations 0.0.0

package/src/@api/fetcher.spec.ts

@@ -0,0 +1,51 @@
+import { HttpError } from '../@errors'
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+import { fetcher } from './fetcher'
+
+const mockServer = setupServer(
+  rest.get('http://localhost:8080/proxy/import/hello', (_, res, ctx) =>
+    res(
+      ctx.json({
+        message: 'hello',
+      })
+    )
+  )
+)
+afterEach(() => {
+  mockServer.resetHandlers()
+})
+beforeAll(() => {
+  mockServer.listen()
+})
+afterAll(() => {
+  mockServer.close()
+})
+
+// TODO: write more tests
+describe('fetcher', () => {
+  it('should add proxy prefix to url', async () => {
+    const response = await fetcher<{ message: string }>({
+      url: '/hello',
+      config: {
+        proxy: 'IMPORT',
+      },
+    })
+    expect(response.message).toBe('hello')
+  })
+  it('should throw error if response is unsuccessful', async () => {
+    mockServer.use(
+      rest.get('http://localhost:8080/proxy/import/hello', (_, res, ctx) => {
+        return res(ctx.status(404), ctx.json({ message: 'Not Found' }))
+      })
+    )
+    await expect(
+      fetcher<{ message: string }>({
+        url: '/hello',
+        config: {
+          proxy: 'IMPORT',
+        },
+      })
+    ).rejects.toThrow(new HttpError(404, 'Not Found'))
+  })
+})

package/src/@api/fetcher.ts

@@ -0,0 +1,127 @@
+import {
+  buildApiUrl,
+  executeHttpClientRequest,
+  createHttpClientOptions,
+} from '@commercetools-frontend/application-shell'
+import { oidcStorage } from '@commercetools-frontend/application-shell-connectors'
+import { type Fetcher } from '../@types'
+import { HttpError } from '../@errors'
+
+const addProxyPrefixToUrl = (uri: string, proxy?: string) => {
+  return proxy ? `/proxy/${proxy}${uri}` : uri
+}
+
+export const fetcher = async <Data>({ url, payload, config }: Fetcher) => {
+  const data = await executeHttpClientRequest<Promise<Data>>(
+    async (options: RequestInit) => {
+      const res = await fetch(
+        buildApiUrl(addProxyPrefixToUrl(url, config?.proxy)),
+        {
+          ...options,
+          method: config?.method,
+          body: payload,
+          signal: config?.abortSignal,
+        }
+      )
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new HttpError(res.status, res.statusText, errorData)
+      }
+      const data = res.json()
+      return {
+        data,
+        statusCode: res.status,
+        getHeader: (key: string) => res.headers.get(key),
+      }
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        ...config?.headers,
+      },
+    }
+  )
+  return data
+}
+
+export const fetchUsingXhr = ({
+  url,
+  payload,
+  config,
+  onProgress,
+  onSuccess,
+  onError,
+}: {
+  url: string
+  payload: FormData
+  config: {
+    abortSignal?: AbortSignal
+    proxy?: string
+    method: string
+    headers?: { [key: string]: string | null }
+  }
+  onProgress: (progress: number) => void
+  onSuccess: (data: any) => void
+  onError: (error: Error) => void
+}): XMLHttpRequest => {
+  const options = createHttpClientOptions({
+    headers: {
+      'Content-Type': 'application/json',
+      ...config?.headers,
+    },
+  })
+
+  const xhr = new XMLHttpRequest()
+  xhr.open(
+    config?.method,
+    buildApiUrl(addProxyPrefixToUrl(url, config?.proxy)),
+    true
+  )
+
+  xhr.withCredentials = true
+
+  if (options.headers) {
+    Object.keys(options.headers).forEach((key) => {
+      xhr.setRequestHeader(key, options.headers[key])
+    })
+  }
+
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = (event.loaded / event.total) * 100
+      onProgress(percentComplete)
+    }
+  }
+
+  const throwError = (errorData: Response) => {
+    onError(new HttpError(xhr.status, xhr.statusText, errorData))
+  }
+
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText)
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader(
+      'x-refreshed-session-token'
+    )
+    if (refreshedSessionToken) {
+      oidcStorage.setActiveSession(refreshedSessionToken)
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data)
+    } else {
+      throwError(data)
+    }
+  }
+
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText)
+    throwError(errorData)
+  }
+
+  xhr.onabort = function () {
+    onError(new DOMException('Aborted', 'AbortError'))
+  }
+
+  xhr.send(payload)
+  return xhr
+}

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

@@ -0,0 +1,83 @@
+import { waitFor } from '@testing-library/react'
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+import { uploadFileForImport } from './file-upload'
+import type { FileUploadResponse } from '../@types'
+
+const validFileUploadResponse: FileUploadResponse = {
+  valid: 1,
+  results: [],
+  invalid: 0,
+  fileName: 'file.csv',
+  itemsCount: 0,
+  rowsCount: 0,
+  columnsCount: 0,
+  columns: [],
+  ignoredColumns: [],
+}
+
+type ResourceTypeEntry = {
+  name: string
+  apiPath: string
+}
+
+const resourceTypes: Array<ResourceTypeEntry> = [
+  {
+    name: 'category',
+    apiPath: 'categories',
+  },
+  {
+    name: 'product',
+    apiPath: 'products',
+  },
+  {
+    name: 'inventory',
+    apiPath: 'inventories',
+  },
+]
+
+const mockServer = setupServer(
+  ...resourceTypes.map(({ apiPath }) =>
+    rest.post(
+      `http://localhost:8080/proxy/import/test-with-big-data-key/${apiPath}/import-containers/container-key/file-upload`,
+      (_, res, ctx) => res(ctx.json(validFileUploadResponse))
+    )
+  )
+)
+
+afterEach(() => {
+  mockServer.resetHandlers()
+})
+
+beforeAll(() => {
+  mockServer.listen()
+})
+
+afterAll(() => {
+  mockServer.close()
+})
+
+describe('uploadFileForImport', () => {
+  const projectKey = 'test-with-big-data-key'
+  const containerKey = 'container-key'
+  const file: File = new File([], 'file.csv')
+
+  it.each([['category'], ['product'], ['inventory']])(
+    'should post the file to the correct endpoint for the resource type %s',
+    async (resourceType) => {
+      const onSuccess = jest.fn()
+      uploadFileForImport({
+        projectKey,
+        importContainerKey: containerKey,
+        resourceType,
+        file,
+        onSuccess,
+        onProgress: jest.fn(),
+        onError: jest.fn(),
+      })
+      await waitFor(() =>
+        expect(onSuccess).toHaveBeenCalledWith(validFileUploadResponse)
+      )
+    }
+  )
+})

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

@@ -0,0 +1,46 @@
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import {
+  type FileUploadResponse,
+  type FileUploadRequestParameters,
+  hasRequiredFields,
+} from '../@types'
+import { fetchUsingXhr } from './fetcher'
+import { getFileUploadURL } from './urls'
+
+export function uploadFileForImport({
+  projectKey,
+  importContainerKey,
+  resourceType,
+  file,
+  abortSignal,
+  onSuccess,
+  onProgress,
+  onError,
+}: FileUploadRequestParameters): XMLHttpRequest {
+  const uri = getFileUploadURL({ projectKey, resourceType, importContainerKey })
+  const formData = new FormData()
+  formData.append('file', file, file.name)
+  return fetchUsingXhr({
+    url: uri,
+    payload: formData,
+    config: {
+      abortSignal,
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        'Content-Type': null,
+      },
+    },
+    onProgress,
+    onSuccess,
+    onError,
+  })
+}
+
+export function assertFileUploadResponse(
+  maybeFileUploadResponse: unknown
+): asserts maybeFileUploadResponse is FileUploadResponse {
+  const requiredFields = ['results', 'valid']
+  if (hasRequiredFields(maybeFileUploadResponse, requiredFields)) return
+  throw new Error('Invalid response')
+}

package/src/@api/import-containers.ts

@@ -0,0 +1,256 @@
+import type {
+  ImportContainer,
+  ImportContainerPagedResponse,
+} from '@commercetools/importapi-sdk'
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import {
+  assertImportContainer,
+  assertImportContainerPagedResponse,
+  assertImportSummary,
+  ImportStates,
+  type ImportContainerQueryParams,
+  type CancelContainerResponse,
+  type ImportSummary,
+  type ExtendedImportContainer,
+  type ExtendedImportContainerDraft,
+  type ImportContainerDetails,
+  type ImportSummaries,
+  assertCancelContainerResponse,
+} from '../@types'
+import {
+  getImportContainersURL,
+  getImportContainerByKeyURL,
+  getImportSummaryURL,
+  getCreateImportContainerURL,
+  getDeleteImportContainerURL,
+  getImportContainerTasksURL,
+} from './urls'
+import { checkIfFileUploadImport } from '../@utils'
+import { fetcher } from './fetcher'
+
+export function getImportState(importSummary: ImportSummary): ImportStates {
+  const processing = importSummary.states.processing > 0
+  if (processing) return ImportStates.Processing
+
+  const waitForUnresolvedReferences =
+    importSummary.states.waitForMasterVariant > 0 ||
+    importSummary.states.unresolved > 0
+  if (waitForUnresolvedReferences)
+    return ImportStates.WaitForUnresolvedReferences
+
+  const partiallyCompleted =
+    (importSummary.states.imported > 0 &&
+      importSummary.states.imported < importSummary.total) ||
+    (importSummary.states.deleted > 0 &&
+      importSummary.states.deleted < importSummary.total)
+  if (partiallyCompleted) return ImportStates.PartiallyCompleted
+
+  const noRunning = importSummary.total === 0
+  if (noRunning) return ImportStates.NoRunningImports
+
+  const successfullyCompleted =
+    importSummary.states.imported === importSummary.total ||
+    importSummary.states.deleted === importSummary.total
+  if (successfullyCompleted) return ImportStates.SuccessfullyCompleted
+
+  const failed =
+    importSummary.states.rejected + importSummary.states.validationFailed ===
+    importSummary.total
+  if (failed) return ImportStates.Failed
+
+  const canceled = importSummary.states.canceled > 0
+  if (canceled) return ImportStates.Canceled
+
+  throw new Error(`Unsupported state ${JSON.stringify(importSummary.states)}`)
+}
+
+export function createImportContainerForFileUpload({
+  importContainerDraft,
+  projectKey,
+}: {
+  importContainerDraft: ExtendedImportContainerDraft
+  projectKey: string
+}): Promise<unknown> {
+  return fetcher({
+    url: getCreateImportContainerURL({ projectKey }),
+    payload: JSON.stringify({
+      retentionPolicy: {
+        strategy: 'ttl',
+        config: {
+          timeToLive: '54h', // 2 days and 6 hours
+        },
+      },
+      ...importContainerDraft,
+    }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    },
+  })
+}
+
+export function deleteImportContainer({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): Promise<unknown> {
+  return fetcher({
+    url: getDeleteImportContainerURL({ projectKey, importContainerKey }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'DELETE',
+      headers: {
+        accept: 'application/json',
+      },
+    },
+  })
+}
+
+export async function fetchImportSummary({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): Promise<ImportSummary> {
+  const importSummary = await fetcher<ImportSummary>({
+    url: getImportSummaryURL({ projectKey, importContainerKey }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertImportSummary(importSummary)
+
+  return importSummary
+}
+
+export async function fetchImportContainers({
+  projectKey,
+  queryParams,
+}: {
+  projectKey: string
+  queryParams: ImportContainerQueryParams
+}): Promise<ImportContainerPagedResponse> {
+  const importContainers = await fetcher<ImportContainerPagedResponse>({
+    url: getImportContainersURL({ projectKey, queryParams }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+  assertImportContainerPagedResponse(importContainers)
+
+  return importContainers
+}
+
+export async function fetchImportSummaries({
+  projectKey,
+  queryParams,
+}: {
+  projectKey: string
+  queryParams: ImportContainerQueryParams
+}): Promise<ImportSummaries> {
+  const importContainers = await fetchImportContainers({
+    projectKey,
+    queryParams,
+  })
+
+  const results: Array<Promise<ImportContainerDetails>> =
+    importContainers.results.map(async (importContainer) => {
+      return await importContainerToContainerDetails(
+        projectKey,
+        importContainer
+      )
+    })
+
+  return {
+    results,
+    count: importContainers.count,
+    total: importContainers.total ?? 0,
+    queryParams: {
+      limit: importContainers.limit,
+      offset: importContainers.offset,
+    },
+  }
+}
+
+export async function fetchImportContainerDetails({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): Promise<ImportContainerDetails> {
+  const importContainer = await fetchImportContainerByKey({
+    projectKey,
+    importContainerKey,
+  })
+  return await importContainerToContainerDetails(projectKey, importContainer)
+}
+
+export async function fetchImportContainerByKey({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): Promise<ImportContainer> {
+  const importContainer = await fetcher<ImportContainer>({
+    url: getImportContainerByKeyURL({ projectKey, importContainerKey }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+  assertImportContainer(importContainer)
+
+  return importContainer
+}
+
+export async function cancelImportContainerByKey({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): Promise<CancelContainerResponse> {
+  const response = await fetcher<CancelContainerResponse>({
+    url: getImportContainerTasksURL({ projectKey, importContainerKey }),
+    payload: JSON.stringify({
+      task: 'cancel',
+    }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+    },
+  })
+  assertCancelContainerResponse(response)
+  return response
+}
+
+async function importContainerToContainerDetails(
+  projectKey: string,
+  importContainer: ExtendedImportContainer
+): Promise<ImportContainerDetails> {
+  const importSummary = await fetchImportSummary({
+    projectKey,
+    importContainerKey: importContainer.key,
+  })
+  const importState = getImportState(importSummary)
+  const isFileUploadImport = checkIfFileUploadImport(importContainer.tags)
+
+  return {
+    importContainer: importContainer,
+    importState,
+    importSummary,
+    isFileUploadImport,
+  }
+}

package/src/@api/import-operations.ts

@@ -0,0 +1,33 @@
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import {
+  assertImportOperationPagedResponse,
+  type ExtendedImportOperationPagedResponse,
+  type ImportOperationQueryParams,
+} from '../@types'
+import { fetcher } from './fetcher'
+import { getImportOperationsURL } from './urls'
+
+export async function fetchImportOperations({
+  projectKey,
+  importContainerKey,
+  queryParams,
+}: {
+  projectKey: string
+  importContainerKey: string
+  queryParams: ImportOperationQueryParams
+}): Promise<ExtendedImportOperationPagedResponse> {
+  const importOperations = await fetcher<ExtendedImportOperationPagedResponse>({
+    url: getImportOperationsURL({
+      projectKey,
+      importContainerKey,
+      queryParams,
+    }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+  assertImportOperationPagedResponse(importOperations)
+
+  return importOperations
+}

package/src/@api/index.ts

@@ -0,0 +1,8 @@
+export * from './fetcher'
+export * from './file-upload'
+export * from './import-containers'
+export * from './import-operations'
+export * from './export-operations'
+export * from './process-file'
+export * from './urls'
+export * from './test-fixtures'

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

@@ -0,0 +1,74 @@
+import { plural } from 'pluralize'
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+import { processUploadedFile } from './process-file'
+import { validProcessFileResponse } from './test-fixtures'
+
+const mockServer = setupServer()
+
+beforeAll(() => {
+  mockServer.listen()
+})
+afterEach(() => {
+  mockServer.resetHandlers()
+})
+afterAll(() => {
+  mockServer.close()
+})
+
+describe('processUploadedFile', () => {
+  const projectKey = 'test-with-big-data'
+  const containerKey = 'container-key'
+  const resourceType = 'category'
+
+  it('should process the file with the correct endpoint for the current project', async () => {
+    mockServer.use(
+      rest.post(
+        `http://localhost:8080/proxy/import/${projectKey}/${plural(
+          resourceType
+        )}/import-containers/${containerKey}/process-file`,
+        (_, res, ctx) => {
+          return res(ctx.json(validProcessFileResponse))
+        }
+      )
+    )
+
+    const response = await processUploadedFile({
+      projectKey,
+      importContainerKey: containerKey,
+      resourceType,
+    })
+
+    expect(response.message).toEqual(validProcessFileResponse.message)
+  })
+
+  it('should process the file with delete action using the tasks endpoint', async () => {
+    let requestBody: any
+
+    mockServer.use(
+      rest.post(
+        `http://localhost:8080/proxy/import/${projectKey}/import-containers/${containerKey}/tasks`,
+        async (req, res, ctx) => {
+          requestBody = await req.json()
+          return res(ctx.json(validProcessFileResponse))
+        }
+      )
+    )
+
+    const response = await processUploadedFile({
+      projectKey,
+      importContainerKey: containerKey,
+      resourceType,
+      action: 'delete',
+    })
+
+    expect(response.message).toEqual(validProcessFileResponse.message)
+    expect(requestBody).toEqual({
+      task: 'process-file',
+      parameter: {
+        resourceType,
+        action: 'delete',
+      },
+    })
+  })
+})