Merge branch 'dm-revert-mr-8427'

app/assets/javascripts/blob/blob_file_dropzone.js

@@ -35,7 +35,7 @@ export default class BlobFileDropzone {
           this.removeFile(file);
         });
         this.on('sending', function (file, xhr, formData) {
-          formData.append('branch_name', form.find('input[name="branch_name"]').val());
+          formData.append('branch_name', form.find('.js-branch-name').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });

app/assets/javascripts/blob/create_branch_dropdown.js

-class CreateBranchDropdown {
-  constructor(el, targetBranchDropdown) {
-    this.targetBranchDropdown = targetBranchDropdown;
-    this.el = el;
-    this.dropdownBack = this.el.closest('.dropdown').querySelector('.dropdown-menu-back');
-    this.cancelButton = this.el.querySelector('.js-cancel-branch-btn');
-    this.newBranchField = this.el.querySelector('#new_branch_name');
-    this.newBranchCreateButton = this.el.querySelector('.js-new-branch-btn');
-
-    this.newBranchCreateButton.setAttribute('disabled', '');
-
-    this.addBindings();
-    this.cleanupWrapper = this.cleanup.bind(this);
-    document.addEventListener('beforeunload', this.cleanupWrapper);
-  }
-
-  cleanup() {
-    this.cleanBindings();
-    document.removeEventListener('beforeunload', this.cleanupWrapper);
-  }
-
-  cleanBindings() {
-    this.newBranchField.removeEventListener('keyup', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.removeEventListener('change', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.removeEventListener('keydown', this.handleNewBranchKeydownWrapper);
-    this.dropdownBack.removeEventListener('click', this.resetFormWrapper);
-    this.cancelButton.removeEventListener('click', this.handleCancelClickWrapper);
-    this.newBranchCreateButton.removeEventListener('click', this.createBranchWrapper);
-  }
-
-  addBindings() {
-    this.enableBranchCreateButtonWrapper = this.enableBranchCreateButton.bind(this);
-    this.handleNewBranchKeydownWrapper = this.handleNewBranchKeydown.bind(this);
-    this.resetFormWrapper = this.resetForm.bind(this);
-    this.handleCancelClickWrapper = this.handleCancelClick.bind(this);
-    this.createBranchWrapper = this.createBranch.bind(this);
-
-    this.newBranchField.addEventListener('keyup', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.addEventListener('change', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.addEventListener('keydown', this.handleNewBranchKeydownWrapper);
-    this.dropdownBack.addEventListener('click', this.resetFormWrapper);
-    this.cancelButton.addEventListener('click', this.handleCancelClickWrapper);
-    this.newBranchCreateButton.addEventListener('click', this.createBranchWrapper);
-  }
-
-  handleCancelClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.resetForm();
-    this.dropdownBack.click();
-  }
-
-  handleNewBranchKeydown(e) {
-    const keyCode = e.which;
-    const ENTER_KEYCODE = 13;
-    if (keyCode === ENTER_KEYCODE) {
-      this.createBranch(e);
-    }
-  }
-
-  enableBranchCreateButton() {
-    if (this.newBranchField.value !== '') {
-      this.newBranchCreateButton.removeAttribute('disabled');
-    } else {
-      this.newBranchCreateButton.setAttribute('disabled', '');
-    }
-  }
-
-  resetForm() {
-    this.newBranchField.value = '';
-    this.enableBranchCreateButtonWrapper();
-  }
-
-  createBranch(e) {
-    e.preventDefault();
-
-    if (this.newBranchCreateButton.getAttribute('disabled') === '') {
-      return;
-    }
-    const newBranchName = this.newBranchField.value;
-    this.targetBranchDropdown.setNewBranch(newBranchName);
-    this.resetForm();
-  }
-}
-
-window.gl = window.gl || {};
-gl.CreateBranchDropdown = CreateBranchDropdown;

app/assets/javascripts/blob/target_branch_dropdown.js

-/* eslint-disable class-methods-use-this */
-const SELECT_ITEM_MSG = 'Select';
-
-class TargetBranchDropDown {
-  constructor(dropdown) {
-    this.dropdown = dropdown;
-    this.$dropdown = $(dropdown);
-    this.fieldName = this.dropdown.getAttribute('data-field-name');
-    this.form = this.dropdown.closest('form');
-    this.createDropdown();
-  }
-
-  static bootstrap() {
-    const dropdowns = document.querySelectorAll('.js-project-branches-dropdown');
-    [].forEach.call(dropdowns, dropdown => new TargetBranchDropDown(dropdown));
-  }
-
-  createDropdown() {
-    const self = this;
-    this.$dropdown.glDropdown({
-      selectable: true,
-      filterable: true,
-      search: {
-        fields: ['title'],
-      },
-      data: (term, callback) => $.ajax({
-        url: self.dropdown.getAttribute('data-refs-url'),
-        data: {
-          ref: self.dropdown.getAttribute('data-ref'),
-          show_all: true,
-        },
-        dataType: 'json',
-      }).done(refs => callback(self.dropdownData(refs))),
-      toggleLabel(item, el) {
-        if (el.is('.is-active')) {
-          return item.text;
-        }
-        return SELECT_ITEM_MSG;
-      },
-      clicked(options) {
-        options.e.preventDefault();
-        self.onClick.call(self);
-      },
-      fieldName: self.fieldName,
-    });
-    return new gl.CreateBranchDropdown(this.form.querySelector('.dropdown-new-branch'), this);
-  }
-
-  onClick() {
-    this.enableSubmit();
-    this.$dropdown.trigger('change.branch');
-  }
-
-  enableSubmit() {
-    const submitBtn = this.form.querySelector('[type="submit"]');
-    if (this.branchInput && this.branchInput.value) {
-      submitBtn.removeAttribute('disabled');
-    } else {
-      submitBtn.setAttribute('disabled', '');
-    }
-  }
-
-  dropdownData(refs) {
-    const branchList = this.dropdownItems(refs);
-    this.cachedRefs = refs;
-    this.addDefaultBranch(branchList);
-    this.addNewBranch(branchList);
-    return { Branches: branchList };
-  }
-
-  dropdownItems(refs) {
-    return refs.map(this.dropdownItem);
-  }
-
-  dropdownItem(ref) {
-    return { id: ref, text: ref, title: ref };
-  }
-
-  addDefaultBranch(branchList) {
-    // when no branch is selected do nothing
-    if (!this.branchInput) {
-      return;
-    }
-
-    const branchInputVal = this.branchInput.value;
-    const currentBranchIndex = this.searchBranch(branchList, branchInputVal);
-
-    if (currentBranchIndex === -1) {
-      this.unshiftBranch(branchList, this.dropdownItem(branchInputVal));
-    }
-  }
-
-  addNewBranch(branchList) {
-    if (this.newBranch) {
-      this.unshiftBranch(branchList, this.newBranch);
-    }
-  }
-
-  searchBranch(branchList, branchName) {
-    return _.findIndex(branchList, el => branchName === el.id);
-  }
-
-  unshiftBranch(branchList, branch) {
-    const branchIndex = this.searchBranch(branchList, branch.id);
-
-    if (branchIndex === -1) {
-      branchList.unshift(branch);
-    }
-  }
-
-  setNewBranch(newBranchName) {
-    this.newBranch = this.dropdownItem(newBranchName);
-    this.refreshData();
-    this.selectBranch(this.searchBranch(this.glDropdown.fullData.Branches, newBranchName));
-  }
-
-  refreshData() {
-    this.glDropdown.fullData = this.dropdownData(this.cachedRefs);
-    this.clearFilter();
-  }
-
-  clearFilter() {
-    // apply an empty filter in order to refresh the data
-    this.glDropdown.filter.filter('');
-    this.dropdown.closest('.dropdown').querySelector('.dropdown-page-one .dropdown-input-field').value = '';
-  }
-
-  selectBranch(index) {
-    const branch = this.dropdown.closest('.dropdown').querySelectorAll('li a')[index];
-
-    if (!branch.classList.contains('is-active')) {
-      branch.click();
-    } else {
-      this.closeDropdown();
-    }
-  }
-
-  closeDropdown() {
-    this.dropdown.closest('.dropdown').querySelector('.dropdown-menu-close').click();
-  }
-
-  get branchInput() {
-    return this.form.querySelector(`input[name="${this.fieldName}"]`);
-  }
-
-  get glDropdown() {
-    return this.$dropdown.data('glDropdown');
-  }
-}
-
-window.gl = window.gl || {};
-gl.TargetBranchDropDown = TargetBranchDropDown;

app/assets/javascripts/dispatcher.js

@@ -329,25 +329,14 @@ import initSettingsPanels from './settings_panels';
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:find_file:show':
           shortcut_handler = true;
           break;
-        case 'projects:blob:new':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
-        case 'projects:blob:create':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blob:show':
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
           initBlob();
           break;
-        case 'projects:blob:edit':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blame:show':
           initBlob();
           break;

app/assets/javascripts/main.js

@@ -39,10 +39,6 @@ import './shortcuts_network';
 // behaviors
 import './behaviors/';
 
-// blob
-import './blob/create_branch_dropdown';
-import './blob/target_branch_dropdown';
-
 // templates
 import './templates/issuable_template_selector';
 import './templates/issuable_template_selectors';

app/assets/javascripts/new_commit_form.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-return-assign, max-len */
 (function() {
   this.NewCommitForm = (function() {
-    function NewCommitForm(form, targetBranchName = 'target_branch') {
+    function NewCommitForm(form) {
       this.form = form;
-      this.targetBranchName = targetBranchName;
       this.renderDestination = this.renderDestination.bind(this);
-      this.targetBranchDropdown = form.find('button.js-target-branch');
+      this.branchName = form.find('.js-branch-name');
       this.originalBranch = form.find('.js-original-branch');
       this.createMergeRequest = form.find('.js-create-merge-request');
       this.createMergeRequestContainer = form.find('.js-create-merge-request-container');
-      this.targetBranchDropdown.on('change.branch', this.renderDestination);
+      this.branchName.keyup(this.renderDestination);
       this.renderDestination();
     }
 
     NewCommitForm.prototype.renderDestination = function() {
       var different;
-      var targetBranch = this.form.find(`input[name="${this.targetBranchName}"]`);
-
-      different = targetBranch.val() !== this.originalBranch.val();
+      different = this.branchName.val() !== this.originalBranch.val();
       if (different) {
         this.createMergeRequestContainer.show();
         if (!this.wasDifferent) {

app/assets/stylesheets/pages/projects.scss

@@ -769,8 +769,7 @@ pre.light-well {
 }
 
 .project-refs-form .dropdown-menu,
-.dropdown-menu-projects,
-.dropdown-menu-branches {
+.dropdown-menu-projects {
   width: 300px;
 
   @media (min-width: $screen-sm-min) {

app/controllers/concerns/creates_commit.rb

 module CreatesCommit
   extend ActiveSupport::Concern
 
-  def set_start_branch_to_branch_name
-    branch_exists = @repository.find_branch(@branch_name)
-    @start_branch = @branch_name if branch_exists
-  end
-
   def create_commit(service, success_path:, failure_path:, failure_view: nil, success_notice: nil)
     if can?(current_user, :push_code, @project)
       @project_to_commit_into = @project

app/controllers/projects/blob_controller.rb

@@ -26,8 +26,6 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def create
-    set_start_branch_to_branch_name
-
     create_commit(Files::CreateService, success_notice: "The file has been successfully created.",
                                         success_path: -> { namespace_project_blob_path(@project.namespace, @project, File.join(@branch_name, @file_path)) },
                                         failure_view: :new,

app/controllers/projects/branches_controller.rb

@@ -10,10 +10,10 @@ class Projects::BranchesController < Projects::ApplicationController
   def index
     @sort = params[:sort].presence || sort_value_name
     @branches = BranchesFinder.new(@repository, params).execute
+    @branches = Kaminari.paginate_array(@branches).page(params[:page])
 
     respond_to do |format|
       format.html do
-        paginate_branches
         @refs_pipelines = @project.pipelines.latest_successful_for_refs(@branches.map(&:name))
 
         @max_commits = @branches.reduce(0) do |memo, branch|
@@ -22,7 +22,6 @@ class Projects::BranchesController < Projects::ApplicationController
         end
       end
       format.json do
-        paginate_branches unless params[:show_all]
         render json: @branches.map(&:name)
       end
     end
@@ -106,10 +105,6 @@ class Projects::BranchesController < Projects::ApplicationController
     end
   end
 
-  def paginate_branches
-    @branches = Kaminari.paginate_array(@branches).page(params[:page])
-  end
-
   def url_to_autodeploy_setup(project, branch_name)
     namespace_project_new_blob_path(
       project.namespace,

app/controllers/projects/tree_controller.rb

@@ -36,7 +36,6 @@ class Projects::TreeController < Projects::ApplicationController
   def create_dir
     return render_404 unless @commit_params.values.all?
 
-    set_start_branch_to_branch_name
     create_commit(Files::CreateDirService,  success_notice: "The directory has been successfully created.",
                                             success_path: namespace_project_tree_path(@project.namespace, @project, File.join(@branch_name, @dir_name)),
                                             failure_path: namespace_project_tree_path(@project.namespace, @project, @ref))

app/views/projects/blob/_remove.html.haml

@@ -6,7 +6,7 @@
         %h3.page-title Delete #{@blob.name}
 
       .modal-body
-        = form_tag namespace_project_blob_path(@project.namespace, @project, @id), method: :delete, class: 'form-horizontal js-replace-blob-form js-quick-submit js-requires-input' do
+        = form_tag namespace_project_blob_path(@project.namespace, @project, @id), method: :delete, class: 'form-horizontal js-delete-blob-form js-quick-submit js-requires-input' do
           = render 'shared/new_commit_form', placeholder: "Delete #{@blob.name}"
 
           .form-group
@@ -15,4 +15,4 @@
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
 
 :javascript
-  new NewCommitForm($('.js-replace-blob-form'))
+  new NewCommitForm($('.js-delete-blob-form'))

app/views/projects/commit/_change.html.haml

@@ -18,10 +18,9 @@
             = label_tag 'start_branch', branch_label, class: 'control-label'
             .col-sm-10
               = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
-              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false } })
+              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false } })
 
               - if can?(current_user, :push_code, @project)
-                .js-create-merge-request-container
                 .checkbox
                   = label_tag do
                     = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: nil
@@ -35,6 +34,3 @@
             - unless can?(current_user, :push_code, @project)
               .inline.prepend-left-10
                 = commit_in_fork_help
-
-:javascript
-  new NewCommitForm($('.js-#{type}-form'), 'start_branch')

app/views/shared/_branch_switcher.html.haml

-- dropdown_toggle_text = @branch_name || tree_edit_branch
-= hidden_field_tag 'branch_name', dropdown_toggle_text
-
-.dropdown
-  = dropdown_toggle dropdown_toggle_text, { toggle: 'dropdown', selected: dropdown_toggle_text, field_name: 'branch_name', form_id: '.js-edit-blob-form', refs_url: namespace_project_branches_path(@project.namespace, @project) }, { toggle_class: 'js-project-branches-dropdown js-target-branch' }
-  .dropdown-menu.dropdown-menu-selectable.dropdown-menu-paging.dropdown-menu-branches
-    = render partial: 'shared/projects/blob/branch_page_default'
-    = render partial: 'shared/projects/blob/branch_page_create'

app/views/shared/_new_commit_form.html.haml

@@ -7,7 +7,7 @@
     .form-group.branch
       = label_tag 'branch_name', 'Target branch', class: 'control-label'
       .col-sm-10
-        = render 'shared/branch_switcher'
+        = text_field_tag 'branch_name', @branch_name || tree_edit_branch, required: true, class: "form-control js-branch-name ref-name"
 
         .js-create-merge-request-container
           .checkbox

app/views/shared/projects/blob/_branch_page_create.html.haml

-.dropdown-page-two.dropdown-new-branch
-  = dropdown_title('Create new branch', back: true)
-  = dropdown_content do
-    %input#new_branch_name.default-dropdown-input.append-bottom-10{ type: "text", placeholder: "Name new branch" }
-      %button.btn.btn-primary.pull-left.js-new-branch-btn{ type: "button" }
-        Create
-      %button.btn.btn-default.pull-right.js-cancel-branch-btn{ type: "button" }
-        Cancel

app/views/shared/projects/blob/_branch_page_default.html.haml

-.dropdown-page-one
-  = dropdown_title "Select branch"
-  = dropdown_filter "Search branches"
-  = dropdown_content
-  = dropdown_loading
-  = dropdown_footer do
-    %ul.dropdown-footer-list
-      %li
-        %a.create-new-branch.dropdown-toggle-page{ href: "#" }
-          Create new branch

changelogs/unreleased/dm-revert-mr-8427.yml

+---
+title: Revert 'New file from interface on existing branch'
+merge_request:
+author:

features/steps/project/source/browse_files.rb

@@ -89,10 +89,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I fill the new branch name' do
-    first('button.js-target-branch', visible: true).click
-    find('.create-new-branch', visible: true).click
-    find('#new_branch_name', visible: true).set('new_branch_name')
-    find('.js-new-branch-btn', visible: true).click
+    fill_in :branch_name, with: 'new_branch_name', visible: true
   end
 
   step 'I fill the new file name with an illegal name' do

spec/controllers/projects/branches_controller_spec.rb

@@ -367,19 +367,5 @@ describe Projects::BranchesController do
         expect(parsed_response.first).to eq 'master'
       end
     end
-
-    context 'show_all = true' do
-      it 'returns all the branches name' do
-        get :index,
-            namespace_id: project.namespace,
-            project_id: project,
-            format: :json,
-            show_all: true
-
-        parsed_response = JSON.parse(response.body)
-
-        expect(parsed_response.length).to eq(project.repository.branches.count)
-      end
-    end
   end
 end

spec/features/projects/blobs/edit_spec.rb

@@ -102,7 +102,7 @@ feature 'Editing file blob', feature: true, js: true do
 
         it 'shows blob editor with same branch' do
           expect(page).to have_current_path(namespace_project_edit_blob_path(project.namespace, project, tree_join(branch, file_path)))
-          expect(find('.js-target-branch .dropdown-toggle-text').text).to eq(branch)
+          expect(find('.js-branch-name').value).to eq(branch)
         end
       end
 
@@ -112,7 +112,7 @@ feature 'Editing file blob', feature: true, js: true do
         end
 
         it 'shows blob editor with patch branch' do
-          expect(find('.js-target-branch .dropdown-toggle-text').text).to eq('patch-1')
+          expect(find('.js-branch-name').value).to eq('patch-1')
         end
       end
     end
@@ -128,7 +128,7 @@ feature 'Editing file blob', feature: true, js: true do
 
       it 'shows blob editor with same branch' do
         expect(page).to have_current_path(namespace_project_edit_blob_path(project.namespace, project, tree_join(branch, file_path)))
-        expect(find('.js-target-branch .dropdown-toggle-text').text).to eq(branch)
+        expect(find('.js-branch-name').value).to eq(branch)
       end
     end
   end

spec/features/projects/blobs/user_create_spec.rb

-require 'spec_helper'
-
-feature 'New blob creation', feature: true, js: true do
-  include TargetBranchHelpers
-
-  given(:user) { create(:user) }
-  given(:role) { :developer }
-  given(:project) { create(:project) }
-  given(:content) { 'class NextFeature\nend\n' }
-
-  background do
-    login_as(user)
-    project.team << [user, role]
-    visit namespace_project_new_blob_path(project.namespace, project, 'master')
-  end
-
-  def edit_file
-    wait_for_requests
-    fill_in 'file_name', with: 'feature.rb'
-    execute_script("ace.edit('editor').setValue('#{content}')")
-  end
-
-  def commit_file
-    click_button 'Commit changes'
-  end
-
-  context 'with default target branch' do
-    background do
-      edit_file
-      commit_file
-    end
-
-    scenario 'creates the blob in the default branch' do
-      expect(page).to have_content 'master'
-      expect(page).to have_content 'successfully created'
-      expect(page).to have_content 'NextFeature'
-    end
-  end
-
-  context 'with different target branch' do
-    background do
-      edit_file
-      select_branch('feature')
-      commit_file
-    end
-
-    scenario 'creates the blob in the different branch' do
-      expect(page).to have_content 'feature'
-      expect(page).to have_content 'successfully created'
-    end
-  end
-
-  context 'with a new target branch' do
-    given(:new_branch_name) { 'new-feature' }
-
-    background do
-      edit_file
-      create_new_branch(new_branch_name)
-      commit_file
-    end
-
-    scenario 'creates the blob in the new branch' do
-      expect(page).to have_content new_branch_name
-      expect(page).to have_content 'successfully created'
-    end
-    scenario 'returns you to the mr' do
-      expect(page).to have_content 'New Merge Request'
-      expect(page).to have_content "From #{new_branch_name} into master"
-      expect(page).to have_content 'Add new file'
-    end
-  end
-
-  context 'the file already exist in the source branch' do
-    background do
-      Files::CreateService.new(
-        project,
-        user,
-        start_branch: 'master',
-        branch_name: 'master',
-        commit_message: 'Create file',
-        file_path: 'feature.rb',
-        file_content: content
-      ).execute
-      edit_file
-      commit_file
-    end
-
-    scenario 'shows error message' do
-      expect(page).to have_content('A file with this name already exists')
-      expect(page).to have_content('New file')
-      expect(page).to have_content('NextFeature')
-    end
-  end
-end

spec/features/projects/user_create_dir_spec.rb

 require 'spec_helper'
 
 feature 'New directory creation', feature: true, js: true do
-  include TargetBranchHelpers
-
   given(:user) { create(:user) }
   given(:role) { :developer }
   given(:project) { create(:project) }
@@ -36,23 +34,11 @@ feature 'New directory creation', feature: true, js: true do
     end
   end
 
-  context 'with different target branch' do
-    background do
-      select_branch('feature')
-      create_directory
-    end
-
-    scenario 'creates the directory in the different branch' do
-      expect(page).to have_content 'feature'
-      expect(page).to have_content 'The directory has been successfully created'
-    end
-  end
-
   context 'with a new target branch' do
     given(:new_branch_name) { 'new-feature' }
 
     background do
-      create_new_branch(new_branch_name)
+      fill_in :branch_name, with: new_branch_name
       create_directory
     end
 

spec/javascripts/blob/create_branch_dropdown_spec.js

-import '~/gl_dropdown';
-import '~/blob/create_branch_dropdown';
-import '~/blob/target_branch_dropdown';
-
-describe('CreateBranchDropdown', () => {
-  const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
-  // selectors
-  const createBranchSel = '.js-new-branch-btn';
-  const backBtnSel = '.dropdown-menu-back';
-  const cancelBtnSel = '.js-cancel-branch-btn';
-  const branchNameSel = '#new_branch_name';
-  const branchName = 'new_name';
-  let dropdown;
-
-  function createDropdown() {
-    const dropdownEl = document.querySelector('.js-project-branches-dropdown');
-    const projectBranches = getJSONFixture('project_branches.json');
-    dropdown = new gl.TargetBranchDropDown(dropdownEl);
-    dropdown.cachedRefs = projectBranches;
-    return dropdown;
-  }
-
-  function createBranchBtn() {
-    return document.querySelector(createBranchSel);
-  }
-
-  function backBtn() {
-    return document.querySelector(backBtnSel);
-  }
-
-  function cancelBtn() {
-    return document.querySelector(cancelBtnSel);
-  }
-
-  function branchNameEl() {
-    return document.querySelector(branchNameSel);
-  }
-
-  function changeBranchName(text) {
-    branchNameEl().value = text;
-    branchNameEl().dispatchEvent(new Event('change'));
-  }
-
-  preloadFixtures(fixtureTemplate);
-
-  beforeEach(() => {
-    loadFixtures(fixtureTemplate);
-    createDropdown();
-  });
-
-  it('disable submit when branch name is empty', () => {
-    expect(createBranchBtn()).toBeDisabled();
-  });
-
-  it('enable submit when branch name is present', () => {
-    changeBranchName(branchName);
-
-    expect(createBranchBtn()).not.toBeDisabled();
-  });
-
-  it('resets the form when cancel btn is clicked and triggers dropdownback', () => {
-    const spyBackEvent = spyOnEvent(backBtnSel, 'click');
-    changeBranchName(branchName);
-
-    cancelBtn().click();
-
-    expect(branchNameEl()).toHaveValue('');
-    expect(spyBackEvent).toHaveBeenTriggered();
-  });
-
-  it('resets the form when back btn is clicked', () => {
-    changeBranchName(branchName);
-
-    backBtn().click();
-
-    expect(branchNameEl()).toHaveValue('');
-  });
-
-  describe('new branch creation', () => {
-    beforeEach(() => {
-      changeBranchName(branchName);
-    });
-    it('sets the new branch name and updates the dropdown', () => {
-      spyOn(dropdown, 'setNewBranch');
-
-      createBranchBtn().click();
-
-      expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
-    });
-
-    it('resets the form', () => {
-      createBranchBtn().click();
-
-      expect(branchNameEl()).toHaveValue('');
-    });
-
-    it('is triggered with enter keypress', () => {
-      spyOn(dropdown, 'setNewBranch');
-      const enterEvent = new Event('keydown');
-      enterEvent.which = 13;
-      branchNameEl().dispatchEvent(enterEvent);
-
-      expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
-    });
-  });
-});

spec/javascripts/blob/target_branch_dropdown_spec.js

-import '~/gl_dropdown';
-import '~/blob/create_branch_dropdown';
-import '~/blob/target_branch_dropdown';
-
-describe('TargetBranchDropdown', () => {
-  const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
-  let dropdown;
-
-  function createDropdown() {
-    const projectBranches = getJSONFixture('project_branches.json');
-    const dropdownEl = document.querySelector('.js-project-branches-dropdown');
-    dropdown = new gl.TargetBranchDropDown(dropdownEl);
-    dropdown.cachedRefs = projectBranches;
-    dropdown.refreshData();
-    return dropdown;
-  }
-
-  function submitBtn() {
-    return document.querySelector('button[type="submit"]');
-  }
-
-  function searchField() {
-    return document.querySelector('.dropdown-page-one .dropdown-input-field');
-  }
-
-  function element() {
-    return document.querySelectorAll('div.dropdown-content li a');
-  }
-
-  function elementAtIndex(index) {
-    return element()[index];
-  }
-
-  function clickElementAtIndex(index) {
-    elementAtIndex(index).click();
-  }
-
-  preloadFixtures(fixtureTemplate);
-
-  beforeEach(() => {
-    loadFixtures(fixtureTemplate);
-    createDropdown();
-  });
-
-  it('disable submit when branch is not selected', () => {
-    document.querySelector('input[name="target_branch"]').value = null;
-    clickElementAtIndex(1);
-
-    expect(submitBtn().getAttribute('disabled')).toEqual('');
-  });
-
-  it('enable submit when a branch is selected', () => {
-    clickElementAtIndex(1);
-
-    expect(submitBtn().getAttribute('disabled')).toBe(null);
-  });
-
-  it('triggers change.branch event on a branch click', () => {
-    spyOnEvent(dropdown.$dropdown, 'change.branch');
-    clickElementAtIndex(0);
-
-    expect('change.branch').toHaveBeenTriggeredOn(dropdown.$dropdown);
-  });
-
-  describe('dropdownData', () => {
-    it('cache the refs', () => {
-      const refs = dropdown.cachedRefs;
-      dropdown.cachedRefs = null;
-
-      dropdown.dropdownData(refs);
-
-      expect(dropdown.cachedRefs).toEqual(refs);
-    });
-
-    it('returns the Branches with the newBranch and defaultBranch', () => {
-      const refs = dropdown.cachedRefs;
-      dropdown.branchInput.value = 'master';
-      dropdown.newBranch = { id: 'new_branch', text: 'new_branch', title: 'new_branch' };
-
-      const branches = dropdown.dropdownData(refs).Branches;
-
-      expect(branches.length).toEqual(4);
-      expect(branches[0]).toEqual(dropdown.newBranch);
-      expect(branches[1]).toEqual({ id: 'master', text: 'master', title: 'master' });
-      expect(branches[2]).toEqual({ id: 'development', text: 'development', title: 'development' });
-      expect(branches[3]).toEqual({ id: 'staging', text: 'staging', title: 'staging' });
-    });
-  });
-
-  describe('setNewBranch', () => {
-    it('adds the new branch and select it', () => {
-      const branchName = 'new_branch';
-
-      dropdown.setNewBranch(branchName);
-
-      expect(elementAtIndex(0)).toHaveClass('is-active');
-      expect(elementAtIndex(0)).toContainHtml(branchName);
-    });
-
-    it("doesn't add a new branch if already exists in the list", () => {
-      const branchName = elementAtIndex(0).text;
-      const initialLength = element().length;
-
-      dropdown.setNewBranch(branchName);
-
-      expect(element().length).toEqual(initialLength);
-    });
-
-    it('clears the search filter', () => {
-      const branchName = elementAtIndex(0).text;
-      searchField().value = 'searching';
-
-      dropdown.setNewBranch(branchName);
-
-      expect(searchField().value).toEqual('');
-    });
-  });
-});

spec/javascripts/fixtures/project_branches.json

-[
-  "master",
-  "development",
-  "staging"
-]

spec/javascripts/fixtures/target_branch_dropdown.html.haml

-%form.js-edit-blob-form
-  %input{type: 'hidden', name: 'target_branch', value: 'master'}
-  %div
-    .dropdown
-      %button.dropdown-menu-toggle.js-project-branches-dropdown.js-target-branch{type: 'button', data: {toggle: 'dropdown', selected: 'master', field_name: 'target_branch', form_id: '.js-edit-blob-form'}}
-      .dropdown-menu.dropdown-menu-selectable.dropdown-menu-paging
-        .dropdown-page-one
-          .dropdown-title 'Select branch'
-          .dropdown-input
-            %input.dropdown-input-field{type: 'search', value: ''}
-            %i.fa.fa-search.dropdown-input-search
-            %i.fa.fa-times-dropdown-input-clear.js-dropdown-input-clear{role: 'button'}
-          .dropdown-content
-          .dropdown-footer
-            %ul.dropdown-footer-list
-              %li
-                %a.create-new-branch.dropdown-toggle-page{href: "#"}
-                  Create new branch
-        .dropdown-page-two.dropdown-new-branch
-          %button.dropdown-title-button.dropdown-menu-back{type: 'button'}
-          .dropdown_title 'Create new branch'
-          .dropdown_content
-            %input#new_branch_name.default-dropdown-input{ type: "text", placeholder: "Name new branch" }
-              %button.btn.btn-primary.pull-left.js-new-branch-btn{ type: "button" }
-                Create
-              %button.btn.btn-default.pull-right.js-cancel-branch-btn{ type: "button" }
-                Cancel
-  %button{type: 'submit'}

spec/support/target_branch_helpers.rb

-module TargetBranchHelpers
-  def select_branch(name)
-    first('button.js-target-branch').click
-    wait_for_requests
-    all('a[data-group="Branches"]').find do |el|
-      el.text == name
-    end.click
-  end
-
-  def create_new_branch(name)
-    first('button.js-target-branch').click
-    click_link 'Create new branch'
-    fill_in 'new_branch_name', with: name
-    click_button 'Create'
-  end
-end