Migrate authorize GMA account conversion confirmation modal

app/assets/javascripts/init_confirm_danger.js

@@ -10,6 +10,7 @@ export default () => {
     removeFormId = null,
     phrase,
     buttonText,
+    buttonClass = '',
     buttonTestid = null,
     confirmDangerMessage,
     disabled = false,
@@ -25,6 +26,7 @@ export default () => {
         props: {
           phrase,
           buttonText,
+          buttonClass,
           buttonTestid,
           disabled: parseBoolean(disabled),
         },

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

@@ -26,6 +26,11 @@ export default {
       type: String,
       required: true,
     },
+    buttonClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
     buttonTestid: {
       type: String,
       required: false,
@@ -39,7 +44,7 @@ export default {
   <div>
     <gl-button
       v-gl-modal="$options.modalId"
-      class="gl-button"
+      :class="buttonClass"
       variant="danger"
       :disabled="disabled"
       :data-testid="buttonTestid"

ee/app/assets/javascripts/pages/groups/sso/index.js

 import { redirectUserWithSSOIdentity } from 'ee/saml_sso';
-import initConfirmDangerModal from '~/confirm_danger_modal';
 import UsernameValidator from '~/pages/sessions/new/username_validator';
+import initConfirmDanger from '~/init_confirm_danger';
 
 new UsernameValidator(); // eslint-disable-line no-new
-initConfirmDangerModal();
 redirectUserWithSSOIdentity();
+initConfirmDanger();

ee/app/helpers/groups/sso_helper.rb

@@ -5,4 +5,14 @@ module Groups::SsoHelper
     _("You are about to transfer the control of your account to %{group_name} group. This action is NOT reversible, you won't be able to access any of your groups and projects outside of %{group_name} once this transfer is complete.") %
     { group_name: sanitize(group_name) }
   end
+
+  def authorize_gma_conversion_confirm_modal_data(group_name:, phrase:, remove_form_id:)
+    {
+      remove_form_id: remove_form_id,
+      button_text: _("Transfer ownership"),
+      button_class: 'gl-w-full',
+      confirm_danger_message: transfer_ownership_message(group_name),
+      phrase: phrase
+    }
+  end
 end

ee/app/views/groups/sso/_authorize_pane.html.haml

+- form_id = 'js-authorize-gma-conversion-form'
+
 #authorize-pane.login-box.tab-pane.rounded{ role: 'tabpanel' }
   .login-body
-    = form_tag(group_authorize_managed_account_path(@unauthenticated_group), html: { class: "user gl-show-field-errors", "aria-live" => "assertive" }) do
+    = form_tag(group_authorize_managed_account_path(@unauthenticated_group), id: form_id, html: { class: "user gl-show-field-errors", "aria-live" => "assertive" }) do
       .d-flex.flex-column.mt-3.mx-3
         %p
           = _("Alternatively, you can convert your account to a managed account by the %{group_name} group.") % { group_name: sanitize(@group_name) }
@@ -14,5 +16,4 @@
           = _("Only proceed if you trust %{idp_url} to control your GitLab account sign in.") % { idp_url: @unauthenticated_group.saml_provider.sso_url }
 
       .submit-container
-        = button_to _("Transfer ownership"), '#', class: 'gl-button btn btn-danger js-legacy-confirm-danger', data: { 'confirm-danger-message' => transfer_ownership_message(@group_name), qa_selector: 'transfer_ownership_button' }
-= render 'shared/confirm_modal', phrase: current_user.username
+        .js-confirm-danger{ data: authorize_gma_conversion_confirm_modal_data(group_name: @group_name, phrase: current_user.username, remove_form_id: form_id) }

ee/spec/helpers/groups/sso_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::SsoHelper do
+  describe '#authorize_gma_conversion_confirm_modal_data' do
+    let_it_be(:group_name) { 'Foo bar' }
+    let_it_be(:phrase) { 'gma_user' }
+    let_it_be(:remove_form_id) { 'js-authorize-gma-conversion-form' }
+
+    subject { helper.authorize_gma_conversion_confirm_modal_data(group_name: group_name, phrase: phrase, remove_form_id: remove_form_id) }
+
+    it 'returns expected hash' do
+      expect(subject).to eq({
+        remove_form_id: remove_form_id,
+        button_text: _("Transfer ownership"),
+        button_class: 'gl-w-full',
+        confirm_danger_message: "You are about to transfer the control of your account to #{group_name} group. This action is NOT reversible, you won't be able to access any of your groups and projects outside of #{group_name} once this transfer is complete.",
+        phrase: phrase
+      })
+    end
+  end
+end

spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js

@@ -9,6 +9,7 @@ describe('Confirm Danger Modal', () => {
 
   const phrase = 'En Taro Adun';
   const buttonText = 'Click me!';
+  const buttonClass = 'gl-w-full';
   const modalId = CONFIRM_DANGER_MODAL_ID;
 
   const findBtn = () => wrapper.findComponent(GlButton);
@@ -19,6 +20,7 @@ describe('Confirm Danger Modal', () => {
     shallowMountExtended(ConfirmDanger, {
       propsData: {
         buttonText,
+        buttonClass,
         phrase,
         ...props,
       },
@@ -51,6 +53,10 @@ describe('Confirm Danger Modal', () => {
     expect(findBtn().attributes('disabled')).toBe('true');
   });
 
+  it('passes `buttonClass` prop to button', () => {
+    expect(findBtn().classes()).toContain(buttonClass);
+  });
+
   it('will emit `confirm` when the modal confirms', () => {
     expect(wrapper.emitted('confirm')).toBeUndefined();