fix(redirect): ent-3916 route config, dynamic loading (#691)

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</0>",
     "description": "Monitor your usage based on your subscription terms.",

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 [

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`] = `
-<Fragment>
-  Redirected towards 
-  /openshift-sw
-</Fragment>
+<Suspense
+  baseName="/"
+  fallback={
+    <Loader
+      skeletonProps={
+        Object {
+          "size": "sm",
+        }
+      }
+      tableProps={Object {}}
+      variant="title"
+    />
+  }
+  history={Object {}}
+  isRedirect={true}
+  isReplace={false}
+  route="/openshift-container"
+  t={[Function]}
+  url={null}
+>
+  <Route
+    path="*"
+  >
+    <lazy />
+  </Route>
+</Suspense>
 `;
 
 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
   }
 >
   <withRouter(Redirect)
+    history={Object {}}
     isRedirect={true}
-    route="/openshift-sw"
+    route="/openshift-container"
   />
 </Router>
 `;
 
 exports[`Redirect Component should handle missing routes with and without withRouter: missing route: outside of withRouter 1`] = `
-<Fragment>
-  Redirected towards 
-  /lorem-ipsum
-</Fragment>
+<Suspense
+  baseName="/"
+  fallback={
+    <Loader
+      skeletonProps={
+        Object {
+          "size": "sm",
+        }
+      }
+      tableProps={Object {}}
+      variant="title"
+    />
+  }
+  history={Object {}}
+  isRedirect={true}
+  isReplace={false}
+  route="/lorem-ipsum"
+  t={[Function]}
+  url={null}
+>
+  <Route
+    path="*"
+  >
+    <Component />
+  </Route>
+</Suspense>
 `;
 
 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
   }
 >
   <withRouter(Redirect)
+    history={Object {}}
     isRedirect={true}
     route="/lorem-ipsum"
   />

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 {

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(<Redirect {...props} />);
 
@@ -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(<Redirect {...props} />);
 

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)) ||
+        (() => <MessageView message={`${t('curiosity-view.redirectError')}, ${route}`} />);
 
       return (
         <React.Suspense fallback={<Loader variant="title" />}>
-          <Route path="*">{routeDetail && <routeDetail.component />}</Route>
+          <Route path="*">
+            <View />
+          </Route>
         </React.Suspense>
       );
     }
@@ -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);

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 (
           <Route

src/components/router/routerHelpers.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import path from 'path';
 import { helpers } from '../../common/helpers';
 import { routesConfig } from '../../config';
@@ -227,6 +228,14 @@ const getRouteConfig = ({ id = null, pathName, returnDefault = false, config = r
   return { ...(navRouteItem || {}) };
 };
 
+/**
+ * Import a route component.
+ *
+ * @param {Node} component
+ * @returns {Node}
+ */
+const importView = component => 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,