Fixed some dropdown issues found when porting to CE

app/assets/javascripts/members.js.es6

@@ -12,8 +12,8 @@
       $('.js-ldap-permissions').off('click').on('click', this.showLDAPPermissionsWarning.bind(this));
       $('.js-ldap-override').off('click').on('click', this.toggleMemberAccessToggle.bind(this));
       $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
-      $('.js-member-update-control').off('change').on('change', this.formSubmit);
-      $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess);
+      $('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
+      $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
       gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
     }
 
@@ -45,15 +45,15 @@
           },
           clicked: (selected, $el) => {
             const $link = $($el);
+            const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($link);
 
-            if ($link.data('revert')) {
-              const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($link);
+            $toggle.attr('disabled', true);
+            $dateInput.attr('disabled', true);
 
-              $toggle.attr('disabled', true);
-              $dateInput.attr('disabled', true);
-              this.overrideLdap($memberListItem, $link.data('endpoint'), false);
-            } else {
+            if (!$link.data('revert')) {
               $btn.closest('form').trigger('submit.rails');
+            } else {
+              this.overrideLdap($memberListItem, $link.data('endpoint'), false);
             }
           },
         });
@@ -71,13 +71,21 @@
       }
     }
 
-    formSubmit() {
-      $(this).closest('form').trigger('submit.rails').end()
-        .disable();
+    formSubmit(e) {
+      const $this = $(e.currentTarget);
+      const { $toggle, $dateInput } = this.getMemberListItems($this);
+
+      $this.closest('form').trigger('submit.rails');
+
+      $toggle.attr('disabled', true);
+      $dateInput.attr('disabled', true);
     }
 
-    formSuccess() {
-      $(this).find('.js-member-update-control').enable();
+    formSuccess(e) {
+      const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
+
+      $toggle.removeAttr('disabled');
+      $dateInput.removeAttr('disabled');
     }
 
     showLDAPPermissionsWarning(e) {
@@ -88,8 +96,8 @@
       $ldapPermissionsElement.toggle();
     }
 
-    getMemberListItems(btn) {
-      const $memberListItem = $(`#${btn.data('id')}`);
+    getMemberListItems($el) {
+      const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
 
       return {
         $memberListItem,
@@ -110,8 +118,6 @@
     }
 
     overrideLdap($memberListitem, endpoint, override) {
-      $memberListitem.toggleClass('is-overriden', override);
-
       return $.ajax({
         url: endpoint,
         type: 'PATCH',
@@ -120,6 +126,8 @@
             override,
           },
         },
+      }).then(() => {
+        $memberListitem.toggleClass('is-overriden', override);
       });
     }
   }

app/views/groups/group_members/update.js.haml

 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
   $("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
-  gl.utils.localTimeAgo($('.js-timeago'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@group_member)}"));

app/views/projects/project_members/update.js.haml

 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/member', member: @project_member))}');
   $("##{dom_id(@project_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
-  gl.utils.timeAgo($('.js-timeago'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@project_member)}"));

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

@@ -73,14 +73,14 @@
                       %li
                         = link_to role, "javascript:void(0)",
                           class: ("is-active" if member.access_level == role_id),
-                          data: { id: role_id }
+                          data: { id: role_id, el_id: dom_id(member) }
                     - if can_override_member
                       %li.divider
                       %li
                         = link_to "Revert to LDAP group sync settings", "javascript:void(0)",
-                          data: { revert: "true", endpoint: override_group_group_member_path(@group, member), id: dom_id(member) }
+                          data: { revert: "true", endpoint: override_group_group_member_path(@group, member), el_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
+              = 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, data: { el_id: dom_id(member) }
               %i.clear-icon.js-clear-input
         - else
           %span.member-access-text= member.human_access
@@ -115,7 +115,7 @@
         - if can_override_member
           %button.btn.btn-default.btn-ldap-override.js-ldap-permissions{ type: "button",
             "aria-label" => "Edit permissions",
-            data: { name: user.name, id: dom_id(member) } }
+            data: { name: user.name, el_id: dom_id(member) } }
             %span.visible-xs-block.visible-sm-block
               Edit permissions
             = icon("pencil", class: "hidden-xs hidden-sm")
@@ -129,7 +129,7 @@
     .controls
       %button.btn.btn-warning.js-ldap-override{ type: "button",
         "aria-label" => "Change LDAP member permissions",
-        data: { id: dom_id(member), endpoint: override_group_group_member_path(@group, member) } }
+        data: { el_id: dom_id(member), endpoint: override_group_group_member_path(@group, member) } }
         Change permissions
       %button.btn.btn-default.js-ldap-permissions{ type: "button",
         "aria-label" => "Close permissions override",