From a38e52b15038321aa82072acce1a0f3d54bf8ea9 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 27 May 2021 11:00:06 -0400 Subject: [PATCH] fix(redirect): ent-3916 route config, dynamic loading (#691) --- public/locales/en-US.json | 1 + .../__tests__/__snapshots__/i18n.test.js.snap | 9 +++ .../__snapshots__/redirect.test.js.snap | 64 ++++++++++++++++--- .../__snapshots__/routerHelpers.test.js.snap | 1 + .../router/__tests__/redirect.test.js | 6 +- src/components/router/redirect.js | 33 ++++++---- src/components/router/router.js | 13 +--- src/components/router/routerHelpers.js | 11 ++++ 8 files changed, 104 insertions(+), 34 deletions(-) diff --git a/public/locales/en-US.json b/public/locales/en-US.json index 8a26f222c..20a33fe59 100644 --- a/public/locales/en-US.json +++ b/public/locales/en-US.json @@ -169,6 +169,7 @@ "tourDescription": "We'll walk you through each step, and include insight into how Red Hat collects and uses subscription data." }, "curiosity-view": { + "redirectError": "Redirect failed", "title": "{{appName}}", "subtitle": "Monitor your usage based on your subscription terms. <0>Learn more about {{appName}} reporting", "description": "Monitor your usage based on your subscription terms.", diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index a888c02ba..6f13664ad 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -382,6 +382,15 @@ Array [ }, ], }, + Object { + "file": "./src/components/router/redirect.js", + "keys": Array [ + Object { + "key": "curiosity-view.redirectError", + "match": "t('curiosity-view.redirectError')", + }, + ], + }, Object { "file": "./src/components/table/table.js", "keys": Array [ diff --git a/src/components/router/__tests__/__snapshots__/redirect.test.js.snap b/src/components/router/__tests__/__snapshots__/redirect.test.js.snap index e4eea36d6..497d76c0e 100644 --- a/src/components/router/__tests__/__snapshots__/redirect.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/redirect.test.js.snap @@ -8,10 +8,32 @@ exports[`Redirect Component should handle a redirect with a url: redirect url 1` `; exports[`Redirect Component should handle existing routes with and without withRouter: existing route: outside of withRouter 1`] = ` - - Redirected towards - /openshift-sw - + + } + history={Object {}} + isRedirect={true} + isReplace={false} + route="/openshift-container" + t={[Function]} + url={null} +> + + + + `; exports[`Redirect Component should handle existing routes with and without withRouter: existing route: routed redirect route 1`] = ` @@ -38,17 +60,40 @@ exports[`Redirect Component should handle existing routes with and without withR } > `; exports[`Redirect Component should handle missing routes with and without withRouter: missing route: outside of withRouter 1`] = ` - - Redirected towards - /lorem-ipsum - + + } + history={Object {}} + isRedirect={true} + isReplace={false} + route="/lorem-ipsum" + t={[Function]} + url={null} +> + + + + `; exports[`Redirect Component should handle missing routes with and without withRouter: missing route: routed redirect route 1`] = ` @@ -75,6 +120,7 @@ exports[`Redirect Component should handle missing routes with and without withRo } > diff --git a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap index 6c7f51a80..41c3584c5 100644 --- a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap @@ -690,6 +690,7 @@ Object { }, "getRouteConfig": [Function], "getRouteConfigByPath": [Function], + "importView": [Function], "platformLandingRedirect": "/", "platformModalRedirect": "/?not_entitled=subscriptions", "productGroups": Object { diff --git a/src/components/router/__tests__/redirect.test.js b/src/components/router/__tests__/redirect.test.js index 777a222f5..0a690f2c7 100644 --- a/src/components/router/__tests__/redirect.test.js +++ b/src/components/router/__tests__/redirect.test.js @@ -36,7 +36,8 @@ describe('Redirect Component', () => { it('should handle missing routes with and without withRouter', () => { const props = { isRedirect: true, - route: '/lorem-ipsum' + route: '/lorem-ipsum', + history: {} }; const component = shallow(); @@ -54,7 +55,8 @@ describe('Redirect Component', () => { it('should handle existing routes with and without withRouter', () => { const props = { isRedirect: true, - route: '/openshift-sw' + route: '/openshift-container', + history: {} }; const component = shallow(); diff --git a/src/components/router/redirect.js b/src/components/router/redirect.js index 16749d218..390514813 100644 --- a/src/components/router/redirect.js +++ b/src/components/router/redirect.js @@ -5,6 +5,8 @@ import { withRouter, Route } from 'react-router-dom'; import { routerHelpers } from './routerHelpers'; import { helpers } from '../../common'; import { Loader } from '../loader/loader'; +import MessageView from '../messageView/messageView'; +import { translate } from '../i18n/i18n'; /** * A routing redirect. @@ -14,11 +16,12 @@ import { Loader } from '../loader/loader'; * @param {object} props.history * @param {boolean} props.isRedirect * @param {boolean} props.isReplace - * @param {string} props.url * @param {string} props.route + * @param {string} props.t + * @param {string} props.url * @returns {Node} */ -const Redirect = ({ baseName, history, isRedirect, isReplace, url, route }) => { +const Redirect = ({ baseName, history, isRedirect, isReplace, route, t, url }) => { const forceNavigation = urlRoute => { if (!helpers.DEV_MODE && !helpers.TEST_MODE) { if (isReplace) { @@ -32,10 +35,15 @@ const Redirect = ({ baseName, history, isRedirect, isReplace, url, route }) => { if (isRedirect === true) { if (route && history) { const routeDetail = routerHelpers.getRouteConfigByPath({ pathName: route }).firstMatch; + const View = + (routeDetail && routerHelpers.importView(routeDetail.component)) || + (() => ); return ( }> - {routeDetail && } + + + ); } @@ -55,28 +63,31 @@ const Redirect = ({ baseName, history, isRedirect, isReplace, url, route }) => { /** * Prop types. * - * @type {{isRedirect: boolean, route: string, isReplace: boolean, history: object, baseName: string, url: string}} + * @type {{isRedirect: boolean, route: string, t: Function, isReplace: boolean, history: object, + * baseName: string, url: string}} */ Redirect.propTypes = { + baseName: PropTypes.string, history: PropTypes.object, isRedirect: PropTypes.bool.isRequired, isReplace: PropTypes.bool, - url: PropTypes.string, - baseName: PropTypes.string, - route: PropTypes.string + route: PropTypes.string, + t: PropTypes.func, + url: PropTypes.string }; /** * Default props. * - * @type {{route: null, isReplace: boolean, history: null, baseName: string, url: null}} + * @type {{route: null, t: translate, isReplace: boolean, history: null, baseName: string, url: null}} */ Redirect.defaultProps = { + baseName: routerHelpers.baseName, history: null, isReplace: false, - url: null, - baseName: routerHelpers.baseName, - route: null + route: null, + t: translate, + url: null }; const RoutedRedirect = withRouter(Redirect); diff --git a/src/components/router/router.js b/src/components/router/router.js index 987bb5396..1101a97c6 100644 --- a/src/components/router/router.js +++ b/src/components/router/router.js @@ -6,17 +6,6 @@ import Redirect from './redirect'; import { routerHelpers } from './routerHelpers'; import { Loader } from '../loader/loader'; -/** - * ToDo: re-evaluate how exclude comments work under wp5, and regex - */ -/** - * Import a route component. - * - * @param {Node} component - * @returns {Node} - */ -const importView = component => React.lazy(() => import(/* webpackExclude: /\.test\.js$/ */ `../${component}.js`)); - /** * Load routes. * @@ -40,7 +29,7 @@ const Router = ({ routes } = {}) => { return null; } - const View = await importView(item.component); + const View = await routerHelpers.importView(item.component); return ( React.lazy(() => import(/* webpackExclude: /\.test\.js$/ */ `../${component}.js`)); + const routerHelpers = { appName, baseName, @@ -238,6 +247,7 @@ const routerHelpers = { getErrorRoute, getRouteConfig, getRouteConfigByPath, + importView, platformLandingRedirect, platformModalRedirect, productGroups, @@ -258,6 +268,7 @@ export { getErrorRoute, getRouteConfig, getRouteConfigByPath, + importView, platformLandingRedirect, platformModalRedirect, productGroups,