Skip to content
GitLab
Next
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • GitLab GitLab
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 44,761
    • Issues 44,761
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 1,331
    • Merge requests 1,331
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Container Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • GitLab.orgGitLab.org
  • GitLabGitLab
  • Issues
  • #322755
Closed
Open
Issue created Feb 24, 2021 by Coung Ngo@cngoDeveloper20 of 20 checklist items completed20/20 checklist items

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
Assign to
Time tracking