decidim-comments 0.24.2 → 0.25.0.rc3

data/app/{assets/javascripts → packs/src}/decidim/comments/comments.component.test.js

@@ -1,5 +1,6 @@
 /* eslint-disable id-length, max-lines */
 /* global spyOn, jest */
+
 const $ = require("jquery");
 
 // Ability to spy on the jQuery methods inside the component in order to test
@@ -9,19 +10,26 @@ window.$ = jest.fn().mockImplementation((...args) => $(...args));
 window.$.ajax = jest.fn().mockImplementation((...args) => $.ajax(...args));
 
 // Quill is expected by the input character counter
-window.Quill = require("../../../../../../decidim-core/vendor/assets/javascripts/quill.min.js");
+import Quill from "quill"
+window.Quill = Quill
 
 // Fake timers for testing polling
 jest.useFakeTimers();
 
-require("../../../../../../decidim-core/app/assets/javascripts/decidim/input_character_counter.js.es6");
-require("./comments.component.js.es6");
+import { createCharacterCounter } from "../../../../../../decidim-core/app/packs/src/decidim/input_character_counter";
+import Configuration from "../../../../../../decidim-core/app/packs/src/decidim/configuration";
+// Component is loaded with require because using import loads it before $ has been mocked
+// so tests aren't able to check the spied behaviours
+const CommentsComponent = require("./comments.component_for_testing.js");
 
-const { Decidim: { CommentsComponent, createCharacterCounter } } = window;
 
 // Create a dummy foundation jQuery method for the comments component to call
 $.fn.foundation = () => {};
 
