WIP

os-autoinst · Sep 23, 2024 · 75eb82a · 75eb82a
1 parent 6a9e222
commit 75eb82a
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 52 deletions.
diff --git a/assets/assetpack.def b/assets/assetpack.def
@@ -119,6 +119,9 @@
 < javascripts/needleeditor.js
 < javascripts/shapes.js
 
+! htmx.js
+< ../node_modules/htmx.org/dist/htmx.min.js
+
 ! bootstrap.js
 < ../node_modules/jquery/dist/jquery.min.js
 < javascripts/openqa.js

diff --git a/assets/javascripts/comments.js b/assets/javascripts/comments.js
@@ -38,29 +38,29 @@ function showXhrError(context, jqXHR, textStatus, errorThrown) {
   window.alert(context + getXhrError(jqXHR, textStatus, errorThrown));
 }
 
-function updateNumerOfComments() {
+function updateNumberOfComments() {
   const commentsLink = document.querySelector('a[href="#comments"]');
   if (commentsLink) {
     const linkText = 'Comments (' + document.getElementsByClassName('comment-row').length + ')';
     commentsLink.innerHTML = linkText;
   }
 }
 
-function deleteComment(deleteButton) {
-  const author = deleteButton.dataset.author;
-  if (!window.confirm('Do you really want to delete the comment written by ' + author + '?')) {
-    return;
-  }
-  $.ajax({
-    url: deleteButton.dataset.deleteUrl,
-    method: 'DELETE',
-    success: () => {
-      $(deleteButton).parents('.comment-row, .pinned-comment-row').remove();
-      updateNumerOfComments();
-    },
-    error: showXhrError.bind(undefined, "The comment couldn't be deleted: ")
-  });
-}
+//function deleteComment(deleteButton) {
+//  const author = deleteButton.dataset.author;
+//  if (!window.confirm('Do you really want to delete the comment written by ' + author + '?')) {
+//    return;
+//  }
+//  $.ajax({
+//    url: deleteButton.dataset.deleteUrl,
+//    method: 'DELETE',
+//    success: () => {
+//      $(deleteButton).parents('.comment-row, .pinned-comment-row').remove();
+//      updateNumberOfComments();
+//    },
+//    error: showXhrError.bind(undefined, "The comment couldn't be deleted: ")
+//  });
+//}
 
 function updateComment(form) {
   const textElement = form.text;
@@ -135,7 +135,7 @@ function addComment(form, insertAtBottom) {
           nextElement.parentNode.insertBefore(commentRow, nextElement);
           $('html, body').animate({scrollTop: commentRow.offsetTop}, 1000);
           textElement.value = '';
-          updateNumerOfComments();
+          updateNumberOfComments();
         },
         error: () => location.reload()
       });
@@ -148,4 +148,21 @@ function insertTemplate(button) {
   const textarea = document.getElementById('text');
   const template = button.dataset.template;
   textarea.value += textarea.value ? '\n' + template : template;
+  throw new Error("DELETION ATTEMPT");
 }
+
+function getCSRFToken() {
+  const metaTag = document.querySelector('meta[name="csrf-token"]');
+  return metaTag ? metaTag.getAttribute('content') : '';
+}
+
+htmx.logger = function(elt, event, data) {
+    if(console) {
+        console.log(event, elt, data);
+    }
+}
+
+htmx.on('htmx:configRequest', function(event) {
+  event.detail.headers['X-CSRF-Token'] = getCSRFToken();
+});
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "dagre-d3": "^0.6.4",
     "datatables.net-bs5": "^2.1.6",
     "fork-awesome": "^1.2.0",
+    "htmx.org": "^2.0.2",
     "jquery": "^3.7.1",
     "jquery-ujs": "^1.2.3",
     "timeago": "^1.6.7"

