fix(i18n): ent-5022 allow empty string context value (#939)

RedHatInsights · Jul 11, 2022 · 61150f5 · 61150f5
1 parent 418c660
commit 61150f5
Show file tree

Hide file tree

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

diff --git a/src/components/i18n/__tests__/i18n.test.js b/src/components/i18n/__tests__/i18n.test.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { shallow } from 'enzyme';
 import _get from 'lodash/get';
 import enLocales from '../../../../public/locales/en-US.json';
-import { I18n, translate, translateComponent } from '../i18n';
+import { EMPTY_CONTEXT, I18n, translate, translateComponent } from '../i18n';
 
 /**
  * Get translation keys.
@@ -97,13 +97,17 @@ describe('I18n Component', () => {
   });
 
   it('should attempt to perform a string replace', () => {
+    const emptyContext = translate('lorem.ipsum', { context: EMPTY_CONTEXT });
+    const emptyPartialContext = translate('lorem.ipsum', { context: ['hello', EMPTY_CONTEXT] });
     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({
+      emptyContext,
+      emptyPartialContext,
       localeKey,
       placeholder,
       multiContext,

diff --git a/src/components/i18n/i18n.js b/src/components/i18n/i18n.js
@@ -6,16 +6,25 @@ import { initReactI18next, Trans } from 'react-i18next';
 import { useMount } from 'react-use';
 import { helpers } from '../../common/helpers';
 
+/**
+ * Check to help provide an empty context.
+ *
+ * @type {string}
+ */
+const EMPTY_CONTEXT = 'LOCALE_EMPTY_CONTEXT';
+
 /**
  * Apply a string towards a key. Optional replacement values and component/nodes.
  * See, https://react.i18next.com/
  *
  * @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 />]"
+ * @param {object} options
+ * @param {string} options.emptyContextValue Check to allow an empty context value.
  * @returns {string|React.ReactNode}
  */
-const translate = (translateKey, values = null, components) => {
+const translate = (translateKey, values = null, components, { emptyContextValue = EMPTY_CONTEXT } = {}) => {
   const updatedValues = values;
   let updatedTranslateKey = translateKey;
 
@@ -25,8 +34,11 @@ const translate = (translateKey, values = null, components) => {
 
   if (Array.isArray(updatedValues?.context)) {
     updatedValues.context = updatedValues.context
+      .map(value => (value === emptyContextValue && ' ') || value)
       .filter(value => typeof value === 'string' && value.length > 0)
       .join('_');
+  } else if (updatedValues?.context === emptyContextValue) {
+    updatedValues.context = ' ';
   }
 
   if (helpers.TEST_MODE) {
@@ -143,4 +155,4 @@ I18n.defaultProps = {
   locale: null
 };
 
-export { I18n as default, I18n, i18next, translate, translateComponent };
+export { I18n as default, I18n, i18next, translate, translateComponent, EMPTY_CONTEXT };