Merge branch '30329-web-gui-unable-to-create-new-branch-from-commit-sha' into 'master'

Resolve "Web GUI: Unable to create new branch from commit SHA"

Closes #30329

See merge request !10738

5 files changed, 75 insertions, 9 deletions

diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 5828f460a23..67046d52a65 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -34,6 +34,7 @@
         filterByText: true,
         remote: false,
         fieldName: $branchSelect.data('field-name'),
+        filterInput: 'input[type="search"]',
         selectable: true,
         isSelectable: function(branch, $el) {
           return !$el.hasClass('is-active');
@@ -50,6 +51,21 @@
           }
         }
       });
+
+      const $dropdownContainer = $branchSelect.closest('.dropdown');
+      const $fieldInput = $(`input[name="${$branchSelect.data('field-name')}"]`, $dropdownContainer);
+      const $filterInput = $('input[type="search"]', $dropdownContainer);
+
+      $filterInput.on('keyup', (e) => {
+        const keyCode = e.keyCode || e.which;
+        if (keyCode !== 13) return;
+
+        const text = $filterInput.val();
+        $fieldInput.val(text);
+        $('.dropdown-toggle-text', $branchSelect).text(text);
+
+        $dropdownContainer.removeClass('open');
+      });
     };
 
     NewBranchForm.prototype.setupRestrictions = function() {
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index d3c3e40d518..796ecdfd014 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -1,4 +1,5 @@
 - page_title "New Branch"
+- default_ref = params[:ref] || @project.default_branch
 
 - if @error
   .alert.alert-danger
@@ -16,12 +17,11 @@
       .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10
-      = hidden_field_tag :ref, params[:ref] || @project.default_branch
-      = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
-                                data: { selected: params[:ref] || @project.default_branch, field_name: 'ref' } })
+    .col-sm-10.dropdown.create-from
+      = hidden_field_tag :ref, default_ref
+      = button_tag type: 'button', title: default_ref, class: 'dropdown-toggle form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        .text-left.dropdown-toggle-text= default_ref
+      = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 0f080b6acee..1f4c9fac54c 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -9,7 +9,7 @@
         = hidden_field_tag :from, params[:from]
         = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
           .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
@@ -17,7 +17,7 @@
         = hidden_field_tag :to, params[:to]
         = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
           .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/shared/_ref_dropdown.html.haml
index 05fb37cdc0f..96f68c80c48 100644
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ b/app/views/shared/_ref_dropdown.html.haml
@@ -1,4 +1,6 @@
-.dropdown-menu.dropdown-menu-selectable
+- dropdown_class = local_assigns.fetch(:dropdown_class, '')
+
+.dropdown-menu.dropdown-menu-selectable{ class: dropdown_class }
   = dropdown_title "Select Git revision"
   = dropdown_filter "Filter by Git revision"
   = dropdown_content
diff --git a/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb b/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb
new file mode 100644
index 00000000000..cfc782c98ad
--- /dev/null
+++ b/spec/features/projects/branches/new_branch_ref_dropdown_spec.rb
@@ -0,0 +1,48 @@
+require 'spec_helper'
+
+describe 'New Branch Ref Dropdown', :js, :feature do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :public) }
+  let(:toggle) { find('.create-from .dropdown-toggle') }
+
+  before do
+    project.add_master(user)
+
+    login_as(user)
+    visit new_namespace_project_branch_path(project.namespace, project)
+  end
+
+  it 'filters a list of branches and tags' do
+    toggle.click
+
+    filter_by('v1.0.0')
+
+    expect(items_count).to be(1)
+
+    filter_by('video')
+
+    expect(items_count).to be(1)
+
+    find('.create-from .dropdown-content li').click
+
+    expect(toggle).to have_content 'video'
+  end
+
+  it 'accepts a manually entered commit SHA' do
+    toggle.click
+
+    filter_by('somecommitsha')
+
+    find('.create-from input[type=search]').send_keys(:enter)
+
+    expect(toggle).to have_content 'somecommitsha'
+  end
+
+  def items_count
+    all('.create-from .dropdown-content li').length
+  end
+
+  def filter_by(filter_text)
+    fill_in 'Filter by Git revision', with: filter_text
+  end
+end