Merge branch 'issues-filters-reset-btn' into 'master'

Add issues filters reset btn

## What does this MR do?

Adds a button to the issues filter to reset all filters. I also lightly refactored a nearby method.

## Are there points in the code the reviewer needs to double check?

At the moment, the user can click the reset button even when no filters have been set. I didn't really like how it looked flashing the link on and off depending on whether a user had added a filter. I prefer having it there all the time, so the user is aware of it. But it wouldn't be difficult to hide if no filters have been set, if that's preferred.

## Why was this MR needed?

So users can reset filters when they're filtering issues.

## What are the relevant issue numbers?

https://gitlab.com/gitlab-org/gitlab-ce/issues/14016

## Screenshots (if relevant)

![reset-filters](/uploads/562916158ce7b0179794e19f88f5c2e3/reset-filters.png)

## Does this MR meet the acceptance criteria?

- [X] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [X] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [X] API support added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [X] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [X] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [X] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5330

CHANGELOG

@@ -130,6 +130,7 @@ v 8.11.3
   - Fix external issue tracker "Issues" link leading to 404s
   - Don't try to show merge conflict resolution info if a merge conflict contains non-UTF-8 characters
   - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)
+  - Issues filters reset button
 
 v 8.11.2
   - Show "Create Merge Request" widget for push events to fork projects on the source project. !5978

app/assets/javascripts/issuable.js → app/assets/javascripts/issuable.js.es6

@@ -8,6 +8,7 @@
       Issuable.initTemplates();
       Issuable.initSearch();
       Issuable.initChecks();
+      Issuable.initResetFilters();
       return Issuable.initLabelFilterRemove();
     },
     initTemplates: function() {
@@ -55,6 +56,17 @@
         return Turbolinks.visit(issuesUrl);
       };
     })(this),
+    initResetFilters: function() {
+      $('.reset-filters').on('click', function(e) {
+        e.preventDefault();
+        const target = e.target;
+        const $form = $(target).parents('.js-filter-form');
+        const baseIssuesUrl = target.href;
+
+        $form.attr('action', baseIssuesUrl);
+        Turbolinks.visit(baseIssuesUrl);
+      });
+    },
     initChecks: function() {
       this.issuableBulkActions = $('.bulk-update').data('bulkActions');
       $('.check_all_issues').off('click').on('click', function() {
@@ -64,19 +76,22 @@
       return $('.selected_issue').off('change').on('change', Issuable.checkChanged.bind(this));
     },
     checkChanged: function() {
-      var checked_issues, ids;
-      checked_issues = $('.selected_issue:checked');
-      if (checked_issues.length > 0) {
-        ids = $.map(checked_issues, function(value) {
+      const $checkedIssues = $('.selected_issue:checked');
+      const $updateIssuesIds = $('#update_issues_ids');
+      const $issuesOtherFilters = $('.issues-other-filters');
+      const $issuesBulkUpdate = $('.issues_bulk_update');
+
+      if ($checkedIssues.length > 0) {
+        let ids = $.map($checkedIssues, function(value) {
           return $(value).data('id');
         });
-        $('#update_issues_ids').val(ids);
-        $('.issues-other-filters').hide();
-        $('.issues_bulk_update').show();
+        $updateIssuesIds.val(ids);
+        $issuesOtherFilters.hide();
+        $issuesBulkUpdate.show();
       } else {
-        $('#update_issues_ids').val([]);
-        $('.issues_bulk_update').hide();
-        $('.issues-other-filters').show();
+        $updateIssuesIds.val([]);
+        $issuesBulkUpdate.hide();
+        $issuesOtherFilters.show();
         this.issuableBulkActions.willUpdateLabels = false;
       }
       return true;

app/assets/stylesheets/framework/filters.scss

 .filter-item {
   margin-right: 6px;
   vertical-align: top;
+
+  &.reset-filters {
+    padding: 7px;
+  }
 }
 
 @media (min-width: $screen-sm-min) {

app/views/shared/issuable/_filter.html.haml

@@ -26,6 +26,9 @@
         .filter-item.inline.labels-filter
           = render "shared/issuable/label_dropdown"
 
+        .filter-item.inline.reset-filters
+          %a{href: page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :issue_search])} Reset filters
+
         .pull-right
           - if controller.controller_name == 'boards'
             #js-boards-seach.issue-boards-search

spec/features/issues/reset_filters_spec.rb

+require 'rails_helper'
+
+feature 'Issues filter reset button', feature: true, js: true do
+  include WaitForAjax
+  include IssueHelpers
+
+  let!(:project)    { create(:project, :public) }
+  let!(:user)        { create(:user)}
+  let!(:milestone)  { create(:milestone, project: project) }
+  let!(:bug)        { create(:label, project: project, name: 'bug')}
+  let!(:issue1)     { create(:issue, project: project, milestone: milestone, author: user, assignee: user, title: 'Feature')}
+  let!(:issue2)     { create(:labeled_issue, project: project, labels: [bug], title: 'Bugfix1')}
+
+  before do
+    project.team << [user, :developer]
+  end
+
+  context 'when a milestone filter has been applied' do
+    it 'resets the milestone filter' do
+      visit_issues(project, milestone_title: milestone.title)
+      expect(page).to have_css('.issue', count: 1)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  context 'when a label filter has been applied' do
+    it 'resets the label filter' do
+      visit_issues(project, label_name: bug.name)
+      expect(page).to have_css('.issue', count: 1)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  context 'when a text search has been conducted' do
+    it 'resets the text search filter' do
+      visit_issues(project, issue_search: 'Bug')
+      expect(page).to have_css('.issue', count: 1)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  context 'when author filter has been applied' do
+    it 'resets the author filter' do
+      visit_issues(project, author_id: user.id)
+      expect(page).to have_css('.issue', count: 1)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  context 'when assignee filter has been applied' do
+    it 'resets the assignee filter' do
+      visit_issues(project, assignee_id: user.id)
+      expect(page).to have_css('.issue', count: 1)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  context 'when all filters have been applied' do
+    it 'resets all filters' do
+      visit_issues(project, assignee_id: user.id, author_id: user.id, milestone_title: milestone.title, label_name: bug.name, issue_search: 'Bug')
+      expect(page).to have_css('.issue', count: 0)
+
+      reset_filters
+      expect(page).to have_css('.issue', count: 2)
+    end
+  end
+
+  def reset_filters
+    find('.reset-filters').click
+  end
+end