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() {
-    $(this.$refs.dropdownInput)
-      .val(this.value)
-      .select2(this.options)
-      .on('change', event => this.$emit('input', event.target.value));
+    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,27 +55,36 @@ export default {
     const $modal = $('#project-settings-approvals-create-modal .modal-content');
     this.$input = $(this.$refs.input);
 
-    this.$input
-      .select2({
-        minimumInputLength: 0,
-        multiple: false,
-        closeOnSelect: false,
-        formatResult,
-        formatSelection,
-        initSelection: (element, callback) => this.initialOption(element, callback),
-        query: debounce(({ term, callback }) => this.fetchBranches(term).then(callback), 250),
-        id: ({ type, id }) => `${type}${id}`,
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
+        this.$input
+          .select2({
+            minimumInputLength: 0,
+            multiple: false,
+            closeOnSelect: false,
+            formatResult,
+            formatSelection,
+            initSelection: (element, callback) => this.initialOption(element, callback),
+            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))
+          .on('select2-open', () => {
+            // https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
+            // Ensure search feature works in modal
+            // (known issue with our current select2 version, solved in version 4 with "dropdownParent")
+            $modal.removeAttr('tabindex', '-1');
+          })
+          .on('select2-close', () => {
+            $modal.attr('tabindex', '-1');
+          });
       })
-      .on('change', e => this.onChange(e))
-      .on('select2-open', () => {
-        // https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
-        // Ensure search feature works in modal
-        // (known issue with our current select2 version, solved in version 4 with "dropdownParent")
-        $modal.removeAttr('tabindex', '-1');
-      })
-      .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,21 +23,25 @@ export default {
     },
   },
   mounted() {
-    $(this.$refs.dropdownInput)
-      .val(this.value)
-      .select2({
-        allowClear: true,
-        placeholder: this.placeholder,
-        createSearchChoice: term => ({ id: term, text: term }),
-        createSearchChoicePosition: 'bottom',
-        data: this.knownLicenses.map(license => ({
-          id: license,
-          text: license,
-        })),
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
+        $(this.$refs.dropdownInput)
+          .val(this.value)
+          .select2({
+            allowClear: true,
+            placeholder: this.placeholder,
+            createSearchChoice: term => ({ id: term, text: term }),
+            createSearchChoicePosition: 'bottom',
+            data: this.knownLicenses.map(license => ({
+              id: license,
+              text: license,
+            })),
+          })
+          .on('change', e => {
+            this.$emit('input', e.target.value);
+          });
       })
-      .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);