Merge branch 'tz-ee-reduce-js-bundle-select2' into 'master'

EE Port for lazy loading select2

See merge request gitlab-org/gitlab-ee!9353

app/assets/javascripts/commons/jquery.js

@@ -7,4 +7,3 @@ import 'vendor/jquery.caret';
 import 'vendor/jquery.atwho';
 import 'vendor/jquery.scrollTo';
 import 'jquery.waitforimages';
-import 'select2/select2';

app/assets/javascripts/groups_select.js

@@ -4,6 +4,8 @@ import Api from './api';
 import { normalizeHeaders } from './lib/utils/common_utils';
 
 export default function groupsSelect() {
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       // Needs to be accessible in rspec
       window.GROUP_SELECT_PER_PAGE = 20;
       $('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
@@ -93,4 +95,6 @@ export default function groupsSelect() {
           dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
         });
       });
+    })
+    .catch(() => {});
 }

app/assets/javascripts/issuable/auto_width_dropdown_select.js

@@ -11,10 +11,14 @@ class AutoWidthDropdownSelect {
 
   init() {
     const { dropdownClass } = this;
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         this.$selectElement.select2({
           dropdownCssClass: dropdownClass,
           ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
         });
+      })
+      .catch(() => {});
 
     return this;
   }

app/assets/javascripts/issuable_context.js

@@ -7,10 +7,14 @@ export default class IssuableContext {
   constructor(currentUser) {
     this.userSelect = new UsersSelect(currentUser);
 
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $('select.select2').select2({
           width: 'resolve',
           dropdownAutoWidth: true,
         });
+      })
+      .catch(() => {});
 
     $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() {
       return $(this).submit();

app/assets/javascripts/issuable_form.js

@@ -122,6 +122,8 @@ export default class IssuableForm {
   }
 
   initTargetBranchDropdown() {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         this.$targetBranchSelect.select2({
           ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
           ajax: {
@@ -152,5 +154,7 @@ export default class IssuableForm {
             });
           },
         });
+      })
+      .catch(() => {});
   }
 }

app/assets/javascripts/main.js

@@ -103,6 +103,9 @@ function deferredInitialisation() {
   });
 
   // Initialize select2 selects
+  if ($('select.select2').length) {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $('select.select2').select2({
           width: 'resolve',
           dropdownAutoWidth: true,
@@ -115,6 +118,9 @@ function deferredInitialisation() {
             $(':focus').blur();
           }, 1);
         });
+      })
+      .catch(() => {});
+  }
 
   // Initialize tooltips
   $body.tooltip({

app/assets/javascripts/project_select.js

@@ -5,6 +5,8 @@ import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
 export default function projectSelect() {
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-project-select').each(function(i, select) {
         var placeholder;
         const simpleFilter = $(select).data('simpleFilter') || false;
@@ -98,4 +100,6 @@ export default function projectSelect() {
         if (simpleFilter) return select;
         return new ProjectSelectComboButton(select);
       });
+    })
+    .catch(() => {});
 }

app/assets/javascripts/project_select_combo_button.js

@@ -44,9 +44,13 @@ export default class ProjectSelectComboButton {
 
   // eslint-disable-next-line class-methods-use-this
   openDropdown(event) {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $(event.currentTarget)
           .siblings('.project-item-select')
           .select2('open');
+      })
+      .catch(() => {});
   }
 
   selectProject() {

app/assets/javascripts/users_select.js

@@ -579,6 +579,8 @@ function UsersSelect(currentUser, els, options = {}) {
       };
     })(this),
   );
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-users-select').each(
         (function(_this) {
           return function(i, select) {
@@ -637,7 +639,11 @@ function UsersSelect(currentUser, els, options = {}) {
                       data.results.unshift(anyUser);
                     }
                   }
-              if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+                  if (
+                    showEmailUser &&
+                    data.results.length === 0 &&
+                    query.term.match(/^[^@]+@[^@]+$/)
+                  ) {
                     var trimmed = query.term.trim();
                     emailUser = {
                       name: 'Invite "' + trimmed + '" by email',
@@ -674,6 +680,8 @@ function UsersSelect(currentUser, els, options = {}) {
           };
         })(this),
       );
+    })
+    .catch(() => {});
 }
 
 UsersSelect.prototype.initSelection = function(element, callback) {

ee/app/assets/javascripts/approvers_select.js

@@ -76,6 +76,8 @@ export default class ApproversSelect {
   }
 
   initSelect2() {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         this.$approverSelect
           .select2({
             placeholder: 'Search for users or groups',
@@ -111,6 +113,8 @@ export default class ApproversSelect {
             },
           })
           .on('change', this.handleSelectChange);
+      })
+      .catch(() => {});
   }
 
   static formatSelection(group) {

ee/app/assets/javascripts/ldap_groups_select.js

@@ -11,6 +11,8 @@ export default function initLDAPGroupsSelect() {
   groupFormatSelection = function(group) {
     return group.cn;
   };
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-ldap-groups-select').each(function(i, select) {
         return $(select).select2({
           id: function(group) {
@@ -46,6 +48,9 @@ export default function initLDAPGroupsSelect() {
           },
         });
       });
+    })
+    .catch(() => {});
+
   return $('#ldap_group_link_provider').on('change', function() {
     return $('.ajax-ldap-groups-select').select2('data', null);
   });

ee/app/assets/javascripts/pages/admin/emails/show/admin_email_select.js

@@ -4,6 +4,8 @@ import $ from 'jquery';
 import Api from '~/api';
 
 function AdminEmailSelect() {
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-admin-email-select').each(
         (function(_this) {
           return function(i, select) {
@@ -53,6 +55,8 @@ function AdminEmailSelect() {
           };
         })(this),
       );
+    })
+    .catch(() => {});
 }
 
 AdminEmailSelect.prototype.formatResult = function(object) {

ee/app/assets/javascripts/pages/admin/geo/nodes/shared/init_form.js

@@ -32,6 +32,8 @@ export default function geoNodeForm() {
     onSelectiveSyncTypeChange(e, $syncByNamespaces, $syncByShards),
   );
 
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $select2Dropdown.select2({
         placeholder: s__('Geo|Select groups to replicate.'),
         multiple: true,
@@ -57,4 +59,6 @@ export default function geoNodeForm() {
           },
         },
       });
+    })
+    .catch(() => {});
 }

ee/app/assets/javascripts/pages/projects/settings/repository/show/ee_mirror_repos.js

@@ -76,10 +76,14 @@ export default class EEMirrorRepos extends MirrorRepos {
   }
 
   initSelect2() {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $('.js-mirror-user', this.$form).select2({
           width: 'resolve',
           dropdownAutoWidth: true,
         });
+      })
+      .catch(() => {});
   }
 
   registerUpdateListeners() {

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

 <script>
+/* eslint-disable no-unused-vars */
 import $ from 'jquery';
+import select2 from 'select2/select2';
 import { KNOWN_LICENSES } from '../constants';
 
 export default {