Update dependencies table UI

Quick link to Implementation plan.

Our current dependencies table is difficult to read and cluttered.

Pain points:

• At first glance, difficult to see any vulnerabilities; as they are secondary: 1) behind a tab, 2) behind a expand/collapse in <tr>
• Status is confusing (and possibly not accurate?); redundant Safe; takes a lot of space and is unclear communication
• No way to see latest version
• Cluttered/lots of info not organized well; poor readability
• Vulns do not link to information modal and/or object page (This will be addressed by #214094 (closed).)

Proposal

📽 video walkthrough proposal context and iteration review

ideation iterations

Implementation plan

• frontend
  • Default sort order to Severity order to make sure vulnerable components show up first !28654 (merged)
  • Restructure table UI !28796 (merged)
    • Combine component name and version columns
    • Add warning label with # of vulns detected on vulnerable component rows gitlab-ui!1248 (merged)
    • Add doc icon to location column
    • Extract DependencyVulnerabilities component !28671 (merged)
    • [-] Expand vulnerable component rows by default It turns out that this can make the initial view very cluttered, so we're not changing this (yet).
  • Refactor Vuex store !29055 (merged)
    • The Vuex store is written in such a way as to accommodate two lists (All and Vulnerable components). Reverting back to one list means some complexity can probably be removed. This might instead be done in #212867 (closed)
  • Change pipeline subtext to Based on the latest successful scan • <time stamp> !28665 (merged)
• documentation !29593 (merged)
  • Update the Dependency List's screenshot and table column description