Frontend: Dependency List - Path Viewer Component

This component will be consumed by #227326 (closed) (Frontend: Show dependency path in the dependency list and vulnerabilities)

• To be used in Location cell renderer in the Dependency List

Design

https://gitlab.com/gitlab-org/gitlab/uploads/0256edff3677c1f4b5aee39c7d068238/all.png

Implementation Plan

• Create a partial dependency path viewer template, handle
  • Long Path - Show 2 sub path and X more
  • Short Path - Show 2 (or less) sub path
  • Top-highest level (top level)
  • Blank (When path is unavailable)
• Add a popover for long path (as per the design ☝)
• Write specs

References

• Similar/prior art: license_component_links.vue

Testing

Engineer to add appropriate unit tests to test component functionality.

SET to add applicable test / assertions to the security dashboard end to end test.