decidim-comments 0.27.5 → 0.28.0.rc4

data/app/cells/decidim/comments/comments/show.erb

@@ -1,16 +1,17 @@
 <%= content_tag :div, id: node_id, data: { decidim_comments: comments_data } do %>
-  <div class="columns large-9 comments-container" id="comments">
+  <div id="comments">
     <div class="comments">
-      <div class="row collapse order-by">
-        <h3 class="order-by__text section-heading">
+      <div class="comments__header">
+        <h2 class="h4">
           <% if single_comment? %>
             <%= t("decidim.components.comments.comment_details_title") %>
           <% else %>
-            <span class="comments-count">
+            <%= icon "chat-1-line", class: "fill-tertiary w-6 h-6 inline-block align-middle" %>
+            <span class="comments-count inline-block align-middle">
               <%= t("decidim.components.comments.title", count: comments_count) %>
             </span>
           <% end %>
-        </h3>
+        </h2>
         <%= render :order_control %>
       </div>
       <%= single_comment_warning %>
@@ -18,14 +19,12 @@
       <div class="comment-threads">
         <%= comments_loading %>
         <% comments.each do |comment| %>
-          <%= cell("decidim/comments/comment_thread", comment, order: order) %>
+          <%= cell("decidim/comments/comment_thread", comment, order:) %>
         <% end %>
       </div>
       <%= add_comment %>
       <%= user_comments_blocked_warning %>
     </div>
-    <div class="callout primary loading-comments hide">
-      <p><%= t("decidim.components.comments.loading") %></p>
-    </div>
+    <%= cell("decidim/announcement", t("decidim.components.comments.loading"), callout_class: "primary loading-comments hidden") %>
   </div>
 <% end %>

data/app/cells/decidim/comments/comments/single_comment_warning.erb

@@ -1,9 +1,6 @@
-<div class="callout secondary">
-  <h5><%= t("decidim.components.comments.single_comment_warning_title") %></h5>
-  <p>
-    <%== t(
-    "decidim.components.comments.single_comment_warning",
-    url: "#{commentable_path}##{node_id}"
-    ) %>
-  </p>
-</div>
+<%= cell("decidim/announcement", {
+           title: t("decidim.components.comments.single_comment_warning_title"),
+           body: t("decidim.components.comments.single_comment_warning", url: "#{commentable_path}##{node_id}")
+         },
+         callout_class: "secondary"
+) %>

data/app/cells/decidim/comments/comments/user_comments_blocked_warning.erb

@@ -1,7 +1,10 @@
-<div class="callout warning">
-  <% if comment_permissions? %>
-    <p><%= blocked_comments_for_unauthorized_user_warning_link %></p>
-  <% else %>
-    <p><%= t("decidim.components.comments.blocked_comments_for_user_warning") %></p>
-  <% end %>
+<%# We cannot use the AnnouncementCell directly here as the link is escaped and it would not work %>
+<div class="flash warning" data-announcement="">
+  <span class="flash__message">
+    <% if comment_permissions? %>
+      <p><%= blocked_comments_for_unauthorized_user_warning_link %></p>
+    <% else %>
+      <p><%= t("decidim.components.comments.blocked_comments_for_user_warning") %></p>
+    <% end %>
+  </span>
 </div>

data/app/cells/decidim/comments/comments_cell.rb

@@ -99,7 +99,7 @@ module Decidim
           commentableGid: model.to_signed_global_id.to_s,
           commentsUrl: decidim_comments.comments_path,
           rootDepth: root_depth,
-          order: order
+          order:
         }
       end
 

data/app/cells/decidim/comments/edit_comment_modal_form/show.erb

