Render alert in haml

Returns the paid group alert to haml but keeps
the `is_paid_group` data-* attribute.

Address minor review comments

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

 <script>
-import { GlAlert, GlFormGroup, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlFormGroup } 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';
 
 export const i18n = {
+  confirmationMessage: __(
+    'You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?',
+  ),
   emptyNamespaceTitle: __('No parent group'),
   dropdownTitle: s__('GroupSettings|Select parent group'),
-  paidGroupMessage: s__(
-    "GroupSettings|This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.",
-  ),
 };
 
 export default {
   name: 'TransferGroupForm',
   components: {
     ConfirmDanger,
-    GlAlert,
     GlFormGroup,
-    GlLink,
-    GlSprintf,
     NamespaceSelect,
   },
   props: {
@@ -31,10 +28,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    paidGroupHelpLink: {
-      type: String,
-      required: true,
-    },
     confirmationPhrase: {
       type: String,
       required: true,
@@ -78,13 +71,6 @@ export default {
       />
       <input type="hidden" name="new_parent_group_id" :value="selectedId" />
     </gl-form-group>
-    <gl-alert v-if="isPaidGroup" class="gl-mb-5" variant="warning" :dismissible="false">
-      <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"

app/assets/javascripts/groups/init_transfer_group_form.js

 import Vue from 'vue';
+import { sprintf } from '~/locale';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import TransferGroupForm from './components/transfer_group_form.vue';
+import TransferGroupForm, { i18n } from './components/transfer_group_form.vue';
 
 const prepareGroups = (rawGroups) => {
   const group = JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
@@ -20,26 +21,23 @@ export default () => {
   const {
     targetFormId = null,
     buttonText: confirmButtonText = '',
-    phrase: confirmationPhrase = '',
-    confirmDangerMessage = '',
+    groupName = '',
     parentGroups = [],
     isPaidGroup,
-    paidGroupHelpLink,
   } = el.dataset;
 
   return new Vue({
     el,
     provide: {
-      confirmDangerMessage,
+      confirmDangerMessage: sprintf(i18n.confirmationMessage, { groupName }),
     },
     render(createElement) {
       return createElement(TransferGroupForm, {
         props: {
           parentGroups: prepareGroups(parentGroups),
           isPaidGroup: parseBoolean(isPaidGroup),
-          paidGroupHelpLink,
           confirmButtonText,
-          confirmationPhrase,
+          confirmationPhrase: groupName,
         },
         on: {
           confirm: () => {

app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue

@@ -41,7 +41,7 @@ export default {
     defaultText: {
       type: String,
       required: false,
-      default: null,
+      default: i18n.DEFAULT_TEXT,
     },
     includeHeaders: {
       type: Boolean,
@@ -51,7 +51,7 @@ export default {
     emptyNamespaceTitle: {
       type: String,
       required: false,
-      default: null,
+      default: i18n.DEFAULT_EMPTY_NAMESPACE_TEXT,
     },
     includeEmptyNamespace: {
       type: Boolean,
@@ -66,12 +66,6 @@ export default {
     };
   },
   computed: {
-    defaultTextDisplay() {
-      return this.defaultText || this.$options.i18n.DEFAULT_TEXT;
-    },
-    emptyNamespace() {
-      return this.emptyNamespaceTitle || this.$options.i18n.DEFAULT_EMPTY_NAMESPACE_TEXT;
-    },
     hasUserNamespaces() {
       return this.data.user?.length;
     },
@@ -87,7 +81,7 @@ export default {
       return filterByName(this.data.user, this.searchTerm);
     },
     selectedNamespaceText() {
-      return this.selectedNamespace?.humanName || this.defaultTextDisplay;
+      return this.selectedNamespace?.humanName || this.defaultText;
     },
   },
   methods: {
@@ -96,7 +90,7 @@ export default {
       this.$emit('select', item);
     },
     handleSelectEmptyNamespace() {
-      this.handleSelect({ id: EMPTY_NAMESPACE_ID, humanName: this.emptyNamespace });
+      this.handleSelect({ id: EMPTY_NAMESPACE_ID, humanName: this.emptyNamespaceTitle });
     },
   },
   i18n,
@@ -112,7 +106,7 @@ export default {
         data-qa-selector="namespaces_list_item"
         @click="handleSelectEmptyNamespace()"
       >
-        {{ emptyNamespace }}
+        {{ emptyNamespaceTitle }}
       </gl-dropdown-item>
       <gl-dropdown-divider />
     </div>

app/helpers/groups_helper.rb

@@ -90,11 +90,6 @@ module GroupsHelper
       { group_name: group.name }
   end
 
-  def transfer_group_message(group)
-    _("You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?") %
-      { group_name: group.name }
-  end
-
   def share_with_group_lock_help_text(group)
     return default_help unless group.parent&.share_with_group_lock?
 

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), is_paid_group: group.paid?.to_s, paid_group_help_link: help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace') }
+- initial_data = { button_text: s_('GroupSettings|Transfer group'), group_name: @group.name, target_form_id: form_id, parent_groups: parent_group_options(group), is_paid_group: group.paid?.to_s }
 
 .sub-section
   %h4.warning-title= s_('GroupSettings|Transfer group')
@@ -12,4 +12,9 @@
       %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.")
+    - 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 }

spec/frontend/groups/components/transfer_group_form_spec.js

@@ -56,14 +56,14 @@ describe('Transfer group form', () => {
   });
 
   it('sets the namespace select properties', () => {
-    const attrs = findNamespaceSelect().attributes();
-    expect(attrs).toMatchObject({
-      defaulttext: 'Select parent group',
-      emptynamespacetitle: 'No parent group',
-      includeemptynamespace: 'true',
+    expect(findNamespaceSelect().props()).toMatchObject({
+      defaultText: 'Select parent group',
+      fullWidth: false,
+      includeHeaders: false,
+      emptyNamespaceTitle: 'No parent group',
+      includeEmptyNamespace: true,
+      data: { groups },
     });
-
-    expect(findNamespaceSelect().props('data')).toEqual({ groups });
   });
 
   it('renders the hidden input field', () => {