Migrate Your Work > Projects list to Vue and modernize
## Problem statement Currently, the `Your Work > Projects` list view displays all projects where the user is a member, regardless of their actual engagement with those projects. This can result in a cluttered and less relevant project dashboard. ### Current behavior - The "Your projects" view shows all projects the user is a member of - Current sorting option "Last Updated" reflects updates from any user, not specific to the current user ### Proposed solution Enhance the relevance of the project list by: - Adding a new sort option "Last touched by me" that prioritizes projects based on the current user's interaction history - Prioritizing projects the user has actively engaged with at the top of the list - Maintaining visibility of all projects where the user is a member (for discoverability, especially for new users) This approach balances personalization with discoverability, as filtering out untouched projects entirely would result in an empty list for new users. ## Design Proposal * Add a `Contributed` tab as the default selected tab that displays (active) projects the user has contributed to * Move `Personal` tabs to be located on the same line * Remove `All` and replace with `Member` to be located on the same line, displaying active projects * Remove `Yours` tab * Rename `Pending deletion` tab to `Inactive`. Ensure archived projects and projects pending deletion are surfaced in the `Inactive` tab. ![image](/uploads/60ae0f8c3e0308930df3f3900d41ec05/image.png) ## Why? 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. Migrating the projects dashboard to Vue 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 to. - Improve the user experience by being able to filter, sort, paginate and use project actions (delete, restore, etc) without full page reloads. - Build a reusable set of Vue components that can be used in other group/project lists to have a consistent user experience across all of GitLab. This will also allow us to make updates in one place and have it propagate across all group/project lists. We have plans in https://gitlab.com/gitlab-org/gitlab/-/issues/479887 and https://gitlab.com/gitlab-org/gitlab/-/issues/513539 to use these shared components in other lists such as `Explore > Projects`, `Your work > Groups`, Group overview page, and `Explore > Groups`. These shared components are also already used in the Organizations UI. - As we continue to add functionality to these shared Vue components, future migrations will become easier. For example, this epic had 34 issues whereas https://gitlab.com/groups/gitlab-org/-/epics/13786 has only 3 issues, because the logic has already been encapsulated in shared Vue components. It isn't an apples to apples comparison, because `Your work > Projects` has more tabs but it does show that it can reduce the amount of effort for future migrations, in this case by 90%. ## Implementation plan See issues in this Epic. Order should be top to bottom.
epic