Fix disable submit button without a selected group

Re-instates the behaviour that was initially
introduced in:
https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/31387

Display alert for paid groups

app/assets/javascripts/groups/components/transfer_group_form.vue

 <script>
-import { GlFormGroup } from '@gitlab/ui';
+import { GlAlert, GlFormGroup, GlLink, GlSprintf } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
 import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
@@ -8,7 +8,10 @@ export default {
   name: 'TransferGroupForm',
   components: {
     ConfirmDanger,
+    GlAlert,
     GlFormGroup,
+    GlLink,
+    GlSprintf,
     NamespaceSelect,
   },
   props: {
@@ -16,6 +19,14 @@ export default {
       type: Object,
       required: true,
     },
+    isPaidGroup: {
+      type: Boolean,
+      required: true,
+    },
+    paidGroupHelpLink: {
+      type: String,
+      required: true,
+    },
     isDisabled: {
       type: Boolean,
       required: false,
@@ -39,6 +50,9 @@ export default {
     selectedNamespaceId() {
       return this.selectedId;
     },
+    disableSubmitButton() {
+      return this.isDisabled || !this.selectedId;
+    },
   },
   methods: {
     handleSelected({ id }) {
@@ -46,8 +60,11 @@ export default {
     },
   },
   i18n: {
-    dropdownTitle: s__('GroupSettings|Select parent group'),
     emptyNamespaceTitle: __('No parent group'),
+    dropdownTitle: s__('GroupSettings|Select parent group'),
+    paidGroupMessage: s__(
+      "GroupSettings|This group can't be transfered because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.",
+    ),
   },
 };
 </script>
@@ -69,13 +86,20 @@ export default {
         name="new_parent_group_id"
         :value="selectedId"
       />
-      <confirm-danger
-        button-class="qa-transfer-button"
-        :disabled="isDisabled"
-        :phrase="confirmationPhrase"
-        :button-text="confirmButtonText"
-        @confirm="$emit('confirm')"
-      />
     </gl-form-group>
+    <gl-alert v-if="isPaidGroup" class="gl-mb-5">
+      <gl-sprintf :message="$options.i18n.paidGroupMessage">
+        <template #link="{ content }">
+          <gl-link :href="paidGroupHelpLink">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+    <confirm-danger
+      button-class="qa-transfer-button"
+      :disabled="disableSubmitButton"
+      :phrase="confirmationPhrase"
+      :button-text="confirmButtonText"
+      @confirm="$emit('confirm')"
+    />
   </div>
 </template>

app/assets/javascripts/groups/init_transfer_group_form.js

 import Vue from 'vue';
-import { __ } from '~/locale';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import TransferGroupForm from './components/transfer_group_form.vue';
 
 const prepareGroups = (rawGroups) => {
@@ -23,6 +23,8 @@ export default () => {
     phrase: confirmationPhrase = '',
     confirmDangerMessage = '',
     parentGroups = [],
+    isPaidGroup,
+    paidGroupHelpLink,
   } = el.dataset;
 
   return new Vue({
@@ -34,6 +36,8 @@ export default () => {
       return createElement(TransferGroupForm, {
         props: {
           parentGroups: prepareGroups(parentGroups),
+          isPaidGroup: parseBoolean(isPaidGroup),
+          paidGroupHelpLink,
           confirmButtonText,
           confirmationPhrase,
         },

app/assets/javascripts/groups/transfer_edit.js

-export default function setupTransferEdit(formSelector, watchField, targetSelectorId) {
-  const transferForm = document.querySelector(formSelector);
-  console.log('formSelector', formSelector);
-  console.log('watchField', watchField);
-  console.log('transferForm', transferForm);
-  const field = transferForm.querySelector(watchField);
-  console.log('field', field);
-  const valueField = transferForm.querySelector(targetSelectorId);
-  console.log('valueField.value', valueField.value);
+import $ from 'jquery';
 
-  field.addEventListener('click', (e) => {
-    console.log('event::click');
+export default function setupTransferEdit(formSelector, targetSelector) {
+  const $transferForm = $(formSelector);
+  const $selectNamespace = $transferForm.find(targetSelector);
 
-    console.log('valueField', valueField, valueField.value);
-    console.log('e', e.currentTarget);
-    console.log('e', e.target);
-    transferForm
-      .querySelector("input[type='submit']")
-      // .querySelector("input[type='submit']")
-      .setAttribute('disabled', !valueField.val() ? 'disabled' : '');
+  $selectNamespace.on('change', () => {
+    $transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
   });
-
-  field.addEventListener('select', () => {
-    console.log('event::select');
-    // transferForm
-    //   .querySelector("input[type='submit']")
-    //   .setAttribute('disabled', !field.val() ? 'disabled' : '');
-  });
-
-  field.addEventListener('change', () => {
-    console.log('event::change');
-    // transferForm
-    //   .querySelector("input[type='submit']")
-    //   .setAttribute('disabled', !field.val() ? 'disabled' : '');
-  });
-  // field.trigger('change');
-  transferForm.querySelector("input[type='submit']").setAttribute('disabled', 'disabled');
+  $selectNamespace.trigger('change');
 }

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

 import { GROUP_BADGE } from '~/badges/constants';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
-import TransferDropdown from '~/groups/transfer_dropdown';
 import initTransferGroupForm from '~/groups/init_transfer_group_form';
-import setupTransferEdit from '~/groups/transfer_edit';
 import groupsSelect from '~/groups_select';
 import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
@@ -21,7 +19,6 @@ 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();
@@ -30,6 +27,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   initSearchSettings();
   initCascadingSettingsLockPopovers();
-
-  return new TransferDropdown();
 });

app/assets/stylesheets/pages/groups.scss

@@ -112,12 +112,10 @@ table.pipeline-project-metrics tr td {
   font-weight: $gl-font-weight-normal;
 }
 
-// TODO: Remove these
 .js-groups-dropdown {
   width: 100%;
 }
 
-// TODO: Remove these
 .dropdown-group-transfer {
   bottom: 100%;
   top: initial;

app/views/groups/settings/_transfer.html.haml

 - form_id = "transfer-group-form"
-- initial_data = { button_text: s_('GroupSettings|Transfer group'), confirm_danger_message: transfer_group_message(@group), phrase: @group.name, target_form_id: form_id, qa_selector: "transfer_group_button", parent_groups: parent_group_options(group) }
+- initial_data = { button_text: s_('GroupSettings|Transfer group'), confirm_danger_message: transfer_group_message(@group), phrase: @group.name, target_form_id: form_id, qa_selector: "transfer_group_button", parent_groups: parent_group_options(group), is_paid_group: group.paid?.to_s, paid_group_help_link: help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace') }
 
 .sub-section
   %h4.warning-title= s_('GroupSettings|Transfer group')
@@ -12,12 +12,4 @@
       %li= s_('GroupSettings|You can only transfer the group to a group you manage.')
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
-
-    -# TODO: move this all into the form
-    .form-group
-    - if group.paid?
-      .gl-alert.gl-alert-info.gl-mb-5
-        = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-        .gl-alert-body
-          = html_escape(_("This group can't be transfered because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
     .js-transfer-group-form{ data: initial_data }