Display progress bar when an upload is in progress

Displays a progress bar when an upload is in progress and prohibits
uploading multiple attachments in parallel.

2 files changed, 72 insertions, 35 deletions

diff --git a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
index c60d6f7e..1b2f182e 100644
--- a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
+++ b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
@@ -11,11 +11,34 @@ describeComponent('mail_view/ui/attachment_icon', function () {
         expect(this.$node.html()).toMatch('<i class="fa fa-paperclip"></i>');
     });
 
-    it('should trigger starts of attachment upload process', function () {
+    it('should be busy', function() {
+        this.component.uploadInProgress();
+
+        expect(this.component.attr.busy).toBe(true);
+    });
+
+    it('should not be busy', function() {
+        this.component.uploadFinished();
+
+        expect(this.component.attr.busy).toBe(false);
+    });
+
+    it('should trigger start of attachment upload process', function () {
         var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment);
+
         this.$node.click();
+
         expect(triggerUploadAttachment).toHaveBeenTriggeredOn(document);
     });
 
+    it('should not trigger attachment upload when busy', function () {
+        this.component.uploadInProgress();
+        var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment);
+
+        this.$node.click();
+
+        expect(triggerUploadAttachment).not.toHaveBeenTriggeredOn(document);
+    });
+
   });
 });
diff --git a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
index 20f82704..1b351d36 100644
--- a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
+++ b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
@@ -5,6 +5,7 @@ describeMixin('mail_view/ui/attachment_list', function () {
         beforeEach(function () {
             this.setupComponent('<div id="attachment-list">' +
                 '<ul id="attachment-list-item"></ul>' +
+                '<ul id="attachment-upload-item"><li><a>Uploading...</a><div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div></li></ul>' +
                 '</div>');
         });
 
@@ -39,58 +40,71 @@ describeMixin('mail_view/ui/attachment_list', function () {
             expect(this.component.select('attachmentListItem').html()).toContain('(4.39 Kb');
         });
 
-        describe('Upload files -- max file size -- ', function (){
-            var ONE_MEGABYTE = 1024*1024;
-            var submitFile = 'file not submitted', submitted = 'file submitted';
-            var mockSubmit = function (){ submitFile = submitted; };
-            var largeAttachment = {originalFiles: [{size: ONE_MEGABYTE+1}], submit: mockSubmit};
-            var dummyEvent = 'whatever, not used';
+        describe('Upload', function() {
 
-            it('should show error messages on the dom, when uploading files larger than 1MB', function () {
-                this.component.checkAttachmentSize(dummyEvent, largeAttachment);
+            describe('Progress Bar', function () {
+                it('should show progress bar', function() {
+                    this.component.showUploadProgressBar();
 
-                expect(this.component.select('uploadError').html()).toContain('Upload failed. This file exceeds the 1MB limit.');
-            });
-
-            it('should dismiss upload failed message when clicking close icon', function () {
-                this.component.checkAttachmentSize(dummyEvent, largeAttachment);
+                    expect(this.component.select('attachmentUploadItem').html()).toContain('Uploading...');
+                    expect(this.component.select('attachmentUploadItem').css('display')).toEqual('block');
+                });
 
-                this.component.select('closeIcon').click();
+                it('should hide progress bar', function() {
+                    this.component.hideUploadProgressBar();
 
-                expect(this.component.select('uploadError').html()).toBe(undefined);
+                    expect(this.component.select('attachmentUploadItem').css('display')).toEqual('none');
+                });
             });
 
-            it('should dismiss upload failed message when clicking dismiss button', function () {
-                this.component.checkAttachmentSize(dummyEvent, largeAttachment);
+            describe('Error', function() {
+                it('should show error message', function () {
+                    this.component.showUploadError();
 
-                this.component.select('dismissButton').click();
+                    expect(this.component.select('uploadError').html()).toContain('Upload failed. This file exceeds the 1MB limit.');
+                });
 
-                expect(this.component.select('uploadError').html()).toBe(undefined);
-            });
+                it('should dismiss upload failed message when clicking close icon', function () {
+                    this.component.showUploadError();
 
-            it('should start file upload when clicking Choose another file button', function () {
-                this.component.checkAttachmentSize(dummyEvent, largeAttachment);
+                    this.component.select('closeIcon').click();
 
-                var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment);
+                    expect(this.component.select('uploadError').html()).toBe(undefined);
+                });
 
-                this.component.select('uploadFileButton').click();
+                it('should dismiss upload failed message when clicking dismiss button', function () {
+                    this.component.showUploadError();
 
-                expect(triggerUploadAttachment).toHaveBeenTriggeredOn(document);
-            });
+                    this.component.select('dismissButton').click();
 
-            it('should not upload files larger than 1MB', function () {
-                spyOn(largeAttachment, 'submit');
+                    expect(this.component.select('uploadError').html()).toBe(undefined);
+                });
 
-                this.component.checkAttachmentSize(dummyEvent, largeAttachment);
+                it('should start file upload when clicking Choose another file button', function () {
+                    this.component.showUploadError();
+                    var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment);
 
-                expect(largeAttachment.submit).not.toHaveBeenCalled();
+                    this.component.select('uploadFileButton').click();
+
+                    expect(triggerUploadAttachment).toHaveBeenTriggeredOn(document);
+                });
             });
 
-            it('should upload files less or equal 1MB', function () {
-                var smallAttachment = {originalFiles: [{size: ONE_MEGABYTE}], submit: mockSubmit};
-                this.component.checkAttachmentSize(dummyEvent, smallAttachment);
+            describe('File size check', function (){
+                var ONE_MEGABYTE = 1024*1024;
+                var largeAttachment = {originalFiles: [{size: ONE_MEGABYTE+1}]};
+
+                it('should reject files larger than 1MB', function () {
+                    var uploadAccepted = this.component.performPreUploadCheck(null, largeAttachment);
+                    expect(uploadAccepted).toBe(false);
+                });
+
+                it('should accept files less or equal 1MB', function () {
+                    var smallAttachment = {originalFiles: [{size: ONE_MEGABYTE}]};
+                    var uploadAccepted = this.component.performPreUploadCheck(null, smallAttachment);
 
-                expect(submitFile).toEqual(submitted);
+                    expect(uploadAccepted).toBe(true);
+                });
             });
         });
     });