+// Create the configuration object to make the configurations available for the tests
+window.Decidim = {}
+window.Decidim.config = new Configuration()
+
 describe("CommentsComponent", () => {
   const selector = "#comments-for-Dummy-123";
   let subject = null;
@@ -163,18 +171,18 @@ describe("CommentsComponent", () => {
             </div>
             <div class="author-data__extra">
                 <button type="button" class="link-alt" data-open="flagModalComment${commentId}" title="Report inappropriate content" aria-controls="flagModalComment${commentId}" aria-haspopup="true" tabindex="0">
-                  <svg role="none presentation" aria-hidden="true" class="icon--flag icon icon--small">
+                  <svg role="img" aria-hidden="true" class="icon--flag icon icon--small">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-flag"></use>
+                    <use href="/assets/decidim/icons-123.svg#icon-flag"></use>
                   </svg>
                   <span class="show-for-sr">Report inappropriate content</span>
                 </button>
 
                 <a title="Get link to single comment" href="/path/to/dummy/123?commentId=${commentId}#comment_${commentId}">
                   <span class="show-for-sr">Get link to single comment</span>
-                  <svg role="none presentation" class="icon--link-intact icon icon--small">
+                  <svg role="img" aria-hidden="true" class="icon--link-intact icon icon--small">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-link-intact"></use>
+                    <use href="/assets/decidim/icons-123.svg#icon-link-intact"></use>
                   </svg>
                 </a>
             </div>
@@ -186,9 +194,9 @@ describe("CommentsComponent", () => {
         <div class="comment__footer">
             <div class="comment__actions">
               <button class="comment__reply muted-link" aria-controls="comment${commentId}-reply" data-toggle="comment${commentId}-reply" aria-expanded="true">
-                <svg role="none presentation" class="icon--pencil icon icon--small">
+                <svg role="img" aria-hidden="true" class="icon--pencil icon icon--small">
                   <title></title>
-                  <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-pencil"></use>
+                  <use href="/assets/decidim/icons-123.svg#icon-pencil"></use>
                 </svg>
                 &nbsp;Reply
               </button>
@@ -198,9 +206,9 @@ describe("CommentsComponent", () => {
               <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=1" data-remote="true">
                 <button class="comment__votes--up" title="I agree with this comment" type="submit">
                   <span class="show-for-sr">I agree with this comment</span>
-                  <svg role="none presentation" class="icon--chevron-top icon icon--small">
+                  <svg role="img" aria-hidden="true" class="icon--chevron-top icon icon--small">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-chevron-top"></use>
+                    <use href="/assets/decidim/icons-123.svg#icon-chevron-top"></use>
                   </svg>
                   <span class="comment__votes--count">0</span>
                 </button>
@@ -210,9 +218,9 @@ describe("CommentsComponent", () => {
               <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=-1" data-remote="true">
                 <button class="comment__votes--down" title="I disagree with this comment" type="submit">
                   <span class="show-for-sr">I disagree with this comment</span>
-                  <svg role="none presentation" class="icon--chevron-bottom icon icon--small">
+                  <svg role="img" aria-hidden="true" class="icon--chevron-bottom icon icon--small">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-chevron-bottom"></use>
+                    <use href="/assets/decidim/icons-123.svg#icon-chevron-bottom"></use>
                   </svg>
                   <span class="comment__votes--count">0</span>
                 </button>
@@ -224,9 +232,9 @@ describe("CommentsComponent", () => {
 
         <div class="comment__additionalreply hide">
           <button class="comment__reply muted-link" aria-controls="comment${commentId}-reply" data-toggle="comment${commentId}-reply" aria-expanded="true">
-            <svg role="none presentation" class="icon--pencil icon icon--small">
+            <svg role="img" aria-hidden="true" class="icon--pencil icon icon--small">
               <title></title>
-              <use role="none presentation" href="/assets/decidim/icons-123.svg#icon-pencil"></use>
+              <use href="/assets/decidim/icons-123.svg#icon-pencil"></use>
             </svg>
             &nbsp;Reply
           </button>
@@ -251,7 +259,7 @@ describe("CommentsComponent", () => {
 
   beforeEach(() => {
     let orderSelector = `
-      <ul class="dropdown menu" data-dropdown-menu="data-dropdown-menu" data-autoclose="false" data-disable-hover="true" data-click-open="true" data-close-on-click="true" tabindex="-1" role="menubar">
+      <ul id="comments-order-menu" class="dropdown menu" data-dropdown-menu="data-dropdown-menu" data-autoclose="false" data-disable-hover="true" data-click-open="true" data-close-on-click="true" tabindex="-1" role="menubar">
         <li class="is-dropdown-submenu-parent opens-right" tabindex="-1" role="none">
           <a href="#" id="comments-order-menu-control" aria-label="Order by:" aria-controls="comments-order-menu" aria-haspopup="true" role="menuitem">Older</a>
           <ul class="menu is-dropdown-submenu submenu first-sub vertical" id="comments-order-chooser-menu" role="menu" aria-labelledby="comments-order-menu-control" tabindex="-1" data-submenu="">
@@ -304,21 +312,24 @@ describe("CommentsComponent", () => {
               <h4 class="section-heading">Add your comment</h4>
 
               <div class="opinion-toggle button-group">
-                <button class="button tiny button--muted opinion-toggle--ok">
-                  <svg role="none presentation" class="icon--thumb-up icon">
+                <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ok" data-selected-label="Your opinion about this topic is positive">
+                  <svg role="img" aria-hidden="true" class="icon--thumb-up icon">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-up"></use>
+                    <use href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-up"></use>
                   </svg>
+                  <span class="show-for-sr">Positive</span>
                 </button>
-                <button class="button tiny button--muted opinion-toggle--meh is-active">
+                <button aria-pressed="true" class="button tiny button--muted opinion-toggle--meh is-active" data-selected-label="Your opinion about this topic is neutral">
                   Neutral
                 </button>
-                <button class="button tiny button--muted opinion-toggle--ko">
-                  <svg role="none presentation" class="icon--thumb-down icon">
+                <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ko" data-selected-label="Your opinion about this topic is negative">
+                  <svg role="img" aria-hidden="true" class="icon--thumb-down icon">
                     <title></title>
-                    <use role="none presentation" href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-down"></use>
+                    <use href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-down"></use>
                   </svg>
+                  <span class="show-for-sr">Negative</span>
                 </button>
+                <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state shot-for-sr"></div>
               </div>
 
               ${generateCommentForm("Dummy", 123)}
@@ -488,29 +499,43 @@ describe("CommentsComponent", () => {
     describe("opinion toggles", () => {
       let commentSection = null;
       let toggles = null;
+      let toggleContainer = null;
 
       beforeEach(() => {
         commentSection = addComment[addComment.length - 1];
         toggles = commentSection.opinionToggles;
+        toggleContainer = $(toggles[0]).parent();
       });
 
       it("adds the correct alignment on positive toggle", () => {
         $(toggles[0]).trigger("click");
 
+        expect($(toggles[0]).attr("aria-pressed")).toEqual("true");
+        expect($(toggles[1]).attr("aria-pressed")).toEqual("false");
+        expect($(toggles[2]).attr("aria-pressed")).toEqual("false");
         expect($(".alignment-input", commentSection).val()).toEqual("1");
+        expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is positive");
       });
 
       it("adds the correct alignment on neutral toggle", () => {
         $(toggles[0]).trigger("click");
         $(toggles[1]).trigger("click");
 
+        expect($(toggles[0]).attr("aria-pressed")).toEqual("false");
+        expect($(toggles[1]).attr("aria-pressed")).toEqual("true");
+        expect($(toggles[2]).attr("aria-pressed")).toEqual("false");
         expect($(".alignment-input", commentSection).val()).toEqual("0");
+        expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is neutral");
       });
 
       it("adds the correct alignment on negative toggle", () => {
         $(toggles[2]).trigger("click");
 
+        expect($(toggles[0]).attr("aria-pressed")).toEqual("false");
+        expect($(toggles[1]).attr("aria-pressed")).toEqual("false");
+        expect($(toggles[2]).attr("aria-pressed")).toEqual("true");
         expect($(".alignment-input", commentSection).val()).toEqual("-1");
+        expect($(".selected-state", toggleContainer).text()).toEqual("Your opinion about this topic is negative");
       });
     });
   });
@@ -533,17 +558,82 @@ describe("CommentsComponent", () => {
           "This is a dynamically added comment"
         ));
       });
+
+      it("does not clear the comment form text area", () => {
+        const commentSection = addComment[addComment.length - 1];
+        const textArea = $("textarea", commentSection);
+        textArea.val("I am writing a new comment...");
+
+        const newThread = generateCommentThread(999, "This is a dynamically added comment");
+        subject.addThread(newThread);
+
+        expect(textArea.val()).toEqual("I am writing a new comment...");
+      });
+
+      describe("as the current user", () => {
+        it("clears the comment form text area", () => {
+          const commentSection = addComment[addComment.length - 1];
+          const textArea = $("textarea", commentSection);
+          textArea.val("I am writing a new comment...");
+
+          const newThread = generateCommentThread(999, "This is a dynamically added comment");
+          subject.addThread(newThread, true);
+
+          expect(textArea.val()).toEqual("");
+        });
+      });
     });
 
     describe("addReply", () => {
+      const newReply = generateSingleComment(999, "This is a dynamically added reply");
+
       it("adds a new reply to an existing thread", () => {
-        const newThread = generateSingleComment(999, "This is a dynamically added reply");
-        subject.addReply(450, newThread);
+        subject.addReply(450, newReply);
 
         expect(subject.$element.html()).toEqual(expect.stringContaining(
           "This is a dynamically added reply"
         ));
       });
+
+      it("does not clear the reply comment form text area", () => {
+        const commentSection = $("#comment450-reply", subject.$element);
+        const textArea = $("textarea", commentSection);
+        textArea.val("I am writing a new comment...");
+
+        subject.addReply(450, newReply);
+
+        expect(textArea.val()).toEqual("I am writing a new comment...");
+      });
+
+      it("does not hide the reply form", () => {
+        const commentSection = $("#comment450-reply", subject.$element);
+        commentSection.removeClass("hide");
+
+        subject.addReply(450, newReply);
+
+        expect(commentSection.hasClass("hide")).toBeFalsy();
+      });
+
+      describe("as the current user", () => {
+        it("clears the comment form text area", () => {
+          const commentSection = $("#comment450-reply", subject.$element);
+          const textArea = $("textarea", commentSection);
+          textArea.val("I am writing a new comment...");
+
+          subject.addReply(450, newReply, true);
+
+          expect(textArea.val()).toEqual("");
+        });
+
+        it("hides the reply form", () => {
+          const commentSection = $("#comment450-reply", subject.$element);
+          commentSection.removeClass("hide");
+
+          subject.addReply(450, newReply, true);
+
+          expect(commentSection.hasClass("hide")).toBeTruthy();
+        });
+      });
     });
   });
 

data/app/packs/src/decidim/comments/comments.component_for_testing.js

@@ -0,0 +1,8 @@
+/* eslint no-undef: 0 */
+
+import CommentsComponent from "./comments.component"
+
+// This module.exports is necessary for the tests to load
+// doesn't conflict with import/export
+module.exports = CommentsComponent;
+

data/app/packs/src/decidim/comments/comments.js

@@ -0,0 +1 @@
+import "src/decidim/comments/comments.component"

data/app/permissions/decidim/comments/permissions.rb

@@ -11,6 +11,8 @@ module Decidim
           can_read_comments?
         when :create
           can_create_comment?
+        when :update, :destroy
+          can_update_comment?
         when :vote
           can_vote_comment?
         end
@@ -34,9 +36,16 @@ module Decidim
         allow!
       end
 
+      def can_update_comment?
+        return disallow! unless user
+        return disallow! unless comment.authored_by?(user)
+
+        allow!
+      end
+
       def can_vote_comment?
         return disallow! unless user
-        return disallow! unless commentable&.user_allowed_to_comment?(user)
+        return disallow! unless commentable&.user_allowed_to_vote_comment?(user)
 
         allow!
       end

data/app/queries/decidim/comments/metrics/comment_participants_metric_measure.rb

@@ -39,7 +39,7 @@ module Decidim
 
         def retrieve_comments_for_organization
           user_ids = Decidim::User.where(organization: @resource.organization).pluck(:id)
-          Decidim::Comments::Comment.includes(:root_commentable).not_hidden
+          Decidim::Comments::Comment.includes(:root_commentable).not_hidden.not_deleted
                                     .where("decidim_comments_comments.created_at <= ?", end_time)
                                     .where(decidim_comments_comments: { decidim_author_id: user_ids })
                                     .where(decidim_comments_comments: { decidim_author_type: "Decidim::UserBaseEntity" })

data/app/queries/decidim/comments/metrics/comments_metric_manage.rb

@@ -59,7 +59,7 @@ module Decidim
         def retrieve_comments
           user_ids = Decidim::User.select(:id).where(organization: @organization).collect(&:id)
           user_group_ids = Decidim::UserGroup.select(:id).where(organization: @organization).collect(&:id)
-          Decidim::Comments::Comment.includes(:root_commentable).not_hidden
+          Decidim::Comments::Comment.includes(:root_commentable).not_hidden.not_deleted
                                     .where("decidim_comments_comments.created_at <= ?", end_time)
                                     .where("decidim_comments_comments.decidim_author_id IN (?) OR
                                            decidim_comments_comments.decidim_user_group_id IN (?)", user_ids, user_group_ids)

data/app/queries/decidim/comments/sorted_comments.rb

@@ -33,12 +33,6 @@ module Decidim
         scope = base_scope
                 .not_hidden
                 .includes(:author, :user_group, :up_votes, :down_votes)
-        if @options[:after]
-          scope = scope.where(
-            "decidim_comments_comments.id > ?",
-            @options[:after]
-          )
-        end
 
         case @options[:order_by]
         when "older"
@@ -60,6 +54,14 @@ module Decidim
         id = @options[:id]
         return Comment.where(root_commentable: commentable, id: id) if id.present?
 
+        after = @options[:after]
+        if after.present?
+          return Comment.where(root_commentable: commentable).where(
+            "decidim_comments_comments.id > ?",
+            after
+          )
+        end
+
         Comment.where(commentable: commentable)
       end
 

data/app/views/decidim/comments/comments/_delete.html.erb

@@ -0,0 +1,5 @@
+<div class="comment__header">
+  <div class="comment__deleted">
+    <%= t("decidim.components.comment.deleted_at", date: l(comment.deleted_at, format: :decidim_short)) %>
+  </div>
+</div>

data/app/views/decidim/comments/comments/_edited_comment.html.erb

@@ -0,0 +1 @@
+<%= cell("decidim/comments/comment", comment, reloaded: true) %>

data/app/views/decidim/comments/comments/create.js.erb

@@ -6,11 +6,13 @@
   var $comments = $("#" + rootCommentableId);
   var component = $comments.data("comments");
   if (inReplyTo) {
-    component.addReply(inReplyTo, commentHtml);
+    component.addReply(inReplyTo, commentHtml, true);
   } else {
-    component.addThread(commentHtml);
+    component.addThread(commentHtml, true);
   }
 
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);
+
+  Decidim.addInputEmoji();
 }());

data/app/views/decidim/comments/comments/delete.js.erb

@@ -0,0 +1,17 @@
+$(() => {
+  const deleteDataHtml = '<%== j(render partial: "delete", locals: { comment: @comment }).strip %>';
+  const rootCommentableId = <%== "comments-for-#{@comment.root_commentable.commentable_type.demodulize}-#{@comment.root_commentable.id}".to_json %>;
+  const commentId = <%= @comment.id.to_json %>;
+  const $comment = $(`#comment_${commentId}`);
+  const $commentReply = $(`#comment${commentId}-reply`);
+  const $content = $("> .comment__content", $comment);
+  const sectionsToDelete = ["header", "footer", "additionalreply"];
+
+  sectionsToDelete.forEach((section) => {
+    $(`> .comment__${section}`, $comment).remove();
+  });
+  $commentReply.remove();
+  $content.replaceWith(deleteDataHtml);
+
+  $(".comments-count", $(`#${rootCommentableId}`)).text(<%== t("decidim.components.comments.title", count: @comment.root_commentable.comments_count).to_json %>);
+});

data/app/views/decidim/comments/comments/deletion_error.js.erb

@@ -0,0 +1 @@
+alert("<%== t("decidim.comments.comments.delete.error") %>");

data/app/views/decidim/comments/comments/reload.js.erb

@@ -18,4 +18,6 @@
 
   // Update the comments count
   $(".comments-count", $comments).text(<%== t("decidim.components.comments.title", count: @comments_count).to_json %>);
+
+  Decidim.addInputEmoji();
 }());

data/app/views/decidim/comments/comments/update.js.erb

@@ -0,0 +1,8 @@
+$(() => {
+  const commentHtml = '<%== j(render partial: "edited_comment", locals: { comment: @comment }).strip %>';
+  const commentId = <%= @comment.id.to_json %>;
+  const $comment = $("#comment_<%= @comment.id %>");
+  const $editCommentModal = $("#editCommentModal<%= @comment.id %>");
+
+  $comment.replaceWith(commentHtml);
+});

data/app/views/decidim/comments/comments/update_error.js.erb

@@ -0,0 +1 @@
+alert("<%== t("decidim.comments.comments.update.error") %>");

data/config/assets.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+base_path = File.expand_path("..", __dir__)
+
+Decidim::Webpacker.register_path("#{base_path}/app/packs")

data/config/locales/ar.yml

@@ -63,7 +63,6 @@ ar:
             offensive: يحتوي على العنصرية والتمييز الجنسي والتشهير والهجمات الشخصية والتهديدات بالقتل أو طلبات الانتحار أو أي شكل من أشكال خطاب الكراهية.
             spam: يحتوي على clickbait أو الإعلان أو الخدع أو روبوت البرامج النصية.
         show_replies: اظهر الردود الـ %{replies_count}
-        single_comment_link_title: الحصول على رابط نحو تعليق واحد
       comment_order_selector:
         order:
           best_rated: أفضل تصنيف