From c27f619c2a7609af3a7478ae6a6e2d1f210b5be3 Mon Sep 17 00:00:00 2001 From: Jan Beckmann Date: Wed, 11 Sep 2019 14:28:34 +0000 Subject: [PATCH] Disable "transfer group" button when no parent group is selected Refactor project_edit.js to be reusable for this purpose Closes #64799 --- .../javascripts/groups/transfer_dropdown.js | 3 +- .../javascripts/pages/groups/edit/index.js | 2 + .../javascripts/pages/projects/edit/index.js | 4 +- .../{project_edit.js => transfer_edit.js} | 6 +-- app/views/groups/settings/_advanced.html.haml | 2 +- .../64799-disable-transfer-group.yml | 5 ++ spec/frontend/transfer_edit_spec.js | 53 +++++++++++++++++++ 7 files changed, 68 insertions(+), 7 deletions(-) rename app/assets/javascripts/{project_edit.js => transfer_edit.js} (51%) create mode 100644 changelogs/unreleased/64799-disable-transfer-group.yml create mode 100644 spec/frontend/transfer_edit_spec.js diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js index ce0c9256148..cec824a529c 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 d036ff07d89..f32392c9e29 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 92ed6a652d7..c9dbe576c4b 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 47bf2226781..bb15e11fd4c 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 d1eb6478997..64fec260f3b 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 00000000000..68d4c5bfc06 --- /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 00000000000..3a1ede49068 --- /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); + }); +});