## Problem statement There are a number of group and project lists throughout GitLab, but they don't all look and function the same way. Furthermore, some of them are built with HAML/Vanilla JavaScript, and some are built with Vue. One big difference between the admin area project list and other project lists in GitLab is that deleting a project does not follow the [delayed deletion flow](https://docs.gitlab.com/user/project/working_with_projects/#delete-a-project). This causes confusion for users and can lead to accidental data loss. We've developed a set of Vue components for group and project lists that are compliant with our design system, have functionality such as delayed deletion built in, and are easily used in multiple places. Migrating the admin area projects list to these Vue components allows us to do the following: - Add the [delayed deletion flow](https://docs.gitlab.com/user/project/working_with_projects/#delete-a-project) that is used other places in the product. - Reduce technical debit by removing a mix of HAML/Vanilla JavaScript that is hard to maintain and add new dynamic features (bulk editing for example). - Improve the user experience by being able to filter, sort, paginate and use project actions (delete, restore, etc) without full page reloads. - Have a consistent groups and projects UX experience across the product. - Add features to one place and have them propagate to all group and project lists. For example if we want to add a new action such as leaving the Group or project we can add that in one place and it will show on all the lists. Same goes for filters, we can add them to one place and make them available on all lists. ## DRI @smaglangit ## Exit criteria - Admin area -> Projects is rendered with shared Vue components ([projects_list.vue](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue)) - Legacy HAML/vanilla JS code is removed ## Start and estimated end date - Start: Jun 14, 2025 - Estimated end: Sep 12, 2025 ## Proposal We should migrate the admin area projects list (`/admin/projects`) to `~/vue_shared/components/projects_list/projects_list.vue`. This will reduce technical debit, consolidate code to one shared component, and improve UX parity across the product. ## Implementation guide See child issues in order from top to bottom. See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/190590 for a POC.