1 files changed, 21 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index a0e76b151f7..dab0540f44e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -1,22 +1,37 @@
 <script>
+import { GlSprintf } from '@gitlab/ui';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { __ } from '../../locale';
 
 export default {
+  i18n: {
+    removesBranchText: __('%{strongStart}Deletes%{strongEnd} source branch'),
+    tooltipTitle: __('A user with write access to the source branch selected this option'),
+  },
+  components: {
+    GlSprintf,
+  },
   directives: {
     tooltip,
   },
-  created() {
-    this.removesBranchText = __('<strong>Deletes</strong> source branch');
-    this.tooltipTitle = __('A user with write access to the source branch selected this option');
-  },
 };
 </script>
 
 <template>
   <p v-once class="mr-info-list mr-links gl-mb-0">
-    <span class="status-text" v-html="removesBranchText"> </span>
-    <i v-tooltip :title="tooltipTitle" :aria-label="tooltipTitle" class="fa fa-question-circle">
+    <span class="status-text">
+      <gl-sprintf :message="$options.i18n.removesBranchText">
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+      </gl-sprintf>
+    </span>
+    <i
+      v-tooltip
+      :title="$options.i18n.tooltipTitle"
+      :aria-label="$options.i18n.tooltipTitle"
+      class="fa fa-question-circle"
+    >
     </i>
   </p>
 </template>