Merge pull request #2881 from RedisInsight/fe/feature/RI-5228-upload-large-files

import large files

Author: rsergeenko

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkUpload/BulkUpload.spec.tsx

@@ -5,7 +5,8 @@ import { render, screen, fireEvent, act, mockedStore, cleanup } from 'uiSrc/util
 import {
   bulkActionsUploadOverviewSelector,
   bulkUpload,
-  setBulkUploadStartAgain
+  setBulkUploadStartAgain,
+  uploadController
 } from 'uiSrc/slices/browser/bulkActions'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { BulkActionsType } from 'uiSrc/constants'
@@ -24,6 +25,9 @@ jest.mock('uiSrc/slices/browser/bulkActions', () => ({
   }),
   bulkActionsUploadOverviewSelector: jest.fn().mockReturnValue(null),
   bulkActionsUploadSummarySelector: jest.fn().mockReturnValue(null),
+  uploadController: {
+    abort: jest.fn()
+  }
 }))
 
 let store: typeof mockedStore
@@ -47,6 +51,18 @@ describe('BulkUpload', () => {
     expect(onCancel).toBeCalled()
   })
 
+  it('should call abort controller', () => {
+    const onCancel = jest.fn()
+    const abortMock = jest.fn();
+    (uploadController as any).abort = abortMock
+
+    render(<BulkUpload onCancel={onCancel} />)
+
+    fireEvent.click(screen.getByTestId('bulk-action-cancel-btn'))
+
+    expect(abortMock).toBeCalled()
+  })
+
   it('submit btn should be disabled without file', () => {
     render(<BulkUpload onCancel={jest.fn()} />)
 

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkUpload/BulkUpload.tsx

@@ -20,7 +20,8 @@ import {
   bulkActionsUploadSelector,
   bulkActionsUploadSummarySelector,
   bulkUploadDataAction,
-  setBulkUploadStartAgain
+  setBulkUploadStartAgain,
+  uploadController
 } from 'uiSrc/slices/browser/bulkActions'
 
 import BulkActionsInfo from 'uiSrc/pages/browser/components/bulk-actions/BulkActionsInfo'
@@ -34,7 +35,7 @@ export interface Props {
   onCancel: () => void
 }
 
-const MAX_MB_FILE = 100
+const MAX_MB_FILE = 3_000
 const MAX_FILE_SIZE = MAX_MB_FILE * 1024 * 1024
 
 const BulkUpload = (props: Props) => {
@@ -88,6 +89,11 @@ const BulkUpload = (props: Props) => {
     }
   }
 
+  const handleClickCancel = () => {
+    uploadController?.abort()
+    onCancel?.()
+  }
+
   return (
     <div className={styles.container} data-testid="bulk-upload-container">
       {!isCompleted ? (
@@ -147,7 +153,7 @@ const BulkUpload = (props: Props) => {
       <div className={styles.footer}>
         <EuiButton
           color="secondary"
-          onClick={onCancel}
+          onClick={handleClickCancel}
           className={styles.cancelBtn}
           data-testid="bulk-action-cancel-btn"
         >

redisinsight/ui/src/pages/instance/InstancePage.tsx

@@ -29,7 +29,7 @@ import BottomGroupComponents from 'uiSrc/components/bottom-group-components/Bott
 import LiveTimeRecommendations from 'uiSrc/components/live-time-recommendations'
 import { monitorSelector, setMonitorInitialState } from 'uiSrc/slices/cli/monitor'
 import { setInitialPubSubState } from 'uiSrc/slices/pubsub/pubsub'
-import { setBulkActionsInitialState } from 'uiSrc/slices/browser/bulkActions'
+import { resetBulkActions } from 'uiSrc/slices/browser/bulkActions'
 import { setClusterDetailsInitialState } from 'uiSrc/slices/analytics/clusterDetails'
 import { setDatabaseAnalysisInitialState } from 'uiSrc/slices/analytics/dbAnalysis'
 import { resetRedisearchKeysData, setRedisearchInitialState } from 'uiSrc/slices/browser/redisearch'
@@ -122,7 +122,7 @@ const InstancePage = ({ routes = [] }: Props) => {
     dispatch(resetKeys())
     dispatch(setMonitorInitialState())
     dispatch(setInitialPubSubState())
-    dispatch(setBulkActionsInitialState())
+    dispatch(resetBulkActions())
     dispatch(setAppContextInitialState())
     dispatch(resetPatternKeysData())
     dispatch(resetCliHelperSettings())

redisinsight/ui/src/slices/browser/bulkActions.ts

@@ -1,9 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-import { AxiosError } from 'axios'
+import axios, { AxiosError } from 'axios'
 import { ApiEndpoints, BulkActionsType, MAX_BULK_ACTION_ERRORS_LENGTH } from 'uiSrc/constants'
 import { apiService } from 'uiSrc/services'
-import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
+import { getApiErrorMessage, getUrl, isStatusSuccessful, Maybe, Nullable } from 'uiSrc/utils'
 
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { AppDispatch, RootState } from '../store'
@@ -114,9 +114,12 @@ const bulkActionsSlice = createSlice({
       state.bulkUpload.fileName = payload.fileName
     },
 
-    bulkUploadFailed: (state, { payload }) => {
+    bulkUploadFailed: (state, { payload }: PayloadAction<Maybe<string>>) => {
       state.bulkUpload.loading = false
-      state.bulkUpload.error = payload
+
+      if (payload) {
+        state.bulkUpload.error = payload
+      }
     },
   },
 })
@@ -157,6 +160,9 @@ export const bulkActionsUploadSummarySelector = (state: RootState) =>
 // The reducer
 export default bulkActionsSlice.reducer
 
+// eslint-disable-next-line import/no-mutable-exports
+export let uploadController: Nullable<AbortController> = null
+
 // Thunk actions
 // Asynchronous thunk action
 export function bulkUploadDataAction(
@@ -169,6 +175,9 @@ export function bulkUploadDataAction(
     dispatch(bulkUpload())
 
     try {
+      uploadController?.abort()
+      uploadController = new AbortController()
+
       const { status, data } = await apiService.post(
         getUrl(
           id,
@@ -179,19 +188,34 @@ export function bulkUploadDataAction(
           headers: {
             Accept: 'application/json',
             'Content-Type': 'multipart/form-data'
-          }
+          },
+          signal: uploadController.signal
         }
       )
 
+      uploadController = null
+
       if (isStatusSuccessful(status)) {
         dispatch(bulkUploadSuccess({ data, fileName: uploadFile.fileName }))
         onSuccessAction?.()
       }
     } catch (error) {
-      const errorMessage = getApiErrorMessage(error as AxiosError)
-      dispatch(addErrorNotification(error as AxiosError))
-      dispatch(bulkUploadFailed(errorMessage))
-      onFailAction?.()
+      // show error when request wasn't aborted
+      if (!axios.isCancel(error)) {
+        const errorMessage = getApiErrorMessage(error as AxiosError)
+        dispatch(addErrorNotification(error as AxiosError))
+        dispatch(bulkUploadFailed(errorMessage))
+        onFailAction?.()
+      } else {
+        dispatch(bulkUploadFailed())
+      }
     }
   }
 }
+
+export function resetBulkActions() {
+  return async (dispatch: AppDispatch) => {
+    uploadController?.abort()
+    dispatch(setBulkActionsInitialState())
+  }
+}