emptying attachment list when email sent -- in case the user stays on the same screen and re-click compose

Issue #548

9 files changed, 62 insertions, 11 deletions

diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
index 870bcd92..7fe4417b 100644
--- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
@@ -60,6 +60,7 @@ define(
       this.openComposeBox = function() {
         var stage = this.reset(this.attr.composeBox);
         ComposeBox.attachTo(stage, {currentTag: this.attr.currentTag});
+        this.trigger(document, events.mail.resetAttachments);
       };
 
       this.openFeedbackBox = function() {
diff --git a/web-ui/app/js/mail_view/data/attachment_list.js b/web-ui/app/js/mail_view/data/attachment_list.js
index 9193e37a..d1d07e0c 100644
--- a/web-ui/app/js/mail_view/data/attachment_list.js
+++ b/web-ui/app/js/mail_view/data/attachment_list.js
@@ -32,8 +32,19 @@ define(
                 this.attr.attachments.push(data);
             };
 
+            this.resetAttachmentList = function () {
+                this.attr.attachments = [];
+            };
+
+            this.resetAll = function () {
+              this.resetAttachmentList();
+              this.teardown();
+            };
+
             this.after('initialize', function () {
                 this.on(document, events.mail.appendAttachment, this.addAttachment);
+                this.on(document, events.mail.resetAttachments, this.resetAttachmentList);
+                this.on(document, events.mail.sent, this.resetAll);
             });
         }
 
diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js
index 36899056..60e6abad 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -32,14 +32,15 @@ define(
                 attachmentBaseUrl: '/attachment'
             });
 
