Explicitly write markup in the vulnerability-details component
- Discussion for context: https://gitlab.com/gitlab-org/gitlab/issues/8146#note_214915760
- Related issues: https://gitlab.com/gitlab-org/gitlab/issues/8146, https://gitlab.com/gitlab-org/gitlab/issues/14006
- Affected component: [vulnerability-details](https://gitlab.com/gitlab-org/gitlab/blob/f5d6f4f30b7d5ebccb51ca4c8a1bb1be2000191d/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue)
The `vulnerability-details` components currently consists in a loop that iterates over the `details` object and conditionally renders markup depending on the keys in the object.
This results in a component that is hard to read and to maintain because we end up with a lot of nested conditions to handle every edge case. Given the amount of edge cases in the loop, it would be simpler to explicitly write the markup for every key to make the template more readable and to cleanup unnecessary methods.
issue