Use gitlab-ui modal wrapped component

2 files changed, 45 insertions, 32 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..42c37bc8cd8 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
@@ -25,6 +25,9 @@ export default {
     },
   },
   computed: {
+    modalId() {
+      return 'delete-wiki-modal';
+    },
     message() {
       return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
     },
@@ -47,31 +50,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>
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index 0a0fe3fc137..b0a323a71cd 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -14,15 +14,15 @@ document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
   new GLForm($('.wiki-form')); // eslint-disable-line no-new
 
-  const deleteWikiButton = document.getElementById('delete-wiki-button');
+  const deleteWikiModalWrapperEl = document.getElementById('delete-wiki-modal-wrapper');
 
-  if (deleteWikiButton) {
+  if (deleteWikiModalWrapperEl) {
     Vue.use(Translate);
 
-    const { deleteWikiUrl, pageTitle } = deleteWikiButton.dataset;
-    const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
-    const deleteModal = new Vue({ // eslint-disable-line
-      el: deleteWikiModalEl,
+    const { deleteWikiUrl, pageTitle } = deleteWikiModalWrapperEl.dataset;
+
+    new Vue({ // eslint-disable-line no-new
+      el: deleteWikiModalWrapperEl,
       data: {
         deleteWikiUrl: '',
       },