XWIKI-17714: Clicking the Cancel button the comments area doesn't work

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-test/xwiki-platform-flamingo-skin-test-docker/src/test/it/org/xwiki/flamingo/test/docker/CommentsIT.java

@@ -123,6 +123,14 @@ void commentAsLoggedInUser(TestUtils setup, TestReference reference)
         commentIndex = commentsTab.postComment(COMMENT_CONTENT, true);
         commentsTab.editCommentByID(commentIndex, COMMENT_REPLACED_CONTENT);
         assertEquals(COMMENT_REPLACED_CONTENT, commentsTab.getCommentContentByID(commentIndex));
+        
+        // Open then cancel the edit comment forms
+        commentsTab.openCommentForm();
+        commentsTab.cancelCommentForm();
+        commentsTab.editCommentByID(commentIndex);
+        commentsTab.cancelCommentForm();
+        commentsTab.clickOnReplyToCommentByID(commentIndex);
+        commentsTab.cancelCommentForm();
     }
 
     @Test

xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/CommentsTab.java

@@ -28,13 +28,15 @@
 import org.xwiki.test.ui.XWikiWebDriver;
 
 /**
- * Page Object for Comments Tab (or pane)
+ * Page Object for Comments Tab (or pane).
  *
  * @version $Id$
  * @since 3.2M3
  */
 public class CommentsTab extends BaseElement
 {
+    private static final String COMMENT_FORM_ID = "openCommentForm";
+
     @FindBy(css = "fieldset#commentform > label > span")
     private WebElement commentAuthor;
 
@@ -69,12 +71,11 @@ public boolean isCommentFormShown()
     public void openCommentForm()
     {
         String commentFormId = "AddComment";
-        String openFormId = "openCommentForm";
         XWikiWebDriver driver = getDriver();
         // if the comments has not already been toggled (ie, the comment button is not displayed).
         // we click on the button and wait until the form is visible
         if (!driver.findElementWithoutWaiting(By.id(commentFormId)).isDisplayed()) {
-            driver.findElementWithoutWaiting(By.id(openFormId)).click();
+            driver.findElementWithoutWaiting(By.id(COMMENT_FORM_ID)).click();
             driver.waitUntilElementIsVisible(By.id(commentFormId));
         }
     }
@@ -148,8 +149,7 @@ public CommentForm replyToCommentByID(int id)
     {
         // Comments are handled async so it makes sense to wait for the reply button to be ready if another comment
         // has just been posted for example. That's why we don't use findElementWithoutWaiting here.
-        getDriver().findElement(
-            By.xpath("//div[@id='xwikicomment_" + id + "']//a[contains(@class, 'commentreply')]")).click();
+        clickOnReplyToCommentByID(id);
         return getAddCommentForm();
     }
 
@@ -234,4 +234,35 @@ public boolean hasDeleteButtonForCommentByID(int id)
     {
         return !getDriver().findElementsWithoutWaiting(By.cssSelector("#xwikicomment_" + id + " a.delete")).isEmpty();
     }
+
+    /**
+     * Cancel the currently open comment form (new comment, edit or reply) by clicking on the cancel button.
+     *
+     * @since 14.1RC1
+     * @since 13.10.3
+     */
+    public void cancelCommentForm()
+    {
+        // Click on the first visible cancel button.
+        getDriver()
+            .findElements(By.cssSelector("#Commentspane .cancel"))
+            .stream()
+            .filter(WebElement::isDisplayed)
+            .findAny()
+            .ifPresent(WebElement::click);
+        getDriver().waitUntilElementIsVisible(By.id(COMMENT_FORM_ID));
+    }
+
+    /**
+     * Click on the reply button of a comment. The comment to reply to is found by its id.
+     *
+     * @param id the id of the comment to reply to
+     * @since 14.1RC1
+     * @since 13.10.3
+     */
+    public void clickOnReplyToCommentByID(int id)
+    {
+        getDriver().findElement(
+            By.xpath(String.format("//div[@id='xwikicomment_%d']//a[contains(@class, 'commentreply')]", id))).click();
+    }
 }

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/viewers/comments.js

