Adds new ruby help for dropdowns for branches

15 files changed, 159 insertions, 44 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 3babe273100..593fad86972 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -206,7 +206,7 @@ GitLabDropdown = (function() {
 
   CURSOR_SELECT_SCROLL_PADDING = 5;
 
-  FILTER_INPUT = '.dropdown-input .dropdown-input-field';
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
 
   function GitLabDropdown(el1, options) {
     var searchFields, selector, self;
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index 8543b44a057..401df308316 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -77,7 +77,6 @@ import Cookies from 'js-cookie';
               },
               dataType: "json"
             }).done(function(refs) {
-              console.log(refs);
               return callback(refs);
             });
           },
@@ -118,9 +117,15 @@ import Cookies from 'js-cookie';
             e.preventDefault();
             if ($('input[name="ref"]').length) {
               var $form = $dropdown.closest('form');
+
+              var $visit = $dropdown.data('visit');
+              var shouldVisit = typeof $visit === 'undefined' ? true : $visit;
               var action = $form.attr('action');
               var divider = action.indexOf('?') === -1 ? '?' : '&';
-              gl.utils.visitUrl(action + '' + divider + '' + $form.serialize());
+              if(shouldVisit){
+                gl.utils.visitUrl(action + '' + divider + '' + $form.serialize());  
+              }
+              
             }
           }
         });
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index e1f2f578f0b..f0684706c72 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -10,7 +10,8 @@ import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
 import { repoEditorLoader } from './repo_editor';
