1 files changed, 39 insertions, 30 deletions
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index 0289209ff1e..75cb6374ad5 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -1,12 +1,8 @@
 <script>
 import _ from 'underscore';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { s__, sprintf } from '~/locale';
 
 export default {
-  components: {
-    GlModal,
-  },
   props: {
     deleteWikiUrl: {
       type: String,
@@ -25,6 +21,9 @@ export default {
     },
   },
   computed: {
+    modalId() {
+      return 'delete-wiki-modal';
+    },
     message() {
       return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
     },
@@ -47,31 +46,41 @@ export default {
 </script>
 
 <template>
-  <gl-modal
-    id="delete-wiki-modal"
-    :header-title-text="title"
-    :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
-  >
-    {{ message }}
-    <form
-      ref="form"
-      :action="deleteWikiUrl"
-      method="post"
-      class="js-requires-input"
+  <div class="d-inline-block">
+    <button
+      v-gl-modal="modalId"
+      type="button"
+      class="btn btn-danger"
+    >
+      {{ __('Delete') }}
+    </button>
+    <gl-ui-modal
+      :title="title"
+      :ok-title="s__('WikiPageConfirmDelete|Delete page')"
+      :modal-id="modalId"
+      title-tag="h4"
+      ok-variant="danger"
+      @ok="onSubmit"
     >
-      <input
-        ref="method"
-        type="hidden"
-        name="_method"
-        value="delete"
-      />
-      <input
-        :value="csrfToken"
-        type="hidden"
-        name="authenticity_token"
-      />
-    </form>
-  </gl-modal>
+      {{ message }}
+      <form
+        ref="form"
+        :action="deleteWikiUrl"
+        method="post"
+        class="js-requires-input"
+      >
+        <input
+          ref="method"
+          type="hidden"
+          name="_method"
+          value="delete"
+        />
+        <input
+          :value="csrfToken"
+          type="hidden"
+          name="authenticity_token"
+        />
+      </form>
+    </gl-ui-modal>
+  </div>
 </template>