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 <noreply+kokoro@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
LUCI-TryBot-Result: Go LUCI <golang-scoped@luci-project-accounts.iam.gserviceaccount.com>
Reviewed-by: Zvonimir Pavlinovic <zpavlinovic@google.com>
diff --git a/static/frontend/unit/_header.tmpl b/static/frontend/unit/_header.tmpl
index c888e84..e271db5 100644
--- a/static/frontend/unit/_header.tmpl
+++ b/static/frontend/unit/_header.tmpl
@@ -237,7 +237,28 @@
/> 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"
+ />
+ 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
diff --git a/tests/screentest/seed.txt b/tests/screentest/seed.txt
index 6938c92..f3876c0 100644
--- a/tests/screentest/seed.txt
+++ b/tests/screentest/seed.txt
@@ -17,6 +17,7 @@
github.com/jackc/pgx/v4@v4.11.0
github.com/jba/bit@v0.2.0
github.com/julieqiu/api-demo@all
+github.com/stacklok/minder@v0.0.47
github.com/tendermint/tendermint@v0.34.10
github.com/tendermint/tendermint@v0.34.11
gocloud.dev@v0.22.0
diff --git a/tests/screentest/testcases.ci.txt b/tests/screentest/testcases.ci.txt
index b56738e..9ba7d4f 100644
--- a/tests/screentest/testcases.ci.txt
+++ b/tests/screentest/testcases.ci.txt
@@ -4,6 +4,10 @@
# 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 @@
pathname /search?q=github.com%2Fnoresults&m=vuln
capture viewport
capture viewport 540x1080
+
+test module with one vuln
+pathname /github.com/stacklok/minder@v0.0.47
+wait {{$ready}}
+eval {{$scrollTop}}
+eval {{$hideElements}}
+capture viewport
+capture viewport 540x1080
diff --git a/tests/screentest/testdata/ci/module-with-one-vuln-540x1080.a.png b/tests/screentest/testdata/ci/module-with-one-vuln-540x1080.a.png
new file mode 100644
index 0000000..54c4514
--- /dev/null
+++ b/tests/screentest/testdata/ci/module-with-one-vuln-540x1080.a.png
Binary files differ
diff --git a/tests/screentest/testdata/ci/module-with-one-vuln.a.png b/tests/screentest/testdata/ci/module-with-one-vuln.a.png
new file mode 100644
index 0000000..981f766
--- /dev/null
+++ b/tests/screentest/testdata/ci/module-with-one-vuln.a.png
Binary files differ
diff --git a/tests/screentest/testdata/ci/vuln-stdlib-module-540x1080.a.png b/tests/screentest/testdata/ci/vuln-stdlib-module-540x1080.a.png
index f9e1397..a5e35de 100644
--- a/tests/screentest/testdata/ci/vuln-stdlib-module-540x1080.a.png
+++ b/tests/screentest/testdata/ci/vuln-stdlib-module-540x1080.a.png
Binary files differ
diff --git a/tests/screentest/testdata/ci/vuln-stdlib-module.a.png b/tests/screentest/testdata/ci/vuln-stdlib-module.a.png
index 1ff2079..1ccb728 100644
--- a/tests/screentest/testdata/ci/vuln-stdlib-module.a.png
+++ b/tests/screentest/testdata/ci/vuln-stdlib-module.a.png
Binary files differ
diff --git a/tests/screentest/testdata/ci/vuln-toolchain-module-540x1080.a.png b/tests/screentest/testdata/ci/vuln-toolchain-module-540x1080.a.png
index 12da325..d31bda6 100644
--- a/tests/screentest/testdata/ci/vuln-toolchain-module-540x1080.a.png
+++ b/tests/screentest/testdata/ci/vuln-toolchain-module-540x1080.a.png
Binary files differ
diff --git a/tests/screentest/testdata/ci/vuln-toolchain-module.a.png b/tests/screentest/testdata/ci/vuln-toolchain-module.a.png
index d8f81e2..1985cce 100644
--- a/tests/screentest/testdata/ci/vuln-toolchain-module.a.png
+++ b/tests/screentest/testdata/ci/vuln-toolchain-module.a.png
Binary files differ
