Improve split_button.vue
Summary
The SplitButton (ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue
) is used in following components:
- new finding modal
ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
- vulnerability details header
ee/app/assets/javascripts/vulnerabilities/components/header.vue
Problems
- The SplitButton is used in the new finding modal (1) and the vulnerability details header (2) with some logic that checks whether there are multiple actions or not. If there's only 1 action, a single button is shown, otherwise the split button is rendered. We should be able to remove this duplicated logic.
- The button actions provided to the SplitButton have some duplication between the new finding modal (1) and the vulnerability details header (2).
Implementation steps
- Let the SplitButton handle the logic to either show a single button or the dropdown button style. The template for the components using it can simplified.
- Move the SplitButton component to
app/assets/javascripts/vue_shared/components
so it can be a more widely shared component - Have a SSOT for the actions that are shared (create MR and download patch) in a constants file in a shared location, like
ee/app/assets/javascripts/vue_shared/security_reports/constants.js
. Move (or keep) the other action buttons in their respective components. - What translation scope to use?
- Update specs
- Add a storybook entry
Edited by Lorenz van Herwaarden