Updates dropdown to update branch in commit section.

app/assets/javascripts/gl_dropdown.js

@@ -2,7 +2,51 @@
 /* global fuzzaldrinPlus */
 import { isObject } from './lib/utils/type_utility';
 
-var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote;
+var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote, GitLabDropdownInput;
+
+GitLabDropdownInput = (function() {
+  function GitLabDropdownInput(input, options) {
+    var $inputContainer, $clearButton;
+    var _this = this;
+    this.input = input;
+    this.options = options;
+    this.fieldName = this.options.fieldName || 'field-name';
+    $inputContainer = this.input.parent();
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    $clearButton.on('click', (function(_this) {
+      // Clear click
+      return function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return _this.input.val('').trigger('input').focus();
+      };
+    })(this));
+
+    this.input
+    .on('keydown', function (e) {
+      var keyCode = e.which;
+      if (keyCode === 13 && !options.elIsInput) {
+        e.preventDefault();
+      }
+    })
+    .on('input', function(e) {
+      var val = e.currentTarget.value || 'new-branch'
+      val = val.split(' ').join('-') // replaces space with dash
+        .replace(/[^a-zA-Z0-9 -]/g, '').toLowerCase() //replace non alphanumeric
+        .replace(/(-)\1+/g, '-'); // replace repeated dashes
+      _this.cb(_this.options.fieldName, val, {}, true);
+      _this.input.closest('.dropdown')
+        .find('.dropdown-toggle-text')
+        .text(val);
+    });
+  }
+
+  GitLabDropdownInput.prototype.onInput = function(cb) {
+    this.cb = cb;
+  }
+
+  return GitLabDropdownInput;
+})();
 
 GitLabDropdownFilter = (function() {
   var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
@@ -188,7 +232,7 @@ GitLabDropdownRemote = (function() {
 })();
 
 GitLabDropdown = (function() {
-  var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
+  var ACTIVE_CLASS, FILTER_INPUT, NO_FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
 
   LOADING_CLASS = "is-loading";
 
@@ -208,6 +252,8 @@ GitLabDropdown = (function() {
 
   FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
 
+  NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
+
   function GitLabDropdown(el1, options) {
     var searchFields, selector, self;
     this.el = el1;
@@ -221,6 +267,7 @@ GitLabDropdown = (function() {
     this.dropdown = selector != null ? $(selector) : $(this.el).parent();
     // Set Defaults
     this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
+    this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
     this.highlight = !!this.options.highlight;
     this.filterInputBlur = this.options.filterInputBlur != null
       ? this.options.filterInputBlur
@@ -259,6 +306,10 @@ GitLabDropdown = (function() {
         });
       }
     }
+    if(this.noFilterInput.length) {
+      this.plainInput = new GitLabDropdownInput(this.noFilterInput, this.options);
+      this.plainInput.onInput(this.addInput.bind(this))
+    }
     // Init filterable
     if (this.options.filterable) {
       this.filter = new GitLabDropdownFilter(this.filterInput, {
@@ -744,9 +795,13 @@ GitLabDropdown = (function() {
     }
   };
 
-  GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {
+  GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
     var $input;
     // Create hidden input for form
+    if(single){
+      $('input[name="' + fieldName + '"]').remove();  
+    }
+    
     $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
     if (this.options.inputId != null) {
       $input.attr('id', this.options.inputId);
@@ -762,7 +817,7 @@ GitLabDropdown = (function() {
       $input.attr('data-meta', selectedObject[this.options.inputMeta]);
     }
 
-    return this.dropdown.before($input);
+    this.dropdown.before($input).trigger('change');
   };
 
   GitLabDropdown.prototype.selectRowAtIndex = function(index) {

app/assets/javascripts/repo/index.js

@@ -13,9 +13,16 @@ import { repoEditorLoader } from './repo_editor';
 import RepoMixin from './repo_mixin';
 import PopupDialog from '../vue_shared/components/popup_dialog.vue'
 
+function addEventsForNonVueEls() {
+  $(document).on('change', '.dropdown', () => {
+    Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
+  });
+}
+
 function initRepo() {
   const repo = document.getElementById('repo');
 
+
   Store.service = Service;
   Store.service.url = repo.dataset.url;
   Store.service.refsUrl = repo.dataset.refsUrl;
@@ -24,6 +31,7 @@ function initRepo() {
   Store.projectUrl = repo.dataset.projectUrl;
   Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
   Store.checkIsCommitable();
+  addEventsForNonVueEls();
 
   this.vm = new Vue({
     el: repo,

app/assets/javascripts/repo/repo_commit_section.vue

@@ -3,19 +3,31 @@
 import Store from './repo_store';
 import Api from '../api';
 import RepoMixin from './repo_mixin'
+import Helper from './repo_helper'
 
 const RepoCommitSection = {
   data: () => Store,
 
   mixins: [RepoMixin],
   
+  computed: {
+    branchPaths() {
+      let branch = Helper.getBranch();
+      return this.changedFiles.map((f) => {
+        console.log('branch', branch)
+        console.log(Helper.getFilePathFromFullPath(f.url, branch))
+        return Helper.getFilePathFromFullPath(f.url, branch);
+      });
+    }
+  },
+
   methods: {
     makeCommit() {
       // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
-      const branch = $('button.dropdown-menu-toggle').attr('data-ref');
+      const branch = Helper.getBranch();
       const commitMessage = this.commitMessage;
-      const actions = this.changedFiles.map((f) => {
-        const filePath = f.url.split(branch)[1];
+      const actions = this.branchPaths.map((f) => {
+        const filePath = Helper.getFilePathFromFullPath(f.url, branch);
         return {
           action: 'update',
           file_path: filePath,
@@ -52,8 +64,8 @@ export default RepoCommitSection;
         <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
         <div class="col-md-4">
           <ul class="list-unstyled changed-files">
-            <li v-for="file in changedFiles" :key="file.id">
-              <span class="help-block">{{file.url}}</span>
+            <li v-for="file in branchPaths">
+              <span class="help-block">{{file}}</span>
             </li>
           </ul>
         </div>
@@ -71,34 +83,7 @@ export default RepoCommitSection;
       <div class="form-group">
         <label class="col-md-4 control-label" for="target-branch">Target branch</label>
         <div class="col-md-4">
-          <div class="input-group">
-            <div class="input-group-btn branch-dropdown">
-              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-                Action
-                <i class="fa fa-caret-down"></i>
-              </button>
-              <ul class="dropdown-menu pull-right">
-                <li>
-                  <a href="#">Target branch</a>
-                </li>
-                <li>
-                  <a href="#">Create my own branch</a>
-                </li>
-              </ul>
-            </div>
-            <input class="form-control" id="target-branch" name="target-branch" placeholder="placeholder" type="text"></input>
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <label class="col-md-4 control-label" for="checkboxes"></label>
-        <div class="col-md-4">
-          <div class="checkbox new-merge-request">
-            <label for="checkboxes-0">
-              <input id="checkboxes-0" name="checkboxes" type="checkbox" value="1"></input>
-              Start a new merge request with these changes
-            </label>
-          </div>
+          <span class="help-block">{{targetBranch}}</span>
         </div>
       </div>
       <div class="col-md-offset-4 col-md-4">

app/assets/javascripts/repo/repo_edit_button.js

@@ -23,7 +23,6 @@ export default class RepoEditButton {
       },
       methods: {
         editClicked() {
-          console.log('thiscf', this.changedFiles)
           if(this.changedFiles.length) {
             this.dialog.open = true;
             return;

app/assets/javascripts/repo/repo_helper.js

@@ -33,6 +33,10 @@ const RepoHelper = {
   ? window.performance
   : Date,
 
+  getBranch() {
+    return $('button.dropdown-menu-toggle').attr('data-ref');
+  },
+
   getLanguageIDForFile(file, langs) {
     const ext = file.name.split('.').pop();
     const foundLang = RepoHelper.findLanguage(ext, langs);
@@ -40,6 +44,11 @@ const RepoHelper = {
     return foundLang ? foundLang.id : 'plaintext';
   },
 
+  getFilePathFromFullPath(fullPath, branch) {
+    console.log(fullPath, branch)
+    return fullPath.split(branch)[1];
+  },
+
   findLanguage(ext, langs) {
     return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
   },

app/assets/javascripts/repo/repo_store.js

@@ -41,6 +41,7 @@ const RepoStore = {
   isCommitable: false,
   binary: false,
   currentBranch: '',
+  targetBranch: 'new-branch',
   commitMessage: '',
   binaryMimeType: '',
   // scroll bar space for windows

app/assets/stylesheets/pages/repo.scss

@@ -155,6 +155,10 @@
   #commit-area {
     background: $gray-light;
     padding: 20px;
+
+    span.help-block {
+      padding-top: 7px;
+    }
   }
 
   #view-toggler {

app/helpers/dropdowns_helper.rb

@@ -72,7 +72,7 @@ module DropdownsHelper
 
   def dropdown_input(placeholder, input_id: nil)
     content_tag :div, class: "dropdown-input" do
-      filter_output = search_field_tag input_id, nil, class: "dropdown-input-field dropdown-no-filter", placeholder: placeholder, autocomplete: 'off'
+      filter_output = text_field_tag input_id, nil, class: "dropdown-input-field dropdown-no-filter", placeholder: placeholder, autocomplete: 'off'
       filter_output << icon('times', class: "dropdown-input-clear js-dropdown-input-clear", role: "button")
 
       filter_output.html_safe

app/views/shared/_target_switcher.html.haml

@@ -6,7 +6,7 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, find: ['branches']), field_name: 'ref', submit_form_on_click: true, visit: false }, { toggle_class: "js-project-refs-dropdown" }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, find: ['branches']), field_name: 'ref', input_field_name: 'new-branch', submit_form_on_click: true, visit: false }, { toggle_class: "js-project-refs-dropdown" }
     %ul.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       %li
         = dropdown_title _("Create a new branch")

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

 .dropdown-page-two.dropdown-new-label
-  = dropdown_title("Create new label", back: true)
+  = dropdown_title("Create new label", options: { back: true })
   = dropdown_content do
     .dropdown-labels-error.js-label-error
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" }