Attempt to migrate the 'promote label' modal

Best first attempt to start migrating the 'promote label' modals
to the new system.

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

 <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__(

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

app/views/groups/labels/index.html.haml

@@ -5,7 +5,7 @@
 - labels_or_filters = @labels.exists? || search.present? || subscribed.present?
 
 - if labels_or_filters
-  #promote-label-modal
+  #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
   .labels-container.gl-mt-2

app/views/projects/labels/index.html.haml

@@ -5,7 +5,7 @@
 - labels_or_filters = @labels.exists? || @prioritized_labels.exists? || search.present? || subscribed.present?
 
 - if labels_or_filters
-  #promote-label-modal
+  #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
   .labels-container.gl-mt-3

app/views/shared/_label.html.haml

@@ -34,10 +34,7 @@
                             label_title: label.title,
                             label_color: label.color,
                             label_text_color: label.text_color,
-                            group_name: label.project.group.name,
-                            target: '#promote-label-modal',
-                            container: 'body',
-                            toggle: 'modal' } }
+                            group_name: label.project.group.name } }
                     = _('Promote to group label')
               - if can?(current_user, :admin_label, label)
                 %li

changelogs/unreleased/229703-aqualls-promote-label-modal.yml

+---
+title: Migrate DeprecatedModal to GitLab UI Modal for promoted labels
+merge_request: 46047
+author:
+type: changed

spec/frontend/pages/labels/components/promote_label_modal_spec.js

@@ -32,10 +32,9 @@ describe('Promote label modal', () => {
     });
 
     it('contains a label span with the color', () => {
-      const labelFromTitle = vm.$el.querySelector('.modal-header .label.color-label');
-
-      expect(labelFromTitle.style.backgroundColor).not.toBe(null);
-      expect(labelFromTitle.textContent).toContain(vm.labelTitle);
+      expect(vm.labelColor).not.toBe(null);
+      expect(vm.labelColor).toBe(labelMockData.labelColor);
+      expect(vm.labelTitle).toBe(labelMockData.labelTitle);
     });
   });