diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-12 15:25:18 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-16 14:49:24 +0300 |
commit | 4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3 (patch) | |
tree | afb03e3afa39b78a22cd12f9c2c66ff3aa62b851 /app | |
parent | b94b8aae29112f693bb53b60c6c28c8f7bb8fe9b (diff) |
Improved performance of merge requests target branch dropdown
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/dispatcher.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/issuable_form.js | 54 | ||||
-rw-r--r-- | app/views/shared/issuable/form/_branch_chooser.html.haml | 5 |
3 files changed, 56 insertions, 5 deletions
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index afa1bc19790..80405fa1d4c 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -30,7 +30,6 @@ import MiniPipelineGraph from './mini_pipeline_graph_dropdown'; 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'; @@ -253,7 +252,6 @@ import { fetchCommitMergeRequests } from './commit_merge_requests'; 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_form.js b/app/assets/javascripts/issuable_form.js index 57dcaa0e1ac..8380499748e 100644 --- a/app/assets/javascripts/issuable_form.js +++ b/app/assets/javascripts/issuable_form.js @@ -46,6 +46,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 +110,52 @@ export default class IssuableForm { addWip() { this.titleField.val(`WIP: ${(this.titleField.val())}`); } + + initTargetBranchDropdown() { + this.$targetBranchSelect.select2({ + ajax: { + url: this.$targetBranchSelect.data('endpoint'), + dataType: 'JSON', + quietMillis: 250, + data(search) { + return { + search, + }; + }, + results(data) { + return { + results: data[Object.keys(data)[0]].map(name => ({ + id: name, + text: name, + })), + }; + } + }, + initSelection(el, callback) { + const val = el.val(); + + callback({ + id: val, + text: val, + }); + }, + dropdownCss: () => { + let resultantWidth = 'auto'; + + // We have to look at the parent because + // `offsetParent` on a `display: none;` is `null` + const offsetParentWidth = this.$targetBranchSelect.parent().offsetParent().width(); + // Reset any width to let it naturally flow + this.$targetBranchSelect.css('width', 'auto'); + if (this.$targetBranchSelect.outerWidth(false) > offsetParentWidth) { + resultantWidth = offsetParentWidth; + } + + return { + width: resultantWidth, + maxWidth: offsetParentWidth, + }; + }, + }); + } } diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml index 203d2adc8db..ee9087558d7 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') }}) - if issuable.new_record? = link_to 'Change branches', mr_change_branches_path(issuable) |