diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-12 12:25:18 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-16 11:49:24 +0000 |
commit | 4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3 (patch) | |
tree | afb03e3afa39b78a22cd12f9c2c66ff3aa62b851 | |
parent | b94b8aae29112f693bb53b60c6c28c8f7bb8fe9b (diff) | |
download | gitlab-ce-4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3.tar.gz |
Improved performance of merge requests target branch dropdown
-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 | ||||
-rw-r--r-- | changelogs/unreleased/merge-request-target-branch-perf.yml | 5 |
4 files changed, 61 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) 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 |