static/frontend/vuln: add withdrawn chip for vulns

Adds a gray chip and a strikethrough to withdrawn vulns so they are more recognizable. Change-Id: I632a7606b4a4b107a05e3c8b73b7978831d2efbf Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/580195 TryBot-Result: Gopher Robot <[email protected]> Reviewed-by: Hyang-Ah Hana Kim <[email protected]> LUCI-TryBot-Result: Go LUCI <[email protected]> Reviewed-by: Damien Neil <[email protected]> Run-TryBot: Tatiana Bradley <[email protected]> kokoro-CI: kokoro <[email protected]>
golang · Apr 23, 2024 · 039f943 · 039f943
1 parent ddbbf7b
commit 039f943
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 16 deletions.
diff --git a/static/frontend/vuln/entry/entry.tmpl b/static/frontend/vuln/entry/entry.tmpl
@@ -23,7 +23,10 @@
       </li>
     </ol>
   </nav>
-  <h1 class="Vuln-title">Vulnerability Report: {{.Entry.ID}}</h1>
+  <div class="Vuln-header">
+    <h1 class="Vuln-title">Vulnerability Report: {{.Entry.ID}}</h1>
+    {{template "vuln-chips" .Entry}}
+  </div>
   {{template "vuln-details" .Entry}}
   {{$numAdvs := subtract (len .AdvisoryLinks) 1}}
   {{with .AdvisoryLinks}}

diff --git a/static/frontend/vuln/list/list.css b/static/frontend/vuln/list/list.css
@@ -9,6 +9,13 @@
   display: none;
 }
 
+.VulnList-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 .VulnList-title {
   font-size: 1.25rem;
   font-weight: 400;

diff --git a/static/frontend/vuln/list/list.min.css b/static/frontend/vuln/list/list.min.css
diff --git a/static/frontend/vuln/list/list.min.css.map b/static/frontend/vuln/list/list.min.css.map
diff --git a/static/frontend/vuln/list/list.tmpl b/static/frontend/vuln/list/list.tmpl
@@ -40,9 +40,12 @@
     <p>No reports found. <a href="/vuln/list">View all reports.</a></p>
   {{else}}
     {{range .Entries}}
-      <h2 class="VulnList-title">
-        <a href="/vuln/{{.ID}}">{{.ID}}</a>
-      </h2>
+      <div class="VulnList-header">
+        <h2 class="VulnList-title{{if .Withdrawn}} Vuln-titleWithdrawn{{end}}" >
+          <a href="/vuln/{{.ID}}">{{.ID}}</a>
+        </h2>
+        {{template "vuln-chips" .}}
+      </div>
       <div class="VulnList-details">
         {{template "vuln-details" .}}
       </div>

diff --git a/static/frontend/vuln/main/main.css b/static/frontend/vuln/main/main.css
@@ -12,6 +12,13 @@
 .VulnMain-title {
   font-size: 1.25rem;
   font-weight: 400;
+}
+
+.VulnMain-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
   margin: 0 0 0.5rem;
 }
 

diff --git a/static/frontend/vuln/main/main.min.css b/static/frontend/vuln/main/main.min.css
diff --git a/static/frontend/vuln/main/main.min.css.map b/static/frontend/vuln/main/main.min.css.map
diff --git a/static/frontend/vuln/main/main.tmpl b/static/frontend/vuln/main/main.tmpl
@@ -32,9 +32,12 @@
     <h2>Recent Reports</h2>
     <div class="VulnMain-recent">
       {{range .Entries}}
-        <h3 class="VulnMain-title">
-          <a href="/vuln/{{.ID}}">{{.ID}}</a>
-        </h3>
+        <div class="VulnMain-header">
+          <h3 class="VulnMain-title{{if .Withdrawn}} Vuln-titleWithdrawn{{end}}">
+            <a href="/vuln/{{.ID}}">{{.ID}}</a>
+          </h3>
+          {{template "vuln-chips" .}}
+        </div>
         <div class="VulnMain-details">
           {{template "vuln-details" .}}
         </div>

diff --git a/static/frontend/vuln/vuln.css b/static/frontend/vuln/vuln.css
@@ -14,6 +14,21 @@
   margin-bottom: 1rem;
 }
 
+.Vuln-titleWithdrawn {
+  text-decoration: line-through;
+}
+
+.Vuln-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.Vuln-header span {
+  margin-bottom: 1rem;
+}
+
 .Vuln-details {
   display: flex;
   flex-direction: column;

diff --git a/static/frontend/vuln/vuln.min.css b/static/frontend/vuln/vuln.min.css
diff --git a/static/frontend/vuln/vuln.min.css.map b/static/frontend/vuln/vuln.min.css.map
diff --git a/static/frontend/vuln/vuln.tmpl b/static/frontend/vuln/vuln.tmpl
@@ -66,3 +66,9 @@
     <button class="go-Button">Submit</button>
   </form>
 {{end}}
+
+{{define "vuln-chips"}}
+  {{if .Withdrawn}}
+    <span class="go-Chip go-Chip--subtle">withdrawn</span>
+  {{end}}
+{{end}}
diff --git a/tests/screentest/testdata/ci/vuln-540x1080.a.png b/tests/screentest/testdata/ci/vuln-540x1080.a.png
diff --git a/tests/screentest/testdata/ci/vuln-entry-withdrawn-540x1080.a.png b/tests/screentest/testdata/ci/vuln-entry-withdrawn-540x1080.a.png
diff --git a/tests/screentest/testdata/ci/vuln-entry-withdrawn.a.png b/tests/screentest/testdata/ci/vuln-entry-withdrawn.a.png
diff --git a/tests/screentest/testdata/ci/vuln-list-540x1080.a.png b/tests/screentest/testdata/ci/vuln-list-540x1080.a.png
diff --git a/tests/screentest/testdata/ci/vuln-list.a.png b/tests/screentest/testdata/ci/vuln-list.a.png
diff --git a/tests/screentest/testdata/ci/vuln.a.png b/tests/screentest/testdata/ci/vuln.a.png