fix(build,routing): issues/77 naming, routing, views (#132)

* build, npm script proxy run, remove staging path * build, dotenv, expand app brand, rename expand * helpers, app brand, rename expand * authentication, correct history routing * rhelView, expand routing params to display title * tourView, initial view, routing params to display title * routerTypes, dynamic base name, staging to beta move * router, pass additional routing details to rendered components
RedHatInsights · Nov 19, 2019 · 400ee1d · 400ee1d
1 parent 60a1a5c
commit 400ee1d
Show file tree

Hide file tree

Showing 18 changed files with 241 additions and 116 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,8 @@
 REACT_APP_UI_VERSION=$npm_package_version
 REACT_APP_UI_NAME=subscriptions
-REACT_APP_UI_DISPLAY_NAME=Subscription Reporting
+REACT_APP_UI_DISPLAY_NAME=subscription watch
+REACT_APP_UI_DISPLAY_CONFIG_NAME=Subscription Watch
+REACT_APP_UI_DISPLAY_START_NAME=Subscription watch
 REACT_APP_UI_DEPLOY_PATH_PREFIX=${UI_DEPLOY_PATH_PREFIX}
 PUBLIC_URL=${UI_DEPLOY_PATH_PREFIX}/apps/subscriptions/
 

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "release": "standard-version",
     "start": "run-s dev:chrome; run-p -l api:dev start:js",
     "start:js": "react-scripts start",
-    "start:proxy": "sh -ac '. ./.env.proxy; open https://ci.foo.redhat.com:1337/beta/staging/subscriptions/; run-s api:proxy-hosts; run-p -l start:js api:proxy'",
+    "start:proxy": "sh -ac '. ./.env.proxy; open https://ci.foo.redhat.com:1337/beta/subscriptions/; run-s api:proxy-hosts; run-p -l start:js api:proxy'",
     "start:standalone": "rm ./.env.development.local; run-p -l api:dev start:js",
     "test": "run-s test:lint test:ci",
     "test:ci": "export CI=true; react-scripts test --env=jsdom --roots=./src --coverage",

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -8,7 +8,9 @@ Object {
   "TEST_MODE": true,
   "UI_DEPLOY_PATH_PREFIX": "",
   "UI_DISABLED": false,
-  "UI_DISPLAY_NAME": "Subscription Reporting",
+  "UI_DISPLAY_CONFIG_NAME": "Subscription Watch",
+  "UI_DISPLAY_NAME": "subscription watch",
+  "UI_DISPLAY_START_NAME": "Subscription watch",
   "UI_LOGGER_ID": "curiosity",
   "UI_NAME": "subscriptions",
   "UI_PATH": "/",

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -21,6 +21,10 @@ const UI_DISABLED = process.env.REACT_APP_UI_DISABLED === 'true';
 
 const UI_DISPLAY_NAME = process.env.REACT_APP_UI_DISPLAY_NAME;
 
+const UI_DISPLAY_CONFIG_NAME = process.env.REACT_APP_UI_DISPLAY_CONFIG_NAME;
+
+const UI_DISPLAY_START_NAME = process.env.REACT_APP_UI_DISPLAY_START_NAME;
+
 const UI_LOGGER_ID = process.env.REACT_APP_UI_LOGGER_ID || 'GUI';
 
 const UI_NAME = process.env.REACT_APP_UI_NAME;
@@ -41,6 +45,8 @@ const helpers = {
   UI_DEPLOY_PATH_PREFIX,
   UI_DISABLED,
   UI_DISPLAY_NAME,
+  UI_DISPLAY_CONFIG_NAME,
+  UI_DISPLAY_START_NAME,
   UI_LOGGER_ID,
   UI_NAME,
   UI_PATH,

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -24,26 +24,6 @@ exports[`Authorization Component should render a non-connected component authori
         "pathParameter": "RHEL",
         "title": "Red Hat Enterprise Linux",
       },
-      Object {
-        "id": "computenode",
-        "pathParameter": "RHEL Compute Node",
-        "title": "Compute Node",
-      },
-      Object {
-        "id": "desktop",
-        "pathParameter": "RHEL Desktop",
-        "title": "Desktop",
-      },
-      Object {
-        "id": "server",
-        "pathParameter": "RHEL Server",
-        "title": "Server",
-      },
-      Object {
-        "id": "workstation",
-        "pathParameter": "RHEL Workstation",
-        "title": "Workstation",
-      },
       Object {
         "id": "arm",
         "pathParameter": "RHEL for ARM",
@@ -101,26 +81,6 @@ exports[`Authorization Component should render a non-connected component error:
         "pathParameter": "RHEL",
         "title": "Red Hat Enterprise Linux",
       },
-      Object {
-        "id": "computenode",
-        "pathParameter": "RHEL Compute Node",
-        "title": "Compute Node",
-      },
-      Object {
-        "id": "desktop",
-        "pathParameter": "RHEL Desktop",
-        "title": "Desktop",
-      },
-      Object {
-        "id": "server",
-        "pathParameter": "RHEL Server",
-        "title": "Server",
-      },
-      Object {
-        "id": "workstation",
-        "pathParameter": "RHEL Workstation",
-        "title": "Workstation",
-      },
       Object {
         "id": "arm",
         "pathParameter": "RHEL for ARM",

diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -19,13 +19,10 @@ class Authentication extends Component {
     try {
       if (helpers.PROD_MODE || helpers.REVIEW_MODE) {
         insights.chrome.init();
-      }
-
-      if (helpers.PROD_MODE) {
         insights.chrome.identifyApp(appName);
         insights.chrome.navigation(this.buildNavigation());
 
-        this.appNav = insights.chrome.on('APP_NAVIGATION', event => history.push(`/${event.navId}`));
+        this.appNav = insights.chrome.on('APP_NAVIGATION', event => history.push(`${event.navId}`));
         this.buildNav = history.listen(() => insights.chrome.navigation(this.buildNavigation()));
       }
 

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -1,14 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RhelView Component should have a fallback title: title 1`] = `
+<Fragment>
+  <PageHeader>
+    <PageHeaderTitle
+      title="Subscription watch"
+    />
+  </PageHeader>
+  <PageSection>
+    <Connect(RhelGraphCard)
+      key="lorem ipsum"
+      productId="lorem ipsum"
+    />
+  </PageSection>
+</Fragment>
+`;
+
 exports[`RhelView Component should render a non-connected component: non-connected 1`] = `
 <Fragment>
   <PageHeader>
     <PageHeaderTitle
-      title="Red Hat Enterprise Linux"
+      title="Dolor sit"
     />
   </PageHeader>
   <PageSection>
     <Connect(RhelGraphCard)
+      key="lorem ipsum"
       productId="lorem ipsum"
     />
   </PageSection>

diff --git a/src/components/rhelView/__tests__/rhelView.test.js b/src/components/rhelView/__tests__/rhelView.test.js
@@ -6,11 +6,25 @@ describe('RhelView Component', () => {
   it('should render a non-connected component', () => {
     const props = {
       routeDetail: {
-        pathParameter: 'lorem ipsum'
+        pathParameter: 'lorem ipsum',
+        routeItem: {
+          title: 'Dolor sit'
+        }
       }
     };
 
     const component = shallow(<RhelView {...props} />);
     expect(component).toMatchSnapshot('non-connected');
   });
+
+  it('should have a fallback title', () => {
+    const props = {
+      routeDetail: {
+        pathParameter: 'lorem ipsum'
+      }
+    };
+
+    const component = shallow(<RhelView {...props} />);
+    expect(component).toMatchSnapshot('title');
+  });
 });
diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -4,6 +4,7 @@ import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-com
 import { PageSection } from '@patternfly/react-core';
 import { connectRouter } from '../../redux';
 import RhelGraphCard from '../rhelGraphCard/rhelGraphCard';
+import { helpers } from '../../common';
 
 class RhelView extends React.Component {
   componentDidMount() {}
@@ -14,10 +15,12 @@ class RhelView extends React.Component {
     return (
       <React.Fragment>
         <PageHeader>
-          <PageHeaderTitle title="Red Hat Enterprise Linux" />
+          <PageHeaderTitle
+            title={(routeDetail.routeItem && routeDetail.routeItem.title) || helpers.UI_DISPLAY_START_NAME}
+          />
         </PageHeader>
         <PageSection>
-          <RhelGraphCard productId={routeDetail.pathParameter} />
+          <RhelGraphCard key={routeDetail.pathParameter} productId={routeDetail.pathParameter} />
         </PageSection>
       </React.Fragment>
     );
@@ -26,11 +29,16 @@ class RhelView extends React.Component {
 
 RhelView.propTypes = {
   routeDetail: PropTypes.shape({
-    pathParameter: PropTypes.string.isRequired
-  }).isRequired
+    pathParameter: PropTypes.string.isRequired,
+    routeItem: PropTypes.shape({
+      title: PropTypes.string
+    })
+  })
 };
 
-RhelView.defaultProps = {};
+RhelView.defaultProps = {
+  routeDetail: {}
+};
 
 const mapStateToProps = () => ({});
 

diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap
@@ -22,12 +22,30 @@ exports[`Router Component should render a basic component: basic 1`] = `
   <Switch>
     <Route
       exact={true}
-      key="/rhel/:variant?"
-      path="/rhel/:variant?"
+      key="/rhel-sw/all"
+      path="/rhel-sw/all"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/rhel-sw/:variant"
+      path="/rhel-sw/:variant"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/soon"
+      path="/soon"
+      render={[Function]}
+    />
+    <Route
+      exact={true}
+      key="/tour"
+      path="/tour"
       render={[Function]}
     />
     <Redirect
-      to="/rhel/:variant?"
+      to="/rhel-sw/all"
     />
   </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,18 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterTypes should return a generated baseName: app base lorem base name 1`] = `"/apps/lorem"`;
+exports[`RouterTypes should return a generated baseName: app base lorem base name 1`] = `"/beta/appName"`;
 
-exports[`RouterTypes should return a generated baseName: app base name 1`] = `"/apps/appName"`;
+exports[`RouterTypes should return a generated baseName: app base name 1`] = `"/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 base name 1`] = `"/beta/appName"`;
 
-exports[`RouterTypes should return a generated baseName: beta app lorem base name 1`] = `"/beta/apps/lorem"`;
+exports[`RouterTypes should return a generated baseName: beta app lorem route name 1`] = `"/beta/appName"`;
 
 exports[`RouterTypes should return route details that match navigation: route detail: computenode 1`] = `
 Object {
-  "id": "computenode",
-  "pathParameter": "RHEL Compute Node",
-  "title": "Compute Node",
+  "default": true,
+  "id": "all",
+  "pathParameter": "RHEL",
+  "title": "Red Hat Enterprise Linux",
 }
 `;
 
@@ -42,26 +43,6 @@ Array [
     "pathParameter": "RHEL",
     "title": "Red Hat Enterprise Linux",
   },
-  Object {
-    "id": "computenode",
-    "pathParameter": "RHEL Compute Node",
-    "title": "Compute Node",
-  },
-  Object {
-    "id": "desktop",
-    "pathParameter": "RHEL Desktop",
-    "title": "Desktop",
-  },
-  Object {
-    "id": "server",
-    "pathParameter": "RHEL Server",
-    "title": "Server",
-  },
-  Object {
-    "id": "workstation",
-    "pathParameter": "RHEL Workstation",
-    "title": "Workstation",
-  },
   Object {
     "id": "arm",
     "pathParameter": "RHEL for ARM",
@@ -91,11 +72,37 @@ Array [
     "component": [Function],
     "disabled": false,
     "exact": true,
-    "id": "rhel",
     "redirect": true,
     "render": true,
     "title": "Red Hat Enterprise Linux",
-    "to": "/rhel/:variant?",
+    "to": "/rhel-sw/all",
+  },
+  Object {
+    "component": [Function],
+    "disabled": false,
+    "exact": true,
+    "id": "rhel-sw",
+    "render": true,
+    "title": "Red Hat Enterprise Linux",
+    "to": "/rhel-sw/:variant",
+  },
+  Object {
+    "component": [Function],
+    "disabled": false,
+    "exact": true,
+    "id": "soon",
+    "render": true,
+    "title": "Tour",
+    "to": "/soon",
+  },
+  Object {
+    "component": [Function],
+    "disabled": false,
+    "exact": true,
+    "id": "tour",
+    "render": true,
+    "title": "Tour",
+    "to": "/tour",
   },
 ]
 `;
diff --git a/src/components/router/__tests__/routerTypes.test.js b/src/components/router/__tests__/routerTypes.test.js
@@ -12,31 +12,31 @@ describe('RouterTypes', () => {
   it('should return a generated baseName', () => {
     expect(
       dynamicBaseName({
-        pathName: '/apps/appName',
+        pathName: '/appName',
         pathPrefix: '/beta'
       })
     ).toMatchSnapshot('app base name');
 
     expect(
       dynamicBaseName({
-        pathName: '/apps/lorem/appName',
+        pathName: '/beta/appName',
         pathPrefix: '/beta'
       })
     ).toMatchSnapshot('app base lorem base name');
 
     expect(
       dynamicBaseName({
-        pathName: '/beta/apps/appName',
+        pathName: '/beta/appName',
         pathPrefix: '/beta'
       })
     ).toMatchSnapshot('beta app base name');
 
     expect(
       dynamicBaseName({
-        pathName: '/beta/apps/lorem/appName',
+        pathName: '/beta/appName/loremRoute',
         pathPrefix: '/beta'
       })
-    ).toMatchSnapshot('beta app lorem base name');
+    ).toMatchSnapshot('beta app lorem route name');
   });
 
   it('should return route details that match navigation', () => {

diff --git a/src/components/router/router.js b/src/components/router/router.js
@@ -31,7 +31,8 @@ class Router extends React.Component {
                   <item.component
                     routeDetail={{
                       baseName,
-                      navigation,
+                      routes,
+                      routeItem: { ...item },
                       ...routeDetail
                     }}
                     {...routeProps}