[Follow-up] Create validity-check-badge Component and refactor vulnerability_details

The goal is to move the logic from vulnerability_details.vue to live inside its own component within shared as we will need to display the token status badge in multiple locations. We can use severity-badge as an example

Here are a few optimizations we could make:

!188942 (comment 2466336624)

!188942 (comment 2466336628)

As discussed here: !187101 (comment 2443890610)

We want to update the hex values of COLORS so that they import GL_COLOR_RED_600 etc. from gitlab-ui design tokens.

Tokens with the status unknown are displayed in the vulnerability report as unknown. This doesn't communicate that these tokens should still be treated as a leak and appropriate action must be taken. To better communicate the severity of the leak, unknown status should be displayed as possibly active secret.

References

• #524544 (comment 2427237368)
• #479341[Validity_check_filter.png] (comment 2426677759)