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
:js
tag.
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_TYPE
and 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.vue
component. This component will render 4GlTab
elements with app/assets/javascripts/members/components/app.vue in the default slot. It will pass anamespace
prop to app/assets/javascripts/members/components/app.vue. - Update app/assets/javascripts/members/components/app.vue to accept a
namespace
prop. Useprovide
to provide thenamespace
prop to all subcomponents.
Edited by Peter Hegman