Hides/shows the boards sidebar

Rather than constructing & then deconstructing, we know just hide & show
the sidebar. This is done so we dont' have a memory leak on the frontend
with objects getting created.

6 files changed, 48 insertions, 26 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 35d97531439..b20890df622 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -29,22 +29,8 @@
       issue () {
         if (this.showSidebar) {
           this.$nextTick(() => {
-            this.issuableContext = new IssuableContext(this.currentUser);
-            this.milestoneSelect = new MilestoneSelect();
-            this.dueDateSelect = new gl.DueDateSelectors();
-            this.labelsSelect = new LabelsSelect();
-            this.sidebar = new Sidebar();
-            this.subscription = new Subscription('.subscription');
+            $(".right-sidebar").getNiceScroll(0).doScrollTop(0, 0);
           });
-        } else {
-          $('.right-sidebar').getNiceScroll().remove();
-
-          delete this.issuableContext;
-          delete this.milestoneSelect;
-          delete this.dueDateSelect;
-          delete this.labelsSelect;
-          delete this.sidebar;
-          delete this.subscription;
         }
       }
     },
@@ -52,6 +38,14 @@
       closeSidebar () {
         this.detail.issue = {};
       }
+    },
+    ready () {
+      new IssuableContext(this.currentUser);
+      new MilestoneSelect();
+      new gl.DueDateSelectors();
+      new LabelsSelect();
+      new Sidebar();
+      new Subscription('.subscription');
     }
   });
 })();
diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
index 41925fcc8e3..4f7c1092d05 100644
--- a/app/assets/javascripts/due_date_select.js.es6
+++ b/app/assets/javascripts/due_date_select.js.es6
@@ -41,7 +41,12 @@
         defaultDate: $("input[name='" + this.fieldName + "']").val(),
         altField: "input[name='" + this.fieldName + "']",
         onSelect: () => {
-          return this.saveDueDate(true);
+          if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
+            gl.issueBoards.BoardsStore.detail.issue.dueDate = $("input[name='" + this.fieldName + "']").val();
+            this.updateIssueBoardIssue();
+          } else {
+            return this.saveDueDate(true);
+          }
         }
       });
     }
@@ -49,8 +54,14 @@
     initRemoveDueDate() {
       this.$block.on('click', '.js-remove-due-date', (e) => {
         e.preventDefault();
-        $("input[name='" + this.fieldName + "']").val('');
-        return this.saveDueDate(false);
+
+        if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
+          gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+          this.updateIssueBoardIssue();
+        } else {
+          $("input[name='" + this.fieldName + "']").val('');
+          return this.saveDueDate(false);
+        }
       });
     }
 
@@ -83,6 +94,18 @@
       this.datePayload = datePayload;
     }
 
+    updateIssueBoardIssue () {
+      this.$loading.fadeIn();
+      this.$dropdown.trigger('loading.gl.dropdown');
+      this.$selectbox.hide();
+      this.$value.css('display', '');
+
+      gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update'))
+        .then(() => {
+          this.$loading.fadeOut();
+        });
+    }
+
     submitSelectedDate(isDropdown) {
       return $.ajax({
         type: 'PUT',
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index c532737626c..4e29ab71bd4 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -382,7 +382,7 @@
 
               $loading.fadeIn();
 
-              gl.issueBoards.BoardsStore.detail.issue.update(issueUpdateURL)
+              gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
                 .then(function () {
                   $loading.fadeOut();
                 });
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index bed1d52c989..95b5b934c81 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -137,7 +137,7 @@
               $dropdown.trigger('loading.gl.dropdown');
               $loading.fadeIn();
 
-              gl.issueBoards.BoardsStore.detail.issue.update(issueUpdateURL)
+              gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
                 .then(function () {
                   $dropdown.trigger('loaded.gl.dropdown');
                   $loading.fadeOut();
diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js
index bfef9532d2b..bfa3663bca3 100644
--- a/app/assets/javascripts/subscription.js
+++ b/app/assets/javascripts/subscription.js
@@ -5,10 +5,10 @@
     function Subscription(container) {
       this.toggleSubscription = bind(this.toggleSubscription, this);
       var $container;
-      $container = $(container);
-      this.url = $container.attr('data-url');
-      this.subscribe_button = $container.find('.js-subscribe-button');
-      this.subscription_status = $container.find('.subscription-status');
+      this.$container = $(container);
+      this.url = this.$container.attr('data-url');
+      this.subscribe_button = this.$container.find('.js-subscribe-button');
+      this.subscription_status = this.$container.find('.subscription-status');
       this.subscribe_button.unbind('click').click(this.toggleSubscription);
     }
 
@@ -18,12 +18,17 @@
       action = btn.find('span').text();
       current_status = this.subscription_status.attr('data-status');
       btn.addClass('disabled');
+
+      if ($('html').hasClass('issue-boards-page')) {
+        this.url = this.$container.attr('data-url');
+      }
+
       return $.post(this.url, (function(_this) {
         return function() {
           var status;
           btn.removeClass('disabled');
 
-          if ($('body').data('page') === 'projects:boards:show') {
+          if ($('html').hasClass('issue-boards-page')) {
             Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
           } else {
             status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 6626d730e87..da6a59bcf97 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -39,7 +39,7 @@
 
           var updateIssueBoardsIssue = function () {
             $loading.fadeIn();
-            gl.issueBoards.BoardsStore.detail.issue.update(issueURL)
+            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
               .then(function () {
                 $loading.fadeOut();
               });