From 8719ed2bf98e11f8adda567220decc427257177c Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Tue, 30 Aug 2022 22:23:56 -0600 Subject: [PATCH 1/2] Convert from a legacy bs dropdown to the (deprecated) gl_dropdown --- .../projects/merge_requests/edit/index.js | 65 +++++++++++++++++++ .../issuable/form/_branch_chooser.html.haml | 12 ++-- locale/gitlab.pot | 3 + .../user_edits_merge_request_spec.rb | 11 ++-- 4 files changed, 83 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js index ec21d8c84e0f14..b87a331c712ed3 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js @@ -1,5 +1,70 @@ +import createFlash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import { __ } from '~/locale'; + +import { GitLabDropdown } from '~/deprecated_jquery_dropdown/gl_dropdown'; + import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request'; import initCheckFormState from './check_form_state'; +function initTargetBranchSelector() { + const targetBranch = document.querySelector('.js-target-branch'); + const { selected } = targetBranch.dataset; + const formField = document.querySelector(`input[name="${targetBranch.dataset.fieldName}"]`); + + /* eslint-disable-next-line no-new */ + new GitLabDropdown(targetBranch, { + selectable: true, + filterable: true, + filterRemote: Boolean(targetBranch.dataset.refsUrl), + filterInput: 'input[type="search"]', + data(term, callback) { + const params = { + search: term, + }; + + axios + .get(targetBranch.dataset.refsUrl, { + params, + }) + .then(({ data }) => { + callback(data); + }) + .catch(() => + createFlash({ + message: __('Error fetching branches'), + }), + ); + }, + renderRow(branch) { + const item = document.createElement('li'); + const link = document.createElement('a'); + + link.setAttribute('href', '#'); + link.dataset.branch = branch; + link.classList.toggle('is-active', branch === selected); + link.textContent = branch; + + item.appendChild(link); + + return item; + }, + id(obj, $el) { + return $el.data('id'); + }, + toggleLabel(obj, $el) { + return $el.text().trim(); + }, + clicked({ $el, e }) { + e.preventDefault(); + + const branchName = $el[0].dataset.branch; + + formField.setAttribute('value', branchName); + }, + }); +} + initMergeRequest(); initCheckFormState(); +initTargetBranchSelector(); diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml index 8ab002f755f56f..634e927f891f01 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -31,10 +31,14 @@ - if issuable.merged? %code= target_title - unless issuable.new_record? || issuable.merged? - %span.dropdown.gl-ml-2.d-inline-block - = form.hidden_field(:target_branch, - { class: 'target_branch js-target-branch-select ref-name mw-xl', - data: { placeholder: _('Select branch'), endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }}) + .merge-request-select.dropdown.gl-w-auto + = form.hidden_field :target_branch + = dropdown_toggle form.object.target_branch.presence || _("Select branch"), { toggle: "dropdown", 'field-name': "#{form.object_name}[target_branch]", 'refs-url': refs_project_path(@project, sort: 'updated_desc', find: 'branches'), selected: form.object.target_branch, default_text: _("Select branch") }, { toggle_class: "js-compare-dropdown js-target-branch monospace" } + .dropdown-menu.dropdown-menu-selectable.js-target-branch-dropdown.target_branch.ref-name.git-revision-dropdown + = dropdown_title(_("Select branch")) + = dropdown_filter(_("Search branches")) + = dropdown_content + = dropdown_loading - if source_level < target_level = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c| diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 0742b7bba2bdea..781deb2cdfa664 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -15126,6 +15126,9 @@ msgstr "" msgid "Error deleting project. Check logs for error details." msgstr "" +msgid "Error fetching branches" +msgstr "" + msgid "Error fetching burnup chart data" msgstr "" diff --git a/spec/features/merge_request/user_edits_merge_request_spec.rb b/spec/features/merge_request/user_edits_merge_request_spec.rb index 0b4b9d7452ad3b..4ac25ea7ae01b0 100644 --- a/spec/features/merge_request/user_edits_merge_request_spec.rb +++ b/spec/features/merge_request/user_edits_merge_request_spec.rb @@ -3,8 +3,6 @@ require 'spec_helper' RSpec.describe 'User edits a merge request', :js do - include Select2Helper - let(:project) { create(:project, :repository) } let(:merge_request) { create(:merge_request, source_project: project, target_project: project) } let(:user) { create(:user) } @@ -89,7 +87,12 @@ it 'allows user to change target branch' do expect(page).to have_content('From master into feature') - select2('merge-test', from: '#merge_request_target_branch') + first('.js-target-branch').click + + wait_for_requests + + first('.js-target-branch-dropdown a', text: 'merge-test').click + click_button('Save changes') expect(page).to have_content("requested to merge #{merge_request.source_branch} into merge-test") @@ -101,7 +104,7 @@ it 'does not allow user to change target branch' do expect(page).to have_content('From master into feature') - expect(page).not_to have_selector('.select2-container') + expect(page).not_to have_selector('.js-target-branch.js-compare-dropdown') end end end -- GitLab From cbfe4943959c1ce632e084f59122b7808327f699 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 31 Aug 2022 15:04:52 -0600 Subject: [PATCH 2/2] Guard against trying to create the dropdown if its parts don't exist --- .../projects/merge_requests/edit/index.js | 96 ++++++++++--------- 1 file changed, 49 insertions(+), 47 deletions(-) diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js index b87a331c712ed3..6c481beefe17ec 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js @@ -9,60 +9,62 @@ import initCheckFormState from './check_form_state'; function initTargetBranchSelector() { const targetBranch = document.querySelector('.js-target-branch'); - const { selected } = targetBranch.dataset; - const formField = document.querySelector(`input[name="${targetBranch.dataset.fieldName}"]`); + const { selected, fieldName, refsUrl } = targetBranch?.dataset ?? {}; + const formField = document.querySelector(`input[name="${fieldName}"]`); - /* eslint-disable-next-line no-new */ - new GitLabDropdown(targetBranch, { - selectable: true, - filterable: true, - filterRemote: Boolean(targetBranch.dataset.refsUrl), - filterInput: 'input[type="search"]', - data(term, callback) { - const params = { - search: term, - }; + if (targetBranch && refsUrl && formField) { + /* eslint-disable-next-line no-new */ + new GitLabDropdown(targetBranch, { + selectable: true, + filterable: true, + filterRemote: Boolean(refsUrl), + filterInput: 'input[type="search"]', + data(term, callback) { + const params = { + search: term, + }; - axios - .get(targetBranch.dataset.refsUrl, { - params, - }) - .then(({ data }) => { - callback(data); - }) - .catch(() => - createFlash({ - message: __('Error fetching branches'), - }), - ); - }, - renderRow(branch) { - const item = document.createElement('li'); - const link = document.createElement('a'); + axios + .get(refsUrl, { + params, + }) + .then(({ data }) => { + callback(data); + }) + .catch(() => + createFlash({ + message: __('Error fetching branches'), + }), + ); + }, + renderRow(branch) { + const item = document.createElement('li'); + const link = document.createElement('a'); - link.setAttribute('href', '#'); - link.dataset.branch = branch; - link.classList.toggle('is-active', branch === selected); - link.textContent = branch; + link.setAttribute('href', '#'); + link.dataset.branch = branch; + link.classList.toggle('is-active', branch === selected); + link.textContent = branch; - item.appendChild(link); + item.appendChild(link); - return item; - }, - id(obj, $el) { - return $el.data('id'); - }, - toggleLabel(obj, $el) { - return $el.text().trim(); - }, - clicked({ $el, e }) { - e.preventDefault(); + return item; + }, + id(obj, $el) { + return $el.data('id'); + }, + toggleLabel(obj, $el) { + return $el.text().trim(); + }, + clicked({ $el, e }) { + e.preventDefault(); - const branchName = $el[0].dataset.branch; + const branchName = $el[0].dataset.branch; - formField.setAttribute('value', branchName); - }, - }); + formField.setAttribute('value', branchName); + }, + }); + } } initMergeRequest(); -- GitLab