Enforce JSON schema validation for generic security report - FE
<!--
Implementation issues are used break-up a large piece of work into small, discrete tasks that can
move independently through the build workflow steps. They're typically used to populate a Feature
Epic. Once created, an implementation issue is usually refined in order to populate and review the
implementation plan and weight.
Example workflow: https://about.gitlab.com/handbook/engineering/development/threat-management/planning/diagram.html#plan
-->
## Why are we doing this work
<!--
A brief explanation of the why, not the what or how. Assume the reader doesn't know the
background and won't have time to dig-up information from comment threads.
-->
Display error(s) to customers on the Pipeline Security Report when security report schema does not pass validation.
From @andyvolpe in [this discussion](https://gitlab.com/gitlab-org/gitlab/-/issues/284062#note_504209120):
> **For the MVC**, add an alert outside of and above the scan details section of the security tab (/pipeline/00000000/security). Since the scan details can be expanded and collapsed, we'd risk the user missing the alert if we nested it with that information. I'll upload a quick mock into the design section of this issue.
## Relevant links
Design mocks:
* https://gitlab.com/gitlab-org/gitlab/-/issues/284062/designs/a_01-pipeline-schema-error.png
* https://gitlab.com/gitlab-org/gitlab/-/issues/284062/designs/a_02-pipeline-schema-error_multiple-in-one-job.png
<!--
Information that the developer might need to refer to when implementing the issue.
- [Design Issue](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>)
- [Design 1](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>/designs/<image>.png)
- [Design 2](https://gitlab.com/gitlab-org/gitlab/-/issues/<id>/designs/<image>.png)
- [Similar implementation](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/<id>)
-->
## Non-functional requirements
<!--
Add details for required items and delete others.
-->
- [ ] Documentation:
- [ ] Feature flag:
- [ ] Performance:
- [ ] Testing:
## Implementation plan
<!--
Steps and the parts of the code that will need to get updated. The plan can also
call-out responsibilities for other team members or teams.
-->
- [ ] ~frontend
- [x] Update `ee/app/assets/javascripts/security_dashboard/graphql/queries/pipeline_security_report_summary.query.graphql` to include the `name` and `error` field for each scan (see example query below)
- [x] Add logic to `ee/app/assets/javascripts/security_dashboard/components/pipeline_security_dashboard.vue`
- [x] If there are any errors then display the alert
- [x] For each scanner with an error add an expandable section (using `GlAccordion` and `GlAccordionItem`)
- [x] Add an error count to each section header
- [x] Show all errors within each section
- [ ] Add specs
### Example Query
```graphql
{
project(fullPath: $fullPath) {
name
pipeline(iid: $iid) {
securityReportSummary {
sast {
vulnerabilitiesCount
scans {
nodes {
name
errors
}
}
}
}
}
}
}
```
### Note
The GraphQL query is currently behind a feature flag. To enable it run
```bash
echo "Feature.enable(:pipeline_security_dashboard_graphql)" | rails c
```
### Verification steps
- Create blank project on GitLab.com
- Add `.gitlab-ci.yml` file with the following content;
```yml
.test-sast:
variables:
VALIDATE_SCHEMA: "true"
artifacts:
reports:
sast: "${CI_JOB_NAME}.json"
script:
- echo "$REPORT_CONTENT" > "${CI_JOB_NAME}.json"
test-sast-1:
extends: .test-sast
variables:
REPORT_CONTENT: '{"foo": "BAR"}'
test-sast-2:
extends: .test-sast
variables:
REPORT_CONTENT: '{"version": "14.0.0", "vulnerabilities": []}'
dast:
script:
- wget -O "${CI_JOB_NAME}.json" https://gitlab.com/gitlab-org/security-products/dast/-/raw/main/test/end-to-end/expect/test_baseline_api_scan.json
artifacts:
reports:
dast: "${CI_JOB_NAME}.json"
```
- Verify that you can see the schema errors related to `test-sast-1` build.
<!--
Workflow and other relevant labels
~"group::" ~"Category:" ~"GitLab Ultimate"
-->
<!--
Other settings you might want to include when creating the issue.
-->
issue