Add ability to change member role to role details drawer

What does this MR do and why?

For the Manage -> Members page, there is a Max Role column. When the role in the column is clicked, a drawer is shown with the role details:

Max role column	Role details drawer

Previously, the drawer only showed the role details. This MR adds the ability to change the role as well. It has the following behavior:

1. If the role is editable, it will show a dropdown. If the role is not editable, it will show the role name as text.
2. When the role is changed in the dropdown, it will show Save/cancel buttons in the drawer footer.
3. When the cancel button is clicked, it will revert the role back to the initial role.
4. When the save button is clicked, it will disable the role dropdown, disable the save and cancel buttons, prevent the drawer from being closed, and disable the roles in the table so that the selected member can't be changed.
5. When the save is complete, the role dropdown will be re-enabled, the footer buttons will be hidden, the drawer can be closed, and the roles in the table are re-enabled.

2024-05-28_10-29-39

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. Go to any project or group -> Manage -> Members.
3. Click on the Owner role next to Administrator (assuming you are logged in as root).
4. Verify that in the drawer, the Owner role is shown as text.
5. Find a member whose source says Direct member by <username>. If one does not exist, click on Invite members on the top right and invite a member. Click on the role name for that user.
6. Verify that in the drawer, the role is shown in the dropdown.
7. Change the role in the dropdown. Verify that the footer buttons are shown.
8. Click on Cancel. Verify that the role changes back to the initial role.
9. Change the role again, then click on Update role.
10. Verify that the dropdown is disabled, the footer buttons are disabled, the drawer can't be closed, and the roles in the member table are disabled. If the request completes too quickly, you can use this patch to add a 7-second delay:

Patch

Index: app/assets/javascripts/members/components/table/role_details_drawer.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/members/components/table/role_details_drawer.vue b/app/assets/javascripts/members/components/table/role_details_drawer.vue
--- a/app/assets/javascripts/members/components/table/role_details_drawer.vue	(revision 56e7ca40593d9456b03a0dd5fb739c3d668936b8)
+++ b/app/assets/javascripts/members/components/table/role_details_drawer.vue	(date 1716928098321)
@@ -89,6 +89,11 @@
     async updateRole() {
       try {
         this.isSavingRole = true;
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, 7000);
+        });
 
         const url = this.memberPath.replace(':id', this.member.id);
         const accessLevelProp = ACCESS_LEVEL_PROPERTY_NAME[this.namespace];

11. Verify that after the role is updated, the members table shows the new role, the dropdown shows the new role, the dropdown is re-enabled, the footer buttons are hidden, the drawer can be closed, and a toast is shown.
12. Open the role dropdown, then click on Manage roles in the dropdown header. Verify that it opens Admin Area -> Settings -> Roles and Permissions in a new tab.
13. There's a WIP feature where the role is not immediately changed, but sent to the administrator for approval. Apply this patch to enable this behavior:

Patch

Index: app/assets/javascripts/members/components/table/role_details_drawer.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/members/components/table/role_details_drawer.vue b/app/assets/javascripts/members/components/table/role_details_drawer.vue
--- a/app/assets/javascripts/members/components/table/role_details_drawer.vue	(revision b1d8edfe3fa0e21b27d608c0d579dd23142d4621)
+++ b/app/assets/javascripts/members/components/table/role_details_drawer.vue	(date 1716928937277)
@@ -102,7 +102,7 @@
 
         // EE has a flow where the role is not changed immediately, but goes through an approval process. In that case
         // we need to restore the role back to what the member had initially.
-        if (data?.enqueued) {
+        if (!data?.enqueued) {
           this.$toast.show(s__('Members|Role change request was sent to the administrator.'));
           this.resetRole();
         } else {

13. Change the role again, but this time verify that the role was reverted back to the initial role, and the toast is shown notifying that the role change was sent to the administrator for approval. Note that this feature is a WIP, and the "revert back to initial role" behavior is not going to be final, it's just that backend currently doesn't send any data on enqueued role changes, so it's the only thing we can do for now.

Related to #456282