1 files changed, 24 insertions, 17 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 08078fa6b62..f58e4909a08 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,7 +1,7 @@
 <script>
-import { escape } from 'lodash';
+import { GlSprintf } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import createFlash from '~/flash';
+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';
@@ -10,6 +10,7 @@ import eventHub from '../event_hub';
 export default {
   components: {
     GlModal: DeprecatedModal2,
+    GlSprintf,
   },
   props: {
     url: {
@@ -45,20 +46,6 @@ export default {
         },
       );
     },
-    title() {
-      const label = `<span
-          class="label color-label"
-          style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${escape(this.labelTitle)}</span>`;
-
-      return sprintf(
-        s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'),
-        {
-          labelTitle: label,
-        },
-        false,
-      );
-    },
   },
   methods: {
     onSubmit() {
@@ -90,7 +77,27 @@ export default {
     footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
-    <div slot="title" class="modal-title-with-label" v-html="title"></div>
+    <div slot="title" class="modal-title-with-label">
+      <gl-sprintf
+        :message="
+          s__(
+            'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
+          )
+        "
+      >
+        <template #labelTitle>
+          <span
+            class="label color-label"
+            :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
+          >
+            {{ labelTitle }}
+          </span>
+        </template>
+        <template #span="{ content }"
+          ><span>{{ content }}</span></template
+        >
+      </gl-sprintf>
+    </div>
 
     {{ text }}
   </gl-modal>