Create a component for truncating filepaths

We need a component for secure that truncates filepaths intelligently.

Consider the following string, ee/app/assets/javascripts/vue_shared/security_reports/store/utils.js:

1. Truncate end: ee/app/assets/javascript…
2. Truncate start: …y_reports/store/utils.js
3. Smart truncation: ee/app/…/store/utils.js

If we truncate the end of the string, we cut out the most important imformation. If we truncate the start of the string, we could also cut out important information. The final solution would be ideal, but tricky to impliment.

I've made a quick CSS POC that should help getting started. https://codepen.io/samdbeckham/pen/JjYpNMd

cc @gitlab-org/secure/frontend

Related: gitlab#196148 (closed)