Added disabled styling

Fixes active items being selectable

app/assets/javascripts/members.js.es6

@@ -35,7 +35,7 @@
           isSelectable(selected, $el) {
             const $link = $($el);
 
-            return $link.data('revert');
+            return $link.data('revert') || $link.hasClass('.is-active');
           },
           fieldName: $btn.data('field-name'),
           id(selected, $el) {

app/assets/stylesheets/framework/dropdowns.scss

@@ -42,6 +42,11 @@
   border-radius: $border-radius-base;
   white-space: nowrap;
 
+  &[disabled] {
+    background-color: $input-bg-disabled;
+    cursor: not-allowed;
+  }
+
   &.no-outline {
     outline: 0;
   }

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

@@ -57,10 +57,9 @@
         - if user != current_user
           = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
             = f.hidden_field :access_level
-            -# = 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.js-member-permissions-dropdown{ type: "button",
-                disabled: member.ldap && !member.override,
+                disabled: !can_admin_member,
                 data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
                 %span.dropdown-toggle-text
                   = member.human_access
@@ -71,16 +70,14 @@
                   %ul
                     - Gitlab::Access.options.each do |role, role_id|
                       %li
-                        %a{ href: "javascript:void(0)",
+                        = link_to role, "javascript:void(0)",
                           class: ("is-active" if member.access_level == role_id),
-                          data: { id: role_id } }
-                          = role
+                          data: { id: role_id }
                     - if member.ldap
                       %li.divider
                       %li
-                        %a{ href: "javascript:void(0)",
-                          data: { revert: "true", endpoint: update_url, id: dom_id(member) } }
-                          Revert to LDAP group sync settings
+                        = link_to "Revert to LDAP group sync settings", "javascript:void(0)",
+                          data: { revert: "true", endpoint: update_url, id: dom_id(member) }
             .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