fix(i18n,translate): issues/354 remove withTranslation (#355)

* i18n, replace withTranslation new HOC, use translate function
* redux, remove withTranslation convenience HOCs

src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap

@@ -67,6 +67,7 @@ exports[`Authentication Component should render a non-connected component error:
     <PageLayout>
       <PageHeader
         key=".0"
+        t={[Function]}
         viewId={null}
       >
         <PageHeader>

src/components/authentication/authentication.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { BinocularsIcon, LockIcon } from '@patternfly/react-icons';
-import { connectRouterTranslate, reduxActions, reduxSelectors } from '../../redux';
+import { connectRouter, reduxActions, reduxSelectors } from '../../redux';
 import { rhsmApiTypes } from '../../types';
 import { helpers } from '../../common';
 import { Redirect, routerHelpers, routerTypes } from '../router/router';
 import MessageView from '../messageView/messageView';
+import { translate } from '../i18n/i18n';
 
 /**
  * An authentication pass-through component.
@@ -82,9 +83,8 @@ class Authentication extends Component {
 /**
  * Prop types.
  *
- * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, navigation: Array,
- *     t: Function, children: Node, initializeChrome: Function, session: object, history: object,
- *     setNavigation: Function}}
+ * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, t: Function,
+ *     children: Node, initializeChrome: Function, session: object, history: object}}
  */
 Authentication.propTypes = {
   authorizeUser: PropTypes.func,
@@ -110,9 +110,9 @@ Authentication.propTypes = {
 /**
  * Default props.
  *
- * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, navigation: Array,
- *     t: Function, initializeChrome: Function, session: {authorized: boolean, pending: boolean,
- *     errorMessage: string, error: boolean, status: null}, setNavigation: Function}}
+ * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, t: translate,
+ *     initializeChrome: Function, session: {authorized: boolean, errorCodes: Array, pending: boolean,
+ *     errorMessage: string, error: boolean, status: null}}}
  */
 Authentication.defaultProps = {
   authorizeUser: helpers.noop,
@@ -127,7 +127,7 @@ Authentication.defaultProps = {
     pending: false,
     status: null
   },
-  t: helpers.noopTranslate
+  t: translate
 };
 
 /**
@@ -150,6 +150,6 @@ const mapDispatchToProps = dispatch => ({
  */
 const makeMapStateToProps = reduxSelectors.user.makeUserSession();
 
-const ConnectedAuthentication = connectRouterTranslate(makeMapStateToProps, mapDispatchToProps)(Authentication);
+const ConnectedAuthentication = connectRouter(makeMapStateToProps, mapDispatchToProps)(Authentication);
 
 export { ConnectedAuthentication as default, ConnectedAuthentication, Authentication };

src/components/c3GraphCard/c3GraphCard.js

@@ -4,13 +4,14 @@ import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/
 import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
-import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
+import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import { helpers, dateHelpers } from '../../common';
 import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
 import { c3GraphCardHelpers } from './c3GraphCardHelpers';
 import { C3GraphCardLegendItem } from './c3GraphCardLegendItem';
 import { graphCardTypes } from '../graphCard/graphCardTypes';
 import { C3Chart } from '../c3Chart/c3Chart';
+import { translate } from '../i18n/i18n';
 
 /**
  * A chart/graph card.
@@ -247,7 +248,7 @@ C3GraphCard.propTypes = {
  * Default props.
  *
  * @type {{getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
- *     viewId: string, t: Function, children: null, pending: boolean, graphData: object,
+ *     viewId: string, t: translate, children: null, pending: boolean, graphData: object,
  *     isDisabled: boolean, error: boolean, cardTitle: null, filterGraphData: Array}}
  */
 C3GraphCard.defaultProps = {
@@ -260,7 +261,7 @@ C3GraphCard.defaultProps = {
   isDisabled: helpers.UI_DISABLED_GRAPH,
   pending: false,
   selectOptionsType: 'default',
-  t: helpers.noopTranslate,
+  t: translate,
   productShortLabel: '',
   viewId: 'graphCard'
 };
@@ -282,6 +283,6 @@ const mapDispatchToProps = dispatch => ({
   getGraphReportsCapacity: (id, query) => dispatch(reduxActions.rhsm.getGraphReportsCapacity(id, query))
 });
 
-const ConnectedGraphCard = connectTranslate(makeMapStateToProps, mapDispatchToProps)(C3GraphCard);
+const ConnectedGraphCard = connect(makeMapStateToProps, mapDispatchToProps)(C3GraphCard);
 
 export { ConnectedGraphCard as default, ConnectedGraphCard, C3GraphCard };

src/components/graphCard/graphCard.js

@@ -4,7 +4,7 @@ import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/
 import { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
-import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
+import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import { helpers, dateHelpers } from '../../common';
 import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
 import { graphCardHelpers } from './graphCardHelpers';
@@ -13,6 +13,7 @@ import GraphCardChartTooltip from './graphCardChartTooltip';
 import GraphCardChartLegend from './graphCardChartLegend';
 import { ChartArea } from '../chartArea/chartArea';
 import { Loader } from '../loader/loader';
+import { translate } from '../i18n/i18n';
 
 /**
  * A chart/graph card.
@@ -228,7 +229,7 @@ GraphCard.propTypes = {
  * Default props.
  *
  * @type {{getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
- *     viewId: string, t: Function, children: null, pending: boolean, graphData: object,
+ *     viewId: string, t: translate, children: null, pending: boolean, graphData: object,
  *     isDisabled: boolean, error: boolean, cardTitle: null, filterGraphData: Array}}
  */
 GraphCard.defaultProps = {
@@ -241,7 +242,7 @@ GraphCard.defaultProps = {
   isDisabled: helpers.UI_DISABLED_GRAPH,
   pending: false,
   selectOptionsType: 'default',
-  t: helpers.noopTranslate,
+  t: translate,
   productShortLabel: '',
   viewId: 'graphCard'
 };
@@ -263,6 +264,6 @@ const mapDispatchToProps = dispatch => ({
  */
 const makeMapStateToProps = reduxSelectors.graphCard.makeGraphCard();
 
-const ConnectedGraphCard = connectTranslate(makeMapStateToProps, mapDispatchToProps)(GraphCard);
+const ConnectedGraphCard = connect(makeMapStateToProps, mapDispatchToProps)(GraphCard);
 
 export { ConnectedGraphCard as default, ConnectedGraphCard, GraphCard };

src/components/graphCard/graphCardChartLegend.js

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { EyeSlashIcon } from '@patternfly/react-icons';
-import { connectTranslate, store, reduxTypes } from '../../redux';
+import { connect, store, reduxTypes } from '../../redux';
 import { helpers } from '../../common';
+import { translate } from '../i18n/i18n';
 
 /**
  * A custom chart legend.
@@ -196,7 +197,7 @@ GraphCardChartLegend.propTypes = {
 /**
  * Default props.
  *
- * @type {{datum: {dataSets: Array}, product: string, viewId: string, t: Function, legend: {},
+ * @type {{datum: {dataSets: Array}, product: string, viewId: string, t: translate, legend: object,
  *     chart: {hide: Function, toggle: Function, isToggled: Function}}}
  */
 GraphCardChartLegend.defaultProps = {
@@ -210,12 +211,12 @@ GraphCardChartLegend.defaultProps = {
   },
   legend: {},
   product: '',
-  t: helpers.noopTranslate,
+  t: translate,
   viewId: 'graphCardLegend'
 };
 
 const mapStateToProps = ({ graph }) => ({ legend: graph.legend });
 
-const ConnectedGraphCardChartLegend = connectTranslate(mapStateToProps)(GraphCardChartLegend);
+const ConnectedGraphCardChartLegend = connect(mapStateToProps)(GraphCardChartLegend);
 
 export { ConnectedGraphCardChartLegend as default, ConnectedGraphCardChartLegend, GraphCardChartLegend };

src/components/graphCard/graphCardChartTooltip.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 import { getTooltipDate } from './graphCardHelpers';
-import { helpers } from '../../common';
+import { translate } from '../i18n/i18n';
 
 /**
  * A custom chart tooltip.
@@ -113,14 +112,12 @@ GraphCardChartTooltip.propTypes = {
 /**
  * Default props.
  *
- * @type {{datum: {}, product: string, t: Function}}
+ * @type {{datum: object, product: string, t: translate}}
  */
 GraphCardChartTooltip.defaultProps = {
   datum: {},
   product: '',
-  t: helpers.noopTranslate
+  t: translate
 };
 
-const TranslatedGraphCardChartTooltip = withTranslation()(GraphCardChartTooltip);
-
-export { TranslatedGraphCardChartTooltip as default, TranslatedGraphCardChartTooltip, GraphCardChartTooltip };
+export { GraphCardChartTooltip as default, GraphCardChartTooltip };

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -207,7 +207,7 @@ Array [
       },
       Object {
         "key": "curiosity-optin.cardIsErrorDescription",
-        "match": "translate('curiosity-optin.cardIsErrorDescription', { appName: helpers.UI_DISPLAY_NAME }, [ <Button isInline component=\\"a\\" variant=\\"link\\" target=\\"_blank\\" href=\\"https://access.redhat.com/account-team\\" /> ])",
+        "match": "t('curiosity-optin.cardIsErrorDescription', { appName: helpers.UI_DISPLAY_NAME }, [ <Button isInline component=\\"a\\" variant=\\"link\\" target=\\"_blank\\" href=\\"https://access.redhat.com/account-team\\" /> ])",
       },
       Object {
         "key": "curiosity-optin.buttonIsActive",
@@ -276,7 +276,7 @@ Array [
     "keys": Array [
       Object {
         "key": "",
-        "match": "translate(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkSquareAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
+        "match": "t(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkSquareAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
       },
     ],
   },

src/components/i18n/__tests__/i18n.test.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { mount, shallow } from 'enzyme';
 import _get from 'lodash/get';
 import { I18n, translate, translateComponent } from '../i18n';
-import { helpers } from '../../../common';
 import enLocales from '../../../../public/locales/en-US';
 
 /**
@@ -101,7 +100,7 @@ describe('I18n Component', () => {
     };
 
     ExampleComponent.defaultProps = {
-      t: helpers.noopTranslate
+      t: translate
     };
 
     const TranslatedComponent = translateComponent(ExampleComponent);

src/components/i18n/i18n.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18next from 'i18next';
 import XHR from 'i18next-xhr-backend';
-import { initReactI18next, Trans, withTranslation } from 'react-i18next';
+import { initReactI18next, Trans } from 'react-i18next';
 import { helpers } from '../../common/helpers';
 
 /**
@@ -27,12 +27,16 @@ const translate = (translateKey, values = null, components) => {
 };
 
 /**
- * Apply string replacements against a component.
+ * Apply string replacements against a component, HOC.
  *
- * @param {Node} component
+ * @param {Node} Component
  * @returns {Node}
  */
-const translateComponent = component => (!helpers.TEST_MODE && withTranslation()(component)) || component;
+const translateComponent = Component => {
+  const withTranslation = ({ ...props }) => <Component {...props} t={translate} i18n={i18next} />;
+  withTranslation.displayName = 'withTranslation';
+  return withTranslation;
+};
 
 /**
  * ToDo: reevaluate the "I18nextProvider" on package update.

src/components/loader/__tests__/__snapshots__/loader.test.js.snap

@@ -79,6 +79,7 @@ exports[`Loader Component should handle variant loader components: variant: tabl
 exports[`Loader Component should handle variant loader components: variant: title 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId={null}
   >
     <Skeleton

src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap

@@ -3,6 +3,7 @@
 exports[`MessageView Component should have fallback conditions for all props: fallback display 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId={null}
   >
     Subscription Watch
@@ -17,6 +18,7 @@ exports[`MessageView Component should have fallback conditions for all props: fa
 exports[`MessageView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId={null}
   >
     Subscription Watch

src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap

@@ -3,17 +3,20 @@
 exports[`OpenshiftView Component should display an alternate graph on query-string update: alternate graph 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId="OpenShift"
   >
     t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
-    <withI18nextTranslation(Toolbar)
+    <Toolbar
       graphQuery={
         Object {
           "granularity": "daily",
         }
       }
+      isDisabled={false}
+      t={[Function]}
       viewId="OpenShift"
     />
   </PageToolbar>
@@ -74,17 +77,20 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
 exports[`OpenshiftView Component should have a fallback title: title 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId="OpenShift"
   >
     t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
-    <withI18nextTranslation(Toolbar)
+    <Toolbar
       graphQuery={
         Object {
           "granularity": "daily",
         }
       }
+      isDisabled={false}
+      t={[Function]}
       viewId="OpenShift"
     />
   </PageToolbar>
@@ -145,17 +151,20 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
 exports[`OpenshiftView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
   <PageHeader
+    t={[Function]}
     viewId="OpenShift"
   >
     t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
-    <withI18nextTranslation(Toolbar)
+    <Toolbar
       graphQuery={
         Object {
           "granularity": "daily",
         }
       }
+      isDisabled={false}
+      t={[Function]}
       viewId="OpenShift"
     />
   </PageToolbar>