Frontend: Proper gettext extraction with gettext-extractor

2 files changed, 33 insertions, 5 deletions

diff --git a/app/assets/javascripts/locale/ensure_single_line.js b/app/assets/javascripts/locale/ensure_single_line.js
new file mode 100644
index 00000000000..47c52fe6c50
--- /dev/null
+++ b/app/assets/javascripts/locale/ensure_single_line.js
@@ -0,0 +1,25 @@
+/* eslint-disable import/no-commonjs */
+
+const SPLIT_REGEX = /\s*[\r\n]+\s*/;
+
+/**
+ *
+ * strips newlines from strings and replaces them with a single space
+ *
+ * @example
+ *
+ * ensureSingleLine('foo  \n  bar') === 'foo bar'
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+module.exports = function ensureSingleLine(str) {
+  // This guard makes the function significantly faster
+  if (str.includes('\n') || str.includes('\r')) {
+    return str
+      .split(SPLIT_REGEX)
+      .filter(s => s !== '')
+      .join(' ');
+  }
+  return str;
+};
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 2cc5fb10027..1ae3362c4bc 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -1,4 +1,5 @@
 import Jed from 'jed';
+import ensureSingleLine from './ensure_single_line';
 import sprintf from './sprintf';
 
 const languageCode = () => document.querySelector('html').getAttribute('lang') || 'en';
@@ -10,7 +11,7 @@ delete window.translations;
   @param text The text to be translated
   @returns {String} The translated text
 */
-const gettext = locale.gettext.bind(locale);
+const gettext = text => locale.gettext.bind(locale)(ensureSingleLine(text));
 
 /**
   Translate the text with a number
@@ -23,7 +24,10 @@ const gettext = locale.gettext.bind(locale);
   @returns {String} Translated text with the number replaced (eg. '2 days')
 */
 const ngettext = (text, pluralText, count) => {
-  const translated = locale.ngettext(text, pluralText, count).replace(/%d/g, count).split('|');
+  const translated = locale
+    .ngettext(ensureSingleLine(text), ensureSingleLine(pluralText), count)
+    .replace(/%d/g, count)
+    .split('|');
 
   return translated[translated.length - 1];
 };
@@ -40,7 +44,7 @@ const ngettext = (text, pluralText, count) => {
   @returns {String} Translated context based text
 */
 const pgettext = (keyOrContext, key) => {
-  const normalizedKey = key ? `${keyOrContext}|${key}` : keyOrContext;
+  const normalizedKey = ensureSingleLine(key ? `${keyOrContext}|${key}` : keyOrContext);
   const translated = gettext(normalizedKey).split('|');
 
   return translated[translated.length - 1];
@@ -52,8 +56,7 @@ const pgettext = (keyOrContext, key) => {
   @param formatOptions for available options, please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
   @returns {Intl.DateTimeFormat}
 */
-const createDateTimeFormat =
-  formatOptions => Intl.DateTimeFormat(languageCode(), formatOptions);
+const createDateTimeFormat = formatOptions => Intl.DateTimeFormat(languageCode(), formatOptions);
 
 export { languageCode };
 export { gettext as __ };