Changed to GL dropdown - not working 100%

app/assets/javascripts/members.js.es6

@@ -41,7 +41,8 @@
 
     showLDAPPermissionsWarning (e) {
       const btn = e.currentTarget,
-            ldapPermissionsElement = this.getLDAPPermissionsElement(btn);
+            memberListItem = this.getMemberListItem(btn),
+            ldapPermissionsElement = memberListItem.nextElementSibling;
 
       if (ldapPermissionsElement.style.display === 'none') {
         ldapPermissionsElement.style.display = 'block';
@@ -50,8 +51,12 @@
       }
     }
 
-    getLDAPPermissionsElement (btn) {
-      return document.getElementById(btn.dataset.id).nextElementSibling;
+    getMemberListItem (btn) {
+      return document.getElementById(btn.dataset.id);
+    }
+
+    toggleMemberAccessToggle (el) {
+      const toggle = el.querySelectorAll('.dropdown-menu-toggle')[0];
     }
   }
 

app/assets/stylesheets/pages/members.scss

@@ -54,6 +54,10 @@
   @media (min-width: $screen-sm-min) {
     width: 50%;
   }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
 }
 
 .member-access-text {

app/views/shared/members/_member.html.haml

@@ -51,7 +51,28 @@
       - if show_controls && (member.respond_to?(:group) && @group) || (member.respond_to?(:project) && @project)
         - if user != current_user
           = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
-            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can_admin_member
+            -# = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can_admin_member
+            .member-form-control.dropdown.append-right-5
+              %button.dropdown-menu-toggle{ type: "button",
+                disabled: member.ldap && !member.override,
+                data: { toggle: "dropdown" } }
+                = member.human_access
+                = icon("caret-down")
+              .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+                = dropdown_title("Change permissions")
+                .dropdown-content
+                  %ul
+                    - Gitlab::Access.options.each do |role, role_id|
+                      %li
+                        %a{ href: "#",
+                          class: ("is-active" if member.access_level == role_id),
+                          data: { id: role_id } }
+                          = role
+                    - if member.ldap
+                      %li.divider
+                      %li
+                        %a{ href: "#" }
+                          Revert to LDAP group sync settings
             .prepend-left-5.clearable-input.member-form-control
               = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member
               %i.clear-icon.js-clear-input