Implement Solution Card

Structure

Vulnerability Details Page

vulnerability.vue
- footer
-- solution_card.vue

Modal (FF off)

FF: pipeline_security_dashboard_graphql

modal.vue
- solution_card_vuex.vue

Modal (FF on)

Current:

vulnerablity_finding_modal
- solution_card_vuex.vue

Proposal:

Instead of re-using the solution_card_vuex.vue, let's create a new component to make the transition easier and cleaner.

- solution_card_vuex.vue
+ solution_card_graphql.vue

Design

To avoid too much deviation, I'll maintain the same design of what's being displayed in production currently:

Future Iteration

The design was updated with this MR > #382205 (closed). So we should match that design. We can solve this iteratively after the refactoring is complete > #388823

before	after

Implementation Plan

1. Implement solution_card_modal.vue and display the solution information
2. Adding Remediation will be done in a follow-up> #382205 (closed)
3. Adding "showCreateMergeRequestMsg" in a follow-up > #385203 (closed)

Helpful Discovery

The isStandaloneVulnerability prop is never used in the solution_card_vuex.vue, so we can get rid of it > https://gitlab.com/gitlab-org/gitlab/-/blob/f50075762cf33d3841b88bb191770776b07ede77/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue#L210-L215https://gitlab.com/gitlab-org/gitlab/-/blob/f50075762cf33d3841b88bb191770776b07ede77/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue#L210

// modal.vue
      <solution-card // solution_card_vuex.vue
        :solution="solution"
        :remediation="remediation"
        :has-mr="vulnerability.hasMergeRequest"
        :has-download="canDownloadPatchForThisVulnerability"
      />