Merge branch '374014-remove-select2-from-issuable-form' into 'master'

Resolve "Migrate away from select2 in app/assets/javascripts/issuable/issuable_form.js"

See merge request !98815



Merged-by: Mark Florian <mflorian@gitlab.com>
Approved-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Mark Florian <mflorian@gitlab.com>
Co-authored-by: Sam Beckham <sbeckham@gitlab.com>

app/assets/javascripts/issuable/auto_width_dropdown_select.js

-import $ from 'jquery';
-import { loadCSSFile } from '../lib/utils/css_utils';
-
-let instanceCount = 0;
-
-class AutoWidthDropdownSelect {
-  constructor(selectElement) {
-    this.$selectElement = $(selectElement);
-    this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
-    instanceCount += 1;
-  }
-
-  init() {
-    const { dropdownClass } = this;
-    import(/* webpackChunkName: 'select2' */ 'select2/select2')
-      .then(() => {
-        // eslint-disable-next-line promise/no-nesting
-        loadCSSFile(gon.select2_css_path)
-          .then(() => {
-            this.$selectElement.select2({
-              dropdownCssClass: dropdownClass,
-              ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
-            });
-          })
-          .catch(() => {});
-      })
-      .catch(() => {});
-
-    return this;
-  }
-
-  static selectOptions(dropdownClass) {
-    return {
-      dropdownCss() {
-        let resultantWidth = 'auto';
-        const $dropdown = $(`.${dropdownClass}`);
-
-        // We have to look at the parent because
-        // `offsetParent` on a `display: none;` is `null`
-        const offsetParentWidth = $(this).parent().offsetParent().width();
-        // Reset any width to let it naturally flow
-        $dropdown.css('width', 'auto');
-        if ($dropdown.outerWidth(false) > offsetParentWidth) {
-          resultantWidth = offsetParentWidth;
-        }
-
-        return {
-          width: resultantWidth,
-          maxWidth: offsetParentWidth,
-        };
-      },
-    };
-  }
-}
-
-export default AutoWidthDropdownSelect;

app/assets/javascripts/issuable/issuable_form.js

@@ -2,10 +2,7 @@ import $ from 'jquery';
 import Pikaday from 'pikaday';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 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';
@@ -118,12 +115,6 @@ export default class IssuableForm {
       });
       calendar.setDate(parsePikadayDate($issuableDueDate.val()));
     }
-
-    this.$targetBranchSelect = $('.js-target-branch-select', this.form);
-
-    if (this.$targetBranchSelect.length) {
-      this.initTargetBranchDropdown();
-    }
   }
 
   initAutosave() {
@@ -214,47 +205,4 @@ export default class IssuableForm {
   addWip() {
     this.titleField.val(`Draft: ${this.titleField.val()}`);
   }
-
-  initTargetBranchDropdown() {
-    import(/* webpackChunkName: 'select2' */ 'select2/select2')
-      .then(() => {
-        // eslint-disable-next-line promise/no-nesting
-        loadCSSFile(gon.select2_css_path)
-          .then(() => {
-            this.$targetBranchSelect.select2({
-              ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
-              ajax: {
-                url: this.$targetBranchSelect.data('endpoint'),
-                dataType: 'JSON',
-                quietMillis: 250,
-                data(search) {
-                  return {
-                    search,
-                  };
-                },
-                results({ results }) {
-                  return {
-                    // `data` keys are translated so we can't just access them with a string based key
-                    results: results[Object.keys(results)[0]].map((name) => ({
-                      id: name,
-                      text: name,
-                    })),
-                  };
-                },
-                transport: select2AxiosTransport,
-              },
-              initSelection(el, callback) {
-                const val = el.val();
-
-                callback({
-                  id: val,
-                  text: val,
-                });
-              },
-            });
-          })
-          .catch(() => {});
-      })
-      .catch(() => {});
-  }
 }