Improve UI in security reports
What does this MR do?
-
Make inline buttons right aligned/floated -
Introduce actual colored icons for the -
and+
and have less screaming red text
Screenshots (if relevant)
How to test locally
@dimitrieh I don't have these reports set up locally, in order to test this I hacked around a little:
in this file ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
, do the following
- line 44 change the content to return true:
shouldRenderDockerReport() {
return true;
},
- line 338 change the content with:
this.mr.setDockerReport({
unapproved: [
'CVE-2017-12944',
'CVE-2017-16232',
],
vulnerabilities: [
{
vulnerability: 'CVE-2017-12944',
namespace: 'debian:8',
severity: 'Medium',
},
{
vulnerability: 'CVE-2017-16232',
namespace: 'debian:8',
severity: 'Negligible',
},
{
vulnerability: 'CVE-2014-8130',
namespace: 'debian:8',
severity: 'Negligible',
},
],
});
- Just to check the success icon, on line 408 add
:resolved-issues="mr.dockerReport.approved"
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary [ ] Documentation created/updated[ ] API support added[ ] Tests added for this feature/bug- Review
-
Has been reviewed by UX -
Has been reviewed by Frontend [ ] Has been reviewed by Backend[ ] Has been reviewed by Database
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Squashed related commits together -
Internationalization required/considered -
If paid feature, have we considered GitLab.com plan and how it works for groups and is there a design for promoting it to users who aren't on the correct plan
What are the relevant issue numbers?
Edited by Dimitrie Hoekstra