Move i18n for Comment Form component to Notes app I18n file

app/assets/javascripts/notes/components/comment_form.vue

@@ -20,12 +20,15 @@ import {
   splitCamelCase,
   slugifyWithUnderscore,
 } from '~/lib/utils/text_utility';
-import { __, sprintf } from '~/locale';
+import { sprintf } from '~/locale';
 import markdownField from '~/vue_shared/components/markdown/field.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
 import * as constants from '../constants';
 import eventHub from '../event_hub';
+import { COMMENT_FORM } from '../i18n';
+
 import issuableStateMixin from '../mixins/issuable_state';
 import CommentFieldLayout from './comment_field_layout.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
@@ -33,13 +36,7 @@ import noteSignedOutWidget from './note_signed_out_widget.vue';
 
 export default {
   name: 'CommentForm',
-  i18n: {
-    submitButton: {
-      startThread: __('Start thread'),
-      comment: __('Comment'),
-      commentHelp: __('Add a general comment to this %{noteableDisplayName}.'),
-    },
-  },
+  i18n: COMMENT_FORM,
   noteTypeComment: constants.COMMENT,
   noteTypeDiscussion: constants.DISCUSSION,
   components: {
@@ -96,12 +93,14 @@ export default {
       return this.getUserData.id;
     },
     commentButtonTitle() {
-      return this.noteType === constants.COMMENT ? __('Comment') : __('Start thread');
+      return this.noteType === constants.COMMENT
+        ? this.$options.i18n.comment
+        : this.$options.i18n.startThread;
     },
     startDiscussionDescription() {
       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.');
+        ? this.$options.i18n.discussionThatNeedsResolution
+        : this.$options.i18n.discussion;
     },
     commentDescription() {
       return sprintf(this.$options.i18n.submitButton.commentHelp, {
@@ -121,14 +120,14 @@ export default {
       const openOrClose = this.isOpen ? 'close' : 'reopen';
 
       if (this.note.length) {
-        return sprintf(__('%{actionText} & %{openOrClose} %{noteable}'), {
+        return sprintf(this.$options.i18n.actionButtonWithNote, {
           actionText: this.commentButtonTitle,
           openOrClose,
           noteable: this.noteableDisplayName,
         });
       }
 
-      return sprintf(__('%{openOrClose} %{noteable}'), {
+      return sprintf(this.$options.i18n.actionButton, {
         openOrClose: capitalizeFirstCharacter(openOrClose),
         noteable: this.noteableDisplayName,
       });
@@ -171,8 +170,8 @@ export default {
     },
     issuableTypeTitle() {
       return this.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
-        ? __('merge request')
-        : __('issue');
+        ? this.$options.i18n.mergeRequest
+        : this.$options.i18n.issue;
     },
     isIssue() {
       return this.noteableDisplayName === constants.ISSUE_NOTEABLE_TYPE;
@@ -242,9 +241,7 @@ export default {
           })
           .catch(() => {
             this.discard(false);
-            const msg = __(
-              'Your comment could not be submitted! Please check your network connection and try again.',
-            );
+            const msg = this.$options.i18n.GENERIC_UNSUBMITTABLE_NETWORK;
             Flash(msg, 'alert', this.$el);
             this.note = noteData.data.note.note; // Restore textarea content.
             this.removePlaceholderNotes();
@@ -310,7 +307,7 @@ export default {
         const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
 
         this.autosave = new Autosave($(this.$refs.textarea), [
-          __('Note'),
+          this.$options.i18n.note,
           noteableType,
           this.getNoteableData.id,
         ]);
@@ -363,8 +360,8 @@ export default {
                     data-qa-selector="comment_field"
                     data-testid="comment-field"
                     :data-supports-quick-actions="!glFeatures.tributeAutocomplete"
-                    :aria-label="__('Comment')"
-                    :placeholder="__('Write a comment or drag your files here…')"
+                    :aria-label="$options.i18n.comment"
+                    :placeholder="$options.i18n.bodyPlaceholder"
                     @keydown.up="editCurrentUserLastNote()"
                     @keydown.meta.enter="handleSave()"
                     @keydown.ctrl.enter="handleSave()"
@@ -379,12 +376,12 @@ export default {
                 class="gl-mb-6"
                 data-testid="confidential-note-checkbox"
               >
-                {{ s__('Notes|Make this comment confidential') }}
+                {{ $options.i18n.confidential }}
                 <gl-icon
                   v-gl-tooltip:tooltipcontainer.bottom
                   name="question"
                   :size="16"
-                  :title="s__('Notes|Confidential comments are only visible to project members')"
+                  :title="$options.i18n.confidentialVisibility"
                   class="gl-text-gray-500"
                 />
               </gl-form-checkbox>

app/assets/javascripts/notes/i18n.js

+import { __, s__ } from '~/locale';
+
+export const COMMENT_FORM = {
+  GENERIC_UNSUBMITTABLE_NETWORK: __(
+    'Your comment could not be submitted! Please check your network connection and try again.',
+  ),
+  note: __('Note'),
+  comment: __('Comment'),
+  issue: __('issue'),
+  startThread: __('Start thread'),
+  mergeRequest: __('merge request'),
+  bodyPlaceholder: __('Write a comment or drag your files here…'),
+  confidential: s__('Notes|Make this comment confidential'),
+  confidentialVisibility: s__('Notes|Confidential comments are only visible to project members'),
+  discussionThatNeedsResolution: __(
+    'Discuss a specific suggestion or question that needs to be resolved.',
+  ),
+  discussion: __('Discuss a specific suggestion or question.'),
+  actionButtonWithNote: __('%{actionText} & %{openOrClose} %{noteable}'),
+  actionButton: __('%{openOrClose} %{noteable}'),
+  submitButton: {
+    startThread: __('Start thread'),
+    comment: __('Comment'),
+    commentHelp: __('Add a general comment to this %{noteableDisplayName}.'),
+  },
+};