diff --git a/assets/assetpack.def b/assets/assetpack.def index 41dcab1af23..133b3ef2a9a 100644 --- 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 index 8121045f8f3..16ea59efdfd 100644 --- a/assets/javascripts/comments.js +++ b/assets/javascripts/comments.js @@ -38,7 +38,7 @@ 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 + ')'; @@ -46,21 +46,21 @@ function updateNumerOfComments() { } } -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 index b56d672f43b..fe708ca2ec4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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" @@ -1202,6 +1203,11 @@ "node": ">=8" } }, + "node_modules/htmx.org": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.2.tgz", + "integrity": "sha512-eUPIpQaWKKstX393XNCRCMJTrqPzikh36Y9RceqsUZLTtlFjFaVDgwZLUsrFk8J2uzZxkkfiy0TE359j2eN6hA==" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", diff --git a/package.json b/package.json index 4d4637099eb..b16b6629433 100644 --- 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 index 70be2af5299..e7331d17604 100644 --- 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 index d9d8e76c1b7..0101aa028b6 100644 --- 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}) { -
+
profile
% } % else { -
+ +
% }
% if (current_user && current_user->is_admin) { - % } - % if (current_user && (current_user->id eq $user->id)) { - - % } -

- % if($comment) { - <%= $user->name %> wrote - <%= format_time($comment->t_created) %> - % if ($comment->t_updated->subtract(seconds => OpenQA::Constants::DB_TIMESTAMP_ACCURACY) >= $comment->t_created) { - (last edited <%= format_time($comment->t_updated) %>) - % } - % } -

-
- % if($comment) { - %= $comment->rendered_markdown - % } -
- % if (current_user && ((current_user->id eq $user->id))) { - - - - % } -
-
-
-
+ % if (current_user && (current_user->id eq $user->id)) { + + % } +

+ % if($comment) { + <%= $user->name %> wrote + <%= format_time($comment->t_created) %> + % if ($comment->t_updated->subtract(seconds => OpenQA::Constants::DB_TIMESTAMP_ACCURACY) >= $comment->t_created) { + (last edited <%= format_time($comment->t_updated) %>) + % } + % } +

+
+ % if($comment) { + %= $comment->rendered_markdown + % } +
+ % if (current_user && ((current_user->id eq $user->id))) { + + + + % } + +
+
+