diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/labels')
-rw-r--r-- | app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue | 24 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/labels/index/index.js | 102 |
2 files changed, 58 insertions, 68 deletions
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue index f58e4909a08..7b5e0f70b7b 100644 --- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue +++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue @@ -1,15 +1,21 @@ <script> -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, 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 { s__, __, sprintf } from '~/locale'; import { visitUrl } from '~/lib/utils/url_utility'; import eventHub from '../event_hub'; export default { + primaryProps: { + text: s__('Labels|Promote Label'), + attributes: [{ variant: 'warning' }, { category: 'primary' }], + }, + cancelProps: { + text: __('Cancel'), + }, components: { - GlModal: DeprecatedModal2, + GlModal, GlSprintf, }, props: { @@ -72,12 +78,12 @@ export default { </script> <template> <gl-modal - id="promote-label-modal" - :footer-primary-button-text="s__('Labels|Promote Label')" - footer-primary-button-variant="warning" - @submit="onSubmit" + modal-id="promote-label-modal" + :action-primary="$options.primaryProps" + :action-cancel="$options.cancelProps" + @primary="onSubmit" > - <div slot="title" class="modal-title-with-label"> + <div slot="modal-title" class="modal-title-with-label"> <gl-sprintf :message=" s__( diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js index 36cf485f33d..ee129011f9a 100644 --- a/app/assets/javascripts/pages/projects/labels/index/index.js +++ b/app/assets/javascripts/pages/projects/labels/index/index.js @@ -27,71 +27,55 @@ const initLabelIndex = () => { eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished); }; - const onDeleteButtonClick = event => { - const button = event.currentTarget; - const modalProps = { - labelTitle: button.dataset.labelTitle, - labelColor: button.dataset.labelColor, - labelTextColor: button.dataset.labelTextColor, - url: button.dataset.url, - groupName: button.dataset.groupName, - }; - eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted); - eventHub.$emit('promoteLabelModal.props', modalProps); - }; - const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button'); - promoteLabelButtons.forEach(button => { - button.addEventListener('click', onDeleteButtonClick); - }); - eventHub.$once('promoteLabelModal.mounted', () => { - promoteLabelButtons.forEach(button => { - button.removeAttribute('disabled'); - }); - }); + return new Vue({ + el: '#js-promote-label-modal', + data() { + return { + modalProps: { + labelTitle: '', + labelColor: '', + labelTextColor: '', + url: '', + groupName: '', + }, + }; + }, + mounted() { + eventHub.$on('promoteLabelModal.props', this.setModalProps); + eventHub.$emit('promoteLabelModal.mounted'); - const promoteLabelModal = document.getElementById('promote-label-modal'); - let promoteLabelModalComponent; + promoteLabelButtons.forEach(button => { + button.removeAttribute('disabled'); + button.addEventListener('click', () => { + this.$root.$emit('bv::show::modal', 'promote-label-modal'); + eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted); - if (promoteLabelModal) { - promoteLabelModalComponent = new Vue({ - el: promoteLabelModal, - components: { - PromoteLabelModal, - }, - data() { - return { - modalProps: { - labelTitle: '', - labelColor: '', - labelTextColor: '', - url: '', - groupName: '', - }, - }; - }, - mounted() { - eventHub.$on('promoteLabelModal.props', this.setModalProps); - eventHub.$emit('promoteLabelModal.mounted'); - }, - beforeDestroy() { - eventHub.$off('promoteLabelModal.props', this.setModalProps); - }, - methods: { - setModalProps(modalProps) { - this.modalProps = modalProps; - }, - }, - render(createElement) { - return createElement('promote-label-modal', { - props: this.modalProps, + this.setModalProps({ + labelTitle: button.dataset.labelTitle, + labelColor: button.dataset.labelColor, + labelTextColor: button.dataset.labelTextColor, + url: button.dataset.url, + groupName: button.dataset.groupName, + }); }); + }); + }, + beforeDestroy() { + eventHub.$off('promoteLabelModal.props', this.setModalProps); + }, + methods: { + setModalProps(modalProps) { + this.modalProps = modalProps; }, - }); - } - - return promoteLabelModalComponent; + }, + render(createElement) { + return createElement(PromoteLabelModal, { + props: this.modalProps, + }); + }, + }); }; document.addEventListener('DOMContentLoaded', initLabelIndex); |