Skip to content

Refactor issues list page from Haml to Vue

The issues list page (e.g. /gitlab-org/gitlab/-/issues/) is currently in Haml. We need to refactor it to Vue so we can:

  • Add OR/multi-select filtering, which requires the use of the gitlab-ui component GlFilteredSearch
  • Add new features more easily, such as adding support for default issue types

The refactoring is done under the feature flag vue_issues_list which is defaulted to off.

There was an earlier attempt at refactoring the issues page under the vue_issuables_list feature flag, which renders the issue cards in Vue. However, the difference between this and the vue_issues_list feature flag is that the vue_issues_list flag additionally renders 1) the open/closed/all tabs, 2) action buttons including the csv import/export buttons, 3) search bar including sort dropdown in Vue (everything is rendered in Vue except the bulk edit sidebar which is still in Haml + jQuery). The reason why we weren't able to continue using the earlier vue_issuables_list feature flag is because a reusable issuable list Vue app was created (issuable_list_root.vue) and became the SSoT reusable component for this kind of issues list UI pattern. Unfortunately, the code behind the vue_issuables_list feature flag doesn't use issuable_list_root.vue and it was easier to start from scratch with a new feature flag.

Tasks:

Edited by Coung Ngo