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

2 files changed, 18 insertions, 12 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 2a7bf0bc306..deaed6c11e8 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/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) ->
diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee
index 96e10dd7e8a..3288c801388 100644
--- a/app/assets/javascripts/project.js.coffee
+++ b/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) ->