Refactor labels management from HAML to Vue - nav bar component
Summary
Part of &7139
We want the start the process of refactoring the labels management in Groups, Projects, and Admin from HAML to Vue. This issue is to refactor the label nav bar (with search and sort) from HAML to Vue. We should introduce a nav_bar.vue
component in app/assets/javascripts/labels/components
.
Improvements
- Be able to use GitLab UI components
- More flexibility to improve search and sorting later down the road
- Remove HAML and jQuery code
Risks
- Introduce sort/search related bugs
Involved components
- app/views/shared/labels/_nav.html.haml
- spec/features/groups/labels/sort_labels_spec.rb
- spec/features/projects/labels/sort_labels_spec.rb
Implementation plan
- Introduce a feature flag
- Add mount point element:
- Create
nav_bar.vue
inapp/assets/javascripts/labels/components/
- Use
GlNav
to render tabs - Use
GlSearchBoxByClick
for search box - Use
GlSorting
for sort dropdown.
- Use
- Create an
index.vue
file inapp/assets/javascripts/labels/components/index.vue
that rendersapp/assets/javascripts/labels/components/nav_bar.vue
- Create
index.js
file withinitLabelsIndexApp
function. This function mountsindex.vue
- Update feature specs
Edited by Peter Hegman