Skip to content

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 image

How to set up and validate locally

  1. 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;
  1. 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

Merge request reports

Loading