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:

  • Add missing UI elements to the issue card (!55699 (merged))
  • Add pagination (!55699 (merged))
  • Add sorting (!56754 (merged))
  • Add bulk edit (!57230 (merged))
  • Add tabs and header action buttons (!57549 (merged))
  • Add searching and empty states (!58774 (merged))
  • Add author, assignee, and label filter tokens (!59490 (merged))
  • Add milestone, my-reaction, and confidential filter tokens (!60120 (merged))
  • Add iteration and weight filter tokens (!60148 (merged))
  • Add "email issue to project" modal (!60430 (merged))
  • Add other missing things (!60648 (merged))
  • Add epic filter token (!61054 (merged))
  • Add None/Any search tokens (!61161 (merged))
  • Add release filter token
  • Enable vue_issues_list feature flag in QA specs and make sure they pass (!75285 (merged))
  • Unstub vue_issues_list feature flag in feature specs and make sure they pass (in progress !61123 (closed))
  • Add feature tests for any untested features
  • Make sure the package-and-qa job passes with feature flag enabled
  • Turn on the vue_issues_list feature flag
  • Delete legacy code, including old :vue_issuables_list code (to be done in #359966 (closed))
Edited Apr 20, 2022 by Coung Ngo
Assignee Loading
Time tracking Loading