Add a custom store for Pending promotion tab in member management pages

What does this MR do and why?

This is a second step in FE: Add a “Pending promotion” tab to the group ... (#433174 - closed), where we're adding a new tab to the Project and Group members management pages.

This MR adds an ability to define a custom store for the tab. We need a custom store (and probably actions there later) because Promotion requests data structure differs from the Members data.

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

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

not visible by default, visible with the patch applied

Before	After
N/A

How to set up and validate locally

1. Enable Setting setting = ApplicationSetting.first; setting.enable_member_promotion_management=true; setting.save!

2. Enable FF Feature.enable(:member_promotion_management)

3. Apply a patch that adds BE-like injected data:

   NOTE: while the BE MR !146678 (merged) is in review, I'll need patches to provide data for the component. I hope it's not too inconvenient.

patch

diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 8447f1ce4d3e..d4491c32fbfe 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -5,7 +5,11 @@ import Vuex from 'vuex';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseDataAttributes } from '~/members/utils';
-import { TABS } from 'ee_else_ce/members/constants';
+import { MEMBER_TYPES, TABS } from 'ee_else_ce/members/constants';
+import {
+  data as mockData,
+  pagination as mockPagination,
+} from 'ee_jest/members/promotion_requests/mock_data';
 import MembersTabs from './components/members_tabs.vue';
 import membersStore from './store';
 
@@ -31,6 +35,12 @@ export const initMembersApp = (el, options) => {
     ...vuexStoreAttributes
   } = parseDataAttributes(el);
 
+  // NOTE: this is a mock of BE from https://gitlab.com/gitlab-org/gitlab/-/merge_requests/146678
+  vuexStoreAttributes[MEMBER_TYPES.promotionRequest] = {
+    data: mockData,
+    pagination: mockPagination,
+  };
+
   const modules = TABS.filter((tab) => options[tab.namespace]).reduce((accumulator, tab) => {
     const store = tab.store ?? membersStore;
     const data = vuexStoreAttributes[tab.namespace];

UPDATE: now with the !146678 (merged) merged — we can test actual BE integration. To create pending requests we'll need to

steps for BE integration

1. Purchase Ultimate License, and simulate Ultimate SM setup
2. Visit any Group as an owner of that group (e.g. `http://127.0.0.1:3000/groups/gitlab-org/-/group_members`)
3. try promoting a non-billable GUEST member to a DEVELOPER role (this member should be non-billable on the whole instance, i.e. have a highest role as guest)
4. you should see a banner saying "Role change request was sent to the administrator." — this means a promotion request has been created

NOTE: if ensuring the users to be non-billable might be tricky, please see this comment for in-depth details

4. Open Group or Project members page
5. Ensure the new tab is added, and it looks like on the screenshot
6. Disable the FF: echo "Feature.disable(:member_promotion_management)" | rails c
7. Reload the members page to ensure there's no "Promotion" tab present