Split role details drawer update role functionality into CE and EE components

What does this MR do and why?

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

Previously, the role_details_drawer.vue component was a single component that handled both FOSS and EE versions of the component. However, this makes it difficult to add EE features while still preserving the FOSS/EE divide. To make EE development easier without affecting FOSS, this MR breaks out the role updating part into two separate role_updater.vue components.

This MR also moves the "role change success/role change enqueued" toast messages into the drawer itself as alerts. The toast message shows up in the bottom left while the drawer is on the right side. Otherwise, because of how far apart they are, it's very easy to miss the toast notification.

Role change success

Before	After

Role change enqueued

Before	After

How to set up and validate locally

1. Enable the show_role_details_in_drawer feature flag:

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

2. There are several features to validate. Follow the video walkthroughs below:

For FOSS:

The easiest way to put the local GDK in FOSS mode is to delete the ee/ folder, then restart gdk:

rm -rf <gdk-folder>/gitlab/ee
gdk restart

FOSS also doesn't support feature flags, so we need to remove the feature flag check with this patch:

Index: app/assets/javascripts/members/components/table/members_table.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
--- a/app/assets/javascripts/members/components/table/members_table.vue	(revision 3225e9fe3a9f9f04d196823aac34948f4e7a3777)
+++ b/app/assets/javascripts/members/components/table/members_table.vue	(date 1719951652525)
@@ -291,7 +291,7 @@
 
       <template #cell(maxRole)="{ item: member }">
         <members-table-cell #default="{ permissions }" :member="member" data-testid="max-role">
-          <div v-if="glFeatures.showRoleDetailsInDrawer">
+          <div v-if="!glFeatures.showRoleDetailsInDrawer">
             <gl-button
               v-gl-tooltip.d0.hover="member.accessLevel.description"
               variant="link"
@@ -339,7 +339,7 @@
     <ldap-override-confirmation-modal />
 
     <role-details-drawer
-      v-if="glFeatures.showRoleDetailsInDrawer"
+      v-if="!glFeatures.showRoleDetailsInDrawer"
       :member="selectedMember"
       @busy="isRoleDrawerBusy = $event"
       @close="selectedMember = null"

Then follow this verification video with audio commentary:

2024-07-02_10-24-32

For EE, saving and enqueueing:

2024-07-02_10-33-29

For EE, guest overage check and license usage:

First, enable SAAS simulation:

export GITLAB_SIMULATE_SAAS=1

Then apply this patch to force the guest overage confirmation to show:

Index: ee/app/assets/javascripts/members/components/table/drawer/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/drawer/guest_overage_confirmation.vue b/ee/app/assets/javascripts/members/components/table/drawer/guest_overage_confirmation.vue
--- a/ee/app/assets/javascripts/members/components/table/drawer/guest_overage_confirmation.vue	(revision 67caccd3dfba6a63aa54fe2f7fcc9f9b42b63e33)
+++ b/ee/app/assets/javascripts/members/components/table/drawer/guest_overage_confirmation.vue	(date 1720741546423)
@@ -77,7 +77,7 @@
       return new Promise((resolve, reject) => {
         this.resolve = resolve;
 
-        if (this.shouldSkipConfirmationCheck) {
+        if (!this.shouldSkipConfirmationCheck) {
           this.confirm();
           return;
         }
@@ -99,7 +99,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.confirm();
               return;
             }

Then follow this video with audio commentary:

2024-07-02_10-38-28

Related to #464104 (closed)