Merge branch 'issue-fade-load' into 'master'

Changing filter dropdowns shows loading

Instead of doing a full refresh of the page - i've modified the filterResults method on the Issues object to work for this form as well

![issues](/uploads/3335f09f7df88b6d419de7fd3d6857d2/issues.gif)

Closes #14359

See merge request !3237

6 files changed, 113 insertions, 64 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 4f038477755..c81e8bf760a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -246,11 +246,15 @@ class GitLabDropdown
         if oldValue
           value = "#{oldValue},#{value}"
       else
-        @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
+        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
 
       # Toggle active class for the tick mark
       el.toggleClass "is-active"
 
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
+
       if value?
         if !field.length
           # Create hidden input for form
diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
index a0acf3028bf..1127b289264 100644
--- a/app/assets/javascripts/issues.js.coffee
+++ b/app/assets/javascripts/issues.js.coffee
@@ -41,24 +41,28 @@
     @timer = null
     $("#issue_search").keyup ->
       clearTimeout(@timer)
-      @timer = setTimeout(Issues.filterResults, 500)
+      @timer = setTimeout( ->
+        Issues.filterResults $("#issue_search_form")
+      , 500)
 
-  filterResults: =>
-    form = $("#issue_search_form")
-    search = $("#issue_search").val()
-    $('.issues-holder').css("opacity", '0.5')
-    issues_url = form.attr('action') + '?' + form.serialize()
+  filterResults: (form) =>
+    $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
+    formAction = form.attr('action')
+    formData = form.serialize()
+    issuesUrl = formAction
+    issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
+    issuesUrl += formData
 
     $.ajax
       type: "GET"
-      url: form.attr('action')
-      data: form.serialize()
+      url: formAction
+      data: formData
       complete: ->
