Merge pull request #9046 from alphagov/hide-markdown-help-when-visual…

…-editor-is-showing

Hide markdown help when visual editor is showing

app/assets/javascripts/components/visual-editor.js

@@ -33,6 +33,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     this.contentEditable = this.container.querySelector(
       'div[contenteditable="true"]'
     )
+    this.markdownHelp = document.querySelector('.govspeak-help')
 
     this.exitButton.addEventListener('click', this.hideVisualEditor.bind(this))
     this.showVisualEditor()
@@ -45,6 +46,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     this.visualEditorWrapper.classList.add(
       'app-c-visual-editor__visual-editor-wrapper--show'
     )
+    this.markdownHelp.classList.add(
+      'app-c-visual-editor__markdown-help--hidden'
+    )
     this.visual_editor_flag.value = true
 
     this.contentEditable.setAttribute('id', this.textarea.getAttribute('id'))
@@ -58,6 +62,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     this.visualEditorWrapper.classList.remove(
       'app-c-visual-editor__visual-editor-wrapper--show'
     )
+    this.markdownHelp.classList.remove(
+      'app-c-visual-editor__markdown-help--hidden'
+    )
     this.visual_editor_flag.value = false
 
     this.textarea.setAttribute('id', this.contentEditable.getAttribute('id'))

app/assets/stylesheets/components/_visual-editor.scss

@@ -2,7 +2,8 @@
 
 .app-c-visual-editor__content,
 .app-c-visual-editor__visual-editor-wrapper,
-.app-c-visual-editor__govspeak-editor-wrapper--hidden {
+.app-c-visual-editor__govspeak-editor-wrapper--hidden,
+.app-c-visual-editor__markdown-help--hidden {
   display: none;
 }
 

test/functional/admin/attachments_controller_test.rb

@@ -281,14 +281,15 @@ def self.supported_attachable_types
     assert_select "option[value='#{Attachment.parliamentary_sessions.first}']"
   end
 
-  view_test "GET :new shows visual editor if permission and feature flag are enabled" do
+  view_test "GET :new shows visual editor and no markdown help if permission and feature flag are enabled" do
     feature_flags.switch!(:govspeak_visual_editor, true)
     current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
     publication = create(:publication)
     get :new, params: { edition_id: publication, type: "html" }
 
     assert_select(".app-c-visual-editor__container")
+    assert_select ".govspeak-help", visible: false, count: 1
   end
 
   test "POST :create with bad data does not save the attachment and re-renders the new template" do
@@ -309,34 +310,37 @@ def self.supported_attachable_types
     assert_select "input[type=file]"
   end
 
-  view_test "GET :edit shows visual editor if permission and feature flag are enabled, and attachment has been saved with visual editor" do
+  view_test "GET :edit shows visual editor and no markdown help if permission and feature flag are enabled, and attachment has been saved with visual editor" do
     feature_flags.switch!(:govspeak_visual_editor, true)
     current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
     attachment = create(:html_attachment, attachable: @edition, visual_editor: true)
     get :edit, params: { edition_id: @edition, id: attachment }
 
     assert_select(".app-c-visual-editor__container")
+    assert_select ".govspeak-help", visible: false, count: 1
   end
 
-  view_test "edit form does not render visual editor for exited attachments" do
+  view_test "edit form does not render visual editor, and renders the markdown help, for exited attachments" do
     feature_flags.switch!(:govspeak_visual_editor, true)
     current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
     attachment = create(:html_attachment, attachable: @edition, visual_editor: false)
     get :edit, params: { edition_id: @edition, id: attachment }
 
     assert_select ".app-c-visual-editor__container", count: 0
+    assert_select ".govspeak-help", count: 1
   end
 
-  view_test "edit form does not render visual editor for pre-existing attachments" do
+  view_test "edit form does not render visual editor, and renders the markdown help, for pre-existing attachments" do
     feature_flags.switch!(:govspeak_visual_editor, true)
     current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
     attachment = create(:html_attachment, attachable: @edition, visual_editor: nil)
     get :edit, params: { edition_id: @edition, id: attachment }
 
     assert_select ".app-c-visual-editor__container", count: 0
+    assert_select ".govspeak-help", count: 1
   end
 
   test "PUT :update for HTML attachment updates the attachment" do

test/support/admin_edition_controller_test_helpers.rb

@@ -60,13 +60,14 @@ def should_allow_creating_of(edition_type)
         assert_select(".js-app-c-govspeak-editor__preview-button")
       end
 
-      view_test "new form has visual editor when flip flop enabled and user has permission" do
+      view_test "new form has visual editor and no markdown help when flip flop enabled and user has permission" do
         feature_flags.switch!(:govspeak_visual_editor, true)
         current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
         get :new
 
         assert_select(".app-c-visual-editor__container")
+        assert_select ".govspeak-help", visible: false, count: 1
       end
 
       view_test "new form has cancel link which takes the user to the list of drafts" do
@@ -192,7 +193,7 @@ def should_allow_editing_of(edition_type)
         assert_select(".js-app-c-govspeak-editor__preview-button")
       end
 
-      view_test "edit form renders visual editor when feature flag is enabled, user has permission, and edition has been saved with visual editor" do
+      view_test "edit form renders visual editor and no markdown help when feature flag is enabled, user has permission, and edition has been saved with visual editor" do
         feature_flags.switch!(:govspeak_visual_editor, true)
         current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
@@ -201,9 +202,10 @@ def should_allow_editing_of(edition_type)
         get :edit, params: { id: edition }
 
         assert_select(".app-c-visual-editor__container")
+        assert_select ".govspeak-help", visible: false, count: 1
       end
 
-      view_test "edit form does not render visual editor for exited editions" do
+      view_test "edit form does not render visual editor, and renders the markdown help, for exited editions" do
         feature_flags.switch!(:govspeak_visual_editor, true)
         current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
@@ -212,9 +214,10 @@ def should_allow_editing_of(edition_type)
         get :edit, params: { id: edition }
 
         assert_select ".app-c-visual-editor__container", count: 0
+        assert_select ".govspeak-help", count: 1
       end
 
-      view_test "edit form does not render visual editor for pre-existing editions" do
+      view_test "edit form does not render visual editor, and renders the markdown help, for pre-existing editions" do
         feature_flags.switch!(:govspeak_visual_editor, true)
         current_user.permissions << User::Permissions::VISUAL_EDITOR_PRIVATE_BETA
 
@@ -223,6 +226,7 @@ def should_allow_editing_of(edition_type)
         get :edit, params: { id: edition }
 
         assert_select ".app-c-visual-editor__container", count: 0
+        assert_select ".govspeak-help", count: 1
       end
 
       view_test "edit form has cancel link which takes the user back to edition" do