Externalize links in textvue-i18n-js-notes-directory

Moves text with links that require
externalization into functions to fix broken
spec/javascripts/notes/components/comment_form_spec
specs.

Remove unecessary escaping

Fix ununsed import

3 files changed, 41 insertions, 18 deletions

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index f3499cc652a..3823861c0b9 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,14 +1,14 @@
 <script>
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { mapGetters, mapActions } from 'vuex';
+import noteFormMixin from 'ee_else_ce/notes/mixins/note_form';
 import eventHub from '../event_hub';
 import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
 import markdownField from '../../vue_shared/components/markdown/field.vue';
 import issuableStateMixin from '../mixins/issuable_state';
 import resolvable from '../mixins/resolvable';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
-import noteFormMixin from 'ee_else_ce/notes/mixins/note_form';
 
 export default {
   name: 'NoteForm',
@@ -174,6 +174,18 @@ export default {
         (this.line && this.line.can_receive_suggestion)
       );
     },
+    changedCommentText() {
+      return sprintf(
+        __(
+          'This comment has changed since you started editing, please review the %{startTag}updated comment%{endTag} to ensure information is not lost.',
+        ),
+        {
+          startTag: `<a href="${this.noteHash}" target="_blank" rel="noopener noreferrer">`,
+          endTag: '</a>',
+        },
+        false,
+      );
+    },
   },
   watch: {
     noteBody() {
@@ -228,15 +240,11 @@ export default {
 
 <template>
   <div ref="editNoteForm" class="note-edit-form current-note-edit-form js-discussion-note-form">
-    <div v-if="conflictWhileEditing" class="js-conflict-edit-warning alert alert-danger">
-      {{ sprintf(__('This comment has changed since you started editing, please review the
-      %{startTag}updated comment%{endTag} to ensure information is not lost.'), {startTag: `<a
-        href="${this.noteHash}"
-        target="_blank"
-        rel="noopener noreferrer"
-        >`, endTag: '</a
-      >'}) }}
-    </div>
+    <div
+      v-if="conflictWhileEditing"
+      class="js-conflict-edit-warning alert alert-danger"
+      v-html="changedCommentText"
+    ></div>
     <div class="flash-container timeline-content"></div>
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
       <issue-warning
diff --git a/app/assets/javascripts/notes/components/note_signed_out_widget.vue b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
index 196c3e2dfa5..ccfe84ab098 100644
--- a/app/assets/javascripts/notes/components/note_signed_out_widget.vue
+++ b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import { __, sprintf } from '~/locale';
 
 export default {
   computed: {
@@ -10,16 +11,24 @@ export default {
     signInLink() {
       return this.getNotesDataByProp('newSessionPath');
     },
+    signedOutText() {
+      return sprintf(
+        __(
+          'Please %{startTagRegister}register%{endRegisterTag} or %{startTagSignIn}sign in%{endSignInTag} to reply',
+        ),
+        {
+          startTagRegister: `<a href="${this.registerLink}">`,
+          startTagSignIn: `<a href="${this.signInLink}">`,
+          endRegisterTag: '</a>',
+          endSignInTag: '</a>',
+        },
+        false,
+      );
+    },
   },
 };
 </script>
 
 <template>
-  <div class="disabled-comment text-center">
-    {{ sprintf(__('Please %{startTagRegister}register%{endRegisterTag} or %{startTagSignIn}sign
-    in%{endSignInTag} to reply'),{ startTagRegister: `<a href="${this.registerLink}"
-      >`, startTagSignIn: `<a href="${this.signInLink}">`, endRegisterTag: '</a>', endSignIn Tag:
-      '</a
-    >' }) }}
-  </div>
+  <div class="disabled-comment text-center" v-html="signedOutText"></div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bfdfa1891b1..a48d0a24f7b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7553,6 +7553,9 @@ msgstr ""
 msgid "Please %{link_to_register} or %{link_to_sign_in} to comment"
 msgstr ""
 
+msgid "Please %{startTagRegister}register%{endRegisterTag} or %{startTagSignIn}sign in%{endSignInTag} to reply"
+msgstr ""
+
 msgid "Please accept the Terms of Service before continuing."
 msgstr ""
 
@@ -10651,6 +10654,9 @@ msgstr ""
 msgid "This branch has changed since you started editing. Would you like to create a new branch?"
 msgstr ""
 
+msgid "This comment has changed since you started editing, please review the %{startTag}updated comment%{endTag} to ensure information is not lost."
+msgstr ""
+
 msgid "This commit is part of merge request %{link_to_merge_request}. Comments created here will be created in the context of that merge request."
 msgstr ""