Merge branch 'merge-request-target-branch-perf' into 'master'

Improved performance of merge requests target branch dropdown

See merge request gitlab-org/gitlab-ce!16428

6 files changed, 57 insertions, 9 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 1c6336073e9..3a7532345c6 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -26,7 +26,6 @@ import ProjectsList from './projects_list';
 import UserCallout from './user_callout';
 import ShortcutsWiki from './shortcuts_wiki';
 import BlobViewer from './blob/viewer/index';
-import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
 import Star from './star';
@@ -255,7 +254,6 @@ import Activities from './activities';
           new LabelsSelect();
           new MilestoneSelect();
           new IssuableTemplateSelectors();
-          new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':
           import('./pages/projects/tags/new')
diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
index 2203a56315e..14a2bfbe4e0 100644
--- a/app/assets/javascripts/issuable/auto_width_dropdown_select.js
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -11,6 +11,14 @@ class AutoWidthDropdownSelect {
     const dropdownClass = this.dropdownClass;
     this.$selectElement.select2({
       dropdownCssClass: dropdownClass,
+      ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
+    });
+
+    return this;
+  }
+
+  static selectOptions(dropdownClass) {
+    return {
       dropdownCss() {
         let resultantWidth = 'auto';
         const $dropdown = $(`.${dropdownClass}`);
@@ -29,9 +37,7 @@ class AutoWidthDropdownSelect {
           maxWidth: offsetParentWidth,
         };
       },
-    });
-
-    return this;
+    };
   }
 }
 
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 57dcaa0e1ac..fdfad0b6a4f 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -6,6 +6,7 @@ import Autosave from './autosave';
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
 import ZenMode from './zen_mode';
+import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
 export default class IssuableForm {
@@ -46,6 +47,12 @@ export default class IssuableForm {
       });
       calendar.setDate(parsePikadayDate($issuableDueDate.val()));
     }
+
+    this.$targetBranchSelect = $('.js-target-branch-select', this.form);
+
+    if (this.$targetBranchSelect.length) {
+      this.initTargetBranchDropdown();
+    }
   }
 
   initAutosave() {
@@ -104,4 +111,37 @@ export default class IssuableForm {
   addWip() {
     this.titleField.val(`WIP: ${(this.titleField.val())}`);
   }
+
+  initTargetBranchDropdown() {
+    this.$targetBranchSelect.select2({
+      ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
+      ajax: {
+        url: this.$targetBranchSelect.data('endpoint'),
+        dataType: 'JSON',
+        quietMillis: 250,
+        data(search) {
+          return {
+            search,
+          };
+        },
+        results(data) {
+          return {
+            // `data` keys are translated so we can't just access them with a string based key
+            results: data[Object.keys(data)[0]].map(name => ({
+              id: name,
+              text: name,
+            })),
+          };
+        },
+      },
+      initSelection(el, callback) {
+        const val = el.val();
+
+        callback({
+          id: val,
+          text: val,
+        });
+      },
+    });
+  }
 }
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index 4b5fa28078a..376ac377562 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -15,7 +15,7 @@
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
   = f.hidden_field :target_project_id
-  = f.hidden_field :target_branch
+  = f.hidden_field :target_branch, id: ''
 
 .mr-compare.merge-request.js-merge-request-new-submit{ 'data-mr-submit-action': "#{j params[:tab].presence || 'new'}" }
   - if @commits.empty?
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 203d2adc8db..9a589387255 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -15,11 +15,10 @@
   = form.label :target_branch, class: 'control-label'
   .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
-      = form.select(:target_branch, issuable.target_branches,
-        { include_blank: true },
+      = form.hidden_field(:target_branch,
         { class: 'target_branch js-target-branch-select ref-name',
           disabled: issuable.new_record?,
-          data: { placeholder: "Select branch" }})
+          data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }})
     - if issuable.new_record?
        
       = link_to 'Change branches', mr_change_branches_path(issuable)
diff --git a/changelogs/unreleased/merge-request-target-branch-perf.yml b/changelogs/unreleased/merge-request-target-branch-perf.yml
new file mode 100644
index 00000000000..37e326bfde3
--- /dev/null
+++ b/changelogs/unreleased/merge-request-target-branch-perf.yml
@@ -0,0 +1,5 @@
+---
+title: Improve performance of target branch dropdown
+merge_request:
+author:
+type: performance