Compliance report merge request violations frontend MVP
### Problem to solve
The current compliance report only shows the most recent merged merge requests. This isn't very useful and a more useful report would be to show the merge request violations for each project. See the discovery issue for more details and discussion https://gitlab.com/gitlab-org/gitlab/-/issues/327370.
Parent epic: https://gitlab.com/groups/gitlab-org/-/epics/5237
Backend issue: https://gitlab.com/gitlab-org/gitlab/-/issues/327119
### Intended users
* [Cameron (Compliance Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#cameron-compliance-manager)
### User experience goal
Users should be able to use the compliance report to get an understanding of all of the violations that apply to their projects, not just the latest violation.
### Proposal
Display all violations that have occurred for a given project.
Prioritization suggestion: Do this work alongside the [filtering issue](https://gitlab.com/gitlab-org/gitlab/-/issues/299358) to allow users to easily filter and find violations that they care about.
| Design | Drawer open |
|--------|--------|
|  |  |
### Implementation plan
**GraphQL structure**
```graphql
query getComplianceViolations($fullPath: ID!, $filters: ComplianceViolationInput, $sort: ComplianceViolationSort) {
group(fullPath: $fullPath) {
id
mergeRequestViolations(filters: filters, sort: sort) {
nodes {
id
severityLevel
reason
violatingUser {
id
name
username
state
avatarUrl
webUrl
}
mergeRequest {
id
title
mergedAt
milestone {
id
title
}
webUrl
author {
id
name
username
state
avatarUrl
webUrl
}
mergeUser {
id
name
username
state
avatarUrl
webUrl
}
# Requires https://gitlab.com/gitlab-org/gitlab/-/issues/352029 to be merged
committers {
nodes {
id
name
username
state
avatarUrl
webUrl
}
}
participants {
nodes {
id
name
username
state
avatarUrl
webUrl
}
}
approvedBy {
nodes {
id
name
username
state
avatarUrl
webUrl
}
}
ref: reference
fullRef: reference(full: true)
sourceBranch
sourceBranchExists
targetBranch
targetBranchExists
headPipeline {
detailedStatus {
id
icon
favicon
text
label
group
tooltip
hasDetails
detailsPath
}
}
project {
id
avatarUrl
name
webUrl
complianceFrameworks {
nodes {
id
name
description
color
}
}
}
}
}
}
}
}
```
**Application core**
_Without these the application cannot fully function or be considered MVP complete._
1. [x] Create a new merge request violations application that's behind a default off ~"feature flag" (includes mock API). Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342896 :two:
1. [x] Add a filter to the top of the table. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/299358 :five:
1. [x] Make the table columns sortable. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/299369 :two:
1. [x] On clicking a row, open the existing compliance [`drawer.vue`](https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/compliance_dashboard/components/drawer.vue) component. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342898 :one:
1. [x] Render compact pagination using [`GlPagination`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-pagination--default) when there is a previous / next page. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342899 :two:
1. [x] Consume the GraphQL endpoint from the [backend](https://gitlab.com/gitlab-org/gitlab/-/issues/327119). Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342897 :two:
**Table components**
1. [x] Severity component. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342900 :one:
1. [x] Violation component. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342901 :two:
1. [x] Merge request name and date components. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342902 :one:
1. [x] Once all of the above are completed, update the documentation. :one: MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/80296
epic