AO3-1173 We need a comment preview

app/views/comments/_comment_form.html.erb

@@ -102,6 +102,7 @@
             maximum_length: ArchiveConfig.COMMENT_MAX,
             tooLongMessage: t(".comment_too_long", count: ArchiveConfig.COMMENT_MAX) %>
       <p class="submit actions">
+          <%= f.submit t(".preview_button"), name: "preview_button", id: "comment_preview_for_#{commentable.id}" %>
           <%= f.submit button_name, id: "comment_submit_for_#{commentable.id}", data: { disable_with: t(".processing_message") } %>
           <% if controller.controller_name == 'inbox' %>
             <a name="comment_cancel" id="comment_cancel"><%= t(".cancel_action") %></a>

app/views/comments/preview.html.erb

@@ -0,0 +1,76 @@
+<h2 class="heading"><%= t(".page_heading") %></h2>
+<p><%= t(".commenting_on_html", commentable_link: link_to_comment_ultimate_parent(@comment)) %></p>
+
+<!--main content-->
+<div id="previewpane">
+  <ol class="thread">
+    <li class="<%= cycle :odd, :even %> <%= css_classes_for_comment(@comment) %> preview" id="comment_preview" role="article">
+      <h4 class="heading byline">
+        <% if @comment.by_anonymous_creator? %>
+          <%= t(".anonymous_creator") %>
+        <% else %>
+          <%= get_commenter_pseud_or_name(@comment) %>
+        <% end %>
+        <span class="posted datetime">
+          <%= time_in_zone(Time.current) %>
+        </span>
+      </h4>
+      <div class="icon">
+        <% if @comment.pseud %>
+          <% if @comment.by_anonymous_creator? %>
+            <span class="anonymous icon"></span>
+          <% else %>
+            <%= icon_display(@comment.pseud.user, @comment.pseud) %>
+          <% end %>
+        <% else %>
+          <span class="visitor icon"></span>
+        <% end %>
+      </div>
+      <blockquote class="userstuff">
+        <%= raw sanitize_field(@comment, :comment_content) %>
+      </blockquote>
+    </li>
+  </ol>
+</div>
+<!--/content-->
+
+<!--action buttons-->
+<ul class="actions right">
+  <%= form_with url: draft_comments_path, method: :post, local: true do |f| %>
+    <% @form_state.each do |key, value| %>
+      <% if value.is_a?(Hash) %>
+        <% value.each do |sub_key, sub_value| %>
+          <%= hidden_field_tag "#{key}[#{sub_key}]", sub_value %>
+        <% end %>
+      <% else %>
+        <%= f.hidden_field key, name: key, value: value %>
+      <% end %>
+    <% end %>
+    <%= f.submit t(".back_to_edit"), class: "button" %>
+  <% end %>
+
+  <%= form_for @comment, url: comments_path, method: :post, local: true, html: { id: "post_comment_from_preview" } do |f| %>
+    <%= f.hidden_field :comment_content %>
+
+    <% if @comment.pseud_id %>
+      <%= f.hidden_field :pseud_id %>
+    <% elsif @comment.name %>
+      <%= f.hidden_field :name %>
+      <%= f.hidden_field :email %>
+    <% end %>
+
+    <% @form_state.each do |key, value| %>
+      <% next if key.in?([:comment_content, :pseud_id, :name, :email]) %>
+      <% if value.is_a?(Hash) %>
+        <% value.each do |sub_key, sub_value| %>
+          <%= hidden_field_tag "#{key}[#{sub_key}]", sub_value %>
+        <% end %>
+      <% else %>
+        <%= hidden_field_tag key, value %>
+      <% end %>
+    <% end %>
+
+    <%= f.submit t(".post_comment"), class: "button submit" %>
+  <% end %>
+</ul>
+<!--/actions-->

config/locales/controllers/en.yml

@@ -159,9 +159,6 @@ en:
       draft: Sorry, you can't comment on a draft.
     check_not_replying_to_spam:
       error: Sorry, you can't reply to a comment that has been marked as spam.
-    check_permission_to_edit:
-      error:
-        frozen: Frozen comments cannot be edited.
     create:
       success:
         moderated:

config/locales/views/en.yml

@@ -847,6 +847,20 @@ en:
       tags: Tags
       works: Works (%{count})
   comments:
+    check_permission_to_access_single_unreviewed:
+      error: Sorry, that comment is currently in moderation.
+    check_permission_to_edit:
+      error:
+        frozen: This comment is frozen.
+        has_replies: Comments with replies cannot be edited
+    check_permission_to_moderate:
+      error: Sorry, you don't have permission to moderate that comment.
+    check_permission_to_review:
+      error: Sorry, you don't have permission to see those unreviewed comments.
+    check_pseud_ownership:
+      error: You can't comment with that pseud.
+    check_unreviewed:
+      error: Sorry, you cannot reply to an unapproved comment.
     comment_actions:
       approve: Approve
       comment: Comment
@@ -874,6 +888,7 @@ en:
         comment: Comment
         note: Note
       legend: Post Comment
+      preview_button: Preview
       processing_message: Please wait...
     commentable:
       actions:
@@ -915,11 +930,29 @@ en:
     confirm_delete:
       confirm_button: Yes, delete!
       delete_confirmation: Are you sure you want to delete this comment?
+    create:
+      error: Couldn't save comment!
+      missing_commentable: What did you want to comment on?
+    destroy:
+      error: We couldn't delete that comment.
+      success: Comment deleted.
     edit:
       back: Back
       page_heading: Editing comment
       show: Show
       update: Update
