Merge pull request #1977 from RedisInsight/fe/bugfix/upload-data-in-bulk

[bugfix] - #RI-4416 #RI-4417 #RI-4418

Author: rsergeenko

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

@@ -11,6 +11,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   title?: string | React.ReactNode
+  subTitle?: string | React.ReactNode
   loading: boolean
   filter?: Nullable<KeyTypes>
   status: Maybe<BulkActionsStatus>
@@ -23,14 +24,15 @@ export interface Props {
 }
 
 const BulkActionsInfo = (props: Props) => {
-  const { children, loading, filter, search, status, progress, title = 'Delete Keys with' } = props
+  const { children, loading, filter, search, status, progress, title = 'Delete Keys with', subTitle } = props
   const { total = 0, scanned = 0 } = progress || {}
 
   return (
     <div className={styles.container} data-testid="bulk-actions-info">
       <div className={styles.header}>
         <EuiText color="subdued" className={styles.title}>{title}</EuiText>
         <EuiText color="subdued" className={styles.subTitle}>
+          {subTitle}
           {filter && (
             <div className={styles.filter} data-testid="bulk-actions-info-filter">
               <span style={{ paddingRight: 6 }}>Key type:</span>

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

@@ -26,6 +26,7 @@ import BulkActionsInfo from 'uiSrc/pages/browser/components/bulk-actions/BulkAct
 import BulkActionSummary from 'uiSrc/pages/browser/components/bulk-actions/BulkActionSummary'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { isProcessedBulkAction } from 'uiSrc/pages/browser/components/bulk-actions/utils'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -48,6 +49,7 @@ const BulkUpload = (props: Props) => {
 
   const onStartAgain = () => {
     dispatch(setBulkUploadStartAgain())
+    setFiles(null)
   }
 
   const handleUploadWarning = () => {
@@ -120,13 +122,8 @@ const BulkUpload = (props: Props) => {
           loading={loading}
           status={status}
           progress={progress}
-          title={(
-            <>
-              Upload with file
-              <EuiSpacer size="m" />
-              <div className="truncateText">{fileName}</div>
-            </>
-          )}
+          title="Upload with file"
+          subTitle={(<div className="truncateText" style={{ paddingTop: 6 }}>{fileName}</div>)}
         >
           <BulkActionSummary
             succeed={succeed}
@@ -144,7 +141,7 @@ const BulkUpload = (props: Props) => {
           className={styles.cancelBtn}
           data-testid="bulk-action-cancel-btn"
         >
-          Cancel
+          {isProcessedBulkAction(status) ? 'Close' : 'Cancel'}
         </EuiButton>
         {!isCompleted ? (
           <EuiPopover
@@ -193,6 +190,7 @@ const BulkUpload = (props: Props) => {
         ) : (
           <EuiButton
             fill
+            iconType="refresh"
             color="secondary"
             onClick={onStartAgain}
             data-testid="bulk-action-start-new-btn"

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

@@ -5,6 +5,7 @@ import { ApiEndpoints, BulkActionsType, MAX_BULK_ACTION_ERRORS_LENGTH } from 'ui
 import { apiService } from 'uiSrc/services'
 import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
 
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { AppDispatch, RootState } from '../store'
 import { StateBulkActions, IBulkActionOverview } from '../interfaces'
 
@@ -181,6 +182,7 @@ export function bulkUploadDataAction(
       }
     } catch (error) {
       const errorMessage = getApiErrorMessage(error as AxiosError)
+      dispatch(addErrorNotification(error as AxiosError))
       dispatch(bulkUploadFailed(errorMessage))
       onFailAction?.()
     }

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

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash'
+import { AxiosError } from 'axios'
 import { BulkActionsType } from 'uiSrc/constants'
 import reducer, {
   bulkActionsSelector,
@@ -22,6 +23,7 @@ import reducer, {
 } from 'uiSrc/slices/browser/bulkActions'
 import { cleanup, initialStateDefault, mockedStore } from 'uiSrc/utils/test-utils'
 import { apiService } from 'uiSrc/services'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 let store: typeof mockedStore
 
@@ -433,6 +435,7 @@ describe('bulkActions slice', () => {
         // Assert
         const expectedActions = [
           bulkUpload(),
+          addErrorNotification(responsePayload as AxiosError),
           bulkUploadFailed(errorMessage),
         ]
         expect(store.getActions()).toEqual(expectedActions)