-        $('.issues-holder').css("opacity", '1.0')
+        $('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
       success: (data) ->
-        $('.issues-holder').html(data.html)
+        $('.issues-holder, .merge-requests-holder').html(data.html)
         # Change url so if user reload a page - search results are saved
-        history.replaceState {page: issues_url}, document.title, issues_url
+        history.replaceState {page: issuesUrl}, document.title, issuesUrl
         Issues.reload()
       dataType: "json"
 
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 5ade2cb66cb..e6c1446f14f 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -1,30 +1,32 @@
 class @LabelsSelect
   constructor: ->
     $('.js-label-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      labelUrl = $(dropdown).data("labels")
-      selectedLabel = $(dropdown).data('selected')
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      labelUrl = $dropdown.data('labels')
+      selectedLabel = $dropdown.data('selected')
       if selectedLabel
-        selectedLabel = selectedLabel.split(",")
+        selectedLabel = selectedLabel.split(',')
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      defaultLabel = $dropdown.text().trim()
 
       if newLabelField.length
-        $('.suggest-colors-dropdown a').on "click", (e) ->
+        $('.suggest-colors-dropdown a').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
-          newColorField.val $(this).data("color")
+          newColorField.val $(this).data('color')
           $('.js-dropdown-label-color-preview')
-            .css 'background-color', $(this).data("color")
+            .css 'background-color', $(this).data('color')
             .addClass 'is-active'
 
-        $('.js-new-label-btn').on "click", (e) ->
+        $('.js-new-label-btn').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
 
-          if newLabelField.val() isnt "" && newColorField.val() isnt ""
+          if newLabelField.val() isnt '' and newColorField.val() isnt ''
             $('.js-new-label-btn').disable()
 
             # Create new label with API
@@ -33,9 +35,9 @@ class @LabelsSelect
               color: newColorField.val()
             }, (label) ->
               $('.js-new-label-btn').enable()
-              $('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
+              $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
-      $(dropdown).glDropdown(
+      $dropdown.glDropdown(
         data: (term, callback) ->
           # We have to fetch the JS version of the labels list because there is no
           # public facing JSON url for labels
@@ -51,28 +53,29 @@ class @LabelsSelect
 
             if showNo
               data.unshift(
-                id: "0"
-                title: 'No label'
+                id: 0
+                title: 'No Label'
               )
 
             if showAny
               data.unshift(
-                title: 'Any label'
+                isAny: true
+                title: 'Any Label'
               )
 
             if data.length > 2
-              data.splice 2, 0, "divider"
+              data.splice 2, 0, 'divider'
 
             callback data
         renderRow: (label) ->
           if $.isArray(selectedLabel)
-            selected = ""
+            selected = ''
             $.each selectedLabel, (i, selectedLbl) ->
               selectedLbl = selectedLbl.trim()
-              if selected is "" && label.title is selectedLbl
-                selected = "is-active"
+              if selected is '' and label.title is selectedLbl
+                selected = 'is-active'
           else
-            selected = if label.title is selectedLabel then "is-active" else ""
+            selected = if label.title is selectedLabel then 'is-active' else ''
 
           "<li>
             <a href='#' class='#{selected}'>
@@ -83,10 +86,24 @@ class @LabelsSelect
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected and selected.title isnt 'Any Label'
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         id: (label) ->
-          label.title
+          if label.isAny?
+            ''
+          else
+            label.title
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
       )
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 32159a7c179..0287d98b1ec 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -1,14 +1,16 @@
 class @MilestoneSelect
   constructor: ->
     $('.js-milestone-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      milestonesUrl = $(dropdown).data('milestones')
-      selectedMilestone = $(dropdown).data('selected')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
-      useId = $(dropdown).data('use-id')
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      milestonesUrl = $dropdown.data('milestones')
+      selectedMilestone = $dropdown.data('selected')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      useId = $dropdown.data('use-id')
+      defaultLabel = $dropdown.text().trim()
 
-      $(dropdown).glDropdown(
+      $dropdown.glDropdown(
         data: (term, callback) ->
           $.ajax(
             url: milestonesUrl
@@ -16,7 +18,7 @@ class @MilestoneSelect
             html = $(data)
             data = []
             html.find('.milestone strong a').each ->
-              link = $(@).attr("href").split("/")
+              link = $(@).attr('href').split('/')
               data.push(
                 id: link[link.length - 1]
                 title: $(@).text().trim()
@@ -24,7 +26,7 @@ class @MilestoneSelect
 
             if showNo
               data.unshift(
-                id: "0"
+                id: '0'
                 title: 'No Milestone'
               )
 
@@ -35,14 +37,19 @@ class @MilestoneSelect
               )
 
             if data.length > 2
-              data.splice 2, 0, "divider"
+              data.splice 2, 0, 'divider'
 
             callback(data)
         filterable: true
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         text: (milestone) ->
           milestone.title
         id: (milestone) ->
@@ -50,12 +57,18 @@ class @MilestoneSelect
             if !milestone.isAny?
               milestone.title
             else
-              ""
+              ''
           else
             milestone.id
         isSelected: (milestone) ->
           milestone.title is selectedMilestone
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
       )
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index 987c6f4b8d2..48831dd6bc4 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -4,14 +4,16 @@ class @UsersSelect
     @userPath = "/autocomplete/users/:id.json"
 
     $('.js-user-search').each (i, dropdown) =>
-      @projectId = $(dropdown).data('project-id')
-      @showCurrentUser = $(dropdown).data('current-user')
-      showNullUser = $(dropdown).data('null-user')
-      showAnyUser = $(dropdown).data('any-user')
-      firstUser = $(dropdown).data('first-user')
-      selectedId = $(dropdown).data('selected')
-
-      $(dropdown).glDropdown(
+      $dropdown = $(dropdown)
+      @projectId = $dropdown.data('project-id')
+      @showCurrentUser = $dropdown.data('current-user')
+      showNullUser = $dropdown.data('null-user')
+      showAnyUser = $dropdown.data('any-user')
+      firstUser = $dropdown.data('first-user')
+      selectedId = $dropdown.data('selected')
+      defaultLabel = $dropdown.text().trim()
+
+      $dropdown.glDropdown(
         data: (term, callback) =>
           @users term, (users) =>
             if term.length is 0
@@ -52,10 +54,21 @@ class @UsersSelect
         search:
           fields: ['name', 'username']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        fieldName: $dropdown.data('field-name')
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.name
+          else
+            defaultLabel
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
           avatar = if user.avatar_url then user.avatar_url else false
diff --git a/spec/features/merge_requests/filter_by_milestone_spec.rb b/spec/features/merge_requests/filter_by_milestone_spec.rb
index 1b2fd1bab10..b76e4c74c79 100644
--- a/spec/features/merge_requests/filter_by_milestone_spec.rb
+++ b/spec/features/merge_requests/filter_by_milestone_spec.rb
@@ -30,8 +30,6 @@ feature 'Merge Request filtering by Milestone', feature: true do
 
   def filter_by_milestone(title)
     find(".js-milestone-select").click
-    sleep 0.5
     find(".milestone-filter a", text: title).click
-    sleep 1
   end
 end