I18N JS files starting with mjs-i18n-m

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

6 files changed, 33 insertions, 13 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index a2ca4b07a66..657de1a051e 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -31,6 +31,7 @@ import initPerformanceBar from './performance_bar';
 import initSearchAutocomplete from './search_autocomplete';
 import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
+import { __ } from './locale';
 
 // expose jQuery as global (TODO: remove these)
 window.jQuery = jQuery;
@@ -207,9 +208,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const ref = xhrObj.status;
 
     if (ref === 401) {
-      Flash('You need to be logged in.');
+      Flash(__('You need to be logged in.'));
     } else if (ref === 404 || ref === 500) {
-      Flash('Something went wrong on our end.');
+      Flash(__('Something went wrong on our end.'));
     }
   });
 
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 509f19e6f00..e5cf43e8289 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -21,6 +21,7 @@ import { localTimeAgo } from './lib/utils/datetime_utility';
 import syntaxHighlight from './syntax_highlight';
 import Notes from './notes';
 import { polyfillSticky } from './lib/utils/sticky';
+import { __ } from './locale';
 
 // MergeRequestTabs
 //
@@ -326,7 +327,7 @@ export default class MergeRequestTabs {
       })
       .catch(() => {
         this.toggleLoading(false);
-        flash('An error occurred while fetching this tab.');
+        flash(__('An error occurred while fetching this tab.'));
       });
   }
 
@@ -416,7 +417,7 @@ export default class MergeRequestTabs {
       })
       .catch(() => {
         this.toggleLoading(false);
-        flash('An error occurred while fetching this tab.');
+        flash(__('An error occurred while fetching this tab.'));
       });
   }
 
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index f211632cf24..6aaba4e7c74 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
+import { __ } from './locale';
 
 export default class Milestone {
   constructor() {
@@ -42,7 +43,7 @@ export default class Milestone {
           $(tabElId).html(data.html);
           $target.addClass('is-loaded');
         })
-        .catch(() => flash('Error loading milestone tab'));
+        .catch(() => flash(__('Error loading milestone tab')));
     }
   }
 
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 75c18a9b6a0..43949d5cc86 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -56,14 +56,15 @@ export default class MilestoneSelect {
       const $value = $block.find('.value');
       const $loading = $block.find('.block-loading').fadeOut();
       selectedMilestoneDefault = showAny ? '' : null;
-      selectedMilestoneDefault = showNo && defaultNo ? 'No Milestone' : selectedMilestoneDefault;
+      selectedMilestoneDefault =
+        showNo && defaultNo ? __('No Milestone') : selectedMilestoneDefault;
       selectedMilestone = $dropdown.data('selected') || selectedMilestoneDefault;
 
       if (issueUpdateURL) {
         milestoneLinkTemplate = _.template(
           '<a href="<%- web_url %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>',
         );
-        milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
+        milestoneLinkNoneTemplate = `<span class="no-value">${__('None')}</span>`;
       }
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
@@ -74,28 +75,28 @@ export default class MilestoneSelect {
               extraOptions.push({
                 id: null,
                 name: null,
-                title: 'Any Milestone',
+                title: __('Any Milestone'),
               });
             }
             if (showNo) {
               extraOptions.push({
                 id: -1,
-                name: 'No Milestone',
-                title: 'No Milestone',
+                name: __('No Milestone'),
+                title: __('No Milestone'),
               });
             }
             if (showUpcoming) {
               extraOptions.push({
                 id: -2,
                 name: '#upcoming',
-                title: 'Upcoming',
+                title: __('Upcoming'),
               });
             }
             if (showStarted) {
               extraOptions.push({
                 id: -3,
                 name: '#started',
-                title: 'Started',
+                title: __('Started'),
               });
             }
             if (extraOptions.length) {
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 81ab9d8be4b..b39ad764f01 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
+import { __ } from './locale';
 
 /**
  * In each pipelines table we have a mini pipeline graph for each pipeline.
@@ -98,7 +99,7 @@ export default class MiniPipelineGraph {
         ) {
           $(button).dropdown('toggle');
         }
-        flash('An error occurred while fetching the builds.', 'alert');
+        flash(__('An error occurred while fetching the builds.'), 'alert');
       });
   }
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e6dda6a35c2..119fecd21eb 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -853,6 +853,9 @@ msgstr ""
 msgid "An error occurred while fetching the board lists. Please try again."
 msgstr ""
 
+msgid "An error occurred while fetching the builds."
+msgstr ""
+
 msgid "An error occurred while fetching the job log."
 msgstr ""
 
@@ -868,6 +871,9 @@ msgstr ""
 msgid "An error occurred while fetching the releases. Please try again."
 msgstr ""
 
+msgid "An error occurred while fetching this tab."
+msgstr ""
+
 msgid "An error occurred while getting projects"
 msgstr ""
 
@@ -952,6 +958,9 @@ msgstr ""
 msgid "Any"
 msgstr ""
 
+msgid "Any Milestone"
+msgstr ""
+
 msgid "Any encrypted tokens"
 msgstr ""
 
@@ -3818,6 +3827,9 @@ msgstr ""
 msgid "Error loading merge requests."
 msgstr ""
 
+msgid "Error loading milestone tab"
+msgstr ""
+
 msgid "Error loading project data. Please try again."
 msgstr ""
 
@@ -10921,6 +10933,9 @@ msgstr ""
 msgid "You need permission."
 msgstr ""
 
+msgid "You need to be logged in."
+msgstr ""
+
 msgid "You need to register a two-factor authentication app before you can set up a U2F device."
 msgstr ""