fix(i18n): ent-4251 filter undefined, empty multi-context (#775)

RedHatInsights · Sep 15, 2021 · 19bb057 · 19bb057
1 parent 6e233f3
commit 19bb057
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 21 deletions.
diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -41,15 +41,24 @@ const noopPromise = Promise.resolve({});
  * A placeholder for "t", translation method.
  * Associated with the i18n package, and typically used as a default prop.
  *
- * @param {string} key
- * @param {string|object} value
+ * @param {string|Array} key
+ * @param {string|object|Array} value
  * @param {Array} components
  * @returns {string}
  */
-const noopTranslate = (key, value, components) =>
-  `t(${key}${(value && `, ${(typeof value === 'string' && value) || (value && JSON.stringify(value))}`) || ''}${
-    (components && `, ${components}`) || ''
+const noopTranslate = (key, value, components) => {
+  const updatedKey = (Array.isArray(key) && `[${key}]`) || key;
+  const updatedValue =
+    (typeof value === 'string' && value) ||
+    (Array.isArray(value) && `[${value}]`) ||
+    (Object.keys(value || '').length && JSON.stringify(value)) ||
+    '';
+  const updatedComponents = (components && `${components}`) || '';
+
+  return `t(${updatedKey}${(updatedValue && `, ${updatedValue}`) || ''}${
+    (updatedComponents && `, ${updatedComponents}`) || ''
   })`;
+};
 
 /**
  * Is dev mode active.

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -24,7 +24,7 @@ exports[`GraphCardChartLegend Component should handle a click event: click event
   tabIndex={0}
   variant="link"
 >
-  t(curiosity-graph.label_loremIpsum,curiosity-graph.label_no, {"product":"test","context":"test"})
+  t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
 </Button>
 `;
 
@@ -52,7 +52,7 @@ exports[`GraphCardChartLegend Component should handle a click event: click event
   tabIndex={0}
   variant="link"
 >
-  t(curiosity-graph.label_loremIpsum,curiosity-graph.label_no, {"product":"test","context":"test"})
+  t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
 </Button>
 `;
 
@@ -75,7 +75,7 @@ exports[`GraphCardChartLegend Component should handle a click event: click event
   tabIndex={0}
   variant="link"
 >
-  t(curiosity-graph.label_loremIpsum,curiosity-graph.label_no, {"product":"test","context":"test"})
+  t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
 </Button>
 `;
 
@@ -202,7 +202,7 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.label_loremIpsum,curiosity-graph.label_no, {"product":"","context":""})
+      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"","context":""})
     </Button>
   </Tooltip>
 </Fragment>
@@ -244,7 +244,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.label_loremIpsum,curiosity-graph.label_no, {"product":"test","context":"test"})
+      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
     </Button>
   </Tooltip>
   <Tooltip
@@ -276,7 +276,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.label_ametConsectetur,curiosity-graph.label_no, {"product":"test","context":"test"})
+      t([curiosity-graph.label_ametConsectetur,curiosity-graph.label_no], {"product":"test","context":"test"})
     </Button>
   </Tooltip>
   <Tooltip
@@ -313,7 +313,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.label_threshold,curiosity-graph.label_no, {"product":"test","context":"test"})
+      t([curiosity-graph.label_threshold,curiosity-graph.label_no], {"product":"test","context":"test"})
     </Button>
   </Tooltip>
   <Tooltip
@@ -350,7 +350,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.label_threshold,curiosity-graph.label_no, {"product":"test","context":"test"})
+      t([curiosity-graph.label_threshold,curiosity-graph.label_no], {"product":"test","context":"test"})
     </Button>
   </Tooltip>
 </Fragment>

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -6,6 +6,8 @@ exports[`I18n Component should attempt to perform a string replace: translate 1`
 Object {
   "localeKey": "t(lorem.ipsum)",
   "multiContext": "t(lorem.ipsum, {\\"context\\":\\"hello_world\\"})",
+  "multiContextWithEmptyValue": "t(lorem.ipsum, {\\"context\\":\\"hello_world\\"})",
+  "multiKey": "t([lorem.ipsum,lorem.fallback])",
   "placeholder": "t(lorem.ipsum, hello world)",
 }
 `;
@@ -27,6 +29,15 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/common/helpers.js",
+    "keys": Array [
+      Object {
+        "key": "",
+        "match": "t(\${updatedKey}\${(updatedValue && \`, \${updatedValue}\`)",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/authentication/authentication.js",
     "keys": Array [

diff --git a/src/components/i18n/__tests__/i18n.test.js b/src/components/i18n/__tests__/i18n.test.js
@@ -108,11 +108,15 @@ describe('I18n Component', () => {
     const localeKey = translate('lorem.ipsum');
     const placeholder = translate('lorem.ipsum', 'hello world');
     const multiContext = translate('lorem.ipsum', { context: ['hello', 'world'] });
+    const multiContextWithEmptyValue = translate('lorem.ipsum', { context: ['hello', undefined, null, '', 'world'] });
+    const multiKey = translate(['lorem.ipsum', undefined, null, '', 'lorem.fallback']);
 
     expect({
       localeKey,
       placeholder,
-      multiContext
+      multiContext,
+      multiContextWithEmptyValue,
+      multiKey
     }).toMatchSnapshot('translate');
   });
 

diff --git a/src/components/i18n/i18n.js b/src/components/i18n/i18n.js
@@ -10,31 +10,38 @@ import { helpers } from '../../common/helpers';
  * Apply a string towards a key. Optional replacement values and component/nodes.
  * See, https://react.i18next.com/
  *
- * @param {string} translateKey
- * @param {string|Array} values A default string if the key can't be found. An array of objects (key/value) pairs used to replace string tokes. i.e. "[{ hello: 'world' }]"
+ * @param {string|Array} translateKey A key reference, or an array of a primary key with fallback keys.
+ * @param {string|object|Array} values A default string if the key can't be found. An object with i18next settings. Or an array of objects (key/value) pairs used to replace string tokes. i.e. "[{ hello: 'world' }]"
  * @param {Array} components An array of HTML/React nodes used to replace string tokens. i.e. "[<span />, <React.Fragment />]"
  * @returns {string|Node}
  */
 const translate = (translateKey, values = null, components) => {
   const updatedValues = values;
+  let updatedTranslateKey = translateKey;
+
+  if (Array.isArray(updatedTranslateKey)) {
+    updatedTranslateKey = updatedTranslateKey.filter(value => typeof value === 'string' && value.length > 0);
+  }
 
   if (Array.isArray(updatedValues?.context)) {
-    updatedValues.context = updatedValues.context.join('_');
+    updatedValues.context = updatedValues.context
+      .filter(value => typeof value === 'string' && value.length > 0)
+      .join('_');
   }
 
   if (helpers.TEST_MODE) {
-    return helpers.noopTranslate(translateKey, updatedValues, components);
+    return helpers.noopTranslate(updatedTranslateKey, updatedValues, components);
   }
 
   if (components) {
     return (
-      (i18next.store && <Trans i18nKey={translateKey} values={updatedValues} components={components} />) || (
-        <React.Fragment>t({translateKey})</React.Fragment>
+      (i18next.store && <Trans i18nKey={updatedTranslateKey} values={updatedValues} components={components} />) || (
+        <React.Fragment>t({updatedTranslateKey})</React.Fragment>
       )
     );
   }
 
-  return (i18next.store && i18next.t(translateKey, updatedValues)) || `t(${translateKey})`;
+  return (i18next.store && i18next.t(updatedTranslateKey, updatedValues)) || `t([${updatedTranslateKey}])`;
 };
 
 /**