Merge branch 'tz-load-additional-css-for-licence-page' into 'master'

Additional CSS Loading for 3 more Select2 Usages

See merge request gitlab-org/gitlab!48053

app/assets/javascripts/vue_shared/components/select2_select.vue

 <script>
 import $ from 'jquery';
 import 'select2';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
@@ -20,10 +21,14 @@ export default {
   },
 
   mounted() {
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
         $(this.$refs.dropdownInput)
           .val(this.value)
           .select2(this.options)
           .on('change', event => this.$emit('input', event.target.value));
+      })
+      .catch(() => {});
   },
 
   beforeDestroy() {

ee/app/assets/javascripts/approvals/components/branches_select.vue

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import 'select2/select2';
 import { debounce } from 'lodash';
 import Api from 'ee/api';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 import { __ } from '~/locale';
 
 const anyBranch = {
@@ -54,6 +55,8 @@ export default {
     const $modal = $('#project-settings-approvals-create-modal .modal-content');
     this.$input = $(this.$refs.input);
 
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
         this.$input
           .select2({
             minimumInputLength: 0,
@@ -62,7 +65,12 @@ export default {
             formatResult,
             formatSelection,
             initSelection: (element, callback) => this.initialOption(element, callback),
-        query: debounce(({ term, callback }) => this.fetchBranches(term).then(callback), 250),
+            query: debounce(({ term, callback }) => {
+              // eslint-disable-next-line promise/no-nesting
+              this.fetchBranches(term)
+                .then(callback)
+                .catch(() => {});
+            }, 250),
             id: ({ type, id }) => `${type}${id}`,
           })
           .on('change', e => this.onChange(e))
@@ -75,6 +83,8 @@ export default {
           .on('select2-close', () => {
             $modal.attr('tabindex', '-1');
           });
+      })
+      .catch(() => {});
   },
   beforeDestroy() {
     this.$input.select2('destroy');

ee/app/assets/javascripts/vue_shared/license_compliance/components/add_license_form_dropdown.vue

@@ -2,6 +2,7 @@
 /* eslint-disable no-unused-vars */
 import $ from 'jquery';
 import select2 from 'select2/select2';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 export default {
   name: 'AddLicenseFormDropdown',
@@ -22,6 +23,8 @@ export default {
     },
   },
   mounted() {
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
         $(this.$refs.dropdownInput)
           .val(this.value)
           .select2({
@@ -37,6 +40,8 @@ export default {
           .on('change', e => {
             this.$emit('input', e.target.value);
           });
+      })
+      .catch(() => {});
   },
   beforeDestroy() {
     $(this.$refs.dropdownInput).select2('destroy');

ee/spec/frontend/approvals/components/branches_select_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import $ from 'jquery';
 import Vuex from 'vuex';
+import waitForPromises from 'helpers/wait_for_promises';
 import Api from 'ee/api';
 import BranchesSelect from 'ee/approvals/components/branches_select.vue';
 
@@ -22,7 +23,7 @@ describe('Branches Select', () => {
   let store;
   let $input;
 
-  const createComponent = (props = {}) => {
+  const createComponent = async (props = {}) => {
     wrapper = shallowMount(localVue.extend(BranchesSelect), {
       propsData: {
         projectId: '1',
@@ -33,6 +34,8 @@ describe('Branches Select', () => {
       attachToDocument: true,
     });
 
+    await waitForPromises();
+
     $input = $(wrapper.vm.$refs.input);
   };
 
@@ -50,16 +53,16 @@ describe('Branches Select', () => {
     wrapper.destroy();
   });
 
-  it('renders select2 input', () => {
+  it('renders select2 input', async () => {
     expect(select2Container()).toBe(null);
 
-    createComponent();
+    await createComponent();
 
     expect(select2Container()).not.toBe(null);
   });
 
-  it('displays all the protected branches and any branch', done => {
-    createComponent();
+  it('displays all the protected branches and any branch', async done => {
+    await createComponent();
     waitForEvent($input, 'select2-loaded')
       .then(() => {
         const nodeList = select2DropdownOptions();
@@ -74,7 +77,7 @@ describe('Branches Select', () => {
 
   describe('with search term', () => {
     beforeEach(() => {
-      createComponent();
+      return createComponent();
     });
 
     it('fetches protected branches with search term', done => {
@@ -116,8 +119,8 @@ describe('Branches Select', () => {
     });
   });
 
-  it('emits input when data changes', done => {
-    createComponent();
+  it('emits input when data changes', async done => {
+    await createComponent();
 
     const selectedIndex = 1;
     const selectedId = TEST_BRANCHES_SELECTIONS[selectedIndex].id;

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
 import $ from 'jquery';
+import waitForPromises from 'helpers/wait_for_promises';
 import Dropdown from 'ee/vue_shared/license_compliance/components/add_license_form_dropdown.vue';
 
 let vm;
@@ -7,8 +8,9 @@ let wrapper;
 
 const KNOWN_LICENSES = ['AGPL-1.0', 'AGPL-3.0', 'Apache 2.0', 'BSD'];
 
-const createComponent = (props = {}) => {
+const createComponent = async (props = {}) => {
   wrapper = shallowMount(Dropdown, { propsData: { knownLicenses: KNOWN_LICENSES, ...props } });
+  await waitForPromises();
   vm = wrapper.vm;
 };
 
@@ -18,8 +20,8 @@ describe('AddLicenseFormDropdown', () => {
     wrapper.destroy();
   });
 
-  it('emits `input` invent on change', () => {
-    createComponent();
+  it('emits `input` invent on change', async () => {
+    await createComponent();
 
     jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
@@ -30,24 +32,24 @@ describe('AddLicenseFormDropdown', () => {
     expect(vm.$emit).toHaveBeenCalledWith('input', 'LGPL');
   });
 
-  it('sets the placeholder appropriately', () => {
+  it('sets the placeholder appropriately', async () => {
     const placeholder = 'Select a license';
-    createComponent({ placeholder });
+    await createComponent({ placeholder });
 
     const dropdownContainer = $(vm.$el).select2('container')[0];
 
     expect(dropdownContainer.textContent).toContain(placeholder);
   });
 
-  it('sets the initial value correctly', () => {
+  it('sets the initial value correctly', async () => {
     const value = 'AWESOME_LICENSE';
-    createComponent({ value });
+    await createComponent({ value });
 
     expect(vm.$el.value).toContain(value);
   });
 
-  it('shows all defined licenses', done => {
-    createComponent();
+  it('shows all defined licenses', async done => {
+    await createComponent();
 
     const element = $(vm.$el);