Remove members and memberExpirationDate from window object

app/assets/javascripts/dispatcher.js

@@ -81,6 +81,8 @@ import AbuseReports from './abuse_reports';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
 import AjaxLoadingSpinner from './ajax_loading_spinner';
 import U2FAuthenticate from './u2f/authenticate';
+import Members from './members';
+import memberExpirationDate from './member_expiration_date';
 
 (function() {
   var Dispatcher;
@@ -397,15 +399,15 @@ import U2FAuthenticate from './u2f/authenticate';
           new ProjectsList();
           break;
         case 'groups:group_members:index':
-          new gl.MemberExpirationDate();
-          new gl.Members();
+          memberExpirationDate();
+          new Members();
           new UsersSelect();
           break;
         case 'projects:project_members:index':
-          new gl.MemberExpirationDate('.js-access-expiration-date-groups');
+          memberExpirationDate('.js-access-expiration-date-groups');
           new GroupsSelect();
-          new gl.MemberExpirationDate();
-          new gl.Members();
+          memberExpirationDate();
+          new Members();
           new UsersSelect();
           break;
         case 'groups:new':

app/assets/javascripts/main.js

@@ -84,8 +84,6 @@ import './layout_nav';
 import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import './logo';
-import './member_expiration_date';
-import './members';
 import './merge_request';
 import './merge_request_tabs';
 import './milestone';

app/assets/javascripts/member_expiration_date.js

@@ -2,54 +2,51 @@
 
 import Pikaday from 'pikaday';
 
-(() => {
-  // Add datepickers to all `js-access-expiration-date` elements. If those elements are
-  // children of an element with the `clearable-input` class, and have a sibling
-  // `js-clear-input` element, then show that element when there is a value in the
-  // datepicker, and make clicking on that element clear the field.
-  //
-  window.gl = window.gl || {};
-  gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
-    function toggleClearInput() {
-      $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
-    }
-    const inputs = $(selector);
-
-    inputs.each((i, el) => {
-      const $input = $(el);
-
-      const calendar = new Pikaday({
-        field: $input.get(0),
-        theme: 'gitlab-theme animate-picker',
-        format: 'yyyy-mm-dd',
-        minDate: new Date(),
-        container: $input.parent().get(0),
-        onSelect(dateText) {
-          $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
-
-          $input.trigger('change');
-
-          toggleClearInput.call($input);
-        },
-      });
-
-      calendar.setDate(new Date($input.val()));
-      $input.data('pikaday', calendar);
+// Add datepickers to all `js-access-expiration-date` elements. If those elements are
+// children of an element with the `clearable-input` class, and have a sibling
+// `js-clear-input` element, then show that element when there is a value in the
+// datepicker, and make clicking on that element clear the field.
+//
+export default function memberExpirationDate(selector = '.js-access-expiration-date') {
+  function toggleClearInput() {
+    $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
+  }
+  const inputs = $(selector);
+
+  inputs.each((i, el) => {
+    const $input = $(el);
+
+    const calendar = new Pikaday({
+      field: $input.get(0),
+      theme: 'gitlab-theme animate-picker',
+      format: 'yyyy-mm-dd',
+      minDate: new Date(),
+      container: $input.parent().get(0),
+      onSelect(dateText) {
+        $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
+
+        $input.trigger('change');
+
+        toggleClearInput.call($input);
+      },
     });
 
-    inputs.next('.js-clear-input').on('click', function clicked(event) {
-      event.preventDefault();
+    calendar.setDate(new Date($input.val()));
+    $input.data('pikaday', calendar);
+  });
 
-      const input = $(this).closest('.clearable-input').find(selector);
-      const calendar = input.data('pikaday');
+  inputs.next('.js-clear-input').on('click', function clicked(event) {
+    event.preventDefault();
 
-      calendar.setDate(null);
-      input.trigger('change');
-      toggleClearInput.call(input);
-    });
+    const input = $(this).closest('.clearable-input').find(selector);
+    const calendar = input.data('pikaday');
+
+    calendar.setDate(null);
+    input.trigger('change');
+    toggleClearInput.call(input);
+  });
 
-    inputs.on('blur', toggleClearInput);
+  inputs.on('blur', toggleClearInput);
 
-    inputs.each(toggleClearInput);
-  };
-}).call(window);
+  inputs.each(toggleClearInput);
+}

app/assets/javascripts/members.js

-/* 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'),
+    };
+  }
+}