Add Markdown preview to more forms

Enable Markdown previews when creating and editing issues, merge
requests, and milestones, and when editing notes.

21 files changed, 260 insertions, 141 deletions

diff --git a/app/assets/javascripts/markdown_area.js.coffee b/app/assets/javascripts/markdown_area.js.coffee
index a0ebfc98ce6..a4bd4774dc9 100644
--- a/app/assets/javascripts/markdown_area.js.coffee
+++ b/app/assets/javascripts/markdown_area.js.coffee
@@ -24,6 +24,51 @@ $(document).ready ->
     "opacity": 0
     "display": "none"
 
+  # Preview button
+  $(document).off "click", ".js-md-preview-button"
+  $(document).on "click", ".js-md-preview-button", (e) ->
+    ###
+    Shows the Markdown preview.
+
+    Lets the server render GFM into Html and displays it.
+    ###
+    e.preventDefault()
+    form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-md-write-button").parent().removeClass "active"
+    form.find(".js-md-preview-button").parent().addClass "active"
+
+    # toggle content
+    form.find(".md-write-holder").hide()
+    form.find(".md-preview-holder").show()
+
+    preview = form.find(".js-md-preview")
+    mdText = form.find(".markdown-area").val()
+    if mdText.trim().length is 0
+      preview.text "Nothing to preview."
+    else
+      preview.text "Loading..."
+      $.post($(this).data("url"),
+        md_text: mdText
+      ).success (previewData) ->
+        preview.html previewData
+
+  # Write button
+  $(document).off "click", ".js-md-write-button"
+  $(document).on "click", ".js-md-write-button", (e) ->
+    ###
+    Shows the Markdown textarea.
+    ###
+    e.preventDefault()
+    form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-md-write-button").parent().addClass "active"
+    form.find(".js-md-preview-button").parent().removeClass "active"
+
+    # toggle content
+    form.find(".md-write-holder").show()
+    form.find(".md-preview-holder").hide()
+
   dropzone = $(".div-dropzone").dropzone(
     url: project_image_path_upload
     dictDefaultMessage: ""
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ba8d7a9a2f5..b6bb0c42ad4 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -36,12 +36,6 @@ class Notes
     # delete note attachment
     $(document).on "click", ".js-note-attachment-delete", @removeAttachment
 
-    # Preview button
-    $(document).on "click", ".js-note-preview-button", @previewNote
-
-    # Preview button
-    $(document).on "click", ".js-note-write-button", @writeNote
-
     # reset main target form after submit
     $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
 
@@ -77,8 +71,6 @@ class Notes
     $(document).off "click", ".note-edit-cancel"
     $(document).off "click", ".js-note-delete"
     $(document).off "click", ".js-note-attachment-delete"
-    $(document).off "click", ".js-note-preview-button"
-    $(document).off "click", ".js-note-write-button"
     $(document).off "ajax:complete", ".js-main-target-form"
     $(document).off "click", ".js-choose-note-attachment-button"
     $(document).off "click", ".js-discussion-reply-button"
@@ -166,47 +158,6 @@ class Notes
     @removeDiscussionNoteForm(form)
 
   ###
-  Shows write note textarea.
-  ###
-  writeNote: (e) ->
-    e.preventDefault()
-    form = $(this).closest("form")
-    # toggle tabs
-    form.find(".js-note-write-button").parent().addClass "active"
-    form.find(".js-note-preview-button").parent().removeClass "active"
-
-    # toggle content
-    form.find(".note-write-holder").show()
-    form.find(".note-preview-holder").hide()
-
-  ###
-  Shows the note preview.
-
-  Lets the server render GFM into Html and displays it.
-  ###
-  previewNote: (e) ->
-    e.preventDefault()
-    form = $(this).closest("form")
-    # toggle tabs
-    form.find(".js-note-write-button").parent().removeClass "active"
-    form.find(".js-note-preview-button").parent().addClass "active"
-
-    # toggle content
-    form.find(".note-write-holder").hide()
-    form.find(".note-preview-holder").show()
-
-    preview = form.find(".js-note-preview")
-    noteText = form.find(".js-note-text").val()
-    if noteText.trim().length is 0
-      preview.text "Nothing to preview."
-    else
-      preview.text "Loading..."
-      $.post($(this).data("url"),
-        note: noteText
-      ).success (previewData) ->
-        preview.html previewData
-
-  ###
   Called in response the main target form has been successfully submitted.
 
   Removes any errors.
@@ -220,7 +171,7 @@ class Notes
     form.find(".js-errors").remove()
 
     # reset text and preview
-    form.find(".js-note-write-button").click()
+    form.find(".js-md-write-button").click()
     form.find(".js-note-text").val("").trigger "input"
 
   ###
@@ -270,8 +221,8 @@ class Notes
     form.removeClass "js-new-note-form"
 
     # setup preview buttons
-    form.find(".js-note-write-button, .js-note-preview-button").tooltip placement: "left"
-    previewButton = form.find(".js-note-preview-button")
+    form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left"
+    previewButton = form.find(".js-md-preview-button")
     form.find(".js-note-text").on "input", ->
       if $(this).val().trim() isnt ""
         previewButton.removeClass("turn-off").addClass "turn-on"
diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss
index fbfa72c5e5e..e8c21afabe1 100644
--- a/app/assets/stylesheets/generic/markdown_area.scss
+++ b/app/assets/stylesheets/generic/markdown_area.scss
@@ -50,3 +50,28 @@
   margin-bottom: 0;
   transition: opacity 200ms ease-in-out;
 }