-            this.addAttachment = function (event, data) {
+            this.showAttachment = function (event, data) {
                 this.trigger(document, events.mail.appendAttachment, data);
                 this.renderAttachmentListView(data);
             };
 
             this.renderAttachmentListView = function (data) {
+                var currentHtml = this.select('attachmentListItem').html();
                 var item = this.buildAttachmentListItem(data);
-                this.select('attachmentListItem').html(item);
+                this.select('attachmentListItem').html(currentHtml + '<li>' + item + '</li>');
             };
 
             function humanReadable(bytes) {
@@ -73,13 +74,18 @@ define(
             }
 
             this.startUpload = function () {
-                addJqueryFileUploadConfig(this);
                 this.select('inputFileUpload').click();
             };
 
+            this.resetAll = function () {
+              this.teardown();
+            };
+
             this.after('initialize', function () {
-                this.on(document, events.mail.uploadedAttachment, this.addAttachment);
+                addJqueryFileUploadConfig(this);
+                this.on(document, events.mail.uploadedAttachment, this.showAttachment);
                 this.on(document, events.mail.startUploadAttachment, this.startUpload);
+                this.on(document, events.mail.sent, this.resetAll);
             });
         }
 
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index c85a322d..f6186d41 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -146,7 +146,8 @@ define(function () {
       uploadedAttachment: 'mail:uploaded:attachment',
       uploadingAttachment: 'mail:uploading:attachment',
       startUploadAttachment: 'mail:start:upload:attachment',
-      appendAttachment: 'mail:append:attachment'
+      appendAttachment: 'mail:append:attachment',
+      resetAttachments: 'mail:reset:attachments'
     },
     mails: {
       available: 'mails:available',
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index c9695c6f..1904e275 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -34,9 +34,7 @@
     <div class="attachmentsAreaWrap">
       <div class="attachmentsArea column large-12">
         <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p>
-        <ul>
-          <li id="attachment-list-item"> </li>
-        </ul>
+        <ul id="attachment-list-item"></ul>
       </div>
     </div>
  
diff --git a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
index 9df1d557..89793183 100644
--- a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
+++ b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
@@ -15,6 +15,17 @@ describeComponent('dispatchers/right_pane_dispatcher', function () {
       expect(composeBox.attachTo).toHaveBeenCalled();
     });
 
+    it('should trigger reset attachment list on open compose box event', function () {
+      var composeBox = require('mail_view/ui/compose_box');
+      Pixelated.mockBloodhound();
+      this.setupComponent();
+      var triggerRestAttachment = spyOnEvent(document, Pixelated.events.mail.resetAttachments);
+      this.component.trigger(document, Pixelated.events.dispatchers.rightPane.openComposeBox);
+
+      expect(triggerRestAttachment).toHaveBeenTriggeredOn(document);
+    });
+
+
     describe('no message selected', function () {
       var noMessageSelectedPane;
       beforeEach(function () {
diff --git a/web-ui/test/spec/mail_view/data/attachment_list.spec.js b/web-ui/test/spec/mail_view/data/attachment_list.spec.js
index 3d93537b..45167e33 100644
--- a/web-ui/test/spec/mail_view/data/attachment_list.spec.js
+++ b/web-ui/test/spec/mail_view/data/attachment_list.spec.js
@@ -16,6 +16,20 @@ describeMixin('mail_view/data/attachment_list', function () {
             expect(this.component.attr.attachments).toEqual([stubAttachment, anotherStubAttachment]);
         });
 
+        it('should reset attachment list on compose', function () {
+            this.component.attr.attachments = ['some array'];
+            $(document).trigger(Pixelated.events.mail.resetAttachments);
+
+            expect(this.component.attr.attachments).toEqual([]);
+        });
+
+        it('should reset attachment list and tear down when email sent', function () {
+            this.component.attr.attachments = ['some array'];
+            $(document).trigger(Pixelated.events.mail.sent);
+
+            expect(this.component.attr.attachments).toEqual([]);
+        });
+
     });
 
 });
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 c66b959c..8bbc9f1a 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
@@ -4,7 +4,7 @@ describeComponent('mail_view/ui/attachment_list', function () {
     describe('initialization', function () {
         beforeEach(function () {
             this.setupComponent('<div id="attachment-list">' +
-                '<ul><li id="attachment-list-item"> </li></ul>' +
+                '<ul id="attachment-list-item"></ul>' +
                 '</div>');
         });
 
@@ -22,10 +22,20 @@ describeComponent('mail_view/ui/attachment_list', function () {
 
             $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment);
 
-            var expected_li = '<a href="/attachment/faked?filename=haha.txt&amp;encoding=base64">haha.txt (4.39 Kb)</a>';
+            var expected_li = '<li><a href="/attachment/faked?filename=haha.txt&amp;encoding=base64">haha.txt (4.39 Kb)</a></li>';
             expect(this.component.select('attachmentListItem').html()).toEqual(expected_li);
         });
 
+        it('should tear down when email sent', function () {
+            var mockTearDown = spyOn(this.Component.prototype, 'resetAll');
+            this.setupComponent('<div id="attachment-list">' +
+                '<ul id="attachment-list-item"></ul>' +
+                '</div>');
+            $(document).trigger(Pixelated.events.mail.sent);
+
+            expect(mockTearDown).toHaveBeenCalled();
+        });
+
         xit('should start uploading attachments', function () {
             var stubAttachment = {attachment_id: 'faked', filename: 'haha.txt', filesize: 4500};
             var mockAjax = spyOn($, 'ajax').and.callFake(function (params) {params.success(stubAttachment);});
diff --git a/web-ui/test/spec/mail_view/ui/compose_box.spec.js b/web-ui/test/spec/mail_view/ui/compose_box.spec.js
index 84f1e0ed..6d318815 100644
--- a/web-ui/test/spec/mail_view/ui/compose_box.spec.js
+++ b/web-ui/test/spec/mail_view/ui/compose_box.spec.js
@@ -13,7 +13,6 @@ describeComponent('mail_view/ui/compose_box', function () {
 
 
   describe('compose new mail', function() {
-
     it('only sends if all the recipients are valid emails', function() {
       $(document).trigger(Pixelated.events.ui.recipients.updated, {recipientsName: 'to', newRecipients: ['valid@email.example']});