Merge branch 'update-wiki-modal' into 'master'

Update wiki page deletion confirmation

See merge request gitlab-org/gitlab-ce!18712

5 files changed, 121 insertions, 3 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..df21e2f8771
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -0,0 +1,77 @@
+<script>
+import _ from 'underscore';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    deleteWikiUrl: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    pageTitle: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    csrfToken: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  computed: {
+    message() {
+      return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?');
+    },
+    title() {
+      return sprintf(
+        s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'),
+        {
+          pageTitle: _.escape(this.pageTitle),
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.form.submit();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    id="delete-wiki-modal"
+    :header-title-text="title"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
+    @submit="onSubmit"
+  >
+    {{ message }}
+    <form
+      ref="form"
+      :action="deleteWikiUrl"
+      method="post"
+      class="form-horizontal js-requires-input"
+    >
+      <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..0295653cb29 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,12 +1,40 @@
 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
+
+  const deleteWikiButton = document.getElementById('delete-wiki-button');
+
+  if (deleteWikiButton) {
+    Vue.use(Translate);
+
+    const { deleteWikiUrl, pageTitle } = deleteWikiButton.dataset;
+    const deleteWikiModalEl = document.getElementById('delete-wiki-modal');
+    const deleteModal = new Vue({ // eslint-disable-line
+      el: deleteWikiModalEl,
+      data: {
+        deleteWikiUrl: '',
+      },
+      render(createElement) {
+        return createElement(deleteWikiModal, {
+          props: {
+            pageTitle,
+            deleteWikiUrl,
+            csrfToken: csrf.token,
+          },
+        });
+      },
+    });
+  }
 });
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 9d3d4072027..35c7dc2984a 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -28,9 +28,16 @@
       = 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")
+        %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')
 
 = render 'form'
 
 = render 'sidebar'
+
+#delete-wiki-modal.modal.fade
diff --git a/changelogs/unreleased/update-wiki-modal.yml b/changelogs/unreleased/update-wiki-modal.yml
new file mode 100644
index 00000000000..00f2fc4f181
--- /dev/null
+++ b/changelogs/unreleased/update-wiki-modal.yml
@@ -0,0 +1,5 @@
+---
+title: New design for wiki page deletion confirmation
+merge_request: 18712
+author: Constance Okoghenun
+type: added
diff --git a/spec/features/projects/wiki/user_deletes_wiki_page_spec.rb b/spec/features/projects/wiki/user_deletes_wiki_page_spec.rb
index ab9420fc38f..2c67cec6b67 100644
--- a/spec/features/projects/wiki/user_deletes_wiki_page_spec.rb
+++ b/spec/features/projects/wiki/user_deletes_wiki_page_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-feature 'User deletes wiki page' do
+feature 'User deletes wiki page', :js do
   let(:user) { create(:user) }
   let(:project) { create(:project, :wiki_repo, namespace: user.namespace) }
   let(:wiki_page) { create(:wiki_page, wiki: project.wiki) }
@@ -13,6 +13,7 @@ feature 'User deletes wiki page' do
   it 'deletes a page' do
     click_on('Edit')
     click_on('Delete')
+    find('.js-modal-primary-action').click
 
     expect(page).to have_content('Page was successfully deleted')
   end