+
+.md-preview-holder {
+  background: #FFF;
+  border: 1px solid #ddd;
+  min-height: 100px;
+  padding: 5px;
+  font-size: 14px;
+  box-shadow: none;
+}
+
+.new_note,
+.edit_note,
+.issuable-description,
+.milestone-description,
+.merge-request-form {
+  .nav-tabs {
+    margin-bottom: 0;
+    border: none;
+
+    li a,
+    li.active a {
+      border: 1px solid #DDD;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss
index 7eb42fddade..65ad46a4579 100644
--- a/app/assets/stylesheets/sections/notes.scss
+++ b/app/assets/stylesheets/sections/notes.scss
@@ -224,7 +224,6 @@ ul.notes {
     margin-bottom: 0;
   }
 
-  .note-preview-holder,
   .note_text {
     background: #FFF;
     border: 1px solid #ddd;
@@ -243,15 +242,6 @@ ul.notes {
   .note_text {
     width: 100%;
   }
-  .nav-tabs {
-    margin-bottom: 0;
-    border: none;
-
-    li a,
-    li.active a {
-      border: 1px solid #DDD;
-    }
-  }
 }
 
 /* loading indicator */
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index 7b08b79d236..2f1d631c14a 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -61,10 +61,6 @@ class Projects::NotesController < Projects::ApplicationController
     end
   end
 
-  def preview
-    render text: view_context.markdown(params[:note])
-  end
-
   private
 
   def note
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index b3380a6ff23..aca091e7d2c 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -183,6 +183,10 @@ class ProjectsController < ApplicationController
     render json: { star_count: @project.star_count }
   end
 
+  def markdown_preview
+    render text: view_context.markdown(params[:md_text])
+  end
+
   private
 
   def upload_path
diff --git a/app/views/projects/_issuable_form.html.haml b/app/views/projects/_issuable_form.html.haml
index 6cdfab933b4..675b73a59cb 100644
--- a/app/views/projects/_issuable_form.html.haml
+++ b/app/views/projects/_issuable_form.html.haml
@@ -14,17 +14,20 @@
 .form-group.issuable-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
-    = render 'projects/zen', f: f, attr: :description,
-                             classes: 'description form-control'
-    .col-sm-12.hint
-      .pull-left
-        Parsed with
-        #{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}.
-      .pull-right
-        Attach images (JPG, PNG, GIF) by dragging &amp; dropping
-        or #{link_to 'selecting them', '#', class: 'markdown-selector' }.
-    .clearfix
-    .error-alert
+
+    = render layout: 'projects/md_preview' do
+      = render 'projects/zen', f: f, attr: :description,
+                               classes: 'description form-control'
+      .col-sm-12.hint
+        .pull-left
+          Parsed with
+          #{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}.
+        .pull-right
+          Attach images (JPG, PNG, GIF) by dragging &amp; dropping
+          or #{link_to 'selecting them', '#', class: 'markdown-selector' }.
+
+      .clearfix
+      .error-alert
 %hr
 .form-group
   .issue-assignee
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
new file mode 100644
index 00000000000..dbbf8e3bf97
--- /dev/null
+++ b/app/views/projects/_md_preview.html.haml
@@ -0,0 +1,12 @@
+%ul.nav.nav-tabs
+  %li.active
+    = link_to '#md-write-holder', class: 'js-md-write-button' do
+      Write
+  %li
+    = link_to '#md-preview-holder', class: 'js-md-preview-button', data: { url: markdown_preview_project_path(@project) } do
+      Preview
+%div
+  .md-write-holder
+    = yield
+  .md-preview-holder.hide
+    .js-md-preview
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index d4666eacd7e..76813e688b5 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -21,12 +21,13 @@
       .form-group
         .light
           = f.label :description, "Description"
-        = render 'projects/zen', f: f, attr: :description,
-                                 classes: 'description form-control'
-        .clearfix.hint
-          .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
-          .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
-        .error-alert
+        = render layout: 'projects/md_preview' do
+          = render 'projects/zen', f: f, attr: :description,
+                                   classes: 'description form-control'
+          .clearfix.hint
+            .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
+            .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+          .error-alert
       .form-group
         .issue-assignee
           = f.label :assignee_id do
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index 5fb01a11cc5..0f51a347f01 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -18,13 +18,14 @@
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control"
           %p.hint Required
-      .form-group
+      .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
-          = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
-          .hint
-            .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
-            .pull-left Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+          = render layout: 'projects/md_preview' do
+            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+            .hint
+              .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
+              .pull-left Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
           .clearfix
           .error-alert
     .col-md-6
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml
index c68b3817e79..05946162d3b 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -5,23 +5,13 @@
   = f.hidden_field :noteable_id
   = f.hidden_field :noteable_type
 
-  %ul.nav.nav-tabs
-    %li.active
-      = link_to '#note-write-holder', class: 'js-note-write-button' do
-        Write
-    %li
-      = link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do
-        Preview
-  %div
-    .note-write-holder
-      = render 'projects/zen', f: f, attr: :note,
-                               classes: 'note_text js-note-text'
-      .light.clearfix
-        .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
-        .pull-right Attach images (JPG, PNG, GIF) by dragging &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
+  = render layout: 'projects/md_preview' do
+    = render 'projects/zen', f: f, attr: :note,
+                             classes: 'note_text js-note-text'
+    .light.clearfix
+      .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
+      .pull-right Attach images (JPG, PNG, GIF) by dragging &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
 
-    .note-preview-holder.hide
-      .js-note-preview
 
   .note-form-actions
     .buttons
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 814bf19970c..aa52ff35d0c 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -38,7 +38,8 @@
 
         .note-edit-form
           = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
-            = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
+            = render layout: 'projects/md_preview' do
+              = f.text_area :note, class: 'note_text js-note-text markdown-area js-gfm-input turn-on'
 
             .form-actions.clearfix
               = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
diff --git a/config/routes.rb b/config/routes.rb
index 2534153758b..5dbb238ba6b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -186,6 +186,7 @@ Gitlab::Application.routes.draw do
       post :unarchive
       post :upload_image
       post :toggle_star
+      post :markdown_preview
       get :autocomplete_sources
       get :import
       put :retry_import
@@ -328,10 +329,6 @@ Gitlab::Application.routes.draw do
         member do
           delete :delete_attachment
         end
-
-        collection do
-          post :preview
-        end
       end
     end
   end
diff --git a/features/project/issues/issues.feature b/features/project/issues/issues.feature
index 4db8551559b..e7fbe2bd6f1 100644
--- a/features/project/issues/issues.feature
+++ b/features/project/issues/issues.feature
@@ -159,3 +159,30 @@ Feature: Project Issues
     Given project "Shop" has "Tasks-closed" closed issue with task markdown
     When I visit issue page "Tasks-closed"
     Then Task checkboxes should be disabled
+
+  # Issue description preview
+
+  @javascript
+  Scenario: I can't preview without text
+    Given I click link "New Issue"
+    And I haven't written any description text
+    Then I should not see the Markdown preview button
+
+  @javascript
+  Scenario: I can preview with text
+    Given I click link "New Issue"
+    And I write a description like "Nice"
+    Then I should see the Markdown preview button
+
+  @javascript
+  Scenario: I preview an issue description
+    Given I click link "New Issue"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown preview
+    And I should not see the Markdown text field
+
+  @javascript
+  Scenario: I can edit after preview
+    Given I click link "New Issue"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown edit button
diff --git a/features/project/merge_requests.feature b/features/project/merge_requests.feature
index d20358a7dc6..f1adf0bd34d 100644
--- a/features/project/merge_requests.feature
+++ b/features/project/merge_requests.feature
@@ -187,3 +187,34 @@ Feature: Project Merge Requests
     And I visit merge request page "MR-task-open"
     And I click link "Close"
     Then Task checkboxes should be disabled
+
+  # Description preview
+
+  @javascript
+  Scenario: I can't preview without text
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit"
+    And I haven't written any description text
+    Then I should not see the Markdown preview button
+
+  @javascript
+  Scenario: I can preview with text
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit"
+    And I write a description like "Nice"
+    Then I should see the Markdown preview button
+
+  @javascript
+  Scenario: I preview a merge request description
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown preview
+    And I should not see the Markdown text field
+
+  @javascript
+  Scenario: I can edit after preview
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown edit button
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index fae0cec53a6..32bee9a563f 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -10,6 +10,10 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
     click_link "New Merge Request"
   end
 
+  step 'I click link "Edit"' do
+    click_link 'Edit'
+  end
+
   step 'I click link "Bug NS-04"' do
     click_link "Bug NS-04"
   end
diff --git a/features/steps/shared/diff_note.rb b/features/steps/shared/diff_note.rb
index 10f3ed90b56..bd22e95daee 100644
--- a/features/steps/shared/diff_note.rb
+++ b/features/steps/shared/diff_note.rb
@@ -32,7 +32,7 @@ module SharedDiffNote
     click_diff_line(sample_commit.line_code)
     within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
       fill_in "note[note]", with: "Should fix it :smile:"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').trigger('click')
     end
   end
 
@@ -41,7 +41,7 @@ module SharedDiffNote
 
     within("#{diff_file_selector} form[rel$='#{sample_commit.del_line_code}']") do
       fill_in "note[note]", with: "DRY this up"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').trigger('click')
     end
   end
 
@@ -73,7 +73,7 @@ module SharedDiffNote
 
   step 'I should not see the diff comment preview button' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview-button", visible: false)
+      page.should have_css('.js-md-preview-button', visible: false)
     end
   end
 
@@ -131,25 +131,25 @@ module SharedDiffNote
 
   step 'I should see the diff comment preview' do
     within("#{diff_file_selector} form") do
-      page.should have_css(".js-note-preview", visible: false)
+      page.should have_css('.js-md-preview', visible: false)
     end
   end
 
   step 'I should see the diff comment edit button' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-write-button", visible: true)
+      page.should have_css('.js-md-write-button', visible: true)
     end
   end
 
   step 'I should see the diff comment preview button' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview-button", visible: true)
+      page.should have_css('.js-md-preview-button', visible: true)
     end
   end
 
   step 'I should see two separate previews' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview", visible: true, count: 2)
+      page.should have_css('.js-md-preview', visible: true, count: 2)
       page.should have_content("Should fix it")
       page.should have_content("DRY this up")
     end
diff --git a/features/steps/shared/markdown.rb b/features/steps/shared/markdown.rb
index 8bf138065b0..f3e61aa8e49 100644
--- a/features/steps/shared/markdown.rb
+++ b/features/steps/shared/markdown.rb
@@ -54,4 +54,43 @@ EOT
       'div.description li.task-list-item input[type="checkbox"]:disabled'
     )
   end
+
+  step 'I should not see the Markdown preview' do
+    find('.gfm-form').should have_css('.js-md-preview', visible: false)
+  end
+
+  step 'I should not see the Markdown preview button' do
+    find('.gfm-form').should have_css('.js-md-preview-button', visible: false)
+  end
+
+  step 'I should not see the Markdown text field' do
+    find('.gfm-form').should have_css('textarea', visible: false)
+  end
+
+  step 'I should see the Markdown edit button' do
+    find('.gfm-form').should have_css('.js-md-write-button', visible: true)
+  end
+
+  step 'I should see the Markdown preview' do
+    find('.gfm-form').should have_css('.js-md-preview', visible: true)
+  end
+
+  step 'I should see the Markdown preview button' do
+    find('.gfm-form').should have_css('.js-md-preview-button', visible: true)
+  end
+
+  step 'I write a description like "Nice"' do
+    find('.gfm-form').fill_in 'Description', with: 'Nice'
+  end
+
+  step 'I preview a description text like "Bug fixed :smile:"' do
+    within('.gfm-form') do
+      fill_in 'Description', with: 'Bug fixed :smile:'
+      find('.js-md-preview-button').trigger('click')
+    end
+  end
+
+  step 'I haven\'t written any description text' do
+    find('.gfm-form').fill_in 'Description', with: ''
+  end
 end
diff --git a/features/steps/shared/note.rb b/features/steps/shared/note.rb
index 2b2cb47a715..e298312f065 100644
--- a/features/steps/shared/note.rb
+++ b/features/steps/shared/note.rb
@@ -23,7 +23,7 @@ module SharedNote
   step 'I preview a comment text like "Bug fixed :smile:"' do
     within(".js-main-target-form") do
       fill_in "note[note]", with: "Bug fixed :smile:"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').trigger('click')
     end
   end
 
@@ -51,13 +51,13 @@ module SharedNote
 
   step 'I should not see the comment preview' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview", visible: false)
+      page.should have_css('.js-md-preview', visible: false)
     end
   end
 
   step 'I should not see the comment preview button' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview-button", visible: false)
+      page.should have_css('.js-md-preview-button', visible: false)
     end
   end
 
@@ -81,19 +81,19 @@ module SharedNote
 
   step 'I should see the comment edit button' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-write-button", visible: true)
+      page.should have_css('.js-md-write-button', visible: true)
     end
   end
 
   step 'I should see the comment preview' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview", visible: true)
+      page.should have_css('.js-md-preview', visible: true)
     end
   end
 
   step 'I should see the comment preview button' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview-button", visible: true)
+      page.should have_css('.js-md-preview-button', visible: true)
     end
   end
 
diff --git a/spec/features/notes_on_merge_requests_spec.rb b/spec/features/notes_on_merge_requests_spec.rb
index 92f3a6c0929..bf3c12012e5 100644
--- a/spec/features/notes_on_merge_requests_spec.rb
+++ b/spec/features/notes_on_merge_requests_spec.rb
@@ -20,7 +20,7 @@ describe 'Comments' do
         should have_css(".js-main-target-form", visible: true, count: 1)
         find(".js-main-target-form input[type=submit]").value.should == "Add Comment"
         within(".js-main-target-form") { should_not have_link("Cancel") }
-        within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: false) }
+        within('.js-main-target-form') { should have_css('.js-md-preview-button', visible: false) }
       end
 
       describe "with text" do
@@ -32,7 +32,7 @@ describe 'Comments' do
 
         it 'should have enable submit button and preview button' do
           within(".js-main-target-form") { should_not have_css(".js-comment-button[disabled]") }
-          within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: true) }
+          within('.js-main-target-form') { should have_css('.js-md-preview-button', visible: true) }
         end
       end
     end
