1 files changed, 20 insertions, 17 deletions
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index f3c2a31bd5b..4b99888ae73 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -1,30 +1,33 @@
 <script>
-import { __, sprintf } from '~/locale';
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const alertMessage = __(
+  'Someone edited the issue at the same time you did. Please check out %{linkStart}the issue%{linkEnd} and make sure your changes will not unintentionally remove theirs.',
+);
 
 export default {
+  alertMessage,
+  components: {
+    GlSprintf,
+    GlLink,
+  },
   computed: {
     currentPath() {
       return window.location.pathname;
     },
-    alertMessage() {
-      return sprintf(
-        __(
-          'Someone edited the issue at the same time you did. Please check out %{linkStart}the issue%{linkEnd} and make sure your changes will not unintentionally remove theirs.',
-        ),
-        {
-          linkStart: `<a href="${this.currentPath}" target="_blank" rel="nofollow">`,
-          linkEnd: `</a>`,
-        },
-        false,
-      );
-    },
   },
 };
 </script>
 
 <template>
-  <div
-    class="alert alert-danger"
-    v-html="alertMessage /* eslint-disable-line vue/no-v-html */"
-  ></div>
+  <div class="alert alert-danger">
+    <gl-sprintf :message="$options.alertMessage">
+      <template #link="{ content }">
+        <gl-link :href="currentPath" target="_blank" rel="nofollow">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+  </div>
 </template>