From c9d28f6fa378e4f7837cbbf2cfaa0eea3a5b6468 Mon Sep 17 00:00:00 2001
From: Chen <chen.zhang@ackama.com>
Date: Tue, 21 May 2024 00:31:47 +1000
Subject: [PATCH] Collapse related field by it is too long

---
 gcp/appengine/frontend3/src/styles.scss       |  5 +++
 .../src/templates/vulnerability.html          | 33 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss
index 3322757bda8..d28c391f5e1 100644
--- a/gcp/appengine/frontend3/src/styles.scss
+++ b/gcp/appengine/frontend3/src/styles.scss
@@ -867,6 +867,11 @@ dl.vulnerability-details,
   }
 }
 
+.showmore {
+	cursor: pointer;
+	font-weight: bold;
+}
+
 /** Home page */
 
 .wrapper.decorated {
diff --git a/gcp/appengine/frontend3/src/templates/vulnerability.html b/gcp/appengine/frontend3/src/templates/vulnerability.html
index 3cf93fa10e7..1648b937697 100644
--- a/gcp/appengine/frontend3/src/templates/vulnerability.html
+++ b/gcp/appengine/frontend3/src/templates/vulnerability.html
@@ -38,7 +38,7 @@ <h1 class="title">{{ vulnerability.id }}</h1>
           {% if vulnerability.related -%}
           <dt>Related</dt>
           <dd>
-            <ul class="aliases">
+            <ul class="aliases expandible-list">
               {% for related in vulnerability.related -%}
               <li>
                 {% if related | osv_has_vuln -%}
@@ -242,5 +242,36 @@ <h3 class="mdc-layout-grid__cell--span-3">
       header.click()
     });
   })
+
+  const EXPANDIBLE_LIST_DEFAULT_LENGTH = 5
+
+  const expandible_lists = document.querySelectorAll('.expandible-list')
+  expandible_lists.forEach((list) => {
+    const items = list.getElementsByTagName('li')
+    const is_expanded = list.classList.contains('expanded');
+
+    if (items.length <= EXPANDIBLE_LIST_DEFAULT_LENGTH) {
+      return
+    }
+
+    const expandible_items = [...items].slice(EXPANDIBLE_LIST_DEFAULT_LENGTH)
+    expandible_items.forEach((item)=>{
+      item.style.display = is_expanded ? 'block' : 'none'
+    });
+    
+    const toggle_button = document.createElement('span');
+    toggle_button.classList.add('showmore');
+    toggle_button.textContent = is_expanded ? 'Show Less' : 'Show More';
+    list.append(toggle_button)
+
+    toggle_button.addEventListener("click", function() {
+      const is_expanded = list.classList.contains('expanded');
+      expandible_items.forEach((item)=>{
+        item.style.display = is_expanded ? 'none' : 'block'
+      });
+      toggle_button.textContent = is_expanded ? 'Show More' : 'Show Less'
+      list.classList.toggle('expanded');
+    });
+  });
 </script>
 {% endblock -%}
\ No newline at end of file