Replace ajax methods in select2 instances

This replaces the ajax implementation of select2 with a custom
transport method so that we no longer rely on jquery.ajax and can
switch to jquery-slim

app/assets/javascripts/groups_select.js

@@ -2,30 +2,8 @@ import $ from 'jquery';
 import { escape } from 'lodash';
 import { __ } from '~/locale';
 import Api from './api';
-import axios from './lib/utils/axios_utils';
-import { normalizeHeaders } from './lib/utils/common_utils';
 import { loadCSSFile } from './lib/utils/css_utils';
-
-const fetchGroups = (params) => {
-  axios[params.type.toLowerCase()](params.url, {
-    params: params.data,
-  })
-    .then((res) => {
-      const results = res.data || [];
-      const headers = normalizeHeaders(res.headers);
-      const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
-      const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
-      const more = currentPage < totalPages;
-
-      params.success({
-        results,
-        pagination: {
-          more,
-        },
-      });
-    })
-    .catch(params.error);
-};
+import { select2AxiosTransport } from './lib/utils/select2_utils';
 
 const groupsSelect = () => {
   loadCSSFile(gon.select2_css_path)
@@ -51,9 +29,7 @@ const groupsSelect = () => {
             url: Api.buildUrl(groupsPath),
             dataType: 'json',
             quietMillis: 250,
-            transport(params) {
-              fetchGroups(params);
-            },
+            transport: select2AxiosTransport,
             data(search, page) {
               return {
                 search,

app/assets/javascripts/issuable_form.js

@@ -5,6 +5,7 @@ import Autosave from './autosave';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import { loadCSSFile } from './lib/utils/css_utils';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';
+import { select2AxiosTransport } from './lib/utils/select2_utils';
 import { queryToObject, objectToQuery } from './lib/utils/url_utility';
 import UsersSelect from './users_select';
 import ZenMode from './zen_mode';
@@ -199,15 +200,16 @@ export default class IssuableForm {
                     search,
                   };
                 },
-                results(data) {
+                results({ results }) {
                   return {
                     // `data` keys are translated so we can't just access them with a string based key
-                    results: data[Object.keys(data)[0]].map((name) => ({
+                    results: results[Object.keys(results)[0]].map((name) => ({
                       id: name,
                       text: name,
                     })),
                   };
                 },
+                transport: select2AxiosTransport,
               },
               initSelection(el, callback) {
                 const val = el.val();

app/assets/javascripts/lib/utils/select2_utils.js

+import axios from './axios_utils';
+import { normalizeHeaders } from './common_utils';
+
+// This is used in the select2 config to replace jQuery.ajax with axios
+export const select2AxiosTransport = (params) => {
+  return axios[params.type.toLowerCase()](params.url, {
+    params: params.data,
+  })
+    .then((res) => {
+      const results = res.data || [];
+      const headers = normalizeHeaders(res.headers);
+      const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+      const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+      const more = currentPage < totalPages;
+
+      params.success({
+        results,
+        pagination: {
+          more,
+        },
+      });
+    })
+    .catch(params.error);
+};

ee/app/assets/javascripts/pages/admin/application_settings/index.js

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import Api from '~/api';
 import groupsSelect from '~/groups_select';
 import { loadCSSFile } from '~/lib/utils/css_utils';
+import { select2AxiosTransport } from '~/lib/utils/select2_utils';
 import { s__ } from '~/locale';
 
 const onLimitCheckboxChange = (checked, $limitByNamespaces, $limitByProjects) => {
@@ -29,12 +30,13 @@ const getDropdownConfig = (placeholder, apiPath, textProp) => ({
     },
     results(data) {
       return {
-        results: data.map((entity) => ({
+        results: data.results.map((entity) => ({
           id: entity.id,
           text: entity[textProp],
         })),
       };
     },
+    transport: select2AxiosTransport,
   },
 });
 

ee/app/assets/javascripts/pages/admin/application_settings/integrations/index.js

 import $ from 'jquery';
 import { loadCSSFile } from '~/lib/utils/css_utils';
+import { select2AxiosTransport } from '~/lib/utils/select2_utils';
 import { s__ } from '~/locale';
 import PersistentUserCallout from '~/persistent_user_callout';
 
@@ -27,12 +28,13 @@ const getDropdownConfig = (placeholder, url) => ({
     },
     results(data) {
       return {
-        results: data.map((entity) => ({
+        results: data.results.map((entity) => ({
           id: entity.source_id,
           text: entity.path,
         })),
       };
     },
+    transport: select2AxiosTransport,
   },
 });