Merge branch '24501-new-file-existing-branch' into 'master'

New file from interface on existing branch

Closes #24501

See merge request !8427

6 files changed, 384 insertions, 0 deletions

diff --git a/spec/controllers/projects/branches_controller_spec.rb b/spec/controllers/projects/branches_controller_spec.rb
index 298a7ff179c..d20e7368086 100644
--- a/spec/controllers/projects/branches_controller_spec.rb
+++ b/spec/controllers/projects/branches_controller_spec.rb
@@ -266,5 +266,19 @@ 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
diff --git a/spec/features/projects/blobs/user_create_spec.rb b/spec/features/projects/blobs/user_create_spec.rb
new file mode 100644
index 00000000000..03d08c12612
--- /dev/null
+++ b/spec/features/projects/blobs/user_create_spec.rb
@@ -0,0 +1,107 @@
+require 'spec_helper'
+
+feature 'New blob creation', feature: true, js: true do
+  include WaitForAjax
+
+  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_ajax
+    fill_in 'file_name', with: 'feature.rb'
+    execute_script("ace.edit('editor').setValue('#{content}')")
+  end
+
+  def select_branch_index(index)
+    first('button.js-target-branch').click
+    wait_for_ajax
+    all('a[data-group="Branches"]')[index].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
+
+  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_index(0)
+      commit_file
+    end
+
+    scenario 'creates the blob in the different branch' do
+      expect(page).to have_content 'test'
+      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',
+        target_branch: '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('Your changes could not be committed because a file with the same name already exists')
+      expect(page).to have_content('New File')
+      expect(page).to have_content('NextFeature')
+    end
+  end
+end
diff --git a/spec/javascripts/blob/create_branch_dropdown_spec.js b/spec/javascripts/blob/create_branch_dropdown_spec.js
new file mode 100644
index 00000000000..dafb43761e0
--- /dev/null
+++ b/spec/javascripts/blob/create_branch_dropdown_spec.js
@@ -0,0 +1,109 @@
+require('jquery');
+require('~/extensions/jquery.js');
+require('~/gl_dropdown');
+require('~/lib/utils/type_utility');
+require('~/blob/create_branch_dropdown');
+require('~/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);
+    });
+  });
+});
diff --git a/spec/javascripts/blob/target_branch_dropdown_spec.js b/spec/javascripts/blob/target_branch_dropdown_spec.js
new file mode 100644
index 00000000000..6f3eb4cc7eb
--- /dev/null
+++ b/spec/javascripts/blob/target_branch_dropdown_spec.js
@@ -0,0 +1,121 @@
+require('jquery');
+require('~/extensions/jquery.js');
+require('~/gl_dropdown');
+require('~/lib/utils/type_utility');
+require('~/blob/create_branch_dropdown');
+require('~/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('');
+    });
+  });
+});
diff --git a/spec/javascripts/fixtures/project_branches.json b/spec/javascripts/fixtures/project_branches.json
new file mode 100644
index 00000000000..a96a4c0c095
--- /dev/null
+++ b/spec/javascripts/fixtures/project_branches.json
@@ -0,0 +1,5 @@
+[
+  "master",
+  "development",
+  "staging"
+]
diff --git a/spec/javascripts/fixtures/target_branch_dropdown.html.haml b/spec/javascripts/fixtures/target_branch_dropdown.html.haml
new file mode 100644
index 00000000000..821fb7940a0
--- /dev/null
+++ b/spec/javascripts/fixtures/target_branch_dropdown.html.haml
@@ -0,0 +1,28 @@
+%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'}