Remove groups_select from global namespace & simplifies the code

app/assets/javascripts/dispatcher.js

@@ -13,7 +13,7 @@ import GroupLabelSubscription from './group_label_subscription';
 /* global LineHighlighter */
 import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
-/* global GroupsSelect */
+import groupsSelect from './groups_select';
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
@@ -414,7 +414,7 @@ import Diff from './diff';
           break;
         case 'projects:project_members:index':
           memberExpirationDate('.js-access-expiration-date-groups');
-          new GroupsSelect();
+          groupsSelect();
           memberExpirationDate();
           new Members();
           new UsersSelect();

app/assets/javascripts/groups_select.js

-/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var,
-                  camelcase, one-var-declaration-per-line, quotes, object-shorthand,
-                  prefer-arrow-callback, comma-dangle, consistent-return, yoda,
-                  prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
-                  promise/catch-or-return */
 import Api from './api';
 import { normalizeCRLFHeaders } from './lib/utils/common_utils';
 
-var slice = [].slice;
-
-window.GroupsSelect = (function() {
-  function GroupsSelect() {
-    $('.ajax-groups-select').each((function(_this) {
-      const self = _this;
-
-      return function(i, select) {
-        var all_available, skip_groups;
-        const $select = $(select);
-        all_available = $select.data('all-available');
-        skip_groups = $select.data('skip-groups') || [];
-
+export default function groupsSelect() {
+  // Needs to be accessible in rspec
+  window.GROUP_SELECT_PER_PAGE = 20;
+  $('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
+    const $select = $(this);
+    const allAvailable = $select.data('all-available');
+    const skipGroups = $select.data('skip-groups') || [];
     $select.select2({
-          placeholder: "Search for a group",
+      placeholder: 'Search for a group',
       multiple: $select.hasClass('multiselect'),
       minimumInputLength: 0,
       ajax: {
         url: Api.buildUrl(Api.groupsPath),
         dataType: 'json',
         quietMillis: 250,
-            transport: function (params) {
-              $.ajax(params).then((data, status, xhr) => {
+        transport(params) {
+          return $.ajax(params)
+            .then((data, status, xhr) => {
               const results = data || [];
 
               const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
@@ -42,22 +32,24 @@ window.GroupsSelect = (function() {
                   more,
                 },
               };
-              }).then(params.success).fail(params.error);
+            })
+            .then(params.success)
+            .fail(params.error);
         },
-            data: function (search, page) {
+        data(search, page) {
           return {
             search,
             page,
-                per_page: GroupsSelect.PER_PAGE,
-                all_available,
+            per_page: window.GROUP_SELECT_PER_PAGE,
+            all_available: allAvailable,
           };
         },
-            results: function (data, page) {
+        results(data, page) {
           if (data.length) return { results: [] };
 
           const groups = data.length ? data : data.results || [];
           const more = data.pagination ? data.pagination.more : false;
-              const results = groups.filter(group => skip_groups.indexOf(group.id) === -1);
+          const results = groups.filter(group => skipGroups.indexOf(group.id) === -1);
 
           return {
             results,
@@ -66,56 +58,29 @@ window.GroupsSelect = (function() {
           };
         },
       },
-          initSelection: function(element, callback) {
-            var id;
-            id = $(element).val();
-            if (id !== "") {
+      // eslint-disable-next-line consistent-return
+      initSelection(element, callback) {
+        const id = $(element).val();
+        if (id !== '') {
           return Api.group(id, callback);
         }
       },
-          formatResult: function() {
-            var args;
-            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return self.formatResult.apply(self, args);
+      formatResult(object) {
+        return `<div class='group-result'> <div class='group-name'>${object.full_name}</div> <div class='group-path'>${object.full_path}</div> </div>`;
       },
-          formatSelection: function() {
-            var args;
-            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return self.formatSelection.apply(self, args);
+      formatSelection(object) {
+        return object.full_name;
       },
-          dropdownCssClass: "ajax-groups-dropdown select2-infinite",
+      dropdownCssClass: 'ajax-groups-dropdown select2-infinite',
       // we do not want to escape markup since we are displaying html in results
-          escapeMarkup: function(m) {
+      escapeMarkup(m) {
         return m;
-          }
+      },
     });
 
-        self.dropdown = document.querySelector('.select2-infinite .select2-results');
-
-        $select.on('select2-loaded', self.forceOverflow.bind(self));
-      };
-    })(this));
-  }
-
-  GroupsSelect.prototype.formatResult = function(group) {
-    var avatar;
-    if (group.avatar_url) {
-      avatar = group.avatar_url;
-    } else {
-      avatar = gon.default_avatar_url;
-    }
-    return "<div class='group-result'> <div class='group-name'>" + group.full_name + "</div> <div class='group-path'>" + group.full_path + "</div> </div>";
-  };
-
-  GroupsSelect.prototype.formatSelection = function(group) {
-    return group.full_name;
-  };
-
-  GroupsSelect.prototype.forceOverflow = function (e) {
-    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight)}px`;
-  };
-
-  GroupsSelect.PER_PAGE = 20;
-
-  return GroupsSelect;
-})();
+    $select.on('select2-loaded', () => {
+      const dropdown = document.querySelector('.select2-infinite .select2-results');
+      dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
+    });
+  });
+}

app/assets/javascripts/main.js

@@ -55,7 +55,6 @@ import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
 import './gl_form';
-import './groups_select';
 import './header';
 import './importer_status';
 import './issuable_index';

spec/features/projects/members/share_with_group_spec.rb

@@ -149,7 +149,7 @@ feature 'Project > Members > Share with Group', :js do
         create(:group).add_owner(master)
 
         visit project_settings_members_path(project)
-        execute_script 'GroupsSelect.PER_PAGE = 1;'
+        execute_script 'GROUP_SELECT_PER_PAGE = 1;'
         open_select2 '#link_group_id'
       end