Remove and deprecate gl_dropdown jQuery function

This removes $.fn.glDropdown and replaces it with the function
initDeprecatedJQueryDropdown. This ensures that modules which rely
on this function are not dependent on a globally accessible function
and also prevents naming confusion with the gitlab-ui component
also named GlDropdown.

app/assets/javascripts/blob/template_selector.js

 /* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TemplateSelector {
   constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
@@ -19,7 +19,7 @@ export default class TemplateSelector {
   }
 
   initDropdown(dropdown, data) {
-    return $(dropdown).glDropdown({
+    return initDeprecatedJQueryDropdown($(dropdown), {
       data,
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js

 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobCiYamlSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -15,7 +16,7 @@ export default class BlobCiYamlSelector extends FileTemplateSelector {
 
   initDropdown() {
     // maybe move to super class as well
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/dockerfile_selector.js

 import FileTemplateSelector from '../file_template_selector';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class DockerfileSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -16,7 +17,7 @@ export default class DockerfileSelector extends FileTemplateSelector {
 
   initDropdown() {
     // maybe move to super class as well
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/gitignore_selector.js

 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobGitignoreSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class BlobGitignoreSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/license_selector.js

 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class BlobLicenseSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js

 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class MetricsDashboardSelector extends FileTemplateSelector {
   constructor({ mediator }) {
@@ -14,7 +15,7 @@ export default class MetricsDashboardSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.$dropdown.data('data'),
       filterable: true,
       selectable: true,

app/assets/javascripts/blob/template_selectors/type_selector.js

 import FileTemplateSelector from '../file_template_selector';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class FileTemplateTypeSelector extends FileTemplateSelector {
   constructor({ mediator, dropdownData }) {
@@ -12,7 +13,7 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.config.dropdownData,
       filterable: false,
       selectable: true,

app/assets/javascripts/boards/components/board_sidebar.js

@@ -83,7 +83,7 @@ export default Vue.extend({
 
           $('.js-issue-board-sidebar', this.$el).each((i, el) => {
             $(el)
-              .data('glDropdown')
+              .data('deprecatedJQueryDropdown')
               .clearMenu();
           });
         }
@@ -95,7 +95,7 @@ export default Vue.extend({
     },
   },
   created() {
-    // Get events from glDropdown
+    // Get events from deprecatedJQueryDropdown
     eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
     eventHub.$on('sidebar.addAssignee', this.addAssignee);
     eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);

app/assets/javascripts/boards/components/new_list_dropdown.js

@@ -6,6 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import CreateLabelDropdown from '../../create_label';
 import boardsStore from '../stores/boards_store';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 $(document)
   .off('created.label')
@@ -36,7 +37,7 @@ export default function initNewListDropdown() {
       $dropdownToggle.data('projectPath'),
     );
 
-    $dropdownToggle.glDropdown({
+    initDeprecatedJQueryDropdown($dropdownToggle, {
       data(term, callback) {
         axios
           .get($dropdownToggle.attr('data-list-labels-path'))

app/assets/javascripts/boards/components/project_select.vue

@@ -7,6 +7,7 @@ import { __ } from '~/locale';
 import eventHub from '../eventhub';
 import Api from '../../api';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default {
   name: 'BoardProjectSelect',
@@ -37,7 +38,7 @@ export default {
     },
   },
   mounted() {
-    $(this.$refs.projectsDropdown).glDropdown({
+    initDeprecatedJQueryDropdown($(this.$refs.projectsDropdown), {
       filterable: true,
       filterRemote: true,
       search: {

app/assets/javascripts/ci_variable_list/ci_variable_list.js

@@ -53,7 +53,7 @@ export default class VariableList {
       },
       environment_scope: {
         // We can't use a `.js-` class here because
-        // gl_dropdown replaces the <input> and doesn't copy over the class
+        // deprecated_jquery_dropdown replaces the <input> and doesn't copy over the class
         // See https://gitlab.com/gitlab-org/gitlab-foss/issues/42458
         selector: `input[name="${this.formField}[variables_attributes][][environment_scope]"]`,
         default: '*',

app/assets/javascripts/compare_autocomplete.js

@@ -5,6 +5,7 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from './flash';
 import { capitalizeFirstCharacter } from './lib/utils/text_utility';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default function initCompareAutocomplete(limitTo = null, clickHandler = () => {}) {
   $('.js-compare-dropdown').each(function() {
@@ -13,7 +14,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
     const $dropdownContainer = $dropdown.closest('.dropdown');
     const $fieldInput = $(`input[name="${$dropdown.data('fieldName')}"]`, $dropdownContainer);
     const $filterInput = $('input[type="search"]', $dropdownContainer);
-    $dropdown.glDropdown({
+    initDeprecatedJQueryDropdown($dropdown, {
       data(term, callback) {
         const params = {
           ref: $dropdown.data('ref'),

app/assets/javascripts/create_item_dropdown.js

 import { escape } from 'lodash';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class CreateItemDropdown {
   /**
@@ -28,7 +28,7 @@ export default class CreateItemDropdown {
   }
 
   buildDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.getData.bind(this),
       filterable: true,
       filterRemote: this.getDataRemote,
@@ -67,12 +67,12 @@ export default class CreateItemDropdown {
     e.preventDefault();
 
     this.refreshData();
-    this.$dropdown.data('glDropdown').selectRowAtIndex();
+    this.$dropdown.data('deprecatedJQueryDropdown').selectRowAtIndex();
   }
 
   refreshData() {
     // Refresh the dropdown's data, which ends up calling `getData`
-    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('deprecatedJQueryDropdown').remote.execute();
   }
 
   getData(term, callback) {

app/assets/javascripts/gl_dropdown.js → app/assets/javascripts/deprecated_jquery_dropdown/index.js

@@ -3,10 +3,10 @@
 import $ from 'jquery';
 import { escape } from 'lodash';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import axios from './lib/utils/axios_utils';
+import axios from '../lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { isObject } from './lib/utils/type_utility';
-import renderItem from './gl_dropdown/render';
+import { isObject } from '~/lib/utils/type_utility';
+import renderItem from './render';
 
 const BLUR_KEYCODES = [27, 40];
 
@@ -890,12 +890,11 @@ class GitLabDropdown {
   }
 }
 
-// eslint-disable-next-line func-names
-$.fn.glDropdown = function(opts) {
+export default function initDeprecatedJQueryDropdown($el, opts) {
   // eslint-disable-next-line func-names
-  return this.each(function() {
-    if (!$.data(this, 'glDropdown')) {
-      return $.data(this, 'glDropdown', new GitLabDropdown(this, opts));
+  return $el.each(function() {
+    if (!$.data(this, 'deprecatedJQueryDropdown')) {
+      $.data(this, 'deprecatedJQueryDropdown', new GitLabDropdown(this, opts));
     }
   });
-};
+}

app/assets/javascripts/due_date_select.js

@@ -6,6 +6,7 @@ import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor, parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';
 import boardsStore from './boards/stores/boards_store';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 class DueDateSelect {
   constructor({ $dropdown, $loading } = {}) {
@@ -35,7 +36,7 @@ class DueDateSelect {
   }
 
   initGlDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       opened: () => {
         const calendar = this.$datePicker.data('pikaday');
         calendar.show();

app/assets/javascripts/groups/transfer_dropdown.js

 import $ from 'jquery';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TransferDropdown {
   constructor() {
@@ -16,7 +17,7 @@ export default class TransferDropdown {
   buildDropdown() {
     const extraOptions = [{ id: '-1', text: __('No parent group') }, { type: 'divider' }];
 
-    this.groupDropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.groupDropdown, {
       selectable: true,
       filterable: true,
       toggleLabel: item => item.text,

app/assets/javascripts/init_changes_dropdown.js

 import $ from 'jquery';
 import { stickyMonitor } from './lib/utils/sticky';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default stickyTop => {
   stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
 
-  $('.js-diff-stats-dropdown').glDropdown({
+  initDeprecatedJQueryDropdown($('.js-diff-stats-dropdown'), {
     filterable: true,
     remoteFilter: false,
   });

app/assets/javascripts/issue_status_select.js

 import $ from 'jquery';
 import { __ } from './locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default function issueStatusSelect() {
   $('.js-issue-status').each((i, el) => {
     const fieldName = $(el).data('fieldName');
-    return $(el).glDropdown({
+    initDeprecatedJQueryDropdown($(el), {
       selectable: true,
       fieldName,
       toggleLabel(selected, element, instance) {

app/assets/javascripts/labels_select.js

@@ -12,6 +12,7 @@ import { deprecatedCreateFlash as flash } from './flash';
 import ModalStore from './boards/stores/modal_store';
 import boardsStore from './boards/stores/boards_store';
 import { isScopedLabel } from '~/lib/utils/common_utils';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -173,7 +174,7 @@ export default class LabelsSelect {
           })
           .catch(() => flash(__('Error saving label update.')));
       };
-      $dropdown.glDropdown({
+      initDeprecatedJQueryDropdown($dropdown, {
         showMenuAbove,
         data(term, callback) {
           const labelUrl = $dropdown.attr('data-labels');
@@ -203,7 +204,7 @@ export default class LabelsSelect {
 
               callback(data);
               if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
+                $dropdown.data('deprecatedJQueryDropdown').positionMenuAbove();
               }
             })
             .catch(() => flash(__('Error fetching labels.')));
@@ -348,7 +349,7 @@ export default class LabelsSelect {
             } else {
               if (!$dropdown.hasClass('js-filter-bulk-update')) {
                 saveLabelData();
-                $dropdown.data('glDropdown').clearMenu();
+                $dropdown.data('deprecatedJQueryDropdown').clearMenu();
               }
             }
           }
@@ -455,7 +456,7 @@ export default class LabelsSelect {
           if ($dropdown.hasClass('js-issue-board-sidebar')) {
             const previousSelection = $dropdown.attr('data-selected');
             this.selected = previousSelection ? previousSelection.split(',') : [];
-            $dropdown.data('glDropdown').updateLabel();
+            $dropdown.data('deprecatedJQueryDropdown').updateLabel();
           }
         },
         preserveContext: true,

app/assets/javascripts/main.js

@@ -22,7 +22,6 @@ import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 // everything else
 import loadAwardsHandler from './awards_handler';
 import { deprecatedCreateFlash as Flash, removeFlashClickListener } from './flash';
-import './gl_dropdown';
 import initTodoToggle from './header';
 import initImporterStatus from './importer_status';
 import initLayoutNav from './layout_nav';

app/assets/javascripts/members.js

 import $ from 'jquery';
 import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class Members {
   constructor() {
@@ -37,7 +38,7 @@ export default class Members {
     $('.js-member-permissions-dropdown').each((i, btn) => {
       const $btn = $(btn);
 
-      $btn.glDropdown({
+      initDeprecatedJQueryDropdown($btn, {
         selectable: true,
         isSelectable: (selected, $el) => this.dropdownIsSelectable(selected, $el),
         fieldName: $btn.data('fieldName'),

app/assets/javascripts/milestone_select.js

@@ -5,7 +5,7 @@
 import $ from 'jquery';
 import { template, escape } from 'lodash';
 import { __, sprintf } from '~/locale';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import Api from '~/api';
 import axios from './lib/utils/axios_utils';
 import { timeFor, parsePikadayDate, dateInWords } from './lib/utils/datetime_utility';
@@ -69,7 +69,7 @@ export default class MilestoneSelect {
         );
         milestoneLinkNoneTemplate = `<span class="no-value">${__('None')}</span>`;
       }
-      return $dropdown.glDropdown({
+      return initDeprecatedJQueryDropdown($dropdown, {
         showMenuAbove,
         data: (term, callback) => {
           let contextId = $dropdown.get(0).dataset.projectId;
@@ -138,7 +138,7 @@ export default class MilestoneSelect {
 
               callback(extraOptions.concat(data));
               if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
+                $dropdown.data('deprecatedJQueryDropdown').positionMenuAbove();
               }
               $(`[data-milestone-id="${selectedMilestone}"] > a`).addClass('is-active');
             });

app/assets/javascripts/namespace_select.js

 import $ from 'jquery';
-import '~/gl_dropdown';
 import Api from './api';
 import { mergeUrlParams } from './lib/utils/url_utility';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from './locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class NamespaceSelect {
   constructor(opts) {
     const isFilter = parseBoolean(opts.dropdown.dataset.isFilter);
     const fieldName = opts.dropdown.dataset.fieldName || 'namespace_id';
 
-    $(opts.dropdown).glDropdown({
+    initDeprecatedJQueryDropdown($(opts.dropdown), {
       filterable: true,
       selectable: true,
       filterRemote: true,

app/assets/javascripts/pages/dashboard/todos/index/todos.js

 /* eslint-disable class-methods-use-this, no-unneeded-ternary */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { visitUrl } from '~/lib/utils/url_utility';
 import UsersSelect from '~/users_select';
 import { isMetaClick } from '~/lib/utils/common_utils';
