Use gitlab-ui modal wrapped component

4 files changed, 53 insertions, 42 deletions

diff --git a/app/assets/javascripts/commons/gitlab_ui.js b/app/assets/javascripts/commons/gitlab_ui.js
index 923c036f5a4..ee274058e0f 100644
--- a/app/assets/javascripts/commons/gitlab_ui.js
+++ b/app/assets/javascripts/commons/gitlab_ui.js
@@ -1,4 +1,10 @@
 import Vue from 'vue';
-import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
+import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
+import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
+
+import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
 
 Vue.component('gl-progress-bar', progressBar);
+Vue.component('gl-ui-modal', modal);
+
+Vue.directive('gl-modal', dModal);
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: '',
       },
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index d4afa995d63..e12b8f2858c 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -28,16 +28,8 @@
       = link_to project_wiki_history_path(@project, @page), class: "btn" do
         = s_("Wiki|Page history")
       - if can?(current_user, :admin_wiki, @project)
-        %button.btn.btn-danger{ data: { toggle: 'modal',
-          target: '#delete-wiki-modal',
-          delete_wiki_url: project_wiki_path(@project, @page),
-          page_title: @page.title.capitalize },
-          id: 'delete-wiki-button',
-          type: 'button' }
-          = _('Delete')
+        #delete-wiki-modal-wrapper{ data: { delete_wiki_url: project_wiki_path(@project, @page), page_title: @page.title.capitalize } }
 
 = render 'form', uploads_path: wiki_attachment_upload_url
 
 = render 'sidebar'
-
-#delete-wiki-modal.modal.fade