2 files changed, 37 insertions, 48 deletions

diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
index 983062c79f1..93fe38831be 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
@@ -1,16 +1,15 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 
 import { deprecatedCreateFlash as Flash } from '~/flash';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-import { n__, s__, sprintf } from '~/locale';
+import { __, n__, s__, sprintf } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    DeprecatedModal,
+    GlModal,
   },
   directives: {
     SafeHtml,
@@ -115,20 +114,24 @@ Once deleted, it cannot be undone or recovered.`),
         });
     },
   },
+  primaryProps: {
+    text: s__('Milestones|Delete milestone'),
+    attributes: [{ variant: 'danger' }, { category: 'primary' }],
+  },
+  cancelProps: {
+    text: __('Cancel'),
+  },
 };
 </script>
 
 <template>
-  <deprecated-modal
-    id="delete-milestone-modal"
+  <gl-modal
+    modal-id="delete-milestone-modal"
     :title="title"
-    :text="text"
-    :primary-button-label="s__('Milestones|Delete milestone')"
-    kind="danger"
-    @submit="onSubmit"
+    :action-primary="$options.primaryProps"
+    :action-cancel="$options.cancelProps"
+    @primary="onSubmit"
   >
-    <template #body="props">
-      <p v-safe-html="props.text"></p>
-    </template>
-  </deprecated-modal>
+    <p v-safe-html="text"></p>
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
index 1d559dc6e41..6e68114e04b 100644
--- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
+++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import deleteMilestoneModal from './components/delete_milestone_modal.vue';
+import DeleteMilestoneModal from './components/delete_milestone_modal.vue';
 import eventHub from './event_hub';
 
 export default () => {
@@ -18,6 +18,8 @@ export default () => {
     button.querySelector('.js-loading-icon').classList.add('hidden');
   };
 
+  const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
+
   const onRequestStarted = milestoneUrl => {
     const button = document.querySelector(
       `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`,
@@ -27,35 +29,8 @@ export default () => {
     eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished);
   };
 
-  const onDeleteButtonClick = event => {
-    const button = event.currentTarget;
-    const modalProps = {
-      milestoneId: parseInt(button.dataset.milestoneId, 10),
-      milestoneTitle: button.dataset.milestoneTitle,
-      milestoneUrl: button.dataset.milestoneUrl,
-      issueCount: parseInt(button.dataset.milestoneIssueCount, 10),
-      mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10),
-    };
-    eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted);
-    eventHub.$emit('deleteMilestoneModal.props', modalProps);
-  };
-
-  const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
-  deleteMilestoneButtons.forEach(button => {
-    button.addEventListener('click', onDeleteButtonClick);
-  });
-
-  eventHub.$once('deleteMilestoneModal.mounted', () => {
-    deleteMilestoneButtons.forEach(button => {
-      button.removeAttribute('disabled');
-    });
-  });
-
   return new Vue({
-    el: '#delete-milestone-modal',
-    components: {
-      deleteMilestoneModal,
-    },
+    el: '#js-delete-milestone-modal',
     data() {
       return {
         modalProps: {
@@ -69,10 +44,21 @@ export default () => {
     },
     mounted() {
       eventHub.$on('deleteMilestoneModal.props', this.setModalProps);
-      eventHub.$emit('deleteMilestoneModal.mounted');
-    },
-    beforeDestroy() {
-      eventHub.$off('deleteMilestoneModal.props', this.setModalProps);
+      deleteMilestoneButtons.forEach(button => {
+        button.removeAttribute('disabled');
+        button.addEventListener('click', () => {
+          this.$root.$emit('bv::show::modal', 'delete-milestone-modal');
+          eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted);
+
+          this.setModalProps({
+            milestoneId: parseInt(button.dataset.milestoneId, 10),
+            milestoneTitle: button.dataset.milestoneTitle,
+            milestoneUrl: button.dataset.milestoneUrl,
+            issueCount: parseInt(button.dataset.milestoneIssueCount, 10),
+            mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10),
+          });
+        });
+      });
     },
     methods: {
       setModalProps(modalProps) {
@@ -80,7 +66,7 @@ export default () => {
       },
     },
     render(createElement) {
-      return createElement(deleteMilestoneModal, {
+      return createElement(DeleteMilestoneModal, {
         props: this.modalProps,
       });
     },