@@ -41,7 +41,7 @@ describe 'Comments' do
       before do
         within(".js-main-target-form") do
           fill_in "note[note]", with: "This is awsome!"
-          find(".js-note-preview-button").trigger("click")
+          find('.js-md-preview-button').trigger('click')
           click_button "Add Comment"
         end
       end
@@ -49,7 +49,7 @@ describe 'Comments' do
       it 'should be added and form reset' do
         should have_content("This is awsome!")
         within(".js-main-target-form") { should have_no_field("note[note]", with: "This is awesome!") }
-        within(".js-main-target-form") { should have_css(".js-note-preview", visible: false) }
+        within('.js-main-target-form') { should have_css('.js-md-preview', visible: false) }
         within(".js-main-target-form") { should have_css(".js-note-text", visible: true) }
       end
     end
@@ -172,11 +172,11 @@ describe 'Comments' do
           # add two separate texts and trigger previews on both
           within("tr[id='#{line_code}'] + .js-temp-notes-holder") do
             fill_in "note[note]", with: "One comment on line 7"
-            find(".js-note-preview-button").trigger("click")
+            find('.js-md-preview-button').trigger('click')
           end
           within("tr[id='#{line_code_2}'] + .js-temp-notes-holder") do
             fill_in "note[note]", with: "Another comment on line 10"
