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);