-import RepoMiniMixin from './repo_mini_mixin';
+import RepoMixin from './repo_mixin';
+import PopupDialog from '../vue_shared/components/popup_dialog.vue'
 
 function initRepo() {
   const repo = document.getElementById('repo');
@@ -37,9 +38,10 @@ function initRepo() {
           <repo-binary-viewer/>
         </div>
         <repo-commit-section/>
+        <popup-dialog :open="dialog.open" kind="warning" title="Are you sure?" body="Are you sure you want to discard your changes?" @toggle="dialogToggled" @submit="dialogSubmitted"></popup-dialog>
       </div>
     `,
-    mixins: [RepoMiniMixin],
+    mixins: [RepoMixin],
     components: {
       'repo-sidebar': RepoSidebar,
       'repo-tabs': RepoTabs,
@@ -47,7 +49,19 @@ function initRepo() {
       'repo-binary-viewer': RepoBinaryViewer,
       'repo-editor': repoEditorLoader,
       'repo-commit-section': RepoCommitSection,
+      'popup-dialog': PopupDialog,
     },
+
+    methods: {
+      dialogToggled(toggle) {
+        this.dialog.open = toggle;
+      },
+
+      dialogSubmitted(status) {
+        this.dialog.open = false;
+        this.dialog.status = status;
+      }
+    }
   });
 
   const editButton = document.getElementById('editable-mode');
diff --git a/app/assets/javascripts/repo/repo_commit_section.vue b/app/assets/javascripts/repo/repo_commit_section.vue
index d58b2bae7b2..c03ed7eefb4 100644
--- a/app/assets/javascripts/repo/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/repo_commit_section.vue
@@ -2,10 +2,13 @@
 /* global Flash */
 import Store from './repo_store';
 import Api from '../api';
+import RepoMixin from './repo_mixin'
 
 const RepoCommitSection = {
   data: () => Store,
 
+  mixins: [RepoMixin],
+
   methods: {
     makeCommit() {
       // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
@@ -38,14 +41,6 @@ const RepoCommitSection = {
       }, Store.tempPrivateToken);
     },
   },
-
-  computed: {
-    changedFiles() {
-      const changedFileList = this.openedFiles
-      .filter(file => file.changed);
-      return changedFileList;
-    },
-  },
 };
 
 export default RepoCommitSection;
diff --git a/app/assets/javascripts/repo/repo_edit_button.js b/app/assets/javascripts/repo/repo_edit_button.js
index e01dcc58802..07ae93d7f00 100644
--- a/app/assets/javascripts/repo/repo_edit_button.js
+++ b/app/assets/javascripts/repo/repo_edit_button.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Store from './repo_store';
+import RepoMixin from './repo_mixin'
 
 export default class RepoEditButton {
   constructor(el) {
@@ -9,10 +10,11 @@ export default class RepoEditButton {
   initVue(el) {
     this.vue = new Vue({
       el,
+      mixins: [RepoMixin],
       data: () => Store,
       computed: {
         buttonLabel() {
-          return this.editMode ? 'Read-only mode' : 'Edit mode';
+          return this.editMode ? 'Cancel edit' : 'Edit';
         },
 
         buttonIcon() {
@@ -21,9 +23,25 @@ export default class RepoEditButton {
       },
       methods: {
         editClicked() {
+          console.log('thiscf', this.changedFiles)
+          if(this.changedFiles.length) {
+            this.dialog.open = true;
+            return;
+          }
           this.editMode = !this.editMode;
         },
       },
+
+      watch: {
+        dialog: {
+          handler(obj) {
+            if(obj.status) {
+              obj.status = false;
+            }
+          },
+          deep: true,
+        }
+      }
     });
   }
 }
diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js
index 6f45483cb9f..0dee33b141f 100644
--- a/app/assets/javascripts/repo/repo_editor.js
+++ b/app/assets/javascripts/repo/repo_editor.js
@@ -65,7 +65,6 @@ const RepoEditor = {
     },
 
     editMode() {
-      console.log('edit mode changed')
       const readOnly = !this.editMode;
 
       Store.readOnly = readOnly;
diff --git a/app/assets/javascripts/repo/repo_file_buttons.vue b/app/assets/javascripts/repo/repo_file_buttons.vue
index 0bac7fb6410..2ef07675c28 100644
--- a/app/assets/javascripts/repo/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/repo_file_buttons.vue
@@ -1,12 +1,12 @@
 <script>
 import Store from './repo_store';
 import Helper from './repo_helper';
-import RepoMiniMixin from './repo_mini_mixin';
+import RepoMixin from './repo_mixin';
 
 const RepoFileButtons = {
   data: () => Store,
 
-  mixins: [RepoMiniMixin],
+  mixins: [RepoMixin],
 
   computed: {
     editableBorder() {
diff --git a/app/assets/javascripts/repo/repo_helper.js b/app/assets/javascripts/repo/repo_helper.js
index a4b15725a49..3d04dbb658f 100644
--- a/app/assets/javascripts/repo/repo_helper.js
+++ b/app/assets/javascripts/repo/repo_helper.js
@@ -135,7 +135,6 @@ const RepoHelper = {
 
   getContent(treeOrFile, cb) {
     let file = treeOrFile;
-    console.log('file',file)
     // const loadingData = RepoHelper.setLoading(true);
     return Service.getContent()
     .then((response) => {
diff --git a/app/assets/javascripts/repo/repo_mini_mixin.js b/app/assets/javascripts/repo/repo_mini_mixin.js
deleted file mode 100644
index e33956b6d15..00000000000
--- a/app/assets/javascripts/repo/repo_mini_mixin.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Store from './repo_store';
-
-const RepoMiniMixin = {
-  computed: {
-    isMini() {
-      return !!Store.openedFiles.length;
-    },
-  },
-};
-
-export default RepoMiniMixin;
diff --git a/app/assets/javascripts/repo/repo_mixin.js b/app/assets/javascripts/repo/repo_mixin.js
new file mode 100644
index 00000000000..be5df90b56b
--- /dev/null
+++ b/app/assets/javascripts/repo/repo_mixin.js
@@ -0,0 +1,17 @@
+import Store from './repo_store';
+
+const RepoMixin = {
+  computed: {
+    isMini() {
+      return !!Store.openedFiles.length;
+    },
+
+    changedFiles() {
+      const changedFileList = this.openedFiles
+      .filter(file => file.changed);
+      return changedFileList;
+    },
+  },
+};
+
+export default RepoMixin;
diff --git a/app/assets/javascripts/repo/repo_sidebar.vue b/app/assets/javascripts/repo/repo_sidebar.vue
index 04a59043a9e..11a2cde1169 100644
--- a/app/assets/javascripts/repo/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/repo_sidebar.vue
@@ -6,10 +6,10 @@ import RepoPreviousDirectory from './repo_prev_directory.vue';
 import RepoFileOptions from './repo_file_options.vue';
 import RepoFile from './repo_file.vue';
 import RepoLoadingFile from './repo_loading_file.vue';
-import RepoMiniMixin from './repo_mini_mixin';
+import RepoMixin from './repo_mixin';
 
 const RepoSidebar = {
-  mixins: [RepoMiniMixin],
+  mixins: [RepoMixin],
   components: {
     'repo-file-options': RepoFileOptions,
     'repo-previous-directory': RepoPreviousDirectory,
diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js
index 3654732dab9..861a99a8b80 100644
--- a/app/assets/javascripts/repo/repo_store.js
+++ b/app/assets/javascripts/repo/repo_store.js
@@ -29,6 +29,11 @@ const RepoStore = {
   tempPrivateToken: '',
   submitCommitsLoading: false,
   binaryLoaded:false,
+  dialog: {
+    open: false,
+    title: '',
+    status: false,
+  },
   activeFile: RepoHelper.getDefaultActiveFile(),
   activeFileIndex: 0,
   activeLine: 0,
@@ -143,7 +148,6 @@ const RepoStore = {
 
     // now activate the right tab based on what you closed.
     if(RepoStore.openedFiles.length === 0) {
-      console.log('open 0')
       RepoStore.activeFile = {};
       return;
     }
diff --git a/app/assets/javascripts/repo/repo_tabs.vue b/app/assets/javascripts/repo/repo_tabs.vue
index 81abe40da03..959aecd26b2 100644
--- a/app/assets/javascripts/repo/repo_tabs.vue
+++ b/app/assets/javascripts/repo/repo_tabs.vue
@@ -2,10 +2,10 @@
 import Vue from 'vue';
 import Store from './repo_store';
 import RepoTab from './repo_tab.vue';
-import RepoMiniMixin from './repo_mini_mixin';
+import RepoMixin from './repo_mixin';
 
 const RepoTabs = {
-  mixins: [RepoMiniMixin],
+  mixins: [RepoMixin],
 
   components: {
     'repo-tab': RepoTab,
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
new file mode 100644
index 00000000000..f63125e4d81
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
@@ -0,0 +1,67 @@
+<script>
+const PopupDialog = {
+  name: 'popup-dialog',
+
+  props: {
+    open: Boolean,
+    title: String,
+    body: String,
+    kind: {
+      type: String,
+      default: 'primary',
+    },
+    closeButtonLabel: {
+      type: String,
+      default: 'Cancel',
+    },
+    primaryButtonLabel: {
+      type: String,
+      default: 'Save changes',
+    },
+  },
+
+  computed: {
+    typeOfClass() {
+      const className = `btn-${this.kind}`;
+      let returnObj = {};
+      returnObj[className] = true;
+      return returnObj;
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('toggle', false);
+    },
+
+    yesClick() {
+      this.$emit('submit', true);
+    },
+
+    noClick() {
+      this.$emit('submit', false);
+    }
+  }
+};
+
+export default PopupDialog;
+</script>
+<template>
+<div class="modal popup-dialog" tabindex="-1" v-show="open" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">{{this.title}}</h4>
+      </div>
+      <div class="modal-body">
+        <p>{{this.body}}</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" @click="noClick">{{closeButtonLabel}}</button>
+        <button type="button" class="btn" :class="typeOfClass" @click="yesClick">{{primaryButtonLabel}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index dd48ef297da..a569438ed24 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -7,6 +7,22 @@
   transition: opacity .5s;
 }
 
+.modal.popup-dialog {
+  display: block;
+
+
+  @media (min-width: 992px) {
+    .modal-dialog {
+      width: 600px;
+      margin: 30px auto;
+    }
+  }
+}
+
+.project-refs-form, .project-refs-target-form {
+  display: inline-block;
+}
+
 .fade-enter,
 .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
   opacity: 0;
@@ -55,7 +71,6 @@
     }
 
     #tabs {
-      height: 61px;
       border-bottom: 1px solid $white-normal;
       padding-left: 0;
       margin-bottom: 0;
@@ -65,14 +80,6 @@
       overflow-y: hidden;
       overflow-x: auto;
 
-      &.overflown {
-        height: 61px;
-
-        li {
-          padding: 20px 18px;
-        }
-      }
-
       li {
         animation: swipeRightAppear ease-in 0.1s;
         animation-iteration-count: 1;
@@ -80,9 +87,10 @@
         list-style-type: none;
         background: $gray-normal;
         display: inline-block;
-        padding: 20px 18px;
+        padding: 10px 18px;
         border-right: 1px solid $border-color;
         white-space: nowrap;
+        border-radius: 3px 3px 0 0;
 
         &.active {
           background: $white-light;