Update to jQuery 3.

app/assets/javascripts/protected_branches/protected_branch_edit.js

@@ -41,11 +41,11 @@ export default class ProtectedBranchEdit {
     axios.patch(this.$wrap.data('url'), {
       protected_branch: {
         merge_access_levels_attributes: [{
-          id: this.$allowedToMergeDropdown.data('access-level-id'),
+          id: this.$allowedToMergeDropdown.data('accessLevelId'),
           access_level: $allowedToMergeInput.val(),
         }],
         push_access_levels_attributes: [{
-          id: this.$allowedToPushDropdown.data('access-level-id'),
+          id: this.$allowedToPushDropdown.data('accessLevelId'),
           access_level: $allowedToPushInput.val(),
         }],
       },

app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

@@ -9,8 +9,8 @@ export default class ProtectedTagAccessDropdown {
     this.options.$dropdown.glDropdown({
       data: this.options.data,
       selectable: true,
-      inputId: this.options.$dropdown.data('input-id'),
-      fieldName: this.options.$dropdown.data('field-name'),
+      inputId: this.options.$dropdown.data('inputId'),
+      fieldName: this.options.$dropdown.data('fieldName'),
       toggleLabel(item, $el) {
         if ($el.is('.is-active')) {
           return item.text;

app/assets/javascripts/protected_tags/protected_tag_create.js

@@ -39,7 +39,7 @@ export default class ProtectedTagCreate {
     const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
     const $allowedToCreateInput = this.$form.find('#create_access_levels_attributes');
-    this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
+    this.$form.find('input[type="submit"]').prop('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
   static getProtectedTags(term, callback) {

app/assets/javascripts/protected_tags/protected_tag_edit.js

@@ -31,7 +31,7 @@ export default class ProtectedTagEdit {
     axios.patch(this.$wrap.data('url'), {
       protected_tag: {
         create_access_levels_attributes: [{
-          id: this.$allowedToCreateDropdownButton.data('access-level-id'),
+          id: this.$allowedToCreateDropdownButton.data('accessLevelId'),
           access_level: $allowedToCreateInput.val(),
         }],
       },

app/assets/javascripts/ref_select_dropdown.js

@@ -6,7 +6,7 @@ class RefSelectDropdown {
       filterable: true,
       filterByText: true,
       remote: false,
-      fieldName: $dropdownButton.data('field-name'),
+      fieldName: $dropdownButton.data('fieldName'),
       filterInput: 'input[type="search"]',
       selectable: true,
       isSelectable(branch, $el) {
@@ -24,7 +24,7 @@ class RefSelectDropdown {
     });
     const $dropdownContainer = $dropdownButton.closest('.dropdown');
-    const $fieldInput = $(`input[name="${$dropdownButton.data('field-name')}"]`, $dropdownContainer);
+    const $fieldInput = $(`input[name="${$dropdownButton.data('fieldName')}"]`, $dropdownContainer);
     const $filterInput = $('input[type="search"]', $dropdownContainer);
     $filterInput.on('keyup', (e) => {

app/assets/javascripts/right_sidebar.js

@@ -76,8 +76,8 @@ Sidebar.prototype.toggleTodo = function(e) {
   $('.js-issuable-todo').disable().addClass('is-loading');
   axios[ajaxType](url, {
-    issuable_id: $this.data('issuable-id'),
-    issuable_type: $this.data('issuable-type'),
+    issuable_id: $this.data('issuableId'),
+    issuable_type: $this.data('issuableType'),
   }).then(({ data }) => {
     this.todoUpdateDone(data);
   }).catch(() => flash(`There was an error ${ajaxType === 'post' ? 'adding a' : 'deleting the'} todo.`));
@@ -96,18 +96,18 @@ Sidebar.prototype.todoUpdateDone = function(data) {
     $el.removeClass('is-loading')
       .enable()
-      .attr('aria-label', $el.data(`${attrPrefix}-text`))
+      .attr('aria-label', $el.data(`${attrPrefix}Text`))
       .attr('data-delete-path', deletePath)
-      .attr('title', $el.data(`${attrPrefix}-text`));
+      .attr('title', $el.data(`${attrPrefix}Text`));
     if ($el.hasClass('has-tooltip')) {
       $el.tooltip('fixTitle');
     }
-    if ($el.data(`${attrPrefix}-icon`)) {
-      $elText.html($el.data(`${attrPrefix}-icon`));
+    if ($el.data(`${attrPrefix}Icon`)) {
+      $elText.html($el.data(`${attrPrefix}Icon`));
     } else {
-      $elText.text($el.data(`${attrPrefix}-text`));
+      $elText.text($el.data(`${attrPrefix}Text`));
     }
   });
 };

app/assets/javascripts/search_autocomplete.js

@@ -25,32 +25,32 @@ function setSearchOptions() {
   if ($projectOptionsDataEl.length) {
     gl.projectOptions = gl.projectOptions || {};
-    var projectPath = $projectOptionsDataEl.data('project-path');
+    var projectPath = $projectOptionsDataEl.data('projectPath');
     gl.projectOptions[projectPath] = {
       name: $projectOptionsDataEl.data('name'),
-      issuesPath: $projectOptionsDataEl.data('issues-path'),
-      issuesDisabled: $projectOptionsDataEl.data('issues-disabled'),
-      mrPath: $projectOptionsDataEl.data('mr-path'),
+      issuesPath: $projectOptionsDataEl.data('issuesPath'),
+      issuesDisabled: $projectOptionsDataEl.data('issuesDisabled'),
+      mrPath: $projectOptionsDataEl.data('mrPath'),
     };
   }
   if ($groupOptionsDataEl.length) {
     gl.groupOptions = gl.groupOptions || {};
-    var groupPath = $groupOptionsDataEl.data('group-path');
+    var groupPath = $groupOptionsDataEl.data('groupPath');
     gl.groupOptions[groupPath] = {
       name: $groupOptionsDataEl.data('name'),
-      issuesPath: $groupOptionsDataEl.data('issues-path'),
-      mrPath: $groupOptionsDataEl.data('mr-path'),
+      issuesPath: $groupOptionsDataEl.data('issuesPath'),
+      mrPath: $groupOptionsDataEl.data('mrPath'),
     };
   }
   if ($dashboardOptionsDataEl.length) {
     gl.dashboardOptions = {
-      issuesPath: $dashboardOptionsDataEl.data('issues-path'),
-      mrPath: $dashboardOptionsDataEl.data('mr-path'),
+      issuesPath: $dashboardOptionsDataEl.data('issuesPath'),
+      mrPath: $dashboardOptionsDataEl.data('mrPath'),
     };
   }
 }
@@ -61,9 +61,9 @@ export default class SearchAutocomplete {
     this.bindEventContext();
     this.wrap = wrap || $('.search');
     this.optsEl = optsEl || this.wrap.find('.search-autocomplete-opts');
-    this.autocompletePath = autocompletePath || this.optsEl.data('autocomplete-path');
-    this.projectId = projectId || (this.optsEl.data('autocomplete-project-id') || '');
-    this.projectRef = projectRef || (this.optsEl.data('autocomplete-project-ref') || '');
+    this.autocompletePath = autocompletePath || this.optsEl.data('autocompletePath');
+    this.projectId = projectId || (this.optsEl.data('autocompleteProjectId') || '');
+    this.projectRef = projectRef || (this.optsEl.data('autocompleteProjectRef') || '');
     this.dropdown = this.wrap.find('.dropdown');
     this.dropdownToggle = this.wrap.find('.js-dropdown-search-toggle');
     this.dropdownContent = this.dropdown.find('.dropdown-content');

app/assets/javascripts/sidebar/lib/sidebar_move_issue.js

@@ -50,7 +50,7 @@ class SidebarMoveIssue {
         const selectedProjectId = options.isMarking ? project.id : 0;
         this.mediator.setMoveToProjectId(selectedProjectId);
-        this.$confirmButton.attr('disabled', !isValidProjectId(selectedProjectId));
+        this.$confirmButton.prop('disabled', !isValidProjectId(selectedProjectId));
       },
     });
   }

app/assets/javascripts/single_file_diff.js

@@ -18,7 +18,7 @@ export default class SingleFileDiff {
     this.toggleDiff = this.toggleDiff.bind(this);
     this.content = $('.diff-content', this.file);
     this.$toggleIcon = $('.diff-toggle-caret', this.file);
-    this.diffForPath = this.content.find('[data-diff-for-path]').data('diff-for-path');
+    this.diffForPath = this.content.find('[data-diff-for-path]').data('diffForPath');
     this.isOpen = !this.diffForPath;
     if (this.diffForPath) {
       this.collapsedContent = this.content;

app/assets/javascripts/star.js

 import Flash from './flash';
 import { __, s__ } from './locale';
 import { spriteIcon } from './lib/utils/common_utils';
+import axios from './lib/utils/axios_utils';
 export default class Star {
   constructor() {
-    $('.project-home-panel .toggle-star')
-      .on('ajax:success', function handleSuccess(e, data) {
-        const $this = $(this);
-        const $starSpan = $this.find('span');
-        const $startIcon = $this.find('svg');
-        function toggleStar(isStarred) {
+    $('.project-home-panel .toggle-star').on('click', function toggleStarClickCallback() {
+      const $this = $(this);
+      const $starSpan = $this.find('span');
+      const $startIcon = $this.find('svg');
+      axios.post($this.data('endpoint'))
+        .then(({ data }) => {
+          const isStarred = $starSpan.hasClass('starred');
           $this.parent().find('.star-count').text(data.star_count);
+
           if (isStarred) {
             $starSpan.removeClass('starred').text(s__('StarProject|Star'));
             $startIcon.remove();
@@ -21,12 +24,8 @@ export default class Star {
             $startIcon.remove();
             $this.prepend(spriteIcon('star'));
           }
-        }
-
-        toggleStar($starSpan.hasClass('starred'));
-      })
-      .on('ajax:error', () => {
-        Flash('Star toggle failed. Try again later.', 'alert');
-      });
+        })
+        .catch(() => Flash('Star toggle failed. Try again later.'));
+    });
   }
 }

app/assets/javascripts/subscription_select.js

 export default function subscriptionSelect() {
   $('.js-subscription-event').each((i, element) => {
-    const fieldName = $(element).data('field-name');
+    const fieldName = $(element).data('fieldName');
     return $(element).glDropdown({
       selectable: true,

app/assets/javascripts/task_list.js

@@ -40,7 +40,7 @@ export default class TaskList {
       [this.fieldName]: $target.val(),
     };
-    return axios.patch($target.data('update-url') || $('form.js-issuable-update').attr('action'), patchData)
+    return axios.patch($target.data('updateUrl') || $('form.js-issuable-update').attr('action'), patchData)
       .then(({ data }) => this.onSuccess(data))
       .catch(err => this.onError(err));
   }

app/assets/javascripts/templates/issuable_template_selector.js

@@ -6,9 +6,9 @@ import TemplateSelector from '../blob/template_selector';
 export default class IssuableTemplateSelector extends TemplateSelector {
   constructor(...args) {
     super(...args);
-    this.projectPath = this.dropdown.data('project-path');
-    this.namespacePath = this.dropdown.data('namespace-path');
-    this.issuableType = this.$dropdownContainer.data('issuable-type');
+    this.projectPath = this.dropdown.data('projectPath');
+    this.namespacePath = this.dropdown.data('namespacePath');
+    this.issuableType = this.$dropdownContainer.data('issuableType');
     this.titleInput = $(`#${this.issuableType}_title`);
     const initialQuery = {

app/assets/javascripts/user_callout.js

@@ -22,7 +22,7 @@ export default class UserCallout {
     const $currentTarget = $(e.currentTarget);
     if (this.options.setCalloutPerProject) {
-      Cookies.set(this.cookieName, 'true', { expires: 365, path: this.userCalloutBody.data('project-path') });
+      Cookies.set(this.cookieName, 'true', { expires: 365, path: this.userCalloutBody.data('projectPath') });
     } else {
       Cookies.set(this.cookieName, 'true', { expires: 365 });
     }

app/assets/javascripts/users_select.js

@@ -34,23 +34,23 @@ function UsersSelect(currentUser, els, options = {}) {
       var options = {};
       var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
       $dropdown = $(dropdown);
-      options.projectId = $dropdown.data('project-id');
-      options.groupId = $dropdown.data('group-id');
-      options.showCurrentUser = $dropdown.data('current-user');
-      options.todoFilter = $dropdown.data('todo-filter');
-      options.todoStateFilter = $dropdown.data('todo-state-filter');
-      options.perPage = $dropdown.data('per-page');
-      showNullUser = $dropdown.data('null-user');
-      defaultNullUser = $dropdown.data('null-user-default');
+      options.projectId = $dropdown.data('projectId');
+      options.groupId = $dropdown.data('groupId');
+      options.showCurrentUser = $dropdown.data('currentUser');
+      options.todoFilter = $dropdown.data('todoFilter');
+      options.todoStateFilter = $dropdown.data('todoStateFilter');
+      options.perPage = $dropdown.data('perPage');
+      showNullUser = $dropdown.data('nullUser');
+      defaultNullUser = $dropdown.data('nullUserDefault');
       showMenuAbove = $dropdown.data('showMenuAbove');
-      showAnyUser = $dropdown.data('any-user');
-      firstUser = $dropdown.data('first-user');
-      options.authorId = $dropdown.data('author-id');
-      defaultLabel = $dropdown.data('default-label');
+      showAnyUser = $dropdown.data('anyUser');
+      firstUser = $dropdown.data('firstUser');
+      options.authorId = $dropdown.data('authorId');
+      defaultLabel = $dropdown.data('defaultLabel');
       issueURL = $dropdown.data('issueUpdate');
       $selectbox = $dropdown.closest('.selectbox');
       $block = $selectbox.closest('.block');
-      abilityName = $dropdown.data('ability-name');
+      abilityName = $dropdown.data('abilityName');
       $value = $block.find('.value');
       $collapsedSidebar = $block.find('.sidebar-collapsed-user');
       $loading = $block.find('.block-loading').fadeOut();
@@ -63,7 +63,7 @@ function UsersSelect(currentUser, els, options = {}) {
       const assignYourself = function () {
         const unassignedSelected = $dropdown.closest('.selectbox')
-          .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
+          .find(`input[name='${$dropdown.data('fieldName')}'][value=0]`);
         if (unassignedSelected) {
           unassignedSelected.remove();
@@ -72,7 +72,7 @@ function UsersSelect(currentUser, els, options = {}) {
         // Save current selected user to the DOM
         const input = document.createElement('input');
         input.type = 'hidden';
-        input.name = $dropdown.data('field-name');
+        input.name = $dropdown.data('fieldName');
         const currentUserInfo = $dropdown.data('currentUserInfo');
@@ -96,7 +96,7 @@ function UsersSelect(currentUser, els, options = {}) {
       const getSelectedUserInputs = function() {
         return $selectbox
-          .find(`input[name="${$dropdown.data('field-name')}"]`);
+          .find(`input[name="${$dropdown.data('fieldName')}"]`);
       };
       const getSelected = function() {
@@ -106,14 +106,14 @@ function UsersSelect(currentUser, els, options = {}) {
       };
       const checkMaxSelect = function() {
-        const maxSelect = $dropdown.data('max-select');
+        const maxSelect = $dropdown.data('maxSelect');
         if (maxSelect) {
           const selected = getSelected();
           if (selected.length > maxSelect) {
             const firstSelectedId = selected[0];
             const firstSelected = $dropdown.closest('.selectbox')
-              .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
+              .find(`input[name='${$dropdown.data('fieldName')}'][value=${firstSelectedId}]`);
             firstSelected.remove();
             emitSidebarEvent('sidebar.removeAssignee', {
@@ -158,7 +158,7 @@ function UsersSelect(currentUser, els, options = {}) {
           const currentUserInfo = $dropdown.data('currentUserInfo');
           $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
         } else {
-          const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
+          const $input = $(`input[name="${$dropdown.data('fieldName')}"]`);
           $input.val(gon.current_user_id);
           selectedId = $input.val();
           $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
@@ -293,10 +293,10 @@ function UsersSelect(currentUser, els, options = {}) {
               const selected = getSelected().filter(i => i !== 0);
               if (selected.length > 0) {
-                if ($dropdown.data('dropdown-header')) {
+                if ($dropdown.data('dropdownHeader')) {
                   showDivider += 1;
                   users.splice(showDivider, 0, {
-                    header: $dropdown.data('dropdown-header'),
+                    header: $dropdown.data('dropdownHeader'),
                   });
                 }
@@ -327,7 +327,7 @@ function UsersSelect(currentUser, els, options = {}) {
           fields: ['name', 'username']
         },
         selectable: true,
-        fieldName: $dropdown.data('field-name'),
+        fieldName: $dropdown.data('fieldName'),
         toggleLabel: function(selected, el, glDropdown) {
           const inputValue = glDropdown.filterInput.val();
@@ -362,7 +362,7 @@ function UsersSelect(currentUser, els, options = {}) {
             emitSidebarEvent('sidebar.saveAssignees');
           }
-          if (!$dropdown.data('always-show-selectbox')) {
+          if (!$dropdown.data('alwaysShowSelectbox')) {
             $selectbox.hide();
             // Recalculate where .value is because vue might have changed it
@@ -373,7 +373,7 @@ function UsersSelect(currentUser, els, options = {}) {
           }
         },
         multiSelect: $dropdown.hasClass('js-multiselect'),
-        inputMeta: $dropdown.data('input-meta'),
+        inputMeta: $dropdown.data('inputMeta'),
         clicked: function(options) {
           const { $el, e, isMarking } = options;
           const user = options.selectedObj;
@@ -381,7 +381,7 @@ function UsersSelect(currentUser, els, options = {}) {
           if ($dropdown.hasClass('js-multiselect')) {
             const isActive = $el.hasClass('is-active');
             const previouslySelected = $dropdown.closest('.selectbox')
-                .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
+                .find("input[name='" + ($dropdown.data('fieldName')) + "'][value!=0]");
             // Enables support for limiting the number of users selected
             // Automatically removes the first on the list if more users are selected
@@ -400,7 +400,7 @@ function UsersSelect(currentUser, els, options = {}) {
               // Remove unassigned selection (if it was previously selected)
               const unassignedSelected = $dropdown.closest('.selectbox')
-                .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+                .find("input[name='" + ($dropdown.data('fieldName')) + "'][value=0]");
               if (unassignedSelected) {
                 unassignedSelected.remove();
@@ -408,7 +408,7 @@ function UsersSelect(currentUser, els, options = {}) {
             } else {
               if (previouslySelected.length === 0) {
               // Select unassigned because there is no more selected users
-                this.addInput($dropdown.data('field-name'), 0, {});
+                this.addInput($dropdown.data('fieldName'), 0, {});
               }
               // User unselected
@@ -440,7 +440,7 @@ function UsersSelect(currentUser, els, options = {}) {
             return;
           }
           if ($el.closest('.add-issues-modal').length) {
-            gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
+            gl.issueBoards.ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
           } else if (handleClick) {
             e.preventDefault();
             handleClick(user, isMarking);
@@ -449,15 +449,15 @@ function UsersSelect(currentUser, els, options = {}) {
           } else if ($dropdown.hasClass('js-filter-submit')) {
             return $dropdown.closest('form').submit();
           } else if (!$dropdown.hasClass('js-multiselect')) {
-            selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
+            selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('fieldName')) + "']").val();
             return assignTo(selected);
           }
           // Automatically close dropdown after assignee is selected
           // since CE has no multiple assignees
           // EE does not have a max-select
-          if ($dropdown.data('max-select') &&
-              getSelected().length === $dropdown.data('max-select')) {
+          if ($dropdown.data('maxSelect') &&
+              getSelected().length === $dropdown.data('maxSelect')) {
             // Close the dropdown
             $dropdown.dropdown('toggle');
           }
@@ -469,7 +469,7 @@ function UsersSelect(currentUser, els, options = {}) {
           const $el = $(e.currentTarget);
           const selected = getSelected();
           if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
-            this.addInput($dropdown.data('field-name'), 0, {});
+            this.addInput($dropdown.data('fieldName'), 0, {});
           }
           $el.find('.is-active').removeClass('is-active');
@@ -485,7 +485,7 @@ function UsersSelect(currentUser, els, options = {}) {
             highlightSelected(selectedId);
           }
         },
-        updateLabel: $dropdown.data('dropdown-title'),
+        updateLabel: $dropdown.data('dropdownTitle'),
         renderRow: function(user) {
           var avatar, img, listClosingTags, listWithName, listWithUserName, username;
           username = user.username ? "@" + user.username : "";
@@ -533,15 +533,15 @@ function UsersSelect(currentUser, els, options = {}) {
       var firstUser, showAnyUser, showEmailUser, showNullUser;
       var options = {};
       options.skipLdap = $(select).hasClass('skip_ldap');
-      options.projectId = $(select).data('project-id');
-      options.groupId = $(select).data('group-id');
-      options.showCurrentUser = $(select).data('current-user');
-      options.authorId = $(select).data('author-id');
-      options.skipUsers = $(select).data('skip-users');
-      showNullUser = $(select).data('null-user');
-      showAnyUser = $(select).data('any-user');
-      showEmailUser = $(select).data('email-user');
-      firstUser = $(select).data('first-user');
+      options.projectId = $(select).data('projectId');
+      options.groupId = $(select).data('groupId');
+      options.showCurrentUser = $(select).data('currentUser');
+      options.authorId = $(select).data('authorId');
+      options.skipUsers = $(select).data('skipUsers');
+      showNullUser = $(select).data('nullUser');
+      showAnyUser = $(select).data('anyUser');
+      showEmailUser = $(select).data('emailUser');
+      firstUser = $(select).data('firstUser');
       return $(select).select2({
         placeholder: "Search for a user",
         multiple: $(select).hasClass('multiselect'),

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -64,7 +64,7 @@
       return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
     },
     beforeDestroy() {
-      const glForm = $(this.$refs['gl-form']).data('gl-form');
+      const glForm = $(this.$refs['gl-form']).data('glForm');
       if (glForm) {
         glForm.destroy();
       }

app/views/projects/buttons/_star.html.haml

 - if current_user
-  = link_to toggle_star_project_path(@project), { class: 'btn star-btn toggle-star', method: :post, remote: true } do
+  %button.btn.btn-default.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
     - if current_user.starred?(@project)
       = sprite_icon('star')
       %span.starred= _('Unstar')

package.json

@@ -51,7 +51,7 @@
     "glob": "^7.1.2",
     "imports-loader": "^0.7.1",
     "jed": "^1.1.1",
-    "jquery": "^2.2.4",
+    "jquery": "^3.2.1",
     "jquery-ujs": "1.2.2",
     "jquery.waitforimages": "^2.2.0",
     "js-cookie": "^2.1.3",

spec/features/projects/members/share_with_group_spec.rb

@@ -149,6 +149,11 @@ feature 'Project > Members > Share with Group', :js do
         create(:group).add_owner(master)
         visit project_settings_members_path(project)
+
+        click_link 'Share with group'
+
+        find('.ajax-groups-select.select2-container')
+
         execute_script 'GROUP_SELECT_PER_PAGE = 1;'
         open_select2 '#link_group_id'
       end

spec/javascripts/ajax_loading_spinner_spec.js

-import 'jquery';
-import 'jquery-ujs';
 import AjaxLoadingSpinner from '~/ajax_loading_spinner';
 describe('Ajax Loading Spinner', () => {