Refactor pendingMembers app and update GraphQl endpoint

What does this MR do and why?

For #348309 (closed)

This MR refactors the pendingMembers vue app to remove old vuex code and migrate the pendingMembersQuery to use the new GraphQL endpoint.

TODO:

• by adding a new pending member from the Group > Members page, they are already shown as “Approved” on the pending members page

Screenshots or screen recordings

Screen_Recording_2024-04-30_at_8.54.17_AM

How to set up and validate locally

But first, what is a pending member?

When the number of billable users reaches the user cap, any new member is put in a pending state and must be approved.

PART 1: Setup & Edit User Cap

1. Run your gdk locally
2. Ensure you have an ee license
3. Enable the user caps feature by running Feature.enable(:saas_user_caps) in gdk rails console
4. Simulate a SaaS instance (you might need to restart your gdk)
5. Navigate to "Search and or go to" > Admin Area > Groups > Twitter > Plan --> edit to be "Ultimate" plan > Save
6. Go to Group > Settings > General > expand Permissions and group features > User Cap and set a user cap
7. Follow the steps in part 1 of validating locally for this MR to create some pending members in your gdk if you don't have some already
8. View Group > Settings > User Quotas, you should see an alert on this page to "View pending approvals"

PART 2: Verify GraphQl query is working

1. Click the alert from above or navigate to http://gdk.test:3000/groups/twitter/-/usage_quotas/pending_members, you should see a list of pending members
2. Open your browser's developer tools and navigate to the Network tab, filter for "GraphQl", click to view the "Request" and verify you are looking at the correct pendingMembersQuery, click to the "Response" tab and verify there are pending member objects coming through

Hack to force show pending approvals notice (without editing user cap)

1. Edit ee/app/controllers/ee/groups/usage_quotas_controller.rb, comment out line 22 of the pending_members method, this will force render the page instead of showing a 404.
2. Open ee/app/assets/javascripts/usage_quotas/seats/components/subscription_seats.vue and remove line 160 v-if="shouldShowPendingMembersAlert"
3. In your gdk navigate to Groups > Twitter > Settings > Usage Quotas (http://gdk.test:3000/groups/twitter/-/usage_quotas#seats-quota-tab), you should see an alert to "View pending approvals"

How to Un-Approve a Pending Member from Rails Console

After approving a pending member from the UI, if you'd like to remove the approval in order to do more testing, follow these steps:

1. Identify the ID of the pending member for whom you'd like to remove the approval
2. Follow the steps above until PART 2: Verify GraphQl query is working, while viewing the page of pending members at http://127.0.0.1:3000/groups/twitter/-/usage_quotas/pending_members, open the developer tools and go to the Network tab > filter for Fetch/XHR > graphql
3. Click into the relevant graphql query, then expand the objects and copy the GroupMember id for the one you'd like to un-approve
4. Next, open your terminal and run the following commands:

gdk rails c
a = GroupMember.find_by(id: 98)
a.update!(state: ::Member::STATE_AWAITING)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.