@@ -80,6 +80,7 @@ viewers.Comments = Class.create({
     if(openCommentForm) {
       openCommentForm.observe('click', function (event) {
         event.stop();
+        $(this.commentPlaceHolderSelector).show();
         this.displayHiddenForm()
         this.reloadEditor({
           callback: function () {
@@ -110,9 +111,9 @@ viewers.Comments = Class.create({
       if (placeHolder) {
         placeHolder.removeClassName('hidden');
       }
-      var button = $('openCommentForm');
+      const button = $('openCommentForm');
       if (button) {
-        button.remove();
+        button.hide();
       }
       this.formDisplayed = true;
     }
@@ -142,6 +143,7 @@ viewers.Comments = Class.create({
         item.blur();
         event.stop();
         this.displayHiddenForm();
+        this.resetForm();
         if (item.disabled) {
           // Do nothing if the button was already clicked and it's waiting for a response from the server.
           return;
@@ -232,14 +234,7 @@ viewers.Comments = Class.create({
     const name = "XWiki.XWikiComments_" + commentNbr + "_comment";
     this.destroyEditor("[name='" + name + "']", name);
     comment.show();
-    $(this.commentPlaceHolderSelector).show();
-    this.reloadEditor({
-          callback: function () {
-            this.getForm();
-            this.addSubmitListener(this.form);
-            this.addCancelListener();
-            this.addPreview(this.form);
-          }.bind(this)});
+    this.resetForm();
     this.cancelPreview(editActivator._x_editForm);
     this.editing = false;
   },
@@ -268,7 +263,6 @@ viewers.Comments = Class.create({
     item.observe('click', function(event) {
       item.blur();
       event.stop();
-      this.displayHiddenForm();
       this.getForm();
       // If the form was already displayed as a reply, re-enable the Reply button for the old location
       if (this.form.up('.commentthread')) {
@@ -372,19 +366,20 @@ viewers.Comments = Class.create({
                   // Forces displayHiddenForm to display the comment form with the content of the comment
                   // before submission.
                   this.formDisplayed = false;
+                  this.displayHiddenForm();
+                  this.reloadEditor({
+                    content: submittedComment,
+                    callback: function () {
+                      this.getForm();
+                      this.addSubmitListener(this.form);
+                      this.addCancelListener();
+                      this.addPreview(this.form);
+                    }.bind(this)
+                  });
+                } else {
+                  this.resetForm(); 
                 }
 
-                this.displayHiddenForm();
-                this.reloadEditor({
-                  content: submittedComment,
-                  callback: function () {
-                    this.getForm();
-                    this.addSubmitListener(this.form);
-                    this.addCancelListener();
-                    this.addPreview(this.form);
-                  }.bind(this)
-                });
-
                 document.fire("xwiki:docextra:loaded", {
                   "id": "Comments",
                   "element": this.container
@@ -540,16 +535,21 @@ viewers.Comments = Class.create({
     if (event) {
       event.stop();
     }
-    this.getForm();
-    if (this.form.up('.commentthread')) {
-      // Show the comment's reply button
-      this.form.up(".commentthread").previous(this.xcommentSelector).down('a.commentreply').show();
-      // Put the form back to its initial location and clear the contents
-      this.initialLocation.insert({after: this.form});
-    }
-    this.form["XWiki.XWikiComments_replyto"].value = "";
-    this.reloadEditor();
-    this.cancelPreview(this.form);
+    require(['jquery'], function ($) {
+      const commentPlaceHolder = $('#' + this.commentPlaceHolderSelector);
+      if (this.form.up('.commentthread')) {
+        // Show the comment's reply button back
+        this.form.up(".commentthread").previous(this.xcommentSelector).down('a.commentreply').show();
+        // Move back to form to its default location.
+        commentPlaceHolder.empty().append(this.form)
+      }
+      // Hides the form and display the "add comment" button
+      commentPlaceHolder.addClass("hidden");
+      this.formDisplayed = false;
+      $('#openCommentForm').show();
+      this.form["XWiki.XWikiComments_replyto"].value = "";
+      this.cancelPreview(this.form);
+    }.bind(this));
   },
   /**
    * Registers a listener that watches for the insertion of the Comments tab and triggers the enhancements.