Use single js- wrapper class to show/hide

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

4 files changed, 10 insertions, 8 deletions

diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index e954fd38fc9..f47b6c33fa2 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -29,12 +29,10 @@ export default {
     editMode() {
       if (this.editMode) {
         $('.project-refs-form').addClass('disabled');
-        $('.fa-long-arrow-right').show();
-        $('.project-refs-target-form').show();
+        $('.js-tree-ref-target-holder').show();
       } else {
         $('.project-refs-form').removeClass('disabled');
-        $('.fa-long-arrow-right').hide();
-        $('.project-refs-target-form').hide();
+        $('.js-tree-ref-target-holder').hide();
       }
     },
   },
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 67c03680fca..3e37da1726e 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/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() {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 11236cbf2e7..0028e207f3e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/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;
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 427b059cb82..853e2a6e7ec 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/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'