Merge branch 'label-dropdown-fix' into 'master'

Fixes "create label" functionality on label dropdown

**Issue sidebar**

![label_dropdown](/uploads/2a056136fc88626530fc275ded0c2aa3/label_dropdown.gif)

**Issues page**

![label_dropdown_issues](/uploads/965fd20f5b206499e9b11a64556c5240/label_dropdown_issues.gif)



See merge request !3670

app/assets/javascripts/gl_dropdown.js.coffee

@@ -221,6 +221,9 @@ class GitLabDropdown
 
     menu.toggleClass PAGE_TWO_CLASS
 
+    # Focus first visible input on active page
+    @dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus()
+
   parseData: (data) ->
     @renderedData = data
 
@@ -240,7 +243,8 @@ class GitLabDropdown
   shouldPropagate: (e) =>
     if @options.multiSelect
       $target = $(e.target)
-      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon')
+
+      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
         e.stopPropagation()
         return false
       else
@@ -375,7 +379,6 @@ class GitLabDropdown
       selectedObject = @renderedData[selectedIndex]
     value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
     field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-
     if el.hasClass(ACTIVE_CLASS)
       el.removeClass(ACTIVE_CLASS)
       field.remove()

app/assets/javascripts/labels_select.js.coffee

@@ -19,16 +19,12 @@ class @LabelsSelect
       $form = $dropdown.closest('form')
       $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
       $value = $block.find('.value')
-      $loading = $block.find('.block-loading').fadeOut()
-
-      if newLabelField.length
-        $newLabelCreateButton = $('.js-new-label-btn')
-        $colorPreview = $('.js-dropdown-label-color-preview')
-        $newLabelError = $dropdown.parent().find('.js-label-error')
-        $newLabelError.hide()
+      $newLabelError = $('.js-label-error')
+      $colorPreview = $('.js-dropdown-label-color-preview')
+      $newLabelCreateButton = $('.js-new-label-btn')
 
-        # Suggested colors in the dropdown to chose from pre-chosen colors
-        $('.suggest-colors-dropdown a').on 'click', (e) ->
+      $newLabelError.hide()
+      $loading = $block.find('.block-loading').fadeOut()
 
       issueURLSplit = issueUpdateURL.split('/') if issueUpdateURL?
       if issueUpdateURL
@@ -43,7 +39,9 @@ class @LabelsSelect
         )
         labelNoneHTMLTemplate = _.template('<div class="light">None</div>')
 
-      if newLabelField.length and $dropdown.hasClass 'js-extra-options'
+      if newLabelField.length
+
+        # Suggested colors in the dropdown to chose from pre-chosen colors
         $('.suggest-colors-dropdown a').on "click", (e) ->
           e.preventDefault()
           e.stopPropagation()
@@ -82,26 +80,25 @@ class @LabelsSelect
         enableLabelCreateButton = ->
           if newLabelField.val() isnt '' and newColorField.val() isnt ''
             $newLabelError.hide()
-            $('.js-new-label-btn').disable()
-
-            # Create new label with API
-            Api.newLabel projectId, {
-              name: newLabelField.val()
-              color: newColorField.val()
-            }, (label) ->
-              $('.js-new-label-btn').enable()
-
-              if label.message?
-                $newLabelError
-                  .text label.message
-                  .show()
-              else
-                $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
-
             $newLabelCreateButton.enable()
           else
             $newLabelCreateButton.disable()
 
+        saveLabel = ->
+          # Create new label with API
+          Api.newLabel projectId, {
+            name: newLabelField.val()
+            color: newColorField.val()
+          }, (label) ->
+            $newLabelCreateButton.enable()
+
+            if label.message?
+              $newLabelError
+                .text label.message
+                .show()
+            else
+              $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
         newLabelField.on 'keyup change', enableLabelCreateButton
 
         newColorField.on 'keyup change', enableLabelCreateButton
@@ -112,24 +109,7 @@ class @LabelsSelect
           .on 'click', (e) ->
             e.preventDefault()
             e.stopPropagation()
-
-            if newLabelField.val() isnt '' and newColorField.val() isnt ''
-              $newLabelError.hide()
-              $('.js-new-label-btn').disable()
-
-              # Create new label with API
-              Api.newLabel projectId, {
-                name: newLabelField.val()
-                color: newColorField.val()
-              }, (label) ->
-                $('.js-new-label-btn').enable()
-
-                if label.message?
-                  $newLabelError
-                    .text label.message
-                    .show()
-                else
-                  $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+            saveLabel()
 
       saveLabelData = ->
         selected = $dropdown

app/assets/stylesheets/framework/dropdowns.scss

@@ -320,7 +320,7 @@
   }
 }
 
