Added progressBar modal close Button

src/pages/gallery/components/CollectionDropZone.tsx

@@ -33,8 +33,6 @@ function CollectionDropZone({
             if (err.response) {
                 setBannerErrorCode(err.response.status);
             }
-        } finally {
-            setProgressView(false);
         }
     };
     return (

src/pages/gallery/components/CreateCollection.tsx

@@ -76,8 +76,6 @@ export default function CreateCollection(props) {
             if (err.response) {
                 setBannerErrorCode(err.response.status);
             }
-        } finally {
-            setProgressView(false);
         }
     };
     return (

src/pages/gallery/components/Upload.tsx

@@ -35,6 +35,7 @@ export default function Upload(props) {
                 uploadStage={uploadStage}
                 uploadErrors={uploadErrors}
                 show={progressView}
+                closeModal={() => setProgressView(false)}
                 onHide={init}
             />
         </>

src/pages/gallery/components/UploadProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Modal, ProgressBar } from 'react-bootstrap';
+import { Alert, Button, Modal, ProgressBar } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 
 export default function UploadProgress({
@@ -7,6 +7,7 @@ export default function UploadProgress({
     uploadStage,
     now,
     uploadErrors,
+    closeModal,
     ...props
 }) {
     return (
@@ -36,7 +37,8 @@ export default function UploadProgress({
                         <ProgressBar animated now={now} />
                     </>
                 )}
-                {uploadErrors.length && (
+                {uploadErrors.length > 0 && (
+                    <>
                         <Alert variant="danger">
                             <div
                                 style={{
@@ -45,10 +47,22 @@ export default function UploadProgress({
                                 }}
                             >
                                 {uploadErrors.map((error) => (
-                                <li>{error.message}</li>
+                                    <li key={error.message}>{error.message}</li>
                                 ))}
                             </div>
                         </Alert>
+                    </>
+                )}
+                {now === 100 && (
+                    <Modal.Footer>
+                        <Button
+                            variant="dark"
+                            style={{ width: '100%' }}
+                            onClick={closeModal}
+                        >
+                            {constants.CLOSE}
+                        </Button>
+                    </Modal.Footer>
                 )}
             </Modal.Body>
         </Modal>