Finalize single CVE page layout

[mtruj013]

Done

• Addressed this list of needed fixes and implemented switch functionality for toggling unmaintained releases

QA

• View the site locally in your web browser at:
  • https://ubuntu-com-14177.demos.haus/security/CVE-2022-28737
  • https://ubuntu-com-14177.demos.haus/security/CVE-2023-5678
  • https://ubuntu-com-14177.demos.haus/security/CVE-2011-1497
    • Be sure to test on mobile, tablet and desktop screen sizes
• Check against the design

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-13137

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.57%. Comparing base (d9abba5) to head (46ca361).
Report is 204 commits behind head on cve-overhaul.

Additional details and impacted files

@@               Coverage Diff                @@
##           cve-overhaul   #14177      +/-   ##
================================================
- Coverage         69.64%   69.57%   -0.07%     
================================================
  Files               109      120      +11     
  Lines              3126     3412     +286     
  Branches           1089     1172      +83     
================================================
+ Hits               2177     2374     +197     
- Misses              924     1013      +89     
  Partials             25       25              

see 11 files with indirect coverage changes

[mtruj013]

Ready for you @juanruitina ! Lmk what you think about the switch/notification functionality here https://ubuntu-com-14177.demos.haus/security/CVE-2011-1497, I had to guess as to how to handle a cve wherein none of the statuses are for maintained releases. Without a fallback for this (doesn't necessarily need to be this one) the user would land on the page and see an empty table unless they toggle the switch which doesn't seem super intuitive

[juanruitina]

Aaaaaa so cool. I think the fallback for CVEs that don't affect maintained releases is great, no changes there.

Some comments:

• Remove the <div class="p-section--shallow"> div wrapping the Status heading, it's adding excessive padding.
• Please sort the releases for each package in reverse chronological order
• Make sure LTS are marked as such ("24.04 LTS", same as in the filters)
• When "Show unmaintained releases" is unchecked, all supported releases should be visible, including the ones that require Pro (ESM). In other words, we should show the same ones that we do on the filters by default.
• Please replace the "vulnerable" icon with p-icon--error, I agreed on that with Lyubo until we come up with new icons.
• Please don't use icons for "ignored"
• Tooltips are not implemented yet, I documented them here, reach out if you have questions.
• Alignment is not great when text wraps in statuses, next line should be aligned to text, not to icon, example:

• In statuses, can we space icon, status and description a bit more? It should make them more discernible. Half a rem would do:

• When CVEs have a rationale for their priority (like this one), the "Why this priority?" link should be an anchor link pointing to the "Why is this CVE ??? priority?" section in the page. In that section, there should be a link to the Priority levels section in the About page: https://ubuntu-com-14177.demos.haus/security/cves/about#priority You can follow the designs for this:

[mtruj013]

Thanks @juanruitina, could you take another look?

[juanruitina]

Some minor stuff on responsiveness:

• Horizontal scrolling isn't working in the status table, can you check?
• Shall we maybe make columns equal in the "Severity score breakdown" table on mobile? It looks unbalanced:

• USN also don't wrap great. It's a pity we don't use display: flex; flex-wrap: wrap; for p-inline-list instead of inlining children, such headache.

• In the tooltips: can we get rid of the weird gap in the second line?

There's also something that I don't really like: the "Ubuntu Pro" chips are links, which is semantically correct, but Vanilla adds an underline on hover, and doesn't show the chip's hover styles that it shows when they are buttons. I've submitted it as a bug in the Vanilla repo: canonical/vanilla-framework#5317, it's not a blocker for this though.

[juanruitina]

Thank you for making the many changes, nice work! LGTM

[immortalcodes]

LGTM! Just small issues with the side navigation not highlighting the current heading.
Please fix the checks and it would be good to go.