Disabled and show dropdowns at the right times.

app/assets/javascripts/repo/index.js

@@ -24,6 +24,11 @@ function repoEditorLoader() {
   });
 }
 
+function initDropdowns() {
+  $('.project-refs-target-form').hide();
+  $('.fa-long-arrow-right').hide();
+}
+
 function addEventsForNonVueEls() {
   $(document).on('change', '.dropdown', () => {
     Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
@@ -56,6 +61,7 @@ function initRepo() {
   Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
   Store.checkIsCommitable();
   addEventsForNonVueEls();
+  initDropdowns();
 
   this.vm = new Vue({
     el: repo,

app/assets/javascripts/repo/repo_editor.vue

@@ -70,6 +70,16 @@ const RepoEditor = {
       this.monacoInstance.updateOptions({
         readOnly,
       });
+
+      if(this.editMode){
+        $('.project-refs-form').addClass('disabled');
+        $('.fa-long-arrow-right').show();
+        $('.project-refs-target-form').show();
+      }else{
+        $('.project-refs-form').removeClass('disabled');
+        $('.fa-long-arrow-right').hide();
+        $('.project-refs-target-form').hide();
+      }
     },
 
     activeFileLabel() {

app/assets/stylesheets/pages/repo.scss

@@ -21,6 +21,11 @@
 
 .project-refs-form, .project-refs-target-form {
   display: inline-block;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .fade-enter,