Remove members and memberExpirationDate from window object38869-members

1 files changed, 61 insertions, 68 deletions

diff --git a/app/assets/javascripts/members.js b/app/assets/javascripts/members.js
index 8291b8c4a70..6264750a4fb 100644
--- a/app/assets/javascripts/members.js
+++ b/app/assets/javascripts/members.js
@@ -1,81 +1,74 @@
-/* eslint-disable class-methods-use-this */
-(() => {
-  window.gl = window.gl || {};
-
-  class Members {
-    constructor() {
-      this.addListeners();
-      this.initGLDropdown();
-    }
+export default 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.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');
-    }
+  addListeners() {
+    $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
+    $('.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);
+  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: (options) => {
-            this.formSubmit(null, options.$el);
-          },
-        });
+      $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: (options) => {
+          this.formSubmit(null, options.$el);
+        },
       });
-    }
-
-    removeRow(e) {
-      const $target = $(e.target);
+    });
+  }
+  // eslint-disable-next-line class-methods-use-this
+  removeRow(e) {
+    const $target = $(e.target);
 
-      if ($target.hasClass('btn-remove')) {
-        $target.closest('.member')
-          .fadeOut(function fadeOutMemberRow() {
-            $(this).remove();
-          });
-      }
+    if ($target.hasClass('btn-remove')) {
+      $target.closest('.member')
+        .fadeOut(function fadeOutMemberRow() {
+          $(this).remove();
+        });
     }
+  }
 
-    formSubmit(e, $el = null) {
-      const $this = e ? $(e.currentTarget) : $el;
-      const { $toggle, $dateInput } = this.getMemberListItems($this);
-
-      $this.closest('form').trigger('submit.rails');
-
-      $toggle.disable();
-      $dateInput.disable();
-    }
+  formSubmit(e, $el = null) {
+    const $this = e ? $(e.currentTarget) : $el;
+    const { $toggle, $dateInput } = this.getMemberListItems($this);
 
-    formSuccess(e) {
-      const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
+    $this.closest('form').trigger('submit.rails');
 
-      $toggle.enable();
-      $dateInput.enable();
-    }
+    $toggle.disable();
+    $dateInput.disable();
+  }
 
-    getMemberListItems($el) {
-      const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
+  formSuccess(e) {
+    const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
 
-      return {
-        $memberListItem,
-        $toggle: $memberListItem.find('.dropdown-menu-toggle'),
-        $dateInput: $memberListItem.find('.js-access-expiration-date'),
-      };
-    }
+    $toggle.enable();
+    $dateInput.enable();
   }
+  // eslint-disable-next-line class-methods-use-this
+  getMemberListItems($el) {
+    const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
 
-  gl.Members = Members;
-})();
+    return {
+      $memberListItem,
+      $toggle: $memberListItem.find('.dropdown-menu-toggle'),
+      $dateInput: $memberListItem.find('.js-access-expiration-date'),
+    };
+  }
+}