1 files changed, 13 insertions, 9 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index e7a87636aa7..bc32e974bc3 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -1,6 +1,7 @@
 <script>
   import editFormButtons from './edit_form_buttons.vue';
   import issuableMixin from '../../../vue_shared/mixins/issuable';
+  import { __, sprintf } from '../../../locale';
 
   export default {
     components: {
@@ -25,6 +26,14 @@
         type: Function,
       },
     },
+    computed: {
+      lockWarning() {
+        return sprintf(__('Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
+      },
+      unlockWarning() {
+        return sprintf(__('Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
+      },
+    },
   };
 </script>
 
@@ -33,19 +42,14 @@
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
         class="text"
-        v-if="isLocked">
-        Unlock this {{ issuableDisplayName }}?
-        <strong>Everyone</strong>
-        will be able to comment.
+        v-if="isLocked"
+        v-html="unlockWarning">
       </p>
 
       <p
         class="text"
-        v-else>
-        Lock this {{ issuableDisplayName }}?
-        Only
-        <strong>project members</strong>
-        will be able to comment.
+        v-else
+        v-html="lockWarning">
       </p>
 
       <edit-form-buttons