diff --git a/t/ui/15-comments.t b/t/ui/15-comments.t
@@ -158,6 +158,7 @@ sub test_comment_editing {
     };
 
     subtest 'remove' => sub {
+
         # try to remove the first displayed comment (the one which has just been edited)
         $driver->find_element('button.remove-edit-button')->click();
 

diff --git a/templates/webapi/comments/comment_row.html.ep b/templates/webapi/comments/comment_row.html.ep
@@ -1,54 +1,63 @@
 % use OpenQA::Constants;
 
 % if (!$context->{pinned}) {
-    <div class="row comment-row">
+    <div class="row comment-row comment-container">
         <div class="col-sm-1">
             <img class="media-object img-circle" src="<%= $user->gravatar(60) %>" alt="profile" title="<%= $user->name %>">
         </div>
     <div class="col-sm-11">
 % }
 % else {
-    <div class="row pinned-comment-row">
+    <meta name="csrf-token" content="<%= csrf_token %>">
+    <div class="row pinned-comment-row comment-container">
         <div class="col-sm-12">
 % }
         <div class="media-body comment-body" id="comment-<%= $comment_id %>">
             <div class="well well-lg">
                 <form onsubmit="updateComment(this); return false;" onreset="hideCommentEditor(this); return true;" data-put-url="<%= url_for($put_action => ($context->{type}.'_id' => $context->{id}, comment_id => $comment_id)) %>">
                     % if (current_user && current_user->is_admin) {
-                        <button class="btn btn-danger btn-circle btn-sm remove-edit-button" type="button" name="removeComment" onclick="deleteComment(this);" data-author="<%= $user->name %>" data-delete-url="<%= url_for($delete_action => ($context->{type}.'_id' => $context->{id}, comment_id => $comment_id)) %>">
+                        <button class="btn btn-danger btn-circle btn-sm remove-edit-button"
+                                type="button"
+                                name="removeComment"
+                                data-author="<%= $user->name %>"
+                                hx-delete="<%= url_for($delete_action => ($context->{type}.'_id' => $context->{id}, comment_id => $comment_id)) %>"
+                                onclick="return confirm('Do you really want to delete the comment written by <%= $user->name %>?')"
+                                hx-target="closest .comment-container"
+                                hx-swap="delete"
+                                hx-on:htmx:afterSwap="updateNumberOfComments()">
                             <i class="fa fa-fw fa-trash"></i>
                         </button>
                     % }
-                    % if (current_user && (current_user->id eq $user->id)) {
-                        <button class="btn btn-primary btn-circle btn-sm trigger-edit-button" type="button" name="editComment" onclick="showCommentEditor(this.form);">
-                            <i class="fa fa-fw fa-pencil"></i>
-                        </button>
-                    % }
-                    <h4 class="media-heading">
-                        % if($comment) {
-                            <%= $user->name %> wrote
-                            <a href="#comment-<%= $comment_id %>" class="comment-anchor"><abbr class="timeago" title="<%= $comment->t_created->datetime() %>Z"><%= format_time($comment->t_created) %></abbr></a>
-                            % if ($comment->t_updated->subtract(seconds => OpenQA::Constants::DB_TIMESTAMP_ACCURACY) >= $comment->t_created) {
-                                (last edited <abbr class="timeago" title="<%= $comment->t_updated->datetime() %>Z"><%= format_time($comment->t_updated) %></abbr>)
-                            % }
-                        % }
-                    </h4>
-                    <div class="media-comment markdown">
-                        % if($comment) {
-                            %= $comment->rendered_markdown
-                        % }
-                    </div>
-                    % if (current_user && ((current_user->id eq $user->id))) {
-                        <textarea class="form-control comment-editing-control" name="text" rows="5"><%= $comment ? $comment->text : '' %></textarea>
-                        <button class="btn btn-success btn-circle comment-editing-control" type="submit" name="applyChanges">
-                            <i class="fa fa-check-circle"></i> Apply changes
-                        </button>
-                        <button class="btn btn-warning btn-circle comment-editing-control" type="reset" name="discardChanges">
-                            <i class="fa fa-trash"></i> Discard changes
-                        </button>
-                    % }
-                </form>
-            </div>
-        </div>
-    </div>
+                      % if (current_user && (current_user->id eq $user->id)) {
+                          <button class="btn btn-primary btn-circle btn-sm trigger-edit-button" type="button" name="editComment" onclick="showCommentEditor(this.form);">
+                              <i class="fa fa-fw fa-pencil"></i>
+                          </button>
+                      % }
+                      <h4 class="media-heading">
+                          % if($comment) {
+                              <%= $user->name %> wrote
+                              <a href="#comment-<%= $comment_id %>" class="comment-anchor"><abbr class="timeago" title="<%= $comment->t_created->datetime() %>Z"><%= format_time($comment->t_created) %></abbr></a>
+                              % if ($comment->t_updated->subtract(seconds => OpenQA::Constants::DB_TIMESTAMP_ACCURACY) >= $comment->t_created) {
+                                  (last edited <abbr class="timeago" title="<%= $comment->t_updated->datetime() %>Z"><%= format_time($comment->t_updated) %></abbr>)
+                              % }
+                          % }
+                      </h4>
+                      <div class="media-comment markdown">
+                          % if($comment) {
+                              %= $comment->rendered_markdown
+                      % }
+                  </div>
+                  % if (current_user && ((current_user->id eq $user->id))) {
+                      <textarea class="form-control comment-editing-control" name="text" rows="5"><%= $comment ? $comment->text : '' %></textarea>
+                      <button class="btn btn-success btn-circle comment-editing-control" type="submit" name="applyChanges">
+                          <i class="fa fa-check-circle"></i> Apply changes
+                      </button>
+                      <button class="btn btn-warning btn-circle comment-editing-control" type="reset" name="discardChanges">
+                          <i class="fa fa-trash"></i> Discard changes
+                      </button>
+                  % }
+              </form>
+          </div>
+      </div>
+  </div>
 </div>