Keeps the filters after a reload

app/assets/javascripts/boards/components/board.js.es6

@@ -11,13 +11,11 @@
     watch: {
       'query': function () {
         if (this.board.canSearch()) {
-          this.board.filters = this.getFilterData();
           this.board.getIssues(true);
         }
       },
       'filters': {
         handler: function () {
-          this.board.filters = this.getFilterData();
           this.board.getIssues(true);
         },
         deep: true

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

@@ -4,7 +4,7 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.filters = {};
+    this.filters = BoardsStore.state.filters;
     this.page = 1;
     this.loading = true;
     this.issues = [];

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -3,10 +3,10 @@
     state: {
       lists: [],
       filters: {
-        author_id: null,
-        assignee_id: null,
-        milestone_title: null,
-        label_name: []
+        author_id: gl.utils.getParameterValues('author_id')[0],
+        assignee_id: gl.utils.getParameterValues('assignee_id')[0],
+        milestone_title: gl.utils.getParameterValues('milestone_title')[0],
+        label_name: gl.utils.getParameterValues('label_name[]')
       }
     },
     reset: function () {
@@ -118,6 +118,9 @@
       return _.find(this.state.lists, (list) => {
         return list[key] === val;
       });
+    },
+    updateFiltersUrl: function () {
+      history.pushState(null, null, `?${$.param(this.state.filters)}`);
     }
   };
 }(window));

app/assets/javascripts/labels_select.js

@@ -272,6 +272,9 @@
             isMRIndex = page === 'projects:merge_requests:index';
             $selectbox.hide();
             $value.removeAttr('style');
+            if (page === 'projects:boards:show') {
+              return;
+            }
             if ($dropdown.hasClass('js-multiselect')) {
               if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
                 selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
@@ -291,7 +294,7 @@
             }
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
-          clicked: function(label) {
+          clicked: function(label, $el, e) {
             var isIssueIndex, isMRIndex, page;
             _this.enableBulkLabelDropdown();
             if ($dropdown.hasClass('js-filter-bulk-update')) {
@@ -301,7 +304,9 @@
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = page === 'projects:merge_requests:index';
             if (page === 'projects:boards:show') {
-              BoardsStore.state.filters['label_name'] = label.title;
+              BoardsStore.state.filters['label_name'].push(label.title);
+              BoardsStore.updateFiltersUrl();
+              e.preventDefault();
               return;
             } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
               if (!$dropdown.hasClass('js-multiselect')) {

app/assets/javascripts/milestone_select.js

@@ -94,7 +94,7 @@
             $selectbox.hide();
             return $value.css('display', '');
           },
-          clicked: function(selected) {
+          clicked: function(selected, $el, e) {
             var data, isIssueIndex, isMRIndex, page;
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
@@ -104,6 +104,8 @@
             }
             if (page === 'projects:boards:show') {
               BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
+              BoardsStore.updateFiltersUrl();
+              e.preventDefault();
             } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
               if (selected.name != null) {
                 selectedMilestone = selected.name;

app/assets/javascripts/users_select.js

@@ -141,7 +141,7 @@
               $selectbox.hide();
               return $value.css('display', '');
             },
-            clicked: function(user) {
+            clicked: function(user, $el, e) {
               var isIssueIndex, isMRIndex, page, selected;
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
@@ -150,7 +150,10 @@
                 return;
               }
               if (page === 'projects:boards:show') {
+                selectedId = user.id;
                 BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
+                BoardsStore.updateFiltersUrl();
+                e.preventDefault();
               } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
                 selectedId = user.id;
                 return Issuable.filterResults($dropdown.closest('form'));

app/assets/stylesheets/pages/boards.scss

@@ -5,7 +5,7 @@
 .is-dragging {
   * {
     cursor: -webkit-grabbing;
-    cursor:         grabbing;
+    cursor: grabbing;
   }
 }
 
@@ -13,7 +13,7 @@
   width: 320px;
 
   .dropdown-content {
-		max-height: 150px;
+    max-height: 150px;
 	}
 }
 
@@ -111,7 +111,7 @@
   border-top-left-radius: $border-radius-default;
   border-top-right-radius: $border-radius-default;
   cursor: -webkit-grab;
-  cursor:         grab;
+  cursor: grab;
 
   &.has-border {
     padding-top: ($gl-padding - 3px);
@@ -231,7 +231,7 @@
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
   list-style: none;
   cursor: -webkit-grab;
-  cursor:         grab;
+  cursor: grab;
 
   &:not(:last-child) {
     margin-bottom: 5px;

spec/features/boards/boards_spec.rb

@@ -8,7 +8,7 @@ describe 'Issue Boards', feature: true, js: true do
     project.team << [user, :master]
     login_as(user)
 
-    visit namespace_project_boards_path(project.namespace, project)
+    visit namespace_project_board_path(project.namespace, project)
   end
 
   it 'shows default lists' do