Disable "transfer group" button when no parent group is selected

Refactor project_edit.js to be reusable for this purpose

Closes #64799

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();
   }
 }

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();

app/assets/javascripts/pages/projects/edit/index.js

 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(

app/assets/javascripts/project_edit.js → app/assets/javascripts/transfer_edit.js

 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());

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'

changelogs/unreleased/64799-disable-transfer-group.yml

+---
+title: Disable "Transfer group" button when no group is selected
+merge_request: 31387
+author: Jan Beckmann
+type: fixed

spec/frontend/transfer_edit_spec.js

+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);
+  });
+});