Hides reply box container until mail data is loaded #662 with @jeffhsta

5 files changed, 39 insertions, 6 deletions

diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 8465b45a..dfc57585 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -76,6 +76,7 @@ define(
         this.trigger(document, events.search.highlightResults, {where: '.bodyArea'});
         this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
         this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
+        this.trigger(document, events.ui.replyBox.showReplyContainer);
 
         this.attachTagCompletion(this.attr.mail);
 
diff --git a/web-ui/app/js/mail_view/ui/reply_section.js b/web-ui/app/js/mail_view/ui/reply_section.js
index 46dfe863..cbe64205 100644
--- a/web-ui/app/js/mail_view/ui/reply_section.js
+++ b/web-ui/app/js/mail_view/ui/reply_section.js
@@ -36,7 +36,8 @@ define(
         replyAllButton: '#reply-all-button',
         forwardButton: '#forward-button',
         replyBox: '#reply-box',
-        replyType: 'reply'
+        replyType: 'reply',
+        replyContainer: '.reply-container'
       });
 
       this.showReply = function() {
@@ -64,9 +65,7 @@ define(
 
       this.checkForDraftReply = function() {
         this.render();
-        this.select('replyButton').hide();
-        this.select('replyAllButton').hide();
-        this.select('forwardButton').hide();
+        this.hideContainer();
 
         this.trigger(document, events.mail.draftReply.want, {ident: this.attr.ident});
       };
@@ -76,11 +75,13 @@ define(
       };
 
       this.showDraftReply = function(ev, data) {
+        this.showContainer();
         this.hideButtons();
         ReplyBox.attachTo(this.select('replyBox'), { mail: data.mail, draftReply: true });
       };
 
       this.showReplyComposeBox = function (ev, data) {
+        this.showContainer();
         this.hideButtons();
         if(this.attr.replyType === 'forward') {
           ForwardBox.attachTo(this.select('replyBox'), { mail: data.mail });
@@ -89,6 +90,14 @@ define(
         }
       };
 
+      this.hideContainer = function() {
+        this.select('replyContainer').hide();
+      };
+
+      this.showContainer = function() {
+        this.select('replyContainer').show();
+      };
+
       this.hideButtons = function() {
         this.select('replyButton').hide();
         this.select('replyAllButton').hide();
@@ -96,6 +105,7 @@ define(
       };
 
       this.showButtons = function () {
+        this.showContainer();
         this.select('replyBox').empty();
         this.select('replyButton').show();
         this.select('replyAllButton').show();
@@ -109,7 +119,7 @@ define(
         this.on(this, events.mail.here, this.showReplyComposeBox);
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
 
-        this.on(document, events.mail.draftReply.notFound, this.showButtons);
+        this.on(document, events.ui.replyBox.showReplyContainer, this.showContainer);
         this.on(document, events.mail.draftReply.here, this.showDraftReply);
 
         this.checkForDraftReply();
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 1ec27c46..7a0dbf9d 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -79,7 +79,8 @@ define(function () {
       },
       replyBox: {
         showReply: 'ui:replyBox:showReply',
-        showReplyAll: 'ui:replyBox:showReplyAll'
+        showReplyAll: 'ui:replyBox:showReplyAll',
+        showReplyContainer: 'ui:replyBox:showReplyContainer',
       },
       recipients: {
         entered: 'ui:recipients:entered',
diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js
index ae874621..9ed56023 100644
--- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js
+++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js
@@ -29,6 +29,11 @@ describeComponent('mail_view/ui/mail_view', function () {
     expect(openNoMessageSelectedEvent).toHaveBeenTriggeredOn(document);
   });
 
+  it('should open reply container', function () {
+    var showContainerEvent = spyOnEvent(document, Pixelated.events.ui.replyBox.showReplyContainer);
+    this.component.displayMail({}, testData);
+    expect(showContainerEvent).toHaveBeenTriggeredOn(document);
+  });
 
   it('removes the tag from the mail when the tag label is clicked', function() {
     var updateSpy = spyOnEvent(document, Pixelated.events.mail.tags.update);
diff --git a/web-ui/test/spec/mail_view/ui/reply_section.spec.js b/web-ui/test/spec/mail_view/ui/reply_section.spec.js
index 9cdf7405..00709684 100644
--- a/web-ui/test/spec/mail_view/ui/reply_section.spec.js
+++ b/web-ui/test/spec/mail_view/ui/reply_section.spec.js
@@ -5,6 +5,18 @@ describeComponent('mail_view/ui/reply_section', function () {
     this.setupComponent();
   });
 
+  describe('show/hide reply container', function () {
+    it('should hide reply container until mail data is loaded', function () {
+      this.component.checkForDraftReply();
+      expect(this.component.select('replyContainer')).toBeHidden();
+    });
+
+    it('should show reply container when mail data is loaded', function () {
+      this.component.trigger(document, Pixelated.events.ui.replyBox.showReplyContainer);
+      expect(this.component.select('replyContainer')).not.toBeHidden();
+    });
+  });
+
   describe('clicking reply buttons', function() {
     var mailWantEvent, expectEventData;
 
@@ -45,6 +57,7 @@ describeComponent('mail_view/ui/reply_section', function () {
       this.component.attr.replyType = 'reply';
       this.component.trigger(this.component, Pixelated.events.mail.here, { mail: mailData });
 
+      expect(this.component.select('replyContainer')).not.toBeHidden();
       expect(ReplyBox.attachTo).toHaveBeenCalledWith(jasmine.any(Object), {
         mail: mailData,
         replyType: 'reply'
@@ -55,6 +68,7 @@ describeComponent('mail_view/ui/reply_section', function () {
       this.component.attr.replyType = 'replyall';
       this.component.trigger(this.component, Pixelated.events.mail.here, { mail: mailData });
 
+      expect(this.component.select('replyContainer')).not.toBeHidden();
       expect(ReplyBox.attachTo).toHaveBeenCalledWith(jasmine.any(Object), {
         mail: mailData,
         replyType: 'replyall'
@@ -65,6 +79,7 @@ describeComponent('mail_view/ui/reply_section', function () {
       this.component.attr.replyType = 'forward';
       this.component.trigger(this.component, Pixelated.events.mail.here, { mail: mailData });
 
+      expect(this.component.select('replyContainer')).not.toBeHidden();
       expect(ForwardBox.attachTo).toHaveBeenCalledWith(jasmine.any(Object), {
         mail: mailData
       });
@@ -87,6 +102,7 @@ describeComponent('mail_view/ui/reply_section', function () {
 
     $(document).trigger(Pixelated.events.ui.composeBox.trashReply);
 
+    expect(this.component.select('replyContainer')).not.toBeHidden();
     expect(this.component.select('replyButton')).not.toBeHidden();
     expect(this.component.select('replyAllButton')).not.toBeHidden();
     expect(this.component.select('forwardButton')).not.toBeHidden();