From e70ca1b437ed4918b90ee75bd90fc2de5b3dacf8 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Sun, 15 Dec 2019 22:20:48 -0500 Subject: [PATCH] feat(openShiftView,rhelView): issues/157 openshift routing * routerTypes, apply openshift view, update route detail filter * router, expand passed values to getRouteDetail * rhelView, apply translation for titles * openshiftView, translation, mirror rhelView, filter core values * graphCard, prop for cardTitle * i18n, locale, heading, title strings --- public/locales/en-US.json | 3 +- .../__snapshots__/authentication.test.js.snap | 22 +++++++ .../__snapshots__/graphCard.test.js.snap | 12 +--- src/components/graphCard/graphCard.js | 6 +- .../__tests__/__snapshots__/i18n.test.js.snap | 12 ++-- src/components/openshiftView/openshiftView.js | 63 +++++++++++++++++++ .../__snapshots__/rhelView.test.js.snap | 2 + src/components/rhelView/rhelView.js | 14 +++-- .../__snapshots__/router.test.js.snap | 6 ++ .../__snapshots__/routerTypes.test.js.snap | 23 +++++++ .../router/__tests__/routerTypes.test.js | 4 +- src/components/router/router.js | 2 +- src/components/router/routerTypes.js | 41 +++++++----- 13 files changed, 172 insertions(+), 38 deletions(-) create mode 100644 src/components/openshiftView/openshiftView.js diff --git a/public/locales/en-US.json b/public/locales/en-US.json index f7ca6623c..f36f798b0 100644 --- a/public/locales/en-US.json +++ b/public/locales/en-US.json @@ -1,6 +1,7 @@ { "curiosity-graph": { - "heading": "CPU socket usage", + "coresHeading": "CPU core usage", + "socketsHeading": "CPU socket usage", "dropdownDaily": "Daily", "dropdownWeekly": "Weekly", "dropdownMonthly": "Monthly", diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap index 4970707ab..d58639885 100644 --- a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap +++ b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap @@ -21,29 +21,40 @@ exports[`Authorization Component should render a non-connected component authori Object { "default": true, "id": "all", + "path": "/rhel-sw/all", "pathParameter": "RHEL", "title": "Red Hat Enterprise Linux", }, Object { "id": "arm", + "path": "/rhel-sw/arm", "pathParameter": "RHEL for ARM", "title": "ARM", }, Object { "id": "ibmpower", + "path": "/rhel-sw/ibmpower", "pathParameter": "RHEL for IBM Power", "title": "IBM Power", }, Object { "id": "ibmz", + "path": "/rhel-sw/ibmz", "pathParameter": "RHEL for IBM z", "title": "IBM Z systems", }, Object { "id": "x86", + "path": "/rhel-sw/x86", "pathParameter": "RHEL for x86", "title": "x86", }, + Object { + "id": "openshift-sw", + "path": "/openshift-sw", + "pathParameter": "OpenShift Container Platform", + "title": "Openshift", + }, ] } session={ @@ -78,29 +89,40 @@ exports[`Authorization Component should render a non-connected component error: Object { "default": true, "id": "all", + "path": "/rhel-sw/all", "pathParameter": "RHEL", "title": "Red Hat Enterprise Linux", }, Object { "id": "arm", + "path": "/rhel-sw/arm", "pathParameter": "RHEL for ARM", "title": "ARM", }, Object { "id": "ibmpower", + "path": "/rhel-sw/ibmpower", "pathParameter": "RHEL for IBM Power", "title": "IBM Power", }, Object { "id": "ibmz", + "path": "/rhel-sw/ibmz", "pathParameter": "RHEL for IBM z", "title": "IBM Z systems", }, Object { "id": "x86", + "path": "/rhel-sw/x86", "pathParameter": "RHEL for x86", "title": "x86", }, + Object { + "id": "openshift-sw", + "path": "/openshift-sw", + "pathParameter": "OpenShift Container Platform", + "title": "Openshift", + }, ] } session={ diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index 8c4428891..e7b23ee69 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -5,9 +5,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec className="curiosity-usage-graph fadein" > -

- t(curiosity-graph.heading) -

+

-

- t(curiosity-graph.heading) -

+

+ + + + + + + + ); + } +} + +OpenshiftView.propTypes = { + routeDetail: PropTypes.shape({ + pathParameter: PropTypes.string.isRequired, + routeItem: PropTypes.shape({ + title: PropTypes.string + }), + errorRoute: PropTypes.shape({ + to: PropTypes.string + }) + }), + t: PropTypes.func +}; + +OpenshiftView.defaultProps = { + routeDetail: {}, + t: helpers.noopTranslate +}; + +const TranslatedOpenshiftView = withTranslation()(OpenshiftView); + +export { TranslatedOpenshiftView as default, TranslatedOpenshiftView, OpenshiftView }; diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap index e73d4a6e9..42adcc3e9 100644 --- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap +++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap @@ -9,6 +9,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = ` @@ -33,6 +34,7 @@ class RhelView extends React.Component { { id: 'threshold' } ]} productId={routeDetail.pathParameter} + cardTitle={t('curiosity-graph.socketsHeading')} errorRoute={routeDetail.errorRoute} /> @@ -50,11 +52,15 @@ RhelView.propTypes = { errorRoute: PropTypes.shape({ to: PropTypes.string }) - }) + }), + t: PropTypes.func }; RhelView.defaultProps = { - routeDetail: {} + routeDetail: {}, + t: helpers.noopTranslate }; -export { RhelView as default, RhelView }; +const TranslatedRhelView = withTranslation()(RhelView); + +export { TranslatedRhelView as default, TranslatedRhelView, RhelView }; diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap index 8f2339d9c..cc5fc54c7 100644 --- a/src/components/router/__tests__/__snapshots__/router.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/router.test.js.snap @@ -38,6 +38,12 @@ exports[`Router Component should render a basic component: basic 1`] = ` path="/rhel-sw/:variant" render={[Function]} /> + { it('should return route details that match navigation', () => { expect(getRouteDetail({ test: 'computenode' })).toMatchSnapshot('route detail: computenode'); - expect(getRouteDetail({})).toMatchSnapshot('route detail: default'); - expect(getRouteDetail(null)).toMatchSnapshot('route detail: null or undefined'); + expect(getRouteDetail({ params: {} })).toMatchSnapshot('route detail: default'); + expect(getRouteDetail({})).toMatchSnapshot('route detail: null or undefined'); }); }); diff --git a/src/components/router/router.js b/src/components/router/router.js index 7ac15420b..f7e2cf1b2 100644 --- a/src/components/router/router.js +++ b/src/components/router/router.js @@ -27,7 +27,7 @@ class Router extends React.Component { key={item.to} path={item.to} render={routeProps => { - const routeDetail = getRouteDetail(routeProps.match.params); + const routeDetail = getRouteDetail({ ...routeProps.match, ...routeProps.location }); return ( { - let navigationItem = {}; - - if (params) { - Object.values(params).forEach(value => { - navigationItem = navigation.find(item => item.id === value) || navigationItem; - }); - } - - navigationItem = - (Object.keys(navigationItem || {}).length && navigationItem) || navigation.find(item => item.default === true); - - return navigationItem; +const getRouteDetail = ({ path = null }) => { + const navigationItem = navigation.find(item => item.path === path) || {}; + return (Object.keys(navigationItem || {}).length && navigationItem) || navigation.find(item => item.default === true); }; export { routes as default, baseName, dynamicBaseName, getRouteDetail, navigation, routes };