Commit 18dcb756 authored by Amelia Bauerly's avatar Amelia Bauerly Committed by Jose Ivan Vargas

Migrate DeprecatedModal to GitLab UI Modal

parent d50d8d25
<script>
import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { deprecatedCreateFlash as Flash } from '~/flash';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { n__, s__, sprintf } from '~/locale';
import { __, n__, s__, sprintf } from '~/locale';
import { redirectTo } from '~/lib/utils/url_utility';
import eventHub from '../event_hub';
export default {
components: {
DeprecatedModal,
GlModal,
},
directives: {
SafeHtml,
......@@ -115,20 +114,24 @@ Once deleted, it cannot be undone or recovered.`),
});
},
},
primaryProps: {
text: s__('Milestones|Delete milestone'),
attributes: [{ variant: 'danger' }, { category: 'primary' }],
},
cancelProps: {
text: __('Cancel'),
},
};
</script>
<template>
<deprecated-modal
id="delete-milestone-modal"
<gl-modal
modal-id="delete-milestone-modal"
:title="title"
:text="text"
:primary-button-label="s__('Milestones|Delete milestone')"
kind="danger"
@submit="onSubmit"
:action-primary="$options.primaryProps"
:action-cancel="$options.cancelProps"
@primary="onSubmit"
>
<template #body="props">
<p v-safe-html="props.text"></p>
</template>
</deprecated-modal>
<p v-safe-html="text"></p>
</gl-modal>
</template>
import Vue from 'vue';
import Translate from '~/vue_shared/translate';
import deleteMilestoneModal from './components/delete_milestone_modal.vue';
import DeleteMilestoneModal from './components/delete_milestone_modal.vue';
import eventHub from './event_hub';
export default () => {
......@@ -18,6 +18,8 @@ export default () => {
button.querySelector('.js-loading-icon').classList.add('hidden');
};
const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
const onRequestStarted = milestoneUrl => {
const button = document.querySelector(
`.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`,
......@@ -27,35 +29,8 @@ export default () => {
eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished);
};
const onDeleteButtonClick = event => {
const button = event.currentTarget;
const modalProps = {
milestoneId: parseInt(button.dataset.milestoneId, 10),
milestoneTitle: button.dataset.milestoneTitle,
milestoneUrl: button.dataset.milestoneUrl,
issueCount: parseInt(button.dataset.milestoneIssueCount, 10),
mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10),
};
eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted);
eventHub.$emit('deleteMilestoneModal.props', modalProps);
};
const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button');
deleteMilestoneButtons.forEach(button => {
button.addEventListener('click', onDeleteButtonClick);
});
eventHub.$once('deleteMilestoneModal.mounted', () => {
deleteMilestoneButtons.forEach(button => {
button.removeAttribute('disabled');
});
});
return new Vue({
el: '#delete-milestone-modal',
components: {
deleteMilestoneModal,
},
el: '#js-delete-milestone-modal',
data() {
return {
modalProps: {
......@@ -69,10 +44,21 @@ export default () => {
},
mounted() {
eventHub.$on('deleteMilestoneModal.props', this.setModalProps);
eventHub.$emit('deleteMilestoneModal.mounted');
},
beforeDestroy() {
eventHub.$off('deleteMilestoneModal.props', this.setModalProps);
deleteMilestoneButtons.forEach(button => {
button.removeAttribute('disabled');
button.addEventListener('click', () => {
this.$root.$emit('bv::show::modal', 'delete-milestone-modal');
eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted);
this.setModalProps({
milestoneId: parseInt(button.dataset.milestoneId, 10),
milestoneTitle: button.dataset.milestoneTitle,
milestoneUrl: button.dataset.milestoneUrl,
issueCount: parseInt(button.dataset.milestoneIssueCount, 10),
mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10),
});
});
});
},
methods: {
setModalProps(modalProps) {
......@@ -80,7 +66,7 @@ export default () => {
},
},
render(createElement) {
return createElement(deleteMilestoneModal, {
return createElement(DeleteMilestoneModal, {
props: this.modalProps,
});
},
......
......@@ -12,7 +12,7 @@
= _('New milestone')
.milestones
#delete-milestone-modal
#js-delete-milestone-modal
#promote-milestone-modal
%ul.content-list
......
- milestone_url = @milestone.project_milestone? ? project_milestone_path(@project, @milestone) : group_milestone_path(@group, @milestone)
%button.js-delete-milestone-button.btn.btn-grouped.btn-danger{ data: { toggle: 'modal',
target: '#delete-milestone-modal',
milestone_id: @milestone.id,
%button.js-delete-milestone-button.btn.btn-grouped.btn-danger{ data: { milestone_id: @milestone.id,
milestone_title: markdown_field(@milestone, :title),
milestone_url: milestone_url,
milestone_issue_count: @milestone.issues.count,
......@@ -11,4 +9,4 @@
= _('Delete')
.spinner.js-loading-icon.hidden
#delete-milestone-modal
#js-delete-milestone-modal
---
title: Migrate DeprecatedModal to GitLab UI Modal
merge_request: 42113
author:
type: changed
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