Replace the HAML remove group modal with vuejs

Adds the confirm danger modal to the remove group
settings page, replacing the old haml modal.

app/assets/javascripts/init_confirm_danger.js

 import Vue from 'vue';
+import { parseBoolean } from './lib/utils/common_utils';
 import ConfirmDanger from './vue_shared/components/confirm_danger/confirm_danger.vue';
 
 export default () => {
   const el = document.querySelector('.js-confirm-danger');
   if (!el) return null;
 
-  const { phrase, buttonText, confirmDangerMessage } = el.dataset;
-
+  const { phrase, buttonText, confirmDangerMessage, testId = null, disabled = false } = el.dataset;
   return new Vue({
     el,
+    provide: {
+      confirmDangerMessage,
+    },
     render: (createElement) =>
       createElement(ConfirmDanger, {
         props: {
           phrase,
           buttonText,
-        },
-        provide: {
-          confirmDangerMessage,
+          testId,
+          disabled: parseBoolean(disabled),
         },
       }),
   });

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

@@ -10,10 +10,12 @@ import projectSelect from '~/project_select';
 import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
 import setupTransferEdit from '~/transfer_edit';
+import initConfirmDanger from '~/init_confirm_danger';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
   initConfirmDangerModal();
+  initConfirmDanger();
   initSettingsPanels();
   dirtySubmitFactory(
     document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),

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

@@ -26,6 +26,11 @@ export default {
       type: String,
       required: true,
     },
+    testId: {
+      type: String,
+      required: false,
+      default: 'confirm-danger-button',
+    },
   },
   modalId: CONFIRM_DANGER_MODAL_ID,
 };
@@ -37,7 +42,7 @@ export default {
       class="gl-button"
       variant="danger"
       :disabled="disabled"
-      data-testid="confirm-danger-button"
+      :data-testid="testId"
       >{{ buttonText }}</gl-button
     >
     <confirm-danger-modal

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

+- confirm_modal_data = { "disabled" => group.paid?, "button-text" => _('Remove group'), "confirm-danger-message" => remove_group_message(group), phrase: group.full_path, 'testid' => 'remove-group-button' }
+
 - if group.paid?
   .gl-alert.gl-alert-info.gl-mb-5{ data: { testid: 'group-has-linked-subscription-alert' } }
     = 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 removed because it is linked to a subscription. To remove 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 }
 
-= button_to _('Remove group'), '#', class: ['btn gl-button btn-danger js-legacy-confirm-danger', ('disabled' if group.paid?)], data: { 'confirm-danger-message' => remove_group_message(group), 'testid' => 'remove-group-button' }
+.js-confirm-danger{ data: confirm_modal_data }