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

Refactor project_edit.js to be reusable for this purpose

Closes #64799

4 files changed, 9 insertions, 6 deletions

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