decidim-comments 0.31.6 → 0.32.0.rc1

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

@@ -10,14 +10,11 @@ window.$ = jest.fn().mockImplementation((...args) => $(...args));
 window.$.ajax = jest.fn().mockImplementation((...args) => $.ajax(...args));
 window.$.extend = jest.fn().mockImplementation((...args) => $.extend(...args));
 
-// Rails.ajax is used by the fetching/polling of the comments
+// Rails.ajax is used by the fetching of the comments
 import Rails from "@rails/ujs";
 jest.mock("@rails/ujs");
 window.Rails = Rails;
 
-// Fake timers for testing polling
-jest.useFakeTimers();
-
 import Configuration from "src/decidim/refactor/implementation/configuration";
 // Component is loaded with require because using import loads it before $ has been mocked
 // so tests are not able to check the spied behaviours
@@ -115,7 +112,8 @@ describe("CommentsComponent", () => {
             data-input-emoji="true"
             name="comment[body]"
             aria-describedby="add-comment-${modelName}-${modelId}-remaining-characters_sr"
-            data-input-emoji-initialized="true">
+            data-input-emoji-initialized="true"
+            data-tribute="true">
           </textarea>
           <span class="emoji__trigger">
             <button class="emoji__button" type="button" aria-label="Add emoji">
@@ -195,6 +193,36 @@ describe("CommentsComponent", () => {
   }
 
   const generateSingleComment = (commentId, content, replies = "") => {
+    const hasReplies = replies.trim().length > 0;
+    const repliesStructure = hasReplies
+      ? `
+      <div data-controller="show-replies"
+           data-show-replies-url-value="/comments"
+           data-show-replies-comment-gid-value="comment-gid-${commentId}"
+           data-show-replies-order-value="older"
+           data-show-replies-loaded-value="false">
+        <div class="show-replies-button">
+          <button class="button button__xs button__text-secondary"
+                  data-action="click->show-replies#toggle"
+                  data-show-replies-target="button"
+                  aria-expanded="false"
+                  aria-controls="comment-${commentId}-replies"
+                  id="comment-${commentId}-replies-trigger">
+            <span class="font-normal">1 reply</span>
+            <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-arrow-down-s-line" tabindex="-1"></use></svg>
+            <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-arrow-up-s-line" tabindex="-1"></use></svg>
+          </button>
+          <span data-show-replies-target="spinner" class="ml-2 hidden">
+            <svg width="1em" height="1em" role="img" aria-hidden="true" class="animate-spin fill-secondary"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-loader-3-line" tabindex="-1"></use></svg>
+          </span>
+        </div>
+        <div id="comment-${commentId}-replies"
+             data-show-replies-target="container"
+             class="comment-reply hidden">${replies}</div>
+      </div>
+    `
+      : `<div id="comment-${commentId}-replies" class="comment-reply"></div>`;
+
     return `
       <div id="comment_${commentId}" class="comment" data-comment-id="${commentId}">
         <div class="comment__header">
@@ -231,40 +259,42 @@ describe("CommentsComponent", () => {
         <div class="comment__content">
           <div><p>${content}</p></div>
         </div>
-        <div data-comment-footer data-controller="accordion" role="presentation">
+        <div data-comment-footer data-controller="accordion" id="accordion-${commentId}" class="relative">
           <div class="comment__footer-grid">
-            <div class="comment__actions">
-              <button class="button button__sm button__text-secondary" data-controls="panel-comment${commentId}-reply" role="button" tabindex="0" aria-controls="panel-comment${commentId}-reply" aria-expanded="false" aria-disabled="false">
-                <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-chat-1-line" tabindex="-1"></use></svg>
-                <span class="font-normal">Reply</span>
-                <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-close-circle-line" tabindex="-1"></use></svg>
-                <span class="font-normal">Cancel reply</span>
-              </button>
-            </div>
-            <div class="comment__votes">
-              <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=1" data-remote="true">
-                <button class="button button__sm button__text-secondary js-comment__votes--up" title="I agree with this comment" type="submit">
-                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-line" tabindex="-1"></use></svg>
-                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-fill" tabindex="-1"></use></svg>
-                  <span>0</span>
-                </button>
-                <input type="hidden" name="authenticity_token" value="knr7y99HXbKv5sdm5OlghBlFsjIX7KOnIvHZ5-vXThb87Qszlh8j_CPxdbhsiqcIPAwvofsM9zR0vWFgojq6dA" autocomplete="off">
-              </form>
-              <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=-1" data-remote="true">
-                <button class="button button__sm button__text-secondary js-comment__votes--down" title="I disagree with this comment" type="submit">
-                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-line" tabindex="-1"></use></svg>
-                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-fill" tabindex="-1"></use></svg>
-                  <span>0</span>
+            <div class="comment__votes-actions">
+              <div class="comment__actions">
+                <button class="button button__sm button__text-secondary" data-controls="panel-${commentId}-reply" id="panel-${commentId}-reply-trigger">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-chat-1-line" tabindex="-1"></use></svg>
+                  <span class="font-normal">Reply</span>
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-close-circle-line" tabindex="-1"></use></svg>
+                  <span class="font-normal">Cancel reply</span>
                 </button>
-                <input type="hidden" name="authenticity_token" value="OOIZTq0QSU1CB6OXV1D6j337zCgOA6al6xDOmy_qlZpWdem25Eg3A84QEUnfMz0DWLJRu-Lj8ja9XHYcZgdh-A" autocomplete="off">
-              </form>
+              </div>
+              <div class="comment__votes">
+                <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=1" data-remote="true">
+                  <button class="button button__sm button__text-secondary js-comment__votes--up" title="I agree with this comment" type="submit">
+                    <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-line" tabindex="-1"></use></svg>
+                    <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-fill" tabindex="-1"></use></svg>
+                    <span>0</span>
+                  </button>
+                  <input type="hidden" name="authenticity_token" value="knr7y99HXbKv5sdm5OlghBlFsjIX7KOnIvHZ5-vXThb87Qszlh8j_CPxdbhsiqcIPAwvofsM9zR0vWFgojq6dA" autocomplete="off">
+                </form>
+                <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=-1" data-remote="true">
+                  <button class="button button__sm button__text-secondary js-comment__votes--down" title="I disagree with this comment" type="submit">
+                    <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-line" tabindex="-1"></use></svg>
+                    <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-fill" tabindex="-1"></use></svg>
+                    <span>0</span>
+                  </button>
+                  <input type="hidden" name="authenticity_token" value="OOIZTq0QSU1CB6OXV1D6j337zCgOA6al6xDOmy_qlZpWdem25Eg3A84QEUnfMz0DWLJRu-Lj8ja9XHYcZgdh-A" autocomplete="off">
+                </form>
+              </div>
             </div>
           </div>
-          <div id="panel-comment${commentId}-reply" class="add-comment" role="region" tabindex="-1" aria-labelledby="" aria-hidden="true">
+          <div id="panel-${commentId}-reply" class="add-comment" data-additional-reply>
             ${generateCommentForm("Comment", commentId)}
           </div>
         </div>
-        <div id="comment-${commentId}-replies">${replies}</div>
+        ${repliesStructure}
       </div>
     `;
   }
@@ -358,8 +388,7 @@ describe("CommentsComponent", () => {
       commentsUrl: "/comments",
       rootDepth: 0,
       order: "older",
-      lastCommentId: 456,
-      pollingInterval: 1000
+      lastCommentId: 456
     });
 
     $doc = $(document);
@@ -392,8 +421,7 @@ describe("CommentsComponent", () => {
       data: new URLSearchParams({
         "commentable_gid": "commentable-gid",
         "root_depth": 0,
-        order: "older",
-        after: 456
+        order: "older"
       }),
       success: expect.any(Function)
     });
@@ -413,30 +441,6 @@ describe("CommentsComponent", () => {
     expect($(`${selector} .add-comment textarea`).prop("disabled")).toBeFalsy();
   });
 
-  it("starts polling for new comments", () => {
-    jest.spyOn(window, "setTimeout");
-    Rails.ajax.mockImplementationOnce((options) => options.success());
-
-    subject.mountComponent();
-
-    expect(window.setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
-  });
-
-  it("does not disable the textarea when polling comments normally", () => {
-    Rails.ajax.mockImplementationOnce((options) => options.success());
-
-    subject.mountComponent();
-
-    // Delay the success call 2s after the polling has happened to test that
-    // the textarea is still enabled when the polling is happening.
-    Rails.ajax.mockImplementationOnce((options) => {
-      setTimeout(() => options.success(), 2000);
-    });
-    jest.advanceTimersByTime(1500);
-
-    expect($(`${selector} .add-comment textarea`).prop("disabled")).toBeFalsy();
-  });
-
   describe("when mounted", () => {
     beforeEach(() => {
       spyOnAddComment("on");
@@ -507,7 +511,7 @@ describe("CommentsComponent", () => {
         ).toBeTruthy();
       });
 
-      it("disables the submit button on submit and stops polling", () => {
+      it("disables the submit button on submit", () => {
         jest.spyOn(window, "clearTimeout");
 
         commentText.html("This is a test comment")
@@ -517,8 +521,6 @@ describe("CommentsComponent", () => {
         expect(
           $("button[type='submit']", commentSection.commentForm).is(":disabled")
         ).toBeTruthy();
-
-        expect(window.clearTimeout).toHaveBeenCalledWith(subject.pollTimeout);
       });
     });
 

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

@@ -99,5 +99,5 @@ const commentsInitializer = () => {
   window.addEventListener("resize", handleResize);
 };
 
-// Keep this on turbo load so comments are mounted after each visit
+// If no jQuery is used the Tribute feature used in comments to autocomplete mentions stops working
 document.addEventListener("turbo:load", commentsInitializer);

data/app/packs/src/decidim/comments/controllers/load_more_comments/controller.js

@@ -0,0 +1,201 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Load More Comments Stimulus Controller
+ *
+ * Handles paginated loading of additional comments via AJAX requests.
+ * When the user clicks the "Load more" button, it fetches the next page of comments
+ * from the server and appends them to the existing comment list.
+ *
+ * Usage:
+ * <div data-controller="load-more-comments"
+ *      data-load-more-comments-url-value="/comments"
+ *      data-load-more-comments-commentable-gid-value="gid://app/Model/1"
+ *      data-load-more-comments-order-value="older"
+ *      data-load-more-comments-offset-value="20"
+ *      data-load-more-comments-per-page-value="20"
+ *      data-load-more-comments-alignment-value="1">
+ *   <button data-load-more-comments-target="button"
+ *           data-action="click->load-more-comments#loadMore">Load more</button>
+ *   <span data-load-more-comments-target="spinner" class="hidden">Loading...</span>
+ * </div>
+ */
+export default class extends Controller {
+  static get values() {
+    return {
+      url: String,
+      commentableGid: String,
+      order: String,
+      offset: Number,
+      perPage: Number,
+      alignment: Number
+    }
+  }
+
+  static get targets() {
+    return ["button", "spinner"]
+  }
+
+  connect() {
+    this.loading = false;
+  }
+
+  /**
+   * Load more comments when the button is clicked
+   * @param {Event} event - The click event from the button
+   * @returns {void}
+   */
+  async loadMore(event) {
+    event.preventDefault();
+
+    if (this.loading) {
+      return;
+    }
+
+    this.loading = true;
+    this.showLoadingState();
+
+    try {
+      const url = this.buildUrl();
+      const response = await this.makeRequest(url);
+
+      if (response.ok) {
+        const script = await response.text();
+        this.executeScript(script);
+      } else {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+    } catch (error) {
+      this.handleError(error);
+    } finally {
+      this.loading = false;
+      this.hideLoadingState();
+    }
+  }
+
+  /**
+   * Build the URL with query parameters for the AJAX request
+   * @private
+   * @returns {string} The URL with query parameters
+   */
+  buildUrl() {
+    const locale = document.documentElement.getAttribute("lang") || "en";
+    const params = new URLSearchParams({
+      "commentable_gid": this.commentableGidValue,
+      "order": this.orderValue,
+      "offset": this.offsetValue,
+      "locale": locale,
+      "load_more": 1
+    });
+
+    if (this.hasAlignmentValue && typeof this.alignmentValue !== "undefined") {
+      params.append("alignment", this.alignmentValue);
+    }
+
+    const separator = this.urlValue.includes("?")
+      ? "&"
+      : "?";
+    return `${this.urlValue}${separator}${params.toString()}`;
+  }
+
+  /**
+   * Make the HTTP request using fetch
+   * @private
+   * @param {string} url - The URL to request
+   * @returns {Promise<Response>} The fetch response
+   */
+  async makeRequest(url) {
+    const csrfToken = this.getCSRFToken();
+
+    return fetch(url, {
+      method: "GET",
+      headers: {
+        "Accept": "text/javascript",
+        "X-Requested-With": "XMLHttpRequest",
+        ...(csrfToken && { "X-CSRF-Token": csrfToken })
+      },
+      credentials: "same-origin"
+    });
+  }
+
+  /**
+   * Get CSRF token from meta tag
+   * @private
+   * @returns {string|null} The CSRF token or null if not found
+   */
+  getCSRFToken() {
+    const tokenElement = document.querySelector('meta[name="csrf-token"]');
+    return tokenElement
+      ? tokenElement.getAttribute("content")
+      : null;
+  }
+
+  /**
+   * Execute the JavaScript response from the server
+   * @private
+   * @param {string} script - The JavaScript code to execute
+   * @returns {void}
+   */
+  executeScript(script) {
+    const scriptElement = document.createElement("script");
+    scriptElement.textContent = script;
+    document.body.appendChild(scriptElement);
+    document.body.removeChild(scriptElement);
+  }
+
+  /**
+   * Show loading state on the button
+   * @private
+   * @returns {void}
+   */
+  showLoadingState() {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = true;
+      this.buttonTarget.classList.add("loading");
+    }
+    if (this.hasSpinnerTarget) {
+      this.spinnerTarget.classList.remove("hidden");
+    }
+  }
+
+  /**
+   * Hide loading state on the button
+   * @private
+   * @returns {void}
+   */
+  hideLoadingState() {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = false;
+      this.buttonTarget.classList.remove("loading");
+    }
+    if (this.hasSpinnerTarget) {
+      this.spinnerTarget.classList.add("hidden");
+    }
+  }
+
+  /**
+   * Handle error response
+   * @private
+   * @param {Error} error - The error that occurred
+   * @returns {void}
+   */
+  handleError(error) {
+    console.error("Error loading more comments:", error);
+
+    this.dispatch("error", {
+      detail: {
+        error: error.message,
+        element: this.element
+      }
+    });
+  }
+
+  /**
+   * Hide the load more button when no more comments are available
+   * @public
+   * @returns {void}
+   */
+  hideButton() {
+    this.element.remove();
+  }
+}

data/app/packs/src/decidim/comments/controllers/show_replies/controller.js

@@ -0,0 +1,240 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Show Replies Stimulus Controller
+ *
+ * Handles lazy loading and toggling visibility of comment replies.
+ * On first click, it fetches replies via AJAX. Subsequent clicks toggle visibility.
+ *
+ * Usage:
+ * <div data-controller="show-replies"
+ *      data-show-replies-url-value="/comments"
+ *      data-show-replies-comment-gid-value="gid://app/Comment/1"
+ *      data-show-replies-order-value="older"
+ *      data-show-replies-loaded-value="false">
+ *   <button data-show-replies-target="button"
+ *           data-action="click->show-replies#toggle">Show replies</button>
+ *   <span data-show-replies-target="spinner" class="hidden">Loading...</span>
+ *   <div data-show-replies-target="container" class="hidden"></div>
+ * </div>
+ */
+export default class extends Controller {
+  static get values() {
+    return {
+      url: String,
+      commentGid: String,
+      order: String,
+      loaded: Boolean
+    }
+  }
+
+  static get targets() {
+    return ["container", "button", "spinner"]
+  }
+
+  connect() {
+    this.loading = false;
+  }
+
+  /**
+   * Toggle replies visibility - loads on first click, then toggles
+   * @param {Event} event - The click event from the button
+   * @returns {void}
+   */
+  async toggle(event) {
+    event.preventDefault();
+
+    if (this.loading) {
+      return;
+    }
+
+    if (this.loadedValue) {
+      // Already loaded - just toggle visibility
+      this.toggleVisibility();
+    } else {
+      // First time - load replies via AJAX
+      await this.loadReplies();
+    }
+  }
+
+  /**
+   * Load replies via AJAX
+   * @private
+   * @returns {Promise<void>} A promise that resolves when replies are loaded
+   */
+  async loadReplies() {
+    this.loading = true;
+    this.showLoadingState();
+
+    try {
+      const url = this.buildUrl();
+      const response = await this.makeRequest(url);
+
+      if (response.ok) {
+        const script = await response.text();
+        this.executeScript(script);
+        this.loadedValue = true;
+        this.showReplies();
+      } else {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+    } catch (error) {
+      this.handleError(error);
+    } finally {
+      this.loading = false;
+      this.hideLoadingState();
+    }
+  }
+
+  /**
+   * Build the URL with query parameters for the AJAX request
+   * @private
+   * @returns {string} The URL with query parameters
+   */
+  buildUrl() {
+    const locale = document.documentElement.getAttribute("lang") || "en";
+    const params = new URLSearchParams({
+      "commentable_gid": this.commentGidValue,
+      "order": this.orderValue,
+      "offset": 0,
+      "locale": locale,
+      "load_more": 1
+    });
+
+    const separator = this.urlValue.includes("?")
+      ? "&"
+      : "?";
+    return `${this.urlValue}${separator}${params.toString()}`;
+  }
+
+  /**
+   * Make the HTTP request using fetch
+   * @private
+   * @param {string} url - The URL to request
+   * @returns {Promise<Response>} The fetch response
+   */
+  async makeRequest(url) {
+    const csrfToken = this.getCSRFToken();
+
+    return fetch(url, {
+      method: "GET",
+      headers: {
+        "Accept": "text/javascript",
+        "X-Requested-With": "XMLHttpRequest",
+        ...(csrfToken && { "X-CSRF-Token": csrfToken })
+      },
+      credentials: "same-origin"
+    });
+  }
+
+  /**
+   * Get CSRF token from meta tag
+   * @private
+   * @returns {string|null} The CSRF token or null if not found
+   */
+  getCSRFToken() {
+    const tokenElement = document.querySelector('meta[name="csrf-token"]');
+    return tokenElement
+      ? tokenElement.getAttribute("content")
+      : null;
+  }
+
+  /**
+   * Execute the JavaScript response from the server
+   * @private
+   * @param {string} script - The JavaScript code to execute
+   * @returns {void}
+   */
+  executeScript(script) {
+    const scriptElement = document.createElement("script");
+    scriptElement.textContent = script;
+    document.body.appendChild(scriptElement);
+    document.body.removeChild(scriptElement);
+  }
+
+  /**
+   * Show loading state
+   * @private
+   * @returns {void}
+   */
+  showLoadingState() {
+    if (this.hasSpinnerTarget) {
+      this.spinnerTarget.classList.remove("hidden");
+    }
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = true;
+    }
+  }
+
+  /**
+   * Hide loading state
+   * @private
+   * @returns {void}
+   */
+  hideLoadingState() {
+    if (this.hasSpinnerTarget) {
+      this.spinnerTarget.classList.add("hidden");
+    }
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = false;
+    }
+  }
+
+  /**
+   * Show replies (after loading or toggling)
+   * @private
+   * @returns {void}
+   */
+  showReplies() {
+    if (this.hasContainerTarget) {
+      this.containerTarget.classList.remove("hidden");
+    }
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  /**
+   * Hide replies
+   * @private
+   * @returns {void}
+   */
+  hideReplies() {
+    if (this.hasContainerTarget) {
+      this.containerTarget.classList.add("hidden");
+    }
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  /**
+   * Toggle visibility of replies
+   * @private
+   * @returns {void}
+   */
+  toggleVisibility() {
+    if (this.hasContainerTarget && this.containerTarget.classList.contains("hidden")) {
+      this.showReplies();
+    } else {
+      this.hideReplies();
+    }
+  }
+
+  /**
+   * Handle error response
+   * @private
+   * @param {Error} error - The error that occurred
+   * @returns {void}
+   */
+  handleError(error) {
+    console.error("Error loading replies:", error);
+
+    this.dispatch("error", {
+      detail: {
+        error: error.message,
+        element: this.element
+      }
+    });
+  }
+}