@@ -50,7 +50,7 @@ export default class Todos {
   }
 
   initFilterDropdown($dropdown, fieldName, searchFields) {
-    $dropdown.glDropdown({
+    initDeprecatedJQueryDropdown($dropdown, {
       fieldName,
       selectable: true,
       filterable: searchFields ? true : false,

app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js

 import $ from 'jquery';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default () => {
   const $targetProjectDropdown = $('.js-target-project');
-  $targetProjectDropdown.glDropdown({
+  initDeprecatedJQueryDropdown($targetProjectDropdown, {
     selectable: true,
     fieldName: $targetProjectDropdown.data('fieldName'),
     filterable: true,
@@ -16,7 +17,7 @@ export default () => {
       $('.mr_target_commit').empty();
       const $targetBranchDropdown = $('.js-target-branch');
       $targetBranchDropdown.data('refsUrl', $el.data('refsUrl'));
-      $targetBranchDropdown.data('glDropdown').clearMenu();
+      $targetBranchDropdown.data('deprecatedJQueryDropdown').clearMenu();
     },
   });
 };

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js

 import $ from 'jquery';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TargetBranchDropdown {
   constructor() {
@@ -10,7 +11,7 @@ export default class TargetBranchDropdown {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.formatBranchesList(),
       filterable: true,
       selectable: true,

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js

+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+
 const defaultTimezone = { name: 'UTC', offset: 0 };
 const defaults = {
   $inputEl: null,
@@ -42,7 +44,7 @@ export default class TimezoneDropdown {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.timezoneData,
       filterable: true,
       selectable: true,

app/assets/javascripts/pages/projects/project.js

@@ -8,6 +8,7 @@ import { serializeForm } from '~/lib/utils/forms';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import projectSelect from '../../project_select';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class Project {
   constructor() {
@@ -104,7 +105,7 @@ export default class Project {
       const action = $form.attr('action');
       const linkTarget = mergeUrlParams(serializeForm($form[0]), action);
 
-      return $dropdown.glDropdown({
+      return initDeprecatedJQueryDropdown($dropdown, {
         data(term, callback) {
           axios
             .get($dropdown.data('refsUrl'), {

app/assets/javascripts/pages/search/show/search.js

 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import Api from '~/api';
 import { __ } from '~/locale';
@@ -20,7 +20,7 @@ export default class Search {
     this.eventListeners();
     refreshCounts();
 
-    $groupDropdown.glDropdown({
+    initDeprecatedJQueryDropdown($groupDropdown, {
       selectable: true,
       filterable: true,
       filterRemote: true,
@@ -46,7 +46,7 @@ export default class Search {
       clicked: () => Search.submitSearch(),
     });
 
-    $projectDropdown.glDropdown({
+    initDeprecatedJQueryDropdown($projectDropdown, {
       selectable: true,
       filterable: true,
       filterRemote: true,

app/assets/javascripts/projects/settings/access_dropdown.js

@@ -4,6 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { n__, s__, __ } from '~/locale';
 import { LEVEL_TYPES, LEVEL_ID_PROP, ACCESS_LEVEL_NONE } from './constants';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class AccessDropdown {
   constructor(options) {
@@ -29,7 +30,7 @@ export default class AccessDropdown {
 
   initDropdown() {
     const { onSelect, onHide } = this.options;
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.getData.bind(this),
       selectable: true,
       filterable: true,

app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class ProtectedTagAccessDropdown {
   constructor(options) {
@@ -8,7 +9,7 @@ export default class ProtectedTagAccessDropdown {
 
   initDropdown() {
     const { onSelect } = this.options;
-    this.options.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.options.$dropdown, {
       data: this.options.data,
       selectable: true,
       inputId: this.options.$dropdown.data('inputId'),

app/assets/javascripts/protected_tags/protected_tag_create.js

@@ -23,7 +23,7 @@ export default class ProtectedTagCreate {
     });
 
     // Select default
-    $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
+    $allowedToCreateDropdown.data('deprecatedJQueryDropdown').selectRowAtIndex(0);
 
     // Protected tag dropdown
     this.createItemDropdown = new CreateItemDropdown({

app/assets/javascripts/ref_select_dropdown.js

 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 class RefSelectDropdown {
   constructor($dropdownButton, availableRefs) {
     const availableRefsValue =
       availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
-    $dropdownButton.glDropdown({
+    initDeprecatedJQueryDropdown($dropdownButton, {
       data: availableRefsValue,
       filterable: true,
       filterByText: true,

app/assets/javascripts/search_autocomplete.js

@@ -13,6 +13,7 @@ import {
   spriteIcon,
 } from './lib/utils/common_utils';
 import Tracking from '~/tracking';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 /**
  * Search input in top navigation bar.
@@ -119,7 +120,7 @@ export class SearchAutocomplete {
   }
 
   createAutocomplete() {
-    return this.searchInput.glDropdown({
+    return initDeprecatedJQueryDropdown(this.searchInput, {
       filterInputBlur: false,
       filterable: true,
       filterRemote: true,
@@ -145,10 +146,10 @@ export class SearchAutocomplete {
     if (!term) {
       const contents = this.getCategoryContents();
       if (contents) {
-        const glDropdownInstance = this.searchInput.data('glDropdown');
+        const deprecatedJQueryDropdownInstance = this.searchInput.data('deprecatedJQueryDropdown');
 
-        if (glDropdownInstance) {
-          glDropdownInstance.filter.options.callback(contents);
+        if (deprecatedJQueryDropdownInstance) {
+          deprecatedJQueryDropdownInstance.filter.options.callback(contents);
         }
         this.enableAutocomplete();
       }
@@ -463,7 +464,7 @@ export class SearchAutocomplete {
   }
 
   highlightFirstRow() {
-    this.searchInput.data('glDropdown').highlightRowAtIndex(null, 0);
+    this.searchInput.data('deprecatedJQueryDropdown').highlightRowAtIndex(null, 0);
   }
 
   getAvatar(item) {

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -62,7 +62,7 @@ export default {
     this.addAssignee = this.store.addAssignee.bind(this.store);
     this.removeAllAssignees = this.store.removeAllAssignees.bind(this.store);
 
-    // Get events from glDropdown
+    // Get events from deprecatedJQueryDropdown
     eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
     eventHub.$on('sidebar.addAssignee', this.addAssignee);
     eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);

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

 import $ from 'jquery';
-import '~/gl_dropdown';
 import { escape } from 'lodash';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 function isValidProjectId(id) {
   return id > 0;
@@ -27,7 +27,7 @@ class SidebarMoveIssue {
   }
 
   initDropdown() {
-    this.$dropdownToggle.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdownToggle, {
       search: {
         fields: ['name_with_namespace'],
       },

app/assets/javascripts/subscription_select.js

 import $ from 'jquery';
 import { __ } from './locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default function subscriptionSelect() {
   $('.js-subscription-event').each((i, element) => {
     const fieldName = $(element).data('fieldName');
 
-    return $(element).glDropdown({
+    return initDeprecatedJQueryDropdown($(element), {
       selectable: true,
       fieldName,
       toggleLabel(selected, el, instance) {

app/assets/javascripts/templates/issuable_template_selector.js

@@ -33,7 +33,7 @@ export default class IssuableTemplateSelector extends TemplateSelector {
     this.templateWarningEl.find('.js-close-btn').on('click', () => {
       // Explicitly check against 0 value
       if (this.previousSelectedIndex !== undefined) {
-        this.dropdown.data('glDropdown').selectRowAtIndex(this.previousSelectedIndex);
+        this.dropdown.data('deprecatedJQueryDropdown').selectRowAtIndex(this.previousSelectedIndex);
       } else {
         this.reset();
       }
@@ -61,7 +61,7 @@ export default class IssuableTemplateSelector extends TemplateSelector {
   }
 
   setSelectedIndex() {
-    this.previousSelectedIndex = this.dropdown.data('glDropdown').selectedIndex;
+    this.previousSelectedIndex = this.dropdown.data('deprecatedJQueryDropdown').selectedIndex;
   }
 
   onDropdownClicked(query) {

app/assets/javascripts/ui_development_kit.js

 import $ from 'jquery';
 import Api from './api';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default () => {
-  $('#js-project-dropdown').glDropdown({
+  initDeprecatedJQueryDropdown($('#js-project-dropdown'), {
     data: (term, callback) => {
       Api.projects(
         term,

app/assets/javascripts/users_select/index.js

@@ -13,6 +13,7 @@ import { s__, __, sprintf } from '../locale';
 import ModalStore from '../boards/stores/modal_store';
 import { parseBoolean } from '../lib/utils/common_utils';
 import { getAjaxUsersSelectOptions, getAjaxUsersSelectParams } from './utils';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
@@ -233,14 +234,14 @@ function UsersSelect(currentUser, els, options = {}) {
         closingTag: '</a>',
       })}</span> <% } %>`,
     );
-    return $dropdown.glDropdown({
+    return initDeprecatedJQueryDropdown($dropdown, {
       showMenuAbove,
       data(term, callback) {
         return userSelect.users(term, options, users => {
           // GitLabDropdownFilter returns this.instance
           // GitLabDropdownRemote returns this.options.instance
-          const glDropdown = this.instance || this.options.instance;
-          glDropdown.options.processData(term, users, callback);
+          const deprecatedJQueryDropdown = this.instance || this.options.instance;
+          deprecatedJQueryDropdown.options.processData(term, users, callback);
         });
       },
       processData(term, data, callback) {
@@ -349,7 +350,7 @@ function UsersSelect(currentUser, els, options = {}) {
 
         callback(users);
         if (showMenuAbove) {
-          $dropdown.data('glDropdown').positionMenuAbove();
+          $dropdown.data('deprecatedJQueryDropdown').positionMenuAbove();
         }
       },
       filterable: true,
@@ -359,13 +360,13 @@ function UsersSelect(currentUser, els, options = {}) {
       },
       selectable: true,
       fieldName: $dropdown.data('fieldName'),
-      toggleLabel(selected, el, glDropdown) {
-        const inputValue = glDropdown.filterInput.val();
+      toggleLabel(selected, el, deprecatedJQueryDropdown) {
+        const inputValue = deprecatedJQueryDropdown.filterInput.val();
 
         if (this.multiSelect && inputValue === '') {
           // Remove non-users from the fullData array
-          const users = glDropdown.filteredFullData();
-          const callback = glDropdown.parseData.bind(glDropdown);
+          const users = deprecatedJQueryDropdown.filteredFullData();
+          const callback = deprecatedJQueryDropdown.parseData.bind(deprecatedJQueryDropdown);
 
           // Update the data model
           this.processData(inputValue, users, callback);

app/assets/stylesheets/pages/search.scss

@@ -105,7 +105,7 @@ input[type='checkbox']:hover {
     }
 
     .dropdown-header {
-      // Necessary because glDropdown doesn't support a second style of headers
+      // Necessary because deprecatedJQueryDropdown doesn't support a second style of headers
       font-weight: $gl-font-weight-bold;
       color: $gl-text-color;
       font-size: $gl-font-size;

ee/app/assets/javascripts/boards/components/assignee_select.vue

 <script>
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import '~/gl_dropdown';
 import UsersSelect from '~/users_select';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/ci_template.js

 import $ from 'jquery';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class CiTemplate {
   constructor() {
@@ -10,7 +11,7 @@ export default class CiTemplate {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.formatDropdownList(),
       selectable: true,
       filterable: true,

ee/app/assets/javascripts/weight_select.js

 /* eslint-disable no-shadow */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 function WeightSelect(els, options = {}) {
   const $els = $(els || '.js-weight-select');
@@ -20,7 +20,7 @@ function WeightSelect(els, options = {}) {
       inputField.val(options.selected);
     }
 
-    return $dropdown.glDropdown({
+    return initDeprecatedJQueryDropdown($dropdown, {
       selectable: true,
       fieldName,
       toggleLabel(selected, el) {
@@ -36,9 +36,9 @@ function WeightSelect(els, options = {}) {
         }
         return '';
       },
-      clicked(glDropdownEvt) {
-        const { e } = glDropdownEvt;
-        let selected = glDropdownEvt.selectedObj;
+      clicked(deprecatedJQueryDropdownEvt) {
+        const { e } = deprecatedJQueryDropdownEvt;
+        let selected = deprecatedJQueryDropdownEvt.selectedObj;
         const inputField = $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`);
 
         if (options.handleClick) {

ee/spec/frontend/pages/admin/application_settings/ci_cd/ci_template_spec.js

 import CiTemplate from 'ee/pages/admin/application_settings/ci_cd/ci_template';
 import { setHTMLFixture } from 'helpers/fixtures';
-import '~/gl_dropdown';
 
 const DROPDOWN_DATA = {
   Instance: [{ name: 'test', id: 'test' }],

spec/frontend/gl_dropdown_spec.js → spec/frontend/deprecated_jquery_dropdown_spec.js

 /* eslint-disable no-param-reassign */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import '~/lib/utils/common_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -9,8 +9,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn().mockName('visitUrl'),
 }));
 
-describe('glDropdown', () => {
-  preloadFixtures('static/gl_dropdown.html');
+describe('deprecatedJQueryDropdown', () => {
+  preloadFixtures('static/deprecated_jquery_dropdown.html');
 
   const NON_SELECTABLE_CLASSES =
     '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
@@ -60,14 +60,12 @@ describe('glDropdown', () => {
       id: project => project.id,
       ...extraOpts,
     };
-    test.dropdownButtonElement = $(
-      '#js-project-dropdown',
-      test.dropdownContainerElement,
-    ).glDropdown(options);
+    test.dropdownButtonElement = $('#js-project-dropdown', test.dropdownContainerElement);
+    initDeprecatedJQueryDropdown(test.dropdownButtonElement, options);
   }
 
   beforeEach(() => {
-    loadFixtures('static/gl_dropdown.html');
+    loadFixtures('static/deprecated_jquery_dropdown.html');
     test.dropdownContainerElement = $('.dropdown.inline');
     test.$dropdownMenuElement = $('.dropdown-menu', test.dropdownContainerElement);
     test.projectsData = getJSONFixture('static/projects.json');
@@ -248,9 +246,9 @@ describe('glDropdown', () => {
     function dropdownWithOptions(options) {
       const $dropdownDiv = $('<div />');
 
-      $dropdownDiv.glDropdown(options);
+      initDeprecatedJQueryDropdown($dropdownDiv, options);
 
-      return $dropdownDiv.data('glDropdown');
+      return $dropdownDiv.data('deprecatedJQueryDropdown');
     }
 
     function basicDropdown() {

spec/frontend/labels_issue_sidebar_spec.js

@@ -7,7 +7,6 @@ import axios from '~/lib/utils/axios_utils';
 import IssuableContext from '~/issuable_context';
 import LabelsSelect from '~/labels_select';
 
-import '~/gl_dropdown';
 import 'select2';
 import '~/api';
 import '~/create_label';

spec/frontend/namespace_select_spec.js

-import $ from 'jquery';
 import NamespaceSelect from '~/namespace_select';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
-describe('NamespaceSelect', () => {
-  beforeEach(() => {
-    jest.spyOn($.fn, 'glDropdown').mockImplementation(() => {});
-  });
+jest.mock('~/deprecated_jquery_dropdown');
 
-  it('initializes glDropdown', () => {
+describe('NamespaceSelect', () => {
+  it('initializes deprecatedJQueryDropdown', () => {
     const dropdown = document.createElement('div');
 
     // eslint-disable-next-line no-new
     new NamespaceSelect({ dropdown });
 
-    expect($.fn.glDropdown).toHaveBeenCalled();
+    expect(initDeprecatedJQueryDropdown).toHaveBeenCalled();
   });
 
   describe('as input', () => {
-    let glDropdownOptions;
+    let deprecatedJQueryDropdownOptions;
 
     beforeEach(() => {
       const dropdown = document.createElement('div');
       // eslint-disable-next-line no-new
       new NamespaceSelect({ dropdown });
-      [[glDropdownOptions]] = $.fn.glDropdown.mock.calls;
+      [[, deprecatedJQueryDropdownOptions]] = initDeprecatedJQueryDropdown.mock.calls;
     });
 
     it('prevents click events', () => {
       const dummyEvent = new Event('dummy');
       jest.spyOn(dummyEvent, 'preventDefault').mockImplementation(() => {});
 
-      glDropdownOptions.clicked({ e: dummyEvent });
+      // expect(foo).toContain('test');
+      deprecatedJQueryDropdownOptions.clicked({ e: dummyEvent });
 
       expect(dummyEvent.preventDefault).toHaveBeenCalled();
     });
   });
 
   describe('as filter', () => {
-    let glDropdownOptions;
+    let deprecatedJQueryDropdownOptions;
 
     beforeEach(() => {
       const dropdown = document.createElement('div');
       dropdown.dataset.isFilter = 'true';
       // eslint-disable-next-line no-new
       new NamespaceSelect({ dropdown });
-      [[glDropdownOptions]] = $.fn.glDropdown.mock.calls;
+      [[, deprecatedJQueryDropdownOptions]] = initDeprecatedJQueryDropdown.mock.calls;
     });
 
     it('does not prevent click events', () => {
       const dummyEvent = new Event('dummy');
       jest.spyOn(dummyEvent, 'preventDefault').mockImplementation(() => {});
 
-      glDropdownOptions.clicked({ e: dummyEvent });
+      deprecatedJQueryDropdownOptions.clicked({ e: dummyEvent });
 
       expect(dummyEvent.preventDefault).not.toHaveBeenCalled();
     });
@@ -58,7 +57,7 @@ describe('NamespaceSelect', () => {
     it('sets URL of dropdown items', () => {
       const dummyNamespace = { id: 'eal' };
 
-      const itemUrl = glDropdownOptions.url(dummyNamespace);
+      const itemUrl = deprecatedJQueryDropdownOptions.url(dummyNamespace);
 
       expect(itemUrl).toContain(`namespace_id=${dummyNamespace.id}`);
     });

spec/frontend/pages/dashboard/todos/index/todos_spec.js

@@ -2,7 +2,6 @@ import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';
 import Todos from '~/pages/dashboard/todos/index/todos';
 import '~/lib/utils/common_utils';
-import '~/gl_dropdown';
 import axios from '~/lib/utils/axios_utils';
 import { addDelimiter } from '~/lib/utils/text_utility';
 import { visitUrl } from '~/lib/utils/url_utility';

spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js

 import $ from 'jquery';
-import '~/gl_dropdown';
 import TimezoneDropdown, {
   formatUtcOffset,
   formatTimezone,

spec/frontend/projects/settings/access_dropdown_spec.js

 import $ from 'jquery';
-import '~/gl_dropdown';
 import AccessDropdown from '~/projects/settings/access_dropdown';
 import { LEVEL_TYPES } from '~/projects/settings/constants';
 

spec/frontend/search_autocomplete_spec.js

 /* eslint-disable no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import initSearchAutocomplete from '~/search_autocomplete';
@@ -215,7 +214,7 @@ describe('Search autocomplete dropdown', () => {
 
     function triggerAutocomplete() {
       return new Promise(resolve => {
-        const dropdown = widget.searchInput.data('glDropdown');
+        const dropdown = widget.searchInput.data('deprecatedJQueryDropdown');
         const filterCallback = dropdown.filter.options.callback;
         dropdown.filter.options.callback = jest.fn(data => {
           filterCallback(data);

spec/frontend/sidebar/sidebar_move_issue_spec.js

@@ -68,12 +68,10 @@ describe('SidebarMoveIssue', () => {
   });
 
   describe('initDropdown', () => {
-    it('should initialize the gl_dropdown', () => {
-      jest.spyOn($.fn, 'glDropdown').mockImplementation(() => {});
-
+    it('should initialize the deprecatedJQueryDropdown', () => {
       test.sidebarMoveIssue.initDropdown();
 
-      expect($.fn.glDropdown).toHaveBeenCalled();
+      expect(test.sidebarMoveIssue.$dropdownToggle.data('deprecatedJQueryDropdown')).toBeTruthy();
     });
 
     it('escapes html from project name', done => {