decidim-comments 0.24.3 → 0.25.0.rc1

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");
       });
     });
   });

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/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

@@ -13,4 +13,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/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: أفضل تصنيف

data/config/locales/ca.yml

@@ -39,7 +39,13 @@ ca:
           user_group_id:
             label: Comentar com a
         opinion:
+          label: La teva opinió sobre aquest tema
+          negative: Negativa
+          negative_selected: La teva opinió sobre aquest tema és negativa
           neutral: Neutral
+          neutral_selected: La teva opinió sobre aquest tema és neutral
+          positive: Positiva
+          positive_selected: La teva opinió sobre aquest tema és positiva
         remaining_characters: "Queden %{count} caràcters"
         remaining_characters_1: "Queda %{count} caràcter"
         title: Deixa el teu comentari
@@ -62,7 +68,6 @@ ca:
             spam: Conté "clickbait", publicitat o estafes.
           title: Notificar contingut inapropiat
         show_replies: Mostra %{replies_count} respostes
-        single_comment_link_title: Aconsegueix l'enllaç al comentari
       comment_order_selector:
         order:
           best_rated: Més ben valorats
@@ -73,6 +78,7 @@ ca:
       comment_thread:
         title: Conversa amb %{authorName}
       comments:
+        blocked_comments_for_unauthorized_user_warning: Has d'estar verificat abans de poder fer comentaris, però pots llegir els comentaris anteriors.
         blocked_comments_for_user_warning: No pots fer comentaris en aquest moment, però pots llegir els anteriors.
         blocked_comments_warning: Els comentaris estan desactivats en aquest moment, però pots llegir els anteriors.
         comment_details_title: Detalls del comentari

data/config/locales/cs.yml

@@ -23,6 +23,10 @@ cs:
       comments:
         create:
           error: Při vytváření komentáře došlo k chybě.
+        delete:
+          error: Komentář nemohl být odstraněn.
+        update:
+          error: Při aktualizaci komentáře došlo k chybě.
       comments_count: Počet komentářů
       comments_title: Komentáře
       last_activity:
@@ -43,7 +47,13 @@ cs:
           user_group_id:
             label: Komentovat jako
         opinion:
+          label: Váš názor na toto téma
+          negative: Negativní
+          negative_selected: Váš názor na toto téma je negativní
           neutral: Neutrální
+          neutral_selected: Váš názor na toto téma je neutrální
+          positive: Pozitivní
+          positive_selected: Váš názor na toto téma je pozitivní
         remaining_characters: "Zbývá %{count} znaků"
         remaining_characters_1: "Zbývá %{count} znak"
         title: Přidejte svůj komentář
@@ -51,7 +61,12 @@ cs:
         alignment:
           against: Proti
           in_favor: Ve prospěch
+        confirm_destroy: Opravdu chcete odstranit tento komentář?
+        delete: Smazat
+        deleted_at: Komentář byl smazán dne %{date}
         deleted_user: Vymazaný účastník
+        edit: Upravit
+        edited: Upraveno
         hide_replies: Skrýt odpovědi
         reply: Odpověď
         report:
@@ -66,7 +81,7 @@ cs:
             spam: Obsahuje clickbait, reklamu, podvody nebo škodlivé skripty.
           title: Nahlásit nevhodný obsah
         show_replies: Zobrazit %{replies_count} odpovědí
-        single_comment_link_title: Získat odkaz na jeden komentář
+        single_comment_link_title: Získat odkaz
       comment_order_selector:
         order:
           best_rated: Nejlépe hodnocené
@@ -77,6 +92,7 @@ cs:
       comment_thread:
         title: Konverzace s číslem %{authorName}
       comments:
+        blocked_comments_for_unauthorized_user_warning: Musíte být ověřen, abyste mohli komentovat tuto chvíli, ale můžete si přečíst ty předchozí.
         blocked_comments_for_user_warning: Momentálně nemůžete komentovat, ale můžete si přečíst ty předchozí.
         blocked_comments_warning: Komentáře jsou momentálně zakázány, ale můžete si přečíst ty předchozí.
         comment_details_title: Podrobnosti komentáře
@@ -90,6 +106,14 @@ cs:
           other: "%{count} komentářů"
       down_vote_button:
         text: Nesouhlasím s tímto komentářem
+      edit_comment_modal_form:
+        close: Zavřít
+        form:
+          body:
+            label: Komentář
+            placeholder: Co si o tom myslíte?
+          submit: Odeslat
+        title: Upravit komentář
       up_vote_button:
         text: Souhlasím s tímto komentářem
     events:

data/config/locales/de.yml

@@ -39,7 +39,13 @@ de:
           user_group_id:
             label: Kommentieren als
         opinion:
+          label: Ihre Meinung zu diesem Thema
+          negative: Negativ
+          negative_selected: Ihre Meinung zu diesem Thema ist negativ
           neutral: Neutral
+          neutral_selected: Ihre Meinung zu diesem Thema ist neutral
+          positive: Positiv
+          positive_selected: Ihre Meinung zu diesem Thema ist positiv
         remaining_characters: "%{count} Zeichen übrig"
         remaining_characters_1: "%{count} Zeichen übrig"
         title: Kommentar hinzufügen
@@ -62,7 +68,6 @@ de:
             spam: Enthält Clickbait, Werbung, Scams oder Script Bots.
           title: Ungeeigneten Inhalt melden
         show_replies: '%{replies_count} Antworten anzeigen'
-        single_comment_link_title: Verknüpfung zu einzelnem Kommentar erhalten
       comment_order_selector:
         order:
           best_rated: Am besten bewertet
@@ -73,6 +78,7 @@ de:
       comment_thread:
         title: Konversation mit %{authorName}
       comments:
+        blocked_comments_for_unauthorized_user_warning: Sie müssen aktuell verifiziert sein um zu kommentieren, aber Sie können die bisherigen Kommentare lesen.
         blocked_comments_for_user_warning: Sie können momentan nichts kommentieren, aber Sie können die vorherigen lesen.
         blocked_comments_warning: Kommentare sind zu diesem Zeitpunkt deaktiviert, aber Sie können die vorherigen lesen.
         comment_details_title: Kommentarinformationen