Fixed sidebar dropdowns to work with Vue

app/assets/javascripts/boards/models/issue.js.es6

@@ -58,6 +58,10 @@ class ListIssue {
       }
     };
 
+    if (!data.issue.label_ids.length) {
+      data.issue.label_ids = [''];
+    }
+
     return Vue.http.patch(url, data);
   }
 }

app/assets/javascripts/gl_dropdown.js

@@ -620,6 +620,17 @@
           selectedObject = this.renderedData[selectedIndex];
         }
       }
+
+      if (this.options.vue) {
+        if (el.hasClass(ACTIVE_CLASS)) {
+          el.removeClass(ACTIVE_CLASS);
+        } else {
+          el.addClass(ACTIVE_CLASS);
+        }
+
+        return selectedObject;
+      }
+
       field = [];
       value = this.options.id ? this.options.id(selectedObject, el) : selectedObject.id;
       if (isInput) {

app/assets/javascripts/labels_select.js

@@ -317,6 +317,7 @@
             }
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
+          vue: $dropdown.hasClass('js-issue-board-sidebar'),
           clicked: function(label, $el, e) {
             var isIssueIndex, isMRIndex, page;
             _this.enableBulkLabelDropdown();
@@ -334,7 +335,7 @@
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = page === 'projects:merge_requests:index';
-            if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-boards-label')) {
+            if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-board-sidebar')) {
               if (label.isAny) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
               }
@@ -362,7 +363,7 @@
             else if ($dropdown.hasClass('js-filter-submit')) {
               return $dropdown.closest('form').submit();
             }
-            else if ($dropdown.hasClass('js-issue-boards-label')) {
+            else if ($dropdown.hasClass('js-issue-board-sidebar')) {
               if ($el.hasClass('is-active')) {
                 gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
                   id: label.id,

app/assets/javascripts/milestone_select.js

@@ -101,6 +101,7 @@
             // display:block overrides the hide-collapse rule
             return $value.css('display', '');
           },
+          vue: $dropdown.hasClass('js-issue-board-sidebar'),
           clicked: function(selected, $el, e) {
             var data, isIssueIndex, isMRIndex, page;
             page = $('body').data('page');

app/assets/javascripts/users_select.js

@@ -175,6 +175,7 @@
               // display:block overrides the hide-collapse rule
               return $value.css('display', '');
             },
+            vue: $dropdown.hasClass('js-issue-board-sidebar'),
             clicked: function(user, $el, e) {
               var isIssueIndex, isMRIndex, page, selected;
               page = $('body').data('page');
@@ -185,7 +186,7 @@
                 selectedId = user.id;
                 return;
               }
-              if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-board-assignee')) {
+              if (page === 'projects:boards:show' && !$dropdown.hasClass('js-issue-board-sidebar')) {
                 selectedId = user.id;
                 gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
                 gl.issueBoards.BoardsStore.updateFiltersUrl();
@@ -195,7 +196,7 @@
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
-              } else if ($dropdown.hasClass('js-issue-board-assignee')) {
+              } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
                 if (user.id) {
                   Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
                     id: user.id,

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

@@ -28,7 +28,7 @@
         ":value" => "issue.assignee.id",
         "v-if" => "issue.assignee" }
       .dropdown
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-assignee{ data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, field_name: "issue[assignee_id]", null_user: "true" },
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-sidebar{ data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, field_name: "issue[assignee_id]", null_user: "true" },
           ":data-issuable-id" => "issue.id",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Select assignee

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

@@ -18,7 +18,7 @@
         "v-for" => "label in issue.labels",
         ":value" => "label.id" }
       .dropdown
-        %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-boards-label{ type: "button",
+        %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button",
           data: { toggle: "dropdown", field_name: "issue[label_names][]", show_no: "true", show_any: "true", project_id: @project.id, labels: namespace_project_labels_path(@project.namespace, @project, :json) },
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           %span.dropdown-toggle-text