File Tree Diff: updates to UI (info and PR link) (#551)

This is what I understood we agreed on in our meetting.

[Peek 2025-02-20
11-45.webm](https://github.com/user-attachments/assets/904062f9-aeb3-4662-abf7-6037a5e5e3bd)


* Closes #549
* Closes #548

## ToDo

- [x] add tests
- [x] require build URL in data validation

Author: humitos

src/data-validation.js

@@ -291,9 +291,17 @@ const addons_filetreediff = {
       properties: {
         current: {
           type: "object",
-          required: ["type"],
+          required: ["type", "slug", "urls"],
           properties: {
             type: { type: "string" },
+            slug: { type: "string" },
+            urls: {
+              type: "object",
+              required: ["vcs"],
+              properties: {
+                vcs: { type: "string" },
+              },
+            },
           },
         },
       },

src/filetreediff.css

@@ -76,6 +76,17 @@
   min-width: 2.5rem;
 }
 
+:host > div > div > a {
+  width: 0.8rem;
+  color: var(--addons-filetreediff-color);
+}
+
+:host > div > div > a.version {
+  width: auto;
+  text-decoration: none;
+  color: var(--readthedocs-filetreediff-chunks-color, #27ae60);
+}
+
 /* Expand to full width on smaller screens */
 @media (max-width: 768px) {
   :host > div {

src/filetreediff.js

@@ -1,5 +1,9 @@
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
-import { faArrowUp, faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowUp,
+  faArrowDown,
+  faCircleInfo,
+} from "@fortawesome/free-solid-svg-icons";
 import { html, nothing, LitElement } from "lit";
 import { default as objectPath } from "object-path";
 import styleSheet from "./filetreediff.css";
@@ -43,6 +47,9 @@ export class FileTreeDiffElement extends LitElement {
     this.iconArrowDown = icon(faArrowDown, {
       classes: ["icon"],
     });
+    this.iconCircleInfo = icon(faCircleInfo, {
+      classes: ["icon"],
+    });
   }
 
   loadConfig(config) {
@@ -202,6 +209,19 @@ export class FileTreeDiffElement extends LitElement {
             ${renderSection(diffData.added, "Added")}
             ${renderSection(diffData.modified, "Changed")}
           </select>
+          <a
+            href="${this.config.versions.current.urls.vcs}"
+            title="Go to pull request"
+            target="_blank"
+            class="version"
+            >#${this.config.versions.current.slug}</a
+          >
+          <a
+            href="https://docs.readthedocs.com/platform/stable/visual-diff.html"
+            title="Open documentation"
+            target="_blank"
+            >${this.iconCircleInfo.node[0]}</a
+          >
         </div>
       </div>
     `;

tests/__snapshots__/filetreediff.test.snap.js

@@ -27,6 +27,20 @@ snapshots["Filetreediff tests snapshot filetreediff completely"] =
         </option>
       </optgroup>
     </select>
+    <a
+      class="version"
+      href="https://github.com/organization/repository/pull/1234/"
+      target="_blank"
+      title="Go to pull request"
+    >
+      #1234
+    </a>
+    <a
+      href="https://docs.readthedocs.com/platform/stable/visual-diff.html"
+      target="_blank"
+      title="Open documentation"
+    >
+    </a>
   </div>
 </div>
 `;
@@ -66,6 +80,20 @@ snapshots["Filetreediff tests toggle Show diff checkbox"] =
         </option>
       </optgroup>
     </select>
+    <a
+      class="version"
+      href="https://github.com/organization/repository/pull/1234/"
+      target="_blank"
+      title="Go to pull request"
+    >
+      #1234
+    </a>
+    <a
+      href="https://docs.readthedocs.com/platform/stable/visual-diff.html"
+      target="_blank"
+      title="Open documentation"
+    >
+    </a>
   </div>
 </div>
 `;

tests/filetreediff.test.html

@@ -18,6 +18,10 @@
             versions: {
               current: {
                 type: "external",
+                slug: "1234",
+                urls: {
+                  vcs: "https://github.com/organization/repository/pull/1234/",
+                },
               },
             },
             addons: {

tests/filetreediff.test.js

@@ -53,6 +53,10 @@ describe("FileTreeDiff addon", () => {
         versions: {
           current: {
             type: "external",
+            slug: "1234",
+            urls: {
+              vcs: "https://github.com/organization/repository/pull/1234/",
+            },
           },
         },
       }),