fix(build, routerTypes): issues/34 dynamic router baseName (#68)

* build, dotenv path prefix * build, html template add in lang attribute from dotenv * routerTypes, create a dynamic routing baseName
RedHatInsights · Aug 2, 2019 · fdd3b06 · fdd3b06
1 parent bd9239c
commit fdd3b06
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 43 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,7 @@
 REACT_APP_UI_VERSION=$npm_package_version
 REACT_APP_UI_NAME=subscription-reporting
 REACT_APP_UI_DISPLAY_NAME=Subscription Reporting
+REACT_APP_UI_DEPLOY_PATH_PREFIX=${UI_DEPLOY_PATH_PREFIX}
 PUBLIC_URL=${UI_DEPLOY_PATH_PREFIX}/apps/subscription-reporting/
 
 REACT_APP_AJAX_TIMEOUT=60000

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="%REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG%">
   <head>
     <meta charset="utf-8" />
     <title>%REACT_APP_UI_DISPLAY_NAME%</title>

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -6,6 +6,7 @@ Object {
   "PROD_MODE": false,
   "REVIEW_MODE": false,
   "TEST_MODE": true,
+  "UI_DEPLOY_PATH_PREFIX": "",
   "UI_DISPLAY_NAME": "Subscription Reporting",
   "UI_NAME": "subscription-reporting",
   "UI_PATH": "/apps/subscription-reporting/",

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -35,6 +35,8 @@ const TEST_MODE = process.env.REACT_APP_ENV === 'test';
 
 const UI_NAME = process.env.REACT_APP_UI_NAME;
 
+const UI_DEPLOY_PATH_PREFIX = process.env.REACT_APP_UI_DEPLOY_PATH_PREFIX;
+
 const UI_DISPLAY_NAME = process.env.REACT_APP_UI_DISPLAY_NAME;
 
 const UI_PATH = process.env.PUBLIC_URL || '/';
@@ -52,6 +54,7 @@ const helpers = {
   REVIEW_MODE,
   TEST_MODE,
   UI_NAME,
+  UI_DEPLOY_PATH_PREFIX,
   UI_DISPLAY_NAME,
   UI_PATH,
   UI_VERSION

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -18,17 +18,11 @@ exports[`Authorization Component should render a non-connected component authori
   }
   routes={
     Array [
-      Object {
-        "component": [Function],
-        "exact": true,
-        "id": "overview",
-        "title": "Subscription Reporting",
-        "to": "/",
-      },
       Object {
         "component": [Function],
         "exact": true,
         "id": "rhel",
+        "redirect": true,
         "title": "Red Hat Enterprise Linux",
         "to": "/rhel",
       },
@@ -63,17 +57,11 @@ exports[`Authorization Component should render a non-connected component error:
   }
   routes={
     Array [
-      Object {
-        "component": [Function],
-        "exact": true,
-        "id": "overview",
-        "title": "Subscription Reporting",
-        "to": "/",
-      },
       Object {
         "component": [Function],
         "exact": true,
         "id": "rhel",
+        "redirect": true,
         "title": "Red Hat Enterprise Linux",
         "to": "/rhel",
       },

diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap
@@ -5,18 +5,15 @@ exports[`Router Component should render a basic component: basic 1`] = `
   className="curiosity-content"
 >
   <Switch>
-    <Route
-      component={[Function]}
-      exact={true}
-      key="/"
-      path="/"
-    />
     <Route
       component={[Function]}
       exact={true}
       key="/rhel"
       path="/rhel"
     />
+    <Redirect
+      to="/rhel"
+    />
   </Switch>
 </div>
 `;
diff --git a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap
@@ -1,20 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterTypes should return specific properties: baseName 1`] = `"/apps/subscription-reporting/"`;
+exports[`RouterTypes should return a generated baseName: app base lorem base name 1`] = `"/apps/lorem"`;
+
+exports[`RouterTypes should return a generated baseName: app base name 1`] = `"/apps/appName"`;
+
+exports[`RouterTypes should return a generated baseName: beta app base name 1`] = `"/beta/apps/appName"`;
+
+exports[`RouterTypes should return a generated baseName: beta app lorem base name 1`] = `"/beta/apps/lorem"`;
 
 exports[`RouterTypes should return specific properties: routes 1`] = `
 Array [
-  Object {
-    "component": [Function],
-    "exact": true,
-    "id": "overview",
-    "title": "Subscription Reporting",
-    "to": "/",
-  },
   Object {
     "component": [Function],
     "exact": true,
     "id": "rhel",
+    "redirect": true,
     "title": "Red Hat Enterprise Linux",
     "to": "/rhel",
   },

diff --git a/src/components/router/__tests__/routerTypes.test.js b/src/components/router/__tests__/routerTypes.test.js
@@ -1,8 +1,39 @@
-import { baseName, routes } from '../routerTypes';
+import { baseName, dynamicBaseName, routes } from '../routerTypes';
 
 describe('RouterTypes', () => {
   it('should return specific properties', () => {
-    expect(baseName).toMatchSnapshot('baseName');
+    expect(baseName).toBeDefined();
+    expect(dynamicBaseName).toBeDefined();
     expect(routes).toMatchSnapshot('routes');
   });
+
+  it('should return a generated baseName', () => {
+    expect(
+      dynamicBaseName({
+        pathName: '/apps/appName',
+        pathPrefix: '/beta'
+      })
+    ).toMatchSnapshot('app base name');
+
+    expect(
+      dynamicBaseName({
+        pathName: '/apps/lorem/appName',
+        pathPrefix: '/beta'
+      })
+    ).toMatchSnapshot('app base lorem base name');
+
+    expect(
+      dynamicBaseName({
+        pathName: '/beta/apps/appName',
+        pathPrefix: '/beta'
+      })
+    ).toMatchSnapshot('beta app base name');
+
+    expect(
+      dynamicBaseName({
+        pathName: '/beta/apps/lorem/appName',
+        pathPrefix: '/beta'
+      })
+    ).toMatchSnapshot('beta app lorem base name');
+  });
 });
diff --git a/src/components/router/routerTypes.js b/src/components/router/routerTypes.js
@@ -2,30 +2,41 @@ import { helpers } from '../../common/helpers';
 import RhelView from '../rhelView/rhelView';
 
 /**
- * Return the application base directory.
- * @type {string}
+ * Return an assumed dynamic route baseName directory
+ * based on a predictable platform directory depth of
+ * /[OPTIONAL]/apps/[APP NAME]
+ *
+ * @param pathName {string}
+ * @param pathPrefix {string}
+ * @return {string}
  */
-const baseName = helpers.UI_PATH;
+const dynamicBaseName = ({ pathName, pathPrefix }) => {
+  const path = pathName.split('/');
+
+  path.shift();
+
+  const pathSlice = pathPrefix && new RegExp(path[0]).test(pathPrefix) ? 3 : 2;
+
+  return `/${path.slice(0, pathSlice).join('/')}`;
+};
+
+const baseName =
+  (helpers.TEST_MODE && '/') ||
+  dynamicBaseName({ pathName: window.location.pathname, pathPrefix: helpers.UI_DEPLOY_PATH_PREFIX });
 
 /**
  * Return array of objects that describe navigation
  * @return {array}
  */
 const routes = [
-  {
-    title: 'Subscription Reporting',
-    id: 'overview',
-    to: '/',
-    component: RhelView,
-    exact: true
-  },
   {
     title: 'Red Hat Enterprise Linux',
     id: 'rhel',
     to: '/rhel',
+    redirect: true,
     component: RhelView,
     exact: true
   }
 ];
 
-export { routes as default, baseName, routes };
+export { routes as default, baseName, dynamicBaseName, routes };
diff --git a/tests/__snapshots__/html.test.js.snap b/tests/__snapshots__/html.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Index.HTML should have a specific html output: html output 1`] = `
 "
 <!doctype html>
-<html lang=\\"en\\">
+<html lang=\\"en-US\\">
 <head>
 <meta charset=\\"utf-8\\"/>
 <title>Subscription Reporting