Merge pull request #1979 from RedisInsight/fe/bugfix/RI-4416_add-size-validation

#RI-4416 - add file size validation

Author: rsergeenko

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

@@ -7,6 +7,7 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiText,
+  EuiTextColor,
   EuiToolTip,
 } from '@elastic/eui'
 
@@ -33,6 +34,9 @@ export interface Props {
   onCancel: () => void
 }
 
+const MAX_MB_FILE = 100
+const MAX_FILE_SIZE = MAX_MB_FILE * 1024 * 1024
+
 const BulkUpload = (props: Props) => {
   const { onCancel } = props
   const { id: instanceId } = useSelector(connectedInstanceSelector)
@@ -41,6 +45,8 @@ const BulkUpload = (props: Props) => {
   const { succeed, processed, failed } = useSelector(bulkActionsUploadSummarySelector) ?? {}
 
   const [files, setFiles] = useState<Nullable<FileList>>(null)
+  const [isInvalid, setIsInvalid] = useState<boolean>(false)
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState<boolean>(true)
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
 
   const isCompleted = status && status === BulkActionsStatus.Completed
@@ -64,7 +70,11 @@ const BulkUpload = (props: Props) => {
   }
 
   const onFileChange = (files: Nullable<FileList>) => {
+    const isOutOfSize = (files?.[0]?.size || 0) > MAX_FILE_SIZE
+
     setFiles(files)
+    setIsInvalid(!!files?.length && isOutOfSize)
+    setIsSubmitDisabled(!files?.length || isOutOfSize)
   }
 
   const handleUpload = () => {
@@ -110,11 +120,17 @@ const BulkUpload = (props: Props) => {
             id="bulk-upload-file-input"
             initialPromptText="Select or drag and drop a file"
             className={styles.fileDrop}
+            isInvalid={isInvalid}
             onChange={onFileChange}
             display="large"
             data-testid="bulk-upload-file-input"
             aria-label="Select or drag and drop file"
           />
+          {isInvalid && (
+            <EuiTextColor color="danger" className={styles.errorFileMsg} data-testid="input-file-error-msg">
+              File should not exceed {MAX_MB_FILE} MB
+            </EuiTextColor>
+          )}
           <EuiSpacer size="l" />
         </div>
       ) : (
@@ -156,7 +172,7 @@ const BulkUpload = (props: Props) => {
                 fill
                 color="secondary"
                 onClick={handleUploadWarning}
-                disabled={!files?.length || loading}
+                disabled={isSubmitDisabled || loading}
                 isLoading={loading}
                 data-testid="bulk-action-warning-btn"
               >

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkUpload/styles.module.scss

@@ -52,6 +52,11 @@
     }
   }
 
+  .errorFileMsg {
+    margin-top: 10px;
+    font-size: 12px;
+  }
+
   .footer {
     position: absolute;
     bottom: 24px;