XWIKI-17702: Annotation anchor not working when "show annotations" is…

… off (#2921)

(cherry picked from commit 26ffd44)

xwiki-platform-core/xwiki-platform-annotation/xwiki-platform-annotation-test/xwiki-platform-annotation-test-docker/src/test/it/org/xwiki/annotation/test/ui/AnnotationsIT.java

@@ -20,6 +20,8 @@
 package org.xwiki.annotation.test.ui;
 
 import java.util.Locale;
+import java.util.stream.Collectors;
+import java.util.stream.IntStream;
 
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Order;
@@ -31,6 +33,7 @@
 import org.xwiki.test.integration.junit.LogCaptureConfiguration;
 import org.xwiki.test.ui.TestUtils;
 import org.xwiki.test.ui.po.CommentsTab;
+import org.xwiki.test.ui.po.ViewPage;
 
 import static org.junit.jupiter.api.Assertions.assertEquals;
 import static org.junit.jupiter.api.Assertions.assertTrue;
@@ -77,9 +80,9 @@ void setUp(TestUtils setup, TestReference testReference)
         setup.login(USER_NAME, USER_PASS);
     }
 
-    // TODO: This test must currently not be first. We can get back to a more natural order once XWIKI-9759 is fixed
+    // TODO: This test must currently be last. We can get back to a more natural order once XWIKI-9759 is fixed
     @Test
-    @Order(3)
+    @Order(4)
     void addAnnotationTranslation(TestUtils setup, TestReference testReference,
         LogCaptureConfiguration logCaptureConfiguration) throws Exception
     {
@@ -173,4 +176,28 @@ void annotationsShouldNotBeShownInXWiki10Syntax(TestUtils setup, TestReference t
         annotatableViewPage.simulateCTRL_M();
         annotatableViewPage.waitforAnnotationWarningNotification();
     }
+
+    @Test
+    @Order(3)
+    void showAnnotationsByClickingOnAQuote(TestUtils setup, TestReference testReference)
+    {
+        // Adds 200 'a' after the content to make sure the content is not on-screen when the comment pane is visible.
+        // The intent is to make sure that clicking on the annotation quote makes the use jump to the corresponding 
+        // annotation (by following the anchor).
+        String paddedContent = IntStream.rangeClosed(0, 200)
+            .mapToObj(i -> "a")
+            .collect(Collectors.joining("\n", CONTENT, ""));
+        AnnotatableViewPage annotatableViewPage =
+            new AnnotatableViewPage(setup.createPage(testReference, paddedContent, null));
+        annotatableViewPage.addAnnotation(ANNOTATED_TEXT_1, ANNOTATION_TEXT_1);
+
+        // Force a page refresh to avoid having the annotations displayed.
+        setup.getDriver().navigate().refresh();
+
+        CommentsTab commentsTab = new ViewPage().openCommentsDocExtraPane();
+        commentsTab.clickOnAnnotationQuote(0);
+        annotatableViewPage = new AnnotatableViewPage(new ViewPage());
+        annotatableViewPage.waitForAnnotationsDisplayed();
+        assertTrue(annotatableViewPage.getAnnotationTextById(0).isDisplayed());
+    }
 }

xwiki-platform-core/xwiki-platform-annotation/xwiki-platform-annotation-test/xwiki-platform-annotation-test-pageobjects/src/main/java/org/xwiki/annotation/test/po/AnnotatableViewPage.java

@@ -310,4 +310,17 @@ public int getCommentId(String annotationId)
             "//div[contains(@class, 'annotation')][a[contains(@href,'#" + annotationId + "')]]"))
             .getAttribute("id").replace("xwikicomment_", ""));
     }
+
+    /**
+     * Search for an annotation by its id and return the corresponding web element.
+     *
+     * @param id the id of the annotation to search for
+     * @return the web element of the requested annotation
+     * @since 16.2.0RC1
+     * @since 15.10.7
+     */
+    public WebElement getAnnotationTextById(int id)
+    {
+        return getDriver().findElement(By.cssSelector(String.format("span.annotation.ID%d", id)));
+    }
 }

xwiki-platform-core/xwiki-platform-annotation/xwiki-platform-annotation-ui/src/main/resources/AnnotationCode/Script.xml

@@ -623,6 +623,32 @@ XWiki.Annotation = Class.create({
     document.observe('xwiki:docextra:loaded', this.addDeleteListenersInTab.bindAsEventListener(this));
     document.observe('xwiki:docextra:loaded', this.addEditListenersInTab.bindAsEventListener(this));
     document.observe('xwiki:docextra:loaded', this.addValidateListenersInTab.bindAsEventListener(this));
+    // List for clicks on annotated texts on the comments. 
+    // Takes care to load the annotations and to make them visible before moving
+    // the user to the anchor corresponding to the requested annotation.
+    require(['jquery'], ($) => {
+      $(document).on('click', 'blockquote.annotatedText', (event) => {
+        if(this.fetchedAnnotations) {
+          // In this case the annotations are just made visible (if need be). This is synchrnous and
+          // we can just let the click event bubble up.
+          this.setAnnotationVisibility(true);
+          this.toggleAnnotations(this.displayingAnnotations);
+        } else {
+          // In this case we need to fetch the annotations fist. As this is asynchronous we need to wait for 
+          // the annotations to be fetched before moving the user to the anchor.
+          this.fetchAnnotations(true);
+          event.preventDefault();
+          // Wait for fetchedAnnotations to become true before changing the location, as otherwise
+          // the anchor wouldn't be present and the user wouldn't scroll to the right location.
+          const intervalId = setInterval(() => {
+            if(this.fetchedAnnotations) {
+              clearInterval(intervalId);
+              window.location = $(event.target).parents('a').attr('href');
+            }
+          })
+        }
+      });
+    });
     // refresh the annotations displayed on the document when an annotation is deleted as a comment, that is from the comments tab when annotations are merged with comments
     document.observe('xwiki:annotation:tab:deleted', this.refreshAnnotationsOnCommentDelete.bindAsEventListener(this));
     // register the key shortcuts for adding an annotation

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

@@ -265,4 +265,19 @@ public void clickOnReplyToCommentByID(int id)
         getDriver().findElement(
             By.xpath(String.format("//div[@id='xwikicomment_%d']//a[contains(@class, 'commentreply')]", id))).click();
     }
+
+    /**
+     * Click on the annotation of a given id.
+     *
+     * @param id the id of the comment
+     * @since 16.2.0RC1
+     * @since 15.10.7
+     */
+    public void clickOnAnnotationQuote(int id)
+    {
+        getDriver()
+            .findElement(By.id(String.format("xwikicomment_%d", id)))
+            .findElement(By.cssSelector("blockquote.annotatedText"))
+            .click();
+    }
 }