Internationalisation of awards_handlerjs-i18n-awards_handler

This is one of many MRs opened in order to improve the overall
internationalisation of the GitLab codebase.

This commit only targets Vanilla JS files.

i18n documentation
https://docs.gitlab.com/ee/development/i18n/externalization.html

2 files changed, 74 insertions, 20 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 743f11625bc..0c97cb92440 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import { __ } from './locale';
+import { sprintf, s__, __ } from './locale';
 import { updateTooltipTitle } from './lib/utils/common_utils';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import flash from './flash';
@@ -21,14 +21,14 @@ const requestAnimationFrame =
 const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence
 
 const categoryLabelMap = {
-  activity: 'Activity',
-  people: 'People',
-  nature: 'Nature',
-  food: 'Food',
-  travel: 'Travel',
-  objects: 'Objects',
-  symbols: 'Symbols',
-  flags: 'Flags',
+  activity: __('Activity'),
+  people: __('People'),
+  nature: __('Nature'),
+  food: __('Food'),
+  travel: __('Travel'),
+  objects: __('Objects'),
+  symbols: __('Symbols'),
+  flags: __('Flags'),
 };
 
 const IS_VISIBLE = 'is-visible';
@@ -154,14 +154,15 @@ export class AwardsHandler {
     const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
     let frequentlyUsedCatgegory = '';
     if (frequentlyUsedEmojis.length > 0) {
-      frequentlyUsedCatgegory = this.renderCategory('Frequently used', frequentlyUsedEmojis, {
+      frequentlyUsedCatgegory = this.renderCategory(__('Frequently used'), frequentlyUsedEmojis, {
         menuListClass: 'frequent-emojis',
       });
     }
 
+    const placeholder = __('Search emoji');
     const emojiMenuMarkup = `
       <div class="emoji-menu ${this.menuClass}">
-        <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" />
+        <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder=${placeholder} />
 
         <div class="emoji-menu-content">
           ${frequentlyUsedCatgegory}
@@ -223,9 +224,13 @@ export class AwardsHandler {
       .catch(err => {
         emojiContentElement.insertAdjacentHTML(
           'beforeend',
-          '<p>We encountered an error while adding the remaining categories</p>',
+          __('<p>We encountered an error while adding the remaining categories</p>'),
+        );
+        throw new Error(
+          sprintf(__('Error occurred in addRemainingEmojiMenuCategories: %{message}'), {
+            message: err.message,
+          }),
         );
-        throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
       });
   }
 
@@ -406,9 +411,12 @@ export class AwardsHandler {
   toSentence(list) {
     let sentence;
     if (list.length <= 2) {
-      sentence = list.join(' and ');
+      sentence = list.join(s__('ConcatenateSentance| and '));
     } else {
-      sentence = `${list.slice(0, -1).join(', ')}, and ${list[list.length - 1]}`;
+      sentence = sprintf(s__('ConcatenateSentance|%{first} and %{last}'), {
+        first: list.slice(0, -1).join(', '),
+        last: list[list.length - 1],
+      });
     }
 
     return sentence;
@@ -418,7 +426,7 @@ export class AwardsHandler {
     const awardBlock = $emojiButton;
     const originalTitle = this.getAwardTooltip(awardBlock);
     const authors = originalTitle.split(FROM_SENTENCE_REGEX);
-    authors.splice(authors.indexOf('You'), 1);
+    authors.splice(authors.indexOf(__('You')), 1);
     return awardBlock
       .closest('.js-emoji-btn')
       .removeData('title')
@@ -435,13 +443,14 @@ export class AwardsHandler {
     if (origTitle) {
       users = origTitle.trim().split(FROM_SENTENCE_REGEX);
     }
-    users.unshift('You');
+    users.unshift(__('You'));
     return awardBlock.attr('title', this.toSentence(users)).tooltip('_fixTitle');
   }
 
   createAwardButtonForVotesBlock(votesBlock, emojiName) {
+    const title = __('You');
     const buttonHtml = `
-      <button class="btn award-control js-emoji-btn has-tooltip active" title="You">
+      <button class="btn award-control js-emoji-btn has-tooltip active" title=${title}>
         ${this.emoji.glEmojiTag(emojiName)}
         <span class="award-control-text js-counter">1</span>
       </button>
@@ -493,7 +502,7 @@ export class AwardsHandler {
 
   userAuthored($emojiButton) {
     const oldTitle = this.getAwardTooltip($emojiButton);
-    const newTitle = 'You cannot vote on your own issue, MR and note';
+    const newTitle = __('You cannot vote on your own issue, MR and note');
     updateTooltipTitle($emojiButton, newTitle).tooltip('show');
     // Restore tooltip back to award list
     return setTimeout(() => {
@@ -559,7 +568,7 @@ export class AwardsHandler {
     $('ul.emoji-menu-search, h5.emoji-search-title').remove();
     if (term.length > 0) {
       // Generate a search result block
-      const h5 = $('<h5 class="emoji-search-title"/>').text('Search results');
+      const h5 = $('<h5 class="emoji-search-title"/>').text(__('Search results'));
       const foundEmojis = this.findMatchingEmojiElements(term).show();
       const ul = $('<ul>')
         .addClass('emoji-menu-list emoji-menu-search')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 06f2f848925..5e0b115284f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -339,6 +339,9 @@ msgstr ""
 msgid "<code>\"johnsmith@example.com\": \"johnsmith@example.com\"</code> will add \"By <a href=\"#\">johnsmith@example.com</a>\" to all issues and comments originally created by johnsmith@example.com. By default, the email address or username is masked to ensure the user's privacy. Use this option if you want to show the full email address."
 msgstr ""
 
+msgid "<p>We encountered an error while adding the remaining categories</p>"
+msgstr ""
+
 msgid "<strong>%{changedFilesLength} unstaged</strong> and <strong>%{stagedFilesLength} staged</strong> changes"
 msgstr ""
 
@@ -2513,6 +2516,12 @@ msgstr ""
 msgid "CompareBranches|There isn't anything to compare."
 msgstr ""
 
+msgid "ConcatenateSentance| and "
+msgstr ""
+
+msgid "ConcatenateSentance|%{first} and %{last}"
+msgstr ""
+
 msgid "Confidential"
 msgstr ""
 
@@ -3703,6 +3712,9 @@ msgstr ""
 msgid "Error loading template."
 msgstr ""
 
+msgid "Error occurred in addRemainingEmojiMenuCategories: %{message}"
+msgstr ""
+
 msgid "Error occurred when toggling the notification subscription"
 msgstr ""
 
@@ -4101,6 +4113,9 @@ msgstr ""
 msgid "FirstPushedBy|pushed by"
 msgstr ""
 
+msgid "Flags"
+msgstr ""
+
 msgid "FlowdockService|Flowdock Git source token"
 msgstr ""
 
@@ -4128,6 +4143,9 @@ msgstr ""
 msgid "Font Color"
 msgstr ""
 
+msgid "Food"
+msgstr ""
+
 msgid "Footer message"
 msgstr ""
 
@@ -4176,6 +4194,9 @@ msgstr ""
 msgid "Found errors in your .gitlab-ci.yml:"
 msgstr ""
 
+msgid "Frequently used"
+msgstr ""
+
 msgid "From %{providerTitle}"
 msgstr ""
 
@@ -5811,6 +5832,9 @@ msgstr ""
 msgid "Naming, visibility"
 msgstr ""
 
+msgid "Nature"
+msgstr ""
+
 msgid "Nav|Help"
 msgstr ""
 
@@ -6161,6 +6185,9 @@ msgstr ""
 msgid "Object does not exist on the server or you don't have permissions to access it"
 msgstr ""
 
+msgid "Objects"
+msgstr ""
+
 msgid "Oct"
 msgstr ""
 
@@ -6340,6 +6367,9 @@ msgstr ""
 msgid "Pending"
 msgstr ""
 
+msgid "People"
+msgstr ""
+
 msgid "People without permission will never get a notification and won't be able to comment."
 msgstr ""
 
@@ -7853,6 +7883,9 @@ msgstr ""
 msgid "Search branches and tags"
 msgstr ""
 
+msgid "Search emoji"
+msgstr ""
+
 msgid "Search files"
 msgstr ""
 
@@ -7883,6 +7916,9 @@ msgstr ""
 msgid "Search projects"
 msgstr ""
 
+msgid "Search results"
+msgstr ""
+
 msgid "Search users"
 msgstr ""
 
@@ -8671,6 +8707,9 @@ msgstr ""
 msgid "Switch branch/tag"
 msgstr ""
 
+msgid "Symbols"
+msgstr ""
+
 msgid "System Hooks"
 msgstr ""
 
@@ -9700,6 +9739,9 @@ msgstr ""
 msgid "TransferProject|Transfer failed, please contact an admin."
 msgstr ""
 
+msgid "Travel"
+msgstr ""
+
 msgid "Tree view"
 msgstr ""
 
@@ -10515,6 +10557,9 @@ msgstr ""
 msgid "You cannot play this scheduled pipeline at the moment. Please wait a minute."
 msgstr ""
 
+msgid "You cannot vote on your own issue, MR and note"
+msgstr ""
+
 msgid "You cannot write to this read-only GitLab instance."
 msgstr ""