Allow custom components on the Members page tabs
What does this MR do and why?
First step in #433174 (closed)
This MR expands Members app (used for Group's and Project's members page (e.g. /groups/gitlab-org/-/group_members) to display a custom tab content.
This is needed because currently Members App is only tailored to display Member model (well, expected by the name), but the parent task requires us to expand the tab list with another type: promotions requests.
The new Promotion Requests tab's application is currently only a stub, which will be expanded and integrated with the BE in following MRs.
Here's the MR plan
| this MR | MR plan | status |
|---|---|---|
| Custom Component for the tab | workflowcomplete | |
| Custom store or Apollo store | workflowin review | |
| Pagination | workflowin dev | |
| Add the table with a proper UI | (TBC) | |
| Remove the export button | (TBC) | |
| Post refactoring (defined below) | (TBC) |
MR acceptance checklist
Screenshots or screen recordings
| Before | After |
|---|---|
| N/A | ![]() |
How to set up and validate locally
- Apply a patch
diff
diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 431f027936c7..0356c19ab284 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -65,6 +65,10 @@ export default {
return true;
}
+ if (tab.namespace === MEMBER_TYPES.promotionRequest) {
+ return true;
+ }
+
const { requiredPermissions = [] } = tab;
const tabCanBeShown =
this.getTabCount(tab) > 0 || this.activeTabIndexCalculatedFromUrlParams === index;
- Visit a group and/or project members page, and open the Promotions tab (e.g.
http://127.0.0.1:3000/groups/gitlab-org/-/group_members?tab=promotion_request)
Edited by Kos Palchyk
