Reduce markup duplication in dependencies table row component

Summary

Context

This is a follow up issue coming out from this discussion: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14905#note_211857417

Gist

The component that is responsible for rendering a table row on the security dashboard's dependency list contains markup that is repeated throughout the file:

• https://gitlab.com/gitlab-org/gitlab-ee/blob/master/ee%2Fapp%2Fassets%2Fjavascripts%2Fdependencies%2Fcomponents%2Fdependencies_table_row.vue

Eg.:

<div class="xyz">
  <div class="table-mobile-header" role="rowheader">{{ s__('xyz|xyz') }}</div>
  <div class="table-mobile-content">
    <a :href="xyz">{{ xyz }}</a>
  </div>
</div>

Improvements

Remove the markup duplication by potentially abstracting some of the repeated pieces into smaller components.

Risks

Involved components

• ee/app/assets/javascripts/dependencies/components/dependencies_table_row.vue