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
componentGlFilteredSearch
- 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))