+    new:
+      missing_commentable: What did you want to comment on?
+      previous_comment: Previous Comment
+    preview:
+      anonymous_creator: Anonymous Creator
+      back_to_edit: Back to Edit
+      commenting_on_html: 'Commenting on: %{commentable_link}'
+      missing_commentable: What did you want to comment on?
+      page_heading: Preview Comment
+      post_comment: Post Comment
+    review:
+      success: Comment approved.
     show:
       comment_on_html: Comment on %{commentable_link}
     single_comment:
@@ -931,6 +964,8 @@ en:
         admin_post: Please note that comments cannot be unapproved once you have approved them. After you delete any comments you do not wish to appear on the news post, you can approve all that remain.
         work: Please note that comments cannot be unapproved once you have reviewed them. After you delete any comments you do not wish to appear on your work, you can approve all that remain.
       page_heading_html: Unreviewed Comments on %{commentable_link}
+    update:
+      success: Comment was successfully updated.
   downloads:
     download_afterword:
       afterword: Afterword

config/routes.rb

@@ -578,6 +578,8 @@
       put :unhide
     end
     collection do
+      post :preview
+      post :draft
       get :hide_comments
       get :show_comments
       get :add_comment_reply

features/comments_and_kudos/add_comment.feature

@@ -457,3 +457,80 @@ Scenario: Guest comments with an email from a banned or suspended user should be
       And the email to "creator" should contain "edited their reply to your comment on"
       And the email to "creator" should contain "Go to the thread starting from this comment"
       And the email to "creator" should be translated
+
+Scenario: Comment preview
+  Given the work "The One Where Neal is Awesome"
+  When I am logged in as "commenter"
+    And I view the work "The One Where Neal is Awesome"
+    And I fill in "Comment" with "This is my test comment with <b>bold text</b>"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+    And I should see "Commenting on: The One Where Neal is Awesome"
+    And I should see "This is my test comment with bold text"
+    And I should see "commenter" in the comment byline
+    And I should see a button "Back to Edit"
+    And I should see a button "Post Comment"
+
+Scenario: Comment preview persists content when going back to edit
+  Given the work "The One Where Neal is Awesome"
+  When I am logged in as "commenter"
+    And I view the work "The One Where Neal is Awesome"
+    And I fill in "Comment" with "Initial comment content"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+  When I press "Back to Edit"
+  Then I should see "Initial comment content" in the comment field
+    And I should see the "Preview" button
+  When I fill in "Comment" with "Initial comment content with more text"
+    And I press "Preview"
+  Then I should see "Initial comment content with more text"
+  When I press "Back to Edit"
+  Then I should see "Initial comment content with more text" in the comment field
+
+Scenario: Comment preview and post
+  Given the work "The One Where Neal is Awesome"
+  When I am logged in as "commenter"
+    And I view the work "The One Where Neal is Awesome"
+    And I fill in "Comment" with "I really enjoyed this!"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+    And I should see "I really enjoyed this!"
+  When I press "Post Comment"
+  Then I should see "Comment created!"
+    And I should see "I really enjoyed this!" within ".odd"
+
+Scenario: Comment preview shows sanitized HTML
+  Given the work "The One Where Neal is Awesome"
+  When I am logged in as "commenter"
+    And I view the work "The One Where Neal is Awesome"
+    And I fill in "Comment" with "Safe HTML: <b>bold</b>, <i>italic</i>, <p>paragraph</p>"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+    And I should see "bold"
+    And I should see "italic"
+    And I should see "paragraph"
+
+Scenario: Guest comment preview
+  Given the work "The One Where Neal is Awesome" by "creator" with guest comments enabled
+  When I view the work "The One Where Neal is Awesome"
+    And I fill in "Guest name" with "Guest User"
+    And I fill in "Guest email" with "guest@example.com"
+    And I fill in "Comment" with "Great work!"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+    And I should see "Guest User" in the comment byline
+    And I should see "Great work!"
+    And I should see a button "Back to Edit"
+  When I press "Back to Edit"
+  Then I should see "Great work!" in the comment field
+    And I should see "Guest User" in the guest name field
+
+Scenario: Comment preview for anonymous work
+  Given there is a work "The One Where Neal is Awesome" in an anonymous collection "Anonymous Hugs"
+  When I am logged in as the author of "The One Where Neal is Awesome"
+    And I view the work "The One Where Neal is Awesome"
+    And I fill in "Comment" with "Anonymous work comment"
+    And I press "Preview"
+  Then I should see "Preview Comment"
+    And I should see "Anonymous Creator" in the comment byline
+    And I should see "Anonymous work comment"

features/step_definitions/comment_steps.rb

@@ -410,3 +410,23 @@
 When "I reply on a new page" do
   visit find(:link, "Reply")["href"]
 end
+
+Then "I should see {string} in the comment byline" do |text|
+  step %{I should see "#{text}" within ".byline"}
+end
+
+Then "I should see a button {string}" do |text|
+  expect(page).to have_button(text)
+end
+
+Then "I should see {string} in the comment field" do |text|
+  expect(find('textarea[name="comment[comment_content]"]').value).to include(text)
+end
+
+Then "I should see the {string} button" do |text|
+  expect(page).to have_button(text)
+end
+
+Then "I should see {string} in the guest name field" do |text|
+  expect(find('input[name="comment[name]"]').value).to eq(text)
+end

public/stylesheets/site/2.0/08-actions.css

@@ -60,7 +60,7 @@ input[type="submit"] {
   white-space: normal;
 }
 
-p.submit, input.submit, dd.submit {
+p.submit, input.submit, dd.submit, ul.actions.right {
   text-align: right;
 }