Skip to content

Create Vue component for filtered search bar

The filtered search bar that is used for issues, merge requests, issue boards, and epics consists of

  • HAML template (app/views/shared/issuable/_search_bar.html.haml)
  • a few JavaScript classes (app/assets/javascripts/filtered_search)
  • a few more JavaScript classes (app/assets/javascripts/boards/filtered_search_boards.js, ee/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js, ee/app/assets/javascripts/issues_analytics/filtered_search_issues_analytics.js)
  • Ruby helpers (app/helpers/search_helper.rb)

This makes it impossible to combine it with other Vue components and prevents the pages that are using it from becoming Vue apps. We should therefore create a reusable Vue component (potentially in http://gitlab.com/gitlab-org/gitlab-ui).

Places that the search filter bar appears:

  • Issues list - Group and project and dashboard
  • Merge requests list - Group and project and dashboard
  • Epics list
  • Issue board filter bar - Group and project
  • Issue board add issues modal - In project issue board only
Edited by Victor Wu