@@ -1,16 +1,15 @@
-<div class="reveal edit-comment-modal" id="<%= "editCommentModal#{model.id}" %>" data-reveal role="dialog" aria-modal="true" aria-labelledby="<%= "editCommentModal#{model.id}" %>-label">
-  <div class="reveal__header">
-    <h3 id="<%= "editCommentModal#{model.id}" %>-label" class="reveal__title"><%= t("decidim.components.edit_comment_modal_form.title") %></h3>
-    <button class="close-button" data-close aria-label="<%= t("decidim.components.edit_comment_modal_form.close") %>" type="button">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <%= form_for(form_object, url: decidim_comments.comment_path(comment), method: :put, remote: true, html: { id: form_id }) do |form| %>
-    <div class="field">
-      <label class="show-for-sr" for="<%= form_id %>">
-        <%= t("decidim.components.edit_comment_modal_form.form.body.label") %>
-      </label>
-      <div class="hashtags__container">
+<%= decidim_modal id: "editCommentModal#{model.id}" do %>
+  <%= form_for(form_object, url: decidim_comments.comment_path(comment), method: :put, remote: true, html: { id: nil }) do |form| %>
+    <div data-dialog-container>
+      <%= icon "edit-line" %>
+      <h2 class="h2" id="dialog-title-budget-confirm" data-dialog-title>
+        <%= t("decidim.components.edit_comment_modal_form.title") %>
+      </h2>
+
+      <div class="form__wrapper gap-2">
+        <label class="text-gray-2" for="<%= form_id %>">
+          <%= t("decidim.components.edit_comment_modal_form.form.body.label") %>
+        </label>
         <%= form.text_area(
           :body,
           id: form_id,
@@ -19,11 +18,17 @@
           required: true,
           placeholder: t("decidim.components.edit_comment_modal_form.form.body.placeholder"),
           label: false,
+          class: "w-full rounded border min-h-[160px] border-text-gray-2",
           data: { remaining_characters: "##{form_id}-remaining-characters", input_emoji: true }
         ) %>
       </div>
-      <button type="submit" data-close class="button button--sc"><%= t("decidim.components.edit_comment_modal_form.form.submit") %></button>
+    </div>
+    <div data-dialog-actions>
+      <button type="submit" data-dialog-close="editCommentModal<%= model.id %>" class="button button__sm md:button__lg button__secondary">
+        <%= t("decidim.components.edit_comment_modal_form.form.submit") %>
+      </button>
+
       <span id="<%= form_id %>-remaining-characters" class="remaining-character-count"></span>
     </div>
   <% end %>
-</div>
+<% end %>

data/app/commands/decidim/comments/create_comment.rb

@@ -15,26 +15,38 @@ module Decidim
       # Executes the command. Broadcasts these events:
       #
       # - :ok when everything is valid.
-      # - :invalid if the form wasn't valid and we couldn't proceed.
+      # - :invalid if the form was not valid and we could not proceed.
       #
       # Returns nothing.
       def call
         return broadcast(:invalid) if form.invalid?
 
-        create_comment
+        with_events do
+          create_comment
+        end
 
         broadcast(:ok, comment)
       end
 
       private
 
