From a16bede398a6151f1d4c1c8c28d7f03de5bfd94e Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Nov 12 2018 08:29:12 +0000
Subject: Fix rendering comment added via JS (ajax or SSE)


Basically the HTML generated in the JS wasn't in synced with the html
used by the regular templates.
This commit fixes that.

Fixes https://pagure.io/pagure/issue/3938

Signed-off-by: Pierre-Yves Chibon <pingou@pingoured.fr>

---

diff --git a/pagure/static/request_ev.js b/pagure/static/request_ev.js
index 062c5c6..7c39e6d 100644
--- a/pagure/static/request_ev.js
+++ b/pagure/static/request_ev.js
@@ -33,24 +33,22 @@ add_comment = function(data, username) {
 
   } else {
     var _csrf = $('#csrf_token').clone();
-    var _data ='<div class="card clearfix">'
-    + '  <div class="card-header bg-light d-flex align-items-center px-3 py-2">'
+    var _data =
+      '<div class="card mb-4 clearfix">'
+    + '  <div id="comment-' + data.comment_id + '" class="card-header bg-light d-flex align-items-center px-3 py-2">'
     + '    <div>'
-    + '      <div id="comment-' + data.comment_id + '">'
-    + '        <img class="avatar circle" src="' + data.avatar_url + '"/>'
-    + '        <a href="/user/' + data.comment_user + '"'
-    + '            class="notblue font-weight-bold">'+data.comment_user+'</a>'
-    + '        commented'
-    + '        <a class="notblue" title="Permalink to this headline"'
-    + '           href="#comment-' + data.comment_id + '">'
-    + '          <span> seconds ago</span>'
-    + '        </a>'
-    + '      </div>'
+    + '      <img class="avatar circle" src="' + data.avatar_url + '"/>'
+    + '      <a href="/user/' + data.comment_user + '"'
+    + '        class="notblue font-weight-bold">'+data.comment_user+'</a>'
+    + '      <a class="notblue" title="Permalink to this headline"'
+    + '          href="#comment-' + data.comment_id + '">'
+    + '        <span>commented seconds ago</span>'
+    + '      </a>'
     + '    </div>';
 
     if ( data.comment_user == username && data.comment_id !== 'undefined') {
         _data = _data
-    + '    <div class="mr-auto">'
+    + '    <div class="issue_actions ml-auto">'
     + '      <a href="/' + data.project + '/pull-request/' + data.request_id + '/comment/' + data.comment_id + '/edit"'
     + '         class="btn btn-outline-primary border-0" data-comment="' + data.comment_id + '" data-objid="' + data.request_id + '">'
     + '        <i class="fa fa-pencil"  title="Edit comment"></i>'
@@ -64,11 +62,13 @@ add_comment = function(data, username) {
 
     _data = _data
     + '  </div>'
-    + '  <div class="card-block">'
-    + '    <small></small>'
+    + '  <div class="card-body pb-1">'
     + '    <section class="issue_comment">'
-    + '      <div class="comment_body">'
+    + '      <div>'
+    + '        <span class="edit_date" title=""></span>'
+    + '        <span class="comment_text comment_body">'
     + emojione.toImage(data.comment_added)
+    + '        </span>'
     + '      </div>'
     + '    </section>'
     + '  </div>'
diff --git a/pagure/templates/repo_pull_request.html b/pagure/templates/repo_pull_request.html
index 9fac1a3..78f5358 100644
--- a/pagure/templates/repo_pull_request.html
+++ b/pagure/templates/repo_pull_request.html
@@ -378,14 +378,14 @@
     <div class="row">
     <div class="col-md-8">
     {{ show_pr_initial_comment(pull_request, repo, form, username) }}
-    <section class="request_comment" id="request_comment">
+    <section class="request_comment" >
     {% if pull_request.comments %}
       <form action="{{ url_for('ui_ns.pull_request_drop_comment',
             repo=repo.name,
             username=username,
             namespace=repo.namespace,
             requestid=requestid)
-          }}" method="post"
+          }}" method="post" id="request_comment"
           onsubmit="return try_async_comment(this, null)">
 
       {% for comment in pull_request.comments %}