Group/project members - migrate to one Vue app and `GlTabs`
Summary
Follow-up to #324675 (closed) and #324680 (closed)
Move to one Vue application that uses GlTabs to render the "Members", "Groups", "Invited", and "Access requests" tabs.
Improvements
Remove deprecated Bootstrap tabs in favor of GlTabs
Risks
Minimal, this is a well tested section of the codebase
Involved components
- app/assets/javascripts/members/components/app.vue
- Create
tab_content.vue - Update feature specs as some of them will now need the
:jstag.
Implementation plan
- Move to one Vue mount point in app/views/groups/group_members/index.html.haml
- Update app/assets/javascripts/members/index.js to accept an object with keys as
MEMBER_TYPEand value as the options.
{
[MEMBER_TYPE.user]: {
tableFields: ['account']
...
},
[MEMBER_TYPE.group]: {
tableFields: ['account']
...
}
}
- Update Vuex store to have 4 modules,
MEMBER_TYPE.user,MEMBER_TYPE.group,MEMBER_TYPE.invite, andMEMBER_TYPE.accessRequest - Create a new
member_tabs.vuecomponent. This component will render 4GlTabelements with app/assets/javascripts/members/components/app.vue in the default slot. It will pass anamespaceprop to app/assets/javascripts/members/components/app.vue. - Update app/assets/javascripts/members/components/app.vue to accept a
namespaceprop. Useprovideto provide thenamespaceprop to all subcomponents.
Edited by Peter Hegman