-      attr_reader :form, :comment
+      attr_reader :form, :comment, :author
+
+      def event_arguments
+        {
+          resource: comment,
+          extra: {
+            event_author: form.current_user,
+            locale:
+          }
+        }
+      end
 
       def create_comment
         parsed = Decidim::ContentProcessor.parse(form.body, current_organization: form.current_organization)
 
         params = {
-          author: @author,
+          author:,
           commentable: form.commentable,
           root_commentable: root_commentable(form.commentable),
           body: { I18n.locale => parsed.rewrite },
@@ -45,7 +57,7 @@ module Decidim
 
         @comment = Decidim.traceability.create!(
           Comment,
-          @author,
+          author,
           params,
           visibility: "public-only"
         )

data/app/commands/decidim/comments/delete_comment.rb

@@ -16,7 +16,7 @@ module Decidim
       # Executes the command. Broadcasts these events:
       #
       # - :ok when everything is valid.
-      # - :invalid if comment isn't authored by current_user.
+      # - :invalid if comment is not authored by current_user.
       #
       # Returns nothing.
       def call

data/app/commands/decidim/comments/update_comment.rb

@@ -18,13 +18,15 @@ module Decidim
       # Executes the command. Broadcasts these events:
       #
       # - :ok when everything is valid.
-      # - :invalid if the form wasn't valid and we couldn't proceed.
+      # - :invalid if the form was not valid and we could not proceed.
       #
       # Returns nothing.
       def call
         return broadcast(:invalid) if form.invalid? || !comment.authored_by?(current_user)
 
-        update_comment
+        with_events do
+          update_comment
+        end
 
         broadcast(:ok)
       end
@@ -33,6 +35,16 @@ module Decidim
 
       attr_reader :form, :comment, :current_user
 
+      def event_arguments
+        {
+          resource: comment,
+          extra: {
+            event_author: form.current_user,
+            locale:
+          }
+        }
+      end
+
       def update_comment
         parsed = Decidim::ContentProcessor.parse(form.body, current_organization: form.current_organization)
 

data/app/commands/decidim/comments/vote_comment.rb

@@ -19,7 +19,7 @@ module Decidim
       # Executes the command. Broadcasts these events:
       #
       # - :ok when everything is valid.
-      # - :invalid if the vote wasn't create
+      # - :invalid if the vote was not create
       #
       # Returns nothing.
       def call

data/app/controllers/decidim/comments/comments_controller.rb

@@ -16,7 +16,7 @@ module Decidim
       helper_method :root_depth, :commentable, :order, :reply?, :reload?, :root_comment
 
       def index
-        enforce_permission_to :read, :comment, commentable: commentable
+        enforce_permission_to(:read, :comment, commentable:)
 
         @comments = SortedComments.for(
           commentable,
@@ -47,12 +47,13 @@ module Decidim
 
       def update
         set_comment
-        enforce_permission_to :update, :comment, comment: comment
+        set_commentable
+        enforce_permission_to(:update, :comment, comment:)
 
         form = Decidim::Comments::CommentForm.from_params(
           params.merge(commentable: comment.commentable)
         ).with_context(
-          current_organization: current_organization
+          current_organization:
         )
 
         Decidim::Comments::UpdateComment.call(comment, current_user, form) do
@@ -71,13 +72,13 @@ module Decidim
       end
 
       def create
-        enforce_permission_to :create, :comment, commentable: commentable
+        enforce_permission_to(:create, :comment, commentable:)
 
         form = Decidim::Comments::CommentForm.from_params(
-          params.merge(commentable: commentable)
+          params.merge(commentable:)
         ).with_context(
-          current_organization: current_organization,
-          current_component: current_component
+          current_organization:,
+          current_component:
         )
         Decidim::Comments::CreateComment.call(form, current_user) do
           on(:ok) do |comment|
@@ -106,7 +107,7 @@ module Decidim
         set_comment
         @commentable = @comment.commentable
 
-        enforce_permission_to :destroy, :comment, comment: comment
+        enforce_permission_to(:destroy, :comment, comment:)
 
         Decidim::Comments::DeleteComment.call(comment, current_user) do
           on(:ok) do
@@ -129,7 +130,11 @@ module Decidim
       attr_reader :commentable, :comment
 
       def set_commentable
-        @commentable = GlobalID::Locator.locate_signed(commentable_gid)
+        @commentable ||= if commentable_gid
+                           GlobalID::Locator.locate_signed(commentable_gid)
+                         elsif comment
+                           comment.root_commentable
+                         end
       end
 
       def set_comment

data/app/controllers/decidim/comments/votes_controller.rb

@@ -13,7 +13,7 @@ module Decidim
       def create
         raise ActionController::RoutingError, "Not Found" unless comment
 
-        enforce_permission_to :vote, :comment, comment: comment
+        enforce_permission_to(:vote, :comment, comment:)
 
         Decidim::Comments::VoteComment.call(comment, current_user, weight: params[:weight].to_i) do
           on(:ok) do

data/app/events/decidim/comments/comment_by_followed_user_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments

data/app/events/decidim/comments/comment_by_followed_user_group_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments

data/app/events/decidim/comments/comment_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments
@@ -11,8 +11,7 @@ module Decidim
 
       included do
         def resource_text(override_translation = nil)
-          translated_body = translated_attribute(comment.body, comment.organization, override_translation)
-          Decidim::ContentProcessor.render(sanitize_content(render_markdown(translated_body)), "div")
+          comment.formatted_body(override_translation)
         end
 
         def author

data/app/events/decidim/comments/reply_created_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments

data/app/events/decidim/comments/user_group_mentioned_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments

data/app/events/decidim/comments/user_mentioned_event.rb

@@ -1,4 +1,4 @@
-# frozen-string_literal: true
+# frozen_string_literal: true
 
 module Decidim
   module Comments

data/app/helpers/decidim/comments/comment_cells_helper.rb

@@ -26,7 +26,7 @@ module Decidim
       end
 
       def url_params
-        { commentId: comment.id }
+        { commentId: comment.id, anchor: "comment_#{comment.id}" }
       end
     end
   end

data/app/jobs/decidim/comments/hide_all_created_by_author_job.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    class HideAllCreatedByAuthorJob < ::Decidim::HideAllCreatedByAuthorJob
+      protected
+
+      def base_query
+        Decidim::Comments::Comment.not_hidden.where(author:)
+      end
+    end
+  end
+end

data/app/models/decidim/comments/comment.rb

@@ -179,12 +179,15 @@ module Decidim
         root_commentable.can_participate?(user)
       end
 
-      def formatted_body
-        Decidim::ContentProcessor.render(sanitize_content_for_comment(render_markdown(translated_body)), "div")
+      # The override_translation argument has been added to be able to use this
+      # method from comment event in the resource_text method which requires
+      # the use of this argument in translated_attribute of body
+      def formatted_body(override_translation = nil)
+        Decidim::ContentProcessor.render(sanitize_content_for_comment(render_markdown(translated_body(override_translation))), "div")
       end
 
-      def translated_body
-        translated_attribute(body, organization)
+      def translated_body(override_translation = nil)
+        translated_attribute(body, organization, override_translation)
       end
 
       def delete!

data/app/models/decidim/comments/seed.rb

@@ -6,28 +6,44 @@ module Decidim
     # to Seed those models in order to be able to use them in the development
     # app.
     class Seed
-      # Public: adds a random amount of comments for a given resource.
-      #
-      # resource - the resource to add the coments to.
-      #
-      # Returns nothing.
-      def self.comments_for(resource)
-        return unless resource.accepts_new_comments?
+      class << self
+        # Adds a random amount of comments for a given resource.
+        #
+        # @param resource [Object] - the Decidim resource to add the coments to.
+        #                            examples: Decidim::Proposals::CollaborativeDraft, Decidim::Proposals::Proposal,
+        #
+        # @return nil
+        def comments_for(resource)
+          return unless resource.accepts_new_comments?
 
-        Decidim::Comments::Comment.reset_column_information
+          Decidim::Comments::Comment.reset_column_information
 
-        organization = resource.organization
+          rand(0..6).times do
+            comment = create_comment(resource)
+            create_comment(comment, resource) if [true, false].sample
+          end
+        end
+
+        private
 
-        2.times do
-          author = Decidim::User.where(organization: organization).all.sample
+        # Creates a comment for a given resource.
+        #
+        # @private
+        #
+        # @param resource [Object] - the Decidim resource to add the comments to.
+        # @param root_commentable - the root commentable resource. It is optional, used for making nested comments.
+        #
+        # @return [Decidim::Comments::Comment]
+        def create_comment(resource, root_commentable = nil)
+          author = Decidim::User.where(organization: resource.organization).all.sample
           user_group = [true, false].sample ? Decidim::UserGroups::ManageableUserGroups.for(author).verified.sample : nil
 
           params = {
             commentable: resource,
-            root_commentable: resource,
+            root_commentable: root_commentable || resource,
             body: { en: ::Faker::Lorem.sentence(word_count: 50) },
-            author: author,
-            user_group: user_group
+            author:,
+            user_group:
           }
 
           Decidim.traceability.create!(

data/app/packs/entrypoints/decidim_comments.js

@@ -0,0 +1,5 @@
+// CSS
+import "stylesheets/comments.scss"
+
+// Javacript
+import "src/decidim/comments/comments"

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

@@ -1,7 +1,6 @@
 /* eslint id-length: ["error", { "exceptions": ["$"] }] */
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
-
 /**
  * A plain Javascript component that handles the comments.
  *
@@ -12,11 +11,7 @@
 // This is necessary for testing purposes
 const $ = window.$;
 
-import Rails from "@rails/ujs";
-
-import { createCharacterCounter } from "src/decidim/input_character_counter"
-import ExternalLink from "src/decidim/external_link"
-import updateExternalDomainLinks from "src/decidim/external_domain_warning"
+import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
 
 export default class CommentsComponent {
   constructor($element, config) {
@@ -48,8 +43,6 @@ export default class CommentsComponent {
           $(".add-comment textarea", this.$element).prop("disabled", false);
         });
       }
-
-      $(".order-by__dropdown .is-submenu-item a", this.$element).on("click.decidim-comments", () => this._onInitOrder());
     }
   }
 
@@ -63,9 +56,8 @@ export default class CommentsComponent {
       this.mounted = false;
       this._stopPolling();
 
-      $(".add-comment .opinion-toggle .button", this.$element).off("click.decidim-comments");
+      $(".add-comment .opinion-toggle button", this.$element).off("click.decidim-comments");
       $(".add-comment textarea", this.$element).off("input.decidim-comments");
-      $(".order-by__dropdown .is-submenu-item a", this.$element).off("click.decidim-comments");
       $(".add-comment form", this.$element).off("submit.decidim-comments");
       $(".add-comment textarea", this.$element).each((_i, el) => el.removeEventListener("emoji.added", this._onTextInput));
     }
@@ -102,7 +94,7 @@ export default class CommentsComponent {
     const $comment = $(replyHtml);
     const $replies = $(`#comment-${commentId}-replies`);
     this._addComment($replies, $comment);
-    $replies.siblings(".comment__additionalreply").removeClass("hide");
+    $replies.addClass("comment-reply");
     this._finalizeCommentCreation($parent, fromCurrentUser);
   }
 
@@ -125,7 +117,7 @@ export default class CommentsComponent {
     $(".add-comment", $parent).each((_i, el) => {
       const $add = $(el);
       const $form = $("form", $add);
-      const $opinionButtons = $(".opinion-toggle .button", $add);
+      const $opinionButtons = $(".opinion-toggle button", $add);
       const $text = $("textarea", $form);
 
       $opinionButtons.on("click.decidim-comments", this._onToggleOpinion);
@@ -140,6 +132,8 @@ export default class CommentsComponent {
         this._stopPolling();
       });
 
+      document.querySelectorAll(".new_report").forEach((container) => changeReportFormBehavior(container))
+
       if ($text.length && $text.get(0) !== null) {
         // Attach event to the DOM node, instead of the jQuery object
         $text.get(0).addEventListener("emoji.added", this._onTextInput);
@@ -164,14 +158,9 @@ export default class CommentsComponent {
     this.lastCommentId = parseInt($comment.data("comment-id"), 10);
 
     $target.append($container);
-    $container.foundation();
+
     this._initializeComments($container);
-    createCharacterCounter($(".add-comment textarea", $container));
-    $container.find('a[target="_blank"]').each((_i, elem) => {
-      const $link = $(elem);
-      $link.data("external-link", new ExternalLink($link));
-    });
-    updateExternalDomainLinks($container)
+    document.dispatchEvent(new CustomEvent("comments:loaded", { detail: {commentsIds: [this.lastCommentId] }}));
   }
 
   /**
@@ -185,16 +174,18 @@ export default class CommentsComponent {
    */
   _finalizeCommentCreation($parent, fromCurrentUser) {
     if (fromCurrentUser) {
-      const $add = $("> .add-comment", $parent);
-      const $text = $("textarea", $add);
-      const characterCounter = $text.data("remaining-characters-counter");
-      $text.val("");
-      if (characterCounter) {
-        characterCounter.updateStatus();
-      }
-      if (!$add.parent().is(".comments")) {
-        $add.addClass("hide");
-      }
+      const $add = $(".add-comment", $parent);
+      $("textarea", $add).each((_i, text) => {
+        const $text = $(text);
+        // Reset textarea content
+        $text.val("")
+        // Update characterCounter component
+        const characterCounter = $text.data("remaining-characters-counter");
+        if (characterCounter) {
+          characterCounter.handleInput();
+          characterCounter.updateStatus();
+        }
+      })
     }
 
     // Restart the polling
@@ -230,7 +221,7 @@ export default class CommentsComponent {
         "commentable_gid": this.commentableGid,
         "root_depth": this.rootDepth,
         "order": this.order,
-        "after": this.lastCommentId,
+        // From here, the rest of properties are optional
         ...(this.toggleTranslations && { "toggle_translations": this.toggleTranslations }),
         ...(this.lastCommentId && { "after": this.lastCommentId })
       }),
@@ -260,9 +251,9 @@ export default class CommentsComponent {
    * @returns {Void} - Returns nothing
    */
   _setLoading() {
-    const $container = $("> .comments-container", this.$element);
-    $("> .comments", $container).addClass("hide");
-    $("> .loading-comments", $container).removeClass("hide");
+    const $container = $("> #comments", this.$element);
+    $("> .comments", $container).addClass("hidden");
+    $("> .loading-comments", $container).removeClass("hidden");
   }
 
   /**
@@ -283,13 +274,13 @@ export default class CommentsComponent {
    */
   _onToggleOpinion(ev) {
     let $btn = $(ev.target);
-    if (!$btn.is(".button")) {
-      $btn = $btn.parents(".button");
+    if (!$btn.is("button")) {
+      $btn = $btn.parents("button");
     }
 
     const $add = $btn.closest(".add-comment");
     const $form = $("form", $add);
-    const $opinionButtons = $(".opinion-toggle .button", $add);
+    const $opinionButtons = $(".opinion-toggle button", $add);
     const $selectedState = $(".opinion-toggle .selected-state", $add);
     const $alignment = $(".alignment-input", $form);