diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /app/assets/javascripts/pages/milestones/shared | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) | |
download | gitlab-ce-6438df3a1e0fb944485cebf07976160184697d72.tar.gz |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/pages/milestones/shared')
4 files changed, 73 insertions, 119 deletions
diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue index 93fe38831be..f47945c5a9f 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue @@ -82,7 +82,7 @@ Once deleted, it cannot be undone or recovered.`), return axios .delete(this.milestoneUrl) - .then(response => { + .then((response) => { eventHub.$emit('deleteMilestoneModal.requestFinished', { milestoneUrl: this.milestoneUrl, successful: true, @@ -91,7 +91,7 @@ Once deleted, it cannot be undone or recovered.`), // follow the rediect to milestones overview page redirectTo(response.request.responseURL); }) - .catch(error => { + .catch((error) => { eventHub.$emit('deleteMilestoneModal.requestFinished', { milestoneUrl: this.milestoneUrl, successful: false, diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue index 0dc54b612ba..ecde11aff40 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue @@ -1,28 +1,22 @@ <script> +import { GlModal } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import { s__, sprintf } from '~/locale'; import { visitUrl } from '~/lib/utils/url_utility'; -import eventHub from '../event_hub'; export default { components: { - GlModal: DeprecatedModal2, + GlModal, }, - props: { - milestoneTitle: { - type: String, - required: true, - }, - url: { - type: String, - required: true, - }, - groupName: { - type: String, - required: true, - }, + data() { + return { + milestoneTitle: '', + url: '', + groupName: '', + currentButton: null, + visible: false, + }; }, computed: { title() { @@ -38,42 +32,71 @@ export default { ); }, }, + mounted() { + this.getButtons().forEach((button) => { + button.addEventListener('click', this.onPromoteButtonClick); + button.removeAttribute('disabled'); + }); + }, + beforeDestroy() { + this.getButtons().forEach((button) => { + button.removeEventListener('click', this.onPromoteButtonClick); + }); + }, methods: { + onPromoteButtonClick({ currentTarget }) { + const { milestoneTitle, url, groupName } = currentTarget.dataset; + currentTarget.setAttribute('disabled', ''); + this.visible = true; + this.milestoneTitle = milestoneTitle; + this.url = url; + this.groupName = groupName; + this.currentButton = currentTarget; + }, + getButtons() { + return document.querySelectorAll('.js-promote-project-milestone-button'); + }, onSubmit() { - eventHub.$emit('promoteMilestoneModal.requestStarted', this.url); return axios .post(this.url, { params: { format: 'json' } }) - .then(response => { - eventHub.$emit('promoteMilestoneModal.requestFinished', { - milestoneUrl: this.url, - successful: true, - }); + .then((response) => { visitUrl(response.data.url); }) - .catch(error => { - eventHub.$emit('promoteMilestoneModal.requestFinished', { - milestoneUrl: this.url, - successful: false, - }); + .catch((error) => { createFlash(error); + }) + .finally(() => { + this.visible = false; }); }, + onClose() { + this.visible = false; + if (this.currentButton) { + this.currentButton.removeAttribute('disabled'); + } + }, + }, + primaryAction: { + text: s__('Milestones|Promote Milestone'), + attributes: [{ variant: 'warning' }], + }, + cancelAction: { + text: s__('Cancel'), + attributes: [], }, }; </script> <template> <gl-modal - id="promote-milestone-modal" - :footer-primary-button-text="s__('Milestones|Promote Milestone')" - footer-primary-button-variant="warning" - @submit="onSubmit" + :visible="visible" + modal-id="promote-milestone-modal" + :action-primary="$options.primaryAction" + :action-cancel="$options.cancelAction" + :title="title" + @primary="onSubmit" + @hide="onClose" > - <template #title> - {{ title }} - </template> - <div> - <p>{{ text }}</p> - <p>{{ s__('Milestones|This action cannot be reversed.') }}</p> - </div> + <p>{{ text }}</p> + <p>{{ s__('Milestones|This action cannot be reversed.') }}</p> </gl-modal> </template> diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js index 6e68114e04b..e8b67891c42 100644 --- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js +++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js @@ -20,7 +20,7 @@ export default () => { const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); - const onRequestStarted = milestoneUrl => { + const onRequestStarted = (milestoneUrl) => { const button = document.querySelector( `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`, ); @@ -44,7 +44,7 @@ export default () => { }, mounted() { eventHub.$on('deleteMilestoneModal.props', this.setModalProps); - deleteMilestoneButtons.forEach(button => { + deleteMilestoneButtons.forEach((button) => { button.removeAttribute('disabled'); button.addEventListener('click', () => { this.$root.$emit('bv::show::modal', 'delete-milestone-modal'); diff --git a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js index fcc62a2b2af..5472b8c684f 100644 --- a/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js +++ b/app/assets/javascripts/pages/milestones/shared/promote_milestone_modal_init.js @@ -1,88 +1,19 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import PromoteMilestoneModal from './components/promote_milestone_modal.vue'; -import eventHub from './event_hub'; Vue.use(Translate); export default () => { - const onRequestFinished = ({ milestoneUrl, successful }) => { - const button = document.querySelector( - `.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`, - ); - - if (!successful) { - button.removeAttribute('disabled'); - } - }; - - const onRequestStarted = milestoneUrl => { - const button = document.querySelector( - `.js-promote-project-milestone-button[data-url="${milestoneUrl}"]`, - ); - button.setAttribute('disabled', ''); - eventHub.$once('promoteMilestoneModal.requestFinished', onRequestFinished); - }; - - const onDeleteButtonClick = event => { - const button = event.currentTarget; - const modalProps = { - milestoneTitle: button.dataset.milestoneTitle, - url: button.dataset.url, - groupName: button.dataset.groupName, - }; - eventHub.$once('promoteMilestoneModal.requestStarted', onRequestStarted); - eventHub.$emit('promoteMilestoneModal.props', modalProps); - }; - - const promoteMilestoneButtons = document.querySelectorAll('.js-promote-project-milestone-button'); - promoteMilestoneButtons.forEach(button => { - button.addEventListener('click', onDeleteButtonClick); - }); - - eventHub.$once('promoteMilestoneModal.mounted', () => { - promoteMilestoneButtons.forEach(button => { - button.removeAttribute('disabled'); - }); - }); - const promoteMilestoneModal = document.getElementById('promote-milestone-modal'); - let promoteMilestoneComponent; - - if (promoteMilestoneModal) { - promoteMilestoneComponent = new Vue({ - el: promoteMilestoneModal, - components: { - PromoteMilestoneModal, - }, - data() { - return { - modalProps: { - milestoneTitle: '', - groupName: '', - url: '', - }, - }; - }, - mounted() { - eventHub.$on('promoteMilestoneModal.props', this.setModalProps); - eventHub.$emit('promoteMilestoneModal.mounted'); - }, - beforeDestroy() { - eventHub.$off('promoteMilestoneModal.props', this.setModalProps); - }, - methods: { - setModalProps(modalProps) { - this.modalProps = modalProps; - }, - }, - render(createElement) { - return createElement('promote-milestone-modal', { - props: this.modalProps, - }); - }, - }); + if (!promoteMilestoneModal) { + return null; } - return promoteMilestoneComponent; + return new Vue({ + el: promoteMilestoneModal, + render(createElement) { + return createElement(PromoteMilestoneModal); + }, + }); }; |