Replace haml modal with vuejs modal

Trigger the modal when the relevant button is clicked

app/assets/javascripts/init_confirm_danger.js

+import Vue from 'vue';
+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;
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(ConfirmDanger, {
+        props: {
+          phrase,
+          buttonText,
+        },
+        provide: {
+          confirmDangerMessage,
+        },
+      }),
+  });
+};

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

 import { PROJECT_BADGE } from '~/badges/constants';
-import initConfirmDangerModal from '~/confirm_danger_modal';
+import initLegacyConfirmDangerModal from '~/confirm_danger_modal';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
@@ -13,7 +13,7 @@ import initProjectPermissionsSettings from '../shared/permissions';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 
 initFilePickers();
-initConfirmDangerModal();
+initLegacyConfirmDangerModal();
 initSettingsPanels();
 initProjectDeleteButton();
 mountBadgeSettings(PROJECT_BADGE);

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

+<script>
+import { GlButton, GlModalDirective } from '@gitlab/ui';
+import ConfirmDangerModal from './confirm_danger_modal.vue';
+
+export default {
+  name: 'ConfirmDanger',
+  components: {
+    GlButton,
+    ConfirmDangerModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    phrase: {
+      type: String,
+      required: true,
+    },
+    buttonText: {
+      type: String,
+      required: true,
+    },
+  },
+  modalId: 'confirm-danger-modal',
+};
+</script>
+<template>
+  <div>
+    <gl-button
+      v-gl-modal="$options.modalId"
+      class="gl-button btn btn-danger qa-transfer-button"
+      variant="danger"
+      :disabled="disabled"
+      >{{ buttonText }}</gl-button
+    >
+    <confirm-danger-modal
+      :modal-id="$options.modalId"
+      :phrase="phrase"
+      @confirm="$emit('confirm')"
+    />
+  </div>
+</template>

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

+<script>
+import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
+import {
+  CONFIRM_DANGER_MODAL_BUTTON,
+  CONFIRM_DANGER_MODAL_TITLE,
+  CONFIRM_DANGER_PHRASE_TEXT,
+  CONFIRM_DANGER_WARNING,
+} from './constants';
+
+export default {
+  name: 'ConfirmDangerModal',
+  components: {
+    GlModal,
+    GlFormGroup,
+    GlFormInput,
+    GlSprintf,
+  },
+  inject: {
+    confirmDangerMessage: {
+      default: '',
+    },
+    confirmButtonText: {
+      default: CONFIRM_DANGER_MODAL_BUTTON,
+    },
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+    phrase: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return { confirmationPhrase: '' };
+  },
+  computed: {
+    isValid() {
+      return this.phrase.length && this.equalString(this.confirmationPhrase, this.phrase);
+    },
+    actionPrimary() {
+      console.log('this.$options.i18n', this.$options.i18n);
+      return {
+        text: this.$options.i18n.CONFIRM_DANGER_MODAL_BUTTON,
+        attributes: [{ variant: 'danger', disabled: this.isValid }],
+      };
+    },
+  },
+  methods: {
+    equalString(a, b) {
+      return a.trim().toLowerCase() === b.trim().toLowerCase();
+    },
+  },
+  i18n: {
+    CONFIRM_DANGER_MODAL_BUTTON,
+    CONFIRM_DANGER_MODAL_TITLE,
+    CONFIRM_DANGER_WARNING,
+    CONFIRM_DANGER_PHRASE_TEXT,
+  },
+};
+</script>
+<template>
+  <gl-modal
+    ref="modal"
+    class="qa-confirm-modal"
+    :modal-id="modalId"
+    :data-testid="modalId"
+    :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE"
+    :action-primary="actionPrimary"
+    @primary="$emit('confirm')"
+  >
+    <p class="text-danger js-confirm-text">{{ confirmDangerMessage }}</p>
+    <p>
+      <span class="js-warning-text">{{ $options.i18n.CONFIRM_DANGER_MODAL_WARNING }}</span>
+      <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT">
+        <template #code>
+          <code class="js-confirm-danger-match">{{ phrase }}</code>
+        </template>
+      </gl-sprintf>
+    </p>
+    <gl-form-group class="'form-control js-confirm-danger-input qa-confirm-input'" :state="isValid">
+      <gl-form-input v-model="confirmationPhrase" type="text" />
+    </gl-form-group>
+  </gl-modal>
+</template>

app/assets/javascripts/vue_shared/components/confirm_danger/constants.js

+import { __ } from '~/locale';
+
+export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required');
+export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm');
+export const CONFIRM_DANGER_WARNING = __(
+  'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
+);
+export const CONFIRM_DANGER_PHRASE_TEXT = __(
+  'Please type %{code} to proceed or close this modal to cancel.',
+);