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;
+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',
+      multiple: $select.hasClass('multiselect'),
+      minimumInputLength: 0,
+      ajax: {
+        url: Api.buildUrl(Api.groupsPath),
+        dataType: 'json',
+        quietMillis: 250,
+        transport(params) {
+          return $.ajax(params)
+            .then((data, status, xhr) => {
+              const results = data || [];
 
-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') || [];
-
-        $select.select2({
-          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) => {
-                const results = data || [];
-
-                const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
-                const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
-                const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
-                const more = currentPage < totalPages;
-
-                return {
-                  results,
-                  pagination: {
-                    more,
-                  },
-                };
-              }).then(params.success).fail(params.error);
-            },
-            data: function (search, page) {
-              return {
-                search,
-                page,
-                per_page: GroupsSelect.PER_PAGE,
-                all_available,
-              };
-            },
-            results: function (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 headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
+              const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+              const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+              const more = currentPage < totalPages;
 
               return {
                 results,
-                page,
-                more,
+                pagination: {
+                  more,
+                },
               };
-            },
-          },
-          initSelection: function(element, callback) {
-            var id;
-            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);
-          },
-          formatSelection: function() {
-            var args;
-            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return self.formatSelection.apply(self, args);
-          },
-          dropdownCssClass: "ajax-groups-dropdown select2-infinite",
-          // we do not want to escape markup since we are displaying html in results
-          escapeMarkup: function(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;
-  };
+            })
+            .then(params.success)
+            .fail(params.error);
+        },
+        data(search, page) {
+          return {
+            search,
+            page,
+            per_page: window.GROUP_SELECT_PER_PAGE,
+            all_available: allAvailable,
+          };
+        },
+        results(data, page) {
+          if (data.length) return { results: [] };
 
-  GroupsSelect.prototype.forceOverflow = function (e) {
-    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight)}px`;
-  };
+          const groups = data.length ? data : data.results || [];
+          const more = data.pagination ? data.pagination.more : false;
+          const results = groups.filter(group => skipGroups.indexOf(group.id) === -1);
 
-  GroupsSelect.PER_PAGE = 20;
+          return {
+            results,
+            page,
+            more,
+          };
+        },
+      },
+      // eslint-disable-next-line consistent-return
+      initSelection(element, callback) {
+        const id = $(element).val();
+        if (id !== '') {
+          return Api.group(id, callback);
+        }
+      },
+      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(object) {
+        return object.full_name;
+      },
+      dropdownCssClass: 'ajax-groups-dropdown select2-infinite',
+      // we do not want to escape markup since we are displaying html in results
+      escapeMarkup(m) {
+        return m;
+      },
+    });
 
-  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