Use gitlab-ui modal wrapped component

6 files changed, 32 insertions, 25 deletions

diff --git a/app/assets/javascripts/commons/gitlab_ui.js b/app/assets/javascripts/commons/gitlab_ui.js
index 923c036f5a4..215d3dc87bc 100644
--- a/app/assets/javascripts/commons/gitlab_ui.js
+++ b/app/assets/javascripts/commons/gitlab_ui.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
 import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
+import modal from '@gitlab-org/gitlab-ui/dist/base/modal';
 
 Vue.component('gl-progress-bar', progressBar);
+Vue.component('gl-modal-ui', modal);
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..211250b33a5 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,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
-import { s__, sprintf } from '~/locale';
+import { s__, sprintf, __ } from '~/locale';
 
 export default {
   components: {
@@ -25,6 +25,9 @@ export default {
     },
   },
   computed: {
+    triggerButtonTitle() {
+      return __('Delete');
+    },
     message() {
       return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
     },
@@ -47,13 +50,23 @@ 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"
+  <gl-modal-ui
+    :title="title"
+    :ok-title="s__('WikiPageConfirmDelete|Delete page')"
+    modal-id="test-modal-id"
+    title-tag="h4"
+    ok-variant="danger"
+    class="d-inline-block"
+    @ok="onSubmit"
   >
+    <template slot="modal-trigger">
+      <button
+        class="btn btn-danger"
+        type="button"
+      >
+        {{ triggerButtonTitle }}
+      </button>
+    </template>
     {{ message }}
     <form
       ref="form"
@@ -73,5 +86,5 @@ export default {
         name="authenticity_token"
       />
     </form>
-  </gl-modal>
+  </gl-modal-ui>
 </template>
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index 0a0fe3fc137..3a7ca2d5321 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -14,14 +14,14 @@ 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 deleteWikiModalEl = document.getElementById('delete-wiki-modal');
 
-  if (deleteWikiButton) {
+  if (deleteWikiModalEl) {
     Vue.use(Translate);
 
-    const { deleteWikiUrl, pageTitle } = deleteWikiButton.dataset;
-    const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
-    const deleteModal = new Vue({ // eslint-disable-line
+    const { deleteWikiUrl, pageTitle } = deleteWikiModalEl.dataset;
+
+    new Vue({ // eslint-disable-line no-new
       el: deleteWikiModalEl,
       data: {
         deleteWikiUrl: '',
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index d80d2957466..a72c0212fcb 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{ data: { delete_wiki_url: project_wiki_path(@project, @page), page_title: @page.title.capitalize } }
 
 = render 'form'
 
 = render 'sidebar'
-
-#delete-wiki-modal.modal.fade
diff --git a/package.json b/package.json
index 975dd2619d7..b7741e7aa08 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.27.0",
-    "@gitlab-org/gitlab-ui": "1.0.5",
+    "@gitlab-org/gitlab-ui": "https://gitlab.com/gitlab-org/frontend/gitlab-ui.git#4fe1d06",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",
diff --git a/yarn.lock b/yarn.lock
index c1e9d0ab73e..b9d0a26999b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -82,9 +82,9 @@
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.27.0.tgz#638e70399ebd59e503732177316bb9a18bf7a13f"
 
-"@gitlab-org/gitlab-ui@1.0.5":
+"@gitlab-org/gitlab-ui@https://gitlab.com/gitlab-org/frontend/gitlab-ui.git#4fe1d06":
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.0.5.tgz#a64b402650494115c8b494a44b72c2d6fbf33fff"
+  resolved "https://gitlab.com/gitlab-org/frontend/gitlab-ui.git#4fe1d0693d27df1809e55909709c20d3658b69b3"
   dependencies:
     "@gitlab-org/gitlab-svgs" "^1.23.0"
     bootstrap-vue "^2.0.0-rc.11"