Commit 77f1baa3 authored by Clement Ho's avatar Clement Ho Committed by Mike Greiling

Use gitlab-ui modal wrapped component

parent 79322c3c
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);
......@@ -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>
......@@ -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: '',
},
......
......@@ -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
......@@ -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
......
......@@ -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"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment