Updated members dropdowns

This ports some code over from EE to reduce conflicts

4 files changed, 74 insertions, 11 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 969778dded7..9a91018a8e4 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -650,6 +650,11 @@
       } else if(value) {
         field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
       }
+
+      if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
+        return;
+      }
+
       if (el.hasClass(ACTIVE_CLASS)) {
         el.removeClass(ACTIVE_CLASS);
         if (field && field.length) {
diff --git a/app/assets/javascripts/members.js.es6 b/app/assets/javascripts/members.js.es6
index 895bc10784f..64826894965 100644
--- a/app/assets/javascripts/members.js.es6
+++ b/app/assets/javascripts/members.js.es6
@@ -1,38 +1,87 @@
-/* eslint-disable */
-((w) => {
-  w.gl = w.gl || {};
+/* eslint-disable class-methods-use-this */
+(() => {
+  window.gl = window.gl || {};
 
   class Members {
     constructor() {
       this.addListeners();
+      this.initGLDropdown();
     }
 
     addListeners() {
       $('.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');
     }
 
+    initGLDropdown() {
+      $('.js-member-permissions-dropdown').each((i, btn) => {
+        const $btn = $(btn);
+
+        $btn.glDropdown({
+          selectable: true,
+          isSelectable(selected, $el) {
+            return !$el.hasClass('is-active');
+          },
+          fieldName: $btn.data('field-name'),
+          id(selected, $el) {
+            return $el.data('id');
+          },
+          toggleLabel(selected, $el) {
+            return $el.text();
+          },
+          clicked: (selected, $el) => {
+            const $link = $($el);
+            const { $toggle, $dateInput } = this.getMemberListItems($link);
+
+            $toggle.attr('disabled', true);
+            $dateInput.attr('disabled', true);
+
+            $btn.closest('form').trigger('submit.rails');
+          },
+        });
+      });
+    }
+
     removeRow(e) {
       const $target = $(e.target);
 
       if ($target.hasClass('btn-remove')) {
         $target.closest('.member')
-          .fadeOut(function () {
+          .fadeOut(function fadeOutMemberRow() {
             $(this).remove();
           });
       }
     }
 
-    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');
+    }
+
+    getMemberListItems($el) {
+      const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
+
+      return {
+        $memberListItem,
+        $toggle: $memberListItem.find('.dropdown-menu-toggle'),
+        $dateInput: $memberListItem.find('.js-access-expiration-date'),
+      };
     }
   }
 
   gl.Members = Members;
-})(window);
+})();
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 33de652c06f..d5914b900e2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 756efa9c7fa..5f3bbb40ba0 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/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 {