## 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. We've developed a set of Vue components for group and project lists that are compliant with our design system and easily used in multiple places. Migrating the groups dashboard to these Vue components allows us to do the following: - 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. - Improve the deletion flow to make it more clear how delayed deletion works. - 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. - As we continue to add functionality to these shared Vue components, future migrations will become easier. For example, this epic had 24 issues but https://gitlab.com/groups/gitlab-org/-/epics/17783+ has 5 because we have built all of the logic into the Vue components. ## DRI @peterhegman ## Participants @smaglangit ## Exit criteria - Your work -> Groups is rendered with shared Vue components ([nested_groups_projects_list.vue](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/nested_groups_projects_list/nested_groups_projects_list.vue)) - Legacy code is removed ## Development Log See https://gitlab.com/groups/gitlab-org/-/epics/8487 ## Status Update See https://gitlab.com/groups/gitlab-org/-/epics/8487 ## Start and estimated end date - Start: Feb 15, 2025 - Estimated end: Jul 11, 2025 ## Proposal * ~~Add a `Contributed` tab as the default selected tab that displays groups the user has contributed to~~ - moved to https://gitlab.com/gitlab-org/gitlab/-/issues/502481 * Add a `Member` tab that displays all the groups that the user has access to * Add an `Inactive` tab that displays the groups pending deletion, and archived groups in the future  ## Benefits for users 1. `Edit` and `Delete` actions can be added consistently to groups in the list view, assuming the user has the appropriate permissions. 2. A more clear deletion flow. Deleted groups move to the `Inactive` tab where they can be restored or deleted permanently. This will be the standard deletion flow on all lists views. 3. A unified experience with other list pages such as Your Work \> Projects, Your Work \> Groups, Explore \> Projects, Explore \> Groups and Organization \> Groups and Projects. 4. Foundation to add more advanced sorting and filtering