From 4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 12 Jan 2018 12:25:18 +0000 Subject: Improved performance of merge requests target branch dropdown --- app/assets/javascripts/dispatcher.js | 2 - app/assets/javascripts/issuable_form.js | 54 ++++++++++++++++++++++ .../shared/issuable/form/_branch_chooser.html.haml | 5 +- .../merge-request-target-branch-perf.yml | 5 ++ 4 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 changelogs/unreleased/merge-request-target-branch-perf.yml 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 -- cgit v1.2.1 From 5f5249d759d9324e23f274056d27931dbf299094 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 12 Jan 2018 12:59:08 +0000 Subject: only search branches target branch select dropdown doesnt care about tags so we dont need to waste time searching them --- .../issuable/auto_width_dropdown_select.js | 12 +++++++++--- app/assets/javascripts/issuable_form.js | 20 +++----------------- .../shared/issuable/form/_branch_chooser.html.haml | 2 +- 3 files changed, 13 insertions(+), 21 deletions(-) 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 8380499748e..76c40bca1bd 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 { @@ -113,6 +114,7 @@ export default class IssuableForm { initTargetBranchDropdown() { this.$targetBranchSelect.select2({ + ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'), ajax: { url: this.$targetBranchSelect.data('endpoint'), dataType: 'JSON', @@ -124,6 +126,7 @@ export default class IssuableForm { }, 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, @@ -139,23 +142,6 @@ export default class IssuableForm { 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 ee9087558d7..9a589387255 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -18,7 +18,7 @@ = form.hidden_field(:target_branch, { class: 'target_branch js-target-branch-select ref-name', disabled: issuable.new_record?, - data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc') }}) + 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) -- cgit v1.2.1 From a369988b4a2551e7214660b6ea4161f02381ab30 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 12 Jan 2018 14:34:15 +0000 Subject: fixed failing spec --- app/views/shared/issuable/form/_branch_chooser.html.haml | 1 + 1 file changed, 1 insertion(+) diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml index 9a589387255..b7e30e5b836 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -17,6 +17,7 @@ .issuable-form-select-holder = form.hidden_field(:target_branch, { class: 'target_branch js-target-branch-select ref-name', + id: '', disabled: issuable.new_record?, data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }}) - if issuable.new_record? -- cgit v1.2.1 From d9764a5ce4945505c69742ec74597b45bfd0898d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 12 Jan 2018 15:32:26 +0000 Subject: more spec fixes --- app/views/projects/merge_requests/creations/_new_submit.html.haml | 1 - app/views/shared/issuable/form/_branch_chooser.html.haml | 1 - 2 files changed, 2 deletions(-) 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..43cc877acec 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,6 @@ = f.hidden_field :source_project_id = f.hidden_field :source_branch = f.hidden_field :target_project_id - = f.hidden_field :target_branch .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 b7e30e5b836..9a589387255 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -17,7 +17,6 @@ .issuable-form-select-holder = form.hidden_field(:target_branch, { class: 'target_branch js-target-branch-select ref-name', - id: '', disabled: issuable.new_record?, data: { placeholder: "Select branch", endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }}) - if issuable.new_record? -- cgit v1.2.1 From 2bb201b78573efe908896b221d28549cfd6605fa Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 12 Jan 2018 17:10:51 +0000 Subject: actual spec fixes --- app/views/projects/merge_requests/creations/_new_submit.html.haml | 1 + 1 file changed, 1 insertion(+) 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 43cc877acec..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,6 +15,7 @@ = f.hidden_field :source_project_id = f.hidden_field :source_branch = f.hidden_field :target_project_id + = 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? -- cgit v1.2.1 From 13d70796d31c15fb5f2e7977dd137f44db354491 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 16 Jan 2018 09:18:23 +0000 Subject: fixed missing comma --- app/assets/javascripts/issuable_form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js index 76c40bca1bd..fdfad0b6a4f 100644 --- a/app/assets/javascripts/issuable_form.js +++ b/app/assets/javascripts/issuable_form.js @@ -132,7 +132,7 @@ export default class IssuableForm { text: name, })), }; - } + }, }, initSelection(el, callback) { const val = el.val(); -- cgit v1.2.1