Changed delete wiki prompt from 'confirm' for 'gl_modal'

3 files changed, 95 insertions, 2 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
new file mode 100644
index 00000000000..6a4d3f56229
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -0,0 +1,63 @@
+<script>
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+  import { s__} from '~/locale';
+
+export default {
+  components: {
+    GlModal
+  },
+  props: {
+    deleteWikiUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    csrfToken: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    text() {
+      return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?')
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.form.submit();
+    }
+  }
+}
+</script>
+
+<template>
+  <gl-modal
+    id="delete-wiki-modal"
+    :header-title-text="s__('WikiPageConfirmDelete|Delete Wiki?')"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete')"
+    @submit="onSubmit"
+  >
+    {{ text }}
+
+    <form
+        ref="form"
+        :action="deleteWikiUrl"
+        method="post"
+      >
+        <input
+          ref="method"
+          type="hidden"
+          name="_method"
+          value="delete"
+        />
+        <input
+          type="hidden"
+          name="authenticity_token"
+          :value="csrfToken"
+        />
+      </form>
+  </gl-modal>
+</template>
+
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index ec01c66ffda..467f65541ec 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,12 +1,34 @@
 import $ from 'jquery';
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import csrf from '~/lib/utils/csrf';
 import Wikis from './wikis';
 import ShortcutsWiki from '../../../shortcuts_wiki';
 import ZenMode from '../../../zen_mode';
 import GLForm from '../../../gl_form';
+import deleteWikiModal from './components/delete_wiki_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Wikis(); // eslint-disable-line no-new
   new ShortcutsWiki(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
   new GLForm($('.wiki-form'), true); // eslint-disable-line no-new
+
+  Vue.use(Translate);
+  const { deleteWikiUrl } = document.getElementById('delete-wiki-button').dataset;
+  const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
+  const deleteModal = new Vue({
+    el: deleteWikiModalEl,
+    data: {
+      deleteWikiUrl: '',
+    },
+    render(createElement) {
+      return createElement(deleteWikiModal, {
+        props: {
+          deleteWikiUrl,
+          csrfToken: csrf.token,
+        },
+      });
+    },
+  });
 });
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 9d3d4072027..e51fa1abfe4 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -28,9 +28,17 @@
       = link_to project_wiki_history_path(@project, @page), class: "btn" do
         = s_("Wiki|Page history")
       - if can?(current_user, :admin_wiki, @project)
-        = link_to project_wiki_path(@project, @page), data: { confirm: s_("WikiPageConfirmDelete|Are you sure you want to delete this page?")}, method: :delete, class: "btn btn-danger" do
-          = _("Delete")
+        -# = link_to project_wiki_path(@project, @page), data: { confirm: s_("WikiPageConfirmDelete|Are you sure you want to delete this page?")}, method: :delete, class: "btn btn-danger" do
+        -#   = _("Delete")
+        %button.btn.btn-danger{ data: { toggle: 'modal', 
+          target: '#delete-wiki-modal', 
+          delete_wiki_url: project_wiki_path(@project, @page) }, 
+          id: 'delete-wiki-button',
+          type: 'button' }
+          = _('Delete')
 
 = render 'form'
 
 = render 'sidebar'
+
+#delete-wiki-modal.modal.fade