Fix middle alignment for the title

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

 <script>
+  import _ from 'underscore';
   import axios from '~/lib/utils/axios_utils';
   import createFlash from '~/flash';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
@@ -44,9 +45,9 @@
         const label = `<span
           class="label color-label"
           style="background-color: ${this.labelColor}; color: ${this.labelTextColor};"
-        >${this.labelTitle}</span>`;
-        return sprintf(s__('Labels|Promote label %{labelTitle} to Group Label?'), {
+        >${_.escape(this.labelTitle)}</span>`;
+        return sprintf(s__('Labels|<span>Promote label</span> %{labelTitle} <span>to Group Label?</span>'), {
           labelTitle: label,
         }, false);
       },
@@ -76,6 +77,7 @@
   >
     <div
       slot="title"
+      class="modal-title-with-label"
       v-html="title"
     >
       {{ title }}

app/assets/stylesheets/framework/modal.scss

@@ -4,9 +4,15 @@
   .page-title,
   .modal-title {
+    .modal-title-with-label span {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
+      vertical-align: middle;
     }
   }

app/controllers/projects/labels_controller.rb

@@ -112,7 +112,7 @@ class Projects::LabelsController < Projects::ApplicationController
     begin
       return render_404 unless promote_service.execute(@label)
-      flash[:notice] = "#{@label.title} promoted to <a href=#{group_labels_path(@project.group)}>group label.</a>".html_safe
+      flash[:notice] = "#{@label.title} promoted to <a href=\"#{group_labels_path(@project.group)}\">group label</a>.".html_safe
       respond_to do |format|
         format.html do
           redirect_to(project_labels_path(@project), status: 303)

app/controllers/projects/milestones_controller.rb

@@ -76,7 +76,7 @@ class Projects::MilestonesController < Projects::ApplicationController
   def promote
     promoted_milestone = Milestones::PromoteService.new(project, current_user).execute(milestone)
-    flash[:notice] = "#{milestone.title} promoted to <a href=#{group_milestone_path(project.group, promoted_milestone.iid)}>group milestone.</a>".html_safe
+    flash[:notice] = "#{milestone.title} promoted to <a href=\"#{group_milestone_path(project.group, promoted_milestone.iid)}\">group milestone</a>.".html_safe
     respond_to do |format|
       format.html do
         redirect_to project_milestones_path(project)

spec/controllers/projects/milestones_controller_spec.rb

@@ -107,7 +107,7 @@ describe Projects::MilestonesController do
       it 'shows group milestone' do
         post :promote, namespace_id: project.namespace.id, project_id: project.id, id: milestone.iid
-        expect(flash[:notice]).to eq("#{milestone.title} promoted to <a href=#{group_milestone_path(project.group, milestone.iid)}>group milestone.</a>")
+        expect(flash[:notice]).to eq("#{milestone.title} promoted to <a href=\"#{group_milestone_path(project.group, milestone.iid)}\">group milestone</a>.")
         expect(response).to redirect_to(project_milestones_path(project))
       end
     end