Merge branch 'gl-dropdown-issuable-form' into 'master'

GL dropdowns in issuable form

## What does this MR do?

Changed all the issuable dropdown menus over to user GL dropdowns. This brings the dropdowns to be inline with the issuable filter dropdowns and allows for labels to be created whilst creating/editing an issuable.

## What are the relevant issue numbers?

Closes #12574 

## Screenshots (if relevant)


See merge request !4970

4 files changed, 30 insertions, 14 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index afaa6407b05..b5da15e9e49 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -39,6 +39,8 @@ class Dispatcher
         shortcut_handler = new ShortcutsNavigation()
         new GLForm($('.issue-form'))
         new IssuableForm($('.issue-form'))
+        new LabelsSelect()
+        new MilestoneSelect()
       when 'projects:merge_requests:new', 'projects:merge_requests:edit'
         new Diff()
         shortcut_handler = new ShortcutsNavigation()
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 7688609b301..1a802b81452 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -184,20 +184,22 @@ class @LabelsSelect
               .value()
 
             if $dropdown.hasClass 'js-extra-options'
-              if showNo
-                data.unshift(
-                  id: 0
-                  title: 'No Label'
-                )
-
+              extraData = []
               if showAny
-                data.unshift(
+                extraData.push(
                   isAny: true
                   title: 'Any Label'
                 )
 
-              if data.length > 2
-                data.splice 2, 0, 'divider'
+              if showNo
+                extraData.push(
+                  id: 0
+                  title: 'No Label'
+                )
+
+              if extraData.length
+                extraData.push 'divider'
+                data = extraData.concat(data)
 
             callback data
 
@@ -287,6 +289,12 @@ class @LabelsSelect
             defaultLabel
         fieldName: $dropdown.data('field-name')
         id: (label) ->
+          if $dropdown.hasClass('js-issuable-form-dropdown')
+            if label.id is 0
+              return
+            else
+              return label.id
+
           if $dropdown.hasClass("js-filter-submit") and not label.isAny?
             label.title
           else
@@ -300,6 +308,9 @@ class @LabelsSelect
           $selectbox.hide()
           # display:block overrides the hide-collapse rule
           $value.removeAttr('style')
+
+          return if $dropdown.hasClass('js-issuable-form-dropdown')
+
           if $dropdown.hasClass 'js-multiselect'
             if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
               selectedLabels = $dropdown
@@ -321,7 +332,7 @@ class @LabelsSelect
         clicked: (label) ->
           _this.enableBulkLabelDropdown()
 
-          if $dropdown.hasClass('js-filter-bulk-update')
+          if $dropdown.hasClass('js-filter-bulk-update') or $dropdown.hasClass('js-issuable-form-dropdown')
             return
 
           page = $('body').data 'page'
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 8ab03ed93ee..3a036569317 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -62,7 +62,7 @@ class @MilestoneSelect
                 title: 'Upcoming'
               )
 
-            if extraOptions.length > 2
+            if extraOptions.length > 0
               extraOptions.push 'divider'
 
             callback(extraOptions.concat(data))
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index 4e032ab1ff1..c84c4960657 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -151,11 +151,13 @@ class @UsersSelect
           # display:block overrides the hide-collapse rule
           $value.css('display', '')
 
-        clicked: (user) ->
+        clicked: (user, $el, e) ->
           page = $('body').data 'page'
           isIssueIndex = page is 'projects:issues:index'
           isMRIndex = page is page is 'projects:merge_requests:index'
-          if $dropdown.hasClass('js-filter-bulk-update')
+          if $dropdown.hasClass('js-filter-bulk-update') or $dropdown.hasClass('js-issuable-form-dropdown')
+            e.preventDefault()
+            selectedId = user.id
             return
 
           if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
@@ -168,7 +170,8 @@ class @UsersSelect
               .closest('.selectbox')
               .find("input[name='#{$dropdown.data('field-name')}']").val()
             assignTo(selected)
-
+        id: (user) ->
+          user.id
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
           avatar = if user.avatar_url then user.avatar_url else false