Merge branch 'ref-dropdown-jquery-objects' into 'master'

Use jQuery objects in ref dropdown

## What does this MR do?

Keeps the behaviour the same as the ref dropdown, however it now uses jQuery objects to handle the HTML creation instead of passing strings around. It pretty much worked out the box so not much was changed in the dropdowns themselves. Will be easy to transfer this over to other dropdown menus as well.

cc. @jschatz1 @rspeicher @DouweM 

Do we want this to go into a patch release?

See merge request !4850

app/assets/javascripts/gl_dropdown.js.coffee

@@ -280,7 +280,7 @@ class GitLabDropdown
         html = @renderData(data)
 
     # Render the full menu
-    full_html = @renderMenu(html.join(""))
+    full_html = @renderMenu(html)
 
     @appendMenu(full_html)
 
@@ -351,7 +351,8 @@ class GitLabDropdown
     if @options.renderMenu
       menu_html = @options.renderMenu(html)
     else
-      menu_html = "<ul>#{html}</ul>"
+      menu_html = $('<ul />')
+        .append(html)
 
     return menu_html
 
@@ -360,7 +361,9 @@ class GitLabDropdown
     selector = '.dropdown-content'
     if @dropdown.find(".dropdown-toggle-page").length
       selector = ".dropdown-page-one .dropdown-content"
-    $(selector, @dropdown).html html
+    $(selector, @dropdown)
+      .empty()
+      .append(html)
 
   # Render the row
   renderItem: (data, group = false, index = false) ->

app/assets/javascripts/project.js.coffee

@@ -70,17 +70,20 @@ class @Project
         fieldName: 'ref'
         renderRow: (ref) ->
           if ref.header?
-            "<li class='dropdown-header'>#{ref.header}</li>"
+            $('<li />')
+              .addClass('dropdown-header')
+              .text(ref.header)
           else
-            isActiveClass = if ref is selected then 'is-active' else ''
-
-            "<li>
-              <a href='#' data-ref='#{escape(ref)}' class='#{isActiveClass}'>
-                #{ref}
-              </a>
-            </li>"
+            link = $('<a />')
+              .attr('href', '#')
+              .addClass(if ref is selected then 'is-active' else '')
+              .text(ref)
+              .attr('data-ref', escape(ref))
+
+            $('<li />')
+              .append(link)
         id: (obj, $el) ->
-          $el.data('ref')
+          $el.attr('data-ref')
         toggleLabel: (obj, $el) ->
           $el.text().trim()
         clicked: (e) ->