Convert Groups Overview tabs to Vue
Problem to solve
As part of https://gitlab.com/gitlab-org/gitlab-ce/issues/44005, we introduced multiple tabs to be able to view varying scopes of subgroups and projects of a given group.
However, we're using a GroupsTree Vue component, while having to do a bit of "dirty" DOM manipulation to manage multiple instances of said Vue component, while switching tabs and manipulating the page layout (showing search bar in the top area of the page, depending on which tab is selected).
There's also a tiny bit of technical debt being added on the backend side to support the current implementation, e.g., the multiple routes to determine which tab to load. It would be ideal to handle this completely on the frontend.
Proposal
Convert group overview tabs to be a single Vue application.
- Introduce feature flag so we can manage risk
- Perhaps use vue-router or at least use location hashes to denote the different sections,.
- Rework any references to "action" (as that is now a vuex convention) to be "active_tab".
Links / references
https://gitlab.com/gitlab-org/gitlab-ce/issues/49687 https://gitlab.com/gitlab-org/gitlab-ce/issues/44005
Availability and Testing
- Adding unit and integration test coverage should suffice, no E2E tests needed at this time.
- Since a feature flag will be implemented with this change, please be sure to review the
package-and-qa-ff-disabledandpackage-and-qa-ff-enabledjobs that are triggered automatically on the MR.- Feel free to ping @vburton if you have any questions on QA failures.