static/frontend: condense vuln display on module pages

When a module is affected by many vulnerabilities, the current
display can become overwhelming because details are listed for
each vuln.

If there are 2 or more vulns, condense the the message to
"Affected by GO-XXXX-YYYY and N other vulnerabilities",
with the option to click a button and see all the vulns.

Change-Id: I5e4e6712aa6038d390ed70b339a982f7684a986f
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/595561
kokoro-CI: kokoro <[email protected]>
TryBot-Result: Gopher Robot <[email protected]>
LUCI-TryBot-Result: Go LUCI <[email protected]>
Reviewed-by: Zvonimir Pavlinovic <[email protected]>

static/frontend/unit/_header.tmpl

@@ -237,7 +237,28 @@
       />&nbsp; Redirected from <span data-test-id="redirected-banner-text">{{.}}</span>.
     </div>
   {{- end -}}
-  {{range .Vulns}}{{template "vuln-message" .}}{{end}}
+   {{- with $vs := .Vulns -}}
+      {{if eq (len $vs) 1}}
+        <div>{{template "vuln-message" (index $vs 0)}}</div>
+      {{else}}
+        <details class="js-versionDetails">
+            <summary class="go-Message go-Message--alert">
+            <img
+                class="go-Icon"
+                height="24"
+                width="24"
+                src="/static/shared/icon/alert_gm_grey_24dp.svg"
+                alt="Alert"
+            />&nbsp;
+            Affected by <a href="/vuln/{{(index $vs 0).ID}}">{{(index $vs 0).ID}}</a>
+            {{with $more := subtract (len $vs) 1}} and {{$more}} other vulnerabilities{{end}}
+          </summary>
+          <div>
+            {{range .}}{{template "vuln-message" .}}{{end}}
+          </div>
+        </details>
+    {{end}}
+  {{- end -}}
   {{- if .Unit.Deprecated -}}
     <div class="go-Message go-Message--warning">
       <img

tests/screentest/seed.txt

@@ -17,6 +17,7 @@ github.com/hashicorp/vault/api/auth/kubernetes@latest
 github.com/jackc/pgx/[email protected]
 github.com/jba/[email protected]
 github.com/julieqiu/api-demo@all
+github.com/stacklok/[email protected]
 github.com/tendermint/[email protected]
 github.com/tendermint/[email protected]
 [email protected]

tests/screentest/testcases.ci.txt

@@ -4,6 +4,10 @@ output tests/screentest/testdata/ci
 # Prevent dynamic readme bages from rendering
 block https://codecov.io/* https://travis-ci.com/*
 
+{{$ready := "[role='treeitem'][aria-selected='true']"}}
+{{$hideElements := "document.querySelector(\"[data-test-id='UnitHeader-importedby']\")?.remove();document.querySelector(\"[data-test-id='meta-link-depsdev']\")?.remove();"}}
+{{$scrollTop := "window.scrollTo({top:0});"}}
+
 test vuln
 pathname /vuln/
 capture fullscreen
@@ -58,3 +62,11 @@ test vuln no results
 pathname /search?q=github.com%2Fnoresults&m=vuln
 capture viewport
 capture viewport 540x1080
+
+test module with one vuln
+pathname /github.com/stacklok/[email protected]
+wait {{$ready}}
+eval {{$scrollTop}}
+eval {{$hideElements}}
+capture viewport
+capture viewport 540x1080