Skip to content

Setup Vue app, "Subgroups and projects" and "Inactive" tabs

Implementation guide

  1. Introduce a new feature flag (groups_overview_shared_vue_components)
  2. Check feature flag in app/views/groups/show.html.haml#L26 and render Vue app if it is enabled
  3. Use https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/groups/your_work/components/app.vue#L33 as a starting point for the implementation.
  4. Move app/assets/javascripts/groups/your_work/graphql/resolvers.js#L25 to shared location so it can be used in multiple places.
  5. For first iteration only the active tab should have a tab count. This should work out of the box if you add a count field to the GraphQL query. This can be done via a resolver similar to app/assets/javascripts/groups/your_work/graphql/resolvers.js
Edited by Peter Hegman