Fix #1259: add anchors to groups of checks (#1293)

mozilla-services · Aug 17, 2023 · 73b996a · 73b996a
1 parent 2accb11
commit 73b996a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/telescope/html/css/main.css b/telescope/html/css/main.css
@@ -34,6 +34,19 @@ section.project:not(:first-child) {
     border-top: 1px solid rgba(0, 40, 100, 0.12);
 }
 
+section.project h3 a {
+    text-decoration: none;
+    color: var(--foreground);
+}
+
+section.project h3 a i {
+    display: none;
+}
+
+section.project h3 a:hover i {
+    display: inline-block;
+}
+
 .project-cards {
     display: grid;
     grid-gap: 0.5rem 0rem;

diff --git a/telescope/html/js/app/components/Dashboard.mjs b/telescope/html/js/app/components/Dashboard.mjs
@@ -10,6 +10,7 @@ import TagListFilter from "./TagListFilter.mjs";
 export default class Dashboard extends Component {
   constructor() {
     super();
+    this.firstLoad = true;
     this.triggerRecheck = this.triggerRecheck.bind(this);
     this.fetchCheckResult = this.fetchCheckResult.bind(this);
     this.setFocusedCheck = this.setFocusedCheck.bind(this);
@@ -64,8 +65,6 @@ export default class Dashboard extends Component {
     });
     // Watch history to focus check.
     window.addEventListener("hashchange", this.onHashChange);
-    // Check if page has state on load.
-    this.onHashChange();
   }
 
   componentWillUnmount() {
@@ -78,20 +77,31 @@ export default class Dashboard extends Component {
 
   componentDidUpdate() {
     this.updateFavicon();
+    // Check if page has state on first load (after render)
+    if (this.firstLoad) {
+      this.onHashChange();
+      this.firstLoad = false;
+    }
   }
 
   onHashChange() {
-    const [project, name] = window.location.hash.slice(1).split("/");
-    // Highlight check in page.
-    if (project && name) {
+    const hash = window.location.hash;
+    // Highlight check in page?
+    if (hash.includes("/")) {
+      const [project, name] = hash.slice(1).split("/")
       this.setState({
         focusedCheck: {
           project,
           name,
         },
       });
     }
+    // Scroll to check?
+    if (hash.startsWith("#project-")) {
+      document.querySelector(hash).scrollIntoView();
+    }
   }
+
   updateFavicon() {
     const { results } = this.state;
 

diff --git a/telescope/html/js/app/components/Project.mjs b/telescope/html/js/app/components/Project.mjs
@@ -55,12 +55,17 @@ export default class Project extends Component {
   }
 
   render({ name }) {
+    const slug = name.toLowerCase().replace(" ", "-");
     return html`
       <section class="project mt-3 pt-4">
         <div class="float-right mt-1 lh-1">${this.renderStatus()}</div>
         <h3 class="mb-4">
           <i class="fa fa-layer-group mr-2"></i>
-          <span class="project-name">${name}</span>
+          <a href="#project-${slug}" id="project-${slug}">
+            <span class="project-name">${name}</span>
+            ${" "}
+            <i class="fa fa-link"></i>
+          </a>
         </h3>
         <div class="project-cards mb-1">${this.renderChecks()}</div>
       </section>