Use single js- wrapper class to show/hide

Fix
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12198#note_37146360

Conflicts:
	app/assets/javascripts/repo/components/repo_edit_button.vue

app/assets/javascripts/repo/index.js

@@ -7,8 +7,7 @@ import RepoEditButton from './components/repo_edit_button.vue';
 import Translate from '../vue_shared/translate';
 
 function initDropdowns() {
-  $('.project-refs-target-form').hide();
-  $('.fa-long-arrow-right').hide();
+  $('.js-tree-ref-target-holder').hide();
 }
 
 function addEventsForNonVueEls() {

app/assets/stylesheets/pages/tree.scss

@@ -29,6 +29,10 @@
         margin-right: 15px;
       }
 
+      .tree-ref-target-holder {
+        display: inline-block;
+      }
+
       .repo-breadcrumb {
         li:last-of-type {
           position: relative;

app/views/projects/tree/_tree_header.html.haml

@@ -2,8 +2,9 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path
     - if show_new_repo?
-      = icon('long-arrow-right', title: 'to target branch')
-      = render 'shared/target_switcher', destination: 'tree', path: @path
+      .tree-ref-target-holder.js-tree-ref-target-holder
+        = icon('long-arrow-right', title: 'to target branch')
+        = render 'shared/target_switcher', destination: 'tree', path: @path
 
   - unless show_new_repo?
     = render 'projects/tree/old_tree_header'