diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js index ce0c92561481cfa5de97c461069ff929ad23e1d5..cec824a529c4b2c4a62a7f0f4dfc4dfb1b25a1d4 100644 --- a/app/assets/javascripts/groups/transfer_dropdown.js +++ b/app/assets/javascripts/groups/transfer_dropdown.js @@ -14,7 +14,7 @@ export default class TransferDropdown { } buildDropdown() { - const extraOptions = [{ id: '', text: __('No parent group') }, 'divider']; + const extraOptions = [{ id: '-1', text: __('No parent group') }, 'divider']; this.groupDropdown.glDropdown({ selectable: true, @@ -33,5 +33,6 @@ export default class TransferDropdown { assignSelected(selected) { this.parentInput.val(selected.id); + this.parentInput.change(); } } diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index d036ff07d8975ad2f3cb5a521f27518396a106fc..f32392c9e29fadc2d9a28e254c9175fa82733f6f 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -2,6 +2,7 @@ import initAvatarPicker from '~/avatar_picker'; import TransferDropdown from '~/groups/transfer_dropdown'; import initConfirmDangerModal from '~/confirm_danger_modal'; import initSettingsPanels from '~/settings_panels'; +import setupTransferEdit from '~/transfer_edit'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import { GROUP_BADGE } from '~/badges/constants'; @@ -17,6 +18,7 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'), ); mountBadgeSettings(GROUP_BADGE); + setupTransferEdit('.js-group-transfer-form', '#new_parent_group_id'); // Initialize Subgroups selector groupsSelect(); diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index 92ed6a652d799589ff63dca37c24e9d89abc976c..c9dbe576c4bc437c84c1408dd2731b3a0b11f058 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -1,6 +1,6 @@ import { PROJECT_BADGE } from '~/badges/constants'; import initSettingsPanels from '~/settings_panels'; -import setupProjectEdit from '~/project_edit'; +import setupTransferEdit from '~/transfer_edit'; import initConfirmDangerModal from '~/confirm_danger_modal'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; @@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => { initProjectLoadingSpinner(); initProjectPermissionsSettings(); - setupProjectEdit(); + setupTransferEdit('.js-project-transfer-form', 'select.select2'); dirtySubmitFactory( document.querySelectorAll( diff --git a/app/assets/javascripts/project_edit.js b/app/assets/javascripts/transfer_edit.js similarity index 51% rename from app/assets/javascripts/project_edit.js rename to app/assets/javascripts/transfer_edit.js index 47bf222678101a1996b37854b091d7be0337e3c8..bb15e11fd4cfacef0cc62cbde24967b4dbdd70dd 100644 --- a/app/assets/javascripts/project_edit.js +++ b/app/assets/javascripts/transfer_edit.js @@ -1,8 +1,8 @@ import $ from 'jquery'; -export default function setupProjectEdit() { - const $transferForm = $('.js-project-transfer-form'); - const $selectNamespace = $transferForm.find('select.select2'); +export default function setupTransferEdit(formSelector, targetSelector) { + const $transferForm = $(formSelector); + const $selectNamespace = $transferForm.find(targetSelector); $selectNamespace.on('change', () => { $transferForm.find(':submit').prop('disabled', !$selectNamespace.val()); diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml index d1eb6478997797b084a77d17275f50fb1815c89a..64fec260f3b9c14f835b79dcb94f0c2b6d450f46 100644 --- a/app/views/groups/settings/_advanced.html.haml +++ b/app/views/groups/settings/_advanced.html.haml @@ -25,7 +25,7 @@ .sub-section %h4.warning-title Transfer group - = form_for @group, url: transfer_group_path(@group), method: :put do |f| + = form_for @group, url: transfer_group_path(@group), method: :put, html: { class: 'js-group-transfer-form' } do |f| .form-group = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: 'Search groups', data: { data: parent_group_options(@group) } }) = hidden_field_tag 'new_parent_group_id' diff --git a/changelogs/unreleased/64799-disable-transfer-group.yml b/changelogs/unreleased/64799-disable-transfer-group.yml new file mode 100644 index 0000000000000000000000000000000000000000..68d4c5bfc060190132764de0c3008ec401625b43 --- /dev/null +++ b/changelogs/unreleased/64799-disable-transfer-group.yml @@ -0,0 +1,5 @@ +--- +title: Disable "Transfer group" button when no group is selected +merge_request: 31387 +author: Jan Beckmann +type: fixed diff --git a/spec/frontend/transfer_edit_spec.js b/spec/frontend/transfer_edit_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..3a1ede49068cab6585572abb6a9e4293a2e2e0e7 --- /dev/null +++ b/spec/frontend/transfer_edit_spec.js @@ -0,0 +1,53 @@ +import $ from 'jquery'; + +import setupTransferEdit from '~/transfer_edit'; +import { loadHTMLFixture } from 'helpers/fixtures'; + +describe('setupTransferEdit', () => { + const formSelector = '.js-project-transfer-form'; + const targetSelector = 'select.select2'; + + beforeEach(() => { + loadHTMLFixture('projects/edit.html'); + setupTransferEdit(formSelector, targetSelector); + }); + + it('disables submit button on load', () => { + expect( + $(formSelector) + .find(':submit') + .prop('disabled'), + ).toBe(true); + }); + + it('enables submit button when selection changes to non-empty value', () => { + const nonEmptyValue = $(formSelector) + .find(targetSelector) + .find('option') + .not(':empty') + .val(); + $(formSelector) + .find(targetSelector) + .val(nonEmptyValue) + .trigger('change'); + + expect( + $(formSelector) + .find(':submit') + .prop('disabled'), + ).toBeFalsy(); + }); + + it('disables submit button when selection changes to empty value', () => { + $(formSelector) + .find(targetSelector) + .val('') + .trigger('change'); + + expect( + $(formSelector) + .find(':submit') + .prop('disabled'), + ).toBe(true); + }); +});