Check guest overage when role is saved in role details drawer

What does this MR do and why?

GitLab subscriptions come with a certain number of user seats. For user roles, some roles will take up a seat, and some roles don't (for example a Guest role). Going over the available number of seats will cause an overage, which incurs additional costs.

On the Manage -> Members page, clicking on a role name in the Max Role column will show a role details drawer:

Max Role column	Role details drawer

When the role is changed using the dropdown in the drawer and the Update role button is clicked, the assigned role is updated. This MR adds a check to see if this will cause a seat usage overage, and shows a warning modal if it will. If the user cancels the warning, the selected role will be reset back to the initial role. Otherwise, if the user accepts the warning, the role will be updated, the same as before.

2024-05-28_23-28-07

An overage can only happen if the user is changing from a role that doesn't take up a seat, to one that does (for example a Guest to a Reporter). Roles that don't take up a seat are:

• Guest standard role
• Minimal Access standard role
• Guest custom role with Read code permissions only
• Minimal Access role with Read code permissions only

All other roles will take up a seat. The modal will only show if the user is changing from a non-seat role to a seated role.

How to set up and validate locally

The overage check doesn't seem to be working locally because backend will always return false for the will cause overage check, so we need to patch it locally to show the warning:

Index: ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue b/ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue
--- a/ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue	(revision ccd9e96f81aa6d869e36418a6237e03c48524291)
+++ b/ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue	(date 1716975064700)
@@ -96,7 +96,7 @@
         const { willIncreaseOverage, seatsInSubscription, newBillableUserCount } =
           response?.data?.group?.gitlabSubscriptionsPreviewBillableUserChange || {};
         // If the overage won't increase or if there's no subscription data, don't show the modal.
-        if (!willIncreaseOverage || isNil(seatsInSubscription) || isNil(newBillableUserCount)) {
+        if (willIncreaseOverage || isNil(seatsInSubscription) || isNil(newBillableUserCount)) {
           this.emitConfirm();
           return;
         }

Then follow these video walkthroughs (with audio commentary):

2024-05-29_11-26-01

2024-05-29_11-31-58

These steps below are for reference:

1. Enable the :show_overage_on_role_promotion feature flag:

echo "Feature.enable(:show_overage_on_role_promotion)" | rails c

2. Enable SAAS mode, then restart GDK:

export GITLAB_SIMULATE_SAAS=1
gdk restart

3. Go to Admin Area -> Settings -> General -> expand Account and limits -> enable Allow use of licensed EE features -> Save changes.
4. Go to Admin Area -> Overview -> Groups. Click on Edit for a group of your choice in the list. On the edit page, change the Plan to Ultimate, then click on Save changes at the bottom.
5. Go to the group's Settings -> Roles and Permissions page. Click on New role and use it to create 2 new roles: one with a base role of Guest with only Read code permission (doesn't take up a seat), and another role with a base role of your choice and any other permission (takes up a seat).
6. Go to the group's Manage -> Members page. You should see that several users have the Is using seat badge.
7. For one of the users that has the Is using seat badge, change their role to Guest. Verify that you do not get the warning modal.
8. Change the role now to a standard role higher than Guest. Verify that you do get the warning modal.
9. Click Cancel in the modal. Verify that the role is still Guest and not changed. Try it again, but this time click Continue with overages. Verify that the role is changed, and the Is using seat badge is shown again.
10. Repeat the above steps, but with the Guest custom role and the other custom role that you created.
11. Open ee/app/assets/javascripts/members/components/table/guest_overage_confirmation.vue and throw an error just inside the try block:

async confirmCoverage() {
  try {
    throw new Error('some error');
    ...

12. Click on Update role and verify that an error is shown.

Related to #464103 (closed)