Vue-i18n: app/assets/javascripts/notes directory

i18n linting for .vue files under the
app/assets/javascripts/notes directory

9 files changed, 90 insertions, 50 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 5a4b5f9398b..6c1738f0f1b 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -65,14 +65,12 @@ export default {
       return this.getUserData.id;
     },
     commentButtonTitle() {
-      return this.noteType === constants.COMMENT ? 'Comment' : 'Start thread';
+      return this.noteType === constants.COMMENT ? __('Comment') : __('Start thread');
     },
     startDiscussionDescription() {
-      let text = 'Discuss a specific suggestion or question';
-      if (this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE) {
-        text += ' that needs to be resolved';
-      }
-      return `${text}.`;
+      return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
+        ? __('Discuss a specific suggestion or question that needs to be resolved.')
+        : __('Discuss a specific suggestion or question.');
     },
     isOpen() {
       return this.openState === constants.OPENED || this.openState === constants.REOPENED;
@@ -127,8 +125,8 @@ export default {
     },
     issuableTypeTitle() {
       return this.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
-        ? 'merge request'
-        : 'issue';
+        ? __('merge request')
+        : __('issue');
     },
     trackingLabel() {
       return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
@@ -203,7 +201,7 @@ export default {
                 this.discard();
               } else {
                 Flash(
-                  'Something went wrong while adding your comment. Please try again.',
+                  __('Something went wrong while adding your comment. Please try again.'),
                   'alert',
                   this.$refs.commentForm,
                 );
@@ -219,8 +217,9 @@ export default {
           .catch(() => {
             this.enableButton();
             this.discard(false);
-            const msg = `Your comment could not be submitted!
-Please check your network connection and try again.`;
+            const msg = __(
+              'Your comment could not be submitted! Please check your network connection and try again.',
+            );
             Flash(msg, 'alert', this.$el);
             this.note = noteData.data.note.note; // Restore textarea content.
             this.removePlaceholderNotes();
@@ -298,7 +297,7 @@ Please check your network connection and try again.`;
         const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
 
         this.autosave = new Autosave($(this.$refs.textarea), [
-          'Note',
+          __('Note'),
           noteableType,
           this.getNoteableData.id,
         ]);
@@ -359,8 +358,8 @@ Please check your network connection and try again.`;
                 class="note-textarea js-vue-comment-form js-note-text
 js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
                 data-supports-quick-actions="true"
-                aria-label="Description"
-                placeholder="Write a comment or drag your files here…"
+                :aria-label="__('Description')"
+                :placeholder="__('Write a comment or drag your files here…')"
                 @keydown.up="editCurrentUserLastNote()"
                 @keydown.meta.enter="handleSave()"
                 @keydown.ctrl.enter="handleSave()"
@@ -381,7 +380,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                   data-track-event="click_button"
                   @click.prevent="handleSave()"
                 >
-                  {{ __(commentButtonTitle) }}
+                  {{ commentButtonTitle }}
                 </button>
                 <button
                   :disabled="isSubmitButtonDisabled"
@@ -390,7 +389,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                   class="btn btn-success note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
                   data-display="static"
                   data-toggle="dropdown"
-                  aria-label="Open comment type dropdown"
+                  :aria-label="__('Open comment type dropdown')"
                 >
                   <i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i>
                 </button>
@@ -404,8 +403,14 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     >
                       <i aria-hidden="true" class="fa fa-check icon"> </i>
                       <div class="description">
-                        <strong>Comment</strong>
-                        <p>Add a general comment to this {{ noteableDisplayName }}.</p>
+                        <strong>{{ __('Comment') }}</strong>
+                        <p>
+                          {{
+                            sprintf(__('Add a general comment to this %{noteableDisplayName}.'), {
+                              noteableDisplayName,
+                            })
+                          }}
+                        </p>
                       </div>
                     </button>
                   </li>
@@ -418,7 +423,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     >
                       <i aria-hidden="true" class="fa fa-check icon"> </i>
                       <div class="description">
-                        <strong>Start thread</strong>
+                        <strong>{{ __('Start thread') }}</strong>
                         <p>{{ startDiscussionDescription }}</p>
                       </div>
                     </button>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 54c242b2fda..164e79c6294 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -100,7 +100,7 @@ export default {
               class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button"
               @click="fetchDiff"
             >
-              Try again
+              {{ __('Try again') }}
             </button>
           </td>
           <td v-else class="line_content js-success-lazy-load">
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 941b6d5cab3..d4a57d5d58d 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -4,6 +4,7 @@ import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import { glEmojiTag } from '../../emoji';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -108,23 +109,26 @@ export default {
 
       // Add myself to the beginning of the list so title will start with You.
       if (hasReactionByCurrentUser) {
-        namesToShow.unshift('You');
+        namesToShow.unshift(__('You'));
       }
 
       let title = '';
 
       // We have 10+ awarded user, join them with comma and add `and x more`.
       if (remainingAwardList.length) {
-        title = `${namesToShow.join(', ')}, and ${remainingAwardList.length} more.`;
+        title = sprintf(__(`%{listToShow}, and %{awardsListLength} more.`), {
+          listToShow: namesToShow.join(', '),
+          awardsListLength: remainingAwardList.length,
+        });
       } else if (namesToShow.length > 1) {
         // Join all names with comma but not the last one, it will be added with and text.
         title = namesToShow.slice(0, namesToShow.length - 1).join(', ');
         // If we have more than 2 users we need an extra comma before and text.
         title += namesToShow.length > 2 ? ',' : '';
-        title += ` and ${namesToShow.slice(-1)}`; // Append and text
+        title += sprintf(__(` and %{sliced}`), { sliced: namesToShow.slice(-1) }); // Append and text
       } else {
         // We have only 2 users so join them with and.
-        title = namesToShow.join(' and ');
+        title = namesToShow.join(__(' and '));
       }
 
       return title;
@@ -155,7 +159,7 @@ export default {
         awardName: parsedName,
       };
 
-      this.toggleAwardRequest(data).catch(() => Flash('Something went wrong on our end.'));
+      this.toggleAwardRequest(data).catch(() => Flash(__('Something went wrong on our end.')));
     },
   },
 };
@@ -184,7 +188,7 @@ export default {
           :class="{ 'js-user-authored': isAuthoredByMe }"
           class="award-control btn js-add-award"
           title="Add reaction"
-          aria-label="Add reaction"
+          :aria-label="__('Add reaction')"
           data-boundary="viewport"
           type="button"
         >
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 01be4f2b094..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,11 +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">
-      This comment has changed since you started editing, please review the
-      <a :href="noteHash" target="_blank" rel="noopener noreferrer">updated comment</a> to ensure
-      information is not lost.
-    </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
@@ -264,8 +276,8 @@ export default {
           name="note[note]"
           class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
           dir="auto"
-          aria-label="Description"
-          placeholder="Write a comment or drag your files here…"
+          :aria-label="__('Description')"
+          :placeholder="__('Write a comment or drag your files here…')"
           @keydown.meta.enter="handleKeySubmit()"
           @keydown.ctrl.enter="handleKeySubmit()"
           @keydown.exact.up="editMyLastNote()"
@@ -339,7 +351,7 @@ export default {
             type="button"
             @click="cancelHandler()"
           >
-            Cancel
+            {{ __('Cancel') }}
           </button>
         </template>
       </div>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 6466ab3acbe..3158e086f6c 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -103,7 +103,7 @@ export default {
       </template>
       <i
         class="fa fa-spinner fa-spin editing-spinner"
-        aria-label="Comment is being updated"
+        :aria-label="__('Comment is being updated')"
         aria-hidden="true"
       ></i>
     </span>
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 e3eb92956b1..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,12 +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">
-    Please <a :href="registerLink">register</a> or <a :href="signInLink">sign in</a> to reply
-  </div>
+  <div class="disabled-comment text-center" v-html="signedOutText"></div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index a71a89cfffc..3fbd0a9f715 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -283,8 +283,9 @@ export default {
           this.removePlaceholderNotes();
           this.isReplying = true;
           this.$nextTick(() => {
-            const msg = `Your comment could not be submitted!
-Please check your network connection and try again.`;
+            const msg = __(
+              'Your comment could not be submitted! Please check your network connection and try again.',
+            );
             Flash(msg, 'alert', this.$el);
             this.$refs.noteForm.note = noteText;
             callback(err);
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index aa80e25a3e0..2f201839d45 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -5,7 +5,7 @@ import { escape } from 'underscore';
 import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import draftMixin from 'ee_else_ce/notes/mixins/draft';
-import { s__, sprintf } from '../../locale';
+import { __, s__, sprintf } from '../../locale';
 import Flash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import noteHeader from './note_header.vue';
@@ -128,9 +128,13 @@ export default {
       this.$emit('handleEdit');
     },
     deleteHandler() {
-      const typeOfComment = this.note.isDraft ? 'pending comment' : 'comment';
-      // eslint-disable-next-line no-alert
-      if (window.confirm(`Are you sure you want to delete this ${typeOfComment}?`)) {
+      const typeOfComment = this.note.isDraft ? __('pending comment') : __('comment');
+      if (
+        // eslint-disable-next-line no-alert
+        window.confirm(
+          sprintf(__('Are you sure you want to delete this %{typeOfComment}?'), { typeOfComment }),
+        )
+      ) {
         this.isDeleting = true;
         this.$emit('handleDeleteNote', this.note);
 
@@ -141,7 +145,7 @@ export default {
             this.isDeleting = false;
           })
           .catch(() => {
-            Flash('Something went wrong while deleting your note. Please try again.');
+            Flash(__('Something went wrong while deleting your note. Please try again.'));
             this.isDeleting = false;
           });
       }
@@ -185,7 +189,7 @@ export default {
           this.isRequesting = false;
           this.isEditing = true;
           this.$nextTick(() => {
-            const msg = 'Something went wrong while editing your comment. Please try again.';
+            const msg = __('Something went wrong while editing your comment. Please try again.');
             Flash(msg, 'alert', this.$el);
             this.recoverNoteContent(noteText);
             callback();
@@ -195,7 +199,7 @@ export default {
     formCancelHandler(shouldConfirm, isDirty) {
       if (shouldConfirm && isDirty) {
         // eslint-disable-next-line no-alert
-        if (!window.confirm('Are you sure you want to cancel editing this comment?')) return;
+        if (!window.confirm(__('Are you sure you want to cancel editing this comment?'))) return;
       }
       this.$refs.noteBody.resetAutoSave();
       if (this.oldContent) {
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 4d00e957973..a0695f9e191 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,4 +1,5 @@
 <script>
+import { __ } from '~/locale';
 import { mapGetters, mapActions } from 'vuex';
 import { getLocationHash } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
@@ -170,7 +171,7 @@ export default {
         .catch(() => {
           this.setLoadingState(false);
           this.setNotesFetchedState(true);
-          Flash('Something went wrong while fetching comments. Please try again.');
+          Flash(__('Something went wrong while fetching comments. Please try again.'));
         });
     },
     initPolling() {