fix(i18n): allow multi-context (#699)

RedHatInsights · Jun 7, 2021 · afcf623 · afcf623
1 parent 8bae02a
commit afcf623
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -5,6 +5,7 @@ exports[`I18n Component should attempt to perform a component translate: transla
 exports[`I18n Component should attempt to perform a string replace: translate 1`] = `
 Object {
   "localeKey": "t(lorem.ipsum)",
+  "multiContext": "t(lorem.ipsum, {\\"context\\":\\"hello_world\\"})",
   "placeholder": "t(lorem.ipsum, hello world)",
 }
 `;

diff --git a/src/components/i18n/__tests__/i18n.test.js b/src/components/i18n/__tests__/i18n.test.js
@@ -107,10 +107,12 @@ describe('I18n Component', () => {
   it('should attempt to perform a string replace', () => {
     const localeKey = translate('lorem.ipsum');
     const placeholder = translate('lorem.ipsum', 'hello world');
+    const multiContext = translate('lorem.ipsum', { context: ['hello', 'world'] });
 
     expect({
       localeKey,
-      placeholder
+      placeholder,
+      multiContext
     }).toMatchSnapshot('translate');
   });
 

diff --git a/src/components/i18n/i18n.js b/src/components/i18n/i18n.js
@@ -16,19 +16,25 @@ import { helpers } from '../../common/helpers';
  * @returns {string|Node}
  */
 const translate = (translateKey, values = null, components) => {
+  const updatedValues = values;
+
+  if (Array.isArray(updatedValues?.context)) {
+    updatedValues.context = updatedValues.context.join('_');
+  }
+
   if (helpers.TEST_MODE) {
-    return helpers.noopTranslate(translateKey, values, components);
+    return helpers.noopTranslate(translateKey, updatedValues, components);
   }
 
   if (components) {
     return (
-      (i18next.store && <Trans i18nKey={translateKey} values={values} components={components} />) || (
+      (i18next.store && <Trans i18nKey={translateKey} values={updatedValues} components={components} />) || (
         <React.Fragment>t({translateKey})</React.Fragment>
       )
     );
   }
 
-  return (i18next.store && i18next.t(translateKey, values)) || `t(${translateKey})`;
+  return (i18next.store && i18next.t(translateKey, updatedValues)) || `t(${translateKey})`;
 };
 
 /**