#5228 - update work with abort controller for bulk upload

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'
@@ -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'
@@ -37,11 +37,7 @@ const bulkActionsSlice = createSlice({
   name: 'bulkActions',
   initialState,
   reducers: {
-    setBulkActionsInitialState: (state) => {
-      state.bulkUpload?.abortController?.abort()
-
-      return initialState
-    },
+    setBulkActionsInitialState: () => initialState,
 
     setBulkDeleteStartAgain: (state) => {
       state.bulkDelete = initialState.bulkDelete
@@ -107,10 +103,9 @@ const bulkActionsSlice = createSlice({
       state.bulkDelete.loading = false
     },
 
-    bulkUpload: (state, { payload }: PayloadAction<{ abortController: AbortController }>) => {
+    bulkUpload: (state) => {
       state.bulkUpload.loading = true
       state.bulkUpload.error = ''
-      state.bulkUpload.abortController = payload.abortController
     },
 
     bulkUploadSuccess: (state, { payload }: PayloadAction<{ data: IBulkActionOverview, fileName?: string }>) => {
@@ -119,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
+      }
     },
   },
 })
@@ -162,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(
@@ -171,11 +172,12 @@ export function bulkUploadDataAction(
   onFailAction?: () => void
 ) {
   return async (dispatch: AppDispatch) => {
-    const abortController = new AbortController()
-
-    dispatch(bulkUpload({ abortController }))
+    dispatch(bulkUpload())
 
     try {
+      uploadController?.abort()
+      uploadController = new AbortController()
+
       const { status, data } = await apiService.post(
         getUrl(
           id,
@@ -187,22 +189,33 @@ export function bulkUploadDataAction(
             Accept: 'application/json',
             'Content-Type': 'multipart/form-data'
           },
-          signal: abortController.signal
+          signal: uploadController.signal
         }
       )
 
+      uploadController = null
+
       if (isStatusSuccessful(status)) {
         dispatch(bulkUploadSuccess({ data, fileName: uploadFile.fileName }))
         onSuccessAction?.()
       }
     } catch (error) {
-      // show error when request wasn't aborted only
-      if (!abortController.signal.aborted) {
+      // 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())
+  }
+}

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

@@ -23,7 +23,6 @@ export interface StateBulkActions {
     error: string
     overview: Nullable<IBulkActionOverview>
     fileName?: string
-    abortController?: AbortController
   }
 }