Fix broken vue i18n strings

2 files changed, 28 insertions, 12 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 63350fafefa..2514274224d 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -67,6 +67,18 @@ export default {
     errorMessage() {
       return this.file.viewer.error_message;
     },
+    forkMessage() {
+      return sprintf(
+        __(
+          "You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
+        ),
+        {
+          tag_start: '<span class="js-file-fork-suggestion-section-action">',
+          tag_end: '</span>',
+        },
+        false,
+      );
+    },
   },
   watch: {
     isCollapsed: function fileCollapsedWatch(newVal, oldVal) {
@@ -150,12 +162,7 @@ export default {
     />
 
     <div v-if="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion">
-      <span class="file-fork-suggestion-note">
-        {{ sprintf(__("You're not allowed to %{tag_start}edit%{tag_end} files in this project
-        directly. Please fork this project, make your changes there, and submit a merge request."),
-        { tag_start: '<span class="js-file-fork-suggestion-section-action">', tag_end: '</span>' })
-        }}
-      </span>
+      <span class="file-fork-suggestion-note" v-html="forkMessage"></span>
       <a
         :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index 2f3e611e089..19c7a11d87b 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -1,18 +1,27 @@
 <script>
+import { __, sprintf } from '~/locale';
+
 export default {
   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">
-    {{ 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="${currentPath}" target="_blank" rel="nofollow">` linkEnd: '</a
-    >', }) }}
-  </div>
+  <div class="alert alert-danger" v-html="alertMessage"></div>
 </template>