Replace GlFormSelect by GlCollapsibleListbox

What does this MR do and why?

In the group and project member invite modal, we replace GlFormSelect by GlCollapsibleListbox. This is in preparation to display custom roles.

Removed the access-level event because it is not necessary.

Changelog: changed

EE: true

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Go to /groups/flightjs/-/group_members as an admin or group owner
2. Select Invite a member
3. Observe the Select a role dropdown.

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.

app/assets/javascripts/invite_members/components/invite_modal_base.vue

 <script>
 import {
+  GlCollapsibleListbox,
   GlFormGroup,
-  GlFormSelect,
   GlModal,
   GlDatepicker,
   GlLink,
@@ -36,8 +36,8 @@ const DEFAULT_SLOTS = [
 
 export default {
   components: {
+    GlCollapsibleListbox,
     GlFormGroup,
-    GlFormSelect,
     GlDatepicker,
     GlLink,
     GlModal,
@@ -194,14 +194,6 @@ export default {
       };
     },
   },
-  watch: {
-    selectedAccessLevel: {
-      immediate: true,
-      handler(val) {
-        this.$emit('access-level', val);
-      },
-    },
-  },
   methods: {
     onReset() {
       // This component isn't necessarily disposed,
@@ -308,11 +300,13 @@ export default {
               </template>
             </gl-sprintf>
           </template>
-          <gl-form-select
+          <gl-collapsible-listbox
             :id="dropdownId"
             v-model="selectedAccessLevel"
             data-qa-selector="access_level_dropdown"
-            :options="accessLevelsOptions"
+            data-testid="access-level-dropdown"
+            :items="accessLevelsOptions"
+            block
           />
         </gl-form-group>