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.

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');
     }
   });
 })();

app/assets/javascripts/due_date_select.js.es6

@@ -41,16 +41,27 @@
         defaultDate: $("input[name='" + this.fieldName + "']").val(),
         altField: "input[name='" + this.fieldName + "']",
         onSelect: () => {
+          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);
           }
+        }
       });
     }
 
     initRemoveDueDate() {
       this.$block.on('click', '.js-remove-due-date', (e) => {
         e.preventDefault();
+
+        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',

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();
                 });

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();

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';

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();
               });

app/views/projects/boards/components/_sidebar.html.haml

 %board-sidebar{ "inline-template" => true,
   ":current-user" => "#{current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) if current_user}" }
-  %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-if" => "showSidebar" }
+  %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
     .issuable-sidebar
       .block.issuable-sidebar-header
         %span.issuable-header-text.hide-collapsed.pull-left

app/views/projects/boards/components/sidebar/_due_date.html.haml

@@ -10,6 +10,7 @@
         No due date
       %span.bold{ "v-if" => "issue.dueDate" }
         {{ issue.dueDate | due-date }}
+      - if can?(current_user, :admin_issue, @project)
         %span.no-value.js-remove-due-date-holder{ "v-if" => "issue.dueDate" }
           \-
           %a.js-remove-due-date{ href: "#", role: "button" }

app/views/projects/boards/components/sidebar/_labels.html.haml

@@ -5,7 +5,7 @@
     - if can?(current_user, :admin_issue, @project)
       = link_to "Edit", "#", class: "edit-link pull-right"
   .value.issuable-show-labels
-    %span.no-value{ "v-if" => "issue.labels.length === 0" }
+    %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
       None
     %a{ href: "#",
       "v-for" => "label in issue.labels" }