Use gitlab-ui modal wrapped component

app/assets/javascripts/commons/gitlab_ui.js

 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);

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>

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: '',
       },

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

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.29.0",
-    "@gitlab-org/gitlab-ui": "1.0.5",
+    "@gitlab-org/gitlab-ui": "^1.1.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",

spec/features/projects/wiki/user_deletes_wiki_page_spec.rb

@@ -13,7 +13,7 @@ describe 'User deletes wiki page', :js do
   it 'deletes a page' do
     click_on('Edit')
     click_on('Delete')
-    find('.js-modal-primary-action').click
+    find('.modal-footer .btn-danger').click
 
     expect(page).to have_content('Page was successfully deleted')
   end

yarn.lock

@@ -82,9 +82,9 @@
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
 
-"@gitlab-org/gitlab-ui@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.0.5.tgz#a64b402650494115c8b494a44b72c2d6fbf33fff"
+"@gitlab-org/gitlab-ui@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.1.0.tgz#4216b84c142e37653666da6a088384a44c9d5727"
   dependencies:
     "@gitlab-org/gitlab-svgs" "^1.23.0"
     bootstrap-vue "^2.0.0-rc.11"