Remove CSS in JS for the secure Vue files
Summary
When creating the security dashboard I added <style> blocks in some of the vue components so I could ship the feature quicker and not have to worry about the state that application.scss was in at the time. Things are much better now and we have GitLab UI and all sorts of helper classes that can do the job much better.
Furthermore, <style> tags in vue are becoming an anti-pattern in the GitLab codebase and seeing them in these components can lead new developers down the wrong path. Let's get this cleaned up.
Improvements
- Less confusion around whether we're supposed to use
<style>tags in vue components. - More cohesion with the rest of the codebase once we start using shared styles
- I'll have less people asking me why I took this approach
🙈
Risks
Some of the styles may not be easily replicable with out helper classes or GitLab UI components.
We should probably add them to the main application.scss or slightly re-think how we render them so they will work.
Involved components
- ee/app/assets/javascripts/security_dashboard/components/filter.vue
- ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue
- ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
-
ee/app/assets/javascripts/security_dashboard/components/vulnerability_count_list.vue(fixed in !27791 (merged)) -
ee/app/assets/javascripts/security_dashboard/components/vulnerability_count.vue(fixed in !27791 (merged)) -
ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue(fixed in !25489 (merged))
Optional: Missing test coverage
This will be entirely ~backstage and will not require any test updates.