-            find(".js-note-preview-button").trigger("click")
+            find('.js-md-preview-button').trigger('click')
           end
         end
       end
diff --git a/spec/routing/project_routing_spec.rb b/spec/routing/project_routing_spec.rb
index 4b2eb42c709..112082d8890 100644
--- a/spec/routing/project_routing_spec.rb
+++ b/spec/routing/project_routing_spec.rb
@@ -53,14 +53,15 @@ shared_examples "RESTful project resources" do
   end
 end
 
-#      projects POST   /projects(.:format)     projects#create
-#   new_project GET    /projects/new(.:format) projects#new
-#  fork_project POST   /:id/fork(.:format)     projects#fork
-# files_project GET    /:id/files(.:format)    projects#files
-#  edit_project GET    /:id/edit(.:format)     projects#edit
-#       project GET    /:id(.:format)          projects#show
-#               PUT    /:id(.:format)          projects#update
-#               DELETE /:id(.:format)          projects#destroy
+#                 projects POST   /projects(.:format)     projects#create
+#              new_project GET    /projects/new(.:format) projects#new
+#             fork_project POST   /:id/fork(.:format)     projects#fork
+#            files_project GET    /:id/files(.:format)    projects#files
+#             edit_project GET    /:id/edit(.:format)     projects#edit
+#                  project GET    /:id(.:format)          projects#show
+#                          PUT    /:id(.:format)          projects#update
+#                          DELETE /:id(.:format)          projects#destroy
+# markdown_preview_project POST   /:id/markdown_preview(.:format) projects#markdown_preview
 describe ProjectsController, "routing" do
   it "to #create" do
     post("/projects").should route_to('projects#create')
