Vueify default_membership_role_dropdown and add custom roles

What does this MR do and why?

This vueifies the default_membership_role_dropdown selector and allows for custom roles to be selected and saved to SAML settings.

Issue: #417285 (closed) (Frontend part)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Enable group SAML

   gdk config set omniauth.group_saml.enabled true && gdk reconfigure && gdk restart rails-web

2. Create a group with Ultimate license
3. Go to http://localhost:3000/groups/${new_group}/-/settings/roles_and_permissions and create a custom role
4. Go to http://localhost:3000/groups/${new_group}/-/saml, fill in the required form fields and select the custom role
5. Reload the page and verify the custom role has been saved

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.

ee/app/assets/javascripts/saml_providers/saml_membership_role_selector/components/saml_membership_role_selector.vue

@@ -14,15 +14,15 @@ export default {
       type: Object,
       required: true,
     },
+    currentStandardRole: {
+      type: Number,
+      required: true,
+    },
     customRoles: {
       type: Object,
       required: false,
       default: () => ({}),
     },
-    currentStandardRole: {
-      type: Number,
-      required: true,
-    },
     currentCustomRoleId: {
       type: Number,
       required: false,
@@ -66,11 +66,11 @@ export default {
   },
   methods: {
     roleToItems(roles, roleType) {
-      return Object.assign(Object.entries(roles).map(this.roleToItem(roleType)));
+      return Object.entries(roles).map(this.roleToItem(roleType));
     },
     currentRole() {
-      // A custom role takes precedence.
-      return this.currentCustomRoleId
+      // A saved custom role takes precedence.
+      return Object.values(this.customRoles).includes(this.currentCustomRoleId)
         ? this.itemValue(CUSTOM_ROLE, this.currentCustomRoleId)
         : this.itemValue(STANDARD_ROLE, this.currentStandardRole);
     },
@@ -92,8 +92,8 @@ export default {
       // This is necessary for `DirtySubmitForm` to enable the submit button when selecting a new value.
       this.$nextTick(() => {
         Object.values(this.$refs).forEach((input) => {
-          const e = new Event('input', { bubbles: true });
-          input.dispatchEvent(e);
+          const event = new Event('input', { bubbles: true });
+          input.dispatchEvent(event);
         });
       });
     },
@@ -109,12 +109,14 @@ export default {
   <div>
     <input
       ref="standardRoleInput"
+      data-testid="selected-standard-role"
       type="hidden"
       name="saml_provider[default_membership_role]"
       :value="selectedStandardRoleValue"
     />
     <input
       ref="customRoleInput"
+      data-testid="selected-custom-role"
       type="hidden"
       name="saml_provider[member_role_id]"
       :value="selectedCustomRoleValue"
@@ -124,6 +126,7 @@ export default {
       block
       data-testid="default-membership-role-dropdown"
       :items="roles"
+      :selected="selectedRole"
       @select="onSelect"
     />
   </div>