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-uicomponentGlFilteredSearch - 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_listfeature flag in QA specs and make sure they pass (!75285 (merged)) - Unstub
vue_issues_listfeature 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-qajob passes with feature flag enabled - Turn on the
vue_issues_listfeature flag - Delete legacy code, including old
:vue_issuables_listcode (to be done in #359966 (closed))