Updates dropdown to update branch in commit section.

6 files changed, 95 insertions, 38 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 593fad86972..5cb31ddd500 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/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) {
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index f9f9c31f1ef..986bdb25d38 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/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,
diff --git a/app/assets/javascripts/repo/repo_commit_section.vue b/app/assets/javascripts/repo/repo_commit_section.vue
index 49d328b5a4b..5db8cdcfbd6 100644
--- a/app/assets/javascripts/repo/repo_commit_section.vue
+++ b/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">
diff --git a/app/assets/javascripts/repo/repo_edit_button.js b/app/assets/javascripts/repo/repo_edit_button.js
index 07ae93d7f00..43d5f36eb23 100644
--- a/app/assets/javascripts/repo/repo_edit_button.js
+++ b/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;
diff --git a/app/assets/javascripts/repo/repo_helper.js b/app/assets/javascripts/repo/repo_helper.js
index ff83caa58a1..1cd70b28e86 100644
--- a/app/assets/javascripts/repo/repo_helper.js
+++ b/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);
   },
diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js
index dc89ec54fa2..6d5666e6d92 100644
--- a/app/assets/javascripts/repo/repo_store.js
+++ b/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