Fix template selector menu visibility

4 files changed, 77 insertions, 1 deletions

diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 030ca1907e5..ff1cbcad145 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -94,7 +94,7 @@ export default class FileTemplateMediator {
       const hash = urlPieces[1];
       if (hash === 'preview') {
         this.hideTemplateSelectorMenu();
-      } else if (hash === 'editor') {
+      } else if (hash === 'editor' && !this.typeSelector.isHidden()) {
         this.showTemplateSelectorMenu();
       }
     });
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index e52cf249f3a..02228434a29 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -32,6 +32,10 @@ export default class FileTemplateSelector {
     }
   }
 
+  isHidden() {
+    return this.$wrapper.hasClass('hidden');
+  }
+
   getToggleText() {
     return this.$dropdownToggleText.text();
   }
diff --git a/changelogs/unreleased/32617-fix-template-selector-menu-visibility.yml b/changelogs/unreleased/32617-fix-template-selector-menu-visibility.yml
new file mode 100644
index 00000000000..c73be5a901e
--- /dev/null
+++ b/changelogs/unreleased/32617-fix-template-selector-menu-visibility.yml
@@ -0,0 +1,6 @@
+---
+title: Fix template selector menu visibility when toggling preview mode in file edit
+  view
+merge_request: 18118
+author: Fabian Schneider
+type: fixed
diff --git a/spec/features/projects/files/template_selector_menu_spec.rb b/spec/features/projects/files/template_selector_menu_spec.rb
new file mode 100644
index 00000000000..b549a69ddf3
--- /dev/null
+++ b/spec/features/projects/files/template_selector_menu_spec.rb
@@ -0,0 +1,66 @@
+require 'spec_helper'
+
+feature 'Template selector menu', :js do
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user) }
+
+  before do
+    project.add_master(user)
+    sign_in user
+  end
+
+  context 'editing a non-matching file' do
+    before do
+      create_and_edit_file('README.md')
+    end
+
+    scenario 'is not displayed' do
+      check_template_selector_menu_display(false)
+    end
+
+    context 'user toggles preview' do
+      before do
+        click_link 'Preview'
+      end
+
+      scenario 'template selector menu is not displayed' do
+        check_template_selector_menu_display(false)
+        click_link 'Write'
+        check_template_selector_menu_display(false)
+      end
+    end
+  end
+
+  context 'editing a matching file' do
+    before do
+      visit project_edit_blob_path(project, File.join(project.default_branch, 'LICENSE'))
+    end
+
+    scenario 'is displayed' do
+      check_template_selector_menu_display(true)
+    end
+
+    context 'user toggles preview' do
+      before do
+        click_link 'Preview'
+      end
+
+      scenario 'template selector menu is hidden and shown correctly' do
+        check_template_selector_menu_display(false)
+        click_link 'Write'
+        check_template_selector_menu_display(true)
+      end
+    end
+  end
+end
+
+def check_template_selector_menu_display(is_visible)
+  count = is_visible ? 1 : 0
+  expect(page).to have_css('.template-selectors-menu', count: count)
+end
+
+def create_and_edit_file(file_name)
+  visit project_new_blob_path(project, 'master', file_name: file_name)
+  click_button "Commit changes"
+  visit project_edit_blob_path(project, File.join(project.default_branch, file_name))
+end