From 63334ebf5cff944b27f7f50e4ba236eb25afc419 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Wed, 29 Jul 2020 00:27:17 -0400 Subject: [PATCH] fix(i18n,translate): issues/354 remove withTranslation (#355) * i18n, replace withTranslation new HOC, use translate function * redux, remove withTranslation convenience HOCs --- .../__snapshots__/authentication.test.js.snap | 1 + .../authentication/authentication.js | 18 ++++++++--------- src/components/c3GraphCard/c3GraphCard.js | 9 +++++---- src/components/graphCard/graphCard.js | 9 +++++---- .../graphCard/graphCardChartLegend.js | 9 +++++---- .../graphCard/graphCardChartTooltip.js | 11 ++++------ .../__tests__/__snapshots__/i18n.test.js.snap | 4 ++-- src/components/i18n/__tests__/i18n.test.js | 3 +-- src/components/i18n/i18n.js | 12 +++++++---- .../__snapshots__/loader.test.js.snap | 1 + .../__snapshots__/messageView.test.js.snap | 2 ++ .../__snapshots__/openshiftView.test.js.snap | 15 +++++++++++--- src/components/openshiftView/openshiftView.js | 9 +++++---- src/components/optinView/optinView.js | 10 +++++----- .../__snapshots__/pageHeader.test.js.snap | 3 +++ .../__snapshots__/pageLayout.test.js.snap | 1 + src/components/pageLayout/pageHeader.js | 11 +++++++--- .../__snapshots__/rhelView.test.js.snap | 15 +++++++++++--- src/components/rhelView/rhelView.js | 9 +++++---- .../__snapshots__/tableSkeleton.test.js.snap | 16 +++++++++++---- src/components/table/table.js | 11 ++++------ src/components/table/tableSkeleton.js | 12 +++++------ src/components/toolbar/toolbar.js | 10 ++++------ src/redux/index.js | 20 +------------------ 24 files changed, 120 insertions(+), 101 deletions(-) diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap index 5013c657c..7793fdfd8 100644 --- a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap +++ b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap @@ -67,6 +67,7 @@ exports[`Authentication Component should render a non-connected component error: diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js index 00162c69a..9626e902c 100644 --- a/src/components/authentication/authentication.js +++ b/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 }; diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js index 62e813d61..0af8a8e5a 100644 --- a/src/components/c3GraphCard/c3GraphCard.js +++ b/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 }; diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js index 2ba051bcb..3ab872b29 100644 --- a/src/components/graphCard/graphCard.js +++ b/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 }; diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js index cc39404fe..b2772673b 100644 --- a/src/components/graphCard/graphCardChartLegend.js +++ b/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 }; diff --git a/src/components/graphCard/graphCardChartTooltip.js b/src/components/graphCard/graphCardChartTooltip.js index ff60c24c6..3a739035c 100644 --- a/src/components/graphCard/graphCardChartTooltip.js +++ b/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 }; diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index 6b7fe1b07..d4ac3e31e 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/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 }, [