From 6b17452bd51db903dc98a982a36a90fc2e187de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Fri, 10 Jul 2020 17:28:41 +0200
Subject: [PATCH] Fix "Publish comment" button when restoring a page from
 browser cache

We need to use page body event delegation so it will work with any
element even with the ones added through ajax, in this case the
annotation comments box form. By doing this way we do not need
this code on the server response anymore.

Furthermore JS events defined at ajax responses are not part of
application javascript and are lost when restoring a page from
browser cache, you can try to apply the same event delegation
technique to the `erb` file and it wont work just because events
added dinamically are not treated the same than `application.js`
code.

To reproduce the error:

  1. Load an annotatable draft version
  2. Move to any other page
  3. Go back

Now "Publish comment" button wont work.
---
 .../javascripts/legislation_annotatable.js    | 11 ++++++++++
 .../annotations/_comments_box.html.erb        |  2 +-
 .../annotations/_comments_box_form.js.erb     | 10 ---------
 .../system/legislation/draft_versions_spec.rb | 22 +++++++++++++++++++
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/legislation_annotatable.js b/app/assets/javascripts/legislation_annotatable.js
index 9ab0f6d6e..1b0c91ca7 100644
--- a/app/assets/javascripts/legislation_annotatable.js
+++ b/app/assets/javascripts/legislation_annotatable.js
@@ -186,6 +186,15 @@
         }
       };
     },
+    initCommentFormToggler: function() {
+      $("body").on("click", ".comment-box a.publish-comment", function(e) {
+        e.preventDefault();
+        var annotation_id = $(this).closest(".comment-box").data("id");
+        $("a.publish-comment").hide();
+        $("#js-comment-form-annotation-" + annotation_id).toggle();
+        $("#js-comment-form-annotation-" + annotation_id + " textarea").trigger("focus");
+      });
+    },
     initialize: function() {
       var current_user_id;
       $("body").on("renderLegislationAnnotation", App.LegislationAnnotatable.renderAnnotationComments);
@@ -226,6 +235,8 @@
           });
         });
       });
+
+      App.LegislationAnnotatable.initCommentFormToggler();
     },
     destroy: function() {
       if ($(".legislation-annotatable").length > 0) {
diff --git a/app/views/legislation/annotations/_comments_box.html.erb b/app/views/legislation/annotations/_comments_box.html.erb
index c1d1f24fd..6d5661622 100644
--- a/app/views/legislation/annotations/_comments_box.html.erb
+++ b/app/views/legislation/annotations/_comments_box.html.erb
@@ -1,4 +1,4 @@
-<div class="comment-box" id="comments-box-<%= annotation.id %>">
+<div class="comment-box" id="comments-box-<%= annotation.id %>" data-id="<%= annotation.id %>">
   <div class="comment-header">
     <%= render "comment_header", annotation: annotation %>
   </div>
diff --git a/app/views/legislation/annotations/_comments_box_form.js.erb b/app/views/legislation/annotations/_comments_box_form.js.erb
index b460b32b0..fbfce4c33 100644
--- a/app/views/legislation/annotations/_comments_box_form.js.erb
+++ b/app/views/legislation/annotations/_comments_box_form.js.erb
@@ -1,13 +1,3 @@
-$("#comments-box-<%= annotation.id %> a.publish-comment").on({
-  click: function(e) {
-    e.preventDefault();
-    $("a.publish-comment").hide();
-    $("#js-comment-form-annotation-<%= annotation.id %>").toggle();
-    $("#js-comment-form-annotation-<%= annotation.id %> textarea").focus();
-    return;
-  }
-});
-
 <% if comment.errors.any? %>
   $("#comments-box-<%= @annotation.id %> a.publish-comment").hide();
   $("#js-comment-form-annotation-<%= annotation.id %>").toggle();
diff --git a/spec/system/legislation/draft_versions_spec.rb b/spec/system/legislation/draft_versions_spec.rb
index f2914b7d1..a2b4ff259 100644
--- a/spec/system/legislation/draft_versions_spec.rb
+++ b/spec/system/legislation/draft_versions_spec.rb
@@ -254,6 +254,28 @@ describe "Legislation Draft Versions" do
       expect(page).to have_content "A collaborative legislation process"
       expect(page).to have_css(".annotator-hl", count: 1)
     end
+
+    scenario "When page is restored from browser cache publish comment button keeps working" do
+      create(:legislation_annotation, draft_version: draft_version, text: "my annotation")
+
+      visit legislation_process_draft_version_path(draft_version.process, draft_version)
+
+      find(:css, ".annotator-hl").click
+
+      click_link "Help"
+
+      expect(page).to have_content "CONSUL is a platform for citizen participation"
+
+      go_back
+
+      expect(page).to have_content "A collaborative legislation process"
+
+      click_link "Publish Comment"
+      fill_in "comment[body]", with: "My interesting comment"
+      click_button "Publish comment"
+
+      expect(page).to have_content "My interesting comment"
+    end
   end
 
   context "Merged annotations", :js do