-.dropdown-input-field {
+.dropdown-input-field, .default-dropdown-input {
   width: 100%;
   padding: 0 7px;
   color: $dropdown-input-color;

app/assets/stylesheets/pages/issuable.scss

@@ -249,6 +249,10 @@
       background: $gray-dark;
       border: 1px solid $border-gray-dark;
     }
+
+    &.btn-primary {
+      @extend .btn-primary
+    }
   }
 
   a:not(.issuable-pager) {

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

@@ -8,39 +8,7 @@
       = h(multi_label_name(params[:label_name], "Label"))
     = icon('chevron-down')
   .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
-    .dropdown-page-one
-      = dropdown_title("Filter by label")
-      = dropdown_filter("Search labels")
-      = dropdown_content
-      - if @project
-        = dropdown_footer do
-          %ul.dropdown-footer-list
-            - if can? current_user, :admin_label, @project
-              %li
-                %a.dropdown-toggle-page{href: "#"}
-                  Create new
-            %li
-              = link_to namespace_project_labels_path(@project.namespace, @project) do
-                - if can? current_user, :admin_label, @project
-                  Manage labels
-                - else
-                  View labels
+    = render partial: "shared/issuable/label_page_default", locals: { title: "Filter by label" }
     - if can? current_user, :admin_label, @project and @project
-      .dropdown-page-two.dropdown-new-label
-        = dropdown_title("Create new label", back: true)
-        = dropdown_content do
-          .dropdown-labels-error.js-label-error
-          %input#new_label_name.dropdown-input-field{type: "text", placeholder: "Name new label"}
-          .suggest-colors.suggest-colors-dropdown
-            - suggested_colors.each do |color|
-              = link_to '#', style: "background-color: #{color}", data: { color: color } do
-                &nbsp
-          .dropdown-label-color-input
-            .dropdown-label-color-preview.js-dropdown-label-color-preview
-            %input#new_label_color.dropdown-input-field{ type: "text" }
-          .clearfix
-            %button.btn.btn-primary.pull-left.js-new-label-btn{type: "button"}
-              Create
-            %button.btn.btn-default.pull-right.js-cancel-label-btn{type: "button"}
-              Cancel
+      = render partial: "shared/issuable/label_page_create"
     = dropdown_loading

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

+.dropdown-page-two.dropdown-new-label
+  = dropdown_title("Create new label", back: true)
+  = dropdown_content do
+    .dropdown-labels-error.js-label-error
+    %input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" }
+    .suggest-colors.suggest-colors-dropdown
+      - suggested_colors.each do |color|
+        = link_to '#', style: "background-color: #{color}", data: { color: color } do
+          &nbsp
+    .dropdown-label-color-input
+      .dropdown-label-color-preview.js-dropdown-label-color-preview
+      %input#new_label_color.default-dropdown-input{ type: "text" }
+    .clearfix
+      %button.btn.btn-primary.pull-left.js-new-label-btn{ type: "button" }
+        Create
+      %button.btn.btn-default.pull-right.js-cancel-label-btn{ type: "button" }
+        Cancel

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

+- title = local_assigns.fetch(:title, 'Assign labels')
+- filter_placeholder = local_assigns.fetch(:filter_placeholder, 'Search labels')
+.dropdown-page-one
+  = dropdown_title(title)
+  = dropdown_filter(filter_placeholder)
+  = dropdown_content
+  - if @project
+    = dropdown_footer do
+      %ul.dropdown-footer-list
+        - if can? current_user, :admin_label, @project
+          %li
+            %a.dropdown-toggle-page{href: "#"}
+              Create new
+        %li
+          = link_to namespace_project_labels_path(@project.namespace, @project), :"data-is-link" => true do
+            - if can? current_user, :admin_label, @project
+              Manage labels
+            - else
+              View labels
+  = dropdown_loading
\ No newline at end of file

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

@@ -129,24 +129,9 @@
                   Label
                 = icon('chevron-down')
               .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
-                .dropdown-page-one
-                  = dropdown_title("Assign labels")
-                  = dropdown_filter("Search labels")
-                  = dropdown_content
-                  - if @project
-                    = dropdown_footer do
-                      %ul.dropdown-footer-list
-                        - if can? current_user, :admin_label, @project
-                          %li
-                            %a.dropdown-toggle-page{href: "#"}
-                              Create new
-                        %li
-                          = link_to namespace_project_labels_path(@project.namespace, @project) do
-                            - if can? current_user, :admin_label, @project
-                              Manage labels
-                            - else
-                              View labels
-                  = dropdown_loading
+                = render partial: "shared/issuable/label_page_default"
+                - if can? current_user, :admin_label, @project and @project
+                  = render partial: "shared/issuable/label_page_create"
 
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
       - if current_user

spec/features/issues/issue_sidebar_spec.rb

+require 'rails_helper'
+
+feature 'Issue Sidebar', feature: true do
+  let(:project) { create(:project) }
+  let(:issue) { create(:issue, project: project) }
+  let!(:user) { create(:user)}
+
+  before do
+    create(:label, project: project, title: 'bug')
+    login_as(user)
+  end
+
+  context 'as a allowed user' do
+    before do
+      project.team << [user, :developer]
+      visit_issue(project, issue)
+    end
+
+    describe 'when clicking on edit labels', js: true do
+      it 'dropdown has an option to create a new label' do
+        find('.block.labels .edit-link').click
+
+        page.within('.block.labels') do
+          expect(page).to have_content 'Create new'
+        end
+      end
+    end
+
+    context 'creating a new label', js: true do
+      it 'option to crate a new label is present' do
+        page.within('.block.labels') do
+          find('.edit-link').click
+
+          expect(page).to have_content 'Create new'
+        end
+      end
+
+      it 'dropdown switches to "create label" section' do
+        page.within('.block.labels') do
+          find('.edit-link').click
+          click_link 'Create new'
+
+          expect(page).to have_content 'Create new label'
+        end
+      end
+
+      it 'new label is added' do
+        page.within('.block.labels') do
+          find('.edit-link').click
+          sleep 1
+          click_link 'Create new'
+
+          fill_in 'new_label_name', with: 'wontfix'
+          page.find(".suggest-colors a", match: :first).click
+          click_button 'Create'
+
+          page.within('.dropdown-page-one') do
+            expect(page).to have_content 'wontfix'
+          end
+        end
+      end
+    end
+  end
+
+  context 'as a guest' do
+    before do
+      project.team << [user, :guest]
+      visit_issue(project, issue)
+    end
+
+    it 'does not have a option to edit labels' do
+      expect(page).not_to have_selector('.block.labels .edit-link')
+    end
+  end
+
+  def visit_issue(project, issue)
+    visit namespace_project_issue_path(project.namespace, project, issue)
+  end
+end