@@ -93,6 +94,12 @@ describe ProjectsController, "routing" do
   it "to #destroy" do
     delete("/gitlab/gitlabhq").should route_to('projects#destroy', id: 'gitlab/gitlabhq')
   end
+
+  it 'to #markdown_preview' do
+    post('/gitlab/gitlabhq/markdown_preview').should(
+      route_to('projects#markdown_preview', id: 'gitlab/gitlabhq')
+    )
+  end
 end
 
 #  pages_project_wikis GET    /:project_id/wikis/pages(.:format)       projects/wikis#pages
@@ -392,15 +399,10 @@ describe Projects::IssuesController, "routing" do
   end
 end
 
-# preview_project_notes POST   /:project_id/notes/preview(.:format) notes#preview
 #         project_notes GET    /:project_id/notes(.:format)         notes#index
 #                       POST   /:project_id/notes(.:format)         notes#create
 #          project_note DELETE /:project_id/notes/:id(.:format)     notes#destroy
 describe Projects::NotesController, "routing" do
-  it "to #preview" do
-    post("/gitlab/gitlabhq/notes/preview").should route_to('projects/notes#preview', project_id: 'gitlab/gitlabhq')
-  end
-
   it_behaves_like "RESTful project resources" do
     let(:actions)    { [:index, :create, :destroy] }
